From ac4f8333600d25f5fab0227eaa1bb0e681b60019 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Wed, 23 Feb 2022 16:04:58 -0800 Subject: [PATCH] make manager component not take children --- apps/trading/pages/_app.page.tsx | 104 ++++++++++++++++++++++++------- 1 file changed, 81 insertions(+), 23 deletions(-) diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index e8d3c1349..1093d6de9 100644 --- a/apps/trading/pages/_app.page.tsx +++ b/apps/trading/pages/_app.page.tsx @@ -1,15 +1,30 @@ -import { ApolloProvider } from '@apollo/client'; import { AppProps } from 'next/app'; import Head from 'next/head'; -import { useCallback, useMemo } from 'react'; import { Navbar } from '../components/navbar'; +import { + useVegaWallet, + VegaConnectDialog, + VegaWalletProvider, +} from '@vegaprotocol/react-helpers'; +import { Connectors } from '../lib/connectors'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { LocalStorage } from '@vegaprotocol/storage'; import { createClient } from '../lib/apollo-client'; import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit'; -import { useVegaWallet } from '@vegaprotocol/react-helpers'; import './styles.css'; +import { ApolloProvider } from '@apollo/client'; function VegaTradingApp({ Component, pageProps }: AppProps) { const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []); + const [dialogOpen, setDialogOpen] = useState(false); + + const setConnectDialog = useCallback((isOpen?: boolean) => { + setDialogOpen((curr) => { + if (isOpen === undefined) return !curr; + return isOpen; + }); + }, []); + useCallback(() => { if ( localStorage.theme === 'dark' || @@ -28,24 +43,32 @@ function VegaTradingApp({ Component, pageProps }: AppProps) { }; return ( - - Welcome to trading! - - -
-
- - - + + + Welcome to trading! + + +
+
+ + + +
+
+ +
+
-
- -
-
+ + ); } @@ -55,8 +78,8 @@ interface VegaWalletButtonProps { } const VegaWalletButton = ({ setConnectDialog }: VegaWalletButtonProps) => { - const { disconnect, publicKeys } = useVegaWallet(); - const isConnected = publicKeys !== null; + const { disconnect, keypairs } = useVegaWallet(); + const isConnected = keypairs !== null; const handleClick = () => { if (isConnected) { @@ -67,10 +90,45 @@ const VegaWalletButton = ({ setConnectDialog }: VegaWalletButtonProps) => { }; return ( - ); }; export default VegaTradingApp; + +/** + * Wrapper to interact with the vega wallet out side of the provider itself. + */ +function VegaWalletManager() { + // Get keys from vega wallet immediately + useEagerConnect(); + + // Do other global stuff with vega wallet here + + return null; +} + +function useEagerConnect() { + const { connect } = useVegaWallet(); + + useEffect(() => { + const cfg = LocalStorage.getItem('vega_wallet'); + const cfgObj = JSON.parse(cfg); + + // No stored config, user has never connected or manually cleared storage + if (!cfgObj || !cfgObj.connector) { + return; + } + + const connector = Connectors[cfgObj.connector]; + + // Developer hasn't provided this connector + if (!connector) { + throw new Error(`Connector ${cfgObj?.connector} not configured`); + } + + connect(Connectors[cfgObj.connector]); + }, [connect]); +}