@n1xyz/wallet-widget 0.0.1 → 0.0.5

package/dist/components/WalletDeposit/AnimatedButton.js

@@ -0,0 +1,29 @@
+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: disabled ? undefined : onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: function () { return setIsPressed(true); }, onMouseUp: function () { return setIsPressed(false); }, disabled: disabled, 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                ").concat(disabled
+            ? 'cursor-not-allowed border-gray-200 dark:border-neutral-800 opacity-50'
+            : 'cursor-pointer border-gray-200 dark:border-neutral-800 hover:border-gray-400 dark:hover:border-white/60', "\n            "), style: {
+            transform: isPressed
+                ? 'scale(0.98)'
+                : isHovered
+                    ? 'scale(0.99)'
+                    : 'scale(1)',
+        }, children: [_jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center", children: _jsx("span", { className: "\n                        text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n                        ").concat(isTyping ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-neutral-400', "\n                        ").concat(isHovered ? '!text-gray-900 dark:!text-white' : '', "\n                    "), children: formatButtonText(text) }) }) }), _jsx("div", { className: "\n                absolute inset-0 z-10 bg-gradient-to-r from-gray-400/0 via-gray-400/10 dark:from-white/0 dark:via-white/10 to-gray-400/0 dark:to-white/0\n                transition-all duration-300 ".concat(ANIMATION_EASE, "\n                ").concat(isHovered ? 'opacity-100 translate-x-full' : 'opacity-0 -translate-x-full', "\n            ") }), _jsx("div", { className: "\n                    absolute inset-0 z-20 \n                    bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzIiBoZWlnaHQ9IjMiPgo8cmVjdCB3aWR0aD0iMC41IiBoZWlnaHQ9IjAuNSIgZmlsbD0iI2ZmZmZmZiI+PC9yZWN0Pgo8L3N2Zz4=')]\n                    [background-size:3px_3px]\n                    transition-all duration-300 ".concat(ANIMATION_EASE, "\n                    ").concat(isHovered ? 'opacity-10 scale-125' : 'opacity-0 scale-100', "\n                    ").concat(isHovered ? '' : 'animate-grain', "\n                    pointer-events-none\n                ") }), _jsx("div", { className: "\n                    absolute inset-0 z-10 \n                    bg-gradient-to-br from-gray-400/15 via-gray-400/5 to-gray-400/10 dark:from-white/15 dark:via-white/5 dark:to-white/10\n                    transition-all duration-300 ".concat(ANIMATION_EASE, "\n                    ").concat(isHovered ? 'opacity-100' : 'opacity-0', "\n                    pointer-events-none\n                ") }), _jsx("div", { className: "\n                    absolute inset-0 z-30\n                    bg-gray-400/3 dark:bg-white/3\n                    transition-opacity duration-300 ".concat(ANIMATION_EASE, "\n                    ").concat(isHovered ? 'opacity-100' : 'opacity-0', "\n                    pointer-events-none\n                ") })] }));
+};

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

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

package/dist/components/WalletDeposit/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/components/WalletDeposit/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/components/WalletDeposit/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/components/WalletDeposit/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/components/WalletDeposit/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/components/WalletDeposit/constants.d.ts

@@ -0,0 +1,15 @@
+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;
+}[];
+export declare const CHAINS: {
+    id: string;
+    name: string;
+    logo: string;
+}[];

package/dist/components/WalletDeposit/constants.js

@@ -0,0 +1,32 @@
+export var ANIMATION_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)';
+export var TYPING_INTERVAL = 50;
+export var ANIMATION_DURATION = 3000;
+export var MIN_DEPOSIT = 1;
+export var MAX_DEPOSIT = 10000;
+export var INITIAL_APPS = Array.from({ length: 20 }, function (_, i) { return ({
+    name: "App".concat(i + 1),
+    color: '#ff2b1f',
+    progress: 0,
+}); });
+export var CHAINS = [
+    {
+        id: 'ethereum',
+        name: 'Ethereum',
+        logo: '/images/chains/ethereum.svg',
+    },
+    {
+        id: 'polygon',
+        name: 'Polygon',
+        logo: '/images/chains/polygon.svg',
+    },
+    {
+        id: 'arbitrum',
+        name: 'Arbitrum',
+        logo: '/images/chains/arbitrum.svg',
+    },
+    {
+        id: 'optimism',
+        name: 'Optimism',
+        logo: '/images/chains/optimism.svg',
+    },
+];

package/dist/components/WalletDeposit/hooks.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+import { TableValues, WaitingMessageState } from './types';
+import { ButtonStates } from './AnimatedButton';
+export declare function useButtonTyping(buttonStates: ButtonStates, setButtonStates: Dispatch<SetStateAction<ButtonStates>>): void;
+export declare function useWaitingMessage(isSigningView: boolean, isWaitingForTx: boolean, setIsWaitingForTx: Dispatch<SetStateAction<boolean>>, setIsSuccessView: Dispatch<SetStateAction<boolean>>, setIsSigningView: Dispatch<SetStateAction<boolean>>): {
+    waitingMessage: WaitingMessageState;
+    setHasError: Dispatch<SetStateAction<boolean>>;
+};
+export declare function useTableValues(isSuccessView: boolean, selectedChain: string | null): TableValues;

package/dist/components/WalletDeposit/hooks.js

@@ -0,0 +1,185 @@
+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 { useState, useEffect } from 'react';
+import { TYPING_INTERVAL, CHAINS } from './constants';
+var BUTTON_CONFIGS = {
+    deposit: { text: 'Deposit' },
+    continue: { text: 'Continue' },
+    openApp: { text: 'Launch' },
+};
+export function useButtonTyping(buttonStates, setButtonStates) {
+    useEffect(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);
+                    }
+                }, TYPING_INTERVAL);
+                return function () { return clearInterval(interval_1); };
+            }
+        });
+    }, [buttonStates, setButtonStates]);
+}
+export function useWaitingMessage(isSigningView, isWaitingForTx, setIsWaitingForTx, setIsSuccessView, setIsSigningView) {
+    var _a = useState({
+        title: '',
+        subtitle: '',
+        visible: false,
+        isTyping: false,
+    }), waitingMessage = _a[0], setWaitingMessage = _a[1];
+    var _b = useState(false), hasError = _b[0], setHasError = _b[1];
+    useEffect(function () {
+        if (isSigningView && !isWaitingForTx) {
+            var messages_1 = [
+                {
+                    title: 'Waiting for signature',
+                    subtitle: 'Please sign the transaction in your wallet',
+                    delay: 0,
+                },
+                {
+                    title: 'Waiting for transaction',
+                    subtitle: 'Transaction is being processed...',
+                    delay: 3000,
+                },
+            ];
+            var currentMessageIndex = 0;
+            var showMessage_1 = function (message) {
+                var index = 0;
+                var interval = setInterval(function () {
+                    if (index <= Math.max(message.title.length, message.subtitle.length)) {
+                        setWaitingMessage({
+                            title: message.title.slice(0, index),
+                            subtitle: message.subtitle.slice(0, index),
+                            visible: true,
+                            isTyping: true,
+                        });
+                        index++;
+                    }
+                    else {
+                        clearInterval(interval);
+                        setWaitingMessage({
+                            title: message.title,
+                            subtitle: message.subtitle,
+                            visible: true,
+                            isTyping: false,
+                        });
+                    }
+                }, TYPING_INTERVAL);
+                return interval;
+            };
+            var currentInterval_1 = showMessage_1(messages_1[currentMessageIndex]);
+            var messageTimeout_1 = setTimeout(function () {
+                clearInterval(currentInterval_1);
+                currentInterval_1 = showMessage_1(messages_1[1]);
+                setTimeout(function () {
+                    setIsWaitingForTx(true);
+                    setTimeout(function () {
+                        if (!hasError) {
+                            setIsSuccessView(true);
+                        }
+                        else {
+                            setWaitingMessage({
+                                title: 'Transaction Failed',
+                                subtitle: 'Please try again',
+                                visible: true,
+                                isTyping: false,
+                            });
+                            setTimeout(function () {
+                                setIsWaitingForTx(false);
+                                setIsSigningView(false);
+                            }, 2000);
+                        }
+                    }, 4000);
+                }, 4000);
+            }, messages_1[1].delay);
+            return function () {
+                clearInterval(currentInterval_1);
+                clearTimeout(messageTimeout_1);
+            };
+        }
+    }, [
+        isSigningView,
+        isWaitingForTx,
+        setIsWaitingForTx,
+        setIsSuccessView,
+        hasError,
+        setIsSigningView,
+    ]);
+    return { waitingMessage: waitingMessage, setHasError: setHasError };
+}
+export function useTableValues(isSuccessView, selectedChain) {
+    var _a = useState({
+        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 },
+    }), tableValues = _a[0], setTableValues = _a[1];
+    useEffect(function () {
+        if (isSuccessView) {
+            var chain = CHAINS.find(function (c) { return c.id === selectedChain; });
+            var values = {
+                tx: '0x1234...5678',
+                from: '0xabcd...ef01',
+                to: '0x2345...6789',
+                network: (chain === null || chain === void 0 ? void 0 : chain.name) || 'Unknown',
+                status: 'Success',
+            };
+            Object.entries(values).forEach(function (_a, index) {
+                var key = _a[0], value = _a[1];
+                setTimeout(function () {
+                    var textIndex = 0;
+                    setTableValues(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { visible: true }), _a)));
+                    });
+                    var interval = setInterval(function () {
+                        if (textIndex <= value.length) {
+                            setTableValues(function (prev) {
+                                var _a;
+                                return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
+                                    text: value.slice(0, textIndex),
+                                    visible: true,
+                                    typing: true,
+                                }, _a)));
+                            });
+                            textIndex++;
+                        }
+                        else {
+                            clearInterval(interval);
+                            setTableValues(function (prev) {
+                                var _a;
+                                return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
+                                    text: value,
+                                    visible: true,
+                                    typing: false,
+                                }, _a)));
+                            });
+                        }
+                    }, TYPING_INTERVAL);
+                }, index * 500);
+            });
+        }
+    }, [isSuccessView, selectedChain]);
+    return tableValues;
+}

package/dist/components/WalletDeposit/index.d.ts

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

package/dist/components/WalletDeposit/index.js

@@ -0,0 +1,136 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowLeft, X } from 'lucide-react';
+import { useState } from 'react';
+import Logo from '../Logo';
+import { INITIAL_APPS } from './constants';
+import { useButtonTyping, useTableValues, useWaitingMessage } from './hooks';
+import { AmountInputScreen } from './screens/AmountInputScreen';
+import { AppsTableScreen } from './screens/AppsTableScreen';
+import { ChainSelectionScreen } from './screens/ChainSelectionScreen';
+import { InitialScreen } from './screens/InitialScreen';
+import { SigningScreen } from './screens/SigningScreen';
+import { SuccessScreen } from './screens/SuccessScreen';
+export default function WalletDeposit() {
+    // View states
+    var _a = useState(null), selectedChain = _a[0], setSelectedChain = _a[1];
+    var _b = useState(''), amount = _b[0], setAmount = _b[1];
+    var _c = useState(false), isSigningView = _c[0], setIsSigningView = _c[1];
+    var _d = useState(false), isSuccessView = _d[0], setIsSuccessView = _d[1];
+    var _e = useState(false), isClosing = _e[0], setIsClosing = _e[1];
+    var _f = useState(false), showChainSelect = _f[0], setShowChainSelect = _f[1];
+    var _g = useState(true), showInitialScreen = _g[0], setShowInitialScreen = _g[1];
+    var _h = useState(false), isWaitingForTx = _h[0], setIsWaitingForTx = _h[1];
+    var _j = useState(false), showAppsTable = _j[0], setShowAppsTable = _j[1];
+    var _k = useState(INITIAL_APPS), apps = _k[0], setApps = _k[1];
+    var _l = useState(false), showModal = _l[0], setShowModal = _l[1];
+    var _m = useState(0), blurIntensity = _m[0], setBlurIntensity = _m[1];
+    // Animation states
+    var _o = useState({
+        deposit: { text: '', isTyping: false, showCursor: false },
+        continue: { text: '', isTyping: false, showCursor: false },
+        openApp: { text: '', isTyping: false, showCursor: false },
+    }), buttonStates = _o[0], setButtonStates = _o[1];
+    // Custom hooks
+    useButtonTyping(buttonStates, setButtonStates);
+    var _p = useWaitingMessage(isSigningView, isWaitingForTx, setIsWaitingForTx, setIsSuccessView, setIsSigningView), waitingMessage = _p.waitingMessage, setHasError = _p.setHasError;
+    var tableValues = useTableValues(isSuccessView, selectedChain);
+    // Event handlers
+    var handleClose = function () {
+        setIsClosing(true);
+        setTimeout(function () {
+            setShowAppsTable(true);
+            var completedApps = 0;
+            var totalApps = apps.length;
+            setTimeout(function () {
+                var blurInterval = setInterval(function () {
+                    setBlurIntensity(function (prev) {
+                        if (prev < 3)
+                            return prev + 0.15;
+                        clearInterval(blurInterval);
+                        return prev;
+                    });
+                }, 50);
+            }, 1400);
+            apps.forEach(function (_, index) {
+                setTimeout(function () {
+                    var progress = 0;
+                    var progressInterval = setInterval(function () {
+                        if (progress < 100) {
+                            progress += 1;
+                            setApps(function (prevApps) {
+                                return prevApps.map(function (app, i) {
+                                    return i === index ? __assign(__assign({}, app), { progress: progress }) : app;
+                                });
+                            });
+                        }
+                        else {
+                            clearInterval(progressInterval);
+                            completedApps++;
+                            if (completedApps === Math.floor(totalApps * 0.8)) {
+                                setShowModal(true);
+                            }
+                        }
+                    }, 5);
+                }, index * 150);
+            });
+        }, 700);
+    };
+    var handleButtonMouseEnter = function (buttonKey) {
+        setButtonStates(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[buttonKey] = { text: '', isTyping: true, showCursor: true }, _a)));
+        });
+    };
+    var handleButtonMouseLeave = function (buttonKey) {
+        setButtonStates(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[buttonKey] = { text: '', isTyping: false, showCursor: false }, _a)));
+        });
+    };
+    if (showAppsTable) {
+        return (_jsx("div", { className: "fixed inset-0 bg-white dark:bg-black flex items-center justify-center z-50 font-era overflow-auto", children: _jsx(AppsTableScreen, { apps: apps, blurIntensity: blurIntensity, showModal: showModal }) }));
+    }
+    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 ".concat(!showChainSelect
+                ? 'max-w-sm'
+                : isSigningView || isSuccessView
+                    ? 'max-w-2xl'
+                    : 'max-w-lg', " ").concat(isClosing ? 'animate-fade-out' : 'animate-fade-in', " m-4 origin-center will-change-[max-width,transform,opacity]"), children: [_jsxs("div", { className: "flex justify-between items-center p-6 ".concat(showInitialScreen ? '' : 'border-b border-gray-200 dark:border-gray-800', " rounded-t-md"), children: [_jsx("div", { className: "flex items-center gap-4", children: !showChainSelect ? (_jsx("div", { className: "w-6 h-6 opacity-0" })) : (_jsxs(_Fragment, { children: [selectedChain && !isSigningView && !isSuccessView && (_jsx("button", { onClick: function () {
+                                            if (showChainSelect && !amount) {
+                                                setSelectedChain(null);
+                                            }
+                                            else {
+                                                setShowChainSelect(false);
+                                                setAmount('');
+                                            }
+                                        }, className: "text-gray-500 hover:text-main dark:text-gray-400 dark:hover:text-main transition-colors duration-200", children: _jsx(ArrowLeft, { size: 20 }) })), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-6 h-6 text-gray-50", children: _jsx(Logo, { size: 24 }) }), _jsxs("h2", { className: "text-xl text-gray-400 flex items-center gap-2 ml-2", children: ["Deposit", selectedChain && !isSigningView && !isSuccessView && (_jsx("span", { className: "text-gray-700 font-normal", children: "/ / Amount" })), isSigningView && !isSuccessView && (_jsx("span", { className: "text-gray-700 font-normal", children: "/ / Sign" })), isSuccessView && (_jsx("span", { className: "text-gray-700 font-normal", children: "/ / Success" }))] })] })] })) }), _jsx("button", { onClick: handleClose, className: "text-neutral-400 hover:text-main transition-colors duration-200 h-6 flex items-center", children: _jsx(X, { size: 20 }) })] }), _jsxs("div", { className: "p-6 overflow-hidden relative transition-[height] duration-[3000ms] delay-500 ease-in-out", children: [_jsx("div", { className: "transition-all duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] ".concat(!showInitialScreen
+                                ? 'opacity-0 -translate-y-[120%] absolute inset-x-6 pointer-events-none'
+                                : 'opacity-100 translate-y-0 pointer-events-auto animate-content-appear'), children: _jsx(InitialScreen, { onStart: function () {
+                                    setShowInitialScreen(false);
+                                    setShowChainSelect(true);
+                                }, buttonStates: buttonStates, onButtonMouseEnter: handleButtonMouseEnter, onButtonMouseLeave: handleButtonMouseLeave }) }), _jsx("div", { className: "transition-all duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] ".concat(!showChainSelect || selectedChain
+                                ? 'opacity-0 -translate-x-[120%] absolute inset-x-6 pointer-events-none'
+                                : 'opacity-100 translate-x-0 pointer-events-auto animate-content-appear'), children: _jsx(ChainSelectionScreen, { onChainSelect: function (chainId) {
+                                    setSelectedChain(chainId);
+                                    setShowChainSelect(true);
+                                } }) }), _jsx("div", { className: "transition-all duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] ".concat(!showChainSelect ||
+                                !selectedChain ||
+                                isSigningView ||
+                                isSuccessView
+                                ? 'opacity-0 translate-x-[120%] absolute inset-x-6 pointer-events-none'
+                                : 'opacity-100 translate-x-0 pointer-events-auto animate-content-appear'), children: _jsx(AmountInputScreen, { amount: amount, onAmountChange: setAmount, onContinue: function () { return setIsSigningView(true); }, balance: 100, buttonStates: buttonStates, onButtonMouseEnter: handleButtonMouseEnter, onButtonMouseLeave: handleButtonMouseLeave }) }), _jsx("div", { className: "transition-all duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] ".concat(!isSigningView || isSuccessView
+                                ? 'opacity-0 translate-x-[120%] absolute inset-x-6 pointer-events-none'
+                                : 'opacity-100 translate-x-0 pointer-events-auto'), children: _jsx(SigningScreen, { waitingMessage: waitingMessage }) }), _jsx("div", { className: "transition-all duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)] ".concat(!isSuccessView
+                                ? 'opacity-0 translate-x-[120%] absolute inset-x-6 pointer-events-none'
+                                : 'opacity-100 translate-x-0 pointer-events-auto'), children: _jsx(SuccessScreen, { amount: amount, tableValues: tableValues, onOpenApp: handleClose, buttonStates: buttonStates, onButtonMouseEnter: handleButtonMouseEnter, onButtonMouseLeave: handleButtonMouseLeave }) })] })] }) }));
+}

package/dist/components/WalletDeposit/screens/AmountInputScreen.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonStates } from '../AnimatedButton';
+interface AmountInputScreenProps {
+    amount: string;
+    onAmountChange: (amount: string) => void;
+    onContinue: () => void;
+    balance: number;
+    buttonStates: ButtonStates;
+    onButtonMouseEnter: (buttonKey: 'deposit' | 'continue' | 'openApp') => void;
+    onButtonMouseLeave: (buttonKey: 'deposit' | 'continue' | 'openApp') => void;
+}
+export declare function AmountInputScreen({ amount, onAmountChange, onContinue, balance, buttonStates, onButtonMouseEnter, onButtonMouseLeave, }: AmountInputScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/WalletDeposit/screens/AmountInputScreen.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatedButton } from '../AnimatedButton';
+import { MIN_DEPOSIT, MAX_DEPOSIT } from '../constants';
+export function AmountInputScreen(_a) {
+    var amount = _a.amount, onAmountChange = _a.onAmountChange, onContinue = _a.onContinue, balance = _a.balance, buttonStates = _a.buttonStates, onButtonMouseEnter = _a.onButtonMouseEnter, onButtonMouseLeave = _a.onButtonMouseLeave;
+    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: "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", value: 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(AnimatedButton, { onClick: onContinue, text: "Continue", isTyping: buttonStates.continue.isTyping, disabled: !isValidAmount, onMouseEnter: function () { return onButtonMouseEnter('continue'); }, onMouseLeave: function () { return onButtonMouseLeave('continue'); } })] }));
+}

package/dist/components/WalletDeposit/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/components/WalletDeposit/screens/AppsTableScreen.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Logo from '../../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/components/WalletDeposit/screens/ChainSelectionScreen.d.ts

@@ -0,0 +1,5 @@
+interface ChainSelectionScreenProps {
+    onChainSelect: (chainId: string) => void;
+}
+export declare function ChainSelectionScreen({ onChainSelect, }: ChainSelectionScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};