@n1xyz/wallet-widget 0.0.1 → 0.0.4

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 {};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from 'lucide-react';
+import { CHAINS } from '../constants';
+import { ChainButton } from '../components/ChainButton';
+export function ChainSelectionScreen(_a) {
+    var onChainSelect = _a.onChainSelect;
+    return (_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/components/WalletDeposit/screens/InitialScreen.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonStates } from '../AnimatedButton';
+interface InitialScreenProps {
+    onStart: () => void;
+    buttonStates: ButtonStates;
+    onButtonMouseEnter: (buttonKey: 'deposit' | 'continue' | 'openApp') => void;
+    onButtonMouseLeave: (buttonKey: 'deposit' | 'continue' | 'openApp') => void;
+}
+export declare function InitialScreen({ onStart, buttonStates, onButtonMouseEnter, onButtonMouseLeave, }: InitialScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Logo from '../../Logo';
+import { AnimatedButton } from '../AnimatedButton';
+import { useState } from 'react';
+export function InitialScreen(_a) {
+    var onStart = _a.onStart, buttonStates = _a.buttonStates, onButtonMouseEnter = _a.onButtonMouseEnter, onButtonMouseLeave = _a.onButtonMouseLeave;
+    var _b = useState(0), logoOpacity = _b[0], setLogoOpacity = _b[1];
+    var handleMouseEnter = function () {
+        setLogoOpacity(1);
+        onButtonMouseEnter('deposit');
+    };
+    var handleMouseLeave = function () {
+        setLogoOpacity(0);
+        onButtonMouseLeave('deposit');
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center pb-8", children: [_jsx("div", { className: "flex justify-center items-center py-8 -mt-8", children: _jsx(Logo, { size: 140, fillOpacity: logoOpacity }) }), _jsx(AnimatedButton, { onClick: onStart, text: "Deposit", isTyping: buttonStates.deposit.isTyping, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })] }));
+}

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WaitingMessage } from '../components/WaitingMessage';
+export function SigningScreen(_a) {
+    var waitingMessage = _a.waitingMessage;
+    return _jsx(WaitingMessage, { message: waitingMessage });
+}

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

@@ -0,0 +1,12 @@
+import type { ButtonStates } from '../AnimatedButton';
+import type { TableValues } from '../types';
+interface SuccessScreenProps {
+    amount: string;
+    tableValues: TableValues;
+    onOpenApp: () => void;
+    buttonStates: ButtonStates;
+    onButtonMouseEnter: (buttonKey: 'deposit' | 'continue' | 'openApp') => void;
+    onButtonMouseLeave: (buttonKey: 'deposit' | 'continue' | 'openApp') => void;
+}
+export declare function SuccessScreen({ amount, tableValues, onOpenApp, buttonStates, }: SuccessScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatedButton } from '../AnimatedButton';
+import { TransactionTable } from '../components/TransactionTable';
+export function SuccessScreen(_a) {
+    var amount = _a.amount, tableValues = _a.tableValues, onOpenApp = _a.onOpenApp, buttonStates = _a.buttonStates;
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [_jsxs("div", { className: "w-full flex items-start justify-between space-x-4 py-8", children: [_jsx("div", { className: "w-1/2 p-4", children: _jsxs("div", { className: "relative w-full h-full px-5 py-14 rounded-md", children: [_jsx("div", { className: "w-2 h-2 bg-gray-200 dark:bg-neutral-800 absolute -top-2 -left-2" }), _jsx("div", { className: "w-2 h-2 bg-gray-200 dark:bg-neutral-800 absolute -top-2 -right-2" }), _jsx("div", { className: "w-2 h-2 bg-gray-200 dark:bg-neutral-800 absolute -bottom-2 -left-2" }), _jsx("div", { className: "w-2 h-2 bg-gray-200 dark:bg-neutral-800 absolute -bottom-2 -right-2" }), _jsxs("p", { className: "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-2xl text-green-500/50 dark:text-emerald-500/50 ml-2", children: "USDC" })] })] }) }), _jsx(TransactionTable, { tableValues: tableValues })] }), _jsx(AnimatedButton, { onClick: onOpenApp, text: "Launch", isTyping: buttonStates.openApp.isTyping })] }));
+}

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

@@ -0,0 +1,43 @@
+export interface TableValues {
+    tx: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    from: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    to: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    network: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    status: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+}
+export interface WaitingMessageState {
+    title: string;
+    subtitle: string;
+    visible: boolean;
+    isTyping: boolean;
+}
+export interface Chain {
+    id: string;
+    name: string;
+    logo: string;
+}
+export interface App {
+    name: string;
+    color: string;
+    progress: number;
+}

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export { N1WalletProvider } from './Provider/N1WalletProvider';
 export { N1ModalViewMode } from './Provider/types';
 export { N1ConnectButton } from './WidgetButton/N1ConnectButton';
 export { useN1WalletContext } from './Provider/hooks';
+export { default as Logo } from './components/Logo';
+export { default as WalletDeposit } from './components/WalletDeposit';

package/dist/index.js

@@ -3,3 +3,5 @@ export { N1WalletProvider } from './Provider/N1WalletProvider';
 export { N1ModalViewMode } from './Provider/types';
 export { N1ConnectButton } from './WidgetButton/N1ConnectButton';
 export { useN1WalletContext } from './Provider/hooks';
+export { default as Logo } from './components/Logo';
+export { default as WalletDeposit } from './components/WalletDeposit';