@n1xyz/wallet-widget 0.0.4 → 0.0.7

package/dist/Modal/NordFlow/NordFlow.js

@@ -0,0 +1,267 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
+import Logo from '../../components/Logo';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../../Provider/hooks';
+import { CHAINS } from './constants';
+import { withImageFallback } from './hoc';
+import { useDepositFlow, useFlowState, useInterruptHandler, useNordInstance, useNordWalletConnect, } from './hooks';
+import { AmountInputScreen, AuthLoadingScreen, ChainSelectionScreen, ConnectWalletScreen, DepositProgressScreen, DepositSuccessScreen, ErrorScreen, EvmWalletAuthScreen, FinalSuccessScreen, } from './screens';
+import { FlowState } from './types';
+import { getTokenBalance, isNordConfigured } from './utils/nordUtils';
+import { logger } from '../../utils/logger';
+// Apply the withImageFallback HOC to all screen components
+var EnhancedConnectWalletScreen = withImageFallback(ConnectWalletScreen);
+var EnhancedEvmWalletAuthScreen = withImageFallback(EvmWalletAuthScreen);
+var EnhancedChainSelectionScreen = withImageFallback(ChainSelectionScreen);
+var EnhancedAmountInputScreen = withImageFallback(AmountInputScreen);
+var EnhancedDepositProgressScreen = withImageFallback(DepositProgressScreen);
+var EnhancedDepositSuccessScreen = withImageFallback(DepositSuccessScreen);
+var EnhancedAuthLoadingScreen = withImageFallback(AuthLoadingScreen);
+var EnhancedFinalSuccessScreen = withImageFallback(FinalSuccessScreen);
+var EnhancedErrorScreen = withImageFallback(ErrorScreen);
+/**
+ * Main component for the wallet connection flow
+ */
+export var NordFlow = function (_a) {
+    var onClose = _a.onClose;
+    // Get session mode from context
+    var _b = useN1WalletInternalContext(), sessionMode = _b.sessionMode, faucetUrl = _b.faucetUrl;
+    var _c = useN1WalletContext(), balances = _c.balances, nord = _c.nord, nordUser = _c.nordUser;
+    var instanceNordUser = useNordInstance().nordUser;
+    // Use the nordUser from context, falling back to the one from useNordInstance
+    var currentNordUser = nordUser || instanceNordUser;
+    // Check if Nord is properly configured
+    useEffect(function () {
+        if (nord && !isNordConfigured(nord)) {
+            logger.warn('Nord is available but not properly configured. Some functionality may be limited.');
+        }
+    }, [nord]);
+    // Handle state changes
+    var handleStateChange = useCallback(function (newState, prevState) {
+        logger.debug("State changed from ".concat(prevState, " to ").concat(newState));
+    }, []);
+    // Handle errors
+    var handleError = useCallback(function (error) {
+        logger.error('Flow error:', error);
+    }, []);
+    // Initialize flow state
+    var _d = useFlowState({
+        autoRecover: false, // We'll handle recovery with a prompt
+        onStateChange: handleStateChange,
+        onError: handleError,
+    }), state = _d.state, context = _d.context, transition = _d.transition, updateContext = _d.updateContext, recover = _d.recover, recordInterruption = _d.recordInterruption, handleFlowError = _d.handleError, isRecoveryAvailable = _d.isRecoveryAvailable;
+    // Create a wrapped transition function that logs more details
+    var enhancedTransition = useCallback(function (newState, contextUpdates) {
+        logger.debug("Attempting transition to ".concat(newState), contextUpdates);
+        var result = transition(newState, contextUpdates);
+        logger.debug("Transition to ".concat(newState, " result:"), result);
+        return result;
+    }, [transition]);
+    // Initialize wallet connection
+    var _e = useNordWalletConnect(state, enhancedTransition, // Use enhanced transition instead of regular transition
+    context, updateContext, sessionMode || 0), connectWallet = _e.connectWallet, isConnecting = _e.isConnecting;
+    // Initialize deposit flow
+    var _f = useDepositFlow({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+        updateContext: updateContext,
+    }), amount = _f.amount, updateAmount = _f.updateAmount, startDeposit = _f.startDeposit, completeDeposit = _f.completeDeposit, getTransactionDetails = _f.getTransactionDetails;
+    // Initialize interrupt handler
+    var _g = useInterruptHandler({
+        state: state,
+        recordInterruption: recordInterruption,
+        onClose: onClose,
+    }), isClosing = _g.isClosing, handleCloseRequest = _g.handleCloseRequest;
+    // Check for recovery on mount
+    var _h = useState(false), hasAttemptedRecovery = _h[0], setHasAttemptedRecovery = _h[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 _j = useState({
+        visible: true,
+        title: 'Processing Deposit',
+        subtitle: 'Please wait while we process your deposit',
+        isTyping: false,
+    }), depositMessage = _j[0], setDepositMessage = _j[1];
+    var handleFinish = function () {
+        if (onClose) {
+            onClose();
+        }
+    };
+    // Handle chain selection
+    var handleChainSelect = useCallback(function (chainId) {
+        logger.debug('Chain selected in NordFlow:', chainId);
+        // For testnet, we need to use the network ID
+        var selectedChain = chainId;
+        logger.debug('Transitioning to AMOUNT_INPUT with chain:', selectedChain);
+        enhancedTransition(FlowState.AMOUNT_INPUT, {
+            selectedChain: selectedChain,
+        });
+    }, [enhancedTransition]);
+    // Get the USDC balance
+    var getUsdcBalance = useCallback(function () {
+        // Try to get the balance from nordUser if available
+        if (currentNordUser) {
+            var usdcBalance = getTokenBalance(currentNordUser, 'USDC');
+            if (usdcBalance > 0) {
+                return usdcBalance;
+            }
+        }
+        // Fallback to the first balance from the context or a default value
+        return balances && balances.length > 0 ? Number(balances[0].balance) : 100;
+    }, [currentNordUser, balances]);
+    // Function to refresh balances
+    var refreshBalance = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var userAny, error_1, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 6, , 7]);
+                    logger.debug('Refreshing balance...');
+                    if (!(currentNordUser && nord && isNordConfigured(nord))) return [3 /*break*/, 5];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    userAny = currentNordUser;
+                    if (!(userAny && typeof userAny.refreshBalances === 'function')) return [3 /*break*/, 3];
+                    return [4 /*yield*/, userAny.refreshBalances()];
+                case 2:
+                    _a.sent();
+                    logger.debug('Balances refreshed using Nord-TS');
+                    return [2 /*return*/];
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _a.sent();
+                    logger.warn('Error refreshing balances using Nord-TS, falling back to default method:', error_1);
+                    return [3 /*break*/, 5];
+                case 5:
+                    logger.debug('Balance refreshed using default method');
+                    return [3 /*break*/, 7];
+                case 6:
+                    error_2 = _a.sent();
+                    logger.error('Error refreshing balance:', error_2);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }, [currentNordUser, nord]);
+    // Get available chains from Nord if possible
+    var getAvailableChains = useCallback(function () {
+        if (nord &&
+            isNordConfigured(nord) &&
+            nord.markets &&
+            nord.markets.length > 0) {
+            // Map Nord markets to chains format
+            return nord.markets.map(function (market) { return ({
+                id: market.marketId.toString(),
+                name: market.symbol,
+                // Use a placeholder or dynamically generated logo instead of non-existent assets
+                logo: market.symbol.toLowerCase(), // Just use the symbol as an identifier
+            }); });
+        }
+        // Fallback to predefined chains
+        return CHAINS;
+    }, [nord]);
+    // Render the appropriate screen based on the current state
+    var renderScreen = function () {
+        switch (state) {
+            case FlowState.CONNECTING_WALLET:
+                return (_jsx(EnhancedConnectWalletScreen, { onConnectWallet: connectWallet, isConnecting: isConnecting }));
+            case FlowState.CHAIN_SELECTION:
+                var availableChains = getAvailableChains();
+                return (_jsx(EnhancedChainSelectionScreen, { chains: availableChains, onChainSelect: handleChainSelect }));
+            case FlowState.ETH_TO_SOL_AUTH:
+                return (_jsx(EnhancedEvmWalletAuthScreen, { onAuth: function () { return transition(FlowState.CHAIN_SELECTION); } }));
+            case FlowState.AMOUNT_INPUT:
+                return (_jsx(EnhancedAmountInputScreen, { amount: amount, onAmountChange: updateAmount, onContinue: startDeposit, balance: getUsdcBalance(), faucetUrl: faucetUrl, refreshBalance: refreshBalance }));
+            case FlowState.DEPOSIT_PROGRESS:
+                return _jsx(EnhancedDepositProgressScreen, { message: depositMessage });
+            case FlowState.DEPOSIT_SUCCESS:
+                // Get transaction details from the deposit flow
+                var txDetails = getTransactionDetails();
+                // Create table values from transaction details
+                var updatedTableValues = {
+                    amount: { text: txDetails.amount, visible: true, typing: false },
+                    tx: { text: txDetails.tx, visible: true, typing: false },
+                    from: { text: txDetails.from, visible: true, typing: false },
+                    to: { text: txDetails.to, visible: true, typing: false },
+                    network: { text: txDetails.network, visible: true, typing: false },
+                    status: { text: txDetails.status, visible: true, typing: false },
+                };
+                return (_jsx(EnhancedDepositSuccessScreen, { amount: amount, tableValues: updatedTableValues, onContinue: completeDeposit }));
+            case FlowState.AUTH_LOADING:
+                return (_jsx(EnhancedAuthLoadingScreen, { onAuthComplete: function (success) {
+                        if (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(EnhancedFinalSuccessScreen, { onDone: handleFinish });
+            case FlowState.ERROR:
+                return (_jsx(EnhancedErrorScreen, { error: context.error, onRetry: function () {
+                        // Logic to go back to appropriate state based on error
+                        transition(FlowState.CONNECTING_WALLET);
+                    }, onCancel: handleFinish }));
+            default:
+                return (_jsxs("div", { className: "flex flex-col items-center justify-center p-8 space-y-4", children: [_jsxs("div", { className: "relative w-12 h-12", children: [_jsx("div", { className: "absolute inset-0 border-2 border-gray-200 dark:border-gray-800 border-b-main rounded-full animate-spin-slow" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "w-2 h-2 bg-main rounded-full animate-pulse" }) })] }), _jsx("p", { className: "text-gray-700 dark:text-gray-300 text-sm font-medium", 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" }) }) })] }) }), _jsx("div", { className: "wallet-connection-flow-content p-6 overflow-hidden", children: renderScreen() })] }) }));
+};

package/dist/Modal/NordFlow/NordFlowWrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface NordFlowWrapperProps {
+    onClose?: () => void;
+    appId: string;
+    darkMode?: boolean;
+}
+/**
+ * Wrapper component for NordFlow that sets the isNordflow flag
+ */
+export declare const NordFlowWrapper: React.FC<NordFlowWrapperProps>;
+export {};

package/dist/Modal/NordFlow/NordFlowWrapper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { N1WalletProvider } from '../../Provider/N1WalletProvider';
+import { N1SessionMode } from '../../Provider/types';
+import { NordFlow } from './NordFlow';
+/**
+ * Wrapper component for NordFlow that sets the isNordflow flag
+ */
+export var NordFlowWrapper = function (_a) {
+    var onClose = _a.onClose, appId = _a.appId, _b = _a.darkMode, darkMode = _b === void 0 ? true : _b;
+    return (_jsx(N1WalletProvider, { providedSessionMode: N1SessionMode.Nord, appId: appId, darkMode: darkMode, isNordflow: true, children: _jsx(NordFlow, { onClose: onClose }) }));
+};

package/dist/Modal/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/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/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/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/NordFlow/components/ChainButton.d.ts

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageWithFallback } from './ImageWithFallback';
+export function ChainButton(_a) {
+    var chain = _a.chain, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var handleClick = function () {
+        if (!disabled) {
+            onClick(chain.id);
+        }
+    };
+    var baseClasses = '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 transition-all duration-200 group rounded-lg';
+    var enabledClasses = 'hover:border-red-500 dark:hover:border-red-500 hover:bg-red-50/50 dark:hover:bg-gray-900';
+    var disabledClasses = 'opacity-50 cursor-not-allowed';
+    var buttonClasses = "".concat(baseClasses, " ").concat(disabled ? disabledClasses : enabledClasses);
+    var imageClasses = disabled
+        ? 'opacity-50 grayscale'
+        : 'opacity-90 grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-200';
+    var textClasses = disabled
+        ? 'mt-4 font-medium text-gray-400 dark:text-gray-500'
+        : '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';
+    return (_jsxs("button", { onClick: handleClick, className: buttonClasses, disabled: disabled, children: [typeof chain.logo === 'string' ? (_jsx(ImageWithFallback, { src: chain.logo, width: 48, height: 48, alt: chain.name, className: imageClasses, fallbackClassName: "w-12 h-12 rounded-full text-lg font-bold opacity-90 group-hover:scale-105 transition-all duration-200", fallbackBgColor: "bg-main/10 dark:bg-main/20", fallbackTextColor: "text-main dark:text-main" })) : (_jsx("div", { className: imageClasses, children: chain.logo })), _jsx("span", { className: textClasses, children: chain.name })] }));
+}

package/dist/Modal/NordFlow/components/EVMChainsButton.d.ts

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

package/dist/Modal/NordFlow/components/EVMChainsButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EVMChainsGroup } from '../../../components/logos';
+export function EVMChainsButton(_a) {
+    var chain = _a.chain, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var handleClick = function () {
+        if (!disabled) {
+            onClick(chain.id);
+        }
+    };
+    var baseClasses = '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 transition-all duration-200 group rounded-lg';
+    var enabledClasses = 'hover:border-red-500 dark:hover:border-red-500 hover:bg-red-50/50 dark:hover:bg-gray-900';
+    var disabledClasses = 'opacity-50 cursor-not-allowed';
+    var buttonClasses = "".concat(baseClasses, " ").concat(disabled ? disabledClasses : enabledClasses);
+    var textClasses = disabled
+        ? 'mt-4 font-medium text-gray-400 dark:text-gray-500'
+        : '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';
+    return (_jsxs("button", { onClick: handleClick, className: buttonClasses, disabled: disabled, children: [_jsx(EVMChainsGroup, { size: 32, className: disabled ? 'opacity-50 grayscale' : 'opacity-90' }), _jsx("span", { className: textClasses, children: chain.name })] }));
+}

package/dist/Modal/NordFlow/components/ImageWithFallback.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ImageWithFallbackProps {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    fallbackClassName?: string;
+    fallbackText?: string;
+    fallbackBgColor?: string;
+    fallbackTextColor?: string;
+}
+/**
+ * A component that renders an image with a fallback div when the image is not available
+ */
+export declare const ImageWithFallback: React.FC<ImageWithFallbackProps>;
+export {};