deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace context with valtio for easier readability

Browse Source
This commit is contained in:
Ilja 2022-02-04 14:49:30 +02:00
parent 81bddf0c5d
commit d2f7704433
7 changed files with 87 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
wallets/react-wallet-v2/package.json
View File

@ -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",

26
wallets/react-wallet-v2/src/containers/GlobalLayout.tsx
View File

@ -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 waletReady = walletState.ready
const { initialized } = useSnapshot(WalletStore.state)
const onInitialize = useCallback(async () => {
walletActions.createWallet()
await walletActions.createWalletConnectClient()
walletActions.setInitialized()
}, [walletActions])
WalletStore.createWallet()
await WalletStore.createWalletConnectClient()
WalletStore.setInitialized(true)
}, [])
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',
alignItems: waletReady ? 'normal' : 'center'
justifyContent: initialized ? 'normal' : 'center',
alignItems: initialized ? 'normal' : 'center'
}}
>
{waletReady ? (
{initialized ? (
<Fragment>
<Card.Header>Header</Card.Header>
<Divider />

0
wallets/react-wallet-v2/src/contexts/AccountContext.tsx
View File

78
wallets/react-wallet-v2/src/contexts/WalletContext.tsx
View File

@ -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>
)
}

11
wallets/react-wallet-v2/src/pages/_app.tsx
View File

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

56
wallets/react-wallet-v2/src/store/WalletStore.ts Normal file
View File

@ -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

12
wallets/react-wallet-v2/yarn.lock
View File

@ -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"