diff --git a/config/storage.ts b/config/storage.ts index 793839d93..e853efb18 100644 --- a/config/storage.ts +++ b/config/storage.ts @@ -1,6 +1,4 @@ export const STORAGE_TERMS_KEY = 'lido-terms-agree'; -export const STORAGE_THEME_AUTO_KEY = 'lido-theme-auto'; -export const STORAGE_THEME_MANUAL_KEY = 'lido-theme-manual'; export const STORAGE_CURRENCY_KEY = 'lido-currency'; export const STORAGE_CLIENT_CONFIG = 'lido-client-config'; export const STORAGE_IPFS_INFO_DISMISS = 'lido-ipfs-info-dismiss'; diff --git a/package.json b/package.json index 4f6dedee1..bfaa22653 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "@lidofinance/api-rpc": "^0.28.0", "@lidofinance/eth-api-providers": "^0.28.0", "@lidofinance/eth-providers": "^0.28.0", - "@lidofinance/lido-ui": "3.15.1", + "@lidofinance/lido-ui": "^3.18.2", "@lidofinance/next-api-wrapper": "^0.28.0", "@lidofinance/next-ip-rate-limit": "^0.28.0", "@lidofinance/next-pages": "^0.28.0", @@ -66,7 +66,7 @@ "react-hook-form": "^7.45.2", "react-is": "^18.2.0", "react-transition-group": "^4.4.2", - "reef-knot": "^1.13.0", + "reef-knot": "^1.13.2", "remark": "^13.0.0", "remark-external-links": "^8.0.0", "remark-html": "^13.0.1", diff --git a/providers/theme.tsx b/providers/theme.tsx deleted file mode 100644 index 6bdd8d92c..000000000 --- a/providers/theme.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { - FC, - PropsWithChildren, - createContext, - useCallback, - useState, - useMemo, - useEffect, -} from 'react'; -import Cookies from 'js-cookie'; -import { GlobalStyle } from 'styles'; -import { - themeLight, - themeDark, - Theme, - ThemeProvider as SourceProvider, - useSystemTheme, -} from '@lidofinance/lido-ui'; -import { STORAGE_THEME_AUTO_KEY, STORAGE_THEME_MANUAL_KEY } from 'config'; -import { BackgroundGradient } from 'shared/components'; - -export type ThemeName = 'light' | 'dark'; - -export type ThemeContext = { - toggleTheme: () => void; - themeName: ThemeName; -}; - -const themeMap: Record = { - light: themeLight, - dark: themeDark, -}; - -export const ThemeToggleContext = createContext({} as ThemeContext); - -const COOKIES_THEME_EXPIRES_DAYS = 365; - -const DEFAULT_THEME = 'light'; - -export type ThemeProviderProps = { - cookiesAutoThemeScheme?: ThemeName; - cookiesManualThemeScheme?: ThemeName; -}; - -const ThemeProvider: FC> = ({ - children, - cookiesAutoThemeScheme, - cookiesManualThemeScheme, -}) => { - const systemTheme = useSystemTheme(); - - const [themeName, setThemeName] = useState( - cookiesManualThemeScheme || cookiesAutoThemeScheme || DEFAULT_THEME, - ); - - // Noticing browser preferences on hydration - // Reacting to changing preferences - useEffect(() => { - if (process.browser && !cookiesManualThemeScheme && systemTheme) { - setThemeName(systemTheme); - Cookies.set(STORAGE_THEME_AUTO_KEY, systemTheme, { - expires: COOKIES_THEME_EXPIRES_DAYS, - sameSite: 'None', - secure: true, - }); - } - // We only need to override logic when systemTheme changes - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [systemTheme]); - - // remember the theme on manual toggle, ignore system theme changes - const toggleTheme = useCallback(() => { - const toggledThemeName = themeName === 'light' ? 'dark' : 'light'; - setThemeName(toggledThemeName); - Cookies.set(STORAGE_THEME_MANUAL_KEY, toggledThemeName, { - expires: COOKIES_THEME_EXPIRES_DAYS, - sameSite: 'None', - secure: true, - }); - }, [themeName, setThemeName]); - - const value = useMemo( - () => ({ - toggleTheme, - themeName, - }), - [themeName, toggleTheme], - ); - - return ( - - - - {themeName === 'dark' && ( - - )} - {children} - - - ); -}; - -export default ThemeProvider; diff --git a/shared/components/layout/header/components/header-wallet.tsx b/shared/components/layout/header/components/header-wallet.tsx index 836b9197e..5776b08fd 100644 --- a/shared/components/layout/header/components/header-wallet.tsx +++ b/shared/components/layout/header/components/header-wallet.tsx @@ -1,4 +1,5 @@ import { FC } from 'react'; +import { useRouter } from 'next/router'; import { useWeb3 } from 'reef-knot/web3-react'; import { useSDK } from '@lido-sdk/react'; import { CHAINS, getChainColor } from '@lido-sdk/constants'; @@ -17,12 +18,14 @@ import { } from '../styles'; const HeaderWallet: FC = () => { + const router = useRouter(); const { active } = useWeb3(); const { chainId } = useSDK(); const chainName = CHAINS[chainId]; const testNet = chainId !== CHAINS.Mainnet; const showNet = testNet && active; + const queryTheme = router?.query?.theme; return ( @@ -40,7 +43,7 @@ const HeaderWallet: FC = () => { )} {dynamics.ipfsMode && } - + {!queryTheme && } {dynamics.ipfsMode && ( diff --git a/shared/components/local-link/index.tsx b/shared/components/local-link/index.tsx index fb26f95f4..f2379aa26 100644 --- a/shared/components/local-link/index.tsx +++ b/shared/components/local-link/index.tsx @@ -7,7 +7,7 @@ import { LinkIpfs } from 'shared/components/link-ipfs'; export const LocalLink: FC> = (props) => { const router = useRouter(); - const { ref, embed, app } = router.query; + const { ref, embed, app, theme } = router.query; const { href, ...restProps } = props; const extraQuery = {} as Record; @@ -15,6 +15,7 @@ export const LocalLink: FC> = (props) => { if (ref && typeof ref === 'string') extraQuery.ref = ref; if (embed && typeof embed === 'string') extraQuery.embed = embed; if (app && typeof app === 'string') extraQuery.app = app; + if (theme && typeof theme === 'string') extraQuery.theme = theme; if (typeof href === 'string') { if (dynamics.ipfsMode) { diff --git a/yarn.lock b/yarn.lock index 8fb849439..daceaaa31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2222,30 +2222,12 @@ resolved "https://registry.yarnpkg.com/@lidofinance/eth-providers/-/eth-providers-0.28.0.tgz#069dfcd66f97418298646abd2742e8e997c6fbbb" integrity sha512-oH2nU7jVPkn1mii56vp3gBFZNFR/LysxiKBUwV2freFoizQHNLeWWjU1b8a+l1I020LzbxHcatOkV6z9ur5YfA== -"@lidofinance/lido-ui@3.14.1": - version "3.14.1" - resolved "https://registry.yarnpkg.com/@lidofinance/lido-ui/-/lido-ui-3.14.1.tgz#780d32c3321295a40d44c352a307029a2b574e43" - integrity sha512-8vqv1E9ldPAIAceANPrh1alLPFWbYzz8AO6RhNbtFms+yPd5P2nSh5OopBLB1G2HE4lGFF0c3OXbMgyEcq9pEQ== +"@lidofinance/lido-ui@^3.18.0", "@lidofinance/lido-ui@^3.18.2": + version "3.18.2" + resolved "https://registry.yarnpkg.com/@lidofinance/lido-ui/-/lido-ui-3.18.2.tgz#7eaa79270b9f23129d776ebe2a083f4329fe9ec6" + integrity sha512-/MXmkHmliyQ5S7/TQW87XMYLd7May8R+rZ7JHbiZzaLEzUwixlLyFvWpmtX2CKJ4JL13KKWke/06gbNG/8wC5A== dependencies: "@styled-system/should-forward-prop" "5.1.5" - "@swc/helpers" "^0.4.11" - "@swc/plugin-styled-components" "^1.2.10" - react-collapsed "3.0.2" - react-jazzicon "^1.0.4" - react-toastify "7.0.4" - react-transition-group "4" - styled-system "5.1.5" - ua-parser-js "^1.0.35" - use-callback-ref "1.2.5" - -"@lidofinance/lido-ui@3.15.1": - version "3.15.1" - resolved "https://registry.yarnpkg.com/@lidofinance/lido-ui/-/lido-ui-3.15.1.tgz#57cc24383950a0c0b550d207fb521132a6a75a89" - integrity sha512-easO2eKh+6noaB74aYcaEsaeCtuFRspDCxIEzBM9wsAJ64cwJ/ngcyS6QD567xkusdesTPSfJIvANvQSdQXvUg== - dependencies: - "@styled-system/should-forward-prop" "5.1.5" - "@swc/helpers" "^0.4.11" - "@swc/plugin-styled-components" "^1.2.10" react-collapsed "3.0.2" react-jazzicon "^1.0.4" react-toastify "7.0.4" @@ -2600,17 +2582,17 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c" integrity sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg== -"@reef-knot/connect-wallet-modal@1.13.0": - version "1.13.0" - resolved "https://registry.yarnpkg.com/@reef-knot/connect-wallet-modal/-/connect-wallet-modal-1.13.0.tgz#f046c231ed5b8c27c31cc17c0de59ad4cc5752b6" - integrity sha512-YZq2e2w8FYW8JOAFFVKQhhH/conchF7Y8v+Cn1bH85h5XkeDrfEnZbGhyDu6ez2lTvdk/uwZAIfETZTEwLc18w== +"@reef-knot/connect-wallet-modal@1.15.0": + version "1.15.0" + resolved "https://registry.yarnpkg.com/@reef-knot/connect-wallet-modal/-/connect-wallet-modal-1.15.0.tgz#96232244ab0952d44e77b51e6b76c2e5f45bb5fb" + integrity sha512-3JsBoHH91TiW4k52Qa9QdZpEl+FeECGRGzqxZWbg58YQ+1jtI5/iN3wCL6oxQgEuXG/au/ErYkESIu6pvPvf/Q== dependencies: "@ledgerhq/hw-app-eth" "^6.34.3" "@ledgerhq/hw-transport" "^6.28.8" "@ledgerhq/hw-transport-webhid" "^6.27.19" - "@lidofinance/lido-ui" "3.14.1" - "@types/react" "17.0.53" - "@types/react-dom" "17" + "@lidofinance/lido-ui" "^3.18.0" + "@types/react" "18.2.45" + "@types/react-dom" "18.2.17" "@reef-knot/core-react@1.7.0": version "1.7.0" @@ -3205,19 +3187,6 @@ dependencies: tslib "^2.4.0" -"@swc/helpers@^0.4.11": - version "0.4.36" - resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.36.tgz#fcfff76ed52c214f357e8e9d3f37b568908072d9" - integrity sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q== - dependencies: - legacy-swc-helpers "npm:@swc/helpers@=0.4.14" - tslib "^2.4.0" - -"@swc/plugin-styled-components@^1.2.10": - version "1.5.98" - resolved "https://registry.yarnpkg.com/@swc/plugin-styled-components/-/plugin-styled-components-1.5.98.tgz#34ddb4003d835deeded8ab47d5f1e221d98185dd" - integrity sha512-6x8pmC8SckFH+Kr67flyoZe3Mqyx8m0oFR1GD+D/sz5YR9fM5AEd85jC7WhPOy6jcQCU2kO5EIZqBYcf9qLT0w== - "@tanstack/query-core@4.36.1": version "4.36.1" resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.36.1.tgz#79f8c1a539d47c83104210be2388813a7af2e524" @@ -3460,12 +3429,12 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563" integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng== -"@types/react-dom@17": - version "17.0.24" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.24.tgz#23a1f2528d71d9a5b4ffa58788adde9b8f29d444" - integrity sha512-9TXTs2CPADeEQ4N5cnWRCqmOZN8O/nl1Dn11dWtj2faZEu0wJnx0it4N8/uAVGH7w2CJ/+sPcv2zMCXkqfeR9A== +"@types/react-dom@18.2.17": + version "18.2.17" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.17.tgz#375c55fab4ae671bd98448dcfa153268d01d6f64" + integrity sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg== dependencies: - "@types/react" "^17" + "@types/react" "*" "@types/react-transition-group@^4.4.3": version "4.4.9" @@ -3483,19 +3452,10 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@17.0.53": - version "17.0.53" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.53.tgz#10d4d5999b8af3d6bc6a9369d7eb953da82442ab" - integrity sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw== - dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" - -"@types/react@^17": - version "17.0.71" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.71.tgz#3673d446ad482b1564e44bf853b3ab5bcbc942c4" - integrity sha512-lfqOu9mp16nmaGRrS8deS2Taqhd5Ih0o92Te5Ws6I1py4ytHBcXLqh0YIqVsViqwVI5f+haiFM6hju814BzcmA== +"@types/react@18.2.45": + version "18.2.45" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.45.tgz#253f4fac288e7e751ab3dc542000fb687422c15c" + integrity sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -7787,13 +7747,6 @@ language-tags@^1.0.9: dependencies: language-subtag-registry "^0.3.20" -"legacy-swc-helpers@npm:@swc/helpers@=0.4.14": - version "0.4.14" - resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" - integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== - dependencies: - tslib "^2.4.0" - leven@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2" @@ -9209,12 +9162,12 @@ redis-parser@^3.0.0: dependencies: redis-errors "^1.0.0" -reef-knot@^1.13.0: - version "1.13.0" - resolved "https://registry.yarnpkg.com/reef-knot/-/reef-knot-1.13.0.tgz#c44278930104f7947e3d027de926d71dd217d697" - integrity sha512-ClwP+gY3RjM98v0ayBR6CMSvxUGI7M0NxgEuHlprSSL/Lm8VLvpsMtAIhoafwo2NYCU9GEKb+QCKUFGdDTYegA== +reef-knot@^1.13.2: + version "1.13.2" + resolved "https://registry.yarnpkg.com/reef-knot/-/reef-knot-1.13.2.tgz#5ad590d8dc9dc715a53f4584641892cc6effcf06" + integrity sha512-y9z3HNmrqo6ytXC9nIHnV1GKuL+ifj1HfL0mTy/65Mb4pIDJIscmWqf0/hl+OS4qOUactzzRUKVsf51XGR9mRg== dependencies: - "@reef-knot/connect-wallet-modal" "1.13.0" + "@reef-knot/connect-wallet-modal" "1.15.0" "@reef-knot/core-react" "1.7.0" "@reef-knot/ledger-connector" "1.1.1" "@reef-knot/types" "1.3.0"