Set up ethers / context and wallet creation

wallets/react-wallet-v2/package.json

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

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

@@ -1,33 +0,0 @@
-import { Card, Container, Divider } from '@nextui-org/react'
-import { ReactNode } from 'react'
-
-interface Props {
-  children: ReactNode | ReactNode[]
-}
-
-export default function Layout({ children }: Props) {
-  return (
-    <Container
-      display="flex"
-      justify="center"
-      alignItems="center"
-      css={{ width: '100vw', height: '100vh' }}
-    >
-      <Card
-        bordered
-        borderWeight="light"
-        css={{ height: '92vh', maxWidth: '600px', width: '100%' }}
-      >
-        <Card.Header>Header</Card.Header>
-
-        <Divider />
-
-        <Card.Body css={{ overflow: 'scroll' }}>{children}</Card.Body>
-
-        <Divider />
-
-        <Card.Footer>Footer</Card.Footer>
-      </Card>
-    </Container>
-  )
-}

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

@@ -0,0 +1,45 @@
+import { WalletContext } from '@/contexts/WalletContext'
+import { Card, Container, Divider, Loading } from '@nextui-org/react'
+import { Fragment, ReactNode, useContext, useEffect } from 'react'
+
+interface Props {
+  children: ReactNode | ReactNode[]
+}
+
+export default function GlobalLayout({ children }: Props) {
+  const { state, actions } = useContext(WalletContext)
+  const hasWallet = state.wallet !== undefined
+
+  useEffect(() => {
+    if (!hasWallet) {
+      actions.createWallet()
+    }
+  }, [actions, hasWallet])
+
+  return (
+    <Container
+      display="flex"
+      justify="center"
+      alignItems="center"
+      css={{ width: '100vw', height: '100vh' }}
+    >
+      <Card
+        bordered
+        borderWeight="light"
+        css={{ height: '92vh', maxWidth: '600px', width: '100%' }}
+      >
+        {hasWallet ? (
+          <Fragment>
+            <Card.Header>Header</Card.Header>
+            <Divider />
+            <Card.Body css={{ overflow: 'scroll' }}>{children}</Card.Body>
+            <Divider />
+            <Card.Footer>Footer</Card.Footer>
+          </Fragment>
+        ) : (
+          <Loading />
+        )}
+      </Card>
+    </Container>
+  )
+}

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

@@ -1,27 +1,39 @@
+import { ethers } from 'ethers'
 import { createContext, ReactNode, useState } from 'react'
 
 /**
  * Types
  */
-interface State {}
+interface State {
+  wallet: ethers.Wallet
+}
+
+interface Actions {
+  createWallet: () => void
+}
+
+interface Context {
+  state: State
+  actions: Actions
+}
 
 interface Props {
   children: ReactNode | ReactNode[]
 }
 
 /**
- * Context
+ * Context / Provider
  */
-export const WalletContext = createContext<State>({})
+export const WalletContext = createContext<Context>({} as Context)
 
-/**
- * Provider
- */
 export function WalletContextProvider({ children }: Props) {
-  const [state, setState] = useState<State>({})
+  const [state, setState] = useState<State>({ wallet: undefined })
 
   const actions = {
-    async initialise() {}
+    createWallet() {
+      const wallet = ethers.Wallet.createRandom()
+      setState(s => ({ ...s, wallet }))
+    }
   }
 
   return <WalletContext.Provider value={{ state, actions }}>{children}</WalletContext.Provider>

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

@@ -1,4 +1,4 @@
-import Layout from '@/components/Layout'
+import Layout from '@/containers/GlobalLayout'
 import { WalletContextProvider } from '@/contexts/WalletContext'
 import { theme } from '@/utils/ThemeUtil'
 import { NextUIProvider } from '@nextui-org/react'

wallets/react-wallet-v2/yarn.lock

@@ -565,10 +565,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/react@17.0.38":
+"@types/react@17.0.39":
-  version "17.0.38"
+  version "17.0.39"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
-  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"