@openfort/react 0.3.1 → 1.0.0

package/build/components/Pages/Recover/index.js

@@ -0,0 +1,252 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { RecoveryMethod, ChainTypeEnum, EmbeddedState } from '@openfort/openfort-js';
+import { motion } from 'framer-motion';
+import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import { KeyIcon, ShieldIcon, LockIcon, FingerPrintIcon, PhoneIcon, EmailIcon } from '../../../assets/icons.js';
+import { OpenfortError } from '../../../types.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useResolvedIdentity } from '../../../hooks/useResolvedIdentity.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useRecoveryOTP } from '../../../shared/hooks/useRecoveryOTP.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import 'detect-browser';
+import { truncateEthAddress } from '../../../utils/format.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import FitText from '../../Common/FitText/index.js';
+import Input from '../../Common/Input/index.js';
+import Loader from '../../Common/Loading/index.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { OtpInputStandalone } from '../../Common/OTPInput/index.js';
+import { FloatingGraphic } from '../../FloatingGraphic/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { Body, ResultContainer, FooterTextButton, FooterButtonText } from '../EmailOTP/styles.js';
+import { recoveryRegistry } from './recoveryRegistry.js';
+
+const RecoverPasswordWallet = ({ wallet, onBack, logoutOnBack, }) => {
+    const [recoveryPhrase, setRecoveryPhrase] = useState('');
+    const [recoveryError, setRecoveryError] = useState(false);
+    const { triggerResize, setRoute } = useOpenfort();
+    const [loading, setLoading] = useState(false);
+    const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const embeddedWallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const { isEnabled: otpEnabled, requestOTP } = useRecoveryOTP();
+    const ctx = useMemo(() => ({
+        setActive: (opts) => embeddedWallet.setActive(opts),
+        setRoute,
+        setError: setRecoveryError,
+        otp: { isEnabled: otpEnabled, request: requestOTP },
+        setNeedsOTP: () => { },
+        setOtpResponse: () => { },
+    }), [embeddedWallet, setRoute, otpEnabled, requestOTP]);
+    const handleSubmit = async () => {
+        setLoading(true);
+        try {
+            await recoveryRegistry[chainType].password(wallet, {
+                ...ctx,
+                password: recoveryPhrase,
+            });
+        }
+        catch (err) {
+            setRecoveryError(err instanceof OpenfortError ? err.message : 'Recovery failed. Please try again.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError, triggerResize]);
+    const identity = useResolvedIdentity({
+        address: wallet.address,
+        chainType,
+        enabled: !!wallet.address,
+    });
+    const ensName = identity.status === 'success' ? identity.name : undefined;
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "130px", logoCenter: {
+                    logo: jsx(KeyIcon, {}),
+                    size: '1.2',
+                }, logoTopLeft: {
+                    logo: jsx(ShieldIcon, {}),
+                    size: '0.75',
+                }, logoBottomRight: {
+                    logo: jsx(LockIcon, {}),
+                    size: '0.5',
+                } }), jsx(ModalHeading, { children: "Recover wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: ["Please enter the password to recover wallet", ' ', jsx(CopyText, { value: wallet.address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(wallet.address) })] }), jsxs("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => setRecoveryPhrase(e.target.value), type: "password", placeholder: "Enter your password", autoComplete: "off" }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Recover wallet" })] })] }));
+};
+const RecoverPasskeyWallet = ({ wallet, onBack, logoutOnBack, }) => {
+    const { triggerResize, setRoute } = useOpenfort();
+    const [recoveryError, setRecoveryError] = useState(false);
+    const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const embeddedWallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const { isEnabled: otpEnabled, requestOTP } = useRecoveryOTP();
+    const ctx = useMemo(() => ({
+        setActive: (opts) => embeddedWallet.setActive(opts),
+        setRoute,
+        setError: setRecoveryError,
+        otp: { isEnabled: otpEnabled, request: requestOTP },
+        setNeedsOTP: () => { },
+        setOtpResponse: () => { },
+    }), [embeddedWallet, setRoute, otpEnabled, requestOTP]);
+    const recoverWallet = useCallback(async () => {
+        try {
+            await recoveryRegistry[chainType].passkey(wallet, ctx);
+        }
+        catch (err) {
+            setRecoveryError(err instanceof OpenfortError ? err.message : 'Invalid passkey. Please try again.');
+        }
+    }, [chainType, wallet, ctx]);
+    const shouldRecoverWalletRef = useRef(false);
+    useEffect(() => {
+        if (shouldRecoverWalletRef.current)
+            return;
+        shouldRecoverWalletRef.current = true;
+        recoverWallet();
+    }, [recoverWallet]);
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError, triggerResize]);
+    const identity = useResolvedIdentity({
+        address: wallet.address,
+        chainType,
+        enabled: !!wallet.address,
+    });
+    const ensName = identity.status === 'success' ? identity.name : undefined;
+    const walletDisplay = ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(wallet.address);
+    return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(Loader, { icon: jsx(FingerPrintIcon, {}), isError: !!recoveryError, header: recoveryError ? 'Invalid passkey.' : `Recovering wallet ${walletDisplay} with passkey...`, description: recoveryError ? 'There was an error creating your passkey. Please try again.' : undefined, onRetry: () => recoverWallet() }) }));
+};
+const RecoverAutomaticWallet = ({ wallet, onBack, logoutOnBack, }) => {
+    const { embeddedState } = useOpenfortCore();
+    const { setRoute } = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const embeddedWallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const { isEnabled: isWalletRecoveryOTPEnabled, requestOTP } = useRecoveryOTP();
+    const [error, setError] = useState(false);
+    const [needsOTP, setNeedsOTP] = useState(false);
+    const [otpResponse, setOtpResponse] = useState(null);
+    const [otpStatus, setOtpStatus] = useState('idle');
+    const baseCtx = useMemo(() => ({
+        setActive: (opts) => embeddedWallet.setActive(opts),
+        setRoute,
+        setError,
+        otp: { isEnabled: isWalletRecoveryOTPEnabled, request: requestOTP },
+        setNeedsOTP,
+        setOtpResponse,
+    }), [embeddedWallet, setRoute, isWalletRecoveryOTPEnabled, requestOTP]);
+    const recoverWallet = useCallback(async () => {
+        if (chainType !== ChainTypeEnum.SVM && embeddedState !== EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED)
+            return;
+        logger.log('Automatically recovering wallet', wallet.address);
+        await recoveryRegistry[chainType].automatic(wallet, baseCtx);
+    }, [wallet, embeddedState, chainType, baseCtx]);
+    const shouldRecoverWalletRef = useRef(false);
+    useEffect(() => {
+        if (shouldRecoverWalletRef.current)
+            return;
+        shouldRecoverWalletRef.current = true;
+        recoverWallet();
+    }, [recoverWallet]);
+    const identity = useResolvedIdentity({
+        address: wallet.address,
+        chainType,
+        enabled: !!wallet.address,
+    });
+    const ensName = identity.status === 'success' ? identity.name : undefined;
+    const walletDisplay = ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(wallet.address);
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    useEffect(() => {
+        if (canSendOtp)
+            return;
+        const timerId = setTimeout(() => setCanSendOtp(true), 10000);
+        return () => clearTimeout(timerId);
+    }, [canSendOtp]);
+    const handleCompleteOtp = useCallback(async (otp) => {
+        setOtpStatus('loading');
+        try {
+            await recoveryRegistry[chainType].automatic(wallet, { ...baseCtx, otpCode: otp });
+            setOtpStatus('success');
+            setTimeout(() => setRoute(routes.CONNECTED_SUCCESS), 1000);
+        }
+        catch (err) {
+            setOtpStatus('error');
+            setError(err instanceof OpenfortError ? err.message : 'There was an error verifying the OTP. Please try again.');
+            logger.log('Error verifying OTP for wallet recovery', err);
+            setTimeout(() => {
+                setOtpStatus('idle');
+                setError(false);
+            }, 1000);
+        }
+    }, [chainType, wallet, baseCtx, setRoute]);
+    const handleResendClick = useCallback(() => {
+        setOtpStatus('send-otp');
+        setCanSendOtp(false);
+    }, []);
+    const isResendDisabled = !canSendOtp || otpStatus === 'sending-otp' || otpStatus === 'send-otp';
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (otpStatus === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, otpStatus]);
+    if (needsOTP && isWalletRecoveryOTPEnabled) {
+        return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                        logo: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? jsx(PhoneIcon, {}) : jsx(EmailIcon, {}),
+                    } }), jsxs(ModalBody, { children: [jsxs(Body, { as: "div", children: ["Recovering wallet ", jsx(CopyText, { value: wallet.address, children: walletDisplay }), "Please check ", jsx("b", { children: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.phone : otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.email }), " and enter your code below."] }), jsx(OtpInputStandalone, { length: 9, scale: "80%", onComplete: handleCompleteOtp, isLoading: otpStatus === 'loading', isError: otpStatus === 'error', isSuccess: otpStatus === 'success' }), jsxs(ResultContainer, { children: [otpStatus === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), otpStatus === 'error' && jsx(ModalBody, { "$error": true, children: error || 'Invalid code. Please try again.' })] }), jsxs(FooterTextButton, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] })] }));
+    }
+    if (error) {
+        return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(ModalBody, { style: { textAlign: 'center' }, "$error": true, children: jsx(FitText, { children: error }) }) }));
+    }
+    return (jsx(PageContent, { children: jsx(Loader, { header: `Recovering wallet...` }) }));
+};
+const RECOVER_WALLET_REGISTRY = {
+    [RecoveryMethod.PASSWORD]: RecoverPasswordWallet,
+    [RecoveryMethod.AUTOMATIC]: RecoverAutomaticWallet,
+    [RecoveryMethod.PASSKEY]: RecoverPasskeyWallet,
+};
+const RecoverWallet = ({ wallet, onBack, logoutOnBack }) => {
+    var _a;
+    const Component = RECOVER_WALLET_REGISTRY[(_a = wallet.recoveryMethod) !== null && _a !== void 0 ? _a : RecoveryMethod.AUTOMATIC];
+    if (!Component) {
+        logger.error(`Unsupported recovery method: ${wallet.recoveryMethod}, defaulting to automatic.`);
+        return jsx(RecoverAutomaticWallet, { wallet: wallet, onBack: onBack, logoutOnBack: logoutOnBack });
+    }
+    return jsx(Component, { wallet: wallet, onBack: onBack, logoutOnBack: logoutOnBack });
+};
+const RecoverPage = () => {
+    const { previousRoute, route } = useOpenfort();
+    const wallet = route.route === routes.SOL_RECOVER_WALLET
+        ? route.wallet
+        : route.route === routes.RECOVER_WALLET
+            ? route.wallet
+            : undefined;
+    const { onBack, logoutOnBack } = useMemo(() => {
+        if ((previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.route) === routes.SELECT_WALLET_TO_RECOVER) {
+            return {
+                onBack: 'back',
+                logoutOnBack: false,
+            };
+        }
+        return { onBack: routes.PROVIDERS, logoutOnBack: true };
+    }, [previousRoute]);
+    if (!wallet)
+        return null;
+    return jsx(RecoverWallet, { wallet: wallet, onBack: onBack, logoutOnBack: logoutOnBack });
+};
+
+export { RecoverPage as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/Recover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Recover/recoveryRegistry.d.ts

@@ -0,0 +1,32 @@
+import { ChainTypeEnum, RecoveryMethod } from '@openfort/openfort-js';
+import type { OTPResponse } from '../../../shared/hooks/useRecoveryOTP';
+import type { RecoverableWallet } from '../../../shared/types';
+import { type SetRouteOptions } from '../../Openfort/types';
+type RecoveryContext = {
+    setActive: (opts: {
+        address: string;
+        password?: string;
+        recoveryMethod?: RecoveryMethod;
+        otpCode?: string;
+        passkeyId?: string;
+    }) => Promise<void>;
+    setRoute: (options: SetRouteOptions) => void;
+    setError: (e: string | false) => void;
+    otp: {
+        isEnabled: boolean;
+        request: () => Promise<OTPResponse>;
+    };
+    setNeedsOTP: (n: boolean) => void;
+    setOtpResponse: (r: OTPResponse | null) => void;
+    password?: string;
+    otpCode?: string;
+    passkeyId?: string;
+};
+type RecoveryEntry = (wallet: RecoverableWallet, ctx: RecoveryContext) => Promise<void>;
+type RecoveryRegistryByChain = {
+    password: RecoveryEntry;
+    passkey: RecoveryEntry;
+    automatic: RecoveryEntry;
+};
+export declare const recoveryRegistry: Record<ChainTypeEnum.EVM | ChainTypeEnum.SVM, RecoveryRegistryByChain>;
+export {};

package/build/components/Pages/Recover/recoveryRegistry.js

@@ -0,0 +1,61 @@
+import { ChainTypeEnum, RecoveryMethod } from '@openfort/openfort-js';
+import { handleOtpRecoveryError } from '../../../shared/utils/otpError.js';
+import { routes } from '../../Openfort/types.js';
+
+async function passwordEntry(wallet, ctx) {
+    ctx.setError(false);
+    await ctx.setActive({
+        address: wallet.address,
+        recoveryMethod: RecoveryMethod.PASSWORD,
+        password: ctx.password,
+    });
+    ctx.setRoute(routes.CONNECTED_SUCCESS);
+}
+async function passkeyEntry(wallet, ctx) {
+    ctx.setError(false);
+    await ctx.setActive({
+        address: wallet.address,
+        recoveryMethod: RecoveryMethod.PASSKEY,
+        passkeyId: ctx.passkeyId,
+    });
+    ctx.setRoute(routes.CONNECTED_SUCCESS);
+}
+async function automaticEntry(wallet, ctx) {
+    ctx.setError(false);
+    try {
+        await ctx.setActive({
+            address: wallet.address,
+            recoveryMethod: RecoveryMethod.AUTOMATIC,
+            otpCode: ctx.otpCode,
+        });
+        ctx.setRoute(routes.CONNECTED_SUCCESS);
+    }
+    catch (err) {
+        const { error, isOTPRequired } = handleOtpRecoveryError(err, ctx.otp.isEnabled);
+        if (isOTPRequired && ctx.otp.isEnabled) {
+            try {
+                const res = await ctx.otp.request();
+                ctx.setNeedsOTP(true);
+                ctx.setOtpResponse(res);
+            }
+            catch (_otpErr) {
+                ctx.setError('Failed to send recovery code');
+            }
+        }
+        else {
+            ctx.setError(error.message);
+        }
+    }
+}
+const RECOVERY_REGISTRY = {
+    password: passwordEntry,
+    passkey: passkeyEntry,
+    automatic: automaticEntry,
+};
+const recoveryRegistry = {
+    [ChainTypeEnum.EVM]: RECOVERY_REGISTRY,
+    [ChainTypeEnum.SVM]: RECOVERY_REGISTRY,
+};
+
+export { recoveryRegistry };
+//# sourceMappingURL=recoveryRegistry.js.map

package/build/components/Pages/Recover/recoveryRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recoveryRegistry.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/RemoveLinkedProvider/index.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import styled from '../../../styles/styled/index.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { ModalHeading, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import { getProviderName } from '../../Common/Providers/getProviderName.js';
+import { WalletDisplay } from '../../Common/Providers/ProviderHeader.js';
+import { ProviderIcon } from '../../Common/Providers/ProviderIcon.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { ProviderIconContainer, ProviderIconWrapper, ProviderIconInner } from '../LinkedProvider/index.js';
+
+const ButtonWrapper = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+`;
+const ErrorMessage = styled.div `
+  color: var(--ck-body-color-danger, #ff4d4f);
+  margin-top: 16px;
+`;
+const RemoveLinkedProvider = () => {
+    const { route, triggerResize, onBack, setOnBack, setRouteHistory, setRoute } = useOpenfort();
+    const { client, updateUser } = useOpenfortCore();
+    const [error, setError] = useState(null);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const provider = useMemo(() => {
+        if (route.route === 'removeLinkedProvider') {
+            return route.account;
+        }
+        throw new Error('No provider found in route');
+    }, [route]);
+    useEffect(() => {
+        if (error)
+            triggerResize();
+    }, [error]);
+    useEffect(() => {
+        if (isSuccess) {
+            updateUser();
+            triggerResize();
+            setOnBack(() => () => {
+                setRouteHistory((prev) => {
+                    const newHistory = [...prev];
+                    newHistory.pop();
+                    newHistory.pop();
+                    if (newHistory.length > 0) {
+                        setRoute(newHistory[newHistory.length - 1]);
+                    }
+                    else {
+                        setRoute({ route: routes.CONNECTED });
+                    }
+                    return newHistory;
+                });
+            });
+        }
+    }, [isSuccess]);
+    const handleRemove = async () => {
+        var _a;
+        const errorMsg = 'Failed to remove linked provider. Please try again.';
+        if (provider.provider === 'siwe' || provider.provider === 'wallet') {
+            try {
+                const result = await client.auth.unlinkWallet({
+                    address: provider.accountId,
+                    chainId: Number((_a = provider.chainId) !== null && _a !== void 0 ? _a : 0),
+                });
+                if (!result.success) {
+                    setError(errorMsg);
+                }
+                else {
+                    setIsSuccess(true);
+                }
+            }
+            catch (e) {
+                logger.error('Unexpected error removing linked provider:', e);
+                setError(errorMsg);
+            }
+        }
+        else {
+            try {
+                const result = await client.auth.unlinkOAuth({
+                    provider: provider.provider,
+                });
+                if (!result.status) {
+                    setError(errorMsg);
+                }
+                else {
+                    setIsSuccess(true);
+                }
+            }
+            catch (e) {
+                logger.error('Unexpected error removing linked provider:', e);
+                setError(errorMsg);
+            }
+        }
+    };
+    return (jsxs(PageContent, { children: [jsxs(ModalHeading, { children: ["Remove ", getProviderName(provider.provider)] }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ProviderIconContainer, { style: { marginBottom: '16px' }, children: jsx(ProviderIconWrapper, { children: jsx(ProviderIconInner, { children: jsx(ProviderIcon, { account: provider }) }) }) }), isSuccess ? (jsxs(Fragment, { children: [jsx(ModalH1, { "$valid": true, children: "Success" }), jsxs(ModalBody, { children: ["Successfully removed", ' ', provider.provider === 'siwe' ? (jsxs("span", { children: [jsx("b", { children: jsx(WalletDisplay, { walletAddress: provider.accountId }) }), "."] })) : (jsxs(Fragment, { children: [jsx("b", { children: getProviderName(provider.provider) }), " as an authentication method."] }))] }), jsx(ButtonWrapper, { style: { marginTop: 0 }, children: jsx(Button, { onClick: () => onBack === null || onBack === void 0 ? void 0 : onBack(), children: "Back" }) })] })) : (jsxs(Fragment, { children: [jsxs("p", { children: ["Are you sure you want to remove", ' ', provider.provider === 'siwe' ? (jsxs(CopyText, { value: provider.accountId, children: [jsx("b", { children: jsx(WalletDisplay, { walletAddress: provider.accountId }) }), "?"] })) : (jsxs(Fragment, { children: [jsx("b", { children: getProviderName(provider.provider) }), "as an authentication method?"] }))] }), error && jsx(ErrorMessage, { children: error }), jsxs(ButtonWrapper, { style: { marginTop: 0 }, children: [jsx(Button, { onClick: () => onBack === null || onBack === void 0 ? void 0 : onBack(), children: "Cancel" }), jsx(Button, { onClick: handleRemove, children: "Remove" })] })] }))] })] }));
+};
+
+export { RemoveLinkedProvider as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/RemoveLinkedProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/SelectToken/index.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { formatUnits } from 'viem';
+import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import { Arrow, ArrowChevron, TextLinkButton } from '../../Common/Button/styles.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { getAssetSymbol, getAssetDecimals, formatBalanceWithSymbol } from '../Send/utils.js';
+import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenInfo, TokenSymbol, TokenName, TokenBalance } from './styles.js';
+
+const ZERO = BigInt(0);
+const usdFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+const SelectToken = ({ isBuyFlow }) => {
+    const { setSendForm, setBuyForm, setRoute, triggerResize } = useOpenfort();
+    const [viewAllAssets, setViewAllAssets] = useState(false);
+    useEffect(() => {
+        triggerResize();
+    }, [viewAllAssets]);
+    const { data: walletAssets, isLoading: isBalancesLoading } = useEthereumWalletAssets();
+    // Show all tokens for both buy and send flows
+    const selectableTokens = walletAssets || [];
+    const handleSelect = (asset) => {
+        var _a;
+        // In send flow, don't allow selecting tokens with 0 balance
+        if (!isBuyFlow && ((_a = asset.balance) !== null && _a !== void 0 ? _a : ZERO) <= ZERO) {
+            return;
+        }
+        if (isBuyFlow) {
+            setBuyForm((prev) => ({
+                ...prev,
+                asset,
+            }));
+            setRoute(routes.BUY);
+            return;
+        }
+        setSendForm((prev) => ({
+            ...prev,
+            asset,
+            amount: '', // Always reset amount when selecting a token
+        }));
+        setRoute(routes.SEND);
+    };
+    useEffect(() => {
+        triggerResize();
+    }, [selectableTokens.length, isBuyFlow]);
+    const renderContent = () => {
+        if (!selectableTokens.length) {
+            if (isBalancesLoading) {
+                return jsx(EmptyState, { children: "Loading balances\u2026" });
+            }
+            return jsx(EmptyState, { children: "No supported tokens found for this network yet." });
+        }
+        return (jsxs(TokenList, { children: [selectableTokens.map((token) => {
+                    var _a, _b, _c, _d, _e;
+                    const key = token.type === 'erc20' ? token.address : 'native';
+                    const displaySymbol = getAssetSymbol(token);
+                    const displayName = ((_a = token.metadata) === null || _a === void 0 ? void 0 : _a.name) || displaySymbol || 'Unknown Token';
+                    // const symbolKey = token.metadata?.symbol?.toUpperCase()
+                    const decimals = getAssetDecimals(token);
+                    const pricePerToken = (_c = (_b = token.metadata) === null || _b === void 0 ? void 0 : _b.fiat) === null || _c === void 0 ? void 0 : _c.value;
+                    let usdValue = null;
+                    // Show loading state for balances
+                    const isBalanceLoaded = token.balance !== undefined;
+                    const balanceDisplay = isBalanceLoaded
+                        ? formatBalanceWithSymbol(token.balance, decimals, ((_d = token.metadata) === null || _d === void 0 ? void 0 : _d.symbol) || '')
+                        : 'Loading...';
+                    // Check if token has zero balance (for send flow opacity)
+                    const hasZeroBalance = isBalanceLoaded && ((_e = token.balance) !== null && _e !== void 0 ? _e : ZERO) <= ZERO;
+                    if (hasZeroBalance && !viewAllAssets && !isBuyFlow)
+                        return null;
+                    const isDisabled = !isBuyFlow && hasZeroBalance;
+                    if (isBalanceLoaded && pricePerToken !== undefined && token.balance !== undefined) {
+                        const amount = parseFloat(formatUnits(token.balance, decimals));
+                        if (Number.isFinite(amount)) {
+                            const totalUsd = amount * pricePerToken;
+                            if (totalUsd >= 0.01) {
+                                usdValue = usdFormatter.format(totalUsd);
+                            }
+                            else if (totalUsd > 0) {
+                                usdValue = '<$0.01';
+                            }
+                            else {
+                                usdValue = usdFormatter.format(0);
+                            }
+                        }
+                    }
+                    return (jsxs(TokenButton, { type: "button", onClick: () => handleSelect(token), style: { opacity: isDisabled ? 0.4 : 1, cursor: isDisabled ? 'not-allowed' : 'pointer' }, children: [jsxs(TokenInfo, { children: [jsx(TokenSymbol, { children: displayName }), isBuyFlow && jsx(TokenName, { children: displaySymbol })] }), isBuyFlow ? (jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314" }) })) : (jsxs(TokenInfo, { children: [jsx(TokenBalance, { children: balanceDisplay }), usdValue ? jsx(TokenName, { style: { textAlign: 'end' }, children: usdValue }) : null] }))] }, key));
+                }), !isBuyFlow && (jsx(TextLinkButton, { type: "button", onClick: () => {
+                        setViewAllAssets(!viewAllAssets);
+                    }, children: viewAllAssets ? 'View less assets' : 'View all assets' }))] }));
+    };
+    return (jsxs(SelectTokenContent, { children: [jsx(ModalHeading, { children: "Select asset" }), renderContent()] }));
+};
+
+export { SelectToken as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/SelectToken/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/SelectToken/styles.js

@@ -0,0 +1,78 @@
+import styled from '../../../styles/styled/index.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const SelectTokenContent = styled(PageContent) `
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 16px;
+`;
+const TokenList = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 6px;
+  flex: 1;
+`;
+const TokenButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease;
+
+  &:hover {
+    background: var(--ck-secondary-button-hover-background);
+    border-color: var(--ck-body-color-muted);
+  }
+`;
+const TokenContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+`;
+const TokenInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+  text-align: right;
+`;
+const TokenSymbol = styled.span `
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+`;
+const TokenName = styled.span `
+  font-size: 13px;
+  color: var(--ck-body-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const TokenBalance = styled.span `
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+`;
+const EmptyState = styled.div `
+  margin-top: 28px;
+  font-size: 13px;
+  color: var(--ck-body-color-muted);
+  text-align: center;
+`;
+
+export { EmptyState, SelectTokenContent, TokenBalance, TokenButton, TokenContainer, TokenInfo, TokenList, TokenName, TokenSymbol };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/SelectToken/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/SelectWalletToRecover/index.d.ts

@@ -1,2 +1 @@
-declare const SelectWalletToRecover: React.FC;
-export default SelectWalletToRecover;
+export default function SelectWalletToRecover(): import("react/jsx-runtime").JSX.Element;