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,