@n1xyz/wallet-widget 0.0.5 → 0.0.7

package/dist/Modal/NordFlow/hooks/useFlowState.js

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { FlowState, initialFlowContext } from '../types';
 import { STATE_TRANSITIONS } from '../constants';
 import { clearStoredState, loadStateFromLocalStorage, saveStateToLocalStorage, } from '../utils/persistence';
+import { logger } from '../../../utils/logger';
 /**
  * Custom hook for managing the wallet connection flow state machine
  * @param options Configuration options
@@ -49,7 +50,7 @@ export var useFlowState = function (options) {
     var transition = useCallback(function (targetState, contextUpdates) {
         if (contextUpdates === void 0) { contextUpdates = {}; }
         if (!canTransition(targetState, __assign(__assign({}, context), contextUpdates))) {
-            console.warn("Transition from ".concat(state, " to ").concat(targetState, " is not allowed"));
+            logger.warn("Transition from ".concat(state, " to ").concat(targetState, " is not allowed"));
             return false;
         }
         setIsTransitioning(true);
@@ -62,7 +63,7 @@ export var useFlowState = function (options) {
         });
         // Then update state
         setPrevState(state);
-        console.log(targetState, "targetState");
+        logger.debug(targetState, 'targetState');
         setState(targetState);
         if (onStateChange) {
             onStateChange(targetState, state);
@@ -77,7 +78,7 @@ export var useFlowState = function (options) {
         clearStoredState();
         setContext(initialFlowContext);
         setPrevState(null);
-        console.log("resetting");
+        logger.debug('resetting');
         setState(FlowState.IDLE);
         if (onStateChange) {
             onStateChange(FlowState.IDLE, state);
@@ -103,7 +104,7 @@ export var useFlowState = function (options) {
         }
         setContext(savedState.context);
         setPrevState(state);
-        console.log(savedState.state, "savedState.state");
+        logger.debug(savedState.state, 'savedState.state');
         setState(savedState.state);
         if (onStateChange) {
             onStateChange(savedState.state, state);

package/dist/Modal/NordFlow/hooks/useNordInstance.js

@@ -39,8 +39,8 @@ import { generateSessionKeyPair, signEd25519 } from '@n1xyz/nts-sdk';
 import { PublicKey } from '@solana/web3.js';
 import { useEffect } from 'react';
 import { WalletError, WalletErrorCode } from '../../../errors/types';
-import { getSessionKeysFromLocalStorage, storeSessionKeysInLocalStorage } from '../../../Logic/utils';
-import { useN1WalletContext, useN1WalletInternalContext } from '../../../Provider/hooks';
+import { getSessionKeysFromLocalStorage, storeSessionKeysInLocalStorage, } from '../../../Logic/utils';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provider/hooks';
 import { logger } from '../../../utils/logger';
 // Utility function to convert Uint8Array to base64 string
 function arrayBufferToBase64(buffer) {
@@ -138,7 +138,7 @@ export var useNordInstance = function () {
                     sessionKeyPair_1 = {
                         privateKey: storedKeys.ed25519PrivateKey,
                         // For Ed25519, the public key is the second half of the private key
-                        publicKey: tempKeyPair.publicKey
+                        publicKey: tempKeyPair.publicKey,
                     };
                     return [3 /*break*/, 4];
                 case 3:
@@ -232,7 +232,9 @@ export var useNordInstance = function () {
                                 if (storedSessionId !== null) {
                                     // Convert the stored sessionId to BigInt
                                     sessionId = BigInt(storedSessionId);
-                                    logger.debug('Found existing sessionId in localStorage', { sessionId: storedSessionId });
+                                    logger.debug('Found existing sessionId in localStorage', {
+                                        sessionId: storedSessionId,
+                                    });
                                 }
                             }
                         }
@@ -248,7 +250,7 @@ export var useNordInstance = function () {
                         transactionSignFn: signTransactionWithWalletKey,
                         sessionId: sessionId, // Pass the sessionId if it exists
                         sessionPubKey: sessionPubKey,
-                        publicKey: new PublicKey(address)
+                        publicKey: new PublicKey(address),
                     });
                     _a.label = 3;
                 case 3:
@@ -289,7 +291,10 @@ export var useNordInstance = function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!(signMessageWithWalletKey && signMessageWithSessionKey && signTransactionWithWalletKey && nordUser == null)) return [3 /*break*/, 2];
+                        if (!(signMessageWithWalletKey &&
+                            signMessageWithSessionKey &&
+                            signTransactionWithWalletKey &&
+                            nordUser == null)) return [3 /*break*/, 2];
                         logger.debug('Dependencies available, initializing NordUser');
                         return [4 /*yield*/, createNordUser()];
                     case 1:
@@ -300,11 +305,15 @@ export var useNordInstance = function () {
             });
         }); };
         initNordUser();
-    }, [signMessageWithWalletKey, signMessageWithSessionKey, signTransactionWithWalletKey]);
+    }, [
+        signMessageWithWalletKey,
+        signMessageWithSessionKey,
+        signTransactionWithWalletKey,
+    ]);
     return {
         nord: nord,
         createNordUser: createNordUser,
         nordUser: nordUser,
-        createTransactionSignFunction: createTransactionSignFunction
+        createTransactionSignFunction: createTransactionSignFunction,
     };
 };

package/dist/Modal/NordFlow/hooks/useNordWalletConnect.js

@@ -35,8 +35,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { useCallback, useEffect, useState, useRef } from 'react';
-import { useN1WalletContext, useN1WalletInternalContext } from '../../../Provider/hooks';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provider/hooks';
 import { N1SessionMode } from '../../../Provider/types';
+import { logger } from '../../../utils/logger';
 import { FlowState } from '../types';
 /**
  * Hook for handling wallet connection
@@ -81,7 +82,7 @@ export var useNordWalletConnect = function (state, transition, context, updateCo
                         return [2 /*return*/];
                     setIsConnecting(true);
                     setHasProcessedWallet(false);
-                    console.log('Starting wallet connection process');
+                    logger.debug('Starting wallet connection process');
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
@@ -90,13 +91,13 @@ export var useNordWalletConnect = function (state, transition, context, updateCo
                 case 2:
                     // Show Dynamic widget to connect wallet
                     _a.sent();
-                    console.log('Dynamic widget shown');
+                    logger.debug('Dynamic widget shown');
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
                     setIsConnecting(false);
                     updateContext({ walletType: null });
-                    console.error('Error showing Dynamic widget:', error_1);
+                    logger.error('Error showing Dynamic widget:', error_1);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -106,7 +107,7 @@ export var useNordWalletConnect = function (state, transition, context, updateCo
      * Disconnect wallet
      */
     var disconnectWallet = useCallback(function () {
-        console.log('Disconnecting wallet');
+        logger.debug('Disconnecting wallet');
         setWalletType(null);
         setHasProcessedWallet(false);
         updateContext({ walletType: null });
@@ -123,32 +124,36 @@ export var useNordWalletConnect = function (state, transition, context, updateCo
                             sessionId = nordUser.sessionId;
                             hasActiveSession = sessionId != null;
                             updateContext({ hasNordAccount: hasNordAccount, hasActiveSession: hasActiveSession });
-                            transitionDestination = hasNordAccount ? (sessionId != null ? FlowState.FINAL_SUCCESS : FlowState.AUTH_LOADING) : FlowState.CHAIN_SELECTION;
+                            transitionDestination = hasNordAccount
+                                ? sessionId != null
+                                    ? FlowState.FINAL_SUCCESS
+                                    : FlowState.AUTH_LOADING
+                                : FlowState.CHAIN_SELECTION;
                             if (hasNordAccount && sessionId != null) {
                                 setIsConnected(true);
                             }
                             // Force a small delay to ensure UI updates properly
                             setTimeout(function () {
                                 try {
-                                    console.log('Attempting transition to ' + transitionDestination);
+                                    logger.debug('Attempting transition to ' + transitionDestination);
                                     transition(transitionDestination, {
                                         walletType: 'solana',
                                         hasNordAccount: hasNordAccount,
-                                        hasActiveSession: hasActiveSession
+                                        hasActiveSession: hasActiveSession,
                                     });
-                                    console.log('Transition to ' + transitionDestination + ' completed');
+                                    logger.debug('Transition to ' + transitionDestination + ' completed');
                                     // Try again with a longer delay as a fallback
                                     setTimeout(function () {
-                                        console.log('Trying fallback transition after delay');
+                                        logger.debug('Trying fallback transition after delay');
                                         transition(transitionDestination, {
                                             walletType: 'solana',
                                             hasNordAccount: hasNordAccount,
-                                            hasActiveSession: hasActiveSession
+                                            hasActiveSession: hasActiveSession,
                                         });
                                     }, 500);
                                 }
                                 catch (error) {
-                                    console.error('Error during transition:', error);
+                                    logger.error('Error during transition:', error);
                                 }
                                 finally {
                                     setIsConnecting(false);
@@ -170,8 +175,9 @@ export var useNordWalletConnect = function (state, transition, context, updateCo
             return;
         }
         // If we've already processed this specific wallet address, don't process again
-        if (hasProcessedWallet && processedWalletAddressRef.current === dynamicWallet.address) {
-            console.log('Skipping wallet processing - already processed this address');
+        if (hasProcessedWallet &&
+            processedWalletAddressRef.current === dynamicWallet.address) {
+            logger.debug('Skipping wallet processing - already processed this address');
             return;
         }
         // Use an IIFE to handle the async processing
@@ -181,14 +187,14 @@ export var useNordWalletConnect = function (state, transition, context, updateCo
             return __generator(this, function (_c) {
                 // Prevent processing if already in progress
                 if (hasProcessedWallet) {
-                    console.log('Skipping wallet processing - hasProcessedWallet is true');
+                    logger.debug('Skipping wallet processing - hasProcessedWallet is true');
                     return [2 /*return*/];
                 }
-                console.log('Processing wallet connection:', {
+                logger.debug('Processing wallet connection:', {
                     wallet: (_a = dynamicWallet.connector) === null || _a === void 0 ? void 0 : _a.name,
                     address: (_b = dynamicWallet.address) === null || _b === void 0 ? void 0 : _b.slice(0, 8),
                     state: state,
-                    isNordMode: isNordMode
+                    isNordMode: isNordMode,
                 });
                 // Set processed flag first to prevent re-entry
                 setHasProcessedWallet(true);
@@ -200,20 +206,22 @@ export var useNordWalletConnect = function (state, transition, context, updateCo
         }); })();
         // Cleanup function to handle component unmount
         return function () {
-            console.log('Wallet connection effect cleanup');
+            logger.debug('Wallet connection effect cleanup');
         };
     }, [dynamicWallet, determineWalletType]);
     // Handle wallet disconnection in a separate effect
     useEffect(function () {
         if (!dynamicWallet && hasProcessedWallet) {
-            console.log('Wallet disconnected, resetting processed flag');
+            logger.debug('Wallet disconnected, resetting processed flag');
             processedWalletAddressRef.current = null;
             setHasProcessedWallet(false);
         }
     }, [dynamicWallet, hasProcessedWallet]);
     // Handle connecting state changes in a separate effect
     useEffect(function () {
-        if (state === FlowState.CONNECTING_WALLET && !dynamicWallet && isConnecting) {
+        if (state === FlowState.CONNECTING_WALLET &&
+            !dynamicWallet &&
+            isConnecting) {
             // Only keep isConnecting true if we're in the connecting state and don't have a wallet yet
             // This prevents an infinite loop of setting isConnecting
         }

package/dist/Modal/NordFlow/screens/02-EvmWalletAuthScreen.js

@@ -15,7 +15,7 @@ export function EvmWalletAuthScreen(_a) {
     // Handle signature request
     var handleSignatureRequest = function () {
         setAuthState(AuthState.WAITING_FOR_SIGNATURE);
-        // Simulate signature process - in a real implementation, 
+        // Simulate signature process - in a real implementation,
         // this would be replaced with actual wallet signature logic
         setTimeout(function () {
             setAuthState(AuthState.SUCCESS);

package/dist/Modal/NordFlow/screens/03-ChainSelectionScreen.js

@@ -2,46 +2,62 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { SolanaNetwork } from '../../../config/solana';
 import { ChainButton } from '../components/ChainButton';
+import { EVMChainsButton } from '../components/EVMChainsButton';
+import { MoreButton } from '../components/MoreButton';
+import { SolanaLogo } from '../../../components/logos';
+import Logo from '../../../components/Logo';
+import { logger } from '../../../utils/logger';
+// Custom N1Logo wrapper that responds to the group hover state
+var N1Logo = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 38 : _b;
+    return (_jsx("div", { className: "text-gray-800 dark:text-white group-hover:text-red-500 dark:group-hover:text-red-500 transition-colors duration-200", children: _jsx(Logo, { size: size }) }));
+};
 export function ChainSelectionScreen(_a) {
     var onChainSelect = _a.onChainSelect;
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    // Only allow testnet, gray out other chains
+    // Only allow devnet, gray out other chains
     var handleChainSelect = function (chainId) {
-        console.log('Chain selected in ChainSelectionScreen:', chainId);
-        // Otherwise, only allow testnet to be selected
-        if (chainId === 'testnet') {
+        logger.debug('Chain selected in ChainSelectionScreen:', chainId);
+        // Only allow devnet to be selected
+        if (chainId === 'devnet') {
             setIsLoading(true);
             onChainSelect(chainId);
         }
         else {
-            console.log('Chain not allowed:', chainId);
+            logger.debug('Chain not allowed:', chainId);
             // Could show a toast or message here
         }
     };
-    // Otherwise, use the default Solana networks
-    // Add network information to chains
+    // Define the 4 options as requested
     var chainsWithNetworkInfo = [
         {
-            id: 'mainnet',
-            name: 'Mainnet',
-            logo: '/images/chains/solana.svg',
+            id: 'devnet',
+            name: 'Devnet',
+            logo: (_jsx("div", { className: "flex items-center justify-center", style: { width: 48, height: 48 }, children: _jsx(N1Logo, {}) })),
+            network: SolanaNetwork.DEVNET,
+            disabled: false, // Only devnet is clickable
+        },
+        {
+            id: 'solana',
+            name: 'Solana',
+            logo: (_jsx("div", { className: "flex items-center justify-center", style: { width: 48, height: 48 }, children: _jsx(SolanaLogo, { width: 36, height: 36 }) })),
             network: SolanaNetwork.MAINNET,
-            disabled: true
+            disabled: true,
         },
         {
-            id: 'testnet',
-            name: 'Testnet',
-            logo: '/images/chains/solana.svg',
-            network: SolanaNetwork.TESTNET,
-            disabled: false
+            id: 'evm-chains',
+            name: 'EVM Chains',
+            logo: '', // Not needed as we're using EVMChainsButton
+            network: '', // Empty string instead of null
+            disabled: true,
         },
         {
-            id: 'devnet',
-            name: 'Devnet',
-            logo: '/images/chains/solana.svg',
-            network: SolanaNetwork.DEVNET,
-            disabled: true
-        }
+            id: 'more',
+            name: 'More',
+            logo: '', // Not needed as we're using MoreButton
+            network: '', // Empty string instead of null
+            disabled: true,
+        },
     ];
-    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-6 text-center", children: "Select Network" }), isLoading ? (_jsx("div", { className: "flex justify-center items-center py-8", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-main" }) })) : (_jsx("div", { className: "space-y-8", children: _jsx("div", { className: "grid grid-cols-2 gap-4", children: chainsWithNetworkInfo.map(function (chain) { return (_jsx(ChainButton, { chain: chain, onClick: function () { return handleChainSelect(chain.id); }, disabled: chain.disabled }, chain.id)); }) }) }))] }));
+    return (_jsxs("div", { className: "overflow-hidden relative", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-6 text-center", children: "Select Origin Network" }), isLoading ? (_jsx("div", { className: "flex justify-center items-center py-8", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-main" }) })) : (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(ChainButton, { chain: chainsWithNetworkInfo[0], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[0].id); }, disabled: chainsWithNetworkInfo[0].disabled }, chainsWithNetworkInfo[0].id), _jsx(ChainButton, { chain: chainsWithNetworkInfo[1], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[1].id); }, disabled: chainsWithNetworkInfo[1].disabled }, chainsWithNetworkInfo[1].id)] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(EVMChainsButton, { chain: chainsWithNetworkInfo[2], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[2].id); }, disabled: chainsWithNetworkInfo[2].disabled }, chainsWithNetworkInfo[2].id), _jsx(MoreButton, { chain: chainsWithNetworkInfo[3], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[3].id); }, disabled: chainsWithNetworkInfo[3].disabled }, chainsWithNetworkInfo[3].id)] })] }))] }));
 }

package/dist/Modal/NordFlow/screens/04-AmountInputScreen.d.ts

@@ -6,5 +6,7 @@ interface AmountInputScreenProps {
     faucetUrl?: string;
     refreshBalance?: () => Promise<void>;
 }
-export declare function AmountInputScreen({ amount, onAmountChange, onContinue, balance, faucetUrl: propFaucetUrl, refreshBalance, }: AmountInputScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function AmountInputScreen({ amount: _amount, // Renamed to _amount since we're not using the prop
+onAmountChange, onContinue, balance: _balance, // Renamed to _balance since we're overriding it
+faucetUrl: propFaucetUrl, refreshBalance, }: AmountInputScreenProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -36,13 +36,24 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 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 { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provider/hooks';
 import { ImageWithFallback } from '../components';
-import { ANIMATION_EASE, MAX_DEPOSIT, MIN_DEPOSIT } from '../constants';
+import { ANIMATION_EASE } 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 _amount = _a.amount, // Renamed to _amount since we're not using the prop
+    onAmountChange = _a.onAmountChange, onContinue = _a.onContinue, _balance = _a.balance, // Renamed to _balance since we're overriding it
+    propFaucetUrl = _a.faucetUrl, refreshBalance = _a.refreshBalance;
+    // Hard code amount to 100
+    var amount = '100';
+    // Hard code balance to 0 to allow faucet to trigger
+    var balance = 0;
+    // Force the amount to be 100 on component mount only, not on every render
+    useEffect(function () {
+        onAmountChange('100');
+        // Empty dependency array ensures this only runs once on mount
+    }, []);
     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];
@@ -74,16 +85,15 @@ export function AmountInputScreen(_a) {
             }
         }
     }, [nord]);
-    var handleAmountChange = function (e) {
-        var value = e.target.value;
-        if (/^\d*\.?\d*$/.test(value)) {
-            onAmountChange(value);
-        }
-    };
+    // Removed handleAmountChange since we don't want user to edit the amount
     // todo:fix
     var isValidAmount = true;
+    // Hard code MIN_DEPOSIT to 100
+    var hardcodedMinDeposit = 100;
+    // Hard code MAX_DEPOSIT to 100
+    var hardcodedMaxDeposit = 100;
     // Check if faucet is enabled and balance is low
-    var shouldShowFaucet = faucetUrl && balance < MIN_DEPOSIT && !tokensObtained;
+    var shouldShowFaucet = faucetUrl && balance < hardcodedMinDeposit && !tokensObtained;
     // Determine if we should show the faucet overlay
     var showFaucetOverlay = (shouldShowFaucet && (isFaucetLoading || faucetError)) || showFaucetSuccess;
     // Function to request tokens from faucet
@@ -110,7 +120,9 @@ export function AmountInputScreen(_a) {
                 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' }); })];
+                    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');
@@ -143,23 +155,32 @@ export function AmountInputScreen(_a) {
     }); }, [faucetUrl, address, refreshBalance]);
     // Request tokens automatically when faucet is enabled and balance is low
     useEffect(function () {
-        if (shouldShowFaucet && !isFaucetLoading && !faucetError && !showFaucetSuccess) {
+        if (shouldShowFaucet &&
+            !isFaucetLoading &&
+            !faucetError &&
+            !showFaucetSuccess) {
             requestTestnetTokens();
         }
-    }, [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) {
+        if (balance > prevBalanceRef.current && balance >= hardcodedMinDeposit) {
             setTokensObtained(false);
             setShowFaucetSuccess(false);
         }
         // Update the previous balance reference
         prevBalanceRef.current = balance;
-    }, [balance]);
+    }, [balance, hardcodedMinDeposit]);
     // 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: {
+    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", value: amount, readOnly: true, 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 cursor-not-allowed" }), _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: ", hardcodedMinDeposit, " ", tokenSymbol] }), _jsxs("span", { className: "text-xs text-gray-400 dark:text-neutral-500", children: ["Max: ", hardcodedMaxDeposit, " ", 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

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

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

@@ -18,7 +18,7 @@ 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
+    var maxTime = 180; // Maximum time in seconds
     // Start timer when component mounts
     useEffect(function () {
         var timer = setInterval(function () {
@@ -37,7 +37,8 @@ export function DepositProgressScreen(_a) {
     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") });
+        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.js

@@ -113,7 +113,9 @@ export function DepositSuccessScreen(_a) {
     };
     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: {
+                                            : '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

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