@n1xyz/wallet-widget 0.0.1 → 0.0.5

package/dist/Modal/NordFlow/screens/04-AmountInputScreen.js

@@ -0,0 +1,165 @@
+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 { useCallback, useEffect, useRef, useState } from 'react';
+import { useN1WalletContext, useN1WalletInternalContext } from '../../../Provider/hooks';
+import { ImageWithFallback } from '../components';
+import { ANIMATION_EASE, MAX_DEPOSIT, MIN_DEPOSIT } from '../constants';
+import { formatAmount, isNordConfigured } from '../utils/nordUtils';
+export function AmountInputScreen(_a) {
+    var _this = this;
+    var amount = _a.amount, onAmountChange = _a.onAmountChange, onContinue = _a.onContinue, balance = _a.balance, propFaucetUrl = _a.faucetUrl, refreshBalance = _a.refreshBalance;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), isFaucetLoading = _c[0], setIsFaucetLoading = _c[1];
+    var _d = useState(null), faucetError = _d[0], setFaucetError = _d[1];
+    var _e = useState(false), tokensObtained = _e[0], setTokensObtained = _e[1];
+    var _f = useState(false), showFaucetSuccess = _f[0], setShowFaucetSuccess = _f[1];
+    var _g = useN1WalletContext(), address = _g.address, nord = _g.nord;
+    var contextFaucetUrl = useN1WalletInternalContext().faucetUrl;
+    var prevBalanceRef = useRef(balance);
+    var faucetUrl = propFaucetUrl || contextFaucetUrl;
+    // Get token information from Nord if available
+    var _h = useState('USDC'), tokenSymbol = _h[0], setTokenSymbol = _h[1];
+    var _j = useState('/images/tokens/usdc.svg'), tokenLogo = _j[0], setTokenLogo = _j[1];
+    var _k = useState(6), tokenDecimals = _k[0], setTokenDecimals = _k[1];
+    // Try to get token information from Nord
+    useEffect(function () {
+        if (nord && isNordConfigured(nord)) {
+            try {
+                // Find the USDC token or the first token
+                var usdcToken = nord.tokens.find(function (t) { return t.symbol === 'USDC'; }) || nord.tokens[0];
+                if (usdcToken) {
+                    setTokenSymbol(usdcToken.symbol);
+                    // Use a default logo if not available
+                    setTokenLogo("/images/tokens/".concat(usdcToken.symbol.toLowerCase(), ".svg"));
+                    setTokenDecimals(usdcToken.decimals);
+                }
+            }
+            catch (error) {
+                console.warn('Error getting token information from Nord:', error);
+            }
+        }
+    }, [nord]);
+    var handleAmountChange = function (e) {
+        var value = e.target.value;
+        if (/^\d*\.?\d*$/.test(value)) {
+            onAmountChange(value);
+        }
+    };
+    // todo:fix
+    var isValidAmount = true;
+    // Check if faucet is enabled and balance is low
+    var shouldShowFaucet = faucetUrl && balance < MIN_DEPOSIT && !tokensObtained;
+    // Determine if we should show the faucet overlay
+    var showFaucetOverlay = (shouldShowFaucet && (isFaucetLoading || faucetError)) || showFaucetSuccess;
+    // Function to request tokens from faucet
+    var requestTestnetTokens = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var response, errorData, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!faucetUrl || !address)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 8, 9, 10]);
+                    setIsFaucetLoading(true);
+                    setFaucetError(null);
+                    setShowFaucetSuccess(false);
+                    return [4 /*yield*/, fetch(faucetUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({ address: address }),
+                        })];
+                case 2:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 4];
+                    return [4 /*yield*/, response.json().catch(function () { return ({ error: 'Failed to request tokens' }); })];
+                case 3:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || 'Failed to request tokens');
+                case 4: return [4 /*yield*/, response.json()];
+                case 5:
+                    _a.sent();
+                    // Mark tokens as obtained to prevent further requests
+                    setTokensObtained(true);
+                    // Show success message
+                    setShowFaucetSuccess(true);
+                    if (!refreshBalance) return [3 /*break*/, 7];
+                    return [4 /*yield*/, refreshBalance()];
+                case 6:
+                    _a.sent();
+                    _a.label = 7;
+                case 7:
+                    setShowFaucetSuccess(false);
+                    return [3 /*break*/, 10];
+                case 8:
+                    error_1 = _a.sent();
+                    console.error('Faucet error:', error_1);
+                    setFaucetError(error_1 instanceof Error ? error_1.message : 'Failed to request tokens');
+                    return [3 /*break*/, 10];
+                case 9:
+                    setIsFaucetLoading(false);
+                    return [7 /*endfinally*/];
+                case 10: return [2 /*return*/];
+            }
+        });
+    }); }, [faucetUrl, address, refreshBalance]);
+    // Request tokens automatically when faucet is enabled and balance is low
+    useEffect(function () {
+        if (shouldShowFaucet && !isFaucetLoading && !faucetError && !showFaucetSuccess) {
+            requestTestnetTokens();
+        }
+    }, [shouldShowFaucet, isFaucetLoading, faucetError, showFaucetSuccess, requestTestnetTokens]);
+    // Reset tokensObtained state if balance changes to a higher value
+    useEffect(function () {
+        // If balance has increased and is now sufficient, reset the tokensObtained flag
+        if (balance > prevBalanceRef.current && balance >= MIN_DEPOSIT) {
+            setTokensObtained(false);
+            setShowFaucetSuccess(false);
+        }
+        // Update the previous balance reference
+        prevBalanceRef.current = balance;
+    }, [balance]);
+    // Format the balance with the appropriate number of decimal places
+    var formattedBalance = formatAmount(balance, tokenDecimals);
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [showFaucetOverlay && (_jsx("div", { className: "absolute inset-0 z-10 bg-white/70 dark:bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-6", children: isFaucetLoading ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative w-16 h-16 mb-4", children: _jsxs("div", { className: "absolute inset-0 grid grid-cols-2 gap-1", children: [_jsx("div", { className: "relative bg-white dark:bg-neutral-800 border border-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/30 animate-square-loader" }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-800 border border-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/30 animate-square-loader", style: { animationDelay: '0.2s' } }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-800 border border-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/30 animate-square-loader", style: { animationDelay: '0.4s' } }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-800 border border-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/30 animate-square-loader", style: { animationDelay: '0.6s' } }) })] }) }), _jsx("h3", { className: "text-lg font-medium text-gray-800 dark:text-white mb-2", children: "Obtaining Testnet Tokens" }), _jsx("p", { className: "text-sm text-gray-500 dark:text-neutral-400 text-center", children: "Please wait while we request testnet tokens for your wallet..." })] })) : showFaucetSuccess ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-green-500 text-4xl mb-4", children: "\u2713" }), _jsx("h3", { className: "text-lg font-medium text-gray-800 dark:text-white mb-2", children: "Tokens Obtained Successfully" }), _jsx("p", { className: "text-sm text-green-500 dark:text-green-400 text-center mb-4", children: "Your wallet has been funded with testnet tokens." }), _jsx("p", { className: "text-sm text-gray-500 dark:text-neutral-400 text-center", children: "Please wait while your balance updates..." })] })) : faucetError ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-red-500 text-4xl mb-4", children: "\u26A0\uFE0F" }), _jsx("h3", { className: "text-lg font-medium text-gray-800 dark:text-white mb-2", children: "Failed to Get Tokens" }), _jsx("p", { className: "text-sm text-red-500 dark:text-red-400 text-center mb-4", children: faucetError }), _jsx("button", { onClick: requestTestnetTokens, className: "px-4 py-2 bg-main text-white rounded-md hover:bg-main/90 transition-colors", children: "Try Again" })] })) : null })), _jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-6 text-center", children: "Enter Amount" }), _jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-neutral-400", children: "Amount" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-neutral-400", children: ["Balance: ", formattedBalance, " ", tokenSymbol] })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", defaultValue: amount, onChange: handleAmountChange, placeholder: "0.00", className: "w-full bg-white dark:bg-neutral-950 border-2 border-gray-100 dark:border-neutral-800 rounded-md px-4 py-3 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-0 focus:border-main dark:focus:border-main transition-colors duration-200" }), _jsxs("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [_jsx(ImageWithFallback, { src: tokenLogo, width: 20, height: 20, alt: tokenSymbol, fallbackClassName: "w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center", fallbackBgColor: "bg-blue-100 dark:bg-blue-900", fallbackTextColor: "text-blue-500 dark:text-blue-300", fallbackText: tokenSymbol.charAt(0) }), _jsx("span", { className: "text-gray-400 dark:text-neutral-500", children: tokenSymbol })] })] }), _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, " ", tokenSymbol] }), _jsxs("span", { className: "text-xs text-gray-400 dark:text-neutral-500", children: ["Max: ", MAX_DEPOSIT, " ", tokenSymbol] })] })] }), _jsx("button", { onClick: onContinue, disabled: !isValidAmount, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n            group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center\n            transition-all duration-300 ".concat(ANIMATION_EASE, "\n            cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            ").concat(!isValidAmount ? 'opacity-50 cursor-not-allowed hover:border-gray-200 dark:hover:border-gray-800' : '', "\n          "), style: {
+                            transform: isHovered && isValidAmount ? 'scale(0.99)' : 'scale(1)',
+                        }, children: _jsx("span", { className: "\n            text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n            text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n          "), children: "Continue" }) })] })] }));
+}

package/dist/Modal/NordFlow/screens/05-DepositProgressScreen.d.ts

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

package/dist/Modal/NordFlow/screens/05-DepositProgressScreen.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WaitingMessage } from '../components/WaitingMessage';
+import { useN1WalletInternalContext } from '../../../Provider/hooks';
+import { N1SessionMode } from '../../../Provider/types';
+import { useState, useEffect } from 'react';
+export function DepositProgressScreen(_a) {
+    var message = _a.message;
+    var sessionMode = useN1WalletInternalContext().sessionMode;
+    var _b = useState(0), elapsedTime = _b[0], setElapsedTime = _b[1];
+    var maxTime = 90; // Maximum time in seconds
+    // Start timer when component mounts
+    useEffect(function () {
+        var timer = setInterval(function () {
+            setElapsedTime(function (prevTime) {
+                if (prevTime >= maxTime) {
+                    clearInterval(timer);
+                    return maxTime;
+                }
+                return prevTime + 1;
+            });
+        }, 1000);
+        // Clean up timer on unmount
+        return function () { return clearInterval(timer); };
+    }, []);
+    // Determine the appropriate message based on session mode
+    var getSessionSpecificMessage = function () {
+        var currentSessionMode = sessionMode !== null && sessionMode !== void 0 ? sessionMode : N1SessionMode.NTS;
+        var accountType = currentSessionMode === N1SessionMode.Nord ? 'Nord' : 'NTS';
+        return __assign(__assign({}, message), { title: message.title || "Processing ".concat(accountType, " Deposit"), subtitle: message.subtitle || "Please wait while we process your ".concat(accountType, " deposit") });
+    };
+    var sessionMessage = getSessionSpecificMessage();
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx(WaitingMessage, { message: sessionMessage }), _jsxs("div", { className: "text-center mt-4 text-sm text-gray-500", children: ["Time elapsed: ", elapsedTime, "s / ", maxTime, "s"] })] }));
+}

package/dist/Modal/NordFlow/screens/06-DepositSuccessScreen.d.ts

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

package/dist/Modal/NordFlow/screens/06-DepositSuccessScreen.js

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

package/dist/Modal/NordFlow/screens/07-AuthLoadingScreen.d.ts

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

package/dist/Modal/NordFlow/screens/07-AuthLoadingScreen.js

@@ -0,0 +1,126 @@
+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 } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useN1WalletContext, useN1WalletInternalContext } from '../../../Provider/hooks';
+import { LoadingSquares } from '../components/LoadingSquares';
+import { logger } from '../../../utils/logger';
+import { ANIMATION_EASE } from '../constants';
+export function AuthLoadingScreen(_a) {
+    var _this = this;
+    var _b = _a.isCreatingAccount, isCreatingAccount = _b === void 0 ? false : _b, onAuthComplete = _a.onAuthComplete;
+    var _c = useN1WalletInternalContext(), sessionMode = _c.sessionMode, setNordUser = _c.setNordUser;
+    var _d = useN1WalletContext(), address = _d.address, nord = _d.nord, nordUser = _d.nordUser;
+    var _e = useState('loading'), authStatus = _e[0], setAuthStatus = _e[1];
+    var _f = useState(null), errorMessage = _f[0], setErrorMessage = _f[1];
+    var _g = useState(null), statusMessage = _g[0], setStatusMessage = _g[1];
+    var _h = useState(false), isHovered = _h[0], setIsHovered = _h[1];
+    var authInitiatedRef = useRef(false);
+    var performAuth = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var sessionPubKey, sessionId, sessionIdKey, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    // Step 1: Tell user to sign transaction
+                    setStatusMessage("Please sign the transaction to authenticate your session");
+                    if (!nordUser) {
+                        throw new Error('Nord user is not initialized');
+                    }
+                    // Step 2: Call nordUser.refreshSession and get sessionId
+                    setStatusMessage("Session is being authenticated...");
+                    sessionPubKey = nordUser.sessionPubKey;
+                    if (!sessionPubKey) {
+                        throw new Error('Session public key is not available');
+                    }
+                    // Refresh the session
+                    return [4 /*yield*/, nordUser.refreshSession(sessionPubKey)];
+                case 1:
+                    // Refresh the session
+                    _a.sent();
+                    return [4 /*yield*/, nordUser.updateAccountId()
+                        // Get the sessionId after refresh
+                    ];
+                case 2:
+                    _a.sent();
+                    sessionId = nordUser.sessionId;
+                    if (!sessionId) {
+                        throw new Error('Failed to get session ID after refresh');
+                    }
+                    logger.debug('Session refreshed successfully', { sessionId: sessionId.toString() });
+                    // Step 3: Store sessionId in localStorage
+                    if (address) {
+                        sessionIdKey = "n1_sessionId_".concat(address);
+                        localStorage.setItem(sessionIdKey, sessionId.toString());
+                        logger.debug('Stored sessionId in localStorage', { key: sessionIdKey });
+                    }
+                    // Step 4: Update status to success
+                    setAuthStatus('success');
+                    // Step 5: Call onAuthComplete callback with success=true
+                    if (onAuthComplete) {
+                        onAuthComplete(true);
+                    }
+                    setNordUser(nordUser);
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('Authentication error:', error_1);
+                    setAuthStatus('error');
+                    setErrorMessage(error_1 instanceof Error ? error_1.message : 'Unknown error occurred');
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [onAuthComplete, isCreatingAccount, sessionMode, address, nord]);
+    useEffect(function () {
+        if (!authInitiatedRef.current) {
+            authInitiatedRef.current = true;
+            performAuth();
+        }
+    }, []);
+    var handleRetry = function () {
+        setAuthStatus('loading');
+        setErrorMessage(null);
+        setStatusMessage(null);
+        performAuth();
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [authStatus === 'loading' && _jsx(LoadingSquares, {}), authStatus === 'success' && (_jsx("div", { className: "text-green-500 text-4xl mb-4", children: "\u2713" })), authStatus === 'error' && (_jsx("div", { className: "text-red-500 text-4xl mb-4", children: "\u26A0\uFE0F" })), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsxs("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: [authStatus === 'loading' && (isCreatingAccount ? 'Creating Account' : 'Authenticating'), authStatus === 'success' && (isCreatingAccount ? 'Account Created' : 'Authentication Successful'), authStatus === 'error' && 'Authentication Failed'] }), _jsxs("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: [authStatus === 'loading' && statusMessage ? statusMessage : ('Please wait while we create your Nord account'), authStatus === 'success' && (isCreatingAccount
+                                ? 'Your account has been created successfully'
+                                : 'You have been logged in successfully'), authStatus === 'error' && (errorMessage || 'There was an error during authentication. Please try again.')] }), authStatus === 'error' && (_jsx("div", { className: "mt-6", children: _jsx("button", { onClick: handleRetry, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n                group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center\n                transition-all duration-300 ".concat(ANIMATION_EASE, "\n                cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n              "), style: {
+                                transform: isHovered ? 'scale(0.99)' : 'scale(1)',
+                            }, children: _jsx("span", { className: "\n                text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n                text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n              "), children: "Try Again" }) }) }))] })] }));
+}

package/dist/Modal/NordFlow/screens/07-NordAuthScreen.d.ts

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

package/dist/Modal/NordFlow/screens/07-NordAuthScreen.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ANIMATION_EASE } from '../constants';
+export function NordAuthScreen(_a) {
+    var onCreateSession = _a.onCreateSession;
+    var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
+    // Get the appropriate title and description based on Nord configuration
+    var getTitle = function () {
+        return 'Session Authentication';
+    };
+    var getDescription = function () {
+        return 'Create a session';
+    };
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: getTitle() }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-8", children: getDescription() }), _jsx("div", { className: "space-y-4", children: _jsx("button", { onClick: onCreateSession, onMouseEnter: function () { return setIsHovered('create'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center\n              transition-all duration-300 ".concat(ANIMATION_EASE, "\n              cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            "), style: {
+                        transform: isHovered === 'create' ? 'scale(0.99)' : 'scale(1)',
+                    }, children: _jsx("span", { className: "\n              text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n              text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white\n            "), children: "Create Account" }) }) })] }));
+}

package/dist/Modal/NordFlow/screens/08-AuthLoadingScreen.d.ts

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