diff --git a/wallets/react-wallet-v2/src/containers/GlobalLayout.tsx b/wallets/react-wallet-v2/src/components/Layout.tsx similarity index 60% rename from wallets/react-wallet-v2/src/containers/GlobalLayout.tsx rename to wallets/react-wallet-v2/src/components/Layout.tsx index f428262..934d489 100644 --- a/wallets/react-wallet-v2/src/containers/GlobalLayout.tsx +++ b/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) { - const [initialized, setInitialized] = useState(false) - - const onInitialize = useCallback(async () => { - WalletStore.createWallet() - await WalletConnectStore.createWalletConnectClient() - setInitialized(true) - }, []) - - useEffect(() => { - if (!initialized) { - onInitialize() - } - }, [initialized, onInitialize]) - +export default function GlobalLayout({ children, initialized }: Props) { return ( {}, []) + + 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 new file mode 100644 index 0000000..b667a7d --- /dev/null +++ b/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 +} diff --git a/wallets/react-wallet-v2/src/pages/_app.tsx b/wallets/react-wallet-v2/src/pages/_app.tsx index 2c198cb..b8e27af 100644 --- a/wallets/react-wallet-v2/src/pages/_app.tsx +++ b/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 ( - + - + + + {initialized && } )