re-factor wc into its own store

wallets/react-wallet-v2/package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@walletconnect/types": "2.0.0-beta.22",
-    "@types/node": "17.0.14",
+    "@types/node": "17.0.15",
     "@types/react": "17.0.39",
     "eslint": "8.8.0",
     "eslint-config-next": "12.0.10",

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

@@ -15,8 +15,8 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
       bordered
       borderWeight="light"
       css={{
-        borderColor: `rgba(${rgb}, 0.6)`,
+        borderColor: `rgba(${rgb}, 0.4)`,
-        boxShadow: `0 0 10px 0 rgba(${rgb}, 0.1)`,
+        boxShadow: `0 0 10px 0 rgba(${rgb}, 0.2)`,
         marginBottom: '$6',
         overflowY: 'hidden',
         minHeight: '70px'
@@ -25,7 +25,7 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
       <Card.Body
         css={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
       >
-        <Avatar src={logo} css={{ borderColor: `rgb(${rgb})` }} />
+        <Avatar src={logo} />
         <div style={{ flex: 1 }}>
           <Text h5 css={{ marginLeft: '$9' }}>
             {name}

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

@@ -1,7 +1,7 @@
+import WalletConnectStore from '@/store/WalletConnectStore'
 import WalletStore from '@/store/WalletStore'
 import { Card, Container, Divider, Loading } from '@nextui-org/react'
-import { Fragment, ReactNode, useCallback, useEffect } from 'react'
+import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react'
-import { useSnapshot } from 'valtio'
 
 /**
  * Types
@@ -14,12 +14,12 @@ interface Props {
  * Container
  */
 export default function GlobalLayout({ children }: Props) {
-  const { initialized } = useSnapshot(WalletStore.state)
+  const [initialized, setInitialized] = useState(false)
 
   const onInitialize = useCallback(async () => {
     WalletStore.createWallet()
-    await WalletStore.createWalletConnectClient()
+    await WalletConnectStore.createWalletConnectClient()
-    WalletStore.setInitialized(true)
+    setInitialized(true)
   }, [])
 
   useEffect(() => {

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

@@ -0,0 +1,41 @@
+import WalletConnectClient from '@walletconnect/client'
+import { proxy } from 'valtio'
+
+/**
+ * Types
+ */
+interface State {
+  client: WalletConnectClient
+}
+
+/**
+ * State
+ */
+const state = proxy<State>({
+  client: undefined
+})
+
+/**
+ * Store / Actions
+ */
+const WalletConnectStore = {
+  state,
+
+  async createWalletConnectClient() {
+    const client = 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']
+      }
+    })
+    state.client = client
+  }
+}
+
+export default WalletConnectStore

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

@@ -1,4 +1,3 @@
-import WalletConnectClient from '@walletconnect/client'
 import { Wallet } from 'ethers'
 import { proxy } from 'valtio'
 
@@ -6,18 +5,14 @@ import { proxy } from 'valtio'
  * Types
  */
 interface State {
-  initialized: boolean
   wallet: Wallet
-  walletConnectClient: WalletConnectClient
 }
 
 /**
  * State
  */
 const state = proxy<State>({
-  initialized: false,
+  wallet: undefined
-  wallet: undefined,
-  walletConnectClient: undefined
 })
 
 /**
@@ -26,28 +21,8 @@ const state = proxy<State>({
 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']
-      }
-    })
-    state.walletConnectClient = walletConnectClient
   }
 }
 

wallets/react-wallet-v2/yarn.lock

@@ -555,10 +555,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/node@17.0.14":
+"@types/node@17.0.15":
-  version "17.0.14"
+  version "17.0.15"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.14.tgz#33b9b94f789a8fedd30a68efdbca4dbb06b61f20"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.15.tgz#97779282c09c09577120a2162e71d8380003590a"
-  integrity sha512-SbjLmERksKOGzWzPNuW7fJM7fk3YXVTFiZWB/Hs99gwhk+/dnrQRPBQjPW9aO+fi1tAffi9PrwFvsmOKmDTyng==
+  integrity sha512-zWt4SDDv1S9WRBNxLFxFRHxdD9tvH8f5/kg5/IaLFdnSNXsDY4eL3Q3XXN+VxUnWIhyVFDwcsmAprvwXoM/ClA==
 
 "@types/prop-types@*":
   version "15.7.4"