@n1xyz/wallet-widget 0.0.1 → 0.0.4

package/dist/Modal/Sidebar/N1Sidebar.js

@@ -1,21 +1,87 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import BlockiesSvg from 'blockies-react-svg';
+import QRCodeLoader from '../../components/QRCodeLoader';
+import { ArrowDown, ArrowUp, X, ArrowLeft } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { N1ModalViewMode } from '../../Provider/types';
+import { shortenAddress } from '../../utils/shortenString';
 import { useN1WalletContext, useN1WalletInternalContext, } from '../../Provider/hooks';
+import { importNTSSDK } from '../../utils/dynamicImports';
+import { getUserBalances } from '../../Logic/utils';
+import { logger } from '../../utils/logger';
 export function N1Sidebar(_) {
+    var _this = this;
+    // State management
     var _a = useState(false), closing = _a[0], setClosing = _a[1];
-    var _b = useN1WalletContext(), username = _b.username, isConnected = _b.isConnected, address = _b.address;
-    var _c = useN1WalletInternalContext(), setShowSidebar = _c.setShowSidebar, showSidebar = _c.showSidebar, setStartClosingLogin = _c.setStartClosingLogin, dynamicHandleLogOut = _c.dynamicHandleLogOut;
-    var addressText = isConnected && address.substring(0, 9) + '...' + address.slice(-3);
-    var _d = useN1WalletInternalContext(), setViewMode = _d.setViewMode, setIsConnected = _d.setIsConnected;
-    function disconnect() {
+    var _b = useState(false), sending = _b[0], setSending = _b[1];
+    var _c = useState(false), receiving = _c[0], setReceiving = _c[1];
+    var _d = useState(''), success = _d[0], setSuccess = _d[1];
+    var _e = useState(false), activeSending = _e[0], setActiveSending = _e[1];
+    var _f = useState(''), tokenToSend = _f[0], setTokenToSend = _f[1];
+    var _g = useState(''), appIdAction = _g[0], setAppIdAction = _g[1];
+    var _h = useState(''), amount = _h[0], setAmount = _h[1];
+    var _j = useState(''), recipientAddress = _j[0], setRecipientAddress = _j[1];
+    var _k = useState(''), error = _k[0], setError = _k[1];
+    var _l = useState('balances'), currentView = _l[0], setCurrentView = _l[1];
+    // Context hooks
+    var _m = useN1WalletContext(), username = _m.username, isConnected = _m.isConnected, address = _m.address, balances = _m.balances, walletPubKey = _m.walletPubKey, sessionPubKey = _m.sessionPubKey, signMessageWithSessionKey = _m.signMessageWithSessionKey;
+    var _o = useN1WalletInternalContext(), setShowSidebar = _o.setShowSidebar, showSidebar = _o.showSidebar, setStartClosingLogin = _o.setStartClosingLogin, dynamicHandleLogOut = _o.dynamicHandleLogOut, setBalances = _o.setBalances, setViewMode = _o.setViewMode, setIsConnected = _o.setIsConnected;
+    // Utility functions
+    var clearSendingForm = function () {
+        setAmount('');
+        setTokenToSend('');
+        setRecipientAddress('');
+        setAppIdAction('');
+        setSuccess('');
+        setError('');
+    };
+    var handleClose = function () {
+        setClosing(true);
+        setStartClosingLogin(true);
+    };
+    var disconnect = function () {
         dynamicHandleLogOut();
         setViewMode(N1ModalViewMode.Connect);
         setIsConnected(false);
-        setClosing(true);
-        setStartClosingLogin(true);
-    }
+        handleClose();
+    };
+    // Effects
     useEffect(function () {
         if (showSidebar) {
             setClosing(false);
@@ -31,8 +97,81 @@ export function N1Sidebar(_) {
         }
         return function () { return clearTimeout(timeout); };
     }, [closing, setShowSidebar]);
-    return (_jsxs("div", { className: 'fixed inset-0 bg-neutral-400/45 dark:bg-neutral-700/45 h-screen w-screen duration-500 ease-in-out z-[9999] flex items-center justify-end py-3 backdrop-blur-sm ' +
-            (!showSidebar && 'hidden pointer-events-none') +
-            (closing ? ' opacity-0' : ' opacity-100'), children: [showSidebar && (_jsx("div", { className: 'w-screen h-screen fixed top-0 left-0', onClick: function () { return setClosing(true); } })), showSidebar && (_jsx("div", { className: 'relative h-full py-6 pl-6 pr-8 bg-white dark:bg-neutral-900 shadow-xl border-2 border-neutral-200 dark:border-neutral-700 rounded-l-2xl rounded-b-2xl rounded-t-2xl duration-500 ease-in-out overflow-hidden ' +
-                    (closing ? 'translate-x-full' : 'translate-x-0'), children: _jsxs("div", { className: 'flex flex-col', children: [_jsxs("div", { className: "flex w-full mb-4", children: [_jsx("div", { className: "w-16 h-16 bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center justify-center relative", children: _jsx("div", { className: "overflow-hidden rounded-full w-16 h-16", children: _jsx(BlockiesSvg, { address: address, className: "drop-shadow w-full h-full rounded-[20px]" }) }) }), _jsxs("div", { className: 'flex flex-col pl-3 py-2', children: [_jsx("div", { className: 'font-extrabold text-neutral-900 dark:text-stone-200', children: username }), _jsx("div", { className: 'font-extrabold text-neutral-400 dark:text-neutral-500', children: addressText })] })] }), _jsxs("div", { className: 'mt-4 rounded-2xl flex flex-col items-center justify-center h-24 w-full p-2 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 border-neutral-200 dark:border-neutral-700 border text-neutral-700 dark:text-neutral-300 cursor-pointer', onClick: disconnect, children: [_jsx("div", { className: 'bg-red-400 rounded-sm h-4 w-4 mb-2 rotate-45' }), _jsx("div", { className: 'font-bold', children: "Disconnect" }), _jsx("div", { className: 'text-xs', children: "Log out from the application" })] }), _jsxs("div", { className: 'justify-center w-full flex text-xs mt-8 mb-6 items-center', children: [_jsx("div", { className: 'h-0.5 bg-neutral-300 dark:bg-neutral-700 w-16 mx-2' }), _jsx("div", { className: 'text-neutral-600 dark:text-neutral-400 font-bold', children: "Other apps" }), _jsx("div", { className: 'h-0.5 bg-neutral-300 dark:bg-neutral-700 w-16 mx-2' })] }), _jsx("div", { className: 'flex flex-col gap-y-2', children: _jsx("div", { className: "cursor-pointer flex flex-col flex-shrink-0 mr-6 w-full h-48 bg-neutral-900 dark:bg-black rounded-xl overflow-hidden relative", children: _jsx("div", { className: 'absolute flex flex-row items-center justify-between bottom-0 w-full bg-gradient-to-t px-5 py-3 from-neutral-900 dark:from-black', children: _jsxs("div", { className: "flex flex-row gap-3 items-center", children: [_jsx("div", { className: "w-10 h-10 relative rounded-lg overflow-hidden" }), _jsxs("div", { className: "flex flex-col leading-none", children: [_jsx("div", { className: "text-white", children: "Nos" }), _jsx("div", { className: "text-neutral-200", children: "Perp Dex" })] })] }) }) }) })] }) }))] }));
+    useEffect(function () {
+        if (!isConnected && showSidebar) {
+            setShowSidebar(false);
+        }
+    }, [isConnected, showSidebar]);
+    // Send tokens handler
+    var handleSend = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        var sdk, nts, idl, appClient, balances_1, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    setError('');
+                    if (!sessionPubKey || !signMessageWithSessionKey || !walletPubKey)
+                        return [2 /*return*/];
+                    if (!tokenToSend || !amount || !recipientAddress) {
+                        setError('All fields are required.');
+                        setTimeout(function () { return setError(''); }, 2000);
+                        return [2 /*return*/];
+                    }
+                    if (isNaN(Number(amount)) || Number(amount) <= 0) {
+                        setError('Amount must be a positive number.');
+                        setTimeout(function () { return setError(''); }, 2000);
+                        return [2 /*return*/];
+                    }
+                    setActiveSending(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, , 7]);
+                    return [4 /*yield*/, importNTSSDK()];
+                case 2:
+                    sdk = _a.sent();
+                    nts = new sdk.NTSInterface(process.env.NTS_URL);
+                    return [4 /*yield*/, nts.getAppIdl(appIdAction)];
+                case 3:
+                    idl = _a.sent();
+                    appClient = new sdk.NAppClient(process.env.NTS_URL, appIdAction, idl, walletPubKey, sessionPubKey, signMessageWithSessionKey);
+                    return [4 /*yield*/, appClient['transfer'](amount, tokenToSend, recipientAddress)];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, getUserBalances(address)];
+                case 5:
+                    balances_1 = _a.sent();
+                    setBalances(balances_1);
+                    setActiveSending(false);
+                    setSuccess('Tokens sent successfully!');
+                    setTimeout(function () {
+                        setSending(false);
+                        clearSendingForm();
+                    }, 2000);
+                    return [3 /*break*/, 7];
+                case 6:
+                    error_1 = _a.sent();
+                    logger.error('Error sending tokens:', error_1);
+                    setError('Error sending tokens. Please try again.');
+                    setActiveSending(false);
+                    setTimeout(function () { return setError(''); }, 2000);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("div", { className: "fixed inset-0 bg-white/45 dark:bg-black/45 h-screen w-screen duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] z-[9999] flex items-stretch justify-end backdrop-blur-sm ".concat(!showSidebar ? 'hidden pointer-events-none' : '', " ").concat(closing ? 'opacity-0' : 'opacity-100'), children: [showSidebar && (_jsx("div", { className: "w-screen h-screen fixed top-0 left-0", onClick: function () { return setClosing(true); } })), showSidebar && (_jsxs("div", { className: "relative h-screen w-[420px] bg-gray-50 dark:bg-gray-950 shadow-xl border-l border-gray-200 dark:border-gray-800 duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] overflow-hidden ".concat(closing ? 'translate-x-full' : 'translate-x-0'), children: [_jsxs("div", { className: "flex justify-between items-center px-6 py-4 border-b border-gray-200 dark:border-gray-800", children: [_jsxs("div", { className: "flex items-center gap-4", children: [currentView !== 'balances' && (_jsx("button", { onClick: function () {
+                                            setCurrentView('balances');
+                                            clearSendingForm();
+                                        }, className: "text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-500 transition-colors duration-200", children: _jsx(ArrowLeft, { size: 20 }) })), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(BlockiesSvg, { address: address, className: "w-10 h-10 rounded-full" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-gray-50", children: username }), _jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: shortenAddress(address) })] })] })] }), _jsx("button", { onClick: handleClose, className: "text-gray-400 hover:text-red-500 transition-colors duration-200 h-6 flex items-center", children: _jsx(X, { size: 20 }) })] }), _jsxs("div", { className: "p-6 overflow-y-auto h-[calc(100vh-144px)]", children: [currentView === 'balances' && (_jsxs("div", { className: "flex justify-center gap-4 mb-6", children: [_jsxs("button", { onClick: function () { return setCurrentView('receive'); }, className: "flex flex-col items-center gap-2 group", children: [_jsx("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 group-hover:border-main dark:group-hover:border-main transition-colors duration-200", children: _jsx(ArrowDown, { size: 20, className: "text-gray-500 dark:text-neutral-400 group-hover:text-main dark:group-hover:text-main transition-colors duration-200" }) }), _jsx("span", { className: "text-sm text-gray-500 dark:text-neutral-400 group-hover:text-main dark:group-hover:text-main transition-colors duration-200", children: "Receive" })] }), balances.length > 0 && (_jsxs("button", { onClick: function () { return setCurrentView('send'); }, className: "flex flex-col items-center gap-2 group", children: [_jsx("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 group-hover:border-main dark:group-hover:border-main transition-colors duration-200", children: _jsx(ArrowUp, { size: 20, className: "text-gray-500 dark:text-neutral-400 group-hover:text-main dark:group-hover:text-main transition-colors duration-200" }) }), _jsx("span", { className: "text-sm text-gray-500 dark:text-neutral-400 group-hover:text-main dark:group-hover:text-main transition-colors duration-200", children: "Send" })] }))] })), _jsxs("div", { className: "space-y-4", children: [currentView === 'balances' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900 dark:text-gray-50", children: "Tokens" }), _jsx("div", { className: "h-px flex-1 mx-4 bg-gray-200 dark:bg-gray-800" })] }), _jsx("div", { className: "space-y-3", children: balances
+                                                    .sort(function (a, b) { return Number(b.balance) - Number(a.balance); })
+                                                    .map(function (balance) { return (_jsx("div", { className: "p-4 bg-gray-50 dark:bg-gray-950 rounded-xl border-2 border-gray-100 dark:border-gray-800 hover:border-red-400 dark:hover:border-[#ff2b1f] transition-colors duration-200", children: _jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(BlockiesSvg, { address: balance.mint, className: "w-10 h-10 rounded-lg" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-gray-900 dark:text-gray-50", children: shortenAddress(balance.mint) }), _jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.balance.toLocaleString()] })] })] }) }) }, balance.mint)); }) })] })), currentView === 'send' && (_jsxs("form", { onSubmit: handleSend, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2", children: "Select Token" }), _jsxs("select", { onChange: function (e) {
+                                                            var value = e.target.value.split('-');
+                                                            setAppIdAction(value[0]);
+                                                            setTokenToSend(value[1]);
+                                                            setAmount('');
+                                                        }, className: "w-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 rounded-xl 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-red-400 dark:focus:border-[#ff2b1f] transition-colors duration-200", children: [_jsx("option", { value: "", children: "Select Token" }), balances.map(function (token) { return (_jsx("option", { value: token.appId + '-' + token.mint, children: shortenAddress(token.mint) }, token.mint)); })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2", children: "Amount" }), _jsx("input", { type: "number", placeholder: "0.00", value: amount, onChange: function (e) { return setAmount(e.target.value); }, className: "w-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 rounded-xl 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-red-400 dark:focus:border-[#ff2b1f] transition-colors duration-200" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2", children: "Recipient Address" }), _jsx("input", { type: "text", placeholder: "Enter recipient address", value: recipientAddress, onChange: function (e) { return setRecipientAddress(e.target.value); }, className: "w-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 rounded-xl 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-red-400 dark:focus:border-[#ff2b1f] transition-colors duration-200" })] }), error && (_jsx("div", { className: "text-red-500 text-sm text-center", children: error })), success && (_jsx("div", { className: "text-green-500 text-sm text-center", children: success })), _jsx("button", { type: "submit", disabled: activeSending, className: "w-full px-6 py-3 rounded-xl bg-main hover:bg-main/90 text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2", children: activeSending ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Sending" }), _jsx("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" })] })) : ('Send Tokens') })] })), currentView === 'receive' && (_jsxs("div", { className: "flex flex-col items-center gap-6", children: [_jsx("div", { className: "w-64 h-64 p-4 bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 rounded-xl", children: _jsx(QRCodeLoader, { address: address }) }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm text-gray-500 dark:text-neutral-400 mb-2", children: "Your wallet address" }), _jsx("p", { className: "font-medium text-gray-900 dark:text-white break-all px-4", children: address })] }), _jsx("button", { onClick: function () {
+                                                    navigator.clipboard.writeText(address);
+                                                    setSuccess('Address copied!');
+                                                    setTimeout(function () { return setSuccess(''); }, 2000);
+                                                }, className: "px-6 py-3 rounded-xl bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 hover:border-main dark:hover:border-main text-gray-900 dark:text-white font-medium transition-colors duration-200", children: success === 'Address copied!' ? 'Copied!' : 'Copy Address' })] }))] })] }), _jsx("div", { className: "absolute bottom-0 left-0 right-0 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950", children: _jsx("button", { onClick: disconnect, className: "w-full px-6 py-3 rounded-xl bg-red-100 dark:bg-red-900/20 hover:bg-red-200 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 font-medium transition-colors duration-200", children: "Disconnect" }) })] }))] }));
 }

package/dist/Modal/SigningView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ModalHeader } from './ModalHeader';
 export function SigningView() {
-    return (_jsxs("div", { className: "rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200", children: [_jsx(ModalHeader, {}), _jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("div", { className: "animate-spin-slow w-16 h-16 border-4 rounded-full border-neutral-200 dark:border-neutral-700 border-t-neutral-900 dark:border-t-white" }), _jsx("p", { className: "text-sm mb-4 mt-6 text-neutral-500 dark:text-neutral-400", children: "Please sign the message to authenticate" })] })] }));
+    return (_jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity]", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx(ModalHeader, {}) }), _jsx("div", { className: "p-6 overflow-hidden relative", children: _jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx("div", { className: "relative", children: _jsx("div", { className: "animate-spin rounded-full h-16 w-16 border-2 border-gray-200 dark:border-gray-800", children: _jsx("div", { className: "absolute inset-0 rounded-full border-t-2 border-main" }) }) }), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsxs("h3", { className: "text-xl text-gray-900 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 signature" }), _jsx("div", { className: "absolute min-w-[280px]", children: "Waiting for signature" })] }), _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 message in your wallet" }), _jsx("div", { className: "absolute min-w-[280px]", children: "Please sign the message in your wallet" })] })] })] }) })] }));
 }

package/dist/Provider/LazyWalletProvider.js

@@ -49,6 +49,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState, useRef } from 'react';
 import { useN1WalletInternalContext } from './hooks';
 import { logger } from '../utils/logger';
+import { N1ModalViewMode } from './types';
 var getSettings = function (darkMode) { return ({
     initialAuthenticationMode: 'connect-only',
     environmentId: '9a47561c-6a0b-4a5b-ace1-12621c11cebd',
@@ -63,7 +64,7 @@ var getSettings = function (darkMode) { return ({
 }); };
 function DynamicContextConsumer(_a) {
     var children = _a.children;
-    var _b = useN1WalletInternalContext(), setDynamicWallet = _b.setDynamicWallet, setAddress = _b.setAddress, setDynamicSdkHasLoaded = _b.setDynamicSdkHasLoaded, setShowDynamicWidget = _b.setShowDynamicWidget, darkMode = _b.darkMode, setDynamicHandleLogOut = _b.setDynamicHandleLogOut;
+    var _b = useN1WalletInternalContext(), setDynamicWallet = _b.setDynamicWallet, setAddress = _b.setAddress, setDynamicSdkHasLoaded = _b.setDynamicSdkHasLoaded, setShowDynamicWidget = _b.setShowDynamicWidget, setDynamicHandleLogOut = _b.setDynamicHandleLogOut, setViewMode = _b.setViewMode;
     var _c = useState(null), DynamicContext = _c[0], setDynamicContext = _c[1];
     var showAuthFlowRef = useRef(null);
     useEffect(function () {
@@ -75,6 +76,8 @@ function DynamicContextConsumer(_a) {
     // Set up a stable widget function that uses the ref
     useEffect(function () {
         setShowDynamicWidget(function () { return function (show) {
+            console.log('yeeyyeye', showAuthFlowRef);
+            console.log('yeeyyeye', showAuthFlowRef.current, show);
             if (showAuthFlowRef.current) {
                 showAuthFlowRef.current(show);
             }
@@ -99,6 +102,7 @@ function DynamicContextConsumer(_a) {
                 logger.debug('No primary wallet found');
                 setDynamicWallet(null);
                 setAddress('');
+                setViewMode(N1ModalViewMode.Connect);
             }
         }, [primaryWallet]);
         useEffect(function () {
@@ -152,7 +156,7 @@ function LazyInternal(props) {
         return null;
     }
     var dynamicSettings = __assign(__assign({}, getSettings(darkMode)), { walletConnectors: walletConnectors });
-    return (_jsx(Provider, { settings: dynamicSettings, children: _jsx(DynamicContextConsumer, { children: props.children }) }));
+    return (_jsx(Provider, { settings: dynamicSettings, theme: darkMode ? 'dark' : 'light', children: _jsx(DynamicContextConsumer, { children: props.children }) }));
 }
 export function LazyWalletProvider(_a) {
     var children = _a.children;

package/dist/Provider/N1WalletProvider.js

@@ -55,7 +55,7 @@ import React, { Suspense, useCallback, useEffect, useState } from 'react';
 import { N1WalletModal } from '../Modal/N1WalletModal';
 import { WalletError, WalletErrorCode } from '../errors/types';
 import { N1InternalWalletContext, N1WalletContext } from './context';
-import { N1ModalViewMode, N1SessionMode } from './types';
+import { N1ModalViewMode, N1SessionMode, } from './types';
 var LazyWalletProvider = React.lazy(function () {
     return import('./LazyWalletProvider').then(function (mod) { return ({
         default: mod.LazyWalletProvider,
@@ -104,12 +104,13 @@ export function N1WalletProvider(_a) {
     }, []);
     // dynamic
     var _r = useState(''), address = _r[0], setAddress = _r[1];
-    var _s = useState(''), chain = _s[0], setChain = _s[1];
-    var _t = useState(null), dynamicSdkHasLoaded = _t[0], setDynamicSdkHasLoaded = _t[1];
-    var _u = useState(null), dynamicHandleLogOut = _u[0], setDynamicHandleLogOut = _u[1];
-    var _v = useState(null), sessionMode = _v[0], setSessionMode = _v[1];
-    var _w = useState(null), dynamicWallet = _w[0], setDynamicWallet = _w[1];
-    var _x = useState(null), showDynamicWidget = _x[0], setShowDynamicWidget = _x[1];
+    var _s = useState([]), balances = _s[0], setBalances = _s[1];
+    var _t = useState(''), chain = _t[0], setChain = _t[1];
+    var _u = useState(null), dynamicSdkHasLoaded = _u[0], setDynamicSdkHasLoaded = _u[1];
+    var _v = useState(null), dynamicHandleLogOut = _v[0], setDynamicHandleLogOut = _v[1];
+    var _w = useState(null), sessionMode = _w[0], setSessionMode = _w[1];
+    var _x = useState(null), dynamicWallet = _x[0], setDynamicWallet = _x[1];
+    var _y = useState(null), showDynamicWidget = _y[0], setShowDynamicWidget = _y[1];
     // Combine SDK loading and initialization into a single effect
     useEffect(function () {
         var mounted = true;
@@ -171,6 +172,7 @@ export function N1WalletProvider(_a) {
     }); };
     return (_jsx(WalletErrorBoundary, { onError: handleError, children: _jsx(N1WalletContext.Provider, { value: {
                 address: address,
+                balances: balances,
                 appId: appId,
                 chain: chain,
                 isConnected: isConnected,
@@ -194,6 +196,7 @@ export function N1WalletProvider(_a) {
                     handleError: handleError,
                     setDynamicSdkHasLoaded: setDynamicSdkHasLoaded,
                     setAddress: setAddress,
+                    setBalances: setBalances,
                     setChain: setChain,
                     setDynamicHandleLogOut: setDynamicHandleLogOut,
                     setDynamicWallet: setDynamicWallet,

package/dist/Provider/types.d.ts

@@ -18,9 +18,16 @@ export interface N1WalletProviderProps {
     darkMode?: boolean;
     onError?: (error: WalletError) => void;
 }
+export interface Balance {
+    mint: string;
+    balance: bigint;
+    appId: string;
+    appType: string;
+}
 export interface N1WalletState {
     address: string;
     appId: string | null;
+    balances: Balance[];
     chain: string;
     isConnected: boolean;
     ntsInterface: any;
@@ -44,6 +51,7 @@ export interface N1InternalWalletState {
     handleError: (error: WalletError) => void;
     setDynamicSdkHasLoaded: (loaded: any) => void;
     setAddress: (address: string) => void;
+    setBalances: (balances: Balance[]) => void;
     setChain: (chain: string) => void;
     setDynamicHandleLogOut: (handler: any) => void;
     setDynamicWallet: (wallet: any) => void;

package/dist/components/Logo.d.ts

@@ -0,0 +1,7 @@
+interface LogoProps {
+    size?: number;
+    outlined?: boolean;
+    fillOpacity?: number;
+}
+export default function Logo({ size, outlined, fillOpacity, }: LogoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Logo.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Logo(_a) {
+    var _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.outlined, outlined = _c === void 0 ? false : _c, _d = _a.fillOpacity, fillOpacity = _d === void 0 ? 1 : _d;
+    // Calculate width based on the SVG's aspect ratio (1347.5/838)
+    var width = size * (1347.5 / 838);
+    return (_jsx("div", { className: "cursor-pointer text-black dark:text-white", style: { height: size, width: "".concat(width, "px") }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 1347.5 838", className: "h-full w-full", preserveAspectRatio: "xMidYMid meet", children: _jsxs("g", { children: [_jsxs("g", { id: "Layer_1", children: [_jsx("path", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: outlined || fillOpacity !== 1 ? '2px' : '0.5px',
+                                    fill: outlined ? 'none' : 'currentColor',
+                                    fillOpacity: outlined ? 0 : fillOpacity,
+                                    transition: outlined || fillOpacity !== 1
+                                        ? 'fill-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
+                                        : undefined,
+                                }, d: "M965.4,1497.9h-133.8v133.8h133.8v-133.8Z" }), _jsx("path", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: outlined || fillOpacity !== 1 ? '2px' : '0.5px',
+                                    fill: outlined ? 'none' : 'currentColor',
+                                    fillOpacity: outlined ? 0 : fillOpacity,
+                                    transition: outlined || fillOpacity !== 1
+                                        ? 'fill-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
+                                        : undefined,
+                                }, d: "M394.9,1497.9h-126.3l-134.9,134.9v435.7h134.9v-435.7h70.4l435.7,435.7h190.7l-435.7-435.7-134.9-134.9Z" }), _jsx("path", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: outlined || fillOpacity !== 1 ? '2px' : '0.5px',
+                                    fill: outlined ? 'none' : 'currentColor',
+                                    fillOpacity: outlined ? 0 : fillOpacity,
+                                    transition: outlined || fillOpacity !== 1
+                                        ? 'fill-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
+                                        : undefined,
+                                }, d: "M1078.9,1632.8v435.7h134.9v-570.5l-134.9,134.9Z" }), _jsx("rect", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: outlined || fillOpacity !== 1 ? '2px' : '0.5px',
+                                    fill: outlined ? 'none' : 'currentColor',
+                                    fillOpacity: outlined ? 0 : fillOpacity,
+                                    transition: outlined || fillOpacity !== 1
+                                        ? 'fill-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
+                                        : undefined,
+                                }, x: "831.7", y: "133.8", width: "133.8", height: "133.8" }), _jsx("polygon", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: outlined || fillOpacity !== 1 ? '2px' : '0.5px',
+                                    fill: outlined ? 'none' : 'currentColor',
+                                    fillOpacity: outlined ? 0 : fillOpacity,
+                                    transition: outlined || fillOpacity !== 1
+                                        ? 'fill-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
+                                        : undefined,
+                                }, points: "394.9 133.8 268.6 133.8 133.8 268.6 133.8 704.3 268.6 704.3 268.6 268.6 339 268.6 774.7 704.3 965.4 704.3 529.8 268.6 394.9 133.8" }), _jsx("polygon", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: outlined || fillOpacity !== 1 ? '2px' : '0.5px',
+                                    fill: outlined ? 'none' : 'currentColor',
+                                    fillOpacity: outlined ? 0 : fillOpacity,
+                                    transition: outlined || fillOpacity !== 1
+                                        ? 'fill-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
+                                        : undefined,
+                                }, points: "1078.9 268.6 1078.9 704.3 1213.8 704.3 1213.8 268.6 1213.8 198.2 1213.8 133.8 1078.9 268.6" })] }), _jsxs("g", { id: "Gridlines", children: [_jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "965.4", y1: "1232", x2: "965.4", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "-359.4", y1: "1631.7", x2: "1707.2", y2: "1631.7" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "831.7", y1: "1232", x2: "831.7", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "129", y1: "1232", x2: "1231.2", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "-61.7", y1: "1232", x2: "1040.5", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "-359.4", y1: "1632.8", x2: "1707.2", y2: "1632.8" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "268.6", y1: "1232", x2: "268.6", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "133.8", y1: "1232", x2: "133.8", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "534.5", y1: "1232", x2: "-359.4", y2: "2126" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "-359.4", y1: "1497.9", x2: "1707.2", y2: "1497.9" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "1479.7", y1: "1232", x2: "377.4", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "1213.8", y1: "1232", x2: "1213.8", y2: "2334.3" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "-359.4", y1: "2068.5", x2: "1707.2", y2: "2068.5" }), _jsx("line", { style: {
+                                    stroke: 'currentColor',
+                                    strokeMiterlimit: 10,
+                                    strokeWidth: '0.5px',
+                                }, x1: "1078.9", y1: "1232", x2: "1078.9", y2: "2334.3" })] })] }) }) }));
+}

package/dist/components/QRCodeLoader.d.ts

@@ -0,0 +1,4 @@
+declare const QRCodeLoader: ({ address }: {
+    address: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default QRCodeLoader;

package/dist/components/QRCodeLoader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+var QRCodeLoader = function (_a) {
+    var address = _a.address;
+    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
+    return (_jsxs("div", { className: "relative w-36 h-36", children: [isLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "w-8 h-8 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" }) })), _jsx("img", { src: "https://api.qrserver.com/v1/create-qr-code/?data=".concat(address, "&size=150x150"), alt: "QR Code", className: "w-full h-full", onLoad: function () { return setIsLoading(false); } })] }));
+};
+export default QRCodeLoader;

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

@@ -0,0 +1,17 @@
+export type ButtonKey = 'deposit' | 'continue' | 'openApp';
+export interface ButtonState {
+    text: string;
+    isTyping: boolean;
+    showCursor: boolean;
+}
+export type ButtonStates = Record<ButtonKey, ButtonState>;
+interface AnimatedButtonProps {
+    onClick: () => void;
+    text: string;
+    isTyping: boolean;
+    disabled?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const AnimatedButton: ({ onClick, text, isTyping, disabled, onMouseEnter, onMouseLeave, }: AnimatedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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,6 @@
+import { TableValues } from '../types';
+interface TransactionTableProps {
+    tableValues: TableValues;
+}
+export declare function TransactionTable({ tableValues }: TransactionTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/WalletDeposit/components/TransactionTable.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TransactionTable(_a) {
+    var tableValues = _a.tableValues;
+    return (_jsx("div", { className: "w-1/2 bg-gray-100 dark:bg-gray-950 border border-gray-200 dark:border-gray-800 p-5 rounded-sm h-full", children: _jsx("div", { className: "space-y-4 text-sm", children: Object.entries(tableValues).map(function (_a) {
+                var key = _a[0], value = _a[1];
+                return (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400", children: key }), _jsxs("div", { className: "relative transition-opacity duration-300 ".concat(value.visible ? 'opacity-100' : 'opacity-0'), children: [_jsx("span", { className: "text-gray-900 dark:text-gray-50", children: value.text }), value.typing && (_jsx("span", { className: "absolute right-[-12px] top-1/2 -translate-y-1/2 w-[4px] h-[24px] bg-red-500 dark:bg-red-500" }))] })] }, 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;
+}[];