Merge pull request #4097 from CrocSwap/add-theme-switching

Add theme switching

src/App/App.tsx

@@ -27,6 +27,8 @@ import FooterNav from '../components/Global/FooterNav/FooterNav';
 import { RouteRenderer } from '../routes';
 import Navbar from '../components/Futa/Navbar/Navbar';
 import Footer from '../components/Futa/Footer/Footer';
+import { useModal } from '../components/Global/Modal/useModal';
+import CSSModal from '../pages/common/CSSDebug/CSSModal';
 
 /** ***** React Function *******/
 export default function App() {
@@ -102,16 +104,8 @@ export default function App() {
     }, [location]);
 
     const showMobileVersion = useMediaQuery('(max-width: 800px)');
-    // const showChatPanel =
-    //     currentLocation !== '/' &&
-    //     currentLocation !== '/404' &&
-    //     currentLocation !== '/terms' &&
-    //     currentLocation !== '/privacy' &&
-    //     currentLocation !== '/faq' &&
-    //     !currentLocation.includes('/chat') &&
-    //     isChatEnabled;
     const ambientFooter = (
-        <div data-theme={skin} className='footer_container'>
+        <div data-theme={skin.active} className='footer_container'>
             {currentLocation !== '/' &&
                 currentLocation !== '/404' &&
                 currentLocation !== '/terms' &&
@@ -123,6 +117,26 @@ export default function App() {
         </div>
     );
 
+    // logic to handle opening and closing of the CSS modal
+    const [isCSSModalOpen, openCSSModal, closeCSSModal] = useModal();
+    // bind keyboard event to toggle CSS modal open or closed
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent): void => {
+            if (
+                (e.ctrlKey || e.metaKey) &&
+                e.shiftKey
+                && e.key.toLowerCase() === 'k'
+            ) {
+                isCSSModalOpen ? closeCSSModal() : openCSSModal();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+
+        return (() => {
+            window.removeEventListener('keydown', handleKeyDown);
+        });
+    }, [isCSSModalOpen]);
+
     return (
         <>
             {location.pathname == '/' && platformName !== 'futa' && (
@@ -133,7 +147,7 @@ export default function App() {
                 className={
                     platformName === 'futa' ? 'futa_main' : containerStyle
                 }
-                data-theme={skin}
+                data-theme={skin.active}
                 style={{
                     height:
                         location.pathname == '/'
@@ -152,25 +166,17 @@ export default function App() {
                 ) : (
                     location.pathname !== '/' && <PageHeader />
                 )}
-                {/* <div
-                    className={appHeaderDropdown.isActive ? 'app_blur' : ''}
-                    onClick={() => appHeaderDropdown.setIsActive(false)}
-                    
-                    onTouchMoveCapture={() =>
-                        appHeaderDropdown.setIsActive(false)
-                    }
-                /> */}
                 <RouteRenderer platformName={platformName} />
             </FlexContainer>
             {platformName === 'futa' ? (
-                <Footer data-theme={skin} />
+                <Footer data-theme={skin.active} />
             ) : (
                 ambientFooter
             )}
-
-            <GlobalPopup data-theme={skin} />
+            <GlobalPopup data-theme={skin.active} />
             <SnackbarComponent />
             {isWalletModalOpen && <GateWalletModal />}
+            {isCSSModalOpen && <CSSModal close={() => closeCSSModal()} />}
         </>
     );
 }

src/App/components/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
     useEffect,
     useState,
     memo,
@@ -10,16 +10,13 @@ import { AnimateSharedLayout, motion } from 'framer-motion';
 import UserMenu from './UserMenu/UserMenu';
 import NetworkSelector from './NetworkSelector/NetworkSelector';
 import logo from '../../../assets/images/logos/logo_mark.svg';
-// import { BiGitBranch } from 'react-icons/bi';
-// import { APP_ENVIRONMENT, BRANCH_NAME } from '../../../ambient-utils/constants';
 import TradeNowButton from '../../../components/Home/Landing/TradeNowButton/TradeNowButton';
 import useMediaQuery from '../../../utils/hooks/useMediaQuery';
 import { AppStateContext } from '../../../contexts/AppStateContext';
 import { CrocEnvContext } from '../../../contexts/CrocEnvContext';
 import { PoolContext } from '../../../contexts/PoolContext';
 import { SidebarContext } from '../../../contexts/SidebarContext';
 import { TradeTokenContext } from '../../../contexts/TradeTokenContext';
-
 import { TradeTableContext } from '../../../contexts/TradeTableContext';
 import {
     getFormattedNumber,
@@ -32,31 +29,23 @@ import {
     swapParamsIF,
     useLinkGen,
 } from '../../../utils/hooks/useLinkGen';
-
 import { FlexContainer } from '../../../styled/Common';
 import Button from '../../../components/Form/Button';
-// import { version as appVersion } from '../../../../package.json';
 import { UserDataContext } from '../../../contexts/UserDataContext';
 import { GraphDataContext } from '../../../contexts/GraphDataContext';
 import { TokenBalanceContext } from '../../../contexts/TokenBalanceContext';
 import { TradeDataContext } from '../../../contexts/TradeDataContext';
 import { ReceiptContext } from '../../../contexts/ReceiptContext';
-import { BrandContext } from '../../../contexts/BrandContext';
+import { BrandContext, BrandContextIF } from '../../../contexts/BrandContext';
 import styles from './PageHeader.module.css';
-// import MobileDropdown from './MobileDropdown/MobileDropdown';
-// import { GiHamburgerMenu } from 'react-icons/gi';
 
 const PageHeader = function () {
     const {
         crocEnv,
         setCrocEnv,
         chainData: { chainId, poolIndex: poolId },
     } = useContext(CrocEnvContext);
-    const { headerImage } = useContext(BrandContext);
-    // const isDevMenuEnabled =
-    //     import.meta.env.VITE_IS_DEV_MENU_ENABLED !== undefined
-    //         ? import.meta.env.VITE_IS_DEV_MENU_ENABLED === 'true'
-    //         : true;
+    const { headerImage } = useContext<BrandContextIF>(BrandContext);
 
     const {
         walletModal: { open: openWalletModal },
@@ -418,8 +407,6 @@ const PageHeader = function () {
         };
     }, []);
 
-    // const [showDevMenu, setShowDevMenu] = useState(false);
-
     return (
         <>
             <header
@@ -469,16 +456,8 @@ const PageHeader = function () {
                                 overflow='visible'
                             >
                                 <NetworkSelector />
-
                                 {!isUserConnected && connectWagmiButton}
                                 <UserMenu {...userMenuProps} />
-                                {/* {isDevMenuEnabled && !desktopScreen &&  (
-                                    <GiHamburgerMenu
-                                        onClick={() =>
-                                            setShowDevMenu(!showDevMenu)
-                                        }
-                                    />
-                                )} */}
                             </FlexContainer>
                         </div>
                     )}

src/assets/branding/ambientProductionBrandAssets.ts

@@ -7,7 +7,9 @@ export const ambientProductionBrandAssets: brandIF = {
     networks: {
         // scroll mainnet
         '0x82750': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },
@@ -16,7 +18,9 @@ export const ambientProductionBrandAssets: brandIF = {
         },
         // blast mainnet
         '0x13e31': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },
@@ -25,7 +29,9 @@ export const ambientProductionBrandAssets: brandIF = {
         },
         // ethereum mainnet
         '0x1': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [{ content: 'ambient', processAs: 'text' }],
         },
     },

src/assets/branding/ambientTestnetBrandAssets.ts

@@ -7,12 +7,16 @@ export const ambientTestnetBrandAssets: brandIF = {
     networks: {
         // ethereum sepolia
         '0xaa36a7': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [{ content: 'ambient', processAs: 'text' }],
         },
         // scroll sepolia
         '0x8274f': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },
@@ -21,7 +25,9 @@ export const ambientTestnetBrandAssets: brandIF = {
         },
         // blast sepolia
         '0xa0c71fd': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },

src/assets/branding/blastBrandAssets.ts

@@ -5,7 +5,9 @@ import blastLogo from '../../assets/images/logos/blast_logo.svg';
 export const blastBrandAssets: brandIF = {
     networks: {
         '0x13e31': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },

src/assets/branding/defaultBrandAssets.ts

@@ -7,7 +7,9 @@ export const defaultBrandAssets: brandIF = {
     networks: {
         // scroll mainnet
         '0x82750': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },
@@ -16,7 +18,9 @@ export const defaultBrandAssets: brandIF = {
         },
         // blast mainnet
         '0x13e31': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },
@@ -25,17 +29,23 @@ export const defaultBrandAssets: brandIF = {
         },
         // ethereum mainnet
         '0x1': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [{ content: 'ambient', processAs: 'text' }],
         },
         // ethereum sepolia
         '0xaa36a7': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [{ content: 'ambient', processAs: 'text' }],
         },
         // scroll sepolia
         '0x8274f': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },
@@ -44,7 +54,9 @@ export const defaultBrandAssets: brandIF = {
         },
         // blast sepolia
         '0xa0c71fd': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },

src/assets/branding/futaBrandAssets.ts

@@ -5,7 +5,9 @@ export const futaBrandAssets: brandIF = {
     networks: {
         // ethereum sepolia
         '0xaa36a7': {
-            color: 'futa_dark',
+            // first value in array is default color scheme
+            color: ['futa_dark', 'purple_dark', 'purple_light'],
+            premiumColor: [],
             hero: [{ content: 'futa', processAs: 'text' }],
         },
     },

src/assets/branding/index.ts

@@ -4,3 +4,4 @@ export { ambientTestnetBrandAssets } from './ambientTestnetBrandAssets';
 export { blastBrandAssets } from './blastBrandAssets';
 export { scrollBrandAssets } from './scrollBrandAssets';
 export { futaBrandAssets } from './futaBrandAssets';
+export { sampleBrandAssets } from './sampleBrandAssets';

src/assets/branding/sampleBrandAssets.ts

@@ -0,0 +1,20 @@
+import { brandIF } from './types';
+import pageHeaderTestBanner from '../../assets/images/Temporary/pageHeaderTestBanner.png';
+
+export const sampleBrandAssets: brandIF = {
+    networks: {
+        // ethereum sepolia
+        '0x1': {
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
+            hero: [{ content: 'futa', processAs: 'text' }],
+        },
+    },
+    platformName: 'futa',
+    fontSet: 'futa',
+    showPoints: false,
+    showDexStats: false,
+    headerImage: pageHeaderTestBanner as string,
+    includeCanto: false,
+};

src/assets/branding/scrollBrandAssets.ts

@@ -6,7 +6,9 @@ export const scrollBrandAssets: brandIF = {
     networks: {
         // scroll mainnet
         '0x82750': {
-            color: 'purple_dark',
+            // first value in array is default color scheme
+            color: ['purple_dark', 'purple_light', 'futa_dark'],
+            premiumColor: [],
             hero: [
                 { content: 'ambient', processAs: 'text' },
                 { content: '×', processAs: 'separator' },

src/assets/branding/types.ts

@@ -12,7 +12,8 @@ export type networkPrefs = Partial<
     Record<
         chainIds,
         {
-            color: skins;
+            color: skins[];
+            premiumColor: skins[];
             hero: heroItem[];
         }
     >

src/components/GlobalModalPortal.tsx

@@ -1,19 +1,19 @@
-import { ReactNode, useContext } from 'react';
+import { ReactNode, ReactPortal, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { GLOBAL_MODAL_PORTAL_ID } from '../ambient-utils/constants';
-import { BrandContext } from '../contexts/BrandContext';
+import { BrandContext, BrandContextIF } from '../contexts/BrandContext';
 
 interface propsIF {
     children: ReactNode;
 }
 
 export default function GlobalModalPortal(props: propsIF) {
-    const { skin } = useContext(BrandContext);
+    const { skin } = useContext<BrandContextIF>(BrandContext);
     const { children } = props;
 
-    const getGlobalModalPortal = (elem: ReactNode) => {
+    const getGlobalModalPortal = (elem: ReactNode): ReactPortal => {
         return createPortal(
-            <div onClick={(e) => e.stopPropagation()} data-theme={skin}>
+            <div onClick={(e) => e.stopPropagation()} data-theme={skin.active}>
                 {elem}
             </div>,
             document.getElementById(GLOBAL_MODAL_PORTAL_ID) ?? document.body,