Replace context with valtio for easier readability

wallets/react-wallet-v2/package.json

@@ -16,7 +16,8 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "ethers": "5.5.4",
-    "keyvaluestorage": "0.7.1"
+    "keyvaluestorage": "0.7.1",
+    "valtio": "1.2.11"
   },
   "devDependencies": {
     "@walletconnect/types": "2.0.0-beta.22",

wallets/react-wallet-v2/src/containers/GlobalLayout.tsx

@@ -1,6 +1,7 @@
-import { WalletContext } from '@/contexts/WalletContext'
+import WalletStore from '@/store/WalletStore'
 import { Card, Container, Divider, Loading } from '@nextui-org/react'
-import { Fragment, ReactNode, useCallback, useContext, useEffect } from 'react'
+import { Fragment, ReactNode, useCallback, useEffect } from 'react'
+import { useSnapshot } from 'valtio'
 
 /**
  * Types
@@ -13,20 +14,19 @@ interface Props {
  * Container
  */
 export default function GlobalLayout({ children }: Props) {
-  const { walletState, walletActions } = useContext(WalletContext)
+  const { initialized } = useSnapshot(WalletStore.state)
-  const waletReady = walletState.ready
 
   const onInitialize = useCallback(async () => {
-    walletActions.createWallet()
+    WalletStore.createWallet()
-    await walletActions.createWalletConnectClient()
+    await WalletStore.createWalletConnectClient()
-    walletActions.setInitialized()
+    WalletStore.setInitialized(true)
-  }, [walletActions])
+  }, [])
 
   useEffect(() => {
-    if (!waletReady) {
+    if (!initialized) {
       onInitialize()
     }
-  }, [waletReady, onInitialize])
+  }, [initialized, onInitialize])
 
   return (
     <Container
@@ -42,11 +42,11 @@ export default function GlobalLayout({ children }: Props) {
           height: '92vh',
           maxWidth: '600px',
           width: '100%',
-          justifyContent: waletReady ? 'normal' : 'center',
+          justifyContent: initialized ? 'normal' : 'center',
-          alignItems: waletReady ? 'normal' : 'center'
+          alignItems: initialized ? 'normal' : 'center'
         }}
       >
-        {waletReady ? (
+        {initialized ? (
           <Fragment>
             <Card.Header>Header</Card.Header>
             <Divider />

wallets/react-wallet-v2/src/contexts/WalletContext.tsx

@@ -1,78 +0,0 @@
-import WalletConnectClient from '@walletconnect/client'
-import { Wallet } from 'ethers'
-import KeyValueStorage from 'keyvaluestorage'
-import { createContext, ReactNode, useMemo, useState } from 'react'
-
-/**
- * Types
- */
-interface State {
-  ready: boolean
-  wallet: Wallet
-  walletConnectClient: WalletConnectClient
-}
-
-interface Actions {
-  setInitialized: () => void
-  createWallet: () => void
-  createWalletConnectClient: () => Promise<void>
-}
-
-interface Context {
-  walletState: State
-  walletActions: Actions
-}
-
-interface Props {
-  children: ReactNode | ReactNode[]
-}
-
-/**
- * Context / Provider
- */
-export const WalletContext = createContext<Context>({} as Context)
-
-export function WalletContextProvider({ children }: Props) {
-  const [walletState, setState] = useState<State>({
-    ready: false,
-    wallet: undefined,
-    walletConnectClient: undefined
-  })
-
-  const walletActions = useMemo(
-    () => ({
-      setInitialized() {
-        setState(s => ({ ...s, initialized: true }))
-      },
-
-      createWallet() {
-        const wallet = Wallet.createRandom()
-        setState(s => ({ ...s, wallet }))
-      },
-
-      async createWalletConnectClient() {
-        const walletConnectClient = await WalletConnectClient.init({
-          controller: true,
-          logger: 'debug',
-          projectId: '8f331b9812e0e5b8f2da2c7203624869',
-          relayUrl: 'wss://relay.walletconnect.com',
-          metadata: {
-            name: 'React Wallet',
-            description: 'React Wallet for WalletConnect',
-            url: 'https://walletconnect.com/',
-            icons: ['https://avatars.githubusercontent.com/u/37784886']
-          },
-          storage: new KeyValueStorage()
-        })
-        setState(s => ({ ...s, walletConnectClient }))
-      }
-    }),
-    []
-  )
-
-  return (
-    <WalletContext.Provider value={{ walletState, walletActions }}>
-      {children}
-    </WalletContext.Provider>
-  )
-}

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

@@ -1,16 +1,13 @@
-import Layout from '@/containers/GlobalLayout'
+import GlobalLayout from '@/containers/GlobalLayout'
-import { WalletContextProvider } from '@/contexts/WalletContext'
 import { NextUIProvider } from '@nextui-org/react'
 import { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <NextUIProvider>
-      <WalletContextProvider>
+      <GlobalLayout>
-        <Layout>
+        <Component {...pageProps} />
-          <Component {...pageProps} />
+      </GlobalLayout>
-        </Layout>
-      </WalletContextProvider>
     </NextUIProvider>
   )
 }

wallets/react-wallet-v2/src/store/WalletStore.ts

@@ -0,0 +1,56 @@
+import WalletConnectClient from '@walletconnect/client'
+import { Wallet } from 'ethers'
+import KeyValueStorage from 'keyvaluestorage'
+import { proxy } from 'valtio'
+
+/**
+ * Types
+ */
+interface State {
+  initialized: boolean
+  wallet: Wallet
+  walletConnectClient: WalletConnectClient
+}
+
+/**
+ * State
+ */
+const state = proxy<State>({
+  initialized: false,
+  wallet: undefined,
+  walletConnectClient: undefined
+})
+
+/**
+ * Store / Actions
+ */
+const WalletStore = {
+  state,
+
+  setInitialized(value: State['initialized']) {
+    state.initialized = value
+  },
+
+  createWallet() {
+    state.wallet = Wallet.createRandom()
+  },
+
+  async createWalletConnectClient() {
+    const walletConnectClient = await WalletConnectClient.init({
+      controller: true,
+      logger: 'debug',
+      projectId: '8f331b9812e0e5b8f2da2c7203624869',
+      relayUrl: 'wss://relay.walletconnect.com',
+      metadata: {
+        name: 'React Wallet',
+        description: 'React Wallet for WalletConnect',
+        url: 'https://walletconnect.com/',
+        icons: ['https://avatars.githubusercontent.com/u/37784886']
+      },
+      storage: new KeyValueStorage()
+    })
+    state.walletConnectClient = walletConnectClient
+  }
+}
+
+export default WalletStore

wallets/react-wallet-v2/yarn.lock

@@ -2437,6 +2437,11 @@ prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proxy-compare@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.0.2.tgz#343e624d0ec399dfbe575f1d365d4fa042c9fc69"
+  integrity sha512-3qUXJBariEj3eO90M3Rgqq3+/P5Efl0t/dl9g/1uVzIQmO3M+ql4hvNH3mYdu8H+1zcKv07YvL55tsY74jmH1A==
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
@@ -2950,6 +2955,13 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
+valtio@1.2.11:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.2.11.tgz#1a49c6a24d774a1f0bb70692b20d93c1f7d40a06"
+  integrity sha512-zNbJsBNQ0EpzZnOUpuy6lUlpGSvkZu+/hZ9g7ifY3AQxo1RkqL7Ld6fVxRNLE04tVwOMNiDOgYihpEd6apLrog==
+  dependencies:
+    proxy-compare "2.0.2"
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"