@n1xyz/wallet-widget 0.0.1 → 0.0.5

package/dist/Modal/N1WalletModal.js

@@ -35,42 +35,35 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, lazy, Suspense } from 'react';
+import { bs58Decode, getEd25519PublicKey, signEd25519 } from '@n1xyz/nts-sdk';
+import { lazy, Suspense, useEffect, useState } from 'react';
+import { ANIMATION_EASE, } from './NordFlow/constants';
+import { WalletError, WalletErrorCode } from '../errors/types';
+import { getSessionKeysFromLocalStorage, getUser, getUserBalances } from '../Logic/utils';
 import { useN1WalletContext, useN1WalletInternalContext, } from '../Provider/hooks';
-import { createWebSession, getSessionKeysFromLocalStorage, getUser, } from '../Logic/utils';
-import { getEd25519PublicKey, signEd25519, bs58Decode } from '@n1xyz/nts-sdk';
-import { N1ModalViewMode } from '../Provider/types';
+import { N1ModalViewMode, N1SessionMode } from '../Provider/types';
 import { logger } from '../utils/logger';
-import { WalletError, WalletErrorCode } from '../errors/types';
+import { LoadingFallback } from './LoadingFallback';
 // Lazy load components
-var ConnectView = lazy(function () {
-    return import('./ConnectView').then(function (mod) { return ({ default: mod.ConnectView }); });
-});
-var CreateSessionView = lazy(function () {
-    return import('./CreateSessionView').then(function (mod) { return ({
-        default: mod.CreateSessionView,
-    }); });
-});
-var SigningView = lazy(function () {
-    return import('./SigningView').then(function (mod) { return ({ default: mod.SigningView }); });
-});
-var CreateUserView = lazy(function () {
-    return import('./CreateUserView').then(function (mod) { return ({ default: mod.CreateUserView }); });
-});
-var SuccessView = lazy(function () {
-    return import('./SuccessView').then(function (mod) { return ({ default: mod.SuccessView }); });
-});
 var N1Sidebar = lazy(function () {
     return import('./Sidebar/N1Sidebar').then(function (mod) { return ({ default: mod.N1Sidebar }); });
 });
-var NoWhitelistView = lazy(function () {
-    return import('./NoWhitelistView').then(function (mod) { return ({ default: mod.NoWhitelistView }); });
+// Lazy load the NTSFlow component
+var NTSFlow = lazy(function () {
+    return import('./NTSFlow').then(function (mod) { return ({
+        default: mod.NTSFlow,
+    }); });
+});
+// Lazy load the NordFlow component
+var NordFlow = lazy(function () {
+    return import('./NordFlow/NordFlow').then(function (mod) { return ({
+        default: mod.NordFlow,
+    }); });
 });
-var LoadingFallback = function () { return (_jsx("div", { className: "flex items-center justify-center w-full h-full", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-white" }) })); };
 export function N1WalletModal() {
     var _this = this;
     var _a = useN1WalletContext(), showLogin = _a.showLogin, setShowLogin = _a.setShowLogin, viewMode = _a.viewMode;
-    var _b = useN1WalletInternalContext(), setViewMode = _b.setViewMode, setUsername = _b.setUsername, setSessionPubKey = _b.setSessionPubKey, setSignMessageWithSessionKey = _b.setSignMessageWithSessionKey, setIsConnected = _b.setIsConnected, setWalletPubKey = _b.setWalletPubKey, setStartClosingLogin = _b.setStartClosingLogin, startClosingLogin = _b.startClosingLogin, setLoading = _b.setLoading, setAddress = _b.setAddress, dynamicWallet = _b.dynamicWallet, dynamicSdkHasLoaded = _b.dynamicSdkHasLoaded, darkMode = _b.darkMode, handleError = _b.handleError, showSidebar = _b.showSidebar;
+    var _b = useN1WalletInternalContext(), setBalances = _b.setBalances, setViewMode = _b.setViewMode, setUsername = _b.setUsername, setSessionPubKey = _b.setSessionPubKey, setSignMessageWithSessionKey = _b.setSignMessageWithSessionKey, setIsConnected = _b.setIsConnected, setWalletPubKey = _b.setWalletPubKey, setStartClosingLogin = _b.setStartClosingLogin, startClosingLogin = _b.startClosingLogin, setLoading = _b.setLoading, setAddress = _b.setAddress, dynamicWallet = _b.dynamicWallet, dynamicSdkHasLoaded = _b.dynamicSdkHasLoaded, darkMode = _b.darkMode, handleError = _b.handleError, showSidebar = _b.showSidebar, sessionMode = _b.sessionMode;
     var _c = useState(false), showLoginAnimation = _c[0], setShowLoginAnimation = _c[1];
     // Handle loading state
     useEffect(function () {
@@ -80,9 +73,9 @@ export function N1WalletModal() {
     }, [dynamicSdkHasLoaded, dynamicWallet]);
     // Initialize session when wallet is connected
     useEffect(function () {
-        logger.debug('N1WalletModal attempt to call initializeSession...');
+        logger.debug('N1WalletModal attempt to call initializeSession...', dynamicWallet, viewMode, sessionMode);
         var initializeSession = function () { return __awaiter(_this, void 0, void 0, function () {
-            var response, whitelistData, walletPubKey, sessionData_1, sessionPubKey, signFn_1, user, storedUsername, username, error_1, error_2;
+            var response, whitelistData, walletPubKey, sessionData_1, sessionPubKey_1, signFn_1, userData, balances, error_1, error_2, error_3;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -91,9 +84,13 @@ export function N1WalletModal() {
                         if (!dynamicWallet || viewMode !== N1ModalViewMode.Connect) {
                             return [2 /*return*/];
                         }
+                        // For Nord mode, we don't need to execute the NTS flow
+                        if (sessionMode === N1SessionMode.Nord) {
+                            return [2 /*return*/];
+                        }
                         _a.label = 1;
                     case 1:
-                        _a.trys.push([1, 12, , 13]);
+                        _a.trys.push([1, 17, , 18]);
                         logger.debug('Initialize Session...');
                         if (!dynamicWallet) return [3 /*break*/, 4];
                         return [4 /*yield*/, fetch('https://argus-1g4n.onrender.com/api/db/verifyWhitelist', {
@@ -119,7 +116,7 @@ export function N1WalletModal() {
                         console.log('Session Initialization started');
                         _a.label = 5;
                     case 5:
-                        _a.trys.push([5, 9, 10, 11]);
+                        _a.trys.push([5, , 15, 16]);
                         walletPubKey = dynamicWallet.chain === 'SOL'
                             ? bs58Decode(dynamicWallet.address)
                             : Uint8Array.from(Buffer.from(dynamicWallet.address.slice(2), 'hex'));
@@ -134,77 +131,92 @@ export function N1WalletModal() {
                         logger.debug('Session time', new Date(sessionData_1.createdAt).getTime());
                         logger.debug('Current time', Date.now());
                         if (new Date(sessionData_1.createdAt).getTime() <
-                            Date.now() - 1000 * 60 * 60 * 24 * 30) {
-                            logger.info('Session expired');
-                            // TODO: create a welcome back view + allow them to logout
-                            // Since we know the wallet already, we only need a new session key
+                            Date.now() - 30 * 24 * 60 * 60 * 1000) {
+                            // Session expired (older than 30 days)
+                            logger.info('Session expired, transitioning to CreateSession', new Date(sessionData_1.createdAt));
                             setViewMode(N1ModalViewMode.CreateSession);
                             return [2 /*return*/];
                         }
+                        // Use existing session
+                        logger.info('Using existing session');
                         return [4 /*yield*/, getEd25519PublicKey(sessionData_1.ed25519PrivateKey)];
                     case 6:
-                        sessionPubKey = _a.sent();
-                        logger.debug('Initializing with existing session key');
-                        setSessionPubKey(sessionPubKey);
+                        sessionPubKey_1 = _a.sent();
+                        setSessionPubKey(sessionPubKey_1);
                         signFn_1 = function (message) { return __awaiter(_this, void 0, void 0, function () {
+                            var signature;
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0:
-                                        console.log('zhoooooo');
-                                        console.log('signFn called', {
-                                            message: message,
-                                            stack: new Error().stack, // This will show the call stack
-                                        });
+                                        logger.debug('signFn', { message: message });
                                         return [4 /*yield*/, signEd25519(message, sessionData_1.ed25519PrivateKey)];
-                                    case 1: return [2 /*return*/, _a.sent()];
+                                    case 1:
+                                        signature = _a.sent();
+                                        return [2 /*return*/, {
+                                                signature: signature,
+                                                pubKey: sessionPubKey_1,
+                                            }];
                                 }
                             });
                         }); };
-                        console.log('zeeeeebrta');
                         setSignMessageWithSessionKey(function () { return signFn_1; });
-                        setAddress(dynamicWallet.address);
-                        // Create web session and get user data
-                        return [4 /*yield*/, createWebSession(signFn_1, sessionPubKey, walletPubKey)];
+                        _a.label = 7;
                     case 7:
-                        // Create web session and get user data
-                        _a.sent();
+                        _a.trys.push([7, 13, , 14]);
+                        logger.debug('Fetching user data');
                         return [4 /*yield*/, getUser()];
                     case 8:
-                        user = _a.sent();
-                        storedUsername = localStorage.getItem("n1_".concat(dynamicWallet.address, "_username"));
-                        if ((user === null || user === void 0 ? void 0 : user.name) || storedUsername) {
-                            logger.info('User found, completing login');
-                            username = (user === null || user === void 0 ? void 0 : user.name) || storedUsername;
-                            setIsConnected(true);
-                            setUsername(username);
-                            localStorage.setItem("n1_".concat(dynamicWallet.address, "_username"), username);
-                            setStartClosingLogin(true);
-                        }
-                        else {
-                            logger.info('No user found, transitioning to CreateUser');
+                        userData = _a.sent();
+                        logger.debug('User data:', userData);
+                        if (!userData) {
+                            logger.info('No user data found, transitioning to CreatingUser');
                             setViewMode(N1ModalViewMode.CreatingUser);
+                            return [2 /*return*/];
                         }
-                        return [3 /*break*/, 11];
+                        // User exists, set data and check balances
+                        setUsername(userData.name || '');
+                        setAddress(dynamicWallet.address);
+                        setWalletPubKey(walletPubKey);
+                        setIsConnected(true);
+                        _a.label = 9;
                     case 9:
-                        error_1 = _a.sent();
-                        logger.error('Session initialization failed:', error_1);
-                        handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Failed to initialize session', { originalError: error_1 }));
-                        return [3 /*break*/, 11];
+                        _a.trys.push([9, 11, , 12]);
+                        return [4 /*yield*/, getUserBalances(dynamicWallet.address)];
                     case 10:
-                        logger.groupEnd();
-                        return [7 /*endfinally*/];
-                    case 11: return [3 /*break*/, 13];
+                        balances = _a.sent();
+                        logger.debug('User balances:', balances);
+                        setBalances(balances);
+                        return [3 /*break*/, 12];
+                    case 11:
+                        error_1 = _a.sent();
+                        logger.error('Error fetching balances:', error_1);
+                        return [3 /*break*/, 12];
                     case 12:
+                        // Success!
+                        setViewMode(N1ModalViewMode.Success);
+                        return [3 /*break*/, 14];
+                    case 13:
                         error_2 = _a.sent();
-                        logger.error('Whitelist check failed:', error_2);
-                        handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Failed to check whitelist', { originalError: error_2 }));
-                        return [3 /*break*/, 13];
-                    case 13: return [2 /*return*/];
+                        logger.error('Error fetching user:', error_2);
+                        throw new WalletError(WalletErrorCode.USER_FETCH_FAILED, 'Failed to fetch user data');
+                    case 14: return [3 /*break*/, 16];
+                    case 15:
+                        logger.groupEnd();
+                        return [7 /*endfinally*/];
+                    case 16: return [3 /*break*/, 18];
+                    case 17:
+                        error_3 = _a.sent();
+                        logger.error('Error in session initialization:', error_3);
+                        handleError(error_3 instanceof WalletError
+                            ? error_3
+                            : new WalletError(WalletErrorCode.SESSION_INITIALIZATION_FAILED, 'Failed to initialize session'));
+                        return [3 /*break*/, 18];
+                    case 18: return [2 /*return*/];
                 }
             });
         }); };
         initializeSession();
-    }, [dynamicWallet, dynamicSdkHasLoaded, viewMode]);
+    }, [dynamicWallet, dynamicSdkHasLoaded, viewMode, sessionMode]);
     // Handle modal visibility
     useEffect(function () {
         if (showLogin) {
@@ -222,11 +234,11 @@ export function N1WalletModal() {
             return function () { return clearTimeout(timeout_1); };
         }
     }, [startClosingLogin, setShowLogin, setStartClosingLogin]);
+    // Handle modal close for Nord mode
+    var handleNordFlowClose = function () {
+        setStartClosingLogin(true);
+    };
     if (!showLogin && !showSidebar)
         return null;
-    console.log('SHOW', showSidebar);
-    return (_jsxs("div", { className: darkMode ? 'dark' : '', children: [showLogin && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: _jsx("div", { className: "duration-500 ease-in-out font-monument w-screen h-screen fixed top-0 left-0 flex items-center justify-center z-100 ".concat(showLoginAnimation ? 'opacity-100' : 'opacity-0'), style: {
-                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                        backdropFilter: 'blur(4px)',
-                    }, children: _jsxs(Suspense, { fallback: _jsx(LoadingFallback, {}), children: [viewMode === N1ModalViewMode.Connect && _jsx(ConnectView, {}), viewMode === N1ModalViewMode.CreateSession && (_jsx(CreateSessionView, {})), viewMode === N1ModalViewMode.Signing && _jsx(SigningView, {}), viewMode === N1ModalViewMode.CreatingUser && _jsx(CreateUserView, {}), viewMode === N1ModalViewMode.Success && _jsx(SuccessView, {}), viewMode === N1ModalViewMode.NoWhitelist && _jsx(NoWhitelistView, {})] }) }) })), _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: _jsx(N1Sidebar, {}) })] }));
+    return (_jsxs("div", { className: darkMode ? 'dark' : '', children: [showLogin && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center w-full h-full", children: [_jsx("div", { className: "\n               fixed inset-0 w-full h-full bg-black/20 dark:bg-black/40 backdrop-blur-sm\n               transition-all duration-500 ".concat(ANIMATION_EASE, "\n               ").concat(showLoginAnimation ? 'opacity-100' : 'opacity-0', "\n            "), onClick: function () { return setStartClosingLogin(true); } }), _jsx("div", { className: "\n              relative z-50 transition-all duration-500 ".concat(ANIMATION_EASE, "\n              ").concat(showLoginAnimation ? 'opacity-100 scale-100' : 'opacity-0 scale-95', "\n            "), children: sessionMode === N1SessionMode.Nord ? (_jsx(NordFlow, { onClose: handleNordFlowClose })) : (_jsx(NTSFlow, {})) })] })), _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: _jsx(N1Sidebar, {}) })] }));
 }

package/dist/Modal/NTSFlow/LoadingFallback.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LoadingFallback: React.FC;

package/dist/Modal/NTSFlow/LoadingFallback.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var LoadingFallback = function () { return (_jsx("div", { className: "flex items-center justify-center w-full h-full", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-200 dark:border-gray-800" }) })); };

package/dist/Modal/NTSFlow/NTSFlow.d.ts

@@ -0,0 +1,4 @@
+interface NTSFlowProps {
+}
+export declare function NTSFlow({}: NTSFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Modal/NTSFlow/NTSFlow.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense } from 'react';
+import { useN1WalletContext } from '../../Provider/hooks';
+import { N1ModalViewMode } from '../../Provider/types';
+import { LoadingFallback } from './LoadingFallback';
+// Lazy load components
+var ConnectView = lazy(function () {
+    return import('./views/ConnectView').then(function (mod) { return ({ default: mod.ConnectView }); });
+});
+var CreateSessionView = lazy(function () {
+    return import('./views/CreateSessionView').then(function (mod) { return ({
+        default: mod.CreateSessionView,
+    }); });
+});
+var SigningView = lazy(function () {
+    return import('./views/SigningView').then(function (mod) { return ({ default: mod.SigningView }); });
+});
+var CreateUserView = lazy(function () {
+    return import('./views/CreateUserView').then(function (mod) { return ({ default: mod.CreateUserView }); });
+});
+var SuccessView = lazy(function () {
+    return import('./views/SuccessView').then(function (mod) { return ({ default: mod.SuccessView }); });
+});
+var NoWhitelistView = lazy(function () {
+    return import('./views/NoWhitelistView').then(function (mod) { return ({ default: mod.NoWhitelistView }); });
+});
+export function NTSFlow(_a) {
+    var viewMode = useN1WalletContext().viewMode;
+    return (_jsxs(Suspense, { fallback: _jsx(LoadingFallback, {}), children: [viewMode === N1ModalViewMode.Connect && _jsx(ConnectView, {}), viewMode === N1ModalViewMode.CreateSession && (_jsx(CreateSessionView, {})), viewMode === N1ModalViewMode.Signing && _jsx(SigningView, {}), viewMode === N1ModalViewMode.CreatingUser && (_jsx(CreateUserView, {})), viewMode === N1ModalViewMode.Success && _jsx(SuccessView, {}), viewMode === N1ModalViewMode.NoWhitelist && (_jsx(NoWhitelistView, {}))] }));
+}

package/dist/Modal/NTSFlow/NordFlow/WalletConnectionFlow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface WalletConnectionFlowProps {
+    onClose?: () => void;
+}
+/**
+ * Main component for the wallet connection flow
+ */
+export declare const WalletConnectionFlow: React.FC<WalletConnectionFlowProps>;
+export {};

package/dist/Modal/NTSFlow/NordFlow/WalletConnectionFlow.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import Logo from '../components/Logo';
+import { CHAINS } from './constants';
+import { useDepositFlow, useFlowState, useInterruptHandler, useNordSession, useWalletConnect } from './hooks';
+import { AmountInputScreen, AuthLoadingScreen, ChainSelectionScreen, ConnectWalletScreen, DepositProgressScreen, DepositSuccessScreen, ErrorScreen, EvmWalletAuthScreen, FinalSuccessScreen, NordAuthScreen } from './screens';
+import { FlowState } from './types';
+var ConfirmationDialog = function (_a) {
+    var onConfirm = _a.onConfirm, onCancel = _a.onCancel;
+    return (_jsx("div", { className: "fixed inset-0 bg-gray-50 dark:bg-gray-950 flex items-center justify-center z-50 font-era overflow-auto", children: _jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity] animate-fade-in", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx("div", { className: "flex items-center justify-between", children: _jsx("div", { className: "flex items-center gap-3", children: _jsx("h2", { className: "text-xl text-gray-700 dark:text-gray-300", children: "Confirm Close" }) }) }) }), _jsxs("div", { className: "p-6 overflow-hidden relative", children: [_jsx("p", { className: "text-gray-700 dark:text-gray-300 text-center mb-6", children: "Are you sure you want to close? This operation is in progress." }), _jsxs("div", { className: "flex flex-col space-y-3", children: [_jsx("button", { onClick: onConfirm, className: "group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center \n            transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\n            cursor-pointer border-gray-200 dark:border-neutral-800 hover:border-gray-400 dark:hover:border-white/60\n            text-gray-800 dark:text-gray-200", children: "Yes, close" }), _jsx("button", { onClick: onCancel, className: "group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center \n            transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\n            cursor-pointer border-gray-200 dark:border-neutral-800 hover:border-gray-400 dark:hover:border-white/60\n            text-gray-800 dark:text-gray-200", children: "No, continue" })] })] })] }) }));
+};
+/**
+ * Main component for the wallet connection flow
+ */
+export var WalletConnectionFlow = function (_a) {
+    var onClose = _a.onClose;
+    // Handle state changes
+    var handleStateChange = useCallback(function (newState, prevState) {
+        console.log("State changed from ".concat(prevState, " to ").concat(newState));
+    }, []);
+    // Handle errors
+    var handleError = useCallback(function (error) {
+        console.error('Flow error:', error);
+    }, []);
+    // Initialize flow state
+    var _b = useFlowState({
+        autoRecover: false, // We'll handle recovery with a prompt
+        onStateChange: handleStateChange,
+        onError: handleError,
+    }), state = _b.state, context = _b.context, transition = _b.transition, updateContext = _b.updateContext, recover = _b.recover, recordInterruption = _b.recordInterruption, handleFlowError = _b.handleError, isRecoveryAvailable = _b.isRecoveryAvailable;
+    // Initialize wallet connection
+    var _c = useWalletConnect({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+    }), isConnecting = _c.isConnecting, connectWallet = _c.connectWallet;
+    // Initialize Nord session
+    var hasNordAccount = useNordSession({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+    }).hasNordAccount;
+    // Initialize deposit flow
+    var _d = useDepositFlow({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+        updateContext: updateContext,
+    }), selectedChain = _d.selectedChain, amount = _d.amount, isDepositing = _d.isDepositing, transactionId = _d.transactionId, selectChain = _d.selectChain, updateAmount = _d.updateAmount, startDeposit = _d.startDeposit, goBackToChainSelection = _d.goBackToChainSelection;
+    // Initialize interrupt handler
+    var _e = useInterruptHandler({
+        state: state,
+        recordInterruption: recordInterruption,
+        onClose: onClose,
+    }), isClosing = _e.isClosing, showConfirmation = _e.showConfirmation, handleCloseRequest = _e.handleCloseRequest, confirmClose = _e.confirmClose, cancelClose = _e.cancelClose;
+    // Check for recovery on mount
+    var _f = useState(false), hasAttemptedRecovery = _f[0], setHasAttemptedRecovery = _f[1];
+    React.useEffect(function () {
+        if (!hasAttemptedRecovery) {
+            if (isRecoveryAvailable) {
+                // Automatically recover without showing a prompt
+                recover();
+            }
+            else {
+                // Start at CONNECTING_WALLET so we show the wallet selection screen
+                // The actual connection will only happen when the user clicks the button
+                transition(FlowState.CONNECTING_WALLET);
+            }
+            setHasAttemptedRecovery(true);
+        }
+    }, [hasAttemptedRecovery, isRecoveryAvailable, transition, recover]);
+    // For deposit progress message
+    var _g = useState({
+        visible: true,
+        title: 'Processing Deposit',
+        subtitle: 'Please wait while we process your deposit',
+        isTyping: false
+    }), depositMessage = _g[0], setDepositMessage = _g[1];
+    // Mock table values for success screen
+    var tableValues = {
+        tx: { text: transactionId || '0x123...456', visible: true, typing: false },
+        from: { text: 'Your Wallet', visible: true, typing: false },
+        to: { text: 'Nord Account', visible: true, typing: false },
+        network: { text: 'Ethereum', visible: true, typing: false },
+        status: { text: 'Completed', visible: true, typing: false }
+    };
+    var handleFinish = function () {
+        if (onClose) {
+            onClose();
+        }
+    };
+    // Render confirmation dialog if needed
+    var renderConfirmationDialog = function () {
+        if (!showConfirmation)
+            return null;
+        return (_jsx(ConfirmationDialog, { onConfirm: confirmClose, onCancel: cancelClose }));
+    };
+    // Render current screen based on state
+    var renderScreen = function () {
+        switch (state) {
+            case FlowState.IDLE:
+            case FlowState.CONNECTING_WALLET:
+                return (_jsx(ConnectWalletScreen, { onConnectWallet: connectWallet, isConnecting: isConnecting }));
+            case FlowState.ETH_TO_SOL_AUTH:
+                return (_jsx(EvmWalletAuthScreen, { onAuth: function () { return transition(FlowState.CHAIN_SELECTION); } }));
+            case FlowState.CHAIN_SELECTION:
+                return (_jsx(ChainSelectionScreen, { chains: CHAINS, onChainSelect: selectChain }));
+            case FlowState.AMOUNT_INPUT:
+                return (_jsx(AmountInputScreen, { amount: amount, onAmountChange: updateAmount, onContinue: startDeposit, balance: 100 }));
+            case FlowState.DEPOSIT_PROGRESS:
+                return (_jsx(DepositProgressScreen, { message: depositMessage, percentComplete: 75 }));
+            case FlowState.DEPOSIT_SUCCESS:
+                return (_jsx(DepositSuccessScreen, { amount: amount, tableValues: tableValues, onContinue: function () { return transition(FlowState.NORD_AUTH); } }));
+            case FlowState.NORD_AUTH:
+                return (_jsx(NordAuthScreen, { hasNordAccount: hasNordAccount, onCreateAccount: function () { return transition(FlowState.AUTH_LOADING, { hasNordAccount: false }); }, onLogin: function () { return transition(FlowState.AUTH_LOADING, { hasNordAccount: true }); } }));
+            case FlowState.AUTH_LOADING:
+                return (_jsx(AuthLoadingScreen, { isCreatingAccount: !hasNordAccount, onAuthComplete: function (success) {
+                        if (success) {
+                            console.log('Auth complete callback in WalletConnectionFlow, transitioning to FINAL_SUCCESS');
+                            // Update the context first
+                            updateContext({ hasActiveSession: true });
+                            // Then transition to success
+                            transition(FlowState.FINAL_SUCCESS, { hasActiveSession: true });
+                        }
+                        else {
+                            // Handle auth failure
+                            handleFlowError(new Error('Authentication failed'));
+                        }
+                    } }));
+            case FlowState.FINAL_SUCCESS:
+                return (_jsx(FinalSuccessScreen, { onDone: handleFinish }));
+            case FlowState.ERROR:
+                return (_jsx(ErrorScreen, { error: context.error, onRetry: function () {
+                        // Logic to go back to appropriate state based on error
+                        transition(FlowState.CONNECTING_WALLET);
+                    }, onCancel: handleFinish }));
+            default:
+                return _jsx("div", { children: "Loading..." });
+        }
+    };
+    return (_jsx("div", { className: "z-50 flex items-center justify-center overflow-auto font-era ".concat(isClosing ? 'animate-fade-out' : 'animate-fade-in'), children: _jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity min-w-96", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800 w-full max-w-2xl mx-auto", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-3", children: _jsx("div", { className: "w-6 h-6 text-gray-50", children: _jsx(Logo, { size: 24 }) }) }), _jsx("button", { onClick: handleCloseRequest, className: "\n                text-neutral-400 hover:text-gray-900 dark:hover:text-white \n                transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\n                h-10 w-10 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800\n                flex items-center justify-center\n              ", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }) })] }) }), _jsxs("div", { className: "wallet-connection-flow-content p-6 overflow-hidden", children: [renderConfirmationDialog(), renderScreen()] })] }) }));
+};

package/dist/Modal/NTSFlow/NordFlow/components/AnimatedButton.d.ts

@@ -0,0 +1,14 @@
+import { ButtonKey, ButtonStates } from '../types';
+interface AnimatedButtonProps {
+    onClick: () => void;
+    text: string;
+    isTyping: boolean;
+    disabled?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const AnimatedButton: ({ onClick, text, isTyping, disabled, onMouseEnter, onMouseLeave, }: AnimatedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useButtonTyping: (buttonStates: ButtonStates, setButtonStates: React.Dispatch<React.SetStateAction<ButtonStates>>, buttonConfigs: Record<ButtonKey, {
+    text: string;
+}>) => void;
+export {};

package/dist/Modal/NTSFlow/NordFlow/components/AnimatedButton.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ANIMATION_EASE } from '../constants';
+var formatButtonText = function (text) {
+    return text.split('').join(' ');
+};
+export var AnimatedButton = function (_a) {
+    var onClick = _a.onClick, text = _a.text, isTyping = _a.isTyping, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = useState(false), isPressed = _d[0], setIsPressed = _d[1];
+    var handleMouseEnter = function () {
+        setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+    };
+    var handleMouseLeave = function () {
+        setIsHovered(false);
+        setIsPressed(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+    };
+    return (_jsxs("button", { onClick: onClick, disabled: disabled, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: function () { return setIsPressed(true); }, onMouseUp: function () { return setIsPressed(false); }, className: "group relative w-full overflow-hidden rounded-md border-2 ".concat(disabled
+            ? 'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-neutral-950 cursor-not-allowed'
+            : isPressed
+                ? 'border-main bg-main/10 dark:bg-main/5'
+                : isHovered
+                    ? 'border-main bg-gray-100 dark:bg-neutral-950'
+                    : 'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-neutral-950 hover:border-main', " py-4 text-center \n      transition-all duration-300 ease-[").concat(ANIMATION_EASE, "]"), children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-main/10 to-transparent -translate-x-full group-hover:animate-shimmer", style: {
+                    backgroundSize: '200% 100%',
+                } }), _jsx("div", { className: "relative flex items-center justify-center", children: _jsx("span", { className: "text-lg font-medium tracking-wide ".concat(disabled
+                        ? 'text-gray-400 dark:text-gray-600'
+                        : isPressed
+                            ? 'text-main'
+                            : isHovered
+                                ? 'text-main'
+                                : 'text-gray-700 dark:text-gray-300 group-hover:text-main', " transition-colors duration-300"), children: isTyping ? (_jsxs("span", { className: "inline-flex items-center", children: [_jsx("span", { className: "tracking-widest", children: formatButtonText(text) }), _jsx("span", { className: "ml-1 h-5 w-0.5 bg-main animate-cursor-blink" })] })) : (text || '\u00A0') }) })] }));
+};
+export var useButtonTyping = function (buttonStates, setButtonStates, buttonConfigs) {
+    var BUTTON_CONFIGS = buttonConfigs || {
+        deposit: { text: 'Deposit' },
+        continue: { text: 'Continue' },
+        openApp: { text: 'Launch' },
+    };
+    useState(function () {
+        Object.entries(buttonStates).forEach(function (_a) {
+            var key = _a[0], state = _a[1];
+            if (state.isTyping) {
+                var config_1 = BUTTON_CONFIGS[key];
+                var index_1 = 0;
+                var interval_1 = setInterval(function () {
+                    if (index_1 <= config_1.text.length) {
+                        setButtonStates(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { text: config_1.text.slice(0, index_1) }), _a)));
+                        });
+                        index_1++;
+                    }
+                    else {
+                        clearInterval(interval_1);
+                    }
+                }, 50);
+                return function () { return clearInterval(interval_1); };
+            }
+        });
+    });
+};

package/dist/Modal/NTSFlow/NordFlow/components/ChainButton.d.ts

@@ -0,0 +1,7 @@
+import { Chain } from '../types';
+interface ChainButtonProps {
+    chain: Chain;
+    onClick: (chainId: string) => void;
+}
+export declare function ChainButton({ chain, onClick }: ChainButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Modal/NTSFlow/NordFlow/components/ChainButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChainButton(_a) {
+    var chain = _a.chain, onClick = _a.onClick;
+    return (_jsxs("button", { onClick: function () { return onClick(chain.id); }, className: "flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-950 border-2 border-gray-100 dark:border-gray-800 hover:border-red-500 dark:hover:border-red-500 hover:bg-red-50/50 dark:hover:bg-gray-900 transition-all duration-200 group rounded-lg", children: [_jsx("img", { src: chain.logo, width: 48, height: 48, alt: chain.name, className: "opacity-90 grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-200" }), _jsx("span", { className: "mt-4 font-medium text-gray-600 dark:text-gray-400 group-hover:text-red-500 dark:group-hover:text-gray-50 transition-colors duration-200", children: chain.name })] }));
+}

package/dist/Modal/NTSFlow/NordFlow/components/LoadingSquares.d.ts

@@ -0,0 +1 @@
+export declare function LoadingSquares(): import("react/jsx-runtime").JSX.Element;

package/dist/Modal/NTSFlow/NordFlow/components/LoadingSquares.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function LoadingSquares() {
+    return (_jsx("div", { className: "relative w-32 h-32 animate-fade-up", style: { animationDelay: '0.2s' }, children: _jsxs("div", { className: "absolute inset-0 grid grid-cols-2 gap-2", children: [_jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader" }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader", style: { animationDelay: '0.2s' } }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader", style: { animationDelay: '0.4s' } }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader", style: { animationDelay: '0.6s' } }) })] }) }));
+}

package/dist/Modal/NTSFlow/NordFlow/components/TransactionTable.d.ts

@@ -0,0 +1,13 @@
+import { TableValues } from '../types';
+interface TransactionTableProps {
+    tableValues: TableValues & {
+        amount?: {
+            text: string;
+            visible: boolean;
+            typing: boolean;
+        };
+    };
+    onClose?: () => void;
+}
+export declare function TransactionTable({ tableValues, onClose }: TransactionTableProps): import("react/jsx-runtime").JSX.Element;
+export {};