Use next-themes for dark / light mode support

wallets/react-wallet-v2/package.json

@@ -13,6 +13,7 @@
     "@walletconnect/jsonrpc-utils": "1.0.0",
     "@nextui-org/react": "1.0.2-beta.3",
     "next": "12.0.10",
+    "next-themes": "0.0.15",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "ethers": "5.5.4",

wallets/react-wallet-v2/src/components/AccountCard.tsx

@@ -0,0 +1,3 @@
+export default function AccountCard() {
+  return null
+}

wallets/react-wallet-v2/src/components/PageHeader.tsx

@@ -15,7 +15,7 @@ export default function PageHeader({ children }: Props) {
     <Text
       h3
       css={{
-        textGradient: '45deg, $primary -30%, $secondary 100%'
+        textGradient: '45deg, $primary -20%, $secondary 100%'
       }}
       weight="bold"
     >

wallets/react-wallet-v2/src/pages/_app.tsx

@@ -1,13 +1,24 @@
 import GlobalLayout from '@/containers/GlobalLayout'
+import { darkTheme, lightTheme } from '@/utils/ThemeUtil'
 import { NextUIProvider } from '@nextui-org/react'
+import { ThemeProvider } from 'next-themes'
 import { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
+    <ThemeProvider
+      defaultTheme="system"
+      attribute="class"
+      value={{
+        light: lightTheme.className,
+        dark: darkTheme.className
+      }}
+    >
       <NextUIProvider>
         <GlobalLayout>
           <Component {...pageProps} />
         </GlobalLayout>
       </NextUIProvider>
+    </ThemeProvider>
   )
 }

wallets/react-wallet-v2/src/pages/index.tsx

@@ -1,5 +1,9 @@
 import PageHeader from '@/components/PageHeader'
+import WalletStore from '@/store/WalletStore'
+import { useSnapshot } from 'valtio'
 
 export default function HomePage() {
+  const { wallet } = useSnapshot(WalletStore.state)
+
   return <PageHeader>Accounts</PageHeader>
 }

wallets/react-wallet-v2/src/utils/ThemeUtil.ts

@@ -0,0 +1,5 @@
+import { createTheme } from '@nextui-org/react'
+
+export const darkTheme = createTheme({ type: 'dark' })
+
+export const lightTheme = createTheme({ type: 'light' })

wallets/react-wallet-v2/yarn.lock

@@ -2159,6 +2159,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+next-themes@0.0.15:
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.15.tgz#ab0cee69cd763b77d41211f631e108beab39bf7d"
+  integrity sha512-LTmtqYi03c4gMTJmWwVK9XkHL7h0/+XrtR970Ujvtu3s0kZNeJN24aJsi4rkZOI8i19+qq6f8j+8Duwy5jqcrQ==
+
 next@12.0.10:
   version "12.0.10"
   resolved "https://registry.yarnpkg.com/next/-/next-12.0.10.tgz#fcc4584177418bd777ce157f3165b7ba5e7708f7"