diff --git a/components/SettingsModal/SettingsModal.css.ts b/components/SettingsModal/SettingsModal.css.ts new file mode 100644 index 00000000..01102daf --- /dev/null +++ b/components/SettingsModal/SettingsModal.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from 'degen'; + +export const select = style({ + background: 'transparent', + color: vars.colors.accent, + padding: '3px 7px', + borderColor: vars.colors.accent, + borderRadius: vars.radii['large'], + outline: 'none', + cursor: 'pointer', + textTransform: 'capitalize' +}); diff --git a/components/SettingsModal/SettingsModal.tsx b/components/SettingsModal/SettingsModal.tsx new file mode 100644 index 00000000..5b2d3903 --- /dev/null +++ b/components/SettingsModal/SettingsModal.tsx @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import { Box, Button, Stack, Text, useTheme } from 'degen'; + +import * as styles from './SettingsModal.css'; +import { Accent, Mode } from 'degen/dist/types/tokens'; +import { accents, modes } from 'helpers/theme-utils'; +import { Language, languages } from 'helpers/languageUtils'; +import { accentLocalKey, languageLocalKey, modeLocalKey } from 'constants/local-storage'; + +const SettingsModal = () => { + const { accent, setAccent, mode, setMode } = useTheme(); + const [language, setLanguage] = useState(Language.EN_US); + + const locallyStore = (key: string, value: string) => localStorage.setItem(key, value); + + const setLanguageState = (lang: Language) => { + setLanguage(lang); + locallyStore(languageLocalKey, lang); + }; + + const setModeState = (mode: Mode) => { + setMode(mode); + locallyStore(modeLocalKey, mode); + }; + + const setAccentState = (accent: Accent) => { + setAccent(accent); + locallyStore(accentLocalKey, accent); + }; + + return ( + + + + Settings + + + + + + + Language + + + + + + + + Mode + + + + + + + + Color Scheme + + + + + + + + + ); +}; + +export default SettingsModal; diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx index 082ed5c4..4905db4d 100644 --- a/components/Sidebar/Sidebar.tsx +++ b/components/Sidebar/Sidebar.tsx @@ -23,6 +23,7 @@ import { MediumIcon } from 'icons/MediumIcon'; import { GithubIcon } from 'icons/GithubIcon'; import { useRouter } from 'next/router'; import { nextAccentMap } from 'helpers/theme-utils'; +import { accentLocalKey } from 'constants/local-storage'; const feedbackUrl = 'https://feedback.honey.finance/'; @@ -88,7 +89,7 @@ const Sidebar = (props: SidebarProps) => { const toggleAccent = React.useCallback(() => { const nextAccent = nextAccentMap[accent]; - localStorage.setItem('accent', nextAccent); + localStorage.setItem(accentLocalKey, nextAccent); setAccent(nextAccent); }, [accent, setAccent]); diff --git a/components/UserInfo/UserInfo.tsx b/components/UserInfo/UserInfo.tsx index 45d988de..3d550dde 100644 --- a/components/UserInfo/UserInfo.tsx +++ b/components/UserInfo/UserInfo.tsx @@ -1,18 +1,17 @@ import React, { - FC, - useState, useEffect, - useCallback, useRef, - MutableRefObject + useState, } from 'react'; -import { Box, IconMenu } from 'degen'; +import { Box, IconCog, IconMenu } from 'degen'; import { Stack } from 'degen'; import { Button } from 'degen'; import { Text } from 'degen'; import { useWalletKit } from '@gokiprotocol/walletkit'; import { useConnectedWallet, useSolana } from '@saberhq/use-solana'; import * as styles from './UserInfo.css'; +import ModalContainer from 'components/ModalContainer/ModalContainer'; +import SettingsModal from 'components/SettingsModal/SettingsModal'; interface UserInfoProps { setShowMobileSidebar: Function; @@ -25,6 +24,7 @@ const UserInfo = (props: UserInfoProps) => { const btnRef = useRef(null); const btnTextRef = useRef(null); const walletAddress = wallet?.publicKey.toString(); + const [showSettingsModal, setShowSettingsModal] = useState(false); useEffect(() => { const btn = btnRef.current; @@ -45,50 +45,66 @@ const UserInfo = (props: UserInfoProps) => { }, [walletAddress]); return ( - - + setShowSettingsModal(false)} + isVisible={showSettingsModal} > - - - - {wallet ? ( + + + + + + + + {wallet ? ( + + ) : ( + + )} - ) : ( - - )} - - + + + ); }; diff --git a/constants/local-storage.ts b/constants/local-storage.ts new file mode 100644 index 00000000..ab879fd8 --- /dev/null +++ b/constants/local-storage.ts @@ -0,0 +1,3 @@ +export const languageLocalKey = 'language'; +export const modeLocalKey = 'mode'; +export const accentLocalKey = 'accent'; diff --git a/helpers/languageUtils.ts b/helpers/languageUtils.ts new file mode 100644 index 00000000..01d4e8a6 --- /dev/null +++ b/helpers/languageUtils.ts @@ -0,0 +1,5 @@ +export enum Language { + EN_US = 'English (US)' +} + +export const languages: Language[] = Object.values(Language); diff --git a/helpers/theme-utils.ts b/helpers/theme-utils.ts index db2872aa..89cd5fc6 100644 --- a/helpers/theme-utils.ts +++ b/helpers/theme-utils.ts @@ -1,8 +1,8 @@ -import { Accent } from 'degen/dist/types/tokens'; +import { Accent, Mode } from 'degen/dist/types/tokens'; export type ThemeAccent = Accent | 'foreground'; -export const accentSequence: ThemeAccent[] = [ +export const accents: Accent[] = [ 'orange', 'yellow', 'blue', @@ -11,10 +11,16 @@ export const accentSequence: ThemeAccent[] = [ 'pink', 'purple', 'red', - 'teal', + 'teal' +]; + +export const accentSequence: ThemeAccent[] = [ + ...accents, 'foreground' ]; +export const modes: Mode[] = ['dark', 'light']; + //returns sequence in form of map {'orange': 'yellow', 'yellow': 'blue', ...} export const nextAccentMap = accentSequence.reduce((acc, color, index) => { const isLastColor = index + 1 === accentSequence.length; diff --git a/pages/_app.tsx b/pages/_app.tsx index 23157c23..6781f3a7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -11,6 +11,9 @@ import { PartialNetworkConfigMap } from '@saberhq/use-solana/src/utils/useConnec import { useEffect, useState } from 'react'; import SecPopup from 'components/SecPopup'; import Script from 'next/script'; +import { Mode, Accent } from 'degen/dist/types/tokens'; +import { Language, languages } from 'helpers/languageUtils'; +import { accentLocalKey, languageLocalKey, modeLocalKey } from 'constants/local-storage'; const network = process.env.NETWORK as Network; const networkConfiguration = () => { @@ -21,10 +24,23 @@ const networkConfiguration = () => { } }; +const defaultMode: Mode = 'dark'; +const storedMode = +typeof window !== 'undefined' +? (localStorage.getItem(modeLocalKey) as Mode) +: undefined; + const defaultAccent: ThemeAccent = accentSequence[0]; const storedAccent = typeof window !== 'undefined' - ? (localStorage.getItem('accent') as ThemeAccent) + ? (localStorage.getItem(accentLocalKey) as ThemeAccent | Accent) + : undefined; + +// TODO: Utilise language setting site wide with intl files +const defaultLanguage: Language = Language.EN_US; +const storedLanguage = + typeof window !== 'undefined' + ? (localStorage.getItem(languageLocalKey) as Language) : undefined; function MyApp({ Component, pageProps }: AppProps) { @@ -41,7 +57,7 @@ function MyApp({ Component, pageProps }: AppProps) { return (