@n1xyz/wallet-widget 0.0.1 → 0.0.5

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: [_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("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 {};

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+/**
+ * A component that renders an image with a fallback div when the image is not available
+ */
+export var ImageWithFallback = function (_a) {
+    var src = _a.src, alt = _a.alt, _b = _a.width, width = _b === void 0 ? 'auto' : _b, _c = _a.height, height = _c === void 0 ? 'auto' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.fallbackClassName, fallbackClassName = _e === void 0 ? '' : _e, fallbackText = _a.fallbackText, _f = _a.fallbackBgColor, fallbackBgColor = _f === void 0 ? 'bg-gray-200 dark:bg-gray-800' : _f, _g = _a.fallbackTextColor, fallbackTextColor = _g === void 0 ? 'text-gray-500 dark:text-gray-400' : _g;
+    var _h = useState(false), imageError = _h[0], setImageError = _h[1];
+    // Get initials from alt text for fallback
+    var getInitials = function (text) {
+        if (!text)
+            return '';
+        return text
+            .split(' ')
+            .map(function (word) { return word[0]; })
+            .join('')
+            .toUpperCase()
+            .substring(0, 2);
+    };
+    var handleError = function () {
+        setImageError(true);
+    };
+    if (imageError || !src) {
+        // Render fallback div
+        return (_jsx("div", { className: "flex items-center justify-center ".concat(fallbackBgColor, " ").concat(fallbackTextColor, " ").concat(fallbackClassName), style: {
+                width: typeof width === 'number' ? "".concat(width, "px") : width,
+                height: typeof height === 'number' ? "".concat(height, "px") : height,
+            }, "aria-label": alt, children: fallbackText || getInitials(alt) }));
+    }
+    // Render image
+    return (_jsx("img", { src: src, alt: alt, width: width, height: height, className: className, onError: handleError }));
+};

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

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

package/dist/Modal/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/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 {};

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { shortenAddress } from '../utils/nordUtils';
+import { getExplorerUrl } from '../../../Logic/transactionManager';
+export function TransactionTable(_a) {
+    var tableValues = _a.tableValues, onClose = _a.onClose;
+    // Friendly labels for the keys
+    var getLabel = function (key) {
+        var labels = {
+            amount: 'Amount',
+            tx: 'Transaction ID',
+            from: 'From',
+            to: 'To',
+            network: 'Network',
+            status: 'Status'
+        };
+        return labels[key] || key;
+    };
+    // Get appropriate color for values based on key
+    var getValueStyles = function (key, value) {
+        if (key === 'status') {
+            if (value.toLowerCase().includes('success') || value.toLowerCase().includes('confirmed')) {
+                return 'text-green-500 dark:text-emerald-500 font-medium';
+            }
+            if (value.toLowerCase().includes('pending')) {
+                return 'text-amber-500 dark:text-amber-400 font-medium';
+            }
+            if (value.toLowerCase().includes('fail') || value.toLowerCase().includes('error')) {
+                return 'text-red-500 dark:text-red-400 font-medium';
+            }
+        }
+        if (key === 'tx') {
+            return 'text-primary-600 dark:text-primary-400 text-xs font-medium hover:text-primary-700 dark:hover:text-primary-300 transition-colors duration-200';
+        }
+        if (key === 'network') {
+            return 'text-purple-600 dark:text-purple-400 font-medium';
+        }
+        if (key === 'from' || key === 'to') {
+            return 'text-gray-800 dark:text-gray-200 text-xs font-medium hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200';
+        }
+        if (key === 'amount') {
+            return 'text-green-600 dark:text-emerald-500 font-semibold';
+        }
+        return 'text-gray-900 dark:text-gray-50 font-medium';
+    };
+    // Format display value with ellipsis for long text
+    var getDisplayValue = function (key, value) {
+        if (key === 'tx') {
+            return shortenAddress(value, 5, 4);
+        }
+        if (key === 'from' || key === 'to') {
+            return shortenAddress(value, 5, 4);
+        }
+        return value;
+    };
+    // Get explorer URL for transaction ID or address
+    var getExplorerLink = function (key, value) {
+        var _a;
+        // Extract network from tableValues to determine which explorer to use
+        var network = ((_a = tableValues.network) === null || _a === void 0 ? void 0 : _a.text) || 'solana-mainnet';
+        if (key === 'tx') {
+            return getExplorerUrl(value, network);
+        }
+        if (key === 'from') {
+            return "https://explorer.solana.com/address/".concat(value, "?cluster=devnet");
+        }
+        return '';
+    };
+    // Order of fields to display
+    var fieldOrder = ['amount', 'status', 'network', 'from', 'to', 'tx'];
+    // Sort entries based on fieldOrder
+    var sortedEntries = Object.entries(tableValues)
+        .sort(function (_a, _b) {
+        var keyA = _a[0];
+        var keyB = _b[0];
+        var indexA = fieldOrder.indexOf(keyA);
+        var indexB = fieldOrder.indexOf(keyB);
+        return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);
+    });
+    return (_jsxs("div", { className: "relative w-full h-full bg-gray-100 dark:bg-gray-950 border border-gray-200 dark:border-gray-800 p-5 rounded-sm flex flex-col justify-center", children: [onClose && (_jsx("button", { onClick: onClose, className: "absolute top-3 right-2 text-gray-500 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none", "aria-label": "Close details", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: "space-y-3 text-sm pt-5", children: sortedEntries.map(function (_a) {
+                    var key = _a[0], value = _a[1];
+                    return (_jsxs("div", { className: "flex items-center justify-between py-2 ", children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium min-w-[120px]", children: getLabel(key) }), _jsxs("div", { className: "relative transition-all duration-300 ".concat(value.visible ? 'opacity-100' : 'opacity-0', " max-w-[65%] text-right flex-1"), children: [(key === 'tx' || key === 'from') && getExplorerLink(key, value.text) ? (_jsxs("a", { href: getExplorerLink(key, value.text), target: "_blank", rel: "noopener noreferrer", className: "".concat(getValueStyles(key, value.text), " break-all inline-block group"), title: value.text, children: [_jsx("span", { className: 'underline hover:font-bold', children: getDisplayValue(key, value.text) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 ml-1 inline-block opacity-50 group-hover:opacity-100 transition-opacity duration-200", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })] })) : (_jsx("span", { className: "".concat(getValueStyles(key, value.text), " break-all inline-block"), title: value.text, children: value.text })), value.typing && (_jsx("span", { className: "inline-block ml-1 w-[2px] h-[14px] bg-primary-500 dark:bg-primary-400 animate-pulse" }))] })] }, key));
+                }) })] }));
+}

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

@@ -0,0 +1,6 @@
+import { WaitingMessageState } from '../types';
+interface WaitingMessageProps {
+    message: WaitingMessageState;
+}
+export declare function WaitingMessage({ message }: WaitingMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingSquares } from './LoadingSquares';
+export function WaitingMessage(_a) {
+    var message = _a.message;
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx(LoadingSquares, {}), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsxs("h3", { className: "text-xl text-gray-800 dark:text-white transition-all duration-300 h-[32px] flex items-center justify-center relative font-semibold", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Waiting for transaction" }), _jsx("div", { className: "absolute min-w-[280px]", children: message.visible && message.title })] }), _jsxs("div", { className: "text-sm text-gray-600 dark:text-neutral-400 h-[20px] flex items-center justify-center relative", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Please sign the transaction in your wallet" }), _jsx("div", { className: "absolute min-w-[280px]", children: message.visible && message.subtitle })] })] })] }));
+}

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

@@ -0,0 +1,5 @@
+export * from './ImageWithFallback';
+export * from './ChainButton';
+export * from './LoadingSquares';
+export * from './TransactionTable';
+export * from './WaitingMessage';

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

@@ -0,0 +1,5 @@
+export * from './ImageWithFallback';
+export * from './ChainButton';
+export * from './LoadingSquares';
+export * from './TransactionTable';
+export * from './WaitingMessage';

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

@@ -0,0 +1,37 @@
+import { StateTransition } from './types';
+export declare const ANIMATION_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+export declare const TYPING_INTERVAL = 50;
+export declare const ANIMATION_DURATION = 3000;
+export declare const MIN_DEPOSIT = 10000;
+export declare const MAX_DEPOSIT = 10000;
+export declare const INITIAL_APPS: {
+    name: string;
+    color: string;
+    progress: number;
+}[];
+/**
+ * Available chains for deposit
+ */
+export declare const AVAILABLE_CHAINS: {
+    id: string;
+    name: string;
+    logo: string;
+}[];
+export declare const CHAINS: {
+    id: string;
+    name: string;
+    logo: string;
+}[];
+/**
+ * State machine transitions
+ * Defines all possible transitions between states and their conditions
+ */
+export declare const STATE_TRANSITIONS: StateTransition[];
+/**
+ * Local storage key for persisting flow state
+ */
+export declare const FLOW_STATE_STORAGE_KEY = "n1_wallet_connection_flow_state";
+/**
+ * Time in milliseconds after which a persisted state is considered stale
+ */
+export declare const STATE_EXPIRY_TIME: number;