fix wallet init in chrome 10

components/login.tsx

@@ -16,9 +16,9 @@ export default function LoginButton() {
   const [error, setError] = useState<string | undefined>(undefined)
   const [isLoading, setIsLoading] = useState( false )
 
-  const { isInitialized, accounts, actingAccountIdx } = useContext(PolkadotExtensionContext)
+  const { isInitialized, accounts, actingAccountIdx, injector } = useContext(PolkadotExtensionContext)
   const actingAccount = actingAccountIdx !== undefined ? accounts?.[actingAccountIdx] : undefined
-  const injector = actingAccount && actingAccount?.wallet
+  // we can use web3FromSource which will return an InjectedExtension type
 
   const handleLogin = async () => {
     try {
@@ -40,7 +40,6 @@ export default function LoginButton() {
           // we can use it to sign our message
           const data = await signRaw({
             address: actingAccount.address,
-            domain: message.domain,
             data: JSON.stringify(message),
             type: "bytes"
           });
@@ -53,7 +52,7 @@ export default function LoginButton() {
         redirect: false,
         callbackUrl: '/protected',
         message: JSON.stringify(message),
-        name: actingAccount?.name,
+        name: actingAccount?.meta?.name,
         signature,
         address: actingAccount?.address
       })
@@ -76,7 +75,7 @@ export default function LoginButton() {
   
   return (
     <>
-      { isInitialized ?
+      { accounts.length > 0 ?
       <>
         <div className={ styles.cardWrap }>
           <div className={ styles.dropDownWrap }>

context/polkadotExtensionContext.tsx

 import { ReactNode, createContext, useEffect, useState } from "react";
-import type { InjectedExtension } from "@polkadot/extension-inject/types";
+import type { InjectedExtension, InjectedAccountWithMeta, InjectedWindow } from "@polkadot/extension-inject/types";
 import { SubscriptionFn, WalletAccount, getWallets, isWalletInstalled } from "@talismn/connect-wallets";
 
 type PolkadotExtensionContextType = {
-    accounts: WalletAccount[] | undefined;
+    accounts: InjectedAccountWithMeta[];
     actingAccountIdx: number | undefined;
     setActingAccountIdx: (idx: number) => void;
     setActingAccountByAddress: (address: string) => void;
@@ -16,42 +16,89 @@ export const PolkadotExtensionContext =
 
 export const PolkadotExtensionProvider = ( { children } : { children : ReactNode }) => {
   const [isInitialized, setIsInitialized ] = useState<boolean>( false )
-  const [accounts, setAccounts] = useState<WalletAccount[] | undefined>([]);
+  const [accounts, setAccounts] = useState<InjectedAccountWithMeta[]>([]);
   const [actingAccountIdx, setActingAccountIdx] = useState<number | undefined>( undefined );
   const [isWeb3Injected, setIsWeb3Injected] = useState<boolean>(false);
   const [injector, setInjector] = useState<InjectedExtension>();
+  const [ allowExtensionConnection, setAllowExtensionConnection ] = useState<boolean>( false )
 
   const setActingAccountByAddress = (address: string) => {
     setActingAccountIdx( accounts?.findIndex( account => account.address === address ) )
   }
 
-  const initWalletExtension = async () => {      
-    if (typeof window !== "undefined" ) {
-      const installedWallets = getWallets().filter(wallet => wallet.installed)
-      console.log( 'installedWallets', installedWallets )
-      const firstWallet = installedWallets[0]
-      console.log( 'firstWallet', firstWallet )
-
-      // enable the wallet
-      if (firstWallet) {
-        try {
-          await firstWallet?.enable( "Polkadot Tokengated Demo" )
-          await firstWallet?.subscribeAccounts((allAccounts: WalletAccount[] | undefined) => {
-              console.log("got accounts via talisman connect", allAccounts)
-              if ( accounts === undefined || accounts.length === 0 ) {
-                setAccounts( allAccounts )
-                setActingAccountIdx( 0 )
-              }
-          });
-        } catch (error) {
-          console.log( error )
-        } 
-        setIsInitialized( true )
-      }
+  const initWalletExtension = async () => {     
+    const { web3AccountsSubscribe, web3Enable } = await import( "@polkadot/extension-dapp" );
+
+    if (!allowExtensionConnection) {
+      return setAccounts([])
     }
+
+    // let unsubscribePromise = Promise.resolve<SubscriptionFn>( () => {} )
+
+    if ( typeof window !== "undefined" ) {
+      const unsubscribePromise = web3Enable(process.env.REACT_APP_APPLICATION_NAME ?? 'Talisman').then(() =>
+        web3AccountsSubscribe(accounts => {
+          console.log( 'accounts', accounts)
+          setAccounts( accounts )
+          setActingAccountIdx( 0 )
+        })
+      )
+    }
+
+    // return () => {
+    //   unsubscribePromise.then(unsubscribe => unsubscribe())
+    // }
+
+    // if (typeof window !== "undefined" ) {
+    //   const installedWallets = getWallets().filter(wallet => wallet.installed)
+    //   console.log( 'installedWallets', installedWallets )
+    //   const firstWallet = installedWallets[0]
+    //   console.log( 'firstWallet', firstWallet )
+
+    //   // enable the wallet
+    //   if (firstWallet) {
+    //     try {
+    //       await firstWallet?.enable( "Polkadot Tokengated Demo" )
+    //       await firstWallet?.subscribeAccounts((allAccounts: WalletAccount[] | undefined) => {
+    //           console.log("got accounts via talisman connect", allAccounts)
+    //           if ( accounts === undefined || accounts.length === 0 ) {
+    //             setAccounts( allAccounts )
+    //             setActingAccountIdx( 0 )
+    //           }
+    //       });
+    //     } catch (error) {
+    //       console.log( error )
+    //     } 
+    //     setIsInitialized( true )
+    //   }
+    // }
   }
 
-  initWalletExtension()
+  useEffect(() => {
+    if ( typeof window !== "undefined" ) {
+      const getInjector = async() => {
+        const { web3FromSource } = await import( "@polkadot/extension-dapp" );
+        const actingAccount = actingAccountIdx !== undefined ? accounts[actingAccountIdx] : undefined
+        if ( actingAccount?.meta.source ) {
+          const injector = await web3FromSource(actingAccount?.meta.source);
+          setInjector( injector )
+        }
+      }
+
+      getInjector()
+    }
+  }, [actingAccountIdx, accounts] )
+
+  useEffect(() => {
+    initWalletExtension()
+  }, [allowExtensionConnection, setAccounts])
+
+  useEffect(() => {
+    console.log( Object.keys((globalThis as InjectedWindow).injectedWeb3 ).length > 0 )
+    if ( Object.keys((globalThis as InjectedWindow).injectedWeb3 ).length > 0 ) {
+      setAllowExtensionConnection(true)
+    }
+  },[])
 
   return (
       <PolkadotExtensionContext.Provider value={ {