Init wallet and wallet connect client

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

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

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

@@ -1,20 +1,28 @@
 import { WalletContext } from '@/contexts/WalletContext'
 import { Card, Container, Divider, Loading } from '@nextui-org/react'
-import { Fragment, ReactNode, useContext, useEffect } from 'react'
+import { Fragment, ReactNode, useCallback, useContext, useEffect } from 'react'
 
 interface Props {
   children: ReactNode | ReactNode[]
 }
 
 export default function GlobalLayout({ children }: Props) {
-  const { state, actions } = useContext(WalletContext)
+  const {
-  const hasWallet = state.wallet !== undefined
+    state: { initialized },
+    actions
+  } = useContext(WalletContext)
+
+  const onInitialize = useCallback(async () => {
+    actions.createWallet()
+    await actions.createWalletConnectClient()
+    actions.setInitialized()
+  }, [actions])
 
   useEffect(() => {
-    if (!hasWallet) {
+    if (!initialized) {
-      actions.createWallet()
+      onInitialize()
     }
-  }, [actions, hasWallet])
+  }, [initialized, onInitialize])
 
   return (
     <Container
@@ -26,9 +34,15 @@ export default function GlobalLayout({ children }: Props) {
       <Card
         bordered
         borderWeight="light"
-        css={{ height: '92vh', maxWidth: '600px', width: '100%' }}
+        css={{
+          height: '92vh',
+          maxWidth: '600px',
+          width: '100%',
+          justifyContent: initialized ? 'normal' : 'center',
+          alignItems: initialized ? 'normal' : 'center'
+        }}
       >
-        {hasWallet ? (
+        {initialized ? (
           <Fragment>
             <Card.Header>Header</Card.Header>
             <Divider />

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

@@ -1,15 +1,21 @@
-import { ethers } from 'ethers'
+import WalletConnectClient from '@walletconnect/client'
-import { createContext, ReactNode, useState } from 'react'
+import { Wallet } from 'ethers'
+import KeyValueStorage from 'keyvaluestorage'
+import { createContext, ReactNode, useMemo, useState } from 'react'
 
 /**
  * Types
  */
 interface State {
-  wallet: ethers.Wallet
+  initialized: boolean
+  wallet: Wallet
+  walletConnectClient: WalletConnectClient
 }
 
 interface Actions {
+  setInitialized: () => void
   createWallet: () => void
+  createWalletConnectClient: () => Promise<void>
 }
 
 interface Context {
@@ -27,14 +33,42 @@ interface Props {
 export const WalletContext = createContext<Context>({} as Context)
 
 export function WalletContextProvider({ children }: Props) {
-  const [state, setState] = useState<State>({ wallet: undefined })
+  const [state, setState] = useState<State>({
+    initialized: false,
+    wallet: undefined,
+    walletConnectClient: undefined
+  })
 
-  const actions = {
+  const actions = useMemo(
-    createWallet() {
+    () => ({
-      const wallet = ethers.Wallet.createRandom()
+      setInitialized() {
-      setState(s => ({ ...s, wallet }))
+        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={{ state, actions }}>{children}</WalletContext.Provider>
 }

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

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

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

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