@dynamic-labs/sdk-react-core 1.1.0-alpha.6 → 1.1.0-alpha.8

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var bitcoin = require('@dynamic-labs/bitcoin');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('../../../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
@@ -17,7 +18,6 @@ require('@dynamic-labs/sdk-api');
 var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-book');
-var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
@@ -57,7 +57,6 @@ require('qrcode');
 var AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProviderIcon.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
-var DotsMenu = require('../DotsMenu/DotsMenu.cjs');
 require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
 require('../../../../components/IconButton/IconButton.cjs');
@@ -71,6 +70,8 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var NetworkPicker = require('../../../../components/NetworkPicker/NetworkPicker.cjs');
 var useFetchNameService = require('../../hooks/useFetchNameService/useFetchNameService.cjs');
 var Balance = require('../Balance/Balance.cjs');
+var ActiveBitcoinWalletAddresses = require('./ActiveBitcoinWalletAddresses/ActiveBitcoinWalletAddresses.cjs');
+var ActiveWalletAddress = require('./ActiveWalletAddress/ActiveWalletAddress.cjs');
 
 const ICON_SIZE = 28;
 const ActiveWalletInformation = () => {
@@ -86,6 +87,7 @@ const ActiveWalletInformation = () => {
     const wallet = isAccountAbstractionWallet.isAccountAbstractionWallet(primaryWallet)
         ? createOwnerWallet.createOwnerWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [])
         : primaryWallet;
+    const isBitcoin = primaryWallet && bitcoin.isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
     const options = [
         {
             Icon: null,
@@ -123,9 +125,9 @@ const ActiveWalletInformation = () => {
         (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
         [];
     const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
-    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('active-wallet-information__actions-container', {
-                                            'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsx("div", { className: classNames.classNames('active-wallet-information__addresses-container', {
+                                            'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+                                        }), children: isBitcoin ? (jsxRuntime.jsx(ActiveBitcoinWalletAddresses.ActiveBitcoinWalletAddresses, { bitcoinConnector: primaryWallet.connector, menuOption: options })) : (jsxRuntime.jsx(ActiveWalletAddress.ActiveWalletAddreess, { address: address, nameServiceName: nameService === null || nameService === void 0 ? void 0 : nameService.name, menuOption: options })) }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 exports.ActiveWalletInformation = ActiveWalletInformation;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';
+import { isBitcoinConnector } from '@dynamic-labs/bitcoin';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import '../../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
@@ -13,7 +14,6 @@ import '@dynamic-labs/sdk-api';
 import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-book';
-import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
@@ -53,7 +53,6 @@ import 'qrcode';
 import { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthProviderIcon.js';
 import { getExportKeysOption } from '../../helpers/helpers.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
-import { DotsMenu } from '../DotsMenu/DotsMenu.js';
 import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
 import '../../../../components/IconButton/IconButton.js';
@@ -67,6 +66,8 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { NetworkPicker } from '../../../../components/NetworkPicker/NetworkPicker.js';
 import { useFetchNameService } from '../../hooks/useFetchNameService/useFetchNameService.js';
 import { Balance } from '../Balance/Balance.js';
+import { ActiveBitcoinWalletAddresses } from './ActiveBitcoinWalletAddresses/ActiveBitcoinWalletAddresses.js';
+import { ActiveWalletAddreess } from './ActiveWalletAddress/ActiveWalletAddress.js';
 
 const ICON_SIZE = 28;
 const ActiveWalletInformation = () => {
@@ -82,6 +83,7 @@ const ActiveWalletInformation = () => {
     const wallet = isAccountAbstractionWallet(primaryWallet)
         ? createOwnerWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [])
         : primaryWallet;
+    const isBitcoin = primaryWallet && isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
     const options = [
         {
             Icon: null,
@@ -119,9 +121,9 @@ const ActiveWalletInformation = () => {
         (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
         [];
     const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
-    return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsxs("div", { className: classNames('active-wallet-information__actions-container', {
-                                            'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+    return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsx("div", { className: classNames('active-wallet-information__addresses-container', {
+                                            'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+                                        }), children: isBitcoin ? (jsx(ActiveBitcoinWalletAddresses, { bitcoinConnector: primaryWallet.connector, menuOption: options })) : (jsx(ActiveWalletAddreess, { address: address, nameServiceName: nameService === null || nameService === void 0 ? void 0 : nameService.name, menuOption: options })) }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 export { ActiveWalletInformation };

package/src/lib/widgets/DynamicWidget/views/WalletSettingsView/WalletSettingsView.cjs

@@ -19,6 +19,7 @@ var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var lock = require('../../../../shared/assets/lock.cjs');
 var altEmbeddedWallet = require('../../../../shared/assets/alt-embedded-wallet.cjs');
 var faceId = require('../../../../shared/assets/face-id.cjs');
+var altKey = require('../../../../shared/assets/alt-key.cjs');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
@@ -32,7 +33,7 @@ require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../config/ApiEndpoint.cjs');
 require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 require('react-dom');
-require('../../../../context/ThemeContext/ThemeContext.cjs');
+var ThemeContext = require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
 require('../../../../context/MockContext/MockContext.cjs');
@@ -76,18 +77,19 @@ const WalletSettingsView = () => {
     const { authToken } = useInternalDynamicContext.useInternalDynamicContext();
     const { initExportProcess } = useEmbeddedReveal.useEmbeddedReveal();
     const { isTurnkeyWallet, isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
+    const { theme } = ThemeContext.useThemeContext();
     const { t } = reactI18next.useTranslation();
     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 backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'wallet-settings-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'wallet-settings-view__header', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: t('dyn_wallet_settings.title') }) }) }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body', children: [jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
+    return (jsxRuntime.jsxs("div", { className: 'wallet-settings-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'wallet-settings-view__header', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_wallet_settings.title', children: t('dyn_wallet_settings.title') }) }) }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body', children: [jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(faceId.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(checkCircle.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'embedded-reveal-button', onClick: initExportProcess, buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(faceId.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.signing_section.passkey_button', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(checkCircle.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'embedded-reveal-account-button', onClick: () => initExportProcess(), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(altEmbeddedWallet.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', children: isTurnkeyHDWallet
-                                                ? t('dyn_wallet_settings.export_section.srp_button')
-                                                : t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsxRuntime.jsx(lock.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false })] })] })] }));
+                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(altKey.ReactComponent, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.private_key_button', children: t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsxRuntime.jsx(lock.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }), isTurnkeyHDWallet && (jsxRuntime.jsx(Button.Button, { dataTestId: 'embedded-reveal-button', onClick: () => initExportProcess(true), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(altEmbeddedWallet.ReactComponent, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.srp_button', children: t('dyn_wallet_settings.export_section.srp_button') })] }), endSlot: !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsxRuntime.jsx(lock.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }))] })] })] }));
 };
 
 exports.WalletSettingsView = WalletSettingsView;

package/src/lib/widgets/DynamicWidget/views/WalletSettingsView/WalletSettingsView.js

@@ -15,6 +15,7 @@ import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chev
 import { ReactComponent as SvgLock } from '../../../../shared/assets/lock.js';
 import { ReactComponent as SvgAltEmbeddedWallet } from '../../../../shared/assets/alt-embedded-wallet.js';
 import { ReactComponent as SvgFaceId } from '../../../../shared/assets/face-id.js';
+import { ReactComponent as SvgAltKey } from '../../../../shared/assets/alt-key.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
@@ -28,7 +29,7 @@ import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../config/ApiEndpoint.js';
 import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
 import 'react-dom';
-import '../../../../context/ThemeContext/ThemeContext.js';
+import { useThemeContext } from '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
 import '../../../../context/MockContext/MockContext.js';
@@ -72,18 +73,19 @@ const WalletSettingsView = () => {
     const { authToken } = useInternalDynamicContext();
     const { initExportProcess } = useEmbeddedReveal();
     const { isTurnkeyWallet, isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
+    const { theme } = useThemeContext();
     const { t } = useTranslation();
     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 backButton = (jsx(IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs("div", { className: 'wallet-settings-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'wallet-settings-view__header', children: jsx(Typography, { variant: 'title', color: 'primary', children: t('dyn_wallet_settings.title') }) }) }), jsxs("div", { className: 'wallet-settings-view__body', children: [jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsx(Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
+    return (jsxs("div", { className: 'wallet-settings-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'wallet-settings-view__header', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_wallet_settings.title', children: t('dyn_wallet_settings.title') }) }) }), jsxs("div", { className: 'wallet-settings-view__body', children: [jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsx(Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgFaceId, { className: 'wallet-settings-view__body__section__button__icon' }), jsx(Typography, { weight: 'medium', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgCheckCircle, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsx(Button, { dataTestId: 'embedded-reveal-button', onClick: initExportProcess, buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgFaceId, { className: 'wallet-settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.signing_section.passkey_button', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgCheckCircle, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsx(Button, { dataTestId: 'embedded-reveal-account-button', onClick: () => initExportProcess(), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgAltEmbeddedWallet, { className: 'wallet-settings-view__body__section__button__icon' }), jsx(Typography, { weight: 'medium', children: isTurnkeyHDWallet
-                                                ? t('dyn_wallet_settings.export_section.srp_button')
-                                                : t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgChevronLeft, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsx(SvgLock, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false })] })] })] }));
+                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgAltKey, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.private_key_button', children: t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgChevronLeft, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsx(SvgLock, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }), isTurnkeyHDWallet && (jsx(Button, { dataTestId: 'embedded-reveal-button', onClick: () => initExportProcess(true), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgAltEmbeddedWallet, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.srp_button', children: t('dyn_wallet_settings.export_section.srp_button') })] }), endSlot: !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgChevronLeft, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsx(SvgLock, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }))] })] })] }));
 };
 
 export { WalletSettingsView };

package/src/lib/widgets/DynamicWidget/views/WalletsView/WalletsView.cjs

@@ -68,12 +68,12 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const WalletsView = () => {
-    const { setShowAuthFlow, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowLinkNewWalletModal, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const isKYCEnabled = useKYCFlag.useKYCFlag();
     const { setView } = ViewContext.useViewContext();
     const addNewWallet = () => {
         setView('multi-wallet-wallet-list');
-        setShowAuthFlow(true);
+        setShowLinkNewWalletModal(true);
         setSelectedWalletConnectorKey(null);
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiWallet && !isKYCEnabled && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-index-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { children: user === null || user === void 0 ? void 0 : user.email }), jsxRuntime.jsx(SingleWalletButtons.SingleWalletButtons, {})] })), multiWallet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DynamicWidgetWallets.DynamicWidgetWallets, {}), jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: jsxRuntime.jsxs("div", { className: 'dynamic-widget-index-view__footer', children: [jsxRuntime.jsxs(Button.Button, { buttonClassName: 'dynamic-widget-footer__button', buttonVariant: 'tertiary', buttonPadding: 'none', onClick: addNewWallet, typographyProps: {

package/src/lib/widgets/DynamicWidget/views/WalletsView/WalletsView.js

@@ -64,12 +64,12 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const WalletsView = () => {
-    const { setShowAuthFlow, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext();
+    const { setShowLinkNewWalletModal, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext();
     const isKYCEnabled = useKYCFlag();
     const { setView } = useViewContext();
     const addNewWallet = () => {
         setView('multi-wallet-wallet-list');
-        setShowAuthFlow(true);
+        setShowLinkNewWalletModal(true);
         setSelectedWalletConnectorKey(null);
     };
     return (jsxs(Fragment, { children: [!multiWallet && !isKYCEnabled && (jsxs("div", { className: 'dynamic-widget-index-view__email-container', children: [jsx(Typography, { children: user === null || user === void 0 ? void 0 : user.email }), jsx(SingleWalletButtons, {})] })), multiWallet && (jsxs(Fragment, { children: [jsx(DynamicWidgetWallets, {}), jsx(DynamicWidgetFooter, { children: jsxs("div", { className: 'dynamic-widget-index-view__footer', children: [jsxs(Button, { buttonClassName: 'dynamic-widget-footer__button', buttonVariant: 'tertiary', buttonPadding: 'none', onClick: addNewWallet, typographyProps: {