Create modal component and store

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

@@ -0,0 +1,15 @@
+import ModalStore from '@/store/ModalStore'
+import { Modal as NextModal } from '@nextui-org/react'
+import { useSnapshot } from 'valtio'
+
+export default function Modal() {
+  const { open } = useSnapshot(ModalStore.state)
+
+  return (
+    <NextModal open={open} onClose={ModalStore.close}>
+      <NextModal.Header></NextModal.Header>
+      <NextModal.Body></NextModal.Body>
+      <NextModal.Footer></NextModal.Footer>
+    </NextModal>
+  )
+}

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

@@ -1,4 +1,5 @@
 import Layout from '@/components/Layout'
+import Modal from '@/components/Modal'
 import useInitialization from '@/hooks/useInitialization'
 import useWalletConnectEventsManager from '@/hooks/useWalletConnectEventsManager'
 import { darkTheme, lightTheme } from '@/utils/ThemeUtil'
@@ -26,6 +27,8 @@ export default function App({ Component, pageProps }: AppProps) {
         <Layout initialized={initialized}>
           <Component {...pageProps} />
         </Layout>
+
+        <Modal />
       </NextUIProvider>
     </ThemeProvider>
   )

wallets/react-wallet-v2/src/store/ModalStore.ts

@@ -0,0 +1,32 @@
+import { proxy } from 'valtio'
+
+/**
+ * Types
+ */
+interface State {
+  open: boolean
+}
+
+/**
+ * State
+ */
+const state = proxy<State>({
+  open: false
+})
+
+/**
+ * Store / Actions
+ */
+const ModalStore = {
+  state,
+
+  open() {
+    state.open = true
+  },
+
+  close() {
+    state.open = false
+  }
+}
+
+export default ModalStore