@dynamic-labs/sdk-react-core 2.0.0-alpha.10 → 2.0.0-alpha.11

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

@@ -95,7 +95,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     // and need to distinguish between logic for verify or linking.
     const verifyOnly = !authToken;
     const shouldFallbackToConnectOnly = enableConnectOnlyFallback && (verifyOnly || !multiWalletEnabled);
-    const generateJWT = (walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const generateJWT = (walletConnector, walletProvider, getAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         let Jwt;
         const nonce = consumeNonce();
         if (nonce === undefined)
@@ -103,7 +103,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
         const verifyArgs = yield getVerifyArgs.getVerifyArgs({
             displaySiweStatement,
             environmentId,
-            fetchPublicAddressOpts,
+            getAddressOpts,
             messageToSignOverride,
             nonce,
             publicWalletAddress,
@@ -228,12 +228,12 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             setErrorMessage(e.code);
         }
     };
-    return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    return ({ walletConnector, getAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
         const walletProvider = getWalletProvider.getWalletProvider(walletConnector);
         try {
             setIsVerificationInProgress(true);
-            const { Jwt, verifyArgs } = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride);
+            const { Jwt, verifyArgs } = yield generateJWT(walletConnector, walletProvider, getAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride);
             const decodedJwt = decodeJwt.decodeJwt(Jwt);
             if (decodedJwt === undefined)
                 throw new utils.DynamicError('Invalid token!');

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

@@ -8,5 +8,5 @@ type UseVerifyWalletArgs = {
     displaySiweStatement: boolean;
     setIsSingleWalletAccount: Dispatch<SetStateAction<boolean>>;
 };
-export declare const useVerifyWallet: ({ consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, }: UseVerifyWalletArgs) => ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride, }: VerifyCallbackArgs) => Promise<void>;
+export declare const useVerifyWallet: ({ consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, }: UseVerifyWalletArgs) => ({ walletConnector, getAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride, }: VerifyCallbackArgs) => Promise<void>;
 export {};

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js

@@ -91,7 +91,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     // and need to distinguish between logic for verify or linking.
     const verifyOnly = !authToken;
     const shouldFallbackToConnectOnly = enableConnectOnlyFallback && (verifyOnly || !multiWalletEnabled);
-    const generateJWT = (walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride) => __awaiter(void 0, void 0, void 0, function* () {
+    const generateJWT = (walletConnector, walletProvider, getAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride) => __awaiter(void 0, void 0, void 0, function* () {
         let Jwt;
         const nonce = consumeNonce();
         if (nonce === undefined)
@@ -99,7 +99,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
         const verifyArgs = yield getVerifyArgs({
             displaySiweStatement,
             environmentId,
-            fetchPublicAddressOpts,
+            getAddressOpts,
             messageToSignOverride,
             nonce,
             publicWalletAddress,
@@ -224,12 +224,12 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             setErrorMessage(e.code);
         }
     };
-    return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride, }) => __awaiter(void 0, void 0, void 0, function* () {
+    return ({ walletConnector, getAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride, }) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         const walletProvider = getWalletProvider(walletConnector);
         try {
             setIsVerificationInProgress(true);
-            const { Jwt, verifyArgs } = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride);
+            const { Jwt, verifyArgs } = yield generateJWT(walletConnector, walletProvider, getAddressOpts, publicWalletAddress, captchaToken, oauth, signedMessageOverride, messageToSignOverride);
             const decodedJwt = decodeJwt(Jwt);
             if (decodedJwt === undefined)
                 throw new DynamicError('Invalid token!');

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

@@ -23,10 +23,13 @@ var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWall
  */
 const useWalletConnectorNetwork = (walletConnector) => {
     const [network, setNetwork] = React.useState();
-    usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
-        onResolve: (network) => setNetwork(network),
+    const { isLoading } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
+        deps: [walletConnector],
+        onResolve: (network) => {
+            setNetwork(network);
+        },
     });
-    useWalletConnectorEvent.useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => setNetwork(chain));
+    useWalletConnectorEvent.useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => setNetwork((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STARK' ? chain : parseInt(chain)));
     /**
      * Listen to disconnect event and update the network because ArgentX
      * emits a disconnect event when the user switches network.
@@ -36,7 +39,7 @@ const useWalletConnectorNetwork = (walletConnector) => {
             walletConnector.getNetwork().then(setNetwork);
         }
     });
-    return { network };
+    return { isLoading, network };
 };
 
 exports.useWalletConnectorNetwork = useWalletConnectorNetwork;

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

@@ -14,5 +14,6 @@ import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
  * return <div>Current Network: {network}</div>;
  */
 export declare const useWalletConnectorNetwork: (walletConnector: WalletConnector | null | undefined) => {
+    isLoading: boolean;
     network: string | number | undefined;
 };

package/src/lib/utils/hooks/useWalletConnectorNetwork/useWalletConnectorNetwork.js

@@ -19,10 +19,13 @@ import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWa
  */
 const useWalletConnectorNetwork = (walletConnector) => {
     const [network, setNetwork] = useState();
-    usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
-        onResolve: (network) => setNetwork(network),
+    const { isLoading } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
+        deps: [walletConnector],
+        onResolve: (network) => {
+            setNetwork(network);
+        },
     });
-    useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => setNetwork(chain));
+    useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => setNetwork((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STARK' ? chain : parseInt(chain)));
     /**
      * Listen to disconnect event and update the network because ArgentX
      * emits a disconnect event when the user switches network.
@@ -32,7 +35,7 @@ const useWalletConnectorNetwork = (walletConnector) => {
             walletConnector.getNetwork().then(setNetwork);
         }
     });
-    return { network };
+    return { isLoading, network };
 };
 
 export { useWalletConnectorNetwork };

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

@@ -139,7 +139,7 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, walletConn
             return;
         }
         /* istanbul ignore next */
-        const publicAddress = yield newPrimaryWallet.connector.fetchPublicAddress({
+        const publicAddress = yield newPrimaryWallet.connector.getAddress({
             onDesktopUri: (uri) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 setDesktopUri(uri);
             }),

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.js

@@ -135,7 +135,7 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, walletConn
             return;
         }
         /* istanbul ignore next */
-        const publicAddress = yield newPrimaryWallet.connector.fetchPublicAddress({
+        const publicAddress = yield newPrimaryWallet.connector.getAddress({
             onDesktopUri: (uri) => __awaiter(void 0, void 0, void 0, function* () {
                 setDesktopUri(uri);
             }),

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

@@ -20,26 +20,6 @@ require('../../../events/dynamicEvents.cjs');
 var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
 const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
-    const [loadingNetwork, setLoadingNetwork] = React.useState(true);
-    const [network, setNetwork] = React.useState(undefined);
-    React.useEffect(() => {
-        const fetchNetwork = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            try {
-                if (!(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector))
-                    return;
-                const network = yield primaryWallet.connector.getNetwork();
-                setNetwork(network);
-            }
-            catch (error) {
-                /* istanbul ignore next */
-                logger.logger.debug(error);
-            }
-            finally {
-                setLoadingNetwork(false);
-            }
-        });
-        fetchNetwork();
-    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
     useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
         logger.logger.debug('primary wallet disconnect');
         handleLogOut();
@@ -50,13 +30,6 @@ const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetS
             return;
         }
         refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-        // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
-        if (primaryWallet.chain === 'starknet') {
-            setNetwork(chain);
-        }
-        else {
-            setNetwork(parseInt(chain));
-        }
     });
     useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', ({ accounts }) => {
         logger.logger.debug('primary wallet account change', {
@@ -167,11 +140,6 @@ const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetS
         setSelectedWalletWithAction,
         setPrimaryWalletId,
     ]);
-    return {
-        loadingNetwork,
-        network,
-        setNetwork,
-    };
 };
 
 exports.useWalletEventListeners = useWalletEventListeners;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { IDynamicContext } from '../../../context/DynamicContext/types';
 import { AuthModeType, MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
@@ -19,8 +18,4 @@ export type UseWalletEventListenersArgs = {
     authMode: AuthModeType;
     refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector, shouldCallCallback?: boolean) => Promise<void>;
 };
-export declare const useWalletEventListeners: ({ handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }: UseWalletEventListenersArgs) => {
-    loadingNetwork: boolean;
-    network: string | number | undefined;
-    setNetwork: import("react").Dispatch<import("react").SetStateAction<string | number | undefined>>;
-};
+export declare const useWalletEventListeners: ({ handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }: UseWalletEventListenersArgs) => void;

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.js

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
@@ -16,26 +16,6 @@ import '../../../events/dynamicEvents.js';
 import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWalletConnectorEvent.js';
 
 const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
-    const [loadingNetwork, setLoadingNetwork] = useState(true);
-    const [network, setNetwork] = useState(undefined);
-    useEffect(() => {
-        const fetchNetwork = () => __awaiter(void 0, void 0, void 0, function* () {
-            try {
-                if (!(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector))
-                    return;
-                const network = yield primaryWallet.connector.getNetwork();
-                setNetwork(network);
-            }
-            catch (error) {
-                /* istanbul ignore next */
-                logger.debug(error);
-            }
-            finally {
-                setLoadingNetwork(false);
-            }
-        });
-        fetchNetwork();
-    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
     useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
         logger.debug('primary wallet disconnect');
         handleLogOut();
@@ -46,13 +26,6 @@ const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetS
             return;
         }
         refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-        // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
-        if (primaryWallet.chain === 'starknet') {
-            setNetwork(chain);
-        }
-        else {
-            setNetwork(parseInt(chain));
-        }
     });
     useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', ({ accounts }) => {
         logger.debug('primary wallet account change', {
@@ -163,11 +136,6 @@ const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetS
         setSelectedWalletWithAction,
         setPrimaryWalletId,
     ]);
-    return {
-        loadingNetwork,
-        network,
-        setNetwork,
-    };
 };
 
 export { useWalletEventListeners };

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

@@ -113,7 +113,7 @@ const useWalletItemActions = () => {
         }
         else {
             connectAndSignWallet({
-                fetchPublicAddressOpts: {
+                getAddressOpts: {
                     onDesktopUri: (uri) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                         setDesktopUri(uri);
                     }),

package/src/lib/utils/hooks/useWalletItemActions/useWalletItemActions.js

@@ -109,7 +109,7 @@ const useWalletItemActions = () => {
         }
         else {
             connectAndSignWallet({
-                fetchPublicAddressOpts: {
+                getAddressOpts: {
                     onDesktopUri: (uri) => __awaiter(void 0, void 0, void 0, function* () {
                         setDesktopUri(uri);
                     }),

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs

@@ -102,14 +102,16 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
     const decodedJwt = decodeJwt.decodeJwt(authToken);
     const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
-    const isCoinbaseMpcWallet = primaryWallet && walletConnectorCore.isCoinbaseMpcWalletConnector(primaryWallet.connector);
     const wallet = getEOAWallet.getEOAWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
+    const isCoinbaseMpcWallet = wallet && walletConnectorCore.isCoinbaseMpcWalletConnector(wallet.connector);
     // eslint-disable-next-line arrow-body-style
     React.useEffect(() => {
         return () => {
-            turnkeyExport.cleanupExport({
-                wallet,
-            });
+            if (isTurnkeyWallet) {
+                turnkeyExport.cleanupExport({
+                    wallet,
+                });
+            }
         };
         // only run once on unmount
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -130,7 +132,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
     const { mutate: handleExportWallet, isLoading, error, data, } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const wallet = getEOAWallet.getEOAWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
         if (isCoinbaseMpcWallet) {
-            return primaryWallet.connector.exportWalletKeys();
+            return (wallet === null || wallet === void 0 ? void 0 : wallet.connector).exportWalletKeys();
         }
         if (isTurnkeyWallet) {
             return turnkeyExport.exportCredential({

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js

@@ -98,14 +98,16 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
     const decodedJwt = decodeJwt(authToken);
     const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
-    const isCoinbaseMpcWallet = primaryWallet && isCoinbaseMpcWalletConnector(primaryWallet.connector);
     const wallet = getEOAWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
+    const isCoinbaseMpcWallet = wallet && isCoinbaseMpcWalletConnector(wallet.connector);
     // eslint-disable-next-line arrow-body-style
     useEffect(() => {
         return () => {
-            cleanupExport({
-                wallet,
-            });
+            if (isTurnkeyWallet) {
+                cleanupExport({
+                    wallet,
+                });
+            }
         };
         // only run once on unmount
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -126,7 +128,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
     const { mutate: handleExportWallet, isLoading, error, data, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
         const wallet = getEOAWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
         if (isCoinbaseMpcWallet) {
-            return primaryWallet.connector.exportWalletKeys();
+            return (wallet === null || wallet === void 0 ? void 0 : wallet.connector).exportWalletKeys();
         }
         if (isTurnkeyWallet) {
             return exportCredential({

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -180,7 +180,10 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         t,
         currencySymbol,
     ]);
-    return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress.shortenWalletAddress(transaction.from, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to && shortenWalletAddress.shortenWalletAddress(transaction.to, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.amount', label: t('dyn_send_transaction.confirmation.data.amount'), isEmpty: !transaction.value, title: transaction.value ? transaction.format(transaction.value) : undefined, suffix: currencySymbol, icon: chain && jsxRuntime.jsx(ChainIcon.ChainIcon, { chain: chain, chainName: chainName }), dataTestId: 'transaction-amount', children: transaction.value
+    return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress.shortenWalletAddress(transaction.from, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to &&
+                    transaction.to === 'dyn_send_transaction.multiple_recipients'
+                    ? t('dyn_send_transaction.multiple_recipients')
+                    : shortenWalletAddress.shortenWalletAddress(transaction.to, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.amount', label: t('dyn_send_transaction.confirmation.data.amount'), isEmpty: !transaction.value, title: transaction.value ? transaction.format(transaction.value) : undefined, suffix: currencySymbol, icon: chain && jsxRuntime.jsx(ChainIcon.ChainIcon, { chain: chain, chainName: chainName }), dataTestId: 'transaction-amount', children: transaction.value
                     ? transaction.format(transaction.value, {
                         precision: DEFAULT_PRECISION,
                     })

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -176,7 +176,10 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         t,
         currencySymbol,
     ]);
-    return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress(transaction.from, 4, 4) }), jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to && shortenWalletAddress(transaction.to, 4, 4) }), jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.amount', label: t('dyn_send_transaction.confirmation.data.amount'), isEmpty: !transaction.value, title: transaction.value ? transaction.format(transaction.value) : undefined, suffix: currencySymbol, icon: chain && jsx(ChainIcon, { chain: chain, chainName: chainName }), dataTestId: 'transaction-amount', children: transaction.value
+    return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress(transaction.from, 4, 4) }), jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to &&
+                    transaction.to === 'dyn_send_transaction.multiple_recipients'
+                    ? t('dyn_send_transaction.multiple_recipients')
+                    : shortenWalletAddress(transaction.to, 4, 4) }), jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.amount', label: t('dyn_send_transaction.confirmation.data.amount'), isEmpty: !transaction.value, title: transaction.value ? transaction.format(transaction.value) : undefined, suffix: currencySymbol, icon: chain && jsx(ChainIcon, { chain: chain, chainName: chainName }), dataTestId: 'transaction-amount', children: transaction.value
                     ? transaction.format(transaction.value, {
                         precision: DEFAULT_PRECISION,
                     })

package/src/lib/views/WalletCannotBeTransferredView/WalletCannotBeTransferredView.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var reactI18next = require('react-i18next');
 var walletBook = require('@dynamic-labs/wallet-book');
+require('react');
 require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
@@ -33,6 +33,7 @@ require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../context/WalletContext/WalletContext.cjs');
+var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
@@ -77,19 +78,16 @@ require('@hcaptcha/react-hcaptcha');
 require('../LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
 const WalletCannotBeTransferredView = () => {
-    const [walletAddress, setWalletAddress] = React.useState(undefined);
     const { goToInitialView } = ViewContext.useViewContext();
     const { selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
-    React.useEffect(() => {
-        const _fetchPublicAddress = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            const address = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress());
-            setWalletAddress(address);
-        });
-        _fetchPublicAddress();
-    }, [walletConnector]);
-    const _shortenWalletAddress = shortenWalletAddress.shortenWalletAddress(walletAddress);
-    return (jsxRuntime.jsxs("div", { className: 'wallet-cannot-be-transferred-view__container', children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet-cannot-be-transferred-view__title', as: 'h6', variant: 'title', color: 'primary', weight: 'medium', copykey: 'dyn_wallet_link.cannot_link.title', children: t('dyn_wallet_link.cannot_link.title') }), jsxRuntime.jsx("div", { className: 'wallet-cannot-be-transferred-view__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, width: 64, height: 64 }) }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-cannot-be-transferred-view__shorten-wallet-address', variant: 'body_normal', weight: 'regular', color: 'primary', children: _shortenWalletAddress }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-cannot-be-transferred-view__copy', variant: 'body_normal', color: 'secondary', weight: 'regular', copykey: 'dyn_wallet_link.cannot_link.description', children: t('dyn_wallet_link.cannot_link.description') }), jsxRuntime.jsx(Button.Button, { buttonClassName: 'wallet-cannot-be-transferred-view__transfer-alt-wallet-button', buttonVariant: 'primary', expanded: true, buttonPadding: 'large', onClick: goToInitialView, dataTestId: 'wallet-cannot-be-transferred-view-transfer-alt-wallet', copykey: 'dyn_wallet_link.cannot_link.link_other_button', children: t('dyn_wallet_link.cannot_link.link_other_button') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'wallet-cannot-be-transferred-view-cancel', buttonPadding: 'small', buttonClassName: 'wallet-cannot-be-transferred-view__cancel', onClick: goToInitialView, copykey: 'dyn_wallet_link.cannot_link.cancel_button', children: t('dyn_wallet_link.cannot_link.cancel_button') })] }));
+    const { data: walletAddress } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const accounts = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getConnectedAccounts());
+        return shortenWalletAddress.shortenWalletAddress(accounts === null || accounts === void 0 ? void 0 : accounts[0]);
+    }), {
+        deps: [walletConnector],
+    });
+    return (jsxRuntime.jsxs("div", { className: 'wallet-cannot-be-transferred-view__container', children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet-cannot-be-transferred-view__title', as: 'h6', variant: 'title', color: 'primary', weight: 'medium', copykey: 'dyn_wallet_link.cannot_link.title', children: t('dyn_wallet_link.cannot_link.title') }), jsxRuntime.jsx("div", { className: 'wallet-cannot-be-transferred-view__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, width: 64, height: 64 }) }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-cannot-be-transferred-view__shorten-wallet-address', variant: 'body_normal', weight: 'regular', color: 'primary', children: walletAddress }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-cannot-be-transferred-view__copy', variant: 'body_normal', color: 'secondary', weight: 'regular', copykey: 'dyn_wallet_link.cannot_link.description', children: t('dyn_wallet_link.cannot_link.description') }), jsxRuntime.jsx(Button.Button, { buttonClassName: 'wallet-cannot-be-transferred-view__transfer-alt-wallet-button', buttonVariant: 'primary', expanded: true, buttonPadding: 'large', onClick: goToInitialView, dataTestId: 'wallet-cannot-be-transferred-view-transfer-alt-wallet', copykey: 'dyn_wallet_link.cannot_link.link_other_button', children: t('dyn_wallet_link.cannot_link.link_other_button') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'wallet-cannot-be-transferred-view-cancel', buttonPadding: 'small', buttonClassName: 'wallet-cannot-be-transferred-view__cancel', onClick: goToInitialView, copykey: 'dyn_wallet_link.cannot_link.cancel_button', children: t('dyn_wallet_link.cannot_link.cancel_button') })] }));
 };
 
 exports.WalletCannotBeTransferredView = WalletCannotBeTransferredView;

package/src/lib/views/WalletCannotBeTransferredView/WalletCannotBeTransferredView.js

@@ -1,8 +1,8 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
+import 'react';
 import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
@@ -29,6 +29,7 @@ import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../context/WalletContext/WalletContext.js';
+import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
@@ -73,19 +74,16 @@ import '@hcaptcha/react-hcaptcha';
 import '../LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
 const WalletCannotBeTransferredView = () => {
-    const [walletAddress, setWalletAddress] = useState(undefined);
     const { goToInitialView } = useViewContext();
     const { selectedWalletConnector: walletConnector } = useInternalDynamicContext();
     const { t } = useTranslation();
-    useEffect(() => {
-        const _fetchPublicAddress = () => __awaiter(void 0, void 0, void 0, function* () {
-            const address = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress());
-            setWalletAddress(address);
-        });
-        _fetchPublicAddress();
-    }, [walletConnector]);
-    const _shortenWalletAddress = shortenWalletAddress(walletAddress);
-    return (jsxs("div", { className: 'wallet-cannot-be-transferred-view__container', children: [jsx(Typography, { className: 'wallet-cannot-be-transferred-view__title', as: 'h6', variant: 'title', color: 'primary', weight: 'medium', copykey: 'dyn_wallet_link.cannot_link.title', children: t('dyn_wallet_link.cannot_link.title') }), jsx("div", { className: 'wallet-cannot-be-transferred-view__icon', children: jsx(WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, width: 64, height: 64 }) }), jsx(Typography, { className: 'wallet-cannot-be-transferred-view__shorten-wallet-address', variant: 'body_normal', weight: 'regular', color: 'primary', children: _shortenWalletAddress }), jsx(Typography, { className: 'wallet-cannot-be-transferred-view__copy', variant: 'body_normal', color: 'secondary', weight: 'regular', copykey: 'dyn_wallet_link.cannot_link.description', children: t('dyn_wallet_link.cannot_link.description') }), jsx(Button, { buttonClassName: 'wallet-cannot-be-transferred-view__transfer-alt-wallet-button', buttonVariant: 'primary', expanded: true, buttonPadding: 'large', onClick: goToInitialView, dataTestId: 'wallet-cannot-be-transferred-view-transfer-alt-wallet', copykey: 'dyn_wallet_link.cannot_link.link_other_button', children: t('dyn_wallet_link.cannot_link.link_other_button') }), jsx(Button, { dataTestId: 'wallet-cannot-be-transferred-view-cancel', buttonPadding: 'small', buttonClassName: 'wallet-cannot-be-transferred-view__cancel', onClick: goToInitialView, copykey: 'dyn_wallet_link.cannot_link.cancel_button', children: t('dyn_wallet_link.cannot_link.cancel_button') })] }));
+    const { data: walletAddress } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        const accounts = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getConnectedAccounts());
+        return shortenWalletAddress(accounts === null || accounts === void 0 ? void 0 : accounts[0]);
+    }), {
+        deps: [walletConnector],
+    });
+    return (jsxs("div", { className: 'wallet-cannot-be-transferred-view__container', children: [jsx(Typography, { className: 'wallet-cannot-be-transferred-view__title', as: 'h6', variant: 'title', color: 'primary', weight: 'medium', copykey: 'dyn_wallet_link.cannot_link.title', children: t('dyn_wallet_link.cannot_link.title') }), jsx("div", { className: 'wallet-cannot-be-transferred-view__icon', children: jsx(WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, width: 64, height: 64 }) }), jsx(Typography, { className: 'wallet-cannot-be-transferred-view__shorten-wallet-address', variant: 'body_normal', weight: 'regular', color: 'primary', children: walletAddress }), jsx(Typography, { className: 'wallet-cannot-be-transferred-view__copy', variant: 'body_normal', color: 'secondary', weight: 'regular', copykey: 'dyn_wallet_link.cannot_link.description', children: t('dyn_wallet_link.cannot_link.description') }), jsx(Button, { buttonClassName: 'wallet-cannot-be-transferred-view__transfer-alt-wallet-button', buttonVariant: 'primary', expanded: true, buttonPadding: 'large', onClick: goToInitialView, dataTestId: 'wallet-cannot-be-transferred-view-transfer-alt-wallet', copykey: 'dyn_wallet_link.cannot_link.link_other_button', children: t('dyn_wallet_link.cannot_link.link_other_button') }), jsx(Button, { dataTestId: 'wallet-cannot-be-transferred-view-cancel', buttonPadding: 'small', buttonClassName: 'wallet-cannot-be-transferred-view__cancel', onClick: goToInitialView, copykey: 'dyn_wallet_link.cannot_link.cancel_button', children: t('dyn_wallet_link.cannot_link.cancel_button') })] }));
 };
 
 export { WalletCannotBeTransferredView };

package/src/lib/views/WalletList/WalletList.cjs

@@ -124,6 +124,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;
+    const isTabsEnabled = Boolean((tabsItems === null || tabsItems === void 0 ? void 0 : tabsItems.length) && !isLinkingWallet);
     const walletListScrollRef = React.useRef(null);
     /* istanbul ignore next */
     const handleScroll = () => {
@@ -145,8 +146,15 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     const searchContainer = !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__search-container', {
             'wallet-list__search-container--scroll': !error,
         }), children: jsxRuntime.jsx(Search.Search, { copykey: 'dyn_wallet_list.search.label', label: t('dyn_wallet_list.search.label', { numberOfWallets }), value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }) })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(tabsItems === null || tabsItems === void 0 ? void 0 : tabsItems.length) && !isLinkingWallet && (jsxRuntime.jsx("div", { className: 'wallet-list__tabs-container', children: jsxRuntime.jsx(WalletListGridTabs.WalletListGridTabs, { items: tabsItems, value: selectedTabIndex || 0, onSelect: setSelectedTabIndex }) })), searchContainer, Boolean(error) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: 'wallet-list__container', children: jsxRuntime.jsxs("div", { className: classNames.classNames('wallet-list__scroll-container', {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isTabsEnabled && (jsxRuntime.jsx("div", { className: 'wallet-list__tabs-container', children: jsxRuntime.jsx(WalletListGridTabs.WalletListGridTabs
+                // The tabsItems nullable assertion is safe here because isTabsEnabled is true
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                , { 
+                    // The tabsItems nullable assertion is safe here because isTabsEnabled is true
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    items: tabsItems, value: selectedTabIndex || 0, onSelect: setSelectedTabIndex }) })), searchContainer, Boolean(error) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: 'wallet-list__container', children: jsxRuntime.jsxs("div", { className: classNames.classNames('wallet-list__scroll-container', {
                         'wallet-list__scroll-container--error': Boolean(error),
+                        'wallet-list__scroll-container--fixed-height': isTabsEnabled,
                     }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [walletConnectorOptions.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (walletsList.map((wallet, index) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, onResetSearchValue: () => handleFilterValueChange(''), recommendedWallets: effectiveRecommendedWallets }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsxRuntime.jsx(DefaultFooter.DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
 };
 

package/src/lib/views/WalletList/WalletList.js

@@ -120,6 +120,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;
+    const isTabsEnabled = Boolean((tabsItems === null || tabsItems === void 0 ? void 0 : tabsItems.length) && !isLinkingWallet);
     const walletListScrollRef = useRef(null);
     /* istanbul ignore next */
     const handleScroll = () => {
@@ -141,8 +142,15 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     const searchContainer = !projectSettings ? (jsx(Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsx("div", { className: classNames('wallet-list__search-container', {
             'wallet-list__search-container--scroll': !error,
         }), children: jsx(Search, { copykey: 'dyn_wallet_list.search.label', label: t('dyn_wallet_list.search.label', { numberOfWallets }), value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }) })));
-    return (jsxs(Fragment, { children: [(tabsItems === null || tabsItems === void 0 ? void 0 : tabsItems.length) && !isLinkingWallet && (jsx("div", { className: 'wallet-list__tabs-container', children: jsx(WalletListGridTabs, { items: tabsItems, value: selectedTabIndex || 0, onSelect: setSelectedTabIndex }) })), searchContainer, Boolean(error) && (jsx(ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsx("div", { className: 'wallet-list__container', children: jsxs("div", { className: classNames('wallet-list__scroll-container', {
+    return (jsxs(Fragment, { children: [isTabsEnabled && (jsx("div", { className: 'wallet-list__tabs-container', children: jsx(WalletListGridTabs
+                // The tabsItems nullable assertion is safe here because isTabsEnabled is true
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                , { 
+                    // The tabsItems nullable assertion is safe here because isTabsEnabled is true
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    items: tabsItems, value: selectedTabIndex || 0, onSelect: setSelectedTabIndex }) })), searchContainer, Boolean(error) && (jsx(ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsx("div", { className: 'wallet-list__container', children: jsxs("div", { className: classNames('wallet-list__scroll-container', {
                         'wallet-list__scroll-container--error': Boolean(error),
+                        'wallet-list__scroll-container--fixed-height': isTabsEnabled,
                     }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [walletConnectorOptions.length === 0 && (jsx(ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsx(SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsx(SvgNoWalletFound, {}) })) : (walletsList.map((wallet, index) => (jsx(WalletListItem, { wallet: wallet, onResetSearchValue: () => handleFilterValueChange(''), recommendedWallets: effectiveRecommendedWallets }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsx(DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
 };