@n1xyz/wallet-widget 0.0.4 → 0.0.5

package/dist/Provider/types.d.ts

@@ -1,4 +1,5 @@
 import type { WalletError } from '../errors/types';
+import { Nord } from '@n1xyz/nord-ts';
 export declare enum N1ModalViewMode {
     Connect = 0,
     CreateSession = 1,
@@ -17,6 +18,8 @@ export interface N1WalletProviderProps {
     appId: string;
     darkMode?: boolean;
     onError?: (error: WalletError) => void;
+    faucetUrl?: string;
+    nord?: Nord;
 }
 export interface Balance {
     mint: string;
@@ -24,6 +27,56 @@ export interface Balance {
     appId: string;
     appType: string;
 }
+export interface N1NordFunctions {
+    getMarkets: () => Promise<any[]>;
+    getOrderbook: (symbol: string) => Promise<any>;
+    getTrades: (params: any) => Promise<any>;
+    getMarketsStats: () => Promise<any>;
+    placeOrder: (params: {
+        sessionId: bigint | string;
+        marketId: number;
+        side: 'BUY' | 'SELL';
+        fillMode: 'GTC' | 'IOC' | 'FOK' | 'POST_ONLY';
+        isReduceOnly: boolean;
+        size?: number | string;
+        price?: number | string;
+        quoteSize?: number | string;
+        clientOrderId?: bigint | string;
+    }) => Promise<bigint | undefined>;
+    cancelOrder: (params: {
+        sessionId: bigint | string;
+        orderId: bigint | string;
+    }) => Promise<bigint>;
+    createSession: (params: {
+        userPubkey: Uint8Array;
+        sessionPubkey: Uint8Array;
+        expiryTimestamp?: bigint;
+    }) => Promise<bigint>;
+    revokeSession: (params: {
+        sessionId: bigint | string;
+    }) => Promise<void>;
+    withdraw: (params: {
+        sessionId: bigint | string;
+        tokenId: number;
+        amount: number;
+    }) => Promise<void>;
+    transfer: (params: {
+        sessionId: bigint | string;
+        fromAccountId: number;
+        toAccountId?: number;
+        tokenId: number;
+        tokenDecimals: number;
+        amount: number | string;
+    }) => Promise<number | undefined>;
+    getTimestamp: () => Promise<bigint>;
+    getActionNonce: () => Promise<number>;
+    queryBlock: (query: any) => Promise<any>;
+    queryLastNBlocks: () => Promise<any>;
+    queryRecentBlocks: (last_n: number) => Promise<any>;
+    queryAction: (query: any) => Promise<any>;
+    queryRecentActions: (last_n: number) => Promise<any>;
+    getActions: (fromActionId: number, toActionId: number) => Promise<any>;
+}
 export interface N1WalletState {
     address: string;
     appId: string | null;
@@ -37,11 +90,15 @@ export interface N1WalletState {
     showLogin: boolean;
     signMessageWithSessionKey: ((message: any) => Promise<any>) | null;
     signMessageWithWalletKey: ((message: any) => Promise<any>) | null;
+    signTransactionWithWalletKey: ((transaction: any) => Promise<any>) | null;
     userChain: string | null;
     username: string;
     viewMode: N1ModalViewMode;
     walletPubKey: Uint8Array | null;
     throwTestError: () => Promise<void>;
+    nord?: Nord;
+    faucetUrl?: string;
+    nordUser?: any;
 }
 export interface N1InternalWalletState {
     dynamicHandleLogOut: any;
@@ -63,14 +120,18 @@ export interface N1InternalWalletState {
     setShowSidebar: (show: boolean) => void;
     setSignMessageWithSessionKey: React.Dispatch<React.SetStateAction<((message: any) => Promise<any>) | null>>;
     setSignMessageWithWalletKey: React.Dispatch<React.SetStateAction<((message: any) => Promise<any>) | null>>;
+    setSignTransactionWithWalletKey: React.Dispatch<React.SetStateAction<((transaction: any) => Promise<any>) | null>>;
     setStartClosingLogin: (closing: boolean) => void;
     setUsername: (username: string) => void;
     setUserChain: (chain: string) => void;
     setViewMode: (mode: N1ModalViewMode) => void;
     setWalletPubKey: (key: Uint8Array) => void;
+    setNordUser: (user: any) => void;
     showSidebar: boolean;
     startClosingLogin: boolean;
     showDynamicWidget: any;
     setShowDynamicWidget: (show: any) => void;
     darkMode: boolean;
+    sessionMode: N1SessionMode | null;
+    faucetUrl?: string;
 }

package/dist/WalletConnectionFlow/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/WalletConnectionFlow/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/WalletConnectionFlow/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/WalletConnectionFlow/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/WalletConnectionFlow/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/WalletConnectionFlow/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/WalletConnectionFlow/components/LoadingSquares.d.ts

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

package/dist/WalletConnectionFlow/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/WalletConnectionFlow/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/WalletConnectionFlow/components/TransactionTable.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 ';
+        }
+        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 ';
+        }
+        if (key === 'amount') {
+            return 'text-green-600 dark:text-emerald-500 font-semibold';
+        }
+        return 'text-gray-900 dark:text-gray-50 font-medium';
+    };
+    // 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: [_jsx("span", { className: "".concat(getValueStyles(key, value.text), " break-all inline-block"), 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/WalletConnectionFlow/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/WalletConnectionFlow/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("p", { 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/WalletConnectionFlow/components/index.d.ts

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

package/dist/WalletConnectionFlow/components/index.js

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

package/dist/WalletConnectionFlow/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 = 1;
+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;