@dynamic-labs/legacy-embedded-wallet-migration 0.0.0 → 5.0.0-rc.2

package/src/lib/ui/LegacyWalletMigrationModal/LegacyWalletMigrationModal.js

@@ -0,0 +1,51 @@
+'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Portal, Modal, ModalCard } from '@dynamic-labs/sdk-react-core/components';
+import { logger } from '@dynamic-labs/wallet-connector-core';
+import { AccountUpgradedView } from '../AccountUpgradedView/AccountUpgradedView.js';
+import { useLegacyWalletMigrationRecovery } from '../LegacyWalletMigrationRecoveryContext/LegacyWalletMigrationRecoveryContext.js';
+import { LegacyAddRecoveryEmailView } from '../recovery/LegacyAddRecoveryEmailView/LegacyAddRecoveryEmailView.js';
+import { LegacyPasskeyBundleRecoveryView } from '../recovery/LegacyPasskeyBundleRecoveryView/LegacyPasskeyBundleRecoveryView.js';
+import { LegacyPasskeyCompleteRecoveryView } from '../recovery/LegacyPasskeyCompleteRecoveryView/LegacyPasskeyCompleteRecoveryView.js';
+import { LegacyEmbeddedAuthChoiceView } from '../recovery/LegacyEmbeddedAuthChoiceView/LegacyEmbeddedAuthChoiceView.js';
+import { WalletUpgradeFlowView } from '../WalletUpgradeFlowView/WalletUpgradeFlowView.js';
+import { WaasUpgradeView } from '../WaasUpgradeView/WaasUpgradeView.js';
+
+const LegacyWalletMigrationModal = ({ open, step, onClose, onStepChange, onComplete, onUpgrade, wallets }) => {
+    const { addRecoveryEmail, bundleValidationError, completeRecovery, completeRecoveryError, initPasskeyRecoveryProcess, isCompletingRecovery, isValidatingBundle, recoveryEmail, resendRecoveryEmail, shouldInitRecovery, supportedAuthenticators, validateRecoveryBundle, } = useLegacyWalletMigrationRecovery();
+    const [isGatingUpgrade, setIsGatingUpgrade] = useState(false);
+    const goToUpgrade = () => __awaiter(void 0, void 0, void 0, function* () {
+        setIsGatingUpgrade(true);
+        try {
+            if (yield shouldInitRecovery()) {
+                yield initPasskeyRecoveryProcess();
+                return;
+            }
+            onStepChange('upgrade');
+        }
+        catch (err) {
+            logger.error('Failed to gate upgrade on recovery', err);
+        }
+        finally {
+            setIsGatingUpgrade(false);
+        }
+    });
+    const goToComplete = () => onStepChange('complete');
+    const finish = () => {
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        onClose();
+    };
+    // Force-migration UX: once we have legacy wallets to migrate, the user
+    // must complete the flow. Backdrop click / Escape key are no-ops; the
+    // only way out is finishing the migration (or the consumer-side explicit
+    // `close()` if they're driving the flow).
+    const hasLegacyWalletsToMigrate = (wallets !== null && wallets !== void 0 ? wallets : []).length > 0;
+    const handlePortalClose = hasLegacyWalletsToMigrate
+        ? () => undefined
+        : onClose;
+    return (jsx(Portal, { isShown: open, handleClose: handlePortalClose, children: jsx(Modal, { children: jsx(ModalCard, { children: jsxs("div", { className: 'legacy-wallet-migration-modal', "data-testid": 'legacy-wallet-migration-modal', children: [step === 'select' && (jsx("div", { "data-testid": 'legacy-wallet-migration-step-select', children: jsx(WaasUpgradeView, { wallets: wallets !== null && wallets !== void 0 ? wallets : [], onContinue: goToUpgrade, onCancel: onClose, isLoading: isGatingUpgrade }) })), step === 'upgrade' && (jsx("div", { "data-testid": 'legacy-wallet-migration-step-upgrade', children: jsx(WalletUpgradeFlowView, { wallets: wallets !== null && wallets !== void 0 ? wallets : [], onUpgrade: onUpgrade, onFinish: goToComplete }) })), step === 'complete' && (jsx("div", { "data-testid": 'legacy-wallet-migration-step-complete', children: jsx(AccountUpgradedView, { onFinish: finish }) })), step === 'passkey-recovery-add-email' && (jsx("div", { "data-testid": 'legacy-wallet-migration-step-passkey-recovery-add-email', children: jsx(LegacyAddRecoveryEmailView, { onSubmit: addRecoveryEmail, onCancel: onClose }) })), step === 'passkey-recovery-bundle' && (jsx("div", { "data-testid": 'legacy-wallet-migration-step-passkey-recovery-bundle', children: jsx(LegacyPasskeyBundleRecoveryView, { email: recoveryEmail, onSubmit: validateRecoveryBundle, onResend: resendRecoveryEmail, onCancel: onClose, isSubmitting: isValidatingBundle, errorMessage: bundleValidationError === null || bundleValidationError === void 0 ? void 0 : bundleValidationError.message }) })), step === 'passkey-recovery-complete' && (jsx("div", { "data-testid": 'legacy-wallet-migration-step-passkey-recovery-complete', children: jsx(LegacyPasskeyCompleteRecoveryView, { onSubmit: completeRecovery, onCancel: onClose, isSubmitting: isCompletingRecovery, errorMessage: completeRecoveryError === null || completeRecoveryError === void 0 ? void 0 : completeRecoveryError.message }) })), step === 'embedded-wallet-auth-choice' && (jsx("div", { "data-testid": 'legacy-wallet-migration-step-embedded-wallet-auth-choice', children: jsx(LegacyEmbeddedAuthChoiceView, { supportedAuthenticators: supportedAuthenticators, onSelect: initPasskeyRecoveryProcess, onCancel: onClose }) }))] }) }) }) }));
+};
+
+export { LegacyWalletMigrationModal };

package/src/lib/ui/LegacyWalletMigrationModal/index.d.ts

@@ -0,0 +1 @@
+export { LegacyWalletMigrationModal, type LegacyWalletMigrationModalProps, type LegacyWalletMigrationOnUpgrade, type LegacyWalletMigrationStep, } from './LegacyWalletMigrationModal';

package/src/lib/ui/LegacyWalletMigrationRecoveryContext/LegacyWalletMigrationRecoveryContext.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+import { AuthenticatorType } from '@dynamic-labs/wallet-connector-core';
+import { usePasskeyRecovery } from '../../recovery';
+type RecoveryHandlers = ReturnType<typeof usePasskeyRecovery>;
+export type LegacyWalletMigrationRecoveryContextType = RecoveryHandlers & {
+    iframeContainer: HTMLDivElement | null;
+    supportedAuthenticators: AuthenticatorType[];
+    resolveEmailVerification: (wasSuccessful: boolean) => void;
+    recoveryEmail: string | undefined;
+    recoveryAuthenticatorType: AuthenticatorType | undefined;
+    validateRecoveryBundle: (bundleInput: string) => Promise<void>;
+    resendRecoveryEmail: () => Promise<void>;
+    isValidatingBundle: boolean;
+    bundleValidationError: Error | undefined;
+    completeRecovery: () => Promise<void>;
+    isCompletingRecovery: boolean;
+    completeRecoveryError: Error | undefined;
+};
+export declare const LegacyWalletMigrationRecoveryContext: import("react").Context<LegacyWalletMigrationRecoveryContextType | undefined>;
+export type LegacyWalletMigrationRecoveryProviderProps = {
+    children: ReactNode;
+};
+export declare const LegacyWalletMigrationRecoveryProvider: FC<LegacyWalletMigrationRecoveryProviderProps>;
+export declare const useLegacyWalletMigrationRecovery: () => LegacyWalletMigrationRecoveryContextType;
+export {};

package/src/lib/ui/LegacyWalletMigrationRecoveryContext/LegacyWalletMigrationRecoveryContext.js

@@ -0,0 +1,213 @@
+'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { JwtVerifiedCredentialFormatEnum } from '@dynamic-labs/sdk-api-core';
+import { useDynamicContext, useProjectSettings } from '@dynamic-labs/sdk-react-core';
+import { DynamicError } from '@dynamic-labs/utils';
+import { logger } from '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs-sdk/client/core';
+import { iframeContainerId } from '../../recovery/constants.js';
+import { completePasskeyRecovery } from '../../recovery/completePasskeyRecovery/completePasskeyRecovery.js';
+import { passkeyRecoveryBundleValidation } from '../../recovery/passkeyRecoveryBundleValidation/passkeyRecoveryBundleValidation.js';
+import { resentRecoveryEmail } from '../../recovery/resentRecoveryEmail/resentRecoveryEmail.js';
+import { usePasskeyRecovery } from '../../recovery/usePasskeyRecovery/usePasskeyRecovery.js';
+import { useSetTurnkeyConnectorFetchers } from '../../sessionKeys/useSetTurnkeyConnectorFetchers/useSetTurnkeyConnectorFetchers.js';
+import { useLegacyWalletsToMigrate } from '../../useLegacyWalletsToMigrate/useLegacyWalletsToMigrate.js';
+import { useLegacyWalletMigration } from '../LegacyWalletMigrationContext/LegacyWalletMigrationContext.js';
+
+const LegacyWalletMigrationRecoveryContext = createContext(undefined);
+const iframeHostStyle = {
+    height: 0,
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    top: 0,
+    visibility: 'hidden',
+    width: 0,
+};
+const AUTHENTICATOR_KEYS = ['passkey', 'email'];
+const GENERIC_BUNDLE_ERROR = 'Failed to validate the recovery code. Please try again.';
+const GENERIC_COMPLETE_RECOVERY_ERROR = 'Failed to complete recovery. Please try again.';
+// Only DynamicError instances carry user-facing copy. Wrap anything else in a
+// generic message so internal stack traces / API details are not leaked to
+// the UI (full error is still logged via logger.error).
+const sanitizeUserFacingError = (err, fallback) => err instanceof DynamicError ? err : new Error(fallback);
+const LegacyWalletMigrationRecoveryProvider = ({ children }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { user, primaryWallet } = useDynamicContext();
+    const projectSettings = useProjectSettings();
+    const { goToStep } = useLegacyWalletMigration();
+    const legacyWallets = useLegacyWalletsToMigrate();
+    // When the primary wallet has already been migrated to DynamicWaaS (no
+    // longer a turnkey connector), recovery operations must target the first
+    // available legacy Turnkey wallet instead. Without this, shouldInitRecovery
+    // returns false (wallet connector isn't passkey-compatible) and the email
+    // OTP flow is skipped, leaving V1 wallets unable to export their keys.
+    const recoveryWallet = useMemo(() => {
+        var _a, _b, _c;
+        if ((_b = (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('turnkey')) {
+            return primaryWallet;
+        }
+        return (_c = legacyWallets[0]) !== null && _c !== void 0 ? _c : primaryWallet;
+    }, [primaryWallet, legacyWallets]);
+    const [iframeContainer, setIframeContainer] = useState(null);
+    const [recoveryAuthenticatorType, setRecoveryAuthenticatorType] = useState();
+    const [isValidatingBundle, setIsValidatingBundle] = useState(false);
+    const [bundleValidationError, setBundleValidationError] = useState();
+    const [isCompletingRecovery, setIsCompletingRecovery] = useState(false);
+    const [completeRecoveryError, setCompleteRecoveryError] = useState();
+    const emailVerificationResolverRef = useRef(null);
+    // Wire the Turnkey session key fetchers so that the connector can create a
+    // session when the export step (LegacyEmbeddedWalletExport) calls
+    // createOrRestoreSession(). Without this, the connector never gets its
+    // fetcher on v5 (the isSessionKeyCompatibleWalletConnector branch was
+    // removed from useSetWalletConnectorFetchers during the Turnkey strip).
+    // We intentionally do NOT call createOrRestoreSession or getTurnkeyClient
+    // here — the export component handles those in the correct sequence.
+    const setTurnkeyConnectorFetchers = useSetTurnkeyConnectorFetchers({
+        wallet: recoveryWallet,
+    });
+    useEffect(() => {
+        const connector = recoveryWallet === null || recoveryWallet === void 0 ? void 0 : recoveryWallet.connector;
+        if (!connector)
+            return;
+        setTurnkeyConnectorFetchers();
+    }, [recoveryWallet, setTurnkeyConnectorFetchers]);
+    const awaitEmailVerification = useCallback(() => new Promise((resolve) => {
+        emailVerificationResolverRef.current = resolve;
+    }), []);
+    const resolveEmailVerification = useCallback((wasSuccessful) => {
+        var _a;
+        (_a = emailVerificationResolverRef.current) === null || _a === void 0 ? void 0 : _a.call(emailVerificationResolverRef, wasSuccessful);
+        emailVerificationResolverRef.current = null;
+    }, []);
+    // Derived from useIsTurnkeyWallet (sdk-react-core internal) — duplicated
+    // inline so the migration package doesn't depend on the internal hook.
+    // The original counts an "unclaimed turnkey signer of an SCW" as a Turnkey
+    // wallet too; we ignore that branch here because the migration flow only
+    // covers wallets where the user holds the connector directly.
+    const turnkeyVC = useMemo(() => {
+        var _a;
+        if (!user || !recoveryWallet)
+            return undefined;
+        if (!recoveryWallet.connector.key.startsWith('turnkey'))
+            return undefined;
+        return (_a = user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find((vc) => vc.id === recoveryWallet.id);
+    }, [user, recoveryWallet]);
+    const isTurnkeyWalletWithoutAuthenticator = Boolean(turnkeyVC && !((_a = turnkeyVC.walletProperties) === null || _a === void 0 ? void 0 : _a.isAuthenticatorAttached));
+    const hasRecoveryEmail = Boolean(turnkeyVC &&
+        ((_b = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _b === void 0 ? void 0 : _b.some(({ format }) => format === JwtVerifiedCredentialFormatEnum.Email)));
+    const supportedSecurityMethods = (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.embeddedWallets) === null || _d === void 0 ? void 0 : _d.supportedSecurityMethods;
+    const supportedAuthenticators = useMemo(() => AUTHENTICATOR_KEYS.filter((key) => { var _a; return (_a = supportedSecurityMethods === null || supportedSecurityMethods === void 0 ? void 0 : supportedSecurityMethods[key]) === null || _a === void 0 ? void 0 : _a.isEnabled; }), [supportedSecurityMethods]);
+    const onEmailRecoveryComplete = useCallback(() => goToStep('passkey-recovery-complete'), [goToStep]);
+    const onShowEmailBundle = useCallback(({ authenticatorType }) => {
+        setRecoveryAuthenticatorType(authenticatorType);
+        setBundleValidationError(undefined);
+        goToStep('passkey-recovery-bundle');
+    }, [goToStep]);
+    const validateRecoveryBundle = useCallback((bundleInput) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsValidatingBundle(true);
+        setBundleValidationError(undefined);
+        try {
+            yield passkeyRecoveryBundleValidation({
+                bundleInput,
+                user,
+                wallet: recoveryWallet,
+            });
+            if (recoveryAuthenticatorType === 'passkey') {
+                goToStep('passkey-recovery-complete');
+                return;
+            }
+            // Email recovery is done — the user is authenticated for the new
+            // session, so continue into the upgrade step.
+            goToStep('upgrade');
+        }
+        catch (err) {
+            setBundleValidationError(sanitizeUserFacingError(err, GENERIC_BUNDLE_ERROR));
+            logger.error('Failed to validate recovery bundle', err);
+        }
+        finally {
+            setIsValidatingBundle(false);
+        }
+    }), [user, recoveryWallet, recoveryAuthenticatorType, goToStep]);
+    const resendRecoveryEmail = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!recoveryAuthenticatorType)
+            return;
+        try {
+            yield resentRecoveryEmail({
+                authenticatorType: recoveryAuthenticatorType,
+                user,
+                wallet: recoveryWallet,
+            });
+        }
+        catch (err) {
+            logger.error('Failed to resend recovery email', err);
+        }
+    }), [recoveryAuthenticatorType, user, recoveryWallet]);
+    const completeRecovery = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        setIsCompletingRecovery(true);
+        setCompleteRecoveryError(undefined);
+        try {
+            yield completePasskeyRecovery({ user, wallet: recoveryWallet });
+            goToStep('upgrade');
+        }
+        catch (err) {
+            setCompleteRecoveryError(sanitizeUserFacingError(err, GENERIC_COMPLETE_RECOVERY_ERROR));
+            logger.error('Failed to complete passkey recovery', err);
+        }
+        finally {
+            setIsCompletingRecovery(false);
+        }
+    }), [user, recoveryWallet, goToStep]);
+    const recovery = usePasskeyRecovery({
+        awaitEmailVerification,
+        hasRecoveryEmail,
+        iframeContainer,
+        isTurnkeyWalletWithoutAuthenticator,
+        onAuthMethodComplete: () => goToStep('passkey-recovery-complete'),
+        onEmailRecoveryComplete,
+        onShowAddRecoveryEmail: () => goToStep('passkey-recovery-add-email'),
+        onShowAuthChoice: () => goToStep('embedded-wallet-auth-choice'),
+        onShowEmailBundle,
+        primaryWallet: recoveryWallet,
+        sessionKeyDuration: (_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _e === void 0 ? void 0 : _e.embeddedWallets) === null || _f === void 0 ? void 0 : _f.sessionKeyDuration,
+        supportedSecurityMethods,
+        user,
+        wallet: recoveryWallet,
+    });
+    const value = useMemo(() => (Object.assign(Object.assign({}, recovery), { bundleValidationError,
+        completeRecovery,
+        completeRecoveryError,
+        iframeContainer,
+        isCompletingRecovery,
+        isValidatingBundle,
+        recoveryAuthenticatorType, recoveryEmail: user === null || user === void 0 ? void 0 : user.email, resendRecoveryEmail,
+        resolveEmailVerification,
+        supportedAuthenticators,
+        validateRecoveryBundle })), [
+        recovery,
+        bundleValidationError,
+        completeRecovery,
+        completeRecoveryError,
+        iframeContainer,
+        isCompletingRecovery,
+        isValidatingBundle,
+        recoveryAuthenticatorType,
+        user === null || user === void 0 ? void 0 : user.email,
+        resendRecoveryEmail,
+        resolveEmailVerification,
+        supportedAuthenticators,
+        validateRecoveryBundle,
+    ]);
+    return (jsxs(LegacyWalletMigrationRecoveryContext.Provider, { value: value, children: [jsx("div", { id: iframeContainerId, ref: setIframeContainer, style: iframeHostStyle, "data-testid": 'legacy-wallet-migration-recovery-iframe-container' }), children] }));
+};
+const useLegacyWalletMigrationRecovery = () => {
+    const context = useContext(LegacyWalletMigrationRecoveryContext);
+    if (context === undefined) {
+        throw new Error('useLegacyWalletMigrationRecovery must be used inside a LegacyWalletMigrationRecoveryProvider.');
+    }
+    return context;
+};
+
+export { LegacyWalletMigrationRecoveryContext, LegacyWalletMigrationRecoveryProvider, useLegacyWalletMigrationRecovery };

package/src/lib/ui/LegacyWalletMigrationRecoveryContext/index.d.ts

@@ -0,0 +1 @@
+export { LegacyWalletMigrationRecoveryContext, LegacyWalletMigrationRecoveryProvider, useLegacyWalletMigrationRecovery, type LegacyWalletMigrationRecoveryContextType, type LegacyWalletMigrationRecoveryProviderProps, } from './LegacyWalletMigrationRecoveryContext';

package/src/lib/ui/WaasUpgradeView/WaasUpgradeView.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Wallet, WalletConnectorCore } from '@dynamic-labs/wallet-connector-core';
+export type WaasUpgradeViewProps = {
+    wallets: Wallet<WalletConnectorCore.WalletConnector>[];
+    onContinue: () => void;
+    onCancel: () => void;
+    isLoading?: boolean;
+};
+export declare const WaasUpgradeView: FC<WaasUpgradeViewProps>;

package/src/lib/ui/WaasUpgradeView/WaasUpgradeView.js

@@ -0,0 +1,62 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { ModalHeader, Typography, TypographyButton } from '@dynamic-labs/sdk-react-core/components';
+import { UpgradeIcon } from '@dynamic-labs/sdk-react-core/icons';
+
+const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+const contentStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    padding: '24px',
+};
+const illustrationStyle = {
+    alignItems: 'center',
+    color: 'var(--dynamic-brand-primary-color)',
+    display: 'flex',
+    height: 80,
+    justifyContent: 'center',
+    width: 200,
+};
+const descriptionStyle = {
+    maxWidth: 340,
+    textAlign: 'center',
+};
+const walletsSectionStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    width: '100%',
+};
+const walletsListStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+};
+const walletItemStyle = {
+    alignItems: 'center',
+    borderRadius: 8,
+    display: 'flex',
+    gap: '12px',
+    padding: '12px',
+};
+const actionsStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    marginTop: '8px',
+    width: '100%',
+};
+const shortenAddress = (address) => `${address.slice(0, 6)}...${address.slice(-4)}`;
+const WaasUpgradeView = ({ wallets, onContinue, onCancel, isLoading = false, }) => {
+    const { t } = useTranslation();
+    const hasWallets = wallets.length > 0;
+    return (jsxs("div", { style: containerStyle, children: [jsx(ModalHeader, { children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', children: t('dyn_upgrade_wallet.title') }) }), jsxs("div", { style: contentStyle, children: [jsx("div", { style: illustrationStyle, children: jsx(UpgradeIcon, {}) }), jsx(Typography, { as: 'p', variant: 'body_normal', color: 'primary', style: descriptionStyle, children: t('dyn_upgrade_wallet.description') }), hasWallets ? (jsxs("div", { style: walletsSectionStyle, children: [jsx(Typography, { color: 'primary', children: t('dyn_upgrade_wallet.eligible_wallets') }), jsx("div", { style: walletsListStyle, "data-testid": 'waas-upgrade-view-wallets-list', children: wallets.map((wallet) => (jsxs("div", { style: walletItemStyle, "data-testid": 'waas-upgrade-view-wallet-item', children: [jsx(Typography, { color: 'primary', children: wallet.chain }), jsx(Typography, { color: 'primary', children: shortenAddress(wallet.address) })] }, wallet.id))) })] })) : (jsx(Typography, { color: 'secondary', style: descriptionStyle, copykey: 'dyn_upgrade_wallet.no_legacy_wallets', "data-testid": 'waas-upgrade-view-no-legacy-wallets', children: t('dyn_upgrade_wallet.no_legacy_wallets') })), jsx("div", { style: actionsStyle, children: hasWallets ? (jsx(TypographyButton, { buttonVariant: 'brand-primary', onClick: onContinue, disabled: isLoading, loading: isLoading, copykey: 'dyn_upgrade_wallet.upgrade', typographyProps: { color: 'inherit' }, dataTestId: 'waas-upgrade-view-continue-button', children: t('dyn_upgrade_wallet.upgrade') })) : (jsx(TypographyButton, { buttonVariant: 'tertiary', onClick: onCancel, dataTestId: 'waas-upgrade-view-close-button', children: t('dyn_upgrade_wallet.close') })) })] })] }));
+};
+
+export { WaasUpgradeView };

package/src/lib/ui/WaasUpgradeView/index.d.ts

@@ -0,0 +1 @@
+export { WaasUpgradeView, type WaasUpgradeViewProps } from './WaasUpgradeView';

package/src/lib/ui/WalletUpgradeFlowView/WalletUpgradeFlowView.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Wallet, WalletConnectorCore } from '@dynamic-labs/wallet-connector-core';
+export type WalletUpgradeFlowViewOnUpgradeArgs = {
+    wallet: Wallet<WalletConnectorCore.WalletConnector>;
+    privateKey: string;
+};
+export type WalletUpgradeFlowViewProps = {
+    wallets: Wallet<WalletConnectorCore.WalletConnector>[];
+    onUpgrade: (args: WalletUpgradeFlowViewOnUpgradeArgs) => Promise<void>;
+    onFinish: () => void;
+};
+export declare const WalletUpgradeFlowView: FC<WalletUpgradeFlowViewProps>;

package/src/lib/ui/WalletUpgradeFlowView/WalletUpgradeFlowView.js

@@ -0,0 +1,124 @@
+'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ModalHeader, Typography, ErrorContainer, Textarea, TypographyButton } from '@dynamic-labs/sdk-react-core/components';
+import { LegacyEmbeddedWalletExport } from '../LegacyEmbeddedWalletExport/LegacyEmbeddedWalletExport.js';
+
+const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+const stepperStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 12,
+    justifyContent: 'center',
+    padding: '16px 24px',
+    width: '100%',
+};
+const stepStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 8,
+};
+const stepSeparatorStyle = {
+    background: 'var(--dynamic-border-color)',
+    height: 1,
+    width: 16,
+};
+const contentStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 24,
+    padding: '24px',
+};
+const sectionStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+};
+const titleSectionStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+};
+const actionsStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+    padding: '0 24px 24px 24px',
+};
+const baseStepIndicatorStyle = {
+    alignItems: 'center',
+    borderRadius: '50%',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    display: 'flex',
+    fontSize: 12,
+    fontWeight: 600,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+};
+const getStepIndicatorStyle = (current, completed) => {
+    if (completed || current) {
+        return Object.assign(Object.assign({}, baseStepIndicatorStyle), { background: 'var(--dynamic-brand-primary-color)', borderColor: 'var(--dynamic-brand-primary-color)', color: 'white' });
+    }
+    return Object.assign(Object.assign({}, baseStepIndicatorStyle), { background: 'transparent', borderColor: 'var(--dynamic-border-color)', color: 'var(--dynamic-text-secondary)' });
+};
+const WalletUpgradeFlowView = ({ wallets, onUpgrade, onFinish, }) => {
+    const { t } = useTranslation();
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [privateKeyInput, setPrivateKeyInput] = useState('');
+    const [isUpgrading, setIsUpgrading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const currentWallet = wallets[currentIndex];
+    if (!currentWallet) {
+        return null;
+    }
+    const totalSteps = wallets.length;
+    const isLastWallet = currentIndex === totalSteps - 1;
+    const trimmedPrivateKey = privateKeyInput.trim();
+    const handleUpgrade = () => __awaiter(void 0, void 0, void 0, function* () {
+        setIsUpgrading(true);
+        setErrorMessage(null);
+        try {
+            yield onUpgrade({
+                privateKey: trimmedPrivateKey,
+                wallet: currentWallet,
+            });
+            setPrivateKeyInput('');
+            if (isLastWallet) {
+                onFinish();
+            }
+            else {
+                setCurrentIndex((previous) => previous + 1);
+            }
+        }
+        catch (error) {
+            setErrorMessage(error instanceof Error
+                ? error.message
+                : t('dyn_wallet_upgrade_flow.upgrade_failed'));
+        }
+        finally {
+            setIsUpgrading(false);
+        }
+    });
+    return (jsxs("div", { style: containerStyle, "data-testid": 'wallet-upgrade-flow-view', children: [jsx(ModalHeader, { children: totalSteps > 1 && (jsx("div", { style: stepperStyle, children: wallets.map((wallet, index) => {
+                        var _a, _b;
+                        const completed = index < currentIndex;
+                        const current = index === currentIndex;
+                        return (jsxs("div", { style: stepStyle, children: [jsx("div", Object.assign({ style: getStepIndicatorStyle(current, completed) }, (current
+                                    ? {
+                                        'data-testid': 'wallet-upgrade-step-current',
+                                    }
+                                    : {}), { children: completed ? '✓' : index + 1 })), jsx(Typography, { variant: 'body_small', color: index <= currentIndex ? 'primary' : 'secondary', children: t('dyn_wallet_upgrade_flow.step_wallet_upgrade', {
+                                        walletName: (_a = wallet.chain) !== null && _a !== void 0 ? _a : 'Wallet',
+                                    }) }), index < totalSteps - 1 && jsx("div", { style: stepSeparatorStyle })] }, (_b = wallet.id) !== null && _b !== void 0 ? _b : index));
+                    }) })) }), jsxs("div", { style: contentStyle, children: [errorMessage && jsx(ErrorContainer, { children: errorMessage }), jsxs("div", { style: titleSectionStyle, children: [jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', children: t('dyn_wallet_upgrade_flow.title') }), jsx(Typography, { color: 'secondary', children: t('dyn_wallet_upgrade_flow.copy_private_key_subtitle') })] }), jsxs("div", { style: sectionStyle, children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: t('dyn_wallet_upgrade_flow.copy_private_key_title') }), jsx(LegacyEmbeddedWalletExport, { wallet: currentWallet }, `wallet-export-${currentIndex}-${currentWallet.id}`)] }), jsxs("div", { style: sectionStyle, children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: t('dyn_wallet_upgrade_flow.step_2_upgrade_description') }), jsx(Textarea, { id: 'wallet-upgrade-flow-private-key', value: privateKeyInput, onChange: (event) => setPrivateKeyInput(event.target.value), variant: 'regular', label: '', "data-testid": 'paste-private-key-input' })] })] }), jsx("div", { style: actionsStyle, children: jsx(TypographyButton, { buttonVariant: 'brand-primary', onClick: handleUpgrade, disabled: !trimmedPrivateKey || isUpgrading, loading: isUpgrading, expanded: true, dataTestId: 'wallet-upgrade-flow-upgrade-button', typographyProps: { color: 'inherit' }, children: t('dyn_wallet_upgrade_flow.upgrade_wallet') }) })] }));
+};
+
+export { WalletUpgradeFlowView };

package/src/lib/ui/WalletUpgradeFlowView/index.d.ts

@@ -0,0 +1 @@
+export { WalletUpgradeFlowView, type WalletUpgradeFlowViewProps, type WalletUpgradeFlowViewOnUpgradeArgs, } from './WalletUpgradeFlowView';

package/src/lib/ui/recovery/LegacyAddRecoveryEmailView/LegacyAddRecoveryEmailView.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type LegacyAddRecoveryEmailViewProps = {
+    onSubmit: (email: string) => Promise<void> | void;
+    onCancel: () => void;
+    defaultEmail?: string;
+    isSubmitting?: boolean;
+    errorMessage?: string;
+};
+export declare const LegacyAddRecoveryEmailView: FC<LegacyAddRecoveryEmailViewProps>;

package/src/lib/ui/recovery/LegacyAddRecoveryEmailView/LegacyAddRecoveryEmailView.js

@@ -0,0 +1,21 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { IconButton, ModalHeader, Typography, EmailForm } from '@dynamic-labs/sdk-react-core/components';
+import { CloseIcon } from '@dynamic-labs/sdk-react-core/icons';
+
+const EMAIL_SUBMIT_COPY_KEY = 'dyn_passkey_recovery.add_email.confirm_button';
+const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 24,
+    padding: 24,
+};
+const descriptionStyle = { maxWidth: 360 };
+const LegacyAddRecoveryEmailView = ({ onSubmit, onCancel, defaultEmail, isSubmitting, errorMessage }) => {
+    const { t } = useTranslation();
+    const closeButton = (jsx(IconButton, { onClick: onCancel, type: 'button', children: jsx(CloseIcon, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { variant: 'title', color: 'primary', children: t('dyn_passkey_recovery.add_email.title') }) }), jsxs("div", { style: containerStyle, children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', style: descriptionStyle, children: t('dyn_passkey_recovery.add_email.description') }), errorMessage && (jsx(Typography, { variant: 'body_small', color: 'error-1', children: errorMessage })), jsx(EmailForm, { onSubmit: onSubmit, isLoading: Boolean(isSubmitting), currentEmail: defaultEmail, buttonCopyKey: EMAIL_SUBMIT_COPY_KEY })] })] }));
+};
+
+export { LegacyAddRecoveryEmailView };

package/src/lib/ui/recovery/LegacyAddRecoveryEmailView/index.d.ts

@@ -0,0 +1 @@
+export { LegacyAddRecoveryEmailView, type LegacyAddRecoveryEmailViewProps, } from './LegacyAddRecoveryEmailView';

package/src/lib/ui/recovery/LegacyEmbeddedAuthChoiceView/LegacyEmbeddedAuthChoiceView.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AuthenticatorType } from '@dynamic-labs/wallet-connector-core';
+export type LegacyEmbeddedAuthChoiceViewProps = {
+    supportedAuthenticators: AuthenticatorType[];
+    onSelect: (authenticatorType: AuthenticatorType) => Promise<void> | void;
+    onCancel: () => void;
+    isSubmitting?: boolean;
+};
+export declare const LegacyEmbeddedAuthChoiceView: FC<LegacyEmbeddedAuthChoiceViewProps>;

package/src/lib/ui/recovery/LegacyEmbeddedAuthChoiceView/LegacyEmbeddedAuthChoiceView.js

@@ -0,0 +1,29 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { IconButton, ModalHeader, Typography, TypographyButton } from '@dynamic-labs/sdk-react-core/components';
+import { CloseIcon } from '@dynamic-labs/sdk-react-core/icons';
+
+const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 24,
+    padding: 24,
+};
+const buttonGroupStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+};
+// Stub — the cards-based selector UX is wired in PR C.2 alongside the
+// usePasskeyRecovery hook integration. For now this view renders one button
+// per supported authenticator so the step machine can be exercised.
+const LegacyEmbeddedAuthChoiceView = ({ supportedAuthenticators, onSelect, onCancel, isSubmitting }) => {
+    const { t } = useTranslation();
+    const closeButton = (jsx(IconButton, { onClick: onCancel, type: 'button', children: jsx(CloseIcon, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { variant: 'title', color: 'primary', children: t('dyn_embedded_authenticator.title') }) }), jsxs("div", { style: containerStyle, children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', children: t('dyn_embedded_authenticator.description') }), jsx("div", { style: buttonGroupStyle, children: supportedAuthenticators.map((authenticatorType) => (jsx(TypographyButton, { dataTestId: `legacy-auth-choice-${authenticatorType}`, onClick: () => onSelect(authenticatorType), buttonVariant: 'brand-primary', expanded: true, disabled: isSubmitting, typographyProps: { color: 'white' }, children: authenticatorType === 'passkey'
+                                ? t('dyn_embedded_authenticator.passkey.title')
+                                : t('dyn_embedded_authenticator.email.title') }, authenticatorType))) })] })] }));
+};
+
+export { LegacyEmbeddedAuthChoiceView };

package/src/lib/ui/recovery/LegacyEmbeddedAuthChoiceView/index.d.ts

@@ -0,0 +1 @@
+export { LegacyEmbeddedAuthChoiceView, type LegacyEmbeddedAuthChoiceViewProps, } from './LegacyEmbeddedAuthChoiceView';

package/src/lib/ui/recovery/LegacyPasskeyBundleRecoveryView/LegacyPasskeyBundleRecoveryView.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type LegacyPasskeyBundleRecoveryViewProps = {
+    email: string | undefined;
+    onSubmit: (bundleInput: string) => Promise<void> | void;
+    onResend: () => Promise<void> | void;
+    onCancel: () => void;
+    isSubmitting?: boolean;
+    errorMessage?: string;
+};
+export declare const LegacyPasskeyBundleRecoveryView: FC<LegacyPasskeyBundleRecoveryViewProps>;