Merge pull request #149 from vegaprotocol/feat/113-stats-use-theme-switch-hook-and-ui

Feat/113 stats use theme switch hook and UI

apps/stats/src/app.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { DATA_SOURCES } from './config';
 import { Header } from './components/header';
 import { StatsManager } from '@vegaprotocol/network-stats';
+import { ThemeContext } from '@vegaprotocol/react-helpers';
+import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 
 const envName = DATA_SOURCES.envName;
 const restEndpoint = DATA_SOURCES.restEndpoint;
@@ -9,18 +11,13 @@ const statsEndpoint = `${restEndpoint}/statistics`;
 const nodesEndpoint = `${restEndpoint}/nodes-data`;
 
 function App() {
-  const [darkMode, setDarkMode] = useState<boolean>(
-    document.documentElement.classList.contains('dark-mode-preferred')
-  );
+  const [theme, toggleTheme] = useThemeSwitcher();
 
   return (
-    <div
-      className={`w-screen min-h-screen grid pb-24 ${
-        darkMode ? 'bg-black text-white-80' : 'bg-white text-black-95'
-      }`}
-    >
+    <ThemeContext.Provider value={theme}>
+      <div className="w-screen min-h-screen grid pb-24 bg-white text-black-95 dark:bg-black dark:text-white-80">
         <div className="layout-grid w-screen justify-self-center">
-        <Header darkMode={darkMode} setDarkMode={setDarkMode} />
+          <Header toggleTheme={toggleTheme} />
           <StatsManager
             envName={envName}
             statsEndpoint={statsEndpoint}
@@ -29,6 +26,7 @@ function App() {
           />
         </div>
       </div>
+    </ThemeContext.Provider>
   );
 }
 

apps/stats/src/components/header/header.tsx

@@ -1,30 +1,19 @@
-import { VegaLogo } from '@vegaprotocol/ui-toolkit';
-import { LightModeToggle, DarkModeToggle } from '../images';
+import { VegaLogo, ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { VegaBackgroundVideo } from '../videos';
-import { DarkModeState } from '../../config/types';
 
-export const Header = ({ darkMode, setDarkMode }: DarkModeState) => {
+interface ThemeToggleProps {
+  toggleTheme: () => void;
+}
+
+export const Header = ({ toggleTheme }: ThemeToggleProps) => {
   return (
     <header className="relative overflow-hidden py-8 mb-40 md:mb-64">
       <VegaBackgroundVideo />
 
-      <div
-        className={`relative flex justify-center px-8 ${
-          darkMode ? 'bg-black' : 'bg-white'
-        }`}
-      >
+      <div className="relative flex justify-center px-8 dark:bg-black bg-white">
         <div className="w-full max-w-3xl p-20 flex items-center justify-between">
           <VegaLogo />
-
-          <button
-            onClick={() => setDarkMode(!darkMode)}
-            aria-label="Switch theme color"
-            className={`transition-colors rounded-full cursor-pointer ${
-              darkMode ? 'hover:bg-neutral-900' : 'hover:bg-neutral-200'
-            }`}
-          >
-            {darkMode ? <LightModeToggle /> : <DarkModeToggle />}
-          </button>
+          <ThemeSwitcher onToggle={toggleTheme} />
         </div>
       </div>
     </header>

apps/stats/src/components/images/dark-mode-toggle.tsx

@@ -1,18 +0,0 @@
-export const DarkModeToggle = () => {
-  return (
-    <svg width="45" height="45">
-      <g>
-        <path
-          d="M22.5 27.79a5.29 5.29 0 1 0 0-10.58 5.29 5.29 0 0 0 0 10.58Z"
-          fill="currentColor"
-        ></path>
-        <path
-          d="M15.01 22.5H10M35 22.5h-5.01M22.5 29.99V35M22.5 10v5.01M17.21 27.79l-3.55 3.55M31.34 13.66l-3.55 3.55M27.79 27.79l3.55 3.55M13.66 13.66l3.55 3.55"
-          stroke="currentColor"
-          strokeWidth="1.3"
-          strokeMiterlimit="10"
-        ></path>
-      </g>
-    </svg>
-  );
-};

apps/stats/src/components/images/index.ts

@@ -1,2 +0,0 @@
-export { DarkModeToggle } from './dark-mode-toggle';
-export { LightModeToggle } from './light-mode-toggle';

apps/stats/src/components/images/light-mode-toggle.tsx

@@ -1,10 +0,0 @@
-export const LightModeToggle = () => {
-  return (
-    <svg width="45" height="45">
-      <path
-        d="M28.75 11.69A12.39 12.39 0 0 0 22.5 10a12.5 12.5 0 1 0 0 25c2.196 0 4.353-.583 6.25-1.69A12.46 12.46 0 0 0 35 22.5a12.46 12.46 0 0 0-6.25-10.81Zm-6.25 22a11.21 11.21 0 0 1-11.2-11.2 11.21 11.21 0 0 1 11.2-11.2c1.246 0 2.484.209 3.66.62a13.861 13.861 0 0 0-5 10.58 13.861 13.861 0 0 0 5 10.58 11.078 11.078 0 0 1-3.66.63v-.01Z"
-        fill="currentColor"
-      ></path>
-    </svg>
-  );
-};

apps/stats/src/config/types.ts

@@ -1,4 +0,0 @@
-export interface DarkModeState {
-  darkMode: boolean;
-  setDarkMode: (arg0: boolean) => void;
-}

apps/stats/src/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Health check for Vega's mainnet" />
+    <meta name="description" content="Health check for Vega" />
     <link rel="apple-touch-icon" href="assets/apple-touch-icon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -21,19 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Vega Mainnet Stats</title>
-    <script>
-      // Set dark mode preference indicator here to avoid FOUC
-      if (
-        localStorage.theme === 'dark' ||
-        (!('theme' in localStorage) &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches)
-      ) {
-        document.documentElement.classList.add('dark-mode-preferred');
-      } else {
-        document.documentElement.classList.remove('dark-mode-preferred');
-      }
-    </script>
+    <title>Vega Network Stats</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

apps/stats/tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
+  darkMode: 'class',
   theme,
   plugins: [],
 };

apps/trading/pages/_app.page.tsx

@@ -10,7 +10,7 @@ import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { ApolloProvider } from '@apollo/client';
 import { AppLoader } from '../components/app-loader';
 import { VegaWalletButton } from '../components/vega-wallet-connect-button';
-import { useThemeSwitcher } from '../hooks/use-theme-switcher';
+import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 
 import './styles.css';
 

libs/react-helpers/src/hooks/use-theme-switcher.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { LocalStorage } from '@vegaprotocol/react-helpers';
+import { LocalStorage } from '../lib/storage';
 
 const darkTheme = 'dark';
 const lightTheme = 'light';

libs/react-helpers/src/index.ts

@@ -6,3 +6,4 @@ export * from './lib/grid-cells';
 export * from './lib/storage';
 
 export * from './hooks/use-apply-grid-transaction';
+export * from './hooks/use-theme-switcher';