From cd9fdb30f98314c560be73dc2cbdae7ead1c3791 Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Mon, 14 Oct 2024 18:47:40 +0200 Subject: [PATCH 01/13] Don't remove wallet account if `storageAddress` is undefined This is to fix a bug where the wallet account is sometimes deleted when switching between tenants --- src/GlobalStateProvider/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index 1f0e648b..1f3b6800 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -76,7 +76,6 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { useEffect(() => { const run = async () => { if (!storageAddress) { - removeWalletAccount(); return; } // skip if tenant already initialized From 68fe5f72c857922629e50c272c69081b0de7ca8f Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 11:58:48 +0200 Subject: [PATCH 02/13] Change storage key for account so that it's not cached per tenant --- src/GlobalStateProvider/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index 1f3b6800..c7687b3a 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -49,7 +49,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { set, clear, } = useLocalStorage({ - key: `${storageKeys.ACCOUNT}-${tenantName}`, + key: `${storageKeys.ACCOUNT}`, expire: EXPIRATION_PERIOD, }); @@ -79,9 +79,11 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { return; } // skip if tenant already initialized + console.log('skipping if tenant already initialized', tenantRef.current === tenantName || accountAddress); if (tenantRef.current === tenantName || accountAddress) return; tenantRef.current = tenantName; const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); + console.log('In useEffect, selecting wallet: ', selectedWallet); if (selectedWallet) setWallet(selectedWallet); }; run(); From 7dea277314cc0034e2e70487812189262b177abc Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 12:27:13 +0200 Subject: [PATCH 03/13] Add log statements --- src/GlobalStateProvider/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index c7687b3a..6b411395 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -50,14 +50,17 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { clear, } = useLocalStorage({ key: `${storageKeys.ACCOUNT}`, - expire: EXPIRATION_PERIOD, + expire: undefined, }); + console.log('storageAddress', storageAddress); + const clearLocalStorageWallets = () => { storageService.remove(LocalStorageKeys.SELECTED_WALLET_NAME); }; const removeWalletAccount = useCallback(async () => { + console.log('Removing wallet account', walletAccount); await handleWalletConnectDisconnect(walletAccount); clear(); clearLocalStorageWallets(); @@ -87,7 +90,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { if (selectedWallet) setWallet(selectedWallet); }; run(); - }, [storageAddress, removeWalletAccount, dAppName, tenantName, accountAddress]); + }, [storageAddress, dAppName, tenantName, accountAddress]); const providerValue = useMemo( () => ({ From ff2cb0ed30ffc08f2311ebde692de7edada2ce7f Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 13:13:16 +0200 Subject: [PATCH 04/13] Add more log statements --- src/GlobalStateProvider/index.tsx | 1 + src/components/Wallet/index.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index 6b411395..a6f34b8a 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -54,6 +54,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { }); console.log('storageAddress', storageAddress); + console.log('walletAccount', walletAccount); const clearLocalStorageWallets = () => { storageService.remove(LocalStorageKeys.SELECTED_WALLET_NAME); diff --git a/src/components/Wallet/index.tsx b/src/components/Wallet/index.tsx index 2c5b07b5..e55e0219 100644 --- a/src/components/Wallet/index.tsx +++ b/src/components/Wallet/index.tsx @@ -6,6 +6,8 @@ const OpenWallet = (props: ConnectProps): JSX.Element => { const { walletAccount } = useGlobalState(); const { address } = walletAccount || {}; + console.log('walletAccount in openwallet', walletAccount, 'address', address); + return address ? : ; }; From 0727bfd42e796804b84f84e1ffb9fd7d556c4a7c Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 13:21:39 +0200 Subject: [PATCH 05/13] Fix condition for initializing wallet --- src/GlobalStateProvider/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index a6f34b8a..aa612162 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -84,7 +84,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { } // skip if tenant already initialized console.log('skipping if tenant already initialized', tenantRef.current === tenantName || accountAddress); - if (tenantRef.current === tenantName || accountAddress) return; + if (tenantRef.current === tenantName || (accountAddress && storageAddress !== accountAddress)) return; tenantRef.current = tenantName; const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); console.log('In useEffect, selecting wallet: ', selectedWallet); From e3cccfc7d9794ee056fcca3a763a11b531373203 Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 13:24:05 +0200 Subject: [PATCH 06/13] Flip condition for initializing wallet --- src/GlobalStateProvider/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index aa612162..e3c6ad83 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -84,7 +84,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { } // skip if tenant already initialized console.log('skipping if tenant already initialized', tenantRef.current === tenantName || accountAddress); - if (tenantRef.current === tenantName || (accountAddress && storageAddress !== accountAddress)) return; + if (tenantRef.current === tenantName || (accountAddress && storageAddress === accountAddress)) return; tenantRef.current = tenantName; const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); console.log('In useEffect, selecting wallet: ', selectedWallet); From 85066f9c0fe2e48189acab8a2c05a483e3a06820 Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 13:51:28 +0200 Subject: [PATCH 07/13] Remove condition for account check --- src/GlobalStateProvider/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index e3c6ad83..dfb0ed5d 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -76,22 +76,20 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { [set], ); - const accountAddress = walletAccount?.address; useEffect(() => { const run = async () => { if (!storageAddress) { return; } // skip if tenant already initialized - console.log('skipping if tenant already initialized', tenantRef.current === tenantName || accountAddress); - if (tenantRef.current === tenantName || (accountAddress && storageAddress === accountAddress)) return; + if (tenantRef.current === tenantName) return; tenantRef.current = tenantName; const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); console.log('In useEffect, selecting wallet: ', selectedWallet); if (selectedWallet) setWallet(selectedWallet); }; run(); - }, [storageAddress, dAppName, tenantName, accountAddress]); + }, [storageAddress, dAppName, tenantName]); const providerValue = useMemo( () => ({ From 3bbc290226d679cc7273161370141e88c5a55fd6 Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 13:56:54 +0200 Subject: [PATCH 08/13] Add log statement --- src/GlobalStateProvider/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index dfb0ed5d..1e203e16 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -82,6 +82,14 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { return; } // skip if tenant already initialized + console.log( + 'tenantRef.current', + tenantRef.current, + 'tenantName', + tenantName, + 'returning early', + tenantRef.current === tenantName, + ); if (tenantRef.current === tenantName) return; tenantRef.current = tenantName; const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); From 95db9e443662091157e2d4dbbc7dd18b041729bd Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 14:01:50 +0200 Subject: [PATCH 09/13] Add another log statement --- src/GlobalStateProvider/helpers.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/GlobalStateProvider/helpers.ts b/src/GlobalStateProvider/helpers.ts index 59b118f1..0cfe5cd8 100644 --- a/src/GlobalStateProvider/helpers.ts +++ b/src/GlobalStateProvider/helpers.ts @@ -34,11 +34,15 @@ const initMetamask = async (tenantName: TenantName) => { export const initSelectedWallet = async (dAppName: TenantName, tenantName: TenantName, storageAddress: string) => { const appName = dAppName || TenantName.Amplitude; - return ( - (await initTalisman(appName, storageAddress)) || - (await initWalletConnect(chainIds[tenantName])) || - (await initMetamask(tenantName)) - ); + console.log('in initSelectedWallet', appName, tenantName, storageAddress); + + const talismanWallet = await initTalisman(appName, storageAddress); + console.log('talismanWallet', talismanWallet); + const walletConnectWallet = await initWalletConnect(chainIds[tenantName]); + console.log('walletConnectWallet', walletConnectWallet); + const metamaskWallet = await initMetamask(tenantName); + console.log('metamaskWallet', metamaskWallet); + return talismanWallet || walletConnectWallet || metamaskWallet; }; export const handleWalletConnectDisconnect = async (walletAccount: WalletAccount | undefined) => { From 2cd9e3a6967696cdf01e11dd255047e407a98886 Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 14:06:39 +0200 Subject: [PATCH 10/13] Add logs for talisman --- src/GlobalStateProvider/helpers.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/GlobalStateProvider/helpers.ts b/src/GlobalStateProvider/helpers.ts index 0cfe5cd8..d5c825b8 100644 --- a/src/GlobalStateProvider/helpers.ts +++ b/src/GlobalStateProvider/helpers.ts @@ -9,12 +9,18 @@ import { LocalStorageKeys } from '../hooks/useLocalStorage'; const initTalisman = async (dAppName: string, selected?: string) => { const name = storageService.get(LocalStorageKeys.SELECTED_WALLET_NAME); + console.log('name', name); if (!name?.length) return; const wallet = getWalletBySource(name); + console.log('wallet', wallet); if (!wallet) return; + console.log('before wallet enable'); await wallet.enable(dAppName); + console.log('after wallet enable'); const accounts = await wallet.getAccounts(); + console.log('accounts', accounts); const selectedWallet = accounts.find((a) => a.address === selected) || accounts[0]; + console.log('selectedWallet', selectedWallet, accounts, selected); return selectedWallet; }; From 3ecabb96b410354bada371e579aea0b268e0156f Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 14:21:03 +0200 Subject: [PATCH 11/13] Add delay for initializing wallets --- src/GlobalStateProvider/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index 1e203e16..b096b59d 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -92,9 +92,12 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { ); if (tenantRef.current === tenantName) return; tenantRef.current = tenantName; - const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); - console.log('In useEffect, selecting wallet: ', selectedWallet); - if (selectedWallet) setWallet(selectedWallet); + // Delay this to allow the wallet extension to be injected + setTimeout(async () => { + const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); + console.log('In useEffect, selecting wallet: ', selectedWallet); + if (selectedWallet) setWallet(selectedWallet); + }, 400); }; run(); }, [storageAddress, dAppName, tenantName]); From 29eea94c41811ae1f0fa0aa76bdbd3cc4c15cc95 Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 25 Oct 2024 14:28:55 +0200 Subject: [PATCH 12/13] Revert unnecessary changes --- src/GlobalStateProvider/helpers.ts | 23 ++++++----------------- src/GlobalStateProvider/index.tsx | 14 +------------- src/components/Wallet/index.tsx | 2 -- 3 files changed, 7 insertions(+), 32 deletions(-) diff --git a/src/GlobalStateProvider/helpers.ts b/src/GlobalStateProvider/helpers.ts index d5c825b8..7b262062 100644 --- a/src/GlobalStateProvider/helpers.ts +++ b/src/GlobalStateProvider/helpers.ts @@ -9,19 +9,12 @@ import { LocalStorageKeys } from '../hooks/useLocalStorage'; const initTalisman = async (dAppName: string, selected?: string) => { const name = storageService.get(LocalStorageKeys.SELECTED_WALLET_NAME); - console.log('name', name); if (!name?.length) return; const wallet = getWalletBySource(name); - console.log('wallet', wallet); if (!wallet) return; - console.log('before wallet enable'); await wallet.enable(dAppName); - console.log('after wallet enable'); const accounts = await wallet.getAccounts(); - console.log('accounts', accounts); - const selectedWallet = accounts.find((a) => a.address === selected) || accounts[0]; - console.log('selectedWallet', selectedWallet, accounts, selected); - return selectedWallet; + return accounts.find((a) => a.address === selected) || accounts[0]; }; const initWalletConnect = async (chainId: string) => { @@ -40,15 +33,11 @@ const initMetamask = async (tenantName: TenantName) => { export const initSelectedWallet = async (dAppName: TenantName, tenantName: TenantName, storageAddress: string) => { const appName = dAppName || TenantName.Amplitude; - console.log('in initSelectedWallet', appName, tenantName, storageAddress); - - const talismanWallet = await initTalisman(appName, storageAddress); - console.log('talismanWallet', talismanWallet); - const walletConnectWallet = await initWalletConnect(chainIds[tenantName]); - console.log('walletConnectWallet', walletConnectWallet); - const metamaskWallet = await initMetamask(tenantName); - console.log('metamaskWallet', metamaskWallet); - return talismanWallet || walletConnectWallet || metamaskWallet; + return ( + (await initTalisman(appName, storageAddress)) || + (await initWalletConnect(chainIds[tenantName])) || + (await initMetamask(tenantName)) + ); }; export const handleWalletConnectDisconnect = async (walletAccount: WalletAccount | undefined) => { diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index b096b59d..a87289fd 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -53,9 +53,6 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { expire: undefined, }); - console.log('storageAddress', storageAddress); - console.log('walletAccount', walletAccount); - const clearLocalStorageWallets = () => { storageService.remove(LocalStorageKeys.SELECTED_WALLET_NAME); }; @@ -82,20 +79,11 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { return; } // skip if tenant already initialized - console.log( - 'tenantRef.current', - tenantRef.current, - 'tenantName', - tenantName, - 'returning early', - tenantRef.current === tenantName, - ); if (tenantRef.current === tenantName) return; tenantRef.current = tenantName; - // Delay this to allow the wallet extension to be injected + // Delay this to allow the wallet extension to be injected, otherwise the call to wallet.enable() might fail setTimeout(async () => { const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); - console.log('In useEffect, selecting wallet: ', selectedWallet); if (selectedWallet) setWallet(selectedWallet); }, 400); }; diff --git a/src/components/Wallet/index.tsx b/src/components/Wallet/index.tsx index e55e0219..2c5b07b5 100644 --- a/src/components/Wallet/index.tsx +++ b/src/components/Wallet/index.tsx @@ -6,8 +6,6 @@ const OpenWallet = (props: ConnectProps): JSX.Element => { const { walletAccount } = useGlobalState(); const { address } = walletAccount || {}; - console.log('walletAccount in openwallet', walletAccount, 'address', address); - return address ? : ; }; From 86903eea8d3b18757eb6a359f0f4c464c5914425 Mon Sep 17 00:00:00 2001 From: Marcel Ebert Date: Fri, 1 Nov 2024 17:47:59 +0100 Subject: [PATCH 13/13] Address comments --- src/GlobalStateProvider/index.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index 1a3373ff..d7b0d735 100644 --- a/src/GlobalStateProvider/index.tsx +++ b/src/GlobalStateProvider/index.tsx @@ -9,9 +9,6 @@ import { ThemeName } from '../models/Theme'; import { storageService } from '../services/storage/local'; import { handleWalletConnectDisconnect, initSelectedWallet } from './helpers'; -const SECONDS_IN_A_DAY = 86400; -const EXPIRATION_PERIOD = 2 * SECONDS_IN_A_DAY; // 2 days - export interface GlobalState { dAppName: string; tenantName: TenantName; @@ -49,7 +46,6 @@ const GlobalStateProvider = ({ children }: { children: JSX.Element }) => { clear, } = useLocalStorage({ key: `${storageKeys.ACCOUNT}`, - expire: undefined, }); const clearLocalStorageWallets = () => { @@ -57,7 +53,6 @@ const GlobalStateProvider = ({ children }: { children: JSX.Element }) => { }; const removeWalletAccount = useCallback(async () => { - console.log('Removing wallet account', walletAccount); await handleWalletConnectDisconnect(walletAccount); clear(); clearLocalStorageWallets(); @@ -73,20 +68,25 @@ const GlobalStateProvider = ({ children }: { children: JSX.Element }) => { ); useEffect(() => { - const run = async () => { + const delayWalletInitialization = async (storageAddress: string) => { + // Delay the wallet initialization to allow the wallet extension to be injected, otherwise the call to wallet.enable() + // might fail see https://github.com/TalismanSociety/talisman-connect/issues/25 + setTimeout(async () => { + const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); + if (selectedWallet) setWallet(selectedWallet); + }, 400); + }; + + const initializeWallet = () => { if (!storageAddress) { return; } // skip if tenant already initialized if (tenantRef.current === tenantName) return; tenantRef.current = tenantName; - // Delay this to allow the wallet extension to be injected, otherwise the call to wallet.enable() might fail - setTimeout(async () => { - const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress); - if (selectedWallet) setWallet(selectedWallet); - }, 400); + delayWalletInitialization(storageAddress).catch(console.error); }; - run(); + initializeWallet(); }, [storageAddress, dAppName, tenantName]); const providerValue = useMemo(