From 0b4f918208f5489b1830fea119012c40a4a07a06 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Tue, 20 Dec 2022 20:55:35 -0600 Subject: [PATCH] chore(#2412): refactor theme context (#2435) * chore: switch theme to zustand, delete context * chore: switch apps/componenets to consume the hook * chore: update storybook theme usage to use documentElement * chore: dry up theme switcher listener for storybooks * feat: optional theme param to allow toggling * chore: add additional check for matchMedia function * chore: change block explorer test to use light theme as its the default * chore: remove unused headerprops for multisig-signer * chore: remove unused props from theme switcher component * chore: dry up validateTheme func * chore: remove unused props from explorer header test * chore: use new theme switcher in account history container --- apps/console-lite/src/app/app.tsx | 41 ++++---- .../console-lite-grid/console-lite-grid.tsx | 15 ++- .../src/app/components/header/header.tsx | 4 +- .../src/app/context/local-context.ts | 2 - .../src/app/hooks/use-local-values.spec.ts | 3 +- .../src/app/hooks/use-local-values.ts | 6 +- apps/explorer/src/app/app.tsx | 33 +++---- .../src/app/components/header/header.spec.tsx | 7 +- .../src/app/components/header/header.tsx | 11 +-- .../nested-data-list.spec.tsx | 2 +- .../nested-data-list/nested-data-list.tsx | 6 +- .../src/main.tsx | 9 +- apps/multisig-signer/src/app/app.tsx | 39 ++++---- .../src/app/components/header/header.tsx | 9 +- apps/static/src/index.html | 1 - apps/static/src/theme.js | 9 -- apps/stats/src/app.tsx | 20 ++-- apps/stats/src/components/header/header.tsx | 9 +- .../portfolio/account-history-container.tsx | 5 +- apps/trading/components/navbar/navbar.tsx | 10 +- apps/trading/pages/_app.page.tsx | 9 +- apps/trading/pages/_document.page.tsx | 5 - libs/accounts/.storybook/preview.js | 33 +------ libs/candles-chart/src/lib/candles-chart.tsx | 6 +- libs/fills/.storybook/preview.js | 33 +------ libs/market-depth/src/lib/depth-chart.tsx | 13 +-- libs/market-depth/src/lib/orderbook.tsx | 5 +- libs/positions/.storybook/preview.js | 33 +------ libs/react-helpers/src/hooks/index.ts | 1 + .../src/hooks/use-storybook-theme-observer.ts | 25 +++++ .../src/hooks/use-theme-switcher.ts | 99 +++++++++++++------ libs/react-helpers/src/index.ts | 1 - .../react-helpers/src/lib/context/context.tsx | 3 - libs/react-helpers/src/lib/context/index.tsx | 1 - libs/react-helpers/src/lib/index.ts | 1 - libs/ui-toolkit/.storybook/preview.js | 56 ++++++----- .../ag-grid/ag-grid-dynamic-themed.tsx | 5 +- .../ag-grid/ag-grid-lazy-themed.tsx | 4 +- .../theme-switcher/theme-switcher.spec.tsx | 9 +- .../theme-switcher/theme-switcher.stories.tsx | 10 +- .../theme-switcher/theme-switcher.tsx | 15 +-- 41 files changed, 240 insertions(+), 368 deletions(-) delete mode 100644 apps/static/src/theme.js create mode 100644 libs/react-helpers/src/hooks/use-storybook-theme-observer.ts delete mode 100644 libs/react-helpers/src/lib/context/context.tsx delete mode 100644 libs/react-helpers/src/lib/context/index.tsx diff --git a/apps/console-lite/src/app/app.tsx b/apps/console-lite/src/app/app.tsx index 452b32b1a..48a8c90c6 100644 --- a/apps/console-lite/src/app/app.tsx +++ b/apps/console-lite/src/app/app.tsx @@ -1,7 +1,5 @@ import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; -import { ThemeContext } from '@vegaprotocol/react-helpers'; -import { useThemeSwitcher } from '@vegaprotocol/react-helpers'; import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment'; import { VegaConnectDialog, @@ -18,8 +16,7 @@ import useLocalValues from './hooks/use-local-values'; import type { InMemoryCacheConfig } from '@apollo/client'; function App() { - const [theme, toggleTheme] = useThemeSwitcher(); - const localValues = useLocalValues(theme, toggleTheme); + const localValues = useLocalValues(); const { vegaWalletDialog, menu: { setMenuOpen }, @@ -56,25 +53,23 @@ function App() { return ( - - - - - -
-
-
- - -
- - - - - + + + + +
+
+
+ + +
+ + + + ); } diff --git a/apps/console-lite/src/app/components/console-lite-grid/console-lite-grid.tsx b/apps/console-lite/src/app/components/console-lite-grid/console-lite-grid.tsx index e8ee1d165..bc5380833 100644 --- a/apps/console-lite/src/app/components/console-lite-grid/console-lite-grid.tsx +++ b/apps/console-lite/src/app/components/console-lite-grid/console-lite-grid.tsx @@ -1,14 +1,11 @@ -import React, { - forwardRef, - useCallback, - useContext, - useMemo, - useRef, -} from 'react'; +import React, { forwardRef, useCallback, useMemo, useRef } from 'react'; import classNames from 'classnames'; import type { AgGridReact } from 'ag-grid-react'; import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit'; -import { ThemeContext, useScreenDimensions } from '@vegaprotocol/react-helpers'; +import { + useScreenDimensions, + useThemeSwitcher, +} from '@vegaprotocol/react-helpers'; import type { GridOptions, GetRowIdParams, @@ -43,7 +40,7 @@ const ConsoleLiteGrid = ( ) => { const { isMobile, screenSize } = useScreenDimensions(); const gridRef = useRef(null); - const theme = useContext(ThemeContext); + const { theme } = useThemeSwitcher(); const handleOnGridReady = useCallback(() => { ( (ref as React.RefObject) || gridRef diff --git a/apps/console-lite/src/app/components/header/header.tsx b/apps/console-lite/src/app/components/header/header.tsx index 68a8a2667..120f0481c 100644 --- a/apps/console-lite/src/app/components/header/header.tsx +++ b/apps/console-lite/src/app/components/header/header.tsx @@ -11,8 +11,6 @@ const Header = () => { })); const { vegaWalletDialog: { setManage }, - theme, - toggleTheme, } = useContext(LocalContext); return (
{ setConnectDialog={updateVegaWalletDialog} setManageDialog={setManage} /> - +
); diff --git a/apps/console-lite/src/app/context/local-context.ts b/apps/console-lite/src/app/context/local-context.ts index 5bca7494f..e8ec23751 100644 --- a/apps/console-lite/src/app/context/local-context.ts +++ b/apps/console-lite/src/app/context/local-context.ts @@ -14,8 +14,6 @@ interface MenuState { export interface LocalValues { vegaWalletDialog: VegaWalletDialogState; menu: MenuState; - theme: 'light' | 'dark'; - toggleTheme: () => void; } const LocalContext = createContext({} as LocalValues); diff --git a/apps/console-lite/src/app/hooks/use-local-values.spec.ts b/apps/console-lite/src/app/hooks/use-local-values.spec.ts index 1895ce211..9927058cf 100644 --- a/apps/console-lite/src/app/hooks/use-local-values.spec.ts +++ b/apps/console-lite/src/app/hooks/use-local-values.spec.ts @@ -3,8 +3,7 @@ import useLocalValues from './use-local-values'; describe('local values hook', () => { it('state of wallet dialog should be properly handled', () => { - const setTheme = jest.fn(); - const { result } = renderHook(() => useLocalValues('light', setTheme)); + const { result } = renderHook(() => useLocalValues()); expect(result.current.vegaWalletDialog).toBeDefined(); expect(result.current.vegaWalletDialog.manage).toBe(false); act(() => { diff --git a/apps/console-lite/src/app/hooks/use-local-values.ts b/apps/console-lite/src/app/hooks/use-local-values.ts index c3c4260fc..7b034a066 100644 --- a/apps/console-lite/src/app/hooks/use-local-values.ts +++ b/apps/console-lite/src/app/hooks/use-local-values.ts @@ -1,17 +1,15 @@ import { useMemo, useState } from 'react'; import type { LocalValues } from '../context/local-context'; -const useLocalValues = (theme: 'light' | 'dark', toggleTheme: () => void) => { +const useLocalValues = () => { const [manage, setManage] = useState(false); const [menuOpen, setMenuOpen] = useState(false); return useMemo( () => ({ vegaWalletDialog: { manage, setManage }, menu: { menuOpen, setMenuOpen, onToggle: () => setMenuOpen(!menuOpen) }, - theme, - toggleTheme, }), - [manage, theme, toggleTheme, menuOpen] + [manage, menuOpen] ); }; diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx index f4d63a4a5..8f3bab5d8 100644 --- a/apps/explorer/src/app/app.tsx +++ b/apps/explorer/src/app/app.tsx @@ -3,7 +3,6 @@ import { useState, useEffect } from 'react'; import * as Sentry from '@sentry/react'; import { BrowserTracing } from '@sentry/tracing'; import { useLocation } from 'react-router-dom'; -import { ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers'; import { EnvironmentProvider, NetworkLoader, @@ -19,7 +18,6 @@ import type { InMemoryCacheConfig } from '@apollo/client'; function App() { const { VEGA_ENV } = useEnvironment(); - const [theme, toggleTheme] = useThemeSwitcher(); const [menuOpen, setMenuOpen] = useState(false); const location = useLocation(); @@ -57,25 +55,18 @@ function App() { ); return ( - - - -
-
-
- - - + + +
+
+
+ + ); } diff --git a/apps/explorer/src/app/components/header/header.spec.tsx b/apps/explorer/src/app/components/header/header.spec.tsx index 96ac1db7e..36c727f5f 100644 --- a/apps/explorer/src/app/components/header/header.spec.tsx +++ b/apps/explorer/src/app/components/header/header.spec.tsx @@ -14,12 +14,7 @@ jest.mock('../search', () => ({ const renderComponent = () => ( -
+
); diff --git a/apps/explorer/src/app/components/header/header.tsx b/apps/explorer/src/app/components/header/header.tsx index ecdb0c288..4d0b3b1f1 100644 --- a/apps/explorer/src/app/components/header/header.tsx +++ b/apps/explorer/src/app/components/header/header.tsx @@ -8,18 +8,11 @@ import type { Dispatch, SetStateAction } from 'react'; import { NetworkSwitcher } from '@vegaprotocol/environment'; interface ThemeToggleProps { - theme: 'light' | 'dark'; - toggleTheme: () => void; menuOpen: boolean; setMenuOpen: Dispatch>; } -export const Header = ({ - theme, - toggleTheme, - menuOpen, - setMenuOpen, -}: ThemeToggleProps) => { +export const Header = ({ menuOpen, setMenuOpen }: ThemeToggleProps) => { const headerClasses = classnames( 'md:col-span-2', 'grid grid-rows-2 md:grid-rows-1 grid-cols-[1fr_auto] md:grid-cols-[auto_1fr_auto] items-center', @@ -48,7 +41,7 @@ export const Header = ({ - +
); }; diff --git a/apps/explorer/src/app/components/nested-data-list/nested-data-list.spec.tsx b/apps/explorer/src/app/components/nested-data-list/nested-data-list.spec.tsx index 039350bfa..dc0aba4fa 100644 --- a/apps/explorer/src/app/components/nested-data-list/nested-data-list.spec.tsx +++ b/apps/explorer/src/app/components/nested-data-list/nested-data-list.spec.tsx @@ -88,7 +88,7 @@ describe('NestedDataList', () => { for (let i = 0; i < 8; i++) { const item = getByTestId(`T${i}`); - const expected = BORDER_COLOURS.dark[i % 5]; + const expected = BORDER_COLOURS.light[i % 5]; expect(item.style.borderColor.toUpperCase()).toBe(expected); } }); diff --git a/apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx b/apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx index de6d59517..1a648fbc5 100644 --- a/apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx +++ b/apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useContext, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import classNames from 'classnames'; import isObject from 'lodash/isObject'; -import { ThemeContext } from '@vegaprotocol/react-helpers'; +import { useThemeSwitcher } from '@vegaprotocol/react-helpers'; import { Icon } from '@vegaprotocol/ui-toolkit'; import { IconNames } from '@blueprintjs/icons'; import { VegaColours } from '@vegaprotocol/tailwindcss-config'; @@ -65,7 +65,7 @@ const NestedDataListItem = ({ ); const hasChildren = isObject(value) && !!Object.keys(value).length; const title = useMemo(() => camelToTitle(label), [label]); - const theme = useContext(ThemeContext); + const { theme } = useThemeSwitcher(); const currentLevelBorder = useMemo( () => getBorderColour(index, theme), [index, theme] diff --git a/apps/liquidity-provision-dashboard/src/main.tsx b/apps/liquidity-provision-dashboard/src/main.tsx index 7c77b988a..addcc9921 100644 --- a/apps/liquidity-provision-dashboard/src/main.tsx +++ b/apps/liquidity-provision-dashboard/src/main.tsx @@ -1,7 +1,6 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; -import { ThemeContext } from '@vegaprotocol/react-helpers'; import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment'; import App from './app/app'; @@ -36,11 +35,9 @@ root?.render( - - - - - + + + diff --git a/apps/multisig-signer/src/app/app.tsx b/apps/multisig-signer/src/app/app.tsx index 2eda3944f..f20c6abbe 100644 --- a/apps/multisig-signer/src/app/app.tsx +++ b/apps/multisig-signer/src/app/app.tsx @@ -10,7 +10,7 @@ import { import { AsyncRenderer, Button, Lozenge } from '@vegaprotocol/ui-toolkit'; import type { EthereumConfig } from '@vegaprotocol/web3'; import { useEthereumConfig, Web3Provider } from '@vegaprotocol/web3'; -import { ThemeContext, useThemeSwitcher, t } from '@vegaprotocol/react-helpers'; +import { t } from '@vegaprotocol/react-helpers'; import { ENV } from './config/env'; import { ContractsProvider } from './config/contracts/contracts-provider'; import { @@ -55,7 +55,6 @@ function App() { const { VEGA_ENV, ETHEREUM_PROVIDER_URL } = useEnvironment(); const { config, loading, error } = useEthereumConfig(); const [dialogOpen, setDialogOpen] = useState(false); - const [theme, toggleTheme] = useThemeSwitcher(); useEffect(() => { Sentry.init({ @@ -73,25 +72,23 @@ function App() { }, [config?.chain_id, ETHEREUM_PROVIDER_URL]); return ( - - - - - - -
-
- -
- - - - - - + + + + + +
+
+ +
+ + + + + ); } diff --git a/apps/multisig-signer/src/app/components/header/header.tsx b/apps/multisig-signer/src/app/components/header/header.tsx index 357213b64..4be5ce128 100644 --- a/apps/multisig-signer/src/app/components/header/header.tsx +++ b/apps/multisig-signer/src/app/components/header/header.tsx @@ -4,19 +4,14 @@ import { VegaLogo, } from '@vegaprotocol/ui-toolkit'; -interface HeaderProps { - theme: 'light' | 'dark'; - toggleTheme: () => void; -} - -export const Header = ({ theme, toggleTheme }: HeaderProps) => { +export const Header = () => { return (
- +
diff --git a/apps/static/src/index.html b/apps/static/src/index.html index b18ee58c0..2ab0a6f71 100644 --- a/apps/static/src/index.html +++ b/apps/static/src/index.html @@ -15,7 +15,6 @@ diff --git a/apps/static/src/theme.js b/apps/static/src/theme.js deleted file mode 100644 index 0fc7ae061..000000000 --- a/apps/static/src/theme.js +++ /dev/null @@ -1,9 +0,0 @@ -(function () { - var storedTheme = window.localStorage.getItem('theme'); - if ( - storedTheme === 'dark' || - (!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches) - ) { - document.documentElement.classList.add('dark'); - } -})(); diff --git a/apps/stats/src/app.tsx b/apps/stats/src/app.tsx index 3e3a12652..8149dbf06 100644 --- a/apps/stats/src/app.tsx +++ b/apps/stats/src/app.tsx @@ -1,23 +1,17 @@ import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment'; import { Header } from './components/header'; import { StatsManager } from '@vegaprotocol/network-stats'; -import { ThemeContext } from '@vegaprotocol/react-helpers'; -import { useThemeSwitcher } from '@vegaprotocol/react-helpers'; function App() { - const [theme, toggleTheme] = useThemeSwitcher(); - return ( - - -
-
-
- -
+ +
+
+
+
- - +
+ ); } diff --git a/apps/stats/src/components/header/header.tsx b/apps/stats/src/components/header/header.tsx index 8e3b850dc..86ca81292 100644 --- a/apps/stats/src/components/header/header.tsx +++ b/apps/stats/src/components/header/header.tsx @@ -4,12 +4,7 @@ import { ThemeSwitcher, } from '@vegaprotocol/ui-toolkit'; -interface ThemeToggleProps { - theme: 'light' | 'dark'; - toggleTheme: () => void; -} - -export const Header = ({ theme, toggleTheme }: ThemeToggleProps) => { +export const Header = () => { return (
@@ -17,7 +12,7 @@ export const Header = ({ theme, toggleTheme }: ThemeToggleProps) => {
- +
diff --git a/apps/trading/client-pages/portfolio/account-history-container.tsx b/apps/trading/client-pages/portfolio/account-history-container.tsx index abc277f31..b1b8d3b53 100644 --- a/apps/trading/client-pages/portfolio/account-history-container.tsx +++ b/apps/trading/client-pages/portfolio/account-history-container.tsx @@ -2,12 +2,11 @@ import { addDecimal, fromNanoSeconds, t, - ThemeContext, + useThemeSwitcher, } from '@vegaprotocol/react-helpers'; import { useVegaWallet } from '@vegaprotocol/wallet'; import compact from 'lodash/compact'; import type { ChangeEvent } from 'react'; -import { useContext } from 'react'; import { useMemo, useState } from 'react'; import type { AccountHistoryQuery } from './__generated__/AccountHistory'; import { useAccountsWithBalanceQuery } from './__generated__/AccountHistory'; @@ -209,7 +208,7 @@ export const AccountHistoryChart = ({ accountType: Schema.AccountType; asset: AssetFieldsFragment; }) => { - const theme = useContext(ThemeContext); + const { theme } = useThemeSwitcher(); const values: { cols: string[]; rows: [Date, ...number[]][] } | null = useMemo(() => { if (!data?.balanceChanges.edges.length) { diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx index e7b0099ce..cc86cebf2 100644 --- a/apps/trading/components/navbar/navbar.tsx +++ b/apps/trading/components/navbar/navbar.tsx @@ -16,16 +16,10 @@ import { type NavbarTheme = 'inherit' | 'dark' | 'yellow'; interface NavbarProps { - theme: 'light' | 'dark'; - toggleTheme: () => void; navbarTheme?: NavbarTheme; } -export const Navbar = ({ - theme, - toggleTheme, - navbarTheme = 'inherit', -}: NavbarProps) => { +export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => { const { VEGA_TOKEN_URL } = useEnvironment(); const { marketId } = useGlobalStore((store) => ({ marketId: store.marketId, @@ -71,7 +65,7 @@ export const Navbar = ({
- +
); diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index 844abc30d..747d876a5 100644 --- a/apps/trading/pages/_app.page.tsx +++ b/apps/trading/pages/_app.page.tsx @@ -1,7 +1,7 @@ import Head from 'next/head'; import type { AppProps } from 'next/app'; import { Navbar } from '../components/navbar'; -import { t, ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers'; +import { t } from '@vegaprotocol/react-helpers'; import { useEagerConnect as useVegaEagerConnect, VegaWalletProvider, @@ -48,10 +48,9 @@ const Title = () => { function AppBody({ Component }: AppProps) { const location = useLocation(); const { VEGA_ENV } = useEnvironment(); - const [theme, toggleTheme] = useThemeSwitcher(); return ( - + <> {/* Cannot use meta tags in _document.page.tsx see https://nextjs.org/docs/messages/no-document-viewport-meta */} @@ -62,8 +61,6 @@ function AppBody({ Component }: AppProps) {
@@ -76,7 +73,7 @@ function AppBody({ Component }: AppProps) { - + ); } diff --git a/apps/trading/pages/_document.page.tsx b/apps/trading/pages/_document.page.tsx index 88a71c7d7..ad0444399 100644 --- a/apps/trading/pages/_document.page.tsx +++ b/apps/trading/pages/_document.page.tsx @@ -17,11 +17,6 @@ export default function Document() { type="image/x-icon" href="https://static.vega.xyz/favicon.ico" /> -