@dynamic-labs/sdk-react-core 1.0.6 → 1.0.8

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/sdk-api');
-var logger = require('../../../shared/logger.cjs');
+require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
@@ -15,6 +15,7 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
+var useThrottle = require('../../../shared/utils/hooks/useThrottle/useThrottle.cjs');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getWalletIdentifier = require('../../functions/getWalletIdentifier/getWalletIdentifier.cjs');
@@ -22,65 +23,84 @@ var isWalletConnected = require('../../functions/isWalletConnected/isWalletConne
 var useEventListener = require('../useEventListener/useEventListener.cjs');
 var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
-const connectedWalletStateReducer = (state, connectedWalletsMap) => {
-    // When setting to empty, unset load flag
-    if (Object.values(connectedWalletsMap).length === 0) {
-        if (state.didLoad === false)
-            return state;
-        return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: false });
-    }
-    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
-};
+/**
+ * For the given wallet array, this returns an object mapping from each wallet's
+ * identifier to whether its connector recognizes it as currently connected or not.
+ */
+const getConnectedWalletsMap = (wallets) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const newMap = {};
+    yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        newMap[getWalletIdentifier.getWalletIdentifier(wallet)] = yield isWalletConnected.isWalletConnected(wallet);
+    })));
+    return newMap;
+});
 const useWalletsConnectionState = (wallets) => {
-    const [state, setState] = React.useReducer(connectedWalletStateReducer, {
-        connectedWalletsMap: {},
-        didLoad: false,
-    });
-    const connectors = wallets.map(({ connector }) => connector);
-    const lastCallTimestamp = React.useRef(0);
+    const [connectedWalletsMap, setConnectedWalletsMap] = React.useState({});
+    /**
+     * Whether the connection map has been loaded off of the current wallet array.
+     * Always false for empty wallet arrays.
+     */
+    const didConnectedStateLoad = React.useRef(false);
+    /**
+     * When an accountChanged event is raised, we store the incoming wallet here
+     * until it is finally reflected in the wallets prop.
+     * During this time we do not update the connectedWalletsMap.
+     * This way, we avoid setting the connected state of the primary wallet
+     * to false due to a state transition delay.
+     */
+    const incomingWalletSwitchAddress = React.useRef(undefined);
     const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletsMap = {};
-        yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[getWalletIdentifier.getWalletIdentifier(wallet)] =
-                yield isWalletConnected.isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [wallets]);
-    const handleOnEventUpdate = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (!wallets.length)
-            return;
-        const callTimestamp = new Date().getTime();
-        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
-        lastCallTimestamp.current = callTimestamp;
-        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
-        // which causes a loop of calls to this function
-        if (diffFromLastCall < 1000) {
-            logger.logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+        didConnectedStateLoad.current = false;
+        const newMap = yield getConnectedWalletsMap(wallets);
+        if (Object.values(newMap).length === 0) {
+            setConnectedWalletsMap({});
             return;
         }
-        computeConnectedStateForWallets();
-    }), [computeConnectedStateForWallets, wallets.length]);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
-    const refreshKey = wallets.map(getWalletIdentifier.getWalletIdentifier).join('-');
+        didConnectedStateLoad.current = true;
+        // If there is an incoming account switch and it isn't yet finished,
+        // we don't change the map to avoid setting it to a misleading state
+        if (incomingWalletSwitchAddress.current) {
+            const accountSwitchIsComplete = wallets.some((wallet) => walletConnectorCore.isSameAddress(incomingWalletSwitchAddress.current, wallet.address, wallet.chain));
+            if (accountSwitchIsComplete)
+                incomingWalletSwitchAddress.current = undefined;
+            else
+                return;
+        }
+        setConnectedWalletsMap(newMap);
+    }), [wallets]);
+    /** A string that is unique for each possible value of the wallets prop */
+    const walletsHash = wallets.map(getWalletIdentifier.getWalletIdentifier).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
+    // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+    // which causes a loop of calls to this function, so we throttle it
+    const handleEvent = useThrottle.useThrottle(() => {
+        if (walletsHash)
+            computeConnectedStateForWallets();
+    }, 1000);
+    const onAccountChange = ({ accounts }) => {
+        incomingWalletSwitchAddress.current = accounts[0];
+        handleEvent();
+    };
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
     React.useEffect(() => {
         computeConnectedStateForWallets();
     }, 
     /**
-     * This is using a custom key to force the useEffect to run only when a connector is
-     * added or removed from the connectors list.
+     * This is using a custom key to force the useEffect to run only when the ids of the
+     * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [refreshKey]);
+    [walletsHash]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.
      */
     useEventListener.useEventListener('focus', computeConnectedStateForWallets);
     return {
-        connectedWalletMap: state.connectedWalletsMap,
-        didConnectedStateLoad: state.didLoad,
+        connectedWalletsMap,
+        didConnectedStateLoad,
     };
 };
 

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

@@ -1,13 +1,11 @@
+import { MutableRefObject } from 'react';
 import { Wallet } from '../../../shared';
-type ConnectedState = {
-    didLoad: boolean;
-    connectedWalletsMap: {
-        [address: string]: boolean;
-    };
+type ConnectedWalletsMap = {
+    [address: string]: boolean;
 };
 type WalletsConnectionStateHook = (wallets: Wallet[]) => {
-    connectedWalletMap: ConnectedState['connectedWalletsMap'];
-    didConnectedStateLoad: ConnectedState['didLoad'];
+    connectedWalletsMap: ConnectedWalletsMap;
+    didConnectedStateLoad: MutableRefObject<boolean>;
 };
 export declare const useWalletsConnectionState: WalletsConnectionStateHook;
 export {};

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

@@ -1,9 +1,9 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useReducer, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
-import { logger } from '../../../shared/logger.js';
+import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
@@ -11,6 +11,7 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
+import { useThrottle } from '../../../shared/utils/hooks/useThrottle/useThrottle.js';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getWalletIdentifier } from '../../functions/getWalletIdentifier/getWalletIdentifier.js';
@@ -18,65 +19,84 @@ import { isWalletConnected } from '../../functions/isWalletConnected/isWalletCon
 import { useEventListener } from '../useEventListener/useEventListener.js';
 import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
 
-const connectedWalletStateReducer = (state, connectedWalletsMap) => {
-    // When setting to empty, unset load flag
-    if (Object.values(connectedWalletsMap).length === 0) {
-        if (state.didLoad === false)
-            return state;
-        return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: false });
-    }
-    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
-};
+/**
+ * For the given wallet array, this returns an object mapping from each wallet's
+ * identifier to whether its connector recognizes it as currently connected or not.
+ */
+const getConnectedWalletsMap = (wallets) => __awaiter(void 0, void 0, void 0, function* () {
+    const newMap = {};
+    yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        newMap[getWalletIdentifier(wallet)] = yield isWalletConnected(wallet);
+    })));
+    return newMap;
+});
 const useWalletsConnectionState = (wallets) => {
-    const [state, setState] = useReducer(connectedWalletStateReducer, {
-        connectedWalletsMap: {},
-        didLoad: false,
-    });
-    const connectors = wallets.map(({ connector }) => connector);
-    const lastCallTimestamp = useRef(0);
+    const [connectedWalletsMap, setConnectedWalletsMap] = useState({});
+    /**
+     * Whether the connection map has been loaded off of the current wallet array.
+     * Always false for empty wallet arrays.
+     */
+    const didConnectedStateLoad = useRef(false);
+    /**
+     * When an accountChanged event is raised, we store the incoming wallet here
+     * until it is finally reflected in the wallets prop.
+     * During this time we do not update the connectedWalletsMap.
+     * This way, we avoid setting the connected state of the primary wallet
+     * to false due to a state transition delay.
+     */
+    const incomingWalletSwitchAddress = useRef(undefined);
     const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletsMap = {};
-        yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[getWalletIdentifier(wallet)] =
-                yield isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [wallets]);
-    const handleOnEventUpdate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!wallets.length)
-            return;
-        const callTimestamp = new Date().getTime();
-        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
-        lastCallTimestamp.current = callTimestamp;
-        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
-        // which causes a loop of calls to this function
-        if (diffFromLastCall < 1000) {
-            logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+        didConnectedStateLoad.current = false;
+        const newMap = yield getConnectedWalletsMap(wallets);
+        if (Object.values(newMap).length === 0) {
+            setConnectedWalletsMap({});
             return;
         }
-        computeConnectedStateForWallets();
-    }), [computeConnectedStateForWallets, wallets.length]);
-    useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
-    useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
-    useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
-    const refreshKey = wallets.map(getWalletIdentifier).join('-');
+        didConnectedStateLoad.current = true;
+        // If there is an incoming account switch and it isn't yet finished,
+        // we don't change the map to avoid setting it to a misleading state
+        if (incomingWalletSwitchAddress.current) {
+            const accountSwitchIsComplete = wallets.some((wallet) => isSameAddress(incomingWalletSwitchAddress.current, wallet.address, wallet.chain));
+            if (accountSwitchIsComplete)
+                incomingWalletSwitchAddress.current = undefined;
+            else
+                return;
+        }
+        setConnectedWalletsMap(newMap);
+    }), [wallets]);
+    /** A string that is unique for each possible value of the wallets prop */
+    const walletsHash = wallets.map(getWalletIdentifier).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
+    // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+    // which causes a loop of calls to this function, so we throttle it
+    const handleEvent = useThrottle(() => {
+        if (walletsHash)
+            computeConnectedStateForWallets();
+    }, 1000);
+    const onAccountChange = ({ accounts }) => {
+        incomingWalletSwitchAddress.current = accounts[0];
+        handleEvent();
+    };
+    useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
+    useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
+    useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
     useEffect(() => {
         computeConnectedStateForWallets();
     }, 
     /**
-     * This is using a custom key to force the useEffect to run only when a connector is
-     * added or removed from the connectors list.
+     * This is using a custom key to force the useEffect to run only when the ids of the
+     * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [refreshKey]);
+    [walletsHash]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.
      */
     useEventListener('focus', computeConnectedStateForWallets);
     return {
-        connectedWalletMap: state.connectedWalletsMap,
-        didConnectedStateLoad: state.didLoad,
+        connectedWalletsMap,
+        didConnectedStateLoad,
     };
 };
 

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var reactI18next = require('react-i18next');
 var IsBrowser = require('../../components/IsBrowser/IsBrowser.cjs');
 require('@dynamic-labs/utils');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -31,7 +32,6 @@ require('react-dom');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
-require('react-i18next');
 require('../../context/MockContext/MockContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
@@ -68,6 +68,7 @@ var DynamicBridgeWidgetContext = require('./context/DynamicBridgeWidgetContext/D
 const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
     const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = DynamicBridgeWidgetContext.useDynamicBridgeWidgetContext();
+    const { t } = reactI18next.useTranslation();
     const closeOnOutsideClick = React.useCallback((e) => {
         var _a;
         const target = e.composedPath().shift();
@@ -84,7 +85,7 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
                         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 (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, { icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true), children: "Connect wallet" }, chain));
+                        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.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { IsBrowser } from '../../components/IsBrowser/IsBrowser.js';
 import '@dynamic-labs/utils';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
@@ -27,7 +28,6 @@ import 'react-dom';
 import '../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
-import 'react-i18next';
 import '../../context/MockContext/MockContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
@@ -64,6 +64,7 @@ import { useDynamicBridgeWidgetContext } from './context/DynamicBridgeWidgetCont
 const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
     const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = useDynamicBridgeWidgetContext();
+    const { t } = useTranslation();
     const closeOnOutsideClick = useCallback((e) => {
         var _a;
         const target = e.composedPath().shift();
@@ -80,7 +81,7 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
                         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 (jsx(InlineWidgetButton, { icon: jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true), children: "Connect wallet" }, chain));
+                        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 })] }) }));
 };
 

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var reactI18next = require('react-i18next');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('@dynamic-labs/utils');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
@@ -28,7 +29,6 @@ require('react-dom');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
-require('react-i18next');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
@@ -64,9 +64,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DynamicBridgeWalletCard = ({ className, networkIcon, networkName, children }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('dynamic-bridge-wallet-card', className), children: [jsxRuntime.jsxs("div", { className: 'dynamic-bridge-wallet-card__network', children: [networkIcon &&
-                    React__default["default"].cloneElement(networkIcon, {
-                        className: 'dynamic-bridge-wallet-card__network-icon',
-                    }), networkName && (jsxRuntime.jsxs(Typography.Typography, { className: 'dynamic-bridge-wallet-card__network-name', variant: 'body_small', color: 'primary', weight: 'medium', as: 'span', children: [networkName, " wallet"] }))] }), children] }));
+const DynamicBridgeWalletCard = ({ className, networkIcon, networkName, children }) => {
+    const { t } = reactI18next.useTranslation();
+    return (jsxRuntime.jsxs("div", { className: classNames.classNames('dynamic-bridge-wallet-card', className), children: [jsxRuntime.jsxs("div", { className: 'dynamic-bridge-wallet-card__network', children: [networkIcon &&
+                        React__default["default"].cloneElement(networkIcon, {
+                            className: 'dynamic-bridge-wallet-card__network-icon',
+                        }), networkName && (jsxRuntime.jsx(Typography.Typography, { className: 'dynamic-bridge-wallet-card__network-name', variant: 'body_small', color: 'primary', weight: 'medium', as: 'span', copykey: 'dyn_bridge.widget.wallet_network', children: t('dyn_bridge.widget.wallet_network', {
+                            networkName,
+                        }) }))] }), children] }));
+};
 
 exports.DynamicBridgeWalletCard = DynamicBridgeWalletCard;

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

@@ -1,5 +1,6 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
+import { useTranslation } from 'react-i18next';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import '@dynamic-labs/utils';
 import '../../../../context/DynamicContext/DynamicContext.js';
@@ -24,7 +25,6 @@ import 'react-dom';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
-import 'react-i18next';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
@@ -56,9 +56,14 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
-const DynamicBridgeWalletCard = ({ className, networkIcon, networkName, children }) => (jsxs("div", { className: classNames('dynamic-bridge-wallet-card', className), children: [jsxs("div", { className: 'dynamic-bridge-wallet-card__network', children: [networkIcon &&
-                    React__default.cloneElement(networkIcon, {
-                        className: 'dynamic-bridge-wallet-card__network-icon',
-                    }), networkName && (jsxs(Typography, { className: 'dynamic-bridge-wallet-card__network-name', variant: 'body_small', color: 'primary', weight: 'medium', as: 'span', children: [networkName, " wallet"] }))] }), children] }));
+const DynamicBridgeWalletCard = ({ className, networkIcon, networkName, children }) => {
+    const { t } = useTranslation();
+    return (jsxs("div", { className: classNames('dynamic-bridge-wallet-card', className), children: [jsxs("div", { className: 'dynamic-bridge-wallet-card__network', children: [networkIcon &&
+                        React__default.cloneElement(networkIcon, {
+                            className: 'dynamic-bridge-wallet-card__network-icon',
+                        }), networkName && (jsx(Typography, { className: 'dynamic-bridge-wallet-card__network-name', variant: 'body_small', color: 'primary', weight: 'medium', as: 'span', copykey: 'dyn_bridge.widget.wallet_network', children: t('dyn_bridge.widget.wallet_network', {
+                            networkName,
+                        }) }))] }), children] }));
+};
 
 export { DynamicBridgeWalletCard };

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
 var walletBook = require('@dynamic-labs/wallet-book');
 require('react');
 require('@dynamic-labs/utils');
@@ -27,7 +28,6 @@ require('react-dom');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
-require('react-i18next');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
@@ -62,28 +62,29 @@ var WalletInformationCard = require('../../../../components/WalletInformationCar
 var useFetchNameService = require('../../../DynamicWidget/hooks/useFetchNameService/useFetchNameService.cjs');
 
 const DynamicBridgeWalletCardBody = ({ walletAddress, walletBalance, walletKey, onDisconnectClick }) => {
+    const { t } = reactI18next.useTranslation();
     const nameService = useFetchNameService.useFetchNameService(walletAddress);
     const options = [
         {
             Icon: null,
             callback: () => (nameService === null || nameService === void 0 ? void 0 : nameService.name) && navigator.clipboard.writeText(nameService === null || nameService === void 0 ? void 0 : nameService.name),
             hide: !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-            text: 'Copy ENS',
+            text: t('dyn_bridge.widget.copy.ens'),
         },
         {
             Icon: null,
             callback: () => walletAddress && navigator.clipboard.writeText(walletAddress),
             hide: !walletAddress,
-            text: 'Copy wallet address',
+            text: t('dyn_bridge.widget.copy.address'),
         },
         {
             Icon: null,
             callback: () => onDisconnectClick === null || onDisconnectClick === void 0 ? void 0 : onDisconnectClick(),
             hide: !onDisconnectClick,
-            text: 'Disconnect',
+            text: t('dyn_bridge.widget.disconnect'),
         },
     ];
-    return (jsxRuntime.jsx(WalletInformationCard.WalletInformationCard, { ens: nameService === null || nameService === void 0 ? void 0 : nameService.name, address: walletAddress, icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }), balance: walletBalance, menu: jsxRuntime.jsx(DotsMenu.DotsMenu, { options: options }) }));
+    return (jsxRuntime.jsx(WalletInformationCard.WalletInformationCard, { ens: nameService === null || nameService === void 0 ? void 0 : nameService.name, address: walletAddress, icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }), balance: walletBalance, menu: jsxRuntime.jsx(DotsMenu.DotsMenu, { options: options }), copykey: 'dyn_bridge.widget' }));
 };
 
 exports.DynamicBridgeWalletCardBody = DynamicBridgeWalletCardBody;

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

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
 import 'react';
 import '@dynamic-labs/utils';
@@ -23,7 +24,6 @@ import 'react-dom';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
-import 'react-i18next';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
@@ -58,28 +58,29 @@ import { WalletInformationCard } from '../../../../components/WalletInformationC
 import { useFetchNameService } from '../../../DynamicWidget/hooks/useFetchNameService/useFetchNameService.js';
 
 const DynamicBridgeWalletCardBody = ({ walletAddress, walletBalance, walletKey, onDisconnectClick }) => {
+    const { t } = useTranslation();
     const nameService = useFetchNameService(walletAddress);
     const options = [
         {
             Icon: null,
             callback: () => (nameService === null || nameService === void 0 ? void 0 : nameService.name) && navigator.clipboard.writeText(nameService === null || nameService === void 0 ? void 0 : nameService.name),
             hide: !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-            text: 'Copy ENS',
+            text: t('dyn_bridge.widget.copy.ens'),
         },
         {
             Icon: null,
             callback: () => walletAddress && navigator.clipboard.writeText(walletAddress),
             hide: !walletAddress,
-            text: 'Copy wallet address',
+            text: t('dyn_bridge.widget.copy.address'),
         },
         {
             Icon: null,
             callback: () => onDisconnectClick === null || onDisconnectClick === void 0 ? void 0 : onDisconnectClick(),
             hide: !onDisconnectClick,
-            text: 'Disconnect',
+            text: t('dyn_bridge.widget.disconnect'),
         },
     ];
-    return (jsx(WalletInformationCard, { ens: nameService === null || nameService === void 0 ? void 0 : nameService.name, address: walletAddress, icon: jsx(WalletIcon, { walletKey: walletKey }), balance: walletBalance, menu: jsx(DotsMenu, { options: options }) }));
+    return (jsx(WalletInformationCard, { ens: nameService === null || nameService === void 0 ? void 0 : nameService.name, address: walletAddress, icon: jsx(WalletIcon, { walletKey: walletKey }), balance: walletBalance, menu: jsx(DotsMenu, { options: options }), copykey: 'dyn_bridge.widget' }));
 };
 
 export { DynamicBridgeWalletCardBody };

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/sdk-api');
@@ -28,7 +29,6 @@ require('react-dom');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
-require('react-i18next');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
@@ -61,6 +61,7 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
 const DynamicBridgeWidgetEmptyCard = ({ chain }) => {
+    const { t } = reactI18next.useTranslation();
     const { bridgeChainsToConnect, setShowAuthFlow, setShowBridgeWidget } = useInternalDynamicContext.useInternalDynamicContext();
     if (!(bridgeChainsToConnect === null || bridgeChainsToConnect === void 0 ? void 0 : bridgeChainsToConnect.length) || !chain) {
         return null;
@@ -70,7 +71,9 @@ const DynamicBridgeWidgetEmptyCard = ({ chain }) => {
     return (jsxRuntime.jsxs("div", { role: 'button', className: 'dynamic-bridge-widget-empty-card', onClick: () => {
             setShowBridgeWidget(false);
             setShowAuthFlow(true);
-        }, children: [jsxRuntime.jsx(ChainIcon, { className: 'dynamic-bridge-widget-empty-card__icon' }), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'medium', as: 'span', color: 'primary', className: 'dynamic-bridge-widget-empty-card__text', children: ["Connect ", chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.blockchainName, " wallet"] })] }));
+        }, children: [jsxRuntime.jsx(ChainIcon, { className: 'dynamic-bridge-widget-empty-card__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'medium', as: 'span', color: 'primary', className: 'dynamic-bridge-widget-empty-card__text', copykey: 'dyn_bridge.widget.connect_with_network', children: t('dyn_bridge.widget.connect_with_network', {
+                    blockchainName: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.blockchainName,
+                }) })] }));
 };
 
 exports.DynamicBridgeWidgetEmptyCard = DynamicBridgeWidgetEmptyCard;

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

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/sdk-api';
@@ -24,7 +25,6 @@ import 'react-dom';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
-import 'react-i18next';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
@@ -57,6 +57,7 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
 const DynamicBridgeWidgetEmptyCard = ({ chain }) => {
+    const { t } = useTranslation();
     const { bridgeChainsToConnect, setShowAuthFlow, setShowBridgeWidget } = useInternalDynamicContext();
     if (!(bridgeChainsToConnect === null || bridgeChainsToConnect === void 0 ? void 0 : bridgeChainsToConnect.length) || !chain) {
         return null;
@@ -66,7 +67,9 @@ const DynamicBridgeWidgetEmptyCard = ({ chain }) => {
     return (jsxs("div", { role: 'button', className: 'dynamic-bridge-widget-empty-card', onClick: () => {
             setShowBridgeWidget(false);
             setShowAuthFlow(true);
-        }, children: [jsx(ChainIcon, { className: 'dynamic-bridge-widget-empty-card__icon' }), jsxs(Typography, { variant: 'body_normal', weight: 'medium', as: 'span', color: 'primary', className: 'dynamic-bridge-widget-empty-card__text', children: ["Connect ", chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.blockchainName, " wallet"] })] }));
+        }, children: [jsx(ChainIcon, { className: 'dynamic-bridge-widget-empty-card__icon' }), jsx(Typography, { variant: 'body_normal', weight: 'medium', as: 'span', color: 'primary', className: 'dynamic-bridge-widget-empty-card__text', copykey: 'dyn_bridge.widget.connect_with_network', children: t('dyn_bridge.widget.connect_with_network', {
+                    blockchainName: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.blockchainName,
+                }) })] }));
 };
 
 export { DynamicBridgeWidgetEmptyCard };