@openfort/react 0.3.1 → 1.0.0

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

@@ -0,0 +1,91 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useState, useEffect } from 'react';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { toSolanaUserWallet } from '../../../hooks/openfort/walletTypes.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { logger } from '../../../utils/logger.js';
+import Loader from '../../Common/Loading/index.js';
+import { recoverRoute, createRoute } from '../../Openfort/routeHelpers.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const handleSingleWalletRegistry = {
+    [ChainTypeEnum.SVM]: (w, chainType, setRoute) => {
+        const walletForRoute = toSolanaUserWallet(w);
+        setRoute(recoverRoute(chainType, walletForRoute));
+    },
+    [ChainTypeEnum.EVM]: (w, chainType, setRoute) => {
+        setRoute(recoverRoute(chainType, w));
+    },
+};
+const errorForChainRegistry = {
+    [ChainTypeEnum.SVM]: () => ({ isError: false, message: undefined }),
+    [ChainTypeEnum.EVM]: (errorWallets) => ({
+        isError: !!errorWallets,
+        message: (errorWallets === null || errorWallets === void 0 ? void 0 : errorWallets.message) || 'There was an error loading wallets',
+    }),
+};
+const LoadWallets = () => {
+    const { chainType } = useOpenfortCore();
+    const { user } = useOpenfortCore();
+    const { triggerResize, setRoute, setConnector } = useOpenfort();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const embeddedWallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const [loadingUX, setLoadingUX] = useState(true);
+    const wallets = embeddedWallet.wallets;
+    const isLoadingWallets = embeddedWallet.status === 'fetching-wallets' ||
+        embeddedWallet.status === 'connecting' ||
+        embeddedWallet.status === 'creating';
+    const errorWallets = embeddedWallet.status === 'error' ? new Error(embeddedWallet.error) : undefined;
+    useEffect(() => {
+        let timeout;
+        if (!isLoadingWallets) {
+            timeout = setTimeout(() => {
+                setLoadingUX(false);
+                triggerResize();
+            }, 500);
+        }
+        return () => clearTimeout(timeout);
+    }, [isLoadingWallets, triggerResize]);
+    useEffect(() => {
+        if (loadingUX)
+            return;
+        if (isLoadingWallets)
+            return;
+        if (!wallets) {
+            logger.error('Could not load wallets for user:', user);
+            return;
+        }
+        logger.log('User wallets loaded:', wallets.length);
+        if (wallets.length === 0) {
+            setRoute(createRoute(chainType));
+            return;
+        }
+        if (wallets.length === 1) {
+            const single = wallets[0];
+            const alreadyActive = embeddedWallet.status === 'connected' &&
+                embeddedWallet.address &&
+                (chainType === ChainTypeEnum.SVM
+                    ? embeddedWallet.address === single.address
+                    : embeddedWallet.address.toLowerCase() === single.address.toLowerCase());
+            if (alreadyActive) {
+                setRoute(chainType === ChainTypeEnum.SVM ? routes.SOL_CONNECTED : routes.ETH_CONNECTED);
+                return;
+            }
+            handleSingleWalletRegistry[chainType](single, chainType, setRoute, setConnector);
+            return;
+        }
+        setRoute(routes.SELECT_WALLET_TO_RECOVER);
+    }, [loadingUX, isLoadingWallets, wallets, user, chainType, setRoute, setConnector]);
+    const { isError: isErrorFromChain, message: errorMessageFromChain } = errorForChainRegistry[chainType](errorWallets);
+    const isError = !user || isErrorFromChain;
+    const errorMessage = !user ? undefined : errorMessageFromChain;
+    return (jsx(PageContent, { onBack: !user ? 'back' : null, children: jsx(Loader, { header: "Setting up wallet", isError: isError, description: isError ? errorMessage : 'Setting up wallets' }) }));
+};
+
+export { LoadWallets as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import React, { useEffect } from 'react';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import Loader from '../../Common/Loading/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const Loading = () => {
+    const { setRoute, walletConfig } = useOpenfort();
+    const { user, isLoadingAccounts, needsRecovery } = useOpenfortCore();
+    const { chainType } = useOpenfortCore();
+    // Use chain-specific hooks
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const wallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const isConnected = wallet.status === 'connected';
+    const address = isConnected ? wallet.address : undefined;
+    const [isFirstFrame, setIsFirstFrame] = React.useState(true);
+    const [retryCount, setRetryCount] = React.useState(0);
+    useEffect(() => {
+        if (isFirstFrame)
+            return;
+        if (isLoadingAccounts)
+            return;
+        else if (!user)
+            setRoute(routes.PROVIDERS);
+        else if (!address) {
+            if (!walletConfig)
+                setRoute({ route: routes.CONNECTORS, connectType: 'connect' });
+            else
+                setRoute(routes.LOAD_WALLETS);
+        }
+        else if (needsRecovery) {
+            if (!walletConfig)
+                setRoute({ route: routes.CONNECTORS, connectType: 'connect' });
+            else
+                setRoute(routes.LOAD_WALLETS);
+        }
+        else
+            setRoute(routes.CONNECTED);
+    }, [isLoadingAccounts, user, address, needsRecovery, isFirstFrame, retryCount]);
+    // Retry every 250ms
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setRetryCount((r) => r + 1);
+        }, 250);
+        return () => clearInterval(interval);
+    }, []);
+    useEffect(() => {
+        // UX: Wait a bit before showing the next page
+        setTimeout(() => setIsFirstFrame(false), 400);
+    }, []);
+    return (jsx(PageContent, { children: jsx(Loader, { header: "Redirecting" }) }));
+};
+
+export { Loading as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import useLocales from '../../../hooks/useLocales.js';
+import { useWalletConnectModal } from '../../../hooks/useWalletConnectModal.js';
+import { useExternalConnectors } from '../../../wallets/useExternalConnectors.js';
+import { walletConfigs } from '../../../wallets/walletConfigs.js';
+import { CopyButton } from '../../Common/CopyToClipboard/CopyButton.js';
+import { ModalContent } from '../../Common/Modal/styles.js';
+import { ScrollArea } from '../../Common/ScrollArea/index.js';
+import { Spinner } from '../../Common/Spinner/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from './styles.js';
+
+const MoreIcon = (jsxs("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "More wallets icon" }), jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" })] }));
+const MobileConnectors = () => {
+    var _a;
+    const context = useOpenfort();
+    const locales = useLocales();
+    const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
+    const wallets = useExternalConnectors();
+    // filter out installed wallets
+    const walletsIdsToDisplay = (_a = Object.keys(walletConfigs).filter((walletId) => {
+        const wallet = walletConfigs[walletId];
+        if (wallets.find((w) => w.connector.id === walletId))
+            return false;
+        if (!wallet.getWalletConnectDeeplink)
+            return false;
+        return true;
+    })) !== null && _a !== void 0 ? _a : [];
+    const connectWallet = (walletId) => {
+        context.setRoute(routes.CONNECT_WITH_MOBILE);
+        context.setConnector({ id: walletId });
+    };
+    return (jsx(PageContent, { width: 312, onBack: routes.PROVIDERS, children: jsxs(Container, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { children: [walletsIdsToDisplay
+                                    .sort(
+                                // sort by name
+                                (a, b) => {
+                                    var _a, _b, _c, _d;
+                                    const walletA = walletConfigs[a];
+                                    const walletB = walletConfigs[b];
+                                    const nameA = (_b = (_a = walletA.name) !== null && _a !== void 0 ? _a : walletA.shortName) !== null && _b !== void 0 ? _b : a;
+                                    const nameB = (_d = (_c = walletB.name) !== null && _c !== void 0 ? _c : walletB.shortName) !== null && _d !== void 0 ? _d : b;
+                                    return nameA.localeCompare(nameB);
+                                })
+                                    .filter((walletId) => !(walletId === 'coinbaseWallet' || walletId === 'com.coinbase.wallet'))
+                                    .map((walletId, i) => {
+                                    const wallet = walletConfigs[walletId];
+                                    const { name, shortName, iconConnector, icon } = wallet;
+                                    return (jsxs(WalletItem, { onClick: () => connectWallet(walletId), style: {
+                                            animationDelay: `${i * 50}ms`,
+                                        }, children: [jsx(WalletIcon, { "$outline": true, children: iconConnector !== null && iconConnector !== void 0 ? iconConnector : icon }), jsx(WalletLabel, { children: shortName !== null && shortName !== void 0 ? shortName : name })] }, walletId));
+                                }), jsxs(WalletItem, { onClick: openW3M, "$waiting": isOpenW3M, children: [jsx(WalletIcon, { style: { background: 'var(--ck-body-background-secondary)' }, children: isOpenW3M ? (jsx("div", { style: {
+                                                    position: 'absolute',
+                                                    inset: 0,
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                }, children: jsx("div", { style: {
+                                                        width: '50%',
+                                                    }, children: jsx(Spinner, {}) }) })) : (MoreIcon) }), jsx(WalletLabel, { children: locales.more })] })] }) }) }), context.uiConfig.walletConnectCTA !== 'modal' && (jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 14,
+                        paddingTop: 8,
+                    }, children: jsx(CopyButton, { value: "", children: locales.copyToClipboard }) }))] }) }));
+};
+
+export { MobileConnectors as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,65 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const WalletItem = styled.div `
+  text-align: center;
+  transition: opacity 100ms ease;
+  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
+`;
+const WalletIcon = styled.div `
+  z-index: 9;
+  position: relative;
+  margin: 0 auto 10px;
+  border-radius: 16px;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.04);
+  ${(props) => props.$outline &&
+    `
+  &:before {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+  }`}
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+`;
+const WalletLabel = styled.div `
+  color: var(--ck-body-color);
+  font-size: 13px;
+  line-height: 15px;
+  font-weight: 500;
+  opacity: 0.75;
+`;
+const PulseKeyframes = keyframes `
+  0%,100% { opacity:1; }
+  50% { opacity:0.5; }
+`;
+const WalletList = styled.div `
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 22px 8px;
+  margin: 0 -10px;
+  padding: 4px 0 0;
+  transition: opacity 300ms ease;
+  ${(props) => props.$disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+      ${WalletItem} {
+        animation: ${PulseKeyframes} 1s infinite ease-in-out;
+      }
+    `}
+`;
+const Container = styled.div ``;
+
+export { Container, WalletIcon, WalletItem, WalletLabel, WalletList };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { BuyIcon, DollarIcon, ReceiveIcon } from '../../../assets/icons.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import Button from '../../Common/Button/index.js';
+import { ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.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 { ButtonsContainer } from './styles.js';
+
+const NoAssetsAvailable = () => {
+    const { setRoute, chains } = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    // Use chain-specific hooks
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const wallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const chainId = wallet.status === 'connected' && chainType === ChainTypeEnum.EVM
+        ? wallet.chainId
+        : undefined;
+    const chain = chains.find((c) => c.id === chainId);
+    const showBuyOption = chain && !chain.testnet;
+    return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "190px", logoCenter: {
+                    logo: jsx(BuyIcon, {}),
+                }, logoTopLeft: {
+                    logo: jsx(BuyIcon, {}),
+                }, logoBottomRight: {
+                    logo: jsx(BuyIcon, {}),
+                }, logoTopRight: {
+                    logo: jsx(DollarIcon, {}),
+                }, logoBottomLeft: {
+                    logo: jsx(DollarIcon, {}),
+                } }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { "$small": true, children: "No assets available" }), jsxs(ModalBody, { children: [jsx("div", { style: { paddingRight: 12, paddingLeft: 12 }, children: "You currently have no assets available in your wallet." }), jsxs(ButtonsContainer, { children: [jsx(Button, { onClick: () => {
+                                            setRoute(routes.RECEIVE);
+                                        }, icon: jsx(ReceiveIcon, {}), children: "Get assets" }), showBuyOption && (jsx(Button, { onClick: () => {
+                                            setRoute(routes.BUY);
+                                        }, icon: jsx(BuyIcon, {}), children: "Buy assets" }))] })] })] })] }));
+};
+
+export { NoAssetsAvailable };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,10 @@
+import styled from '../../../styles/styled/index.js';
+
+const ButtonsContainer = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+`;
+
+export { ButtonsContainer };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Logos from '../../../assets/logos.js';
+import wave from '../../../assets/wave.js';
+import useLocales from '../../../hooks/useLocales.js';
+import Button from '../../Common/Button/index.js';
+import { ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import { Graphic, LogoGroup, Logo, LogoPosition, LogoInner, FloatWrapper, RotateWrapper, LogoGraphic, GraphicBackground } from '../../FloatingGraphic/styles.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const Introduction = () => {
+    var _a;
+    const context = useOpenfort();
+    const locales = useLocales({});
+    const ctaUrl = (_a = context.uiConfig.walletOnboardingUrl) !== null && _a !== void 0 ? _a : locales.onboardingScreen_ctaUrl;
+    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Trust, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Argent, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+};
+
+export { Introduction as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { PhoneIcon } from '../../../assets/icons.js';
+import { usePhoneOtpAuth } from '../../../hooks/openfort/auth/usePhoneOtpAuth.js';
+import { useUser } from '../../../hooks/openfort/useUser.js';
+import { logger } from '../../../utils/logger.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { OtpInputStandalone } from '../../Common/OTPInput/index.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/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 './styles.js';
+
+const RESEND_COOLDOWN_MS = 10000;
+const SUCCESS_REDIRECT_DELAY_MS = 2000;
+const ERROR_DISPLAY_DURATION_MS = 2000;
+const PhoneOTP = () => {
+    const { phoneInput: phone, setPhoneInput, setRoute } = useOpenfort();
+    const { isLoading, requestPhoneOtp, logInWithPhoneOtp, linkPhoneOtp } = usePhoneOtpAuth({
+        recoverWalletAutomatically: false,
+    });
+    const { user } = useUser();
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    const [status, setStatus] = useState('idle');
+    const [errorMessage, setErrorMessage] = useState(null);
+    // Single ref to track if initial OTP request has been made
+    const hasRequestedInitialOtpRef = useRef(false);
+    // Memoize the OTP request function to prevent unnecessary recreations
+    const sendOtpRequest = useCallback(async () => {
+        const { error } = await requestPhoneOtp({ phoneNumber: phone });
+        if (error) {
+            logger.error('Error requesting phone OTP:', error);
+            setStatus('error');
+        }
+        else {
+            setStatus('idle');
+        }
+    }, [phone, requestPhoneOtp]);
+    // Initial OTP request on mount
+    useEffect(() => {
+        if (hasRequestedInitialOtpRef.current)
+            return;
+        hasRequestedInitialOtpRef.current = true;
+        sendOtpRequest();
+    }, [sendOtpRequest]);
+    // Handle OTP completion
+    const handleComplete = useCallback(async (otp) => {
+        logger.log('OTP entered:', otp);
+        setStatus('loading');
+        let error = null;
+        if (user) {
+            const { error: linkError } = await linkPhoneOtp({ phoneNumber: phone, otp });
+            error = linkError;
+        }
+        else {
+            const { error: loginError } = await logInWithPhoneOtp({ phoneNumber: phone, otp });
+            error = loginError;
+        }
+        if (error) {
+            logger.error('Error verifying phone OTP:', error);
+            setStatus('error');
+            if (error.message === 'Invalid OTP') {
+                setErrorMessage('Invalid code. Please try again.');
+            }
+            else {
+                setErrorMessage('Verification failed. Please try again.');
+            }
+        }
+        else {
+            setStatus('success');
+        }
+    }, [phone, logInWithPhoneOtp]);
+    // Handle status changes and side effects
+    useEffect(() => {
+        let timeoutId;
+        switch (status) {
+            case 'send-otp':
+                setStatus('sending-otp');
+                sendOtpRequest();
+                break;
+            case 'success':
+                timeoutId = setTimeout(() => {
+                    setPhoneInput('');
+                    setRoute(routes.LOAD_WALLETS);
+                }, SUCCESS_REDIRECT_DELAY_MS);
+                break;
+            case 'error':
+                timeoutId = setTimeout(() => {
+                    setStatus('idle');
+                }, ERROR_DISPLAY_DURATION_MS);
+                break;
+        }
+        return () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [status, sendOtpRequest, setPhoneInput, setRoute]);
+    // Handle resend cooldown
+    useEffect(() => {
+        if (canSendOtp)
+            return;
+        const timerId = setTimeout(() => {
+            setCanSendOtp(true);
+        }, RESEND_COOLDOWN_MS);
+        return () => clearTimeout(timerId);
+    }, [canSendOtp]);
+    // Memoize button text to avoid recalculation
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (status === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, status]);
+    const handleResendClick = useCallback(() => {
+        setStatus('send-otp');
+        setCanSendOtp(false);
+    }, []);
+    const isResendDisabled = !canSendOtp || status === 'sending-otp' || status === 'send-otp';
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                    logo: jsx(PhoneIcon, {}),
+                } }), jsxs(ModalBody, { children: [jsxs(Body, { children: ["Please check ", jsx("b", { children: phone }), " for an SMS and enter your code below."] }), jsx(OtpInputStandalone, { onComplete: handleComplete, isLoading: status === 'loading' || isLoading, isError: status === 'error', isSuccess: status === 'success' }), jsxs(ResultContainer, { children: [status === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), status === 'error' && jsx(ModalBody, { "$error": true, children: errorMessage || 'Invalid code. Please try again.' })] }), jsxs(FooterTextButton, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] }), jsx(PoweredByFooter, {})] }));
+};
+
+export { PhoneOTP as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,38 @@
+import styled from '../../../styles/styled/index.js';
+
+const Body = styled.p `
+  color: var(--ck-body-color);
+  text-align: center;
+  margin-bottom: 16px;
+`;
+const ResultContainer = styled.div `
+  margin-top: 16px;
+  height: 24px;
+  text-align: center;
+`;
+const FooterButtonText = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--ck-body-color-muted);
+  transition: color 0.3s;
+
+  &:disabled {
+    color: var(--ck-body-color-muted) !important;
+    cursor: not-allowed;
+  }
+`;
+const FooterTextButton = styled.p `
+  color: var(--ck-body-color-muted);
+  text-align: center;
+  margin-top: 16px;
+  &:hover {
+    ${FooterButtonText} {
+      color: var(--ck-body-color);
+    }
+  }
+`;
+
+export { Body, FooterButtonText, FooterTextButton, ResultContainer };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { GuestIcon, KeyIcon, DisconnectIcon } from '../../../assets/icons.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { LargeButton } from '../../Common/LargeButton/index.js';
+import { ModalContent, ModalHeading } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { DisconnectButton } from '../Connected/styles.js';
+
+const Profile = () => {
+    const { setOpen, setRoute } = useOpenfort();
+    const { logout } = useOpenfortCore();
+    const locales = useLocales();
+    const [shouldDisconnect, setShouldDisconnect] = useState(false);
+    useEffect(() => {
+        if (!shouldDisconnect)
+            return;
+        // Close before disconnecting to avoid layout shifting while modal is still open
+        setOpen(false);
+        return () => {
+            logout();
+        };
+    }, [shouldDisconnect, setOpen, logout]);
+    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsxs(ModalContent, { children: [jsx(ModalHeading, { children: "Profile" }), jsxs("div", { children: [jsx(LargeButton, { onClick: () => {
+                                    setRoute(routes.LINKED_PROVIDERS);
+                                }, icon: jsx(GuestIcon, {}), children: "Authentication methods" }), jsx(LargeButton, { onClick: () => {
+                                    setRoute(routes.EXPORT_KEY);
+                                }, icon: jsx(KeyIcon, {}), children: "Export key" })] })] }), jsx(DisconnectButton, { onClick: () => setShouldDisconnect(true), icon: jsx(DisconnectIcon, {}), children: locales.disconnect })] }));
+};
+
+export { Profile as default };
+//# sourceMappingURL=index.js.map

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

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