update init logic

hooks/use-polkadot-extension.ts

-import { InjectedAccountWithMeta, InjectedExtension } from '@polkadot/extension-inject/types';
-import { useEffect, useState } from 'react';
-import { useIsMounted } from './use-is-mounted';
+import {
+  InjectedAccountWithMeta,
+  InjectedExtension,
+} from "@polkadot/extension-inject/types";
+import { useEffect, useState } from "react";
+import { useIsMounted } from "./use-is-mounted";
+import { documentReadyPromise } from "./utils";
 
 interface checkEnabledReturnType {
   accounts: InjectedAccountWithMeta[] | null;
   error: Error | null;
 }
 
-export const checkEnabled: (extensionName: string) => Promise<checkEnabledReturnType> = async (
-    extensionName: string = 'polkadot-extension',
+export const extensionSetup = async () => {
+  const extensionDapp = await import("@polkadot/extension-dapp");
+  const { web3Accounts, web3Enable, web3AccountsSubscribe } = extensionDapp;
+  const enabledApps = await web3Enable("polkadot-extension");
+  console.log("enabled Apps", enabledApps);
+  if (enabledApps.length === 0) {
+    console.log("no extension");
+    return;
+  }
+};
+
+export const checkEnabled: (
+  extensionName: string
+) => Promise<checkEnabledReturnType> = async (
+  extensionName: string = "polkadot-extension"
 ) => {
-    const extensionDapp = await import('@polkadot/extension-dapp');
+  const extensionDapp = await import("@polkadot/extension-dapp");
   const { web3Accounts, web3Enable } = extensionDapp;
   try {
     const enabledApps = await web3Enable(extensionName);
+    console.log("enabled Apps", enabledApps);
     const w3Enabled = enabledApps.length > 0;
     let accounts = null;
 
     if (w3Enabled) {
       accounts = await web3Accounts();
+      console.log("accounts", accounts);
       return { accounts, error: null };
     }
 
     return {
       accounts: null,
-            error: new Error('please allow your extension to access this dApp and refresh the page or install a substrate wallet')
-        }
+      error: new Error(
+        "please allow your extension to access this dApp and refresh the page or install a substrate wallet"
+      ),
+    };
   } catch (error: any) {
     return { accounts: null, error };
   }
 };
 
 export interface UsePolkadotExtensionReturnType {
-    isReady: boolean
-    accounts: InjectedAccountWithMeta[] | null
-    error: Error | null
-    injector: InjectedExtension | null
-    actingAccount: InjectedAccountWithMeta | null
-    setActingAccountIdx: (idx: number) => void
+  isReady: boolean;
+  accounts: InjectedAccountWithMeta[] | null;
+  error: Error | null;
+  injector: InjectedExtension | null;
+  actingAccount: InjectedAccountWithMeta | null;
+  setActingAccountIdx: (idx: number) => void;
 }
 
 export const usePolkadotExtension = (): UsePolkadotExtensionReturnType => {
-    const isMounted = useIsMounted()
-    const [isReady, setIsReady] = useState(false)
-    const [accounts, setAccounts] = useState<InjectedAccountWithMeta[] | null>(null)
-    const [actingAccountIdx, setActingAccountIdx] = useState<number>(0)
-    const [error, setError] = useState<Error | null>(null)
-    const [injector, setInjector] = useState<InjectedExtension | null>(null)
-    const [extensions, setExtensions] = useState<InjectedExtension[] | null>(null)
-
-    const actingAccount = accounts && accounts[actingAccountIdx]
+  const isMounted = useIsMounted();
+  const [isReady, setIsReady] = useState(false);
+  const [accounts, setAccounts] = useState<InjectedAccountWithMeta[] | null>(
+    null
+  );
+  const [extensions, setExtensions] = useState<InjectedExtension[] | null>(
+    null
+  );
+  const [actingAccountIdx, setActingAccountIdx] = useState<number>(0);
+  const [error, setError] = useState<Error | null>(null);
+  const [injector, setInjector] = useState<InjectedExtension | null>(null);
+
+  const actingAccount = accounts && accounts[actingAccountIdx];
 
   useEffect(() => {
     const setup = async () => {
@@ -57,25 +82,29 @@ export const checkEnabled: (extensionName: string) => Promise<checkEnabledReturn
       const { web3AccountsSubscribe, web3Enable, web3Accounts } = extensionDapp;
       // const enabledApps = await web3Enable("polkadot-extension");
 
-        const injectedPromise = await web3Enable("polkadot-extension");
-        const _extensions = await injectedPromise;
+      const injectedPromise = documentReadyPromise(() =>
+        web3Enable("polkadot-extension")
+      );
+      // const injectedPromise = await web3Enable("polkadot-extension");
+      const extensions = await injectedPromise;
 
-        setExtensions(_extensions);
+      setExtensions(extensions);
 
-        if (_extensions.length === 0) {
+      if (extensions.length === 0) {
         console.log("no extension");
         return;
       }
 
+      // const accounts = await web3Accounts();
+
       if (accounts) {
         setIsReady(true);
       } else {
         let unsubscribe: () => void;
 
-          // we subscribe to any account change and log the new list.
+        // we subscribe to any account change
         // note that `web3AccountsSubscribe` returns the function to unsubscribe
         unsubscribe = await web3AccountsSubscribe((injectedAccounts) => {
-            console.log( 'receivedAccounts', injectedAccounts )
           setAccounts(injectedAccounts);
         });
 
@@ -86,43 +115,34 @@ export const checkEnabled: (extensionName: string) => Promise<checkEnabledReturn
     if (!isReady) {
       setup();
     }
-    }, []);
-  
-    // useEffect(() => {
-    //     const maybeEnable = async () => {
-    //         console.log( 'here at maybeEnable')
-    //         if (isMounted) {
-    //             const enablePromise = checkEnabled('polkadot-extension')                
-    //             const enableResult = await enablePromise
-    //             const { accounts, error } = enableResult
-
-    //             setError(error)
-    //             setAccounts(accounts)
-    //         }
-    //     }
-
-    //     maybeEnable()
-    // }, []);
+  }, [extensions, isReady]);
 
   useEffect(() => {
-        if ( isMounted ) {
     const getInjector = async () => {
       const { web3FromSource } = await import("@polkadot/extension-dapp");
-            const actingAccount = accounts && actingAccountIdx !== undefined ? 
-                accounts[actingAccountIdx] : undefined
+      const actingAccount =
+        accounts && actingAccountIdx !== undefined
+          ? accounts[actingAccountIdx]
+          : undefined;
       if (actingAccount?.meta.source) {
         try {
           const injector = await web3FromSource(actingAccount?.meta.source);
-                    setInjector( injector )
+          setInjector(injector);
         } catch (e: any) {
-                    setError( e )
-                }
+          setError(e);
         }
       }
+    };
 
-          getInjector()
-        }
-      }, [actingAccountIdx, accounts] )
+    getInjector();
+  }, [actingAccountIdx, accounts]);
 
-    return { accounts, actingAccount, setActingAccountIdx, isReady, error, injector };
-}
+  return {
+    accounts,
\ No newline at end of file
+    actingAccount,
+    setActingAccountIdx,
+    isReady,
+    error,
+    injector,
+  };
+};

hooks/utils.ts

+export function documentReadyPromise<T>(creator: () => Promise<T>): Promise<T> {
+    return new Promise((resolve): void => {
+      if (document.readyState === "complete") {
+        resolve(creator());
+      } else {
+        window.addEventListener("load", () => resolve(creator()));
+      }
+    });
+  }
+  
\ No newline at end of file