Establish WalletConnectManager concept

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

@@ -1,33 +1,18 @@
-import WalletConnectStore from '@/store/WalletConnectStore'
-import WalletStore from '@/store/WalletStore'
 import { Card, Container, Divider, Loading } from '@nextui-org/react'
-import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react'
+import { Fragment, ReactNode } from 'react'
 
 /**
  * Types
  */
 interface Props {
+  initialized: boolean
   children: ReactNode | ReactNode[]
 }
 
 /**
  * Container
  */
-export default function GlobalLayout({ children }: Props) {
+export default function GlobalLayout({ children, initialized }: Props) {
-  const [initialized, setInitialized] = useState(false)
-
-  const onInitialize = useCallback(async () => {
-    WalletStore.createWallet()
-    await WalletConnectStore.createWalletConnectClient()
-    setInitialized(true)
-  }, [])
-
-  useEffect(() => {
-    if (!initialized) {
-      onInitialize()
-    }
-  }, [initialized, onInitialize])
-
   return (
     <Container
       display="flex"

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

@@ -0,0 +1,26 @@
+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 (
+    <Modal closeButton open={open} onClose={() => setOpen(false)}>
+      <Modal.Header></Modal.Header>
+      <Modal.Body></Modal.Body>
+      <Modal.Footer></Modal.Footer>
+    </Modal>
+  )
+}

wallets/react-wallet-v2/src/hooks/useInitialization.ts

@@ -0,0 +1,21 @@
+import WalletConnectStore from '@/store/WalletConnectStore'
+import WalletStore from '@/store/WalletStore'
+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)
+  }, [])
+
+  useEffect(() => {
+    if (!initialized) {
+      onInitialize()
+    }
+  }, [initialized, onInitialize])
+
+  return initialized
+}

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

@@ -1,10 +1,14 @@
-import GlobalLayout from '@/containers/GlobalLayout'
+import Layout from '@/components/Layout'
+import WalletConnectManager from '@/components/WalletConnectManager'
+import useInitialization from '@/hooks/useInitialization'
 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) {
+  const initialized = useInitialization()
+
   return (
     <ThemeProvider
       defaultTheme="system"
@@ -15,9 +19,11 @@ export default function App({ Component, pageProps }: AppProps) {
       }}
     >
       <NextUIProvider>
-        <GlobalLayout>
+        <Layout initialized={initialized}>
           <Component {...pageProps} />
-        </GlobalLayout>
+        </Layout>
+
+        {initialized && <WalletConnectManager />}
       </NextUIProvider>
     </ThemeProvider>
   )