diff --git a/packages/extension/src/components/atoms/Logo/Logo.tsx b/packages/extension/src/components/atoms/Logo/Logo.tsx index 8c2f7a18c..9b2df6dc2 100644 --- a/packages/extension/src/components/atoms/Logo/Logo.tsx +++ b/packages/extension/src/components/atoms/Logo/Logo.tsx @@ -1,29 +1,17 @@ import { FC, SVGProps, useMemo } from 'react'; -import { useFeatureFlags } from '../../../hooks'; - interface LogoProps extends SVGProps { isAnimated?: boolean; } export const Logo: FC = ({ isAnimated, ...rest }) => { - const { featureFlags } = useFeatureFlags(); - const colors = useMemo(() => { - if ((featureFlags as any)['CITROUILLE_2K23']) { - return { - primary: '#FF7518', - secondary: '#FFA500', - tertiary: '#FFD700' - }; - } - //TODO: In another MR these colors will need to come from the template return { primary: '#00A8EA', secondary: '#33D3F4', tertiary: '#40EEFF' }; - }, [featureFlags]); + }, []); if (isAnimated) { return ( diff --git a/packages/extension/src/components/organisms/Header/Header.tsx b/packages/extension/src/components/organisms/Header/Header.tsx index ad8ed5f21..875faaf71 100644 --- a/packages/extension/src/components/organisms/Header/Header.tsx +++ b/packages/extension/src/components/organisms/Header/Header.tsx @@ -6,8 +6,6 @@ import OutboundIcon from '@mui/icons-material/Outbound'; import { AppBar, Box, Button, IconButton, Toolbar, Tooltip, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import copyToClipboard from 'copy-to-clipboard'; -import { GiHangingSpider } from 'react-icons/gi'; -import { SiGhostery } from 'react-icons/si'; import { useNavigate } from 'react-router-dom'; import { @@ -17,7 +15,7 @@ import { SEND_PATH, RECEIVE_PATH } from '../../../constants'; -import { useFeatureFlags, useTimeout } from '../../../hooks'; +import { useTimeout } from '../../../hooks'; import { WalletLedger } from '../../../types'; import { truncateAddress, truncateWalletName } from '../../../utils'; import { WalletIcon } from '../../atoms'; @@ -40,16 +38,11 @@ export interface HeaderProps { export const Header: FC = ({ wallet: { name, publicAddress } }) => { const navigate = useNavigate(); const setTimeout = useTimeout(2000); - const { featureFlags } = useFeatureFlags(); const [isCopied, setIsCopied] = useState(false); const truncatedAddress = useMemo(() => truncateAddress(publicAddress), [publicAddress]); - const isHalloween = useMemo(() => { - return (featureFlags as any)['CITROUILLE_2K23']; - }, [featureFlags]); - const handleShare = useCallback(() => { copyToClipboard(publicAddress); setIsCopied(true); @@ -131,16 +124,12 @@ export const Header: FC = ({ wallet: { name, publicAddress } }) => alignItems: 'center' }} > - {isHalloween ? ( - - ) : ( - - )} + Send @@ -155,16 +144,12 @@ export const Header: FC = ({ wallet: { name, publicAddress } }) => }} onClick={handleReceive} > - {isHalloween ? ( - - ) : ( - - )} + Receive diff --git a/packages/extension/src/components/organisms/NavMenu/NavMenu.tsx b/packages/extension/src/components/organisms/NavMenu/NavMenu.tsx index dbaf2e958..2634058a1 100644 --- a/packages/extension/src/components/organisms/NavMenu/NavMenu.tsx +++ b/packages/extension/src/components/organisms/NavMenu/NavMenu.tsx @@ -2,15 +2,9 @@ import { CSSProperties, FC, MouseEvent, useEffect, useMemo } from 'react'; import { BottomNavigation, BottomNavigationAction } from '@mui/material'; import { styled } from '@mui/system'; -import { FaGhost, FaHatWizard, FaSpider } from 'react-icons/fa'; -import { GiPumpkinLantern } from 'react-icons/gi'; import { useNavigate } from 'react-router-dom'; -import { - GEMWALLET_BLUE, - GEMWALLET_HALLOWEEN_ORANGE, - navigation as navigationConstant -} from '../../../constants'; +import { GEMWALLET_BLUE, navigation as navigationConstant } from '../../../constants'; import { useNavBarPosition } from '../../../contexts'; const defaultDecoration = { @@ -29,10 +23,10 @@ export interface NavMenuProps { export const NavMenu: FC = ({ indexDefaultNav }) => { const navigate = useNavigate(); - const { navBarPosition, setNavBarPosition, isHalloween } = useNavBarPosition(); + const { navBarPosition, setNavBarPosition } = useNavBarPosition(); const StyledBottomNavigation = useMemo(() => { - const backgroundColor = isHalloween ? GEMWALLET_HALLOWEEN_ORANGE : GEMWALLET_BLUE; + const backgroundColor = GEMWALLET_BLUE; return styled(BottomNavigation)` ${defaultDecoration} @@ -52,28 +46,11 @@ export const NavMenu: FC = ({ indexDefaultNav }) => { border-radius: 2px; } `; - }, [isHalloween]); + }, []); const navigation = useMemo(() => { - if (!isHalloween) { - return navigationConstant; - } - const navigationHalloween = [ - , - , - , - - ]; - - if (navigationConstant.length !== navigationHalloween.length) { - throw new Error('navigation constant and navigation Halloween must have the same length'); - } - - return navigationConstant.map((navItem, index) => ({ - ...navItem, - icon: navigationHalloween[index] - })); - }, [isHalloween]); + return navigationConstant; + }, []); useEffect(() => { if (indexDefaultNav !== -1) { diff --git a/packages/extension/src/contexts/NavBarContext/NavBarContext.tsx b/packages/extension/src/contexts/NavBarContext/NavBarContext.tsx index b8005a304..39f4bc2b6 100644 --- a/packages/extension/src/contexts/NavBarContext/NavBarContext.tsx +++ b/packages/extension/src/contexts/NavBarContext/NavBarContext.tsx @@ -1,9 +1,7 @@ -import { createContext, FC, useContext, useMemo, useState } from 'react'; +import { createContext, FC, useContext, useState } from 'react'; import * as Sentry from '@sentry/react'; -import { useFeatureFlags } from '../../hooks'; - interface NavBarPosition { left: string; width: string; @@ -12,7 +10,6 @@ interface NavBarPosition { interface NavBarPositionContextType { setNavBarPosition: (position: NavBarPosition) => void; navBarPosition: NavBarPosition; - isHalloween: boolean; } interface Props { @@ -26,22 +23,15 @@ const defaultPosition = { const NavBarPositionContext = createContext({ setNavBarPosition: () => {}, - navBarPosition: defaultPosition, - isHalloween: false + navBarPosition: defaultPosition }); const NavBarPositionProvider: FC = ({ children }) => { const [navBarPosition, setNavBarPosition] = useState(defaultPosition); - const { featureFlags } = useFeatureFlags(); - - const isHalloween = useMemo(() => { - return (featureFlags as any)['CITROUILLE_2K23']; - }, [featureFlags]); const contextValue: NavBarPositionContextType = { navBarPosition, - setNavBarPosition, - isHalloween + setNavBarPosition }; return ( diff --git a/packages/extension/src/hooks/index.ts b/packages/extension/src/hooks/index.ts index 2440e339f..883e14e08 100644 --- a/packages/extension/src/hooks/index.ts +++ b/packages/extension/src/hooks/index.ts @@ -1,5 +1,4 @@ export * from './useBeforeUnload'; -export * from './useFeatureFlags'; export * from './useFees'; export * from './useFetchFromSessionStorage'; export * from './useKeyUp'; diff --git a/packages/extension/src/hooks/useFeatureFlags/index.ts b/packages/extension/src/hooks/useFeatureFlags/index.ts deleted file mode 100644 index 7d430eaf2..000000000 --- a/packages/extension/src/hooks/useFeatureFlags/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useFeatureFlags'; diff --git a/packages/extension/src/hooks/useFeatureFlags/useFeatureFlags.ts b/packages/extension/src/hooks/useFeatureFlags/useFeatureFlags.ts deleted file mode 100644 index a9c4449f2..000000000 --- a/packages/extension/src/hooks/useFeatureFlags/useFeatureFlags.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { useState, useEffect } from 'react'; - -import { STORAGE_FEATURE_FLAGS, TTL_FEATURE_FLAGS } from '../../constants'; -import { loadFromChromeSessionStorage, saveInChromeSessionStorage } from '../../utils'; - -interface FeatureFlagsData { - data: Record; - expiration: number; -} - -const isDataWithinTTL = (data: FeatureFlagsData) => { - return new Date().getTime() - data.expiration < TTL_FEATURE_FLAGS; -}; - -const fetchAndSaveFeatureFlags = async (): Promise> => { - if (!process.env.REACT_APP_FEATURE_FLAGS_URL) { - return {}; - } - - const response = await fetch(process.env.REACT_APP_FEATURE_FLAGS_URL); - - if (!response.ok) { - return {}; - } - - const data: Record = await response.json(); - const featureFlagsData: FeatureFlagsData = { - data, - expiration: new Date().getTime() + TTL_FEATURE_FLAGS - }; - - saveInChromeSessionStorage(STORAGE_FEATURE_FLAGS, JSON.stringify(featureFlagsData)); - return data; -}; - -export const useFeatureFlags = () => { - const [featureFlags, setFeatureFlags] = useState>({}); - const [isLoading, setLoading] = useState(true); - - useEffect(() => { - const fetchFeatureFlags = async () => { - try { - const cachedData = await loadFromChromeSessionStorage(STORAGE_FEATURE_FLAGS); - - if (cachedData) { - const parsedData: FeatureFlagsData = JSON.parse(cachedData); - - if (isDataWithinTTL(parsedData)) { - setFeatureFlags(parsedData.data); - setLoading(false); - return; - } - } - - const data = await fetchAndSaveFeatureFlags(); - setFeatureFlags(data); - } catch (error) { - console.error('Error fetching feature flags:', error); - } finally { - setLoading(false); - } - }; - - fetchFeatureFlags(); - }, []); - - return { featureFlags, isLoading }; -}; diff --git a/packages/extension/src/index.tsx b/packages/extension/src/index.tsx index 889df00f6..11c304d68 100644 --- a/packages/extension/src/index.tsx +++ b/packages/extension/src/index.tsx @@ -13,7 +13,7 @@ import { } from 'react-router-dom'; import App from './App'; -import { GEMWALLET_HALLOWEEN_ORANGE, POPUP_HEIGHT, POPUP_WIDTH } from './constants'; +import { POPUP_HEIGHT, POPUP_WIDTH } from './constants'; import { BrowserProvider, LedgerProvider, @@ -23,26 +23,10 @@ import { TransactionProgressProvider, WalletProvider } from './contexts'; -import { useFeatureFlags } from './hooks'; import reportWebVitals from './reportWebVitals'; import './index.css'; import { createRoot } from 'react-dom/client'; -const halloweenTheme = createTheme({ - palette: { - mode: 'dark', - primary: { - main: GEMWALLET_HALLOWEEN_ORANGE - }, - secondary: { - main: '#793D0D' - }, - error: { - main: '#D32F2F' - } - } -}); - Sentry.init({ dsn: process.env.REACT_APP_SENTRY_DSN, release: 'gemwallet-extension@' + process.env.REACT_APP_VERSION, @@ -68,7 +52,6 @@ Sentry.init({ }); const GemWallet = () => { - const { featureFlags } = useFeatureFlags(); const theme = useMemo( () => createTheme({ @@ -95,10 +78,9 @@ const GemWallet = () => { } } } - }, - ...((featureFlags as any)['CITROUILLE_2K23'] ? halloweenTheme : {}) + } }), - [featureFlags] + [] ); return (