tidy up _app move logic to hooks and add component files for vega connect button and app loader

apps/trading/components/app-loader/index.tsx

@@ -0,0 +1,17 @@
+import { useEagerConnect } from '../../hooks/use-vega-wallet-eager-connect';
+import { ReactNode } from 'react';
+
+interface AppLoaderProps {
+  children: ReactNode;
+}
+
+/**
+ * Component to handle any app initialization, startup querys and other things
+ * that must happen for it can be used
+ */
+export function AppLoader({ children }: AppLoaderProps) {
+  // Get keys from vega wallet immediately
+  useEagerConnect();
+
+  return <>{children}</>;
+}

apps/trading/components/vega-wallet-connect-button/index.tsx

@@ -0,0 +1,26 @@
+import { useVegaWallet } from '@vegaprotocol/react-helpers';
+
+interface VegaWalletButtonProps {
+  setConnectDialog: (isOpen: boolean) => void;
+}
+
+export const VegaWalletButton = ({
+  setConnectDialog,
+}: VegaWalletButtonProps) => {
+  const { disconnect, keypairs } = useVegaWallet();
+  const isConnected = keypairs !== null;
+
+  const handleClick = () => {
+    if (isConnected) {
+      disconnect();
+    } else {
+      setConnectDialog(true);
+    }
+  };
+
+  return (
+    <button onClick={handleClick} className="ml-auto inline-block p-8">
+      {isConnected ? 'Disconnect' : 'Connect Vega wallet'}
+    </button>
+  );
+};

apps/trading/hooks/use-theme-switcher.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+export function useThemeSwitcher() {
+  useEffect(() => {
+    if (
+      localStorage.theme === 'dark' ||
+      (!('theme' in localStorage) &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const setTheme = () => {
+    localStorage.theme = document.documentElement.classList.toggle('dark')
+      ? 'dark'
+      : undefined;
+  };
+
+  return setTheme;
+}

apps/trading/hooks/use-vega-wallet-eager-connect.ts

@@ -0,0 +1,29 @@
+import { useVegaWallet, WALLET_CONFIG } from '@vegaprotocol/react-helpers';
+import { useEffect } from 'react';
+import { LocalStorage } from '@vegaprotocol/storage';
+import { Connectors } from '../lib/connectors';
+
+export function useEagerConnect() {
+  const { connect } = useVegaWallet();
+
+  useEffect(() => {
+    const cfg = LocalStorage.getItem(WALLET_CONFIG);
+    const cfgObj = JSON.parse(cfg);
+
+    // No stored config, user has never connected or manually cleared storage
+    if (!cfgObj || !cfgObj.connector) {
+      return;
+    }
+
+    // Use the connector string in local storage to find the right connector to auto
+    // connect to
+    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]);
+}

apps/trading/pages/_app.page.tsx

@@ -2,23 +2,24 @@ import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Navbar } from '../components/navbar';
 import {
-  useVegaWallet,
   VegaConnectDialog,
   VegaWalletProvider,
-  WALLET_CONFIG,
 } from '@vegaprotocol/react-helpers';
 import { Connectors } from '../lib/connectors';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
-import { LocalStorage } from '@vegaprotocol/storage';
 import { createClient } from '../lib/apollo-client';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import './styles.css';
 import { ApolloProvider } from '@apollo/client';
 import './styles.css';
+import { AppLoader } from '../components/app-loader';
+import { VegaWalletButton } from '../components/vega-wallet-connect-button';
+import { useThemeSwitcher } from '../hooks/use-theme-switcher';
 
 function VegaTradingApp({ Component, pageProps }: AppProps) {
   const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const setTheme = useThemeSwitcher();
 
   const setConnectDialog = useCallback((isOpen?: boolean) => {
     setDialogOpen((curr) => {
@@ -27,114 +28,39 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
     });
   }, []);
 
-  useCallback(() => {
-    if (
-      localStorage.theme === 'dark' ||
-      (!('theme' in localStorage) &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, []);
-  const setTheme = () => {
-    localStorage.theme = document.documentElement.classList.toggle('dark')
-      ? 'dark'
-      : undefined;
-  };
   return (
     <ApolloProvider client={client}>
       <VegaWalletProvider>
-        <Head>
+        <AppLoader>
-          <title>Welcome to trading!</title>
+          <Head>
-          <link
+            <title>Welcome to trading!</title>
-            rel="icon"
+            <link
-            href="https://vega.xyz/favicon-32x32.png"
+              rel="icon"
-            type="image/png"
+              href="https://vega.xyz/favicon-32x32.png"
-          />
+              type="image/png"
-        </Head>
+            />
-        <div className="h-full dark:bg-black dark:text-white-60 bg-white text-black-60">
+          </Head>
-          <div className="flex items-center border-b-[7px] border-vega-yellow">
+          <div className="h-full dark:bg-black dark:text-white-60 bg-white text-black-60">
-            <Navbar />
+            <div className="flex items-center border-b-[7px] border-vega-yellow">
-            <div className="flex items-center ml-auto mr-8">
+              <Navbar />
-              <VegaWalletButton setConnectDialog={setConnectDialog} />
+              <div className="flex items-center ml-auto mr-8">
-              <ThemeSwitcher onToggle={setTheme} />
+                <VegaWalletButton setConnectDialog={setConnectDialog} />
+                <ThemeSwitcher onToggle={setTheme} />
+              </div>
             </div>
+            <main>
+              <Component {...pageProps} />
+            </main>
+            <VegaConnectDialog
+              connectors={Connectors}
+              dialogOpen={dialogOpen}
+              setDialogOpen={setDialogOpen}
+            />
           </div>
-          <main>
+        </AppLoader>
-            <Component {...pageProps} />
-          </main>
-          <VegaConnectDialog
-            connectors={Connectors}
-            dialogOpen={dialogOpen}
-            setDialogOpen={setDialogOpen}
-          />
-        </div>
-        <VegaWalletManager />
       </VegaWalletProvider>
     </ApolloProvider>
   );
 }
 
-interface VegaWalletButtonProps {
-  setConnectDialog: (isOpen: boolean) => void;
-}
-
-const VegaWalletButton = ({ setConnectDialog }: VegaWalletButtonProps) => {
-  const { disconnect, keypairs } = useVegaWallet();
-  const isConnected = keypairs !== null;
-
-  const handleClick = () => {
-    if (isConnected) {
-      disconnect();
-    } else {
-      setConnectDialog(true);
-    }
-  };
-
-  return (
-    <button onClick={handleClick} className="ml-auto inline-block p-8">
-      {isConnected ? 'Disconnect' : 'Connect Vega wallet'}
-    </button>
-  );
-};
-
 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(WALLET_CONFIG);
-    const cfgObj = JSON.parse(cfg);
-
-    // No stored config, user has never connected or manually cleared storage
-    if (!cfgObj || !cfgObj.connector) {
-      return;
-    }
-
-    // Use the connector string in local storage to find the right connector to auto
-    // connect to
-    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]);
-}