@dynamic-labs/sdk-react-core 4.0.0-alpha.1 → 4.0.0-alpha.2

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 
+## [4.0.0-alpha.2](https://github.com/dynamic-labs/DynamicAuth/compare/v4.0.0-alpha.1...v4.0.0-alpha.2) (2024-09-18)
+
+
+### Features
+
+* add iconVariant prop to DynamicBridgeWidget ([#6915](https://github.com/dynamic-labs/DynamicAuth/issues/6915)) ([8aa0f3d](https://github.com/dynamic-labs/DynamicAuth/commit/8aa0f3d8d8c41c7b5c4796106f611f208010cb6d))
+* allow to create extra embedded wallets in react-native ([#6923](https://github.com/dynamic-labs/DynamicAuth/issues/6923)) ([ba22f7b](https://github.com/dynamic-labs/DynamicAuth/commit/ba22f7bcf41a444a4df0aff9b6aec257457e9402))
+* **client:** add hide method for auth and userProfile ui modules ([#6928](https://github.com/dynamic-labs/DynamicAuth/issues/6928)) ([a11a4a5](https://github.com/dynamic-labs/DynamicAuth/commit/a11a4a5d6e25ce2a916ebd52f0b341020dc1a7e5))
+
 ## [4.0.0-alpha.1](https://github.com/dynamic-labs/DynamicAuth/compare/v4.0.0-alpha.0...v4.0.0-alpha.1) (2024-09-17)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.0.0-alpha.1";
+var version = "4.0.0-alpha.2";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.530",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.0.0-alpha.1";
+var version = "4.0.0-alpha.2";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.530",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-labs/dynamic-auth.git",
@@ -17,16 +17,16 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/iconic": "4.0.0-alpha.1",
-    "@dynamic-labs/logger": "4.0.0-alpha.1",
-    "@dynamic-labs/message-transport": "4.0.0-alpha.1",
-    "@dynamic-labs/multi-wallet": "4.0.0-alpha.1",
-    "@dynamic-labs/rpc-providers": "4.0.0-alpha.1",
-    "@dynamic-labs/store": "4.0.0-alpha.1",
-    "@dynamic-labs/types": "4.0.0-alpha.1",
-    "@dynamic-labs/utils": "4.0.0-alpha.1",
-    "@dynamic-labs/wallet-book": "4.0.0-alpha.1",
-    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.1",
+    "@dynamic-labs/iconic": "4.0.0-alpha.2",
+    "@dynamic-labs/logger": "4.0.0-alpha.2",
+    "@dynamic-labs/message-transport": "4.0.0-alpha.2",
+    "@dynamic-labs/multi-wallet": "4.0.0-alpha.2",
+    "@dynamic-labs/rpc-providers": "4.0.0-alpha.2",
+    "@dynamic-labs/store": "4.0.0-alpha.2",
+    "@dynamic-labs/types": "4.0.0-alpha.2",
+    "@dynamic-labs/utils": "4.0.0-alpha.2",
+    "@dynamic-labs/wallet-book": "4.0.0-alpha.2",
+    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.2",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/components/WalletInformationCard/WalletInformationCard.cjs

@@ -24,7 +24,7 @@ var Icon = require('../Icon/Icon.cjs');
 const WalletInformationCard = ({ address, ens, balance, icon, network, menu, }) => {
     const { t } = reactI18next.useTranslation();
     const details = React.useMemo(() => {
-        const shortenAddress = shortenWalletAddress.shortenWalletAddress(address, 4, 4);
+        const shortenAddress = shortenWalletAddress.shortenWalletAddress(address);
         if (ens) {
             return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_normal', truncate: true, children: ens }), jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', children: shortenAddress })] }));
         }

package/src/lib/components/WalletInformationCard/WalletInformationCard.js

@@ -20,7 +20,7 @@ import { Icon } from '../Icon/Icon.js';
 const WalletInformationCard = ({ address, ens, balance, icon, network, menu, }) => {
     const { t } = useTranslation();
     const details = useMemo(() => {
-        const shortenAddress = shortenWalletAddress(address, 4, 4);
+        const shortenAddress = shortenWalletAddress(address);
         if (ens) {
             return (jsxs(Fragment, { children: [jsx(Typography, { color: 'primary', variant: 'body_normal', truncate: true, children: ens }), jsx(Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', children: shortenAddress })] }));
         }

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -144,7 +144,7 @@ const DynamicContext = React.createContext(undefined);
 /** The context provider itself we only use internally */
 const InnerDynamicContextProvider = ({ children, theme, settings: settings$1, locale: locale$1, enableInstrumentation = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, apiBaseUrl, coinbaseWalletPreference, detectNewWalletsForLinking = false, enableConnectOnlyFallback = false, deepLinkPreference: deepLinkPreferenceProp = 'native', bridgeChains, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, walletsFilter, logLevel = 'WARN', mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = false, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, } = settings$1;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, apiBaseUrl, coinbaseWalletPreference, detectNewWalletsForLinking = false, enableConnectOnlyFallback = false, deepLinkPreference: deepLinkPreferenceProp = 'native', bridgeChains, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, walletsFilter, logLevel = 'WARN', mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = false, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, suppressEndUserConsoleWarning, } = settings$1;
     /**
      * initialize Storage
      */
@@ -210,7 +210,10 @@ const InnerDynamicContextProvider = ({ children, theme, settings: settings$1, lo
     const { settings: projectSettings$1 } = projectSettings.useProjectSettings();
     useSendDynamicProps.useSendDynamicProps({ environmentId, settings: settings$1 });
     // Console warning for end user safety
-    useEndUserWarning.useEndUserWarning({ projectSettings: projectSettings$1 });
+    useEndUserWarning.useEndUserWarning({
+        projectSettings: projectSettings$1,
+        suppress: suppressEndUserConsoleWarning,
+    });
     const multiWallet = useMultiWallet.useMultiWallet({
         isBridgeFlow,
         multiWalletOverride: (_d = settings$1.overrides) === null || _d === void 0 ? void 0 : _d.multiWallet,

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -140,7 +140,7 @@ const DynamicContext = createContext(undefined);
 /** The context provider itself we only use internally */
 const InnerDynamicContextProvider = ({ children, theme, settings, locale, enableInstrumentation = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, apiBaseUrl, coinbaseWalletPreference, detectNewWalletsForLinking = false, enableConnectOnlyFallback = false, deepLinkPreference: deepLinkPreferenceProp = 'native', bridgeChains, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, walletsFilter, logLevel = 'WARN', mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = false, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, } = settings;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, apiBaseUrl, coinbaseWalletPreference, detectNewWalletsForLinking = false, enableConnectOnlyFallback = false, deepLinkPreference: deepLinkPreferenceProp = 'native', bridgeChains, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, walletsFilter, logLevel = 'WARN', mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = false, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, suppressEndUserConsoleWarning, } = settings;
     /**
      * initialize Storage
      */
@@ -206,7 +206,10 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale, enable
     const { settings: projectSettings } = useProjectSettings();
     useSendDynamicProps({ environmentId, settings });
     // Console warning for end user safety
-    useEndUserWarning({ projectSettings });
+    useEndUserWarning({
+        projectSettings,
+        suppress: suppressEndUserConsoleWarning,
+    });
     const multiWallet = useMultiWallet({
         isBridgeFlow,
         multiWalletOverride: (_d = settings.overrides) === null || _d === void 0 ? void 0 : _d.multiWallet,

package/src/lib/context/DynamicContext/types/DynamicContextProps.d.ts

@@ -84,6 +84,7 @@ export interface DynamicContextProps {
         socialMediaLinkText?: string;
         socialMediaUrl?: string;
         socialProvidersFilter?: SocialProviderFilter;
+        suppressEndUserConsoleWarning?: boolean;
         termsOfServiceUrl?: string;
         toolkitEnabled?: boolean;
         walletConnectors?: WalletConnectorsMethod[];

package/src/lib/utils/hooks/authenticationHooks/helpers/showPendingConnectView.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var getWalletProvider = require('../../../functions/getWalletProvider/getWalletProvider.cjs');
 
-const specialCareWallets = ['bloctoevm', 'perawallet'];
+const specialCareWallets = ['bloctoevm', 'perawallet', 'metamaskstarknet'];
 const showPendingConnectView = (walletConnector, setView) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     const walletProvider = getWalletProvider.getWalletProvider(walletConnector);
     // We don't want to show the pending connect view for qrCode and walletConnect

package/src/lib/utils/hooks/authenticationHooks/helpers/showPendingConnectView.js

@@ -2,7 +2,7 @@
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { getWalletProvider } from '../../../functions/getWalletProvider/getWalletProvider.js';
 
-const specialCareWallets = ['bloctoevm', 'perawallet'];
+const specialCareWallets = ['bloctoevm', 'perawallet', 'metamaskstarknet'];
 const showPendingConnectView = (walletConnector, setView) => __awaiter(void 0, void 0, void 0, function* () {
     const walletProvider = getWalletProvider(walletConnector);
     // We don't want to show the pending connect view for qrCode and walletConnect

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

@@ -18,10 +18,12 @@ require('../../../store/state/loadingAndLifecycle.cjs');
 require('../../../shared/consts/index.cjs');
 
 let didLog = false;
-const useEndUserWarning = ({ projectSettings, }) => {
+const useEndUserWarning = ({ suppress = false, projectSettings, }) => {
     React.useEffect(() => {
         var _a;
-        if (!didLog && (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName) === sdkApiCore.EnvironmentEnum.Live) {
+        if (!suppress &&
+            !didLog &&
+            (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName) === sdkApiCore.EnvironmentEnum.Live) {
             didLog = true;
             logger.logger.info('%cWarning!', 'color: red; font-size: 32px;');
             logger.logger.info('%cThis is a browser feature intended for developers. You are reading this message because you opened the browser console, a developer tool.\n\n%c1. Never share your tokens or sensitive information with anyone.\n2. Do not paste any code you do not fully understand.\n3. If someone instructed you to do this, it is likely a scam.\n\n%cInjecting code into your browser could result in loss of tokens or control of your account that cannot be recovered or protected.', 'font-size: 16px;', 'font-size: 12px;', 'color: red; font-size: 12px;');
@@ -31,7 +33,7 @@ const useEndUserWarning = ({ projectSettings, }) => {
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName]);
+    }, [projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName, suppress]);
 };
 
 exports.useEndUserWarning = useEndUserWarning;

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

@@ -1,5 +1,6 @@
 import { ProjectSettings } from '@dynamic-labs/sdk-api-core';
 export declare const resetEndUserWarning: () => void;
-export declare const useEndUserWarning: ({ projectSettings, }: {
+export declare const useEndUserWarning: ({ suppress, projectSettings, }: {
+    suppress?: boolean;
     projectSettings?: ProjectSettings;
 }) => void;

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

@@ -14,10 +14,12 @@ import '../../../store/state/loadingAndLifecycle.js';
 import '../../../shared/consts/index.js';
 
 let didLog = false;
-const useEndUserWarning = ({ projectSettings, }) => {
+const useEndUserWarning = ({ suppress = false, projectSettings, }) => {
     useEffect(() => {
         var _a;
-        if (!didLog && (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName) === EnvironmentEnum.Live) {
+        if (!suppress &&
+            !didLog &&
+            (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName) === EnvironmentEnum.Live) {
             didLog = true;
             logger.info('%cWarning!', 'color: red; font-size: 32px;');
             logger.info('%cThis is a browser feature intended for developers. You are reading this message because you opened the browser console, a developer tool.\n\n%c1. Never share your tokens or sensitive information with anyone.\n2. Do not paste any code you do not fully understand.\n3. If someone instructed you to do this, it is likely a scam.\n\n%cInjecting code into your browser could result in loss of tokens or control of your account that cannot be recovered or protected.', 'font-size: 16px;', 'font-size: 12px;', 'color: red; font-size: 12px;');
@@ -27,7 +29,7 @@ const useEndUserWarning = ({ projectSettings, }) => {
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName]);
+    }, [projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.environmentName, suppress]);
 };
 
 export { useEndUserWarning };

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
+var walletBook = require('@dynamic-labs/wallet-book');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../events/dynamicEvents.cjs');
@@ -16,7 +17,6 @@ require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 var getChainIcon = require('../../shared/utils/functions/chain/getChainIcon.cjs');
 require('@dynamic-labs/wallet-connector-core');
-require('@dynamic-labs/wallet-book');
 var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
@@ -96,7 +96,7 @@ var InlineWidgetButton = require('../../components/InlineWidget/components/Inlin
 var InlineWidget = require('../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
-const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
+const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chain', }) => {
     const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = DynamicBridgeWidgetContext.useDynamicBridgeWidgetContext();
     const { t } = reactI18next.useTranslation();
@@ -114,7 +114,7 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
                     const ChainIcon = getChainIcon.getChainIcon(chain);
                     const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
                     if (connectedChainWallets.length > 0) {
-                        return connectedChainWallets.map((wallet) => (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, { icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress.shortenWalletAddress(wallet.address, 3, 3) }, wallet.id)));
+                        return connectedChainWallets.map((wallet) => (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, { icon: iconVariant === 'wallet' ? (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: wallet.connector.key })) : (jsxRuntime.jsx(ChainIcon, {})), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress.shortenWalletAddress(wallet.address) }, wallet.id)));
                     }
                     return (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, { icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true), copykey: 'dyn_bridge.widget.connect', children: t('dyn_bridge.widget.connect') }, chain));
                 }) }), jsxRuntime.jsx(DynamicBridgeUserProfile.DynamicBridgeUserProfile, { variant: variant })] }));

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.d.ts

@@ -3,5 +3,6 @@ export type DynamicBridgeWidgetVariant = 'modal' | 'dropdown';
 export type DynamicBridgeWidgetProps = {
     className?: string;
     variant?: DynamicBridgeWidgetVariant;
+    iconVariant?: 'wallet' | 'chain';
 };
 export declare const DynamicBridgeWidget: FC<DynamicBridgeWidgetProps>;

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
 import '../../events/dynamicEvents.js';
@@ -12,7 +13,6 @@ import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import { getChainIcon } from '../../shared/utils/functions/chain/getChainIcon.js';
 import '@dynamic-labs/wallet-connector-core';
-import '@dynamic-labs/wallet-book';
 import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
@@ -92,7 +92,7 @@ import { InlineWidgetButton } from '../../components/InlineWidget/components/Inl
 import { InlineWidget } from '../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
-const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
+const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chain', }) => {
     const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = useDynamicBridgeWidgetContext();
     const { t } = useTranslation();
@@ -110,7 +110,7 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
                     const ChainIcon = getChainIcon(chain);
                     const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
                     if (connectedChainWallets.length > 0) {
-                        return connectedChainWallets.map((wallet) => (jsx(InlineWidgetButton, { icon: jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress(wallet.address, 3, 3) }, wallet.id)));
+                        return connectedChainWallets.map((wallet) => (jsx(InlineWidgetButton, { icon: iconVariant === 'wallet' ? (jsx(WalletIcon, { walletKey: wallet.connector.key })) : (jsx(ChainIcon, {})), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress(wallet.address) }, wallet.id)));
                     }
                     return (jsx(InlineWidgetButton, { icon: jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true), copykey: 'dyn_bridge.widget.connect', children: t('dyn_bridge.widget.connect') }, chain));
                 }) }), jsx(DynamicBridgeUserProfile, { variant: variant })] }));