diff --git a/wallets/react-wallet-v2/src/components/PageHeader.tsx b/wallets/react-wallet-v2/src/components/PageHeader.tsx index 53581cb..69abef3 100644 --- a/wallets/react-wallet-v2/src/components/PageHeader.tsx +++ b/wallets/react-wallet-v2/src/components/PageHeader.tsx @@ -1,4 +1,5 @@ -import { Text } from '@nextui-org/react' +import { Divider, Text } from '@nextui-org/react' +import { Fragment } from 'react' /** * Types @@ -12,15 +13,18 @@ interface Props { */ export default function PageHeader({ children }: Props) { return ( - - {children} - + + + {children} + + + ) } diff --git a/wallets/react-wallet-v2/src/components/WalletConnectManager.tsx b/wallets/react-wallet-v2/src/components/WalletConnectManager.tsx deleted file mode 100644 index c1bce6b..0000000 --- a/wallets/react-wallet-v2/src/components/WalletConnectManager.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import WalletConnectStore from '@/store/WalletConnectStore' -import { Modal } from '@nextui-org/react' -import { CLIENT_EVENTS } from '@walletconnect/client' -import { SessionTypes } from '@walletconnect/types' -import { useCallback, useEffect, useState } from 'react' - -export default function WalletConnectManager() { - const [open, setOpen] = useState(false) - const { client } = WalletConnectStore.state - - const onSessionProposal = useCallback((proposal: SessionTypes.Proposal) => {}, []) - - useEffect(() => { - client.on(CLIENT_EVENTS.session.proposal, onSessionProposal) - - return () => client.disconnect() - }, [client, onSessionProposal]) - - return ( - setOpen(false)}> - - - - - ) -} diff --git a/wallets/react-wallet-v2/src/hooks/useInitialization.ts b/wallets/react-wallet-v2/src/hooks/useInitialization.ts index b667a7d..a7dd284 100644 --- a/wallets/react-wallet-v2/src/hooks/useInitialization.ts +++ b/wallets/react-wallet-v2/src/hooks/useInitialization.ts @@ -1,14 +1,18 @@ -import WalletConnectStore from '@/store/WalletConnectStore' import WalletStore from '@/store/WalletStore' +import { createClient } from '@/utils/WalletConnectUtil' import { useCallback, useEffect, useState } from 'react' export default function useInitialization() { const [initialized, setInitialized] = useState(false) const onInitialize = useCallback(async () => { - WalletStore.createWallet() - await WalletConnectStore.createWalletConnectClient() - setInitialized(true) + try { + WalletStore.createWallet() + await createClient() + setInitialized(true) + } catch (err: unknown) { + alert(err) + } }, []) useEffect(() => { diff --git a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts new file mode 100644 index 0000000..c727bb9 --- /dev/null +++ b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts @@ -0,0 +1,16 @@ +import { client } from '@/utils/WalletConnectUtil' +import { CLIENT_EVENTS } from '@walletconnect/client' +import { SessionTypes } from '@walletconnect/types' +import { useCallback, useEffect } from 'react' + +export default function useWalletConnectEventsManager(initialized: boolean) { + const onSessionProposal = useCallback((proposal: SessionTypes.Proposal) => { + console.log(proposal) + }, []) + + useEffect(() => { + if (initialized) { + client?.on(CLIENT_EVENTS.session.proposal, onSessionProposal) + } + }, [initialized, onSessionProposal]) +} diff --git a/wallets/react-wallet-v2/src/pages/_app.tsx b/wallets/react-wallet-v2/src/pages/_app.tsx index b8e27af..921b993 100644 --- a/wallets/react-wallet-v2/src/pages/_app.tsx +++ b/wallets/react-wallet-v2/src/pages/_app.tsx @@ -1,14 +1,18 @@ import Layout from '@/components/Layout' -import WalletConnectManager from '@/components/WalletConnectManager' import useInitialization from '@/hooks/useInitialization' +import useWalletConnectEventsManager from '@/hooks/useWalletConnectEventsManager' import { darkTheme, lightTheme } from '@/utils/ThemeUtil' import { NextUIProvider } from '@nextui-org/react' import { ThemeProvider } from 'next-themes' import { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { + // Step 1 - Initialize wallets and wallet connect client const initialized = useInitialization() + // Step 2 - Once initialized, set up wallet connect event manager + useWalletConnectEventsManager(initialized) + return ( - - {initialized && } ) diff --git a/wallets/react-wallet-v2/src/pages/index.tsx b/wallets/react-wallet-v2/src/pages/index.tsx index 7f00db9..b87ef28 100644 --- a/wallets/react-wallet-v2/src/pages/index.tsx +++ b/wallets/react-wallet-v2/src/pages/index.tsx @@ -8,6 +8,10 @@ import { useSnapshot } from 'valtio' export default function HomePage() { const { wallet } = useSnapshot(WalletStore.state) + if (!wallet) { + return null + } + return ( Accounts diff --git a/wallets/react-wallet-v2/src/pages/walletconnect.tsx b/wallets/react-wallet-v2/src/pages/walletconnect.tsx new file mode 100644 index 0000000..862d973 --- /dev/null +++ b/wallets/react-wallet-v2/src/pages/walletconnect.tsx @@ -0,0 +1,38 @@ +import PageHeader from '@/components/PageHeader' +import { client } from '@/utils/WalletConnectUtil' +import { Button, Input, Loading } from '@nextui-org/react' +import { Fragment, useState } from 'react' + +export default function WalletConnectPage() { + const [uri, setUri] = useState('') + const [loading, setLoading] = useState(false) + + async function onConnect() { + try { + setLoading(true) + await client?.pair({ uri }) + } catch (err: unknown) { + alert(err) + } finally { + setLoading(false) + } + } + + return ( + + WalletConnect + setUri(e.target.value)} + value={uri} + contentRight={ + + } + /> + + ) +} diff --git a/wallets/react-wallet-v2/src/store/WalletConnectStore.ts b/wallets/react-wallet-v2/src/store/WalletConnectStore.ts deleted file mode 100644 index 47110c0..0000000 --- a/wallets/react-wallet-v2/src/store/WalletConnectStore.ts +++ /dev/null @@ -1,41 +0,0 @@ -import WalletConnectClient from '@walletconnect/client' -import { proxy } from 'valtio' - -/** - * Types - */ -interface State { - client: WalletConnectClient -} - -/** - * State - */ -const state = proxy({ - 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 diff --git a/wallets/react-wallet-v2/src/store/WalletStore.ts b/wallets/react-wallet-v2/src/store/WalletStore.ts index 4e1960c..f9cb799 100644 --- a/wallets/react-wallet-v2/src/store/WalletStore.ts +++ b/wallets/react-wallet-v2/src/store/WalletStore.ts @@ -5,7 +5,7 @@ import { proxy } from 'valtio' * Types */ interface State { - wallet: Wallet + wallet?: Wallet } /** diff --git a/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts b/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts new file mode 100644 index 0000000..6212035 --- /dev/null +++ b/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts @@ -0,0 +1,18 @@ +import WalletConnectClient from '@walletconnect/client' + +export let client: WalletConnectClient | undefined = undefined + +export async function createClient() { + 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'] + } + }) +} diff --git a/wallets/react-wallet-v2/tsconfig.json b/wallets/react-wallet-v2/tsconfig.json index 3806705..a9d5577 100644 --- a/wallets/react-wallet-v2/tsconfig.json +++ b/wallets/react-wallet-v2/tsconfig.json @@ -8,7 +8,7 @@ ], "allowJs": true, "skipLibCheck": true, - "strict": false, + "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true,