@dynamic-labs/sdk-react-core 1.1.0-alpha.4 → 1.1.0-alpha.5

package/CHANGELOG.md

@@ -1,4 +1,12 @@
 
+## [1.1.0-alpha.5](https://github.com/dynamic-labs/DynamicAuth/compare/v1.1.0-alpha.4...v1.1.0-alpha.5) (2023-12-21)
+
+
+### Features
+
+* add support for xverse wallet ([#4245](https://github.com/dynamic-labs/DynamicAuth/issues/4245)) ([7b68546](https://github.com/dynamic-labs/DynamicAuth/commit/7b6854684412007bcb33896555900936395176df))
+* **gvty-526:** add embedded reveal ([#4233](https://github.com/dynamic-labs/DynamicAuth/issues/4233)) ([c2d0f90](https://github.com/dynamic-labs/DynamicAuth/commit/c2d0f903f4a4646f86c71834540fd49d51a4a7ae))
+
 ## [1.1.0-alpha.4](https://github.com/dynamic-labs/DynamicAuth/compare/v1.1.0-alpha.3...v1.1.0-alpha.4) (2023-12-21)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.1.0-alpha.4";
+var version = "1.1.0-alpha.5";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.47",
 	"@dynamic-labs/sdk-api": "0.0.333",

package/package.js

@@ -1,4 +1,4 @@
-var version = "1.1.0-alpha.4";
+var version = "1.1.0-alpha.5";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.47",
 	"@dynamic-labs/sdk-api": "0.0.333",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "1.1.0-alpha.4",
+  "version": "1.1.0-alpha.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,15 +17,15 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "1.1.0-alpha.4",
-    "@dynamic-labs/logger": "1.1.0-alpha.4",
-    "@dynamic-labs/multi-wallet": "1.1.0-alpha.4",
-    "@dynamic-labs/rpc-providers": "1.1.0-alpha.4",
-    "@dynamic-labs/types": "1.1.0-alpha.4",
-    "@dynamic-labs/utils": "1.1.0-alpha.4",
-    "@dynamic-labs/viem-utils": "1.1.0-alpha.4",
-    "@dynamic-labs/wallet-book": "1.1.0-alpha.4",
-    "@dynamic-labs/wallet-connector-core": "1.1.0-alpha.4",
+    "@dynamic-labs/ethereum": "1.1.0-alpha.5",
+    "@dynamic-labs/logger": "1.1.0-alpha.5",
+    "@dynamic-labs/multi-wallet": "1.1.0-alpha.5",
+    "@dynamic-labs/rpc-providers": "1.1.0-alpha.5",
+    "@dynamic-labs/types": "1.1.0-alpha.5",
+    "@dynamic-labs/utils": "1.1.0-alpha.5",
+    "@dynamic-labs/viem-utils": "1.1.0-alpha.5",
+    "@dynamic-labs/wallet-book": "1.1.0-alpha.5",
+    "@dynamic-labs/wallet-connector-core": "1.1.0-alpha.5",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -70,6 +70,7 @@ var dynamicLogo = require('./lib/shared/assets/dynamic-logo.cjs');
 var embeddedWalletIcon = require('./lib/shared/assets/embedded-wallet-icon.cjs');
 var error = require('./lib/shared/assets/error.cjs');
 var externalLink = require('./lib/shared/assets/externalLink.cjs');
+var eyeOffIcon = require('./lib/shared/assets/eye-off-icon.cjs');
 var footerEyeIcon = require('./lib/shared/assets/footer-eye-icon.cjs');
 var footerGasIcon = require('./lib/shared/assets/footer-gas-icon.cjs');
 var footerInfoIcon = require('./lib/shared/assets/footer-info-icon.cjs');
@@ -109,6 +110,11 @@ var walletOutline = require('./lib/shared/assets/wallet-outline.cjs');
 var workSuitcase = require('./lib/shared/assets/work-suitcase.cjs');
 var circleLocker = require('./lib/shared/assets/circle-locker.cjs');
 var turnkey = require('./lib/shared/assets/turnkey.cjs');
+var lock = require('./lib/shared/assets/lock.cjs');
+var altEmbeddedWallet = require('./lib/shared/assets/alt-embedded-wallet.cjs');
+var faceId = require('./lib/shared/assets/face-id.cjs');
+var exportEmbeddedHero = require('./lib/shared/assets/export-embedded-hero.cjs');
+var walletV2 = require('./lib/shared/assets/wallet-v2.cjs');
 var index$2 = require('./lib/shared/consts/index.cjs');
 var logger = require('./lib/shared/logger.cjs');
 require('react-dom');
@@ -159,6 +165,7 @@ require('./lib/components/IconButton/IconButton.cjs');
 require('./lib/components/Alert/Alert.cjs');
 require('@dynamic-labs/viem-utils');
 require('./lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useEmbeddedReveal = require('./lib/utils/hooks/useEmbeddedReveal/useEmbeddedReveal.cjs');
 var DynamicConnectButton = require('./lib/components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('./lib/components/InlineWidget/InlineWidget.cjs');
 var IsBrowser = require('./lib/components/IsBrowser/IsBrowser.cjs');
@@ -250,6 +257,7 @@ exports.DynamicLogoIcon = dynamicLogo.ReactComponent;
 exports.EmbeddedWalletIcon = embeddedWalletIcon.ReactComponent;
 exports.ErrorIcon = error.ReactComponent;
 exports.ExternalLinkIcon = externalLink.ReactComponent;
+exports.EyeOffIcon = eyeOffIcon.ReactComponent;
 exports.EyeIcon = footerEyeIcon.ReactComponent;
 exports.GasIcon = footerGasIcon.ReactComponent;
 exports.InfoIcon = footerInfoIcon.ReactComponent;
@@ -289,6 +297,11 @@ exports.WalletOutlineIcon = walletOutline.ReactComponent;
 exports.WorkSuitcaseIcon = workSuitcase.ReactComponent;
 exports.CircleLockerIcon = circleLocker.ReactComponent;
 exports.TurnkeyIcon = turnkey.ReactComponent;
+exports.LockIcon = lock.ReactComponent;
+exports.AltEmbeddedWalletIcon = altEmbeddedWallet.ReactComponent;
+exports.FaceIdIcon = faceId.ReactComponent;
+exports.ExportEmbeddedHero = exportEmbeddedHero.ReactComponent;
+exports.WalletV2Icon = walletV2.ReactComponent;
 exports.authModalZIndex = index$2.authModalZIndex;
 exports.countryCodes = index$2.countryCodes;
 exports.defaultWalletsForChains = index$2.defaultWalletsForChains;
@@ -320,6 +333,7 @@ exports.useWalletItemActions = useWalletItemActions.useWalletItemActions;
 exports.ShadowDOM = ShadowDOM.ShadowDOM;
 exports.useEmailVerificationRequest = useEmailVerificationRequest.useEmailVerificationRequest;
 exports.DynamicWidgetContextProvider = DynamicWidgetContext.DynamicWidgetContextProvider;
+exports.useEmbeddedReveal = useEmbeddedReveal.useEmbeddedReveal;
 exports.DynamicConnectButton = DynamicConnectButton.DynamicConnectButton;
 exports.IsBrowser = IsBrowser.IsBrowser;
 exports.WalletList = WalletList.WalletList;

package/src/index.d.ts

@@ -24,7 +24,7 @@ export { classNames } from './lib/utils/functions/classNames';
 export { getNetwork } from './lib/utils/functions/getNetwork';
 export * from './lib/utils/functions/walletFilters';
 export { DynamicWidgetContextProvider } from './lib/widgets/DynamicWidget/context';
-export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, usePasskeyRecovery, useIsLoggedIn, } from './lib/utils/hooks';
+export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, usePasskeyRecovery, useEmbeddedReveal, useIsLoggedIn, } from './lib/utils/hooks';
 export { useUserUpdateRequest, useWalletConnectorEvent, } from './lib/utils/hooks';
 export { type VerifyEmailCallback, useEmailVerificationRequest, } from './lib/utils/hooks/authenticationHooks/';
 export type { UpdateUserFieldsArg } from './lib/utils/hooks/';

package/src/index.js

@@ -66,6 +66,7 @@ export { ReactComponent as DynamicLogoIcon } from './lib/shared/assets/dynamic-l
 export { ReactComponent as EmbeddedWalletIcon } from './lib/shared/assets/embedded-wallet-icon.js';
 export { ReactComponent as ErrorIcon } from './lib/shared/assets/error.js';
 export { ReactComponent as ExternalLinkIcon } from './lib/shared/assets/externalLink.js';
+export { ReactComponent as EyeOffIcon } from './lib/shared/assets/eye-off-icon.js';
 export { ReactComponent as EyeIcon } from './lib/shared/assets/footer-eye-icon.js';
 export { ReactComponent as GasIcon } from './lib/shared/assets/footer-gas-icon.js';
 export { ReactComponent as InfoIcon } from './lib/shared/assets/footer-info-icon.js';
@@ -105,6 +106,11 @@ export { ReactComponent as WalletOutlineIcon } from './lib/shared/assets/wallet-
 export { ReactComponent as WorkSuitcaseIcon } from './lib/shared/assets/work-suitcase.js';
 export { ReactComponent as CircleLockerIcon } from './lib/shared/assets/circle-locker.js';
 export { ReactComponent as TurnkeyIcon } from './lib/shared/assets/turnkey.js';
+export { ReactComponent as LockIcon } from './lib/shared/assets/lock.js';
+export { ReactComponent as AltEmbeddedWalletIcon } from './lib/shared/assets/alt-embedded-wallet.js';
+export { ReactComponent as FaceIdIcon } from './lib/shared/assets/face-id.js';
+export { ReactComponent as ExportEmbeddedHero } from './lib/shared/assets/export-embedded-hero.js';
+export { ReactComponent as WalletV2Icon } from './lib/shared/assets/wallet-v2.js';
 export { authModalZIndex, countryCodes, defaultWalletsForChains, tShirtSizes, teamNames, toolkitZIndex, tooltipZIndex, widgetModalZIndex } from './lib/shared/consts/index.js';
 export { logger } from './lib/shared/logger.js';
 import 'react-dom';
@@ -155,6 +161,7 @@ import './lib/components/IconButton/IconButton.js';
 import './lib/components/Alert/Alert.js';
 import '@dynamic-labs/viem-utils';
 import './lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+export { useEmbeddedReveal } from './lib/utils/hooks/useEmbeddedReveal/useEmbeddedReveal.js';
 export { DynamicConnectButton } from './lib/components/DynamicConnectButton/DynamicConnectButton.js';
 import './lib/components/InlineWidget/InlineWidget.js';
 export { IsBrowser } from './lib/components/IsBrowser/IsBrowser.js';

package/src/lib/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './Alert';
 export * from './AnimatePresence';
 export * from './AppOriginTile';
+export * from './Badge';
 export * from './Button';
 export * from './Checkbox';
 export * from './Chip';

package/src/lib/context/ViewContext/ViewContext.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
-export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-wallet-only' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'multi-wallet-wallet-list' | 'wallet-sign' | 'wallet-used' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists' | 'merge-user-accounts' | 'wallet-cannot-be-transferred' | 'passkey-intro' | 'passkey-recovery-start' | 'passkey-recovery-bundle' | 'passkey-recovery-complete';
+export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-wallet-only' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'multi-wallet-wallet-list' | 'wallet-sign' | 'wallet-used' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists' | 'merge-user-accounts' | 'wallet-cannot-be-transferred' | 'passkey-intro' | 'passkey-recovery-start' | 'passkey-recovery-bundle' | 'passkey-recovery-complete' | 'embedded-reveal-view';
 export type ViewContextProps = {
     setView: Dispatch<SetStateAction<ViewType>>;
     view: ViewType;

package/src/lib/data/api.cjs

@@ -517,11 +517,26 @@ const getUserPasskeys = ({ userJwt, environmentId, }) => _tslib.__awaiter(void 0
         };
     }
 });
+const exportEmbeddedWallet = ({ userJwt, environmentId, walletId, activityId, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const data = yield sdkApi(userJwt).embeddedWalletExport({
+            activityId,
+            environmentId,
+            walletId,
+        });
+        return data;
+    }
+    catch (e) {
+        logger.logger.error(e);
+        return { exportBundle: '' };
+    }
+});
 
 exports.completePasskeyRecovery = completePasskeyRecovery;
 exports.createEmailVerification = createEmailVerification;
 exports.createTurnkeyEvmEmbeddedWallet = createTurnkeyEvmEmbeddedWallet;
 exports.createVisit = createVisit;
+exports.exportEmbeddedWallet = exportEmbeddedWallet;
 exports.fetchNonce = fetchNonce;
 exports.fetchProjectSettings = fetchProjectSettings;
 exports.getEmailProvider = getEmailProvider;

package/src/lib/data/api.d.ts

@@ -1,4 +1,4 @@
-import { ProjectSettings, UserFields, ChainEnum, UpdateSelfResponse, WalletProviderEnum, AuthModeEnum, EmailVerificationCreateResponse, VerifyResponse, OauthRequest, OauthResultRequest, ProviderEnum, OnrampConfiguration, EmailProviderResponse, OauthResultResponse, PasskeyRegistrationCredential } from '@dynamic-labs/sdk-api';
+import { ProjectSettings, UserFields, ChainEnum, UpdateSelfResponse, WalletProviderEnum, AuthModeEnum, EmailVerificationCreateResponse, VerifyResponse, OauthRequest, OauthResultRequest, ProviderEnum, OnrampConfiguration, EmailProviderResponse, OauthResultResponse, PasskeyRegistrationCredential, ExportEmbeddedWalletResponse } from '@dynamic-labs/sdk-api';
 import { AuthModeType, VerifyWallet } from '../shared/types';
 export declare const fetchNonce: (environmentId: string) => Promise<string | undefined>;
 export declare const getEmailProvider: ({ email, environmentId, }: {
@@ -99,3 +99,9 @@ export type GetUserPasskeysProps = {
     environmentId: string;
 };
 export declare const getUserPasskeys: ({ userJwt, environmentId, }: GetUserPasskeysProps) => Promise<import("@dynamic-labs/sdk-api").GetUserPasskeysResponse>;
+export declare const exportEmbeddedWallet: ({ userJwt, environmentId, walletId, activityId, }: {
+    userJwt: string;
+    environmentId: string;
+    walletId: string;
+    activityId: string;
+}) => Promise<ExportEmbeddedWalletResponse>;

package/src/lib/data/api.js

@@ -513,5 +513,19 @@ const getUserPasskeys = ({ userJwt, environmentId, }) => __awaiter(void 0, void
         };
     }
 });
+const exportEmbeddedWallet = ({ userJwt, environmentId, walletId, activityId, }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const data = yield sdkApi(userJwt).embeddedWalletExport({
+            activityId,
+            environmentId,
+            walletId,
+        });
+        return data;
+    }
+    catch (e) {
+        logger.error(e);
+        return { exportBundle: '' };
+    }
+});
 
-export { completePasskeyRecovery, createEmailVerification, createTurnkeyEvmEmbeddedWallet, createVisit, fetchNonce, fetchProjectSettings, getEmailProvider, getOAuthResult, getOnrampProviders, getUserPasskeys, initPasskeyRecovery, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, mergeUserAccounts, retryEmailVerification, revokeSession, sendDynamicProps, signInOAuth, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };
+export { completePasskeyRecovery, createEmailVerification, createTurnkeyEvmEmbeddedWallet, createVisit, exportEmbeddedWallet, fetchNonce, fetchProjectSettings, getEmailProvider, getOAuthResult, getOnrampProviders, getUserPasskeys, initPasskeyRecovery, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, mergeUserAccounts, retryEmailVerification, revokeSession, sendDynamicProps, signInOAuth, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };

package/src/lib/events/dynamicEvents.d.ts

@@ -7,6 +7,8 @@ export type DynamicEvents = {
     embeddedWalletFailed: (error: unknown) => void;
     passkeyRecoveryCompleted: (wallet: Wallet) => void;
     passkeyRecoveryFailed: (error: unknown) => void;
+    embeddedWalletRevealCompleted: (wallet: Wallet) => void;
+    embeddedWalletRevealFailed: (error: unknown) => void;
     logout: () => void;
 };
 export declare const dynamicEvents: EventEmitter<DynamicEvents, any>;

package/src/lib/layout/DynamicUserProfileLayout/DynamicUserProfileLayout.cjs

@@ -63,6 +63,7 @@ var OverlayCardTarget = require('../../components/OverlayCard/OverlayCardTarget.
 const shouldNotRenderHeaderViews = [
     ...DynamicWidgetContext_types.DynamicPasskeyWidgetViews,
     ...DynamicWidgetContext_types.DynamicTransactionsWidgetViews,
+    ...DynamicWidgetContext_types.DynamicWalletSettingsViews,
 ];
 const DynamicUserProfileLayout = ({ variant, className, style, }) => {
     const { dynamicWidgetView } = DynamicWidgetContext.useWidgetContext();

package/src/lib/layout/DynamicUserProfileLayout/DynamicUserProfileLayout.js

@@ -51,7 +51,7 @@ import { MemoizedDynamicWidgetHeader } from '../../widgets/DynamicWidget/compone
 import { DynamicWidgetPrompts } from '../../widgets/DynamicWidget/components/DynamicWidgetPrompts/DynamicWidgetPrompts.js';
 import { DynamicWidgetViews } from '../../widgets/DynamicWidget/components/DynamicWidgetViews/DynamicWidgetViews.js';
 import { useWidgetContext } from '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
-import { DynamicPasskeyWidgetViews, DynamicTransactionsWidgetViews } from '../../widgets/DynamicWidget/context/DynamicWidgetContext.types.js';
+import { DynamicPasskeyWidgetViews, DynamicTransactionsWidgetViews, DynamicWalletSettingsViews } from '../../widgets/DynamicWidget/context/DynamicWidgetContext.types.js';
 import '@dynamic-labs/viem-utils';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import { OverlayCardTarget } from '../../components/OverlayCard/OverlayCardTarget.js';
@@ -59,6 +59,7 @@ import { OverlayCardTarget } from '../../components/OverlayCard/OverlayCardTarge
 const shouldNotRenderHeaderViews = [
     ...DynamicPasskeyWidgetViews,
     ...DynamicTransactionsWidgetViews,
+    ...DynamicWalletSettingsViews,
 ];
 const DynamicUserProfileLayout = ({ variant, className, style, }) => {
     const { dynamicWidgetView } = useWidgetContext();

package/src/lib/locale/en/translation.cjs

@@ -363,7 +363,7 @@ const translation = {
       }
      */
     dyn_manage_passkeys: {
-        title: 'My passkeys',
+        title: 'Manage passkeys',
         passkey_from: 'from',
         passkey_providers: {
             android: 'Android Phone',
@@ -377,6 +377,76 @@ const translation = {
         },
         recovery_button: 'Set up new passkey',
     },
+    /**
+     * @description export keys for Dynamic embedded reveal view
+     * @default
+     * {
+        title: 'Export wallet',
+        agreement_title: 'Agree to continue',
+        private_key_title: 'Private key',
+        recovery_phrase_title: 'Secret recovery phrase',
+        description:
+          'Your wallet is non-custodial, meaning you are always in control of it.',
+        statement_1: {
+          title: 'Do not publicly share your {{keyType}}',
+          description: 'Your {{keyType}} controls your account and assets.',
+        },
+        checkbox_label:
+          'I am responsible for safeguarding and using my wallet key information.',
+        reveal_description: 'Make sure to safely back up this information',
+        reveal_button_label: 'Reveal',
+        copy_button_label: 'Copy to clipboard',
+        done_button_label: "I'm Done",
+      },
+     */
+    dyn_embedded_reveal: {
+        title: 'Export wallet',
+        agreement_title: 'Agree to continue',
+        private_key_title: 'Private key',
+        recovery_phrase_title: 'Secret recovery phrase',
+        badge_label: 'Sensitive information',
+        statement_1: {
+            title: 'Your wallet is non-custodial',
+            description: 'You are always in control of it.',
+        },
+        statement_2: {
+            title: 'Do not publicly share your wallet key',
+            description: 'Your recovery phrase controls your account and assets.',
+        },
+        checkbox_label: 'I am responsible for safeguarding and using my wallet key information.',
+        reveal_description: 'Make sure to safely back up this information',
+        reveal_button_label: 'Reveal',
+        copy_button_label: 'Copy to clipboard',
+        done_button_label: "I'm Done",
+    },
+    /**
+     * @description wallet settings for Dynamic wallet settings view which are used inside dynamic widget
+     * @default
+     * {
+        title: 'Wallet settings',
+        signing_section: {
+          title: 'Security & Signing Methods',
+          passkey_button: 'Passkeys',
+        },
+        export_section: {
+          title: 'Export & Backup',
+          srp_button: 'Recovery phrase',
+          private_key_button: 'Private key',
+        },
+      }
+     */
+    dyn_wallet_settings: {
+        title: 'Wallet settings',
+        signing_section: {
+            title: 'Security & Signing Methods',
+            passkey_button: 'Passkeys',
+        },
+        export_section: {
+            title: 'Export & Backup',
+            srp_button: 'Recovery phrase',
+            private_key_button: 'Private key',
+        },
+    },
     /**
      * @description copy keys for merge user accounts view
      * @default

package/src/lib/locale/en/translation.d.ts

@@ -372,6 +372,76 @@ export declare const translation: {
         };
         recovery_button: string;
     };
+    /**
+     * @description export keys for Dynamic embedded reveal view
+     * @default
+     * {
+        title: 'Export wallet',
+        agreement_title: 'Agree to continue',
+        private_key_title: 'Private key',
+        recovery_phrase_title: 'Secret recovery phrase',
+        description:
+          'Your wallet is non-custodial, meaning you are always in control of it.',
+        statement_1: {
+          title: 'Do not publicly share your {{keyType}}',
+          description: 'Your {{keyType}} controls your account and assets.',
+        },
+        checkbox_label:
+          'I am responsible for safeguarding and using my wallet key information.',
+        reveal_description: 'Make sure to safely back up this information',
+        reveal_button_label: 'Reveal',
+        copy_button_label: 'Copy to clipboard',
+        done_button_label: "I'm Done",
+      },
+     */
+    dyn_embedded_reveal: {
+        title: string;
+        agreement_title: string;
+        private_key_title: string;
+        recovery_phrase_title: string;
+        badge_label: string;
+        statement_1: {
+            title: string;
+            description: string;
+        };
+        statement_2: {
+            title: string;
+            description: string;
+        };
+        checkbox_label: string;
+        reveal_description: string;
+        reveal_button_label: string;
+        copy_button_label: string;
+        done_button_label: string;
+    };
+    /**
+     * @description wallet settings for Dynamic wallet settings view which are used inside dynamic widget
+     * @default
+     * {
+        title: 'Wallet settings',
+        signing_section: {
+          title: 'Security & Signing Methods',
+          passkey_button: 'Passkeys',
+        },
+        export_section: {
+          title: 'Export & Backup',
+          srp_button: 'Recovery phrase',
+          private_key_button: 'Private key',
+        },
+      }
+     */
+    dyn_wallet_settings: {
+        title: string;
+        signing_section: {
+            title: string;
+            passkey_button: string;
+        };
+        export_section: {
+            title: string;
+            srp_button: string;
+            private_key_button: string;
+        };
+    };
     /**
      * @description copy keys for merge user accounts view
      * @default

package/src/lib/locale/en/translation.js

@@ -359,7 +359,7 @@ const translation = {
       }
      */
     dyn_manage_passkeys: {
-        title: 'My passkeys',
+        title: 'Manage passkeys',
         passkey_from: 'from',
         passkey_providers: {
             android: 'Android Phone',
@@ -373,6 +373,76 @@ const translation = {
         },
         recovery_button: 'Set up new passkey',
     },
+    /**
+     * @description export keys for Dynamic embedded reveal view
+     * @default
+     * {
+        title: 'Export wallet',
+        agreement_title: 'Agree to continue',
+        private_key_title: 'Private key',
+        recovery_phrase_title: 'Secret recovery phrase',
+        description:
+          'Your wallet is non-custodial, meaning you are always in control of it.',
+        statement_1: {
+          title: 'Do not publicly share your {{keyType}}',
+          description: 'Your {{keyType}} controls your account and assets.',
+        },
+        checkbox_label:
+          'I am responsible for safeguarding and using my wallet key information.',
+        reveal_description: 'Make sure to safely back up this information',
+        reveal_button_label: 'Reveal',
+        copy_button_label: 'Copy to clipboard',
+        done_button_label: "I'm Done",
+      },
+     */
+    dyn_embedded_reveal: {
+        title: 'Export wallet',
+        agreement_title: 'Agree to continue',
+        private_key_title: 'Private key',
+        recovery_phrase_title: 'Secret recovery phrase',
+        badge_label: 'Sensitive information',
+        statement_1: {
+            title: 'Your wallet is non-custodial',
+            description: 'You are always in control of it.',
+        },
+        statement_2: {
+            title: 'Do not publicly share your wallet key',
+            description: 'Your recovery phrase controls your account and assets.',
+        },
+        checkbox_label: 'I am responsible for safeguarding and using my wallet key information.',
+        reveal_description: 'Make sure to safely back up this information',
+        reveal_button_label: 'Reveal',
+        copy_button_label: 'Copy to clipboard',
+        done_button_label: "I'm Done",
+    },
+    /**
+     * @description wallet settings for Dynamic wallet settings view which are used inside dynamic widget
+     * @default
+     * {
+        title: 'Wallet settings',
+        signing_section: {
+          title: 'Security & Signing Methods',
+          passkey_button: 'Passkeys',
+        },
+        export_section: {
+          title: 'Export & Backup',
+          srp_button: 'Recovery phrase',
+          private_key_button: 'Private key',
+        },
+      }
+     */
+    dyn_wallet_settings: {
+        title: 'Wallet settings',
+        signing_section: {
+            title: 'Security & Signing Methods',
+            passkey_button: 'Passkeys',
+        },
+        export_section: {
+            title: 'Export & Backup',
+            srp_button: 'Recovery phrase',
+            private_key_button: 'Private key',
+        },
+    },
     /**
      * @description copy keys for merge user accounts view
      * @default

package/src/lib/shared/assets/alt-embedded-wallet.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgAltEmbeddedWallet = function SvgAltEmbeddedWallet(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 28,
+    height: 28,
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.834 4.667a2.333 2.333 0 0 0-2.333-2.334H7a4.668 4.668 0 0 0-4.592 3.83 4.654 4.654 0 0 1 3.425-1.496h14ZM21 7a4.667 4.667 0 0 1 4.667 4.667V21A4.667 4.667 0 0 1 21 25.667H7A4.667 4.667 0 0 1 2.333 21v-9.333A4.667 4.667 0 0 1 7 7h14Zm-5.281 3.35a.506.506 0 0 0-.47-.35.506.506 0 0 0-.47.35l-.593 1.671c-.152.426-.2.549-.264.648-.065.1-.146.186-.237.257-.092.07-.205.122-.598.286l-1.543.643a.546.546 0 0 0-.323.509c0 .225.128.428.323.509l1.543.643c.393.163.506.215.598.285.091.071.172.158.237.257.065.1.112.222.264.648l.593 1.672c.075.21.262.35.47.35a.506.506 0 0 0 .47-.35l.593-1.672c.152-.426.2-.549.264-.648.065-.1.145-.186.237-.257.092-.07.205-.122.598-.286l1.543-.642a.546.546 0 0 0 .323-.51.546.546 0 0 0-.323-.508l-1.543-.643c-.393-.164-.506-.216-.598-.286a1.054 1.054 0 0 1-.237-.257c-.065-.1-.112-.222-.264-.648l-.593-1.671Zm-4.3 5.951a.501.501 0 0 0-.45-.301.5.5 0 0 0-.45.301l-.395.856c-.142.308-.186.397-.238.471-.053.074-.115.14-.183.198-.068.057-.15.104-.435.258l-.79.428A.552.552 0 0 0 8.2 19c0 .206.108.395.278.488l.79.428c.285.154.367.2.435.258.068.057.13.123.183.198.052.074.096.163.238.47l.395.856a.5.5 0 0 0 .45.302c.191 0 .365-.117.45-.302l.396-.855c.142-.308.185-.397.238-.471.053-.075.114-.141.183-.198.068-.057.15-.104.434-.258l.79-.428a.552.552 0 0 0 .278-.488.552.552 0 0 0-.278-.488l-.79-.428c-.284-.154-.366-.2-.434-.258a1.05 1.05 0 0 1-.183-.198c-.053-.074-.096-.163-.238-.47l-.395-.857Z",
+    fill: "#383C48",
+    fillOpacity: 0.4
+  })));
+};
+
+exports.ReactComponent = SvgAltEmbeddedWallet;

package/src/lib/shared/assets/alt-embedded-wallet.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgAltEmbeddedWallet = function SvgAltEmbeddedWallet(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 28,
+    height: 28,
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.834 4.667a2.333 2.333 0 0 0-2.333-2.334H7a4.668 4.668 0 0 0-4.592 3.83 4.654 4.654 0 0 1 3.425-1.496h14ZM21 7a4.667 4.667 0 0 1 4.667 4.667V21A4.667 4.667 0 0 1 21 25.667H7A4.667 4.667 0 0 1 2.333 21v-9.333A4.667 4.667 0 0 1 7 7h14Zm-5.281 3.35a.506.506 0 0 0-.47-.35.506.506 0 0 0-.47.35l-.593 1.671c-.152.426-.2.549-.264.648-.065.1-.146.186-.237.257-.092.07-.205.122-.598.286l-1.543.643a.546.546 0 0 0-.323.509c0 .225.128.428.323.509l1.543.643c.393.163.506.215.598.285.091.071.172.158.237.257.065.1.112.222.264.648l.593 1.672c.075.21.262.35.47.35a.506.506 0 0 0 .47-.35l.593-1.672c.152-.426.2-.549.264-.648.065-.1.145-.186.237-.257.092-.07.205-.122.598-.286l1.543-.642a.546.546 0 0 0 .323-.51.546.546 0 0 0-.323-.508l-1.543-.643c-.393-.164-.506-.216-.598-.286a1.054 1.054 0 0 1-.237-.257c-.065-.1-.112-.222-.264-.648l-.593-1.671Zm-4.3 5.951a.501.501 0 0 0-.45-.301.5.5 0 0 0-.45.301l-.395.856c-.142.308-.186.397-.238.471-.053.074-.115.14-.183.198-.068.057-.15.104-.435.258l-.79.428A.552.552 0 0 0 8.2 19c0 .206.108.395.278.488l.79.428c.285.154.367.2.435.258.068.057.13.123.183.198.052.074.096.163.238.47l.395.856a.5.5 0 0 0 .45.302c.191 0 .365-.117.45-.302l.396-.855c.142-.308.185-.397.238-.471.053-.075.114-.141.183-.198.068-.057.15-.104.434-.258l.79-.428a.552.552 0 0 0 .278-.488.552.552 0 0 0-.278-.488l-.79-.428c-.284-.154-.366-.2-.434-.258a1.05 1.05 0 0 1-.183-.198c-.053-.074-.096-.163-.238-.47l-.395-.857Z",
+    fill: "#383C48",
+    fillOpacity: 0.4
+  })));
+};
+
+export { SvgAltEmbeddedWallet as ReactComponent };