@dynamic-labs/sdk-react-core 0.18.0-RC.15 → 0.18.0-RC.17

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.cjs

@@ -8,14 +8,14 @@ var isWalletLinked = require('../../../functions/isWalletLinked/isWalletLinked.c
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 
-const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, connectWalletByAddressAndChain, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, authMode, }) => {
+const useSyncPrimaryWallet = ({ connectWallet, computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, authMode, }) => {
     const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const handlePrimaryWalletNotActive = React.useCallback((connectedAddress) => {
         if (!primaryWallet)
             return;
         if (authMode === 'connect-only') {
-            connectWalletByAddressAndChain(primaryWallet.connector.name, connectedAddress, primaryWallet.chain);
+            connectWallet(primaryWallet.connector);
             return;
         }
         const connectedWalletIsLinked = isWalletLinked.isWalletLinked(connectedAddress, [
@@ -56,10 +56,10 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, connectWalletBy
         secondaryWallets,
         showWidgetStatePopup,
         setMultiWalletWidgetState,
-        connectWalletByAddressAndChain,
         setPrimaryWallet,
         computeConnectedStateForWallets,
         setShowWidgetStatePopup,
+        connectWallet,
     ]);
     React.useEffect(() => {
         if (!canSync)

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.d.ts

@@ -1,11 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Chain } from '@dynamic-labs/wallet-connector-core';
+import { FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { AuthModeType, MultiWalletWidgetState, Wallet } from '../../../../shared/types';
 import { MultiWalletWidgetStateSetter } from '../useMultiWalletWidgetState';
 export type UseSyncPrimaryWalletArgs = {
     canSync?: boolean;
+    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string>;
     computeConnectedStateForWallets: () => Promise<void>;
-    connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
     handleLogOut: () => Promise<void>;
     multiWalletWidgetState: MultiWalletWidgetState;
     primaryWallet: Wallet | null;
@@ -16,4 +16,4 @@ export type UseSyncPrimaryWalletArgs = {
     showWidgetStatePopup: boolean;
     authMode: AuthModeType;
 };
-export declare const useSyncPrimaryWallet: ({ computeConnectedStateForWallets, connectWalletByAddressAndChain, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync, authMode, }: UseSyncPrimaryWalletArgs) => void;
+export declare const useSyncPrimaryWallet: ({ connectWallet, computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync, authMode, }: UseSyncPrimaryWalletArgs) => void;

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js

@@ -4,14 +4,14 @@ import { isWalletLinked } from '../../../functions/isWalletLinked/isWalletLinked
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 
-const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, connectWalletByAddressAndChain, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, authMode, }) => {
+const useSyncPrimaryWallet = ({ connectWallet, computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, authMode, }) => {
     const { setShowAuthFlow } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const handlePrimaryWalletNotActive = useCallback((connectedAddress) => {
         if (!primaryWallet)
             return;
         if (authMode === 'connect-only') {
-            connectWalletByAddressAndChain(primaryWallet.connector.name, connectedAddress, primaryWallet.chain);
+            connectWallet(primaryWallet.connector);
             return;
         }
         const connectedWalletIsLinked = isWalletLinked(connectedAddress, [
@@ -52,10 +52,10 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, connectWalletBy
         secondaryWallets,
         showWidgetStatePopup,
         setMultiWalletWidgetState,
-        connectWalletByAddressAndChain,
         setPrimaryWallet,
         computeConnectedStateForWallets,
         setShowWidgetStatePopup,
+        connectWallet,
     ]);
     useEffect(() => {
         if (!canSync)

package/src/lib/utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.cjs

@@ -25,24 +25,22 @@ require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 
 const useVerifyOnAwaitingSignature = () => {
-    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, isVerifying, setIsVerifying, selectedWalletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, ongoingVerifications, selectedWalletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
     const triggerConnectAndSign = useConnectAndSign.useConnectAndSign();
     React.useEffect(() => {
-        if (!isVerifying &&
+        if (!ongoingVerifications.connectAndSignVerification &&
             multiWalletWidgetState === 'awaiting_signature' &&
             selectedWalletConnector &&
             awaitingSignatureState === 'linking_new_wallet' &&
             !requiresTwoStepAuthentication.requiresTwoStepAuthentication(selectedWalletConnector)) {
-            setIsVerifying(true);
+            ongoingVerifications.setConnectAndSignVerification(true);
             triggerConnectAndSign({ walletConnector: selectedWalletConnector })
-                .then(() => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
-            })
                 .catch((e) => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
                 logger.logger.error(e);
+            })
+                .finally(() => {
+                setMultiWalletWidgetState('idle');
+                ongoingVerifications.setConnectAndSignVerification(false);
             });
         }
     }, [
@@ -50,8 +48,7 @@ const useVerifyOnAwaitingSignature = () => {
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         multiWalletWidgetState,
         setMultiWalletWidgetState,
-        isVerifying,
-        setIsVerifying,
+        ongoingVerifications,
     ]);
 };
 

package/src/lib/utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.js

@@ -21,24 +21,22 @@ import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 
 const useVerifyOnAwaitingSignature = () => {
-    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, isVerifying, setIsVerifying, selectedWalletConnector, } = useInternalDynamicContext();
+    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, ongoingVerifications, selectedWalletConnector, } = useInternalDynamicContext();
     const triggerConnectAndSign = useConnectAndSign();
     useEffect(() => {
-        if (!isVerifying &&
+        if (!ongoingVerifications.connectAndSignVerification &&
             multiWalletWidgetState === 'awaiting_signature' &&
             selectedWalletConnector &&
             awaitingSignatureState === 'linking_new_wallet' &&
             !requiresTwoStepAuthentication(selectedWalletConnector)) {
-            setIsVerifying(true);
+            ongoingVerifications.setConnectAndSignVerification(true);
             triggerConnectAndSign({ walletConnector: selectedWalletConnector })
-                .then(() => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
-            })
                 .catch((e) => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
                 logger.error(e);
+            })
+                .finally(() => {
+                setMultiWalletWidgetState('idle');
+                ongoingVerifications.setConnectAndSignVerification(false);
             });
         }
     }, [
@@ -46,8 +44,7 @@ const useVerifyOnAwaitingSignature = () => {
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         multiWalletWidgetState,
         setMultiWalletWidgetState,
-        isVerifying,
-        setIsVerifying,
+        ongoingVerifications,
     ]);
 };
 

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.cjs

@@ -25,10 +25,52 @@ var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyRe
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onUnlink, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
+    const [connectedWallets, setConnectedWallets] = React.useState([]);
+    // The function to update and define the connectedWallets list.
+    // It uses walletConnector to get the current wallet address and network
+    // The address and network in the runtime are updated by the event listeners
+    // The event listeners are updating `connectedWallets` list.
+    // It should be called on the first render and when connectedWalletsInfo updates
+    const updateConnectedWalletsList = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const walletConnectors = wallets.map((wallet) => wallet.walletConnector);
+        if (!walletConnectors.length) {
+            return;
+        }
+        const nextConnectedWallets = (yield Promise.all(connectedWalletsInfo.map((storedConnectedWalletInfo) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            const walletConnector = walletConnectorCore.getWalletConnectorByName(walletConnectors, storedConnectedWalletInfo.walletConnectorKey);
+            if (!walletConnector) {
+                walletConnectorCore.logger.error('Could not find walletConnector: ' +
+                    storedConnectedWalletInfo.walletConnectorKey);
+                return Promise.resolve(null);
+            }
+            const [walletAddress] = yield walletConnector.getConnectedAccounts();
+            const walletNetwork = yield walletConnector.getNetwork();
+            const walletChain = walletConnector.connectedChain;
+            const walletObject = {
+                address: 
+                // We use `storedConnectedWalletInfo.lastWalletAddress` as a workaround to Braavos issue
+                // Braavos during initialization returns an empty string as a wallet address
+                walletAddress ||
+                    storedConnectedWalletInfo.lastWalletAddress ||
+                    '',
+                chain: walletChain || '',
+                connected: true,
+                connector: walletConnector,
+                id: storedConnectedWalletInfo.id,
+                network: walletNetwork,
+            };
+            return Promise.resolve(walletObject);
+        })))).filter((wallet) => Boolean(wallet));
+        setConnectedWallets(nextConnectedWallets);
+    }), [connectedWalletsInfo, wallets]);
+    // Generate the connectedWallets list when connectedWalletsInfo (localStorage) or memoized wallet connector updates
+    React.useEffect(() => {
+        updateConnectedWalletsList();
+    }, [updateConnectedWalletsList]);
     const getNextIdAvailable = React.useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
         const sortedIds = existingIds
-            .map((id) => Number(id.replace('connect-only-wallet-', '')))
+            .map((id) => Number(id.replace('connect-wallet-', '')))
             .sort((a, b) => a - b);
         for (let i = 0; i < sortedIds.length; i++) {
             if (sortedIds[i] !== i) {
@@ -37,82 +79,44 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         }
         return sortedIds.length;
     }, []);
-    const connectedWallets = React.useMemo(() => connectedWalletsInfo
-        .map((connectedWallet) => {
-        const walletConnector = walletConnectorCore.getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), connectedWallet.name);
-        if (!walletConnector) {
-            return null;
+    const updateConnectedWalletById = React.useCallback((walletId, walletObject) => {
+        const clonedConnectedWalletsList = [...connectedWallets];
+        const connectedWalletIndex = clonedConnectedWalletsList.findIndex((connectedWallet) => connectedWallet.id === walletId);
+        if (connectedWalletIndex > -1) {
+            clonedConnectedWalletsList[connectedWalletIndex] = Object.assign(Object.assign({}, clonedConnectedWalletsList[connectedWalletIndex]), walletObject);
+            setConnectedWallets(clonedConnectedWalletsList);
         }
-        const connectedWalletInfo = {
-            address: connectedWallet.walletPublicKey,
-            chain: connectedWallet.chain,
-            connected: true,
-            connector: walletConnector,
-            id: connectedWallet.id,
-            network: connectedWallet.network,
-        };
-        return connectedWalletInfo;
-    })
-        .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
-    const updateConnectedWalletById = React.useCallback((walletId, connectedWalletConnectorObject) => {
-        setConnectedWalletsInfo((currentWallets) => currentWallets.map((currentWallet) => {
-            if (currentWallet.id === walletId) {
-                return Object.assign(Object.assign({}, currentWallet), connectedWalletConnectorObject);
-            }
-            return currentWallet;
-        }));
-    }, [setConnectedWalletsInfo]);
+    }, [connectedWallets]);
     const connectedWallet = connectedWallets[0] || null;
-    const setConnectedStates = React.useCallback((walletConnector, address, chain, walletConnectorNetwork) => {
-        setConnectedWalletsInfo((currentWallets) => {
-            const existingWalletIndex = currentWallets.findIndex((currentWallet) => currentWallet.name === walletConnector.name);
-            const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
-            // this is done, to make sure we're not adding two wallets with the same address to the array
-            if (exists) {
-                return currentWallets;
-            }
-            // when calling this function with a new wallet that has the same wallet connector as
-            // an existing one in the array, we intend to replace the existing wallet with the new one.
-            if (existingWalletIndex !== -1) {
-                const updatedWallets = [...currentWallets];
-                updatedWallets[existingWalletIndex] = Object.assign(Object.assign({}, updatedWallets[existingWalletIndex]), { chain, provider: getWalletProvider.getWalletProvider(walletConnector), walletPublicKey: address });
-                return updatedWallets;
-            }
-            // otherwise, add new wallet to connectedWalletsInfo array
-            return [
-                ...currentWallets,
-                {
-                    chain,
-                    id: `connect-only-wallet-${getNextIdAvailable(currentWallets)}`,
-                    name: walletConnector.name,
-                    network: walletConnectorNetwork,
-                    provider: getWalletProvider.getWalletProvider(walletConnector),
-                    walletPublicKey: address,
-                },
-            ];
+    // Keeps connected wallet data inside localStorage
+    const applyConnectedWalletToStore = ({ walletId, walletAddress, walletConnectorKey, walletChain, provider, }) => {
+        const nextConnectedWalletsInfo = [...connectedWalletsInfo];
+        nextConnectedWalletsInfo.push({
+            id: walletId,
+            lastWalletAddress: walletAddress,
+            provider,
+            walletChain,
+            walletConnectorKey,
         });
-    }, [getNextIdAvailable, setConnectedWalletsInfo]);
-    const connectWalletByAddressAndChain = React.useCallback((name, address, chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const walletConnector = walletConnectorCore.getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
-        if (walletConnector) {
-            if (shouldManuallyReconnectOnRefresh.shouldManuallyReconnectOnRefresh(walletConnector)) {
-                yield walletConnector.connect();
-            }
-            const connectedAccounts = yield walletConnector.getConnectedAccounts();
-            const result = connectedAccounts.filter((account) => walletConnectorCore.isSameAddress(account, address, chain));
-            const walletNetwork = yield walletConnector.getNetwork();
-            if (result.length > 0) {
-                walletConnector.connect();
-                setConnectedStates(walletConnector, address, chain, walletNetwork);
-            }
-            else {
-                removeConnectedWalletsInfo();
-            }
+        setConnectedWalletsInfo(nextConnectedWalletsInfo);
+        return Promise.resolve();
+    };
+    // Updates connected wallet (network and address) and verifies connected wallet connection
+    const refreshConnectedWallet = (walletId, walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (shouldManuallyReconnectOnRefresh.shouldManuallyReconnectOnRefresh(walletConnector)) {
+            yield walletConnector.connect();
         }
-        else {
-            removeConnectedWalletsInfo();
+        const currentWalletConnectorAddress = yield walletConnector.fetchPublicAddress();
+        if (!currentWalletConnectorAddress) {
+            walletConnectorCore.logger.error('Could not refresh the wallet. The wallet address is not available');
+            return;
         }
-    }), [removeConnectedWalletsInfo, setConnectedStates, wallets]);
+        const currentWalletConnectoNetwork = yield walletConnector.getNetwork();
+        updateConnectedWalletById(walletId, {
+            address: currentWalletConnectorAddress,
+            network: currentWalletConnectoNetwork,
+        });
+    });
     const shouldSkipCreatingVisit = React.useMemo(() => (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) ||
         connectedWallet, [authMode, connectedWallet, enableVisitTrackingOnConnectOnly]);
     const connectWallet = (walletConnector, fetchPublicAddressOpts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -122,29 +126,39 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             error.code = 'missing-public-address';
             throw error;
         }
-        const chain = walletConnector.connectedChain || '';
-        const walletConnectorNetwork = yield walletConnector.getNetwork();
-        // when we connect first wallet, it should be set as a primary wallet
-        const shouldSetPrimaryWalletId = authMode === 'connect-only' && !primaryWalletId;
-        if (shouldSetPrimaryWalletId) {
-            setPrimaryWalletId(`connect-only-wallet-${getNextIdAvailable(connectedWalletsInfo)}`);
+        const walletId = `connect-wallet-${getNextIdAvailable(connectedWalletsInfo)}`;
+        if (!primaryWalletId) {
+            setPrimaryWalletId(walletId);
+        }
+        const walletChain = walletConnector.connectedChain;
+        const isWalletStored = connectedWalletsInfo.some(({ walletConnectorKey: storedWalletConnectorKey }) => storedWalletConnectorKey === walletConnector.name);
+        if (isWalletStored) {
+            yield updateConnectedWalletsList();
+        }
+        else {
+            applyConnectedWalletToStore({
+                provider: getWalletProvider.getWalletProvider(walletConnector),
+                walletAddress: publicWalletAddress,
+                walletChain,
+                walletConnectorKey: walletConnector.name,
+                walletId,
+            });
         }
-        setConnectedStates(walletConnector, publicWalletAddress, chain, walletConnectorNetwork);
         if (shouldSkipCreatingVisit) {
-            return publicWalletAddress;
+            return Promise.resolve(publicWalletAddress);
         }
         // send information to backend to kick off background jobs
         // so verify/sign on the next step could go by more quickly
         // this is async work, but DO NOT AWAIT
         api.createVisit({
             authMode,
-            chain,
+            chain: walletChain || '',
             environmentId,
             publicWalletAddress,
             walletName: walletConnector.name,
             walletProvider: getWalletProvider.getWalletProvider(walletConnector),
         });
-        return publicWalletAddress;
+        return Promise.resolve(publicWalletAddress);
     });
     const unlinkConnectedWallet = (walletId) => {
         const filteredWallets = connectedWalletsInfo.filter((wallet) => wallet.id !== walletId);
@@ -157,14 +171,13 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
     const getConnectedWalletById = React.useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
         connectWallet,
-        connectWalletByAddressAndChain,
         connectedWallet,
         connectedWallets,
         connectedWalletsInfo,
         getConnectedWalletById,
+        refreshConnectedWallet,
         removeConnectedWalletsInfo,
         unlinkConnectedWallet,
-        updateConnectedWalletById,
     };
 };
 

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.d.ts

@@ -1,12 +1,11 @@
 import { Chain, FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { AuthModeType, Wallet, WalletOption } from '../../../shared';
 export type ConnectedWalletConnectorType = {
-    chain: Chain | undefined;
-    name: string;
-    provider: string;
-    walletPublicKey: string;
     id: string;
-    network?: string | number;
+    walletChain?: Chain;
+    walletConnectorKey: string;
+    provider: string;
+    lastWalletAddress?: string;
 };
 type Props = {
     authMode: AuthModeType;
@@ -20,13 +19,12 @@ type Props = {
 };
 export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onUnlink, }: Props) => {
     connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string>;
-    connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
     connectedWallet: Wallet;
     connectedWallets: Wallet[];
     connectedWalletsInfo: ConnectedWalletConnectorType[] | [];
     getConnectedWalletById: (walletId: string) => Wallet | undefined;
+    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector) => Promise<void>;
     removeConnectedWalletsInfo: () => void;
     unlinkConnectedWallet: (walletId: string) => void;
-    updateConnectedWalletById: (walletId: string, connectedWalletConnectorObject: Partial<ConnectedWalletConnectorType>) => void;
 };
 export {};