@n1xyz/wallet-widget 0.0.4 → 0.0.7

package/dist/WalletConnectionFlow/screens/04-AmountInputScreen.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ANIMATION_EASE, MAX_DEPOSIT, MIN_DEPOSIT } from '../constants';
+export function AmountInputScreen(_a) {
+    var amount = _a.amount, onAmountChange = _a.onAmountChange, onContinue = _a.onContinue, balance = _a.balance;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var handleAmountChange = function (e) {
+        var value = e.target.value;
+        if (/^\d*\.?\d*$/.test(value)) {
+            onAmountChange(value);
+        }
+    };
+    var isValidAmount = amount !== '' &&
+        Number(amount) >= MIN_DEPOSIT &&
+        Number(amount) <= MAX_DEPOSIT &&
+        Number(amount) <= balance;
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-6 text-center", children: "Enter Amount" }), _jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-neutral-400", children: "Amount" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-neutral-400", children: ["Balance: ", balance, " USDC"] })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", defaultValue: amount, onChange: handleAmountChange, placeholder: "0.00", className: "w-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 rounded-md px-4 py-3 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-0 focus:border-main dark:focus:border-main transition-colors duration-200" }), _jsxs("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [_jsx("img", { src: "/images/tokens/usdc.svg", width: 20, height: 20, alt: "USDC" }), _jsx("span", { className: "text-gray-400 dark:text-neutral-500", children: "USDC" })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs text-gray-400 dark:text-neutral-500", children: ["Min: ", MIN_DEPOSIT, " USDC"] }), _jsxs("span", { className: "text-xs text-gray-400 dark:text-neutral-500", children: ["Max: ", MAX_DEPOSIT, " USDC"] })] })] }), _jsx("button", { onClick: onContinue, disabled: !isValidAmount, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n            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 ".concat(ANIMATION_EASE, "\n            cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            ").concat(!isValidAmount ? 'opacity-50 cursor-not-allowed hover:border-gray-200 dark:hover:border-gray-800' : '', "\n          "), style: {
+                            transform: isHovered && isValidAmount ? 'scale(0.99)' : 'scale(1)',
+                        }, children: _jsx("span", { className: "\n            text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n            text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n            ").concat(!isValidAmount ? 'group-hover:text-gray-700 dark:group-hover:text-gray-300' : '', "\n          "), children: "Continue" }) })] })] }));
+}

package/dist/WalletConnectionFlow/screens/05-DepositProgressScreen.d.ts

@@ -0,0 +1,7 @@
+import { WaitingMessageState } from '../types';
+interface DepositProgressScreenProps {
+    message: WaitingMessageState;
+    percentComplete?: number;
+}
+export declare function DepositProgressScreen({ message }: DepositProgressScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/05-DepositProgressScreen.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WaitingMessage } from '../components/WaitingMessage';
+export function DepositProgressScreen(_a) {
+    var message = _a.message;
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsx(WaitingMessage, { message: message }) }));
+}

package/dist/WalletConnectionFlow/screens/06-DepositSuccessScreen.d.ts

@@ -0,0 +1,8 @@
+import { TableValues } from '../types';
+interface DepositSuccessScreenProps {
+    amount: string;
+    tableValues: TableValues;
+    onContinue: () => void;
+}
+export declare function DepositSuccessScreen({ amount, tableValues, onContinue, }: DepositSuccessScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/06-DepositSuccessScreen.js

@@ -0,0 +1,99 @@
+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 { useEffect, useState } from 'react';
+import { TransactionTable } from '../components/TransactionTable';
+import { ANIMATION_EASE, TYPING_INTERVAL } from '../constants';
+export function DepositSuccessScreen(_a) {
+    var amount = _a.amount, tableValues = _a.tableValues, onContinue = _a.onContinue;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), showDetails = _c[0], setShowDetails = _c[1];
+    var _d = useState({
+        amount: { text: '', visible: false, typing: false },
+        tx: { text: '', visible: false, typing: false },
+        from: { text: '', visible: false, typing: false },
+        to: { text: '', visible: false, typing: false },
+        network: { text: '', visible: false, typing: false },
+        status: { text: '', visible: false, typing: false },
+    }), animatedTableValues = _d[0], setAnimatedTableValues = _d[1];
+    // Add state to track if the button should be enabled
+    var _e = useState(false), isContinueEnabled = _e[0], setIsContinueEnabled = _e[1];
+    // Add state to show a message about waiting
+    var _f = useState(true), showWaitingMessage = _f[0], setShowWaitingMessage = _f[1];
+    // Add animation to table values
+    useEffect(function () {
+        if (!showDetails)
+            return;
+        // Extract the text values from the tableValues
+        var values = {
+            amount: "".concat(Number(amount).toLocaleString(), " USDC"),
+            tx: tableValues.tx.text,
+            from: tableValues.from.text,
+            to: tableValues.to.text,
+            network: tableValues.network.text,
+            status: tableValues.status.text,
+        };
+        // Animate each field with typing effect
+        Object.entries(values).forEach(function (_a, index) {
+            var key = _a[0], value = _a[1];
+            setTimeout(function () {
+                // Make the field visible first
+                setAnimatedTableValues(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { visible: true, typing: true }), _a)));
+                });
+                var textIndex = 0;
+                // Type out each character with the typing animation
+                var interval = setInterval(function () {
+                    if (textIndex <= value.length) {
+                        setAnimatedTableValues(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
+                                text: value.slice(0, textIndex),
+                                visible: true,
+                                typing: textIndex < value.length,
+                            }, _a)));
+                        });
+                        textIndex++;
+                    }
+                    else {
+                        clearInterval(interval);
+                        setAnimatedTableValues(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
+                                text: value,
+                                visible: true,
+                                typing: false,
+                            }, _a)));
+                        });
+                    }
+                }, TYPING_INTERVAL);
+            }, index * 300); // Slightly faster staggering for better UX
+        });
+    }, [tableValues, showDetails, amount]);
+    // Enable the continue button after a minimum viewing time
+    useEffect(function () {
+        var enableTimer = setTimeout(function () {
+            setIsContinueEnabled(true);
+            setShowWaitingMessage(false);
+        }, 4000);
+        return function () { return clearTimeout(enableTimer); };
+    }, []);
+    var toggleDetails = function () {
+        setShowDetails(function (prev) { return !prev; });
+    };
+    return (_jsx("div", { className: "relative w-full px-4", children: _jsx("div", { className: "flex flex-col space-y-6", children: _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "relative w-full px-3 py-3 flex items-center justify-center transition-all duration-300 ".concat(ANIMATION_EASE, " ").concat(showDetails ? 'opacity-0 max-h-0' : 'opacity-100 max-h-[200px]'), children: _jsxs("div", { className: "relative w-full px-5 py-8 transition-all duration-300 ".concat(ANIMATION_EASE, " ").concat(showDetails ? 'max-h-0 overflow-hidden' : 'max-h-[200px]'), children: [_jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -top-2 -left-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -top-2 -right-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -bottom-2 -left-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -bottom-2 -right-2 rounded-sm" }), _jsxs("p", { className: "text-5xl md:text-7xl tracking-tight text-green-500/80 dark:text-emerald-500/80 font-medium pt-4 underline text-center animate-fade-up", style: { animationDelay: '0.3s' }, children: ["+", Number(amount).toLocaleString(), _jsx("span", { className: "text-xl md:text-2xl text-green-500/50 dark:text-emerald-500/50 ml-2", children: "USDC" })] }), _jsx("div", { className: "absolute bottom-0 left-0 right-0 flex justify-center -mb-3", children: _jsxs("button", { onClick: toggleDetails, className: "\n                    group flex items-center space-x-1 px-3 py-1 text-xs font-medium \n                    transition-colors duration-200 focus:outline-none\n                    ".concat(showDetails
+                                            ? 'text-green-600 dark:text-emerald-400 hover:text-green-700 dark:hover:text-emerald-300'
+                                            : 'text-gray-500 dark:text-gray-400 hover:text-green-600 dark:hover:text-emerald-400', "\n                  "), children: [_jsx("span", { children: "View details" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 transition-transform duration-200", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) })] }) }), _jsx("div", { className: "transition-all duration-300 ease-in-out overflow-hidden ".concat(showDetails ? 'max-h-[500px] opacity-100 -mt-4' : 'max-h-0 opacity-0'), children: _jsx(TransactionTable, { tableValues: animatedTableValues, onClose: toggleDetails }) }), _jsxs("div", { className: "mt-6", children: [showWaitingMessage && (_jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-2 animate-pulse", children: "Please wait a moment..." })), _jsx("button", { onClick: isContinueEnabled ? onContinue : undefined, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n                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 ".concat(ANIMATION_EASE, "\n                cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n                ").concat(!isContinueEnabled ? 'opacity-50 cursor-not-allowed' : '', "\n              "), style: {
+                                    transform: isHovered && isContinueEnabled ? 'scale(0.99)' : 'scale(1)',
+                                }, disabled: !isContinueEnabled, children: _jsx("span", { className: "\n                text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n                text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n              "), children: "Continue" }) })] })] }) }) }));
+}

package/dist/WalletConnectionFlow/screens/07-NordAuthScreen.d.ts

@@ -0,0 +1,7 @@
+interface NordAuthScreenProps {
+    onCreateAccount: () => void;
+    onLogin: () => void;
+    hasNordAccount: boolean;
+}
+export declare function NordAuthScreen({ onCreateAccount, onLogin, hasNordAccount, }: NordAuthScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/07-NordAuthScreen.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ANIMATION_EASE } from '../constants';
+export function NordAuthScreen(_a) {
+    var onCreateAccount = _a.onCreateAccount, onLogin = _a.onLogin, hasNordAccount = _a.hasNordAccount;
+    var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: hasNordAccount ? 'Continue to Nord' : 'Create Nord Account' }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-8", children: hasNordAccount
+                    ? 'Log in to your Nord account to continue'
+                    : 'Create a Nord account to manage your deposits' }), _jsxs("div", { className: "space-y-4", children: [!hasNordAccount && (_jsx("button", { onClick: onCreateAccount, onMouseEnter: function () { return setIsHovered('create'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              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 ".concat(ANIMATION_EASE, "\n              cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            "), style: {
+                            transform: isHovered === 'create' ? 'scale(0.99)' : 'scale(1)',
+                        }, children: _jsx("span", { className: "\n              text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n              text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n            "), children: "Create Account" }) })), hasNordAccount && (_jsx("button", { onClick: onLogin, onMouseEnter: function () { return setIsHovered('login'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              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 ".concat(ANIMATION_EASE, "\n              cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            "), style: {
+                            transform: isHovered === 'login' ? 'scale(0.99)' : 'scale(1)',
+                        }, children: _jsx("span", { className: "\n              text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n              text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n            "), children: "Log In" }) }))] })] }));
+}

package/dist/WalletConnectionFlow/screens/08-AuthLoadingScreen.d.ts

@@ -0,0 +1,6 @@
+interface AuthLoadingScreenProps {
+    isCreatingAccount?: boolean;
+    onAuthComplete?: (success: boolean) => void;
+}
+export declare function AuthLoadingScreen({ isCreatingAccount, onAuthComplete }: AuthLoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/08-AuthLoadingScreen.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { LoadingSquares } from '../components/LoadingSquares';
+export function AuthLoadingScreen(_a) {
+    var _b = _a.isCreatingAccount, isCreatingAccount = _b === void 0 ? false : _b, onAuthComplete = _a.onAuthComplete;
+    useEffect(function () {
+        // Simulate authentication completion after 5 seconds (increased from 2 seconds)
+        // to give users more time to read transaction details
+        var timer = setTimeout(function () {
+            if (onAuthComplete) {
+                console.log('Auth completed, calling onAuthComplete callback');
+                onAuthComplete(true); // Authentication was successful
+            }
+        }, 5000);
+        return function () { return clearTimeout(timer); };
+    }, [onAuthComplete]);
+    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: [_jsx("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: isCreatingAccount ? 'Creating Account' : 'Authenticating' }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: isCreatingAccount
+                            ? 'Please wait while we create your Nord account'
+                            : 'Please wait while we log you in to your Nord account' })] })] }));
+}

package/dist/WalletConnectionFlow/screens/09-FinalSuccessScreen.d.ts

@@ -0,0 +1,5 @@
+interface FinalSuccessScreenProps {
+    onDone: () => void;
+}
+export declare function FinalSuccessScreen({ onDone, }: FinalSuccessScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/09-FinalSuccessScreen.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ANIMATION_EASE } from '../constants';
+export function FinalSuccessScreen(_a) {
+    var onDone = _a.onDone;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), isButtonEnabled = _c[0], setIsButtonEnabled = _c[1];
+    // Add a minimum viewing time before enabling the button
+    useEffect(function () {
+        var timer = setTimeout(function () {
+            setIsButtonEnabled(true);
+        }, 3000); // 3 seconds minimum viewing time
+        return function () { return clearTimeout(timer); };
+    }, []);
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "flex flex-col items-center justify-center pt-4", children: [_jsx("div", { className: "mb-6", children: _jsx("div", { className: "w-20 h-20 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-green-500 dark:text-green-400", 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: "M5 13l4 4L19 7" }) }) }) }), _jsx("h2", { className: "text-2xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: "Authentication Successful!" }), _jsx("p", { className: "text-lg text-gray-700 dark:text-neutral-300 text-center", children: "Your wallet has been successfully connected" })] }), _jsx("button", { onClick: isButtonEnabled ? onDone : undefined, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n            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 ".concat(ANIMATION_EASE, "\n            cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            ").concat(!isButtonEnabled ? 'opacity-50 cursor-not-allowed' : '', "\n          "), style: {
+                        transform: isHovered && isButtonEnabled ? 'scale(0.99)' : 'scale(1)',
+                    }, disabled: !isButtonEnabled, children: _jsx("span", { className: "\n            text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n            text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n          "), children: isButtonEnabled ? 'Open App' : 'Please wait...' }) })] }) }));
+}

package/dist/WalletConnectionFlow/screens/10-ErrorScreen.d.ts

@@ -0,0 +1,7 @@
+interface ErrorScreenProps {
+    onRetry: () => void;
+    onCancel: () => void;
+    error: Error | null;
+}
+export declare function ErrorScreen({ onRetry, onCancel, error, }: ErrorScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/10-ErrorScreen.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ANIMATION_EASE } from '../constants';
+export function ErrorScreen(_a) {
+    var onRetry = _a.onRetry, onCancel = _a.onCancel, error = _a.error;
+    var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
+    var errorMessage = (error === null || error === void 0 ? void 0 : error.message) || 'An unexpected error occurred';
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-col items-center justify-center py-4", children: [_jsx("div", { className: "mb-6", children: _jsx("div", { className: "w-20 h-20 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-red-500 dark:text-red-400", 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: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }) }), _jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: "Something went wrong" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-6 max-w-xs", children: errorMessage })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("button", { onClick: onRetry, onMouseEnter: function () { return setIsHovered('retry'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              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 ".concat(ANIMATION_EASE, "\n              cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            "), style: {
+                                transform: isHovered === 'retry' ? 'scale(0.99)' : 'scale(1)',
+                            }, children: _jsx("span", { className: "\n              text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n              text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n            "), children: "Try Again" }) }), _jsx("button", { onClick: onCancel, onMouseEnter: function () { return setIsHovered('cancel'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              group relative w-full overflow-hidden rounded-md border-2 border-gray-200 dark:border-gray-800 bg-white dark:bg-neutral-900 py-4 text-center\n              transition-all duration-300 ".concat(ANIMATION_EASE, "\n              cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-950\n            "), style: {
+                                transform: isHovered === 'cancel' ? 'scale(0.99)' : 'scale(1)',
+                            }, children: _jsx("span", { className: "\n              text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n              text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300\n            "), children: "Cancel" }) })] })] }) }));
+}

package/dist/WalletConnectionFlow/screens/AmountInputScreen.d.ts

@@ -0,0 +1,8 @@
+interface AmountInputScreenProps {
+    amount: string;
+    onAmountChange: (amount: string) => void;
+    onContinue: () => void;
+    balance: number;
+}
+export declare function AmountInputScreen({ amount, onAmountChange, onContinue, balance, }: AmountInputScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/AmountInputScreen.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ANIMATION_EASE, MAX_DEPOSIT, MIN_DEPOSIT } from '../constants';
+export function AmountInputScreen(_a) {
+    var amount = _a.amount, onAmountChange = _a.onAmountChange, onContinue = _a.onContinue, balance = _a.balance;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var handleAmountChange = function (e) {
+        var value = e.target.value;
+        if (/^\d*\.?\d*$/.test(value)) {
+            onAmountChange(value);
+        }
+    };
+    var isValidAmount = amount !== '' &&
+        Number(amount) >= MIN_DEPOSIT &&
+        Number(amount) <= MAX_DEPOSIT &&
+        Number(amount) <= balance;
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-6 text-center", children: "Enter Amount" }), _jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-neutral-400", children: "Amount" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-neutral-400", children: ["Balance: ", balance, " USDC"] })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", defaultValue: amount, onChange: handleAmountChange, placeholder: "0.00", className: "w-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 rounded-md px-4 py-3 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-0 focus:border-main dark:focus:border-main transition-colors duration-200" }), _jsxs("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [_jsx("img", { src: "/images/tokens/usdc.svg", width: 20, height: 20, alt: "USDC" }), _jsx("span", { className: "text-gray-400 dark:text-neutral-500", children: "USDC" })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs text-gray-400 dark:text-neutral-500", children: ["Min: ", MIN_DEPOSIT, " USDC"] }), _jsxs("span", { className: "text-xs text-gray-400 dark:text-neutral-500", children: ["Max: ", MAX_DEPOSIT, " USDC"] })] })] }), _jsx("button", { onClick: onContinue, disabled: !isValidAmount, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n            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 ".concat(ANIMATION_EASE, "\n            cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            ").concat(!isValidAmount ? 'opacity-50 cursor-not-allowed hover:border-gray-200 dark:hover:border-gray-800' : '', "\n          "), style: {
+                            transform: isHovered && isValidAmount ? 'scale(0.99)' : 'scale(1)',
+                        }, children: _jsx("span", { className: "\n            text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n            text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n            ").concat(!isValidAmount ? 'group-hover:text-gray-700 dark:group-hover:text-gray-300' : '', "\n          "), children: "Continue" }) })] })] }));
+}

package/dist/WalletConnectionFlow/screens/AppsTableScreen.d.ts

@@ -0,0 +1,8 @@
+import { App } from '../types';
+interface AppsTableScreenProps {
+    apps: App[];
+    blurIntensity: number;
+    showModal: boolean;
+}
+export declare function AppsTableScreen({ apps, blurIntensity, showModal, }: AppsTableScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/AppsTableScreen.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Logo from '../../components/Logo';
+export function AppsTableScreen(_a) {
+    var apps = _a.apps, blurIntensity = _a.blurIntensity, showModal = _a.showModal;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-4 gap-4 w-full min-h-full p-8 pb-32 animate-fade-in", children: apps.map(function (app, index) { return (_jsxs("div", { className: "relative h-[200px] overflow-hidden bg-white dark:bg-neutral-950/50 border border-gray-100 dark:border-neutral-800/50 rounded-lg", style: {
+                        opacity: (app.progress / 100) * 0.6,
+                        transform: "scale(".concat(0.8 + app.progress / 500, ")"),
+                        borderColor: 'rgb(var(--main-color), 0.5)',
+                        borderStyle: 'solid',
+                        borderWidth: "".concat((app.progress / 100) * 1, "px"),
+                        transition: 'all 800ms cubic-bezier(0.16, 1, 0.3, 1)',
+                        filter: "blur(".concat(blurIntensity, "px)"),
+                    }, children: [_jsx("div", { className: "absolute inset-0 opacity-0 transition-all duration-800 ease-[cubic-bezier(0.16,1,0.3,1)]", style: {
+                                opacity: app.progress / 2000,
+                                background: 'rgb(var(--main-color))',
+                            } }), _jsxs("div", { className: "absolute inset-0 flex flex-col", style: {
+                                opacity: (app.progress / 100) * 0.7,
+                                transform: "scale(".concat(0.9 + app.progress / 1000, ")"),
+                                transition: 'all 800ms cubic-bezier(0.16, 1, 0.3, 1)',
+                            }, children: [_jsx("div", { className: "h-[1px] w-full bg-gradient-to-r from-transparent via-main/50 dark:via-main/70 to-transparent" }), _jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-1 h-1 bg-main/50 dark:bg-main/70" }), _jsx("div", { className: "h-[1px] w-12 bg-gradient-to-r from-main/50 dark:from-main/70 to-transparent" })] }), _jsx("div", { className: "flex items-center justify-center", children: _jsx("div", { className: "w-16 h-16 border-2 border-main/50 dark:border-main/70", style: {
+                                                    transform: "rotate(".concat(app.progress * 3.6, "deg)"),
+                                                    transition: 'transform 800ms cubic-bezier(0.16, 1, 0.3, 1)',
+                                                } }) }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("div", { className: "h-[1px] w-12 bg-gradient-to-l from-main/50 dark:from-main/70 to-transparent" }), _jsx("div", { className: "w-1 h-1 bg-main/50 dark:bg-main/70" })] })] })] })] }, app.name)); }) }), showModal && (_jsx("div", { className: "fixed inset-0 pointer-events-none flex items-center justify-center z-100 brightness-125", children: _jsx("div", { className: "relative border-2 border-gray-100 dark:border-neutral-900 bg-white/90 dark:bg-neutral-950 backdrop-blur-sm rounded-lg transform transition-all duration-500 p-4 -mt-64", style: {
+                        opacity: 0,
+                        animation: 'fadeIn 3s cubic-bezier(0.16, 1, 0.3, 1) forwards',
+                        animationDelay: '1.4s',
+                    }, children: _jsxs("div", { className: "relative px-8 py-4", children: [_jsx("div", { className: "absolute -top-2 -left-2 w-2 h-2 bg-main/50 dark:bg-neutral-900" }), _jsx("div", { className: "absolute -top-2 -right-2 w-2 h-2 bg-main/50 dark:bg-neutral-900" }), _jsx("div", { className: "absolute -bottom-2 -left-2 w-2 h-2 bg-main/50 dark:bg-neutral-900" }), _jsx("div", { className: "absolute -bottom-2 -right-2 w-2 h-2 bg-main/50 dark:bg-neutral-900" }), _jsx("div", { className: "flex flex-col items-center gap-3", children: _jsxs("h2", { className: "text-xl font-medium tracking-wide text-gray-800 dark:text-neutral-200 flex justify-center items-end", children: [_jsx("span", { className: "text-main/90 dark:text-white/80 px-1", children: "\u2728" }), ' ', "Build something magical on", _jsx("div", { className: "pb-0.5 pl-1", children: _jsx(Logo, { size: 28 }) }), _jsx("span", { className: "text-main/90 dark:text-white/60 px-1", children: "\u2728" })] }) })] }) }) }))] }));
+}

package/dist/WalletConnectionFlow/screens/AuthLoadingScreen.d.ts

@@ -0,0 +1,6 @@
+interface AuthLoadingScreenProps {
+    isCreatingAccount?: boolean;
+    onAuthComplete?: (success: boolean) => void;
+}
+export declare function AuthLoadingScreen({ isCreatingAccount, onAuthComplete }: AuthLoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/AuthLoadingScreen.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { LoadingSquares } from '../components/LoadingSquares';
+export function AuthLoadingScreen(_a) {
+    var _b = _a.isCreatingAccount, isCreatingAccount = _b === void 0 ? false : _b, onAuthComplete = _a.onAuthComplete;
+    useEffect(function () {
+        // Simulate authentication completion after 5 seconds (increased from 2 seconds)
+        // to give users more time to read transaction details
+        var timer = setTimeout(function () {
+            if (onAuthComplete) {
+                console.log('Auth completed, calling onAuthComplete callback');
+                onAuthComplete(true); // Authentication was successful
+            }
+        }, 5000);
+        return function () { return clearTimeout(timer); };
+    }, [onAuthComplete]);
+    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: [_jsx("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: isCreatingAccount ? 'Creating Account' : 'Authenticating' }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: isCreatingAccount
+                            ? 'Please wait while we create your Nord account'
+                            : 'Please wait while we log you in to your Nord account' })] })] }));
+}

package/dist/WalletConnectionFlow/screens/ChainSelectionScreen.d.ts

@@ -0,0 +1,7 @@
+import { Chain } from '../types';
+interface ChainSelectionScreenProps {
+    chains: Chain[];
+    onChainSelect: (chainId: string) => void;
+}
+export declare function ChainSelectionScreen({ chains, onChainSelect, }: ChainSelectionScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/ChainSelectionScreen.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from 'lucide-react';
+import { ChainButton } from '../components/ChainButton';
+export function ChainSelectionScreen(_a) {
+    var chains = _a.chains, onChainSelect = _a.onChainSelect;
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-6 text-center", children: "Select Chain" }), _jsxs("div", { className: "space-y-8", children: [_jsx("div", { className: "grid grid-cols-2 gap-4", children: chains.map(function (chain) { return (_jsx(ChainButton, { chain: chain, onClick: onChainSelect }, chain.id)); }) }), _jsxs("button", { className: "w-full flex items-center justify-center p-6 bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 hover:border-main dark:hover:border-main hover:bg-main/5 dark:hover:bg-neutral-900 transition-all duration-200 group rounded-lg", children: [_jsx(Plus, { className: "w-6 h-6 text-gray-400 dark:text-neutral-400 group-hover:text-main dark:group-hover:text-white group-hover:scale-110 transition-all duration-200 mr-2" }), _jsx("span", { className: "font-medium text-gray-600 dark:text-neutral-400 group-hover:text-main dark:group-hover:text-white transition-colors duration-200", children: "More" })] })] })] }));
+}

package/dist/WalletConnectionFlow/screens/ConnectWalletScreen.d.ts

@@ -0,0 +1,6 @@
+interface ConnectWalletScreenProps {
+    onConnectWallet: () => void;
+    isConnecting: boolean;
+}
+export declare function ConnectWalletScreen({ onConnectWallet, isConnecting, }: ConnectWalletScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/ConnectWalletScreen.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { IoMdWallet } from 'react-icons/io';
+import { LoadingSquares } from '../components/LoadingSquares';
+import { ANIMATION_EASE } from '../constants';
+export function ConnectWalletScreen(_a) {
+    var onConnectWallet = _a.onConnectWallet, isConnecting = _a.isConnecting;
+    var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
+    // If connecting, show loading state
+    if (isConnecting) {
+        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: [_jsx("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: "Connecting Wallet" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: "Please approve the connection request in your wallet" })] })] }));
+    }
+    // If not connecting, show connect options (exactly like NTS flow)
+    return (_jsx("div", { className: "p-6 overflow-hidden relative", children: _jsxs("div", { className: "space-y-4", children: [_jsx("button", { onClick: onConnectWallet, onMouseEnter: function () { return setIsHovered('wallet'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n            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 ".concat(ANIMATION_EASE, "\n            cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n          "), style: {
+                        transform: isHovered === 'wallet' ? 'scale(0.99)' : 'scale(1)',
+                    }, children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsxs("div", { className: "flex items-center", children: [_jsx(IoMdWallet, { className: "w-5 h-5 text-gray-500 dark:text-neutral-400 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300" }), _jsx("span", { className: "\n                ml-2 text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n                text-gray-500 dark:text-neutral-400 group-hover:text-gray-900 dark:group-hover:text-white\n              "), children: "Continue with Wallet" })] }) }) }), _jsx("button", { disabled: true, onMouseEnter: function () { return setIsHovered('google'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n            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 ".concat(ANIMATION_EASE, "\n            cursor-not-allowed border-gray-200 dark:border-gray-800 opacity-50\n          "), children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center", children: _jsx("span", { className: "text-base font-medium tracking-wide text-gray-500 dark:text-neutral-400", children: "Continue with Google (soon)" }) }) }) }), _jsx("button", { disabled: true, onMouseEnter: function () { return setIsHovered('email'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n            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 ".concat(ANIMATION_EASE, "\n            cursor-not-allowed border-gray-200 dark:border-gray-800 opacity-50\n          "), children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center", children: _jsx("span", { className: "text-base font-medium tracking-wide text-gray-500 dark:text-neutral-400", children: "Continue with Email (soon)" }) }) }) })] }) }));
+}

package/dist/WalletConnectionFlow/screens/DepositProgressScreen.d.ts

@@ -0,0 +1,7 @@
+import { WaitingMessageState } from '../types';
+interface DepositProgressScreenProps {
+    message: WaitingMessageState;
+    percentComplete?: number;
+}
+export declare function DepositProgressScreen({ message }: DepositProgressScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/DepositProgressScreen.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WaitingMessage } from '../components/WaitingMessage';
+export function DepositProgressScreen(_a) {
+    var message = _a.message;
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsx(WaitingMessage, { message: message }) }));
+}

package/dist/WalletConnectionFlow/screens/DepositSuccessScreen.d.ts

@@ -0,0 +1,8 @@
+import { TableValues } from '../types';
+interface DepositSuccessScreenProps {
+    amount: string;
+    tableValues: TableValues;
+    onContinue: () => void;
+}
+export declare function DepositSuccessScreen({ amount, tableValues, onContinue, }: DepositSuccessScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/DepositSuccessScreen.js

@@ -0,0 +1,99 @@
+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 { useEffect, useState } from 'react';
+import { TransactionTable } from '../components/TransactionTable';
+import { ANIMATION_EASE, TYPING_INTERVAL } from '../constants';
+export function DepositSuccessScreen(_a) {
+    var amount = _a.amount, tableValues = _a.tableValues, onContinue = _a.onContinue;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), showDetails = _c[0], setShowDetails = _c[1];
+    var _d = useState({
+        amount: { text: '', visible: false, typing: false },
+        tx: { text: '', visible: false, typing: false },
+        from: { text: '', visible: false, typing: false },
+        to: { text: '', visible: false, typing: false },
+        network: { text: '', visible: false, typing: false },
+        status: { text: '', visible: false, typing: false },
+    }), animatedTableValues = _d[0], setAnimatedTableValues = _d[1];
+    // Add state to track if the button should be enabled
+    var _e = useState(false), isContinueEnabled = _e[0], setIsContinueEnabled = _e[1];
+    // Add state to show a message about waiting
+    var _f = useState(true), showWaitingMessage = _f[0], setShowWaitingMessage = _f[1];
+    // Add animation to table values
+    useEffect(function () {
+        if (!showDetails)
+            return;
+        // Extract the text values from the tableValues
+        var values = {
+            amount: "".concat(Number(amount).toLocaleString(), " USDC"),
+            tx: tableValues.tx.text,
+            from: tableValues.from.text,
+            to: tableValues.to.text,
+            network: tableValues.network.text,
+            status: tableValues.status.text,
+        };
+        // Animate each field with typing effect
+        Object.entries(values).forEach(function (_a, index) {
+            var key = _a[0], value = _a[1];
+            setTimeout(function () {
+                // Make the field visible first
+                setAnimatedTableValues(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { visible: true, typing: true }), _a)));
+                });
+                var textIndex = 0;
+                // Type out each character with the typing animation
+                var interval = setInterval(function () {
+                    if (textIndex <= value.length) {
+                        setAnimatedTableValues(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
+                                text: value.slice(0, textIndex),
+                                visible: true,
+                                typing: textIndex < value.length,
+                            }, _a)));
+                        });
+                        textIndex++;
+                    }
+                    else {
+                        clearInterval(interval);
+                        setAnimatedTableValues(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
+                                text: value,
+                                visible: true,
+                                typing: false,
+                            }, _a)));
+                        });
+                    }
+                }, TYPING_INTERVAL);
+            }, index * 300); // Slightly faster staggering for better UX
+        });
+    }, [tableValues, showDetails, amount]);
+    // Enable the continue button after a minimum viewing time
+    useEffect(function () {
+        var enableTimer = setTimeout(function () {
+            setIsContinueEnabled(true);
+            setShowWaitingMessage(false);
+        }, 4000);
+        return function () { return clearTimeout(enableTimer); };
+    }, []);
+    var toggleDetails = function () {
+        setShowDetails(function (prev) { return !prev; });
+    };
+    return (_jsx("div", { className: "relative w-full px-4", children: _jsx("div", { className: "flex flex-col space-y-6", children: _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "relative w-full px-3 py-3 flex items-center justify-center transition-all duration-300 ".concat(ANIMATION_EASE, " ").concat(showDetails ? 'opacity-0 max-h-0' : 'opacity-100 max-h-[200px]'), children: _jsxs("div", { className: "relative w-full px-5 py-8 transition-all duration-300 ".concat(ANIMATION_EASE, " ").concat(showDetails ? 'max-h-0 overflow-hidden' : 'max-h-[200px]'), children: [_jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -top-2 -left-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -top-2 -right-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -bottom-2 -left-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-green-200 dark:bg-emerald-800 absolute -bottom-2 -right-2 rounded-sm" }), _jsxs("p", { className: "text-5xl md:text-7xl tracking-tight text-green-500/80 dark:text-emerald-500/80 font-medium pt-4 underline text-center animate-fade-up", style: { animationDelay: '0.3s' }, children: ["+", Number(amount).toLocaleString(), _jsx("span", { className: "text-xl md:text-2xl text-green-500/50 dark:text-emerald-500/50 ml-2", children: "USDC" })] }), _jsx("div", { className: "absolute bottom-0 left-0 right-0 flex justify-center -mb-3", children: _jsxs("button", { onClick: toggleDetails, className: "\n                    group flex items-center space-x-1 px-3 py-1 text-xs font-medium \n                    transition-colors duration-200 focus:outline-none\n                    ".concat(showDetails
+                                            ? 'text-green-600 dark:text-emerald-400 hover:text-green-700 dark:hover:text-emerald-300'
+                                            : 'text-gray-500 dark:text-gray-400 hover:text-green-600 dark:hover:text-emerald-400', "\n                  "), children: [_jsx("span", { children: "View details" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 transition-transform duration-200", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) })] }) }), _jsx("div", { className: "transition-all duration-300 ease-in-out overflow-hidden ".concat(showDetails ? 'max-h-[500px] opacity-100 -mt-4' : 'max-h-0 opacity-0'), children: _jsx(TransactionTable, { tableValues: animatedTableValues, onClose: toggleDetails }) }), _jsxs("div", { className: "mt-6", children: [showWaitingMessage && (_jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-2 animate-pulse", children: "Please wait a moment..." })), _jsx("button", { onClick: isContinueEnabled ? onContinue : undefined, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n                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 ".concat(ANIMATION_EASE, "\n                cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n                ").concat(!isContinueEnabled ? 'opacity-50 cursor-not-allowed' : '', "\n              "), style: {
+                                    transform: isHovered && isContinueEnabled ? 'scale(0.99)' : 'scale(1)',
+                                }, disabled: !isContinueEnabled, children: _jsx("span", { className: "\n                text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n                text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n              "), children: "Continue" }) })] })] }) }) }));
+}

package/dist/WalletConnectionFlow/screens/ErrorScreen.d.ts

@@ -0,0 +1,7 @@
+interface ErrorScreenProps {
+    onRetry: () => void;
+    onCancel: () => void;
+    error: Error | null;
+}
+export declare function ErrorScreen({ onRetry, onCancel, error, }: ErrorScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WalletConnectionFlow/screens/ErrorScreen.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ANIMATION_EASE } from '../constants';
+export function ErrorScreen(_a) {
+    var onRetry = _a.onRetry, onCancel = _a.onCancel, error = _a.error;
+    var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
+    var errorMessage = (error === null || error === void 0 ? void 0 : error.message) || 'An unexpected error occurred';
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-col items-center justify-center py-4", children: [_jsx("div", { className: "mb-6", children: _jsx("div", { className: "w-20 h-20 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-red-500 dark:text-red-400", 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: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }) }), _jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: "Something went wrong" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-6 max-w-xs", children: errorMessage })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("button", { onClick: onRetry, onMouseEnter: function () { return setIsHovered('retry'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              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 ".concat(ANIMATION_EASE, "\n              cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            "), style: {
+                                transform: isHovered === 'retry' ? 'scale(0.99)' : 'scale(1)',
+                            }, children: _jsx("span", { className: "\n              text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n              text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n            "), children: "Try Again" }) }), _jsx("button", { onClick: onCancel, onMouseEnter: function () { return setIsHovered('cancel'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              group relative w-full overflow-hidden rounded-md border-2 border-gray-200 dark:border-gray-800 bg-white dark:bg-neutral-900 py-4 text-center\n              transition-all duration-300 ".concat(ANIMATION_EASE, "\n              cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-950\n            "), style: {
+                                transform: isHovered === 'cancel' ? 'scale(0.99)' : 'scale(1)',
+                            }, children: _jsx("span", { className: "\n              text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n              text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300\n            "), children: "Cancel" }) })] })] }) }));
+}

package/dist/WalletConnectionFlow/screens/EthToSolAuthScreen.d.ts

@@ -0,0 +1,6 @@
+interface EvmWalletAuthScreenProps {
+    onAuth: () => void;
+    isAuthenticating?: boolean;
+}
+export declare function EvmWalletAuthScreen({ onAuth, isAuthenticating, }: EvmWalletAuthScreenProps): import("react/jsx-runtime").JSX.Element;
+export { EvmWalletAuthScreen as EthToSolAuthScreen };