@n1xyz/wallet-widget 0.0.4 → 0.0.7

package/dist/WalletConnectionFlow/screens/EthToSolAuthScreen.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { LoadingSquares } from '../../components/WalletDeposit/components/LoadingSquares';
+import { ANIMATION_EASE, } from '../../components/WalletDeposit/constants';
+var AuthState;
+(function (AuthState) {
+    AuthState["INITIAL"] = "initial";
+    AuthState["WAITING_FOR_SIGNATURE"] = "waiting_for_signature";
+    AuthState["SUCCESS"] = "success";
+})(AuthState || (AuthState = {}));
+export function EvmWalletAuthScreen(_a) {
+    var onAuth = _a.onAuth, _b = _a.isAuthenticating, isAuthenticating = _b === void 0 ? false : _b;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = useState(isAuthenticating ? AuthState.WAITING_FOR_SIGNATURE : AuthState.INITIAL), authState = _d[0], setAuthState = _d[1];
+    // Handle signature request
+    var handleSignatureRequest = function () {
+        setAuthState(AuthState.WAITING_FOR_SIGNATURE);
+        // Simulate signature process - in a real implementation, 
+        // this would be replaced with actual wallet signature logic
+        setTimeout(function () {
+            setAuthState(AuthState.SUCCESS);
+        }, 2000);
+    };
+    // When signature is successful, trigger onAuth after a brief success message
+    useEffect(function () {
+        if (authState === AuthState.SUCCESS) {
+            var timer_1 = setTimeout(function () {
+                onAuth();
+            }, 1000);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [authState, onAuth]);
+    // Render waiting for signature screen
+    if (authState === AuthState.WAITING_FOR_SIGNATURE) {
+        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: [_jsx("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: "Waiting for Signature" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: "Please sign the message in your Ethereum wallet to authenticate with Solana" })] })] }));
+    }
+    // Render success screen
+    if (authState === AuthState.SUCCESS) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-8 w-8 text-green-600 dark:text-green-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsx("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: "Signature Verified" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: "Your Ethereum wallet has been authenticated successfully" })] })] }));
+    }
+    // Render initial screen
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-6", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: "Cross-Chain Authentication" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-4", children: "You need to sign a message to authenticate your Ethereum wallet with Solana" }), _jsxs("div", { className: "flex flex-row items-center justify-center gap-4 mb-6", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center", children: _jsx("span", { className: "text-main font-medium", children: "ETH" }) }), _jsx("div", { className: "w-8 h-0.5 bg-gray-200 dark:bg-neutral-700" }), _jsx("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center", children: _jsx("span", { className: "text-main font-medium", children: "SOL" }) })] }), _jsx("button", { onClick: handleSignatureRequest, 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: "Sign Authentication Message" }) })] }) }));
+}
+// For backward compatibility
+export { EvmWalletAuthScreen as EthToSolAuthScreen };

package/dist/WalletConnectionFlow/screens/EvmWalletAuthScreen.d.ts

@@ -0,0 +1,6 @@
+interface EvmWalletAuthScreenProps {
+    onAuth: () => void;
+    isAuthenticating?: boolean;
+}
+export declare function EvmWalletAuthScreen({ onAuth, isAuthenticating, }: EvmWalletAuthScreenProps): import("react/jsx-runtime").JSX.Element;
+export { EvmWalletAuthScreen as EthToSolAuthScreen };

package/dist/WalletConnectionFlow/screens/EvmWalletAuthScreen.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingSquares } from '../components/LoadingSquares';
+import { useState, useEffect } from 'react';
+import { ANIMATION_EASE } from '../constants';
+var AuthState;
+(function (AuthState) {
+    AuthState["INITIAL"] = "initial";
+    AuthState["WAITING_FOR_SIGNATURE"] = "waiting_for_signature";
+    AuthState["SUCCESS"] = "success";
+})(AuthState || (AuthState = {}));
+export function EvmWalletAuthScreen(_a) {
+    var onAuth = _a.onAuth, _b = _a.isAuthenticating, isAuthenticating = _b === void 0 ? false : _b;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = useState(isAuthenticating ? AuthState.WAITING_FOR_SIGNATURE : AuthState.INITIAL), authState = _d[0], setAuthState = _d[1];
+    // Handle signature request
+    var handleSignatureRequest = function () {
+        setAuthState(AuthState.WAITING_FOR_SIGNATURE);
+        // Simulate signature process - in a real implementation, 
+        // this would be replaced with actual wallet signature logic
+        setTimeout(function () {
+            setAuthState(AuthState.SUCCESS);
+        }, 2000);
+    };
+    // When signature is successful, trigger onAuth after a brief success message
+    useEffect(function () {
+        if (authState === AuthState.SUCCESS) {
+            var timer_1 = setTimeout(function () {
+                onAuth();
+            }, 1000);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [authState, onAuth]);
+    // Render waiting for signature screen
+    if (authState === AuthState.WAITING_FOR_SIGNATURE) {
+        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: [_jsx("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: "Waiting for Signature" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: "Please sign the message in your Ethereum wallet to authenticate with Solana" })] })] }));
+    }
+    // Render success screen
+    if (authState === AuthState.SUCCESS) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-8 w-8 text-green-600 dark:text-green-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsx("h3", { className: "text-xl text-gray-800 dark:text-white font-semibold", children: "Signature Verified" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400", children: "Your Ethereum wallet has been authenticated successfully" })] })] }));
+    }
+    // Render initial screen
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-6", children: [_jsx("h2", { className: "text-xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: "EVM Wallet Authentication" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-4", children: "You need to sign a message to authenticate your Ethereum wallet with Solana" }), _jsx("button", { onClick: handleSignatureRequest, 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: "Sign Authentication Message" }) })] }) }));
+}
+// For backward compatibility
+export { EvmWalletAuthScreen as EthToSolAuthScreen };

package/dist/WalletConnectionFlow/screens/FinalSuccessScreen.d.ts

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

package/dist/WalletConnectionFlow/screens/FinalSuccessScreen.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { ANIMATION_EASE } from '../constants';
+export function FinalSuccessScreen(_a) {
+    var onDone = _a.onDone;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), isButtonEnabled = _c[0], setIsButtonEnabled = _c[1];
+    // Add a minimum viewing time before enabling the button
+    useEffect(function () {
+        var timer = setTimeout(function () {
+            setIsButtonEnabled(true);
+        }, 3000); // 3 seconds minimum viewing time
+        return function () { return clearTimeout(timer); };
+    }, []);
+    return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "flex flex-col items-center justify-center pt-4", children: [_jsx("div", { className: "mb-6", children: _jsx("div", { className: "w-20 h-20 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-green-500 dark:text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }) }) }), _jsx("h2", { className: "text-2xl text-gray-800 dark:text-white font-semibold mb-2 text-center", children: "Authentication Successful!" }), _jsx("p", { className: "text-lg text-gray-700 dark:text-neutral-300 text-center", children: "Your wallet has been successfully connected" })] }), _jsx("button", { onClick: isButtonEnabled ? onDone : 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(!isButtonEnabled ? 'opacity-50 cursor-not-allowed' : '', "\n          "), style: {
+                        transform: isHovered && isButtonEnabled ? 'scale(0.99)' : 'scale(1)',
+                    }, disabled: !isButtonEnabled, 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: isButtonEnabled ? 'Open App' : 'Please wait...' }) })] }) }));
+}

package/dist/WalletConnectionFlow/screens/NordAuthScreen.d.ts

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

package/dist/WalletConnectionFlow/screens/NordAuthScreen.js

@@ -0,0 +1,14 @@
+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 onCreateAccount = _a.onCreateAccount, onLogin = _a.onLogin, hasNordAccount = _a.hasNordAccount;
+    var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
+    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: hasNordAccount ? 'Continue to Nord' : 'Create Nord Account' }), _jsx("p", { className: "text-sm text-gray-600 dark:text-neutral-400 text-center mb-8", children: hasNordAccount
+                    ? 'Log in to your Nord account to continue'
+                    : 'Create a Nord account to manage your deposits' }), _jsxs("div", { className: "space-y-4", children: [!hasNordAccount && (_jsx("button", { onClick: onCreateAccount, 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" }) })), hasNordAccount && (_jsx("button", { onClick: onLogin, onMouseEnter: function () { return setIsHovered('login'); }, 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 === 'login' ? '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: "Log In" }) }))] })] }));
+}

package/dist/WalletConnectionFlow/screens/SigningScreen.d.ts

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

package/dist/WalletConnectionFlow/screens/SigningScreen.js

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

package/dist/WalletConnectionFlow/screens/index.d.ts

@@ -0,0 +1,10 @@
+export * from './01-ConnectWalletScreen';
+export * from './02-EvmWalletAuthScreen';
+export * from './03-ChainSelectionScreen';
+export * from './04-AmountInputScreen';
+export * from './05-DepositProgressScreen';
+export * from './06-DepositSuccessScreen';
+export * from './07-NordAuthScreen';
+export * from './08-AuthLoadingScreen';
+export * from './09-FinalSuccessScreen';
+export * from './10-ErrorScreen';

package/dist/WalletConnectionFlow/screens/index.js

@@ -0,0 +1,10 @@
+export * from './01-ConnectWalletScreen';
+export * from './02-EvmWalletAuthScreen';
+export * from './03-ChainSelectionScreen';
+export * from './04-AmountInputScreen';
+export * from './05-DepositProgressScreen';
+export * from './06-DepositSuccessScreen';
+export * from './07-NordAuthScreen';
+export * from './08-AuthLoadingScreen';
+export * from './09-FinalSuccessScreen';
+export * from './10-ErrorScreen';

package/dist/WalletConnectionFlow/types.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Types for the wallet connection flow state machine
+ */
+/**
+ * Enum representing all possible states in the wallet connection flow
+ */
+export declare enum FlowState {
+    IDLE = "IDLE",
+    CONNECTING_WALLET = "CONNECTING_WALLET",
+    WALLET_CONNECTED = "WALLET_CONNECTED",
+    ETH_TO_SOL_AUTH = "ETH_TO_SOL_AUTH",
+    CHAIN_SELECTION = "CHAIN_SELECTION",
+    AMOUNT_INPUT = "AMOUNT_INPUT",
+    DEPOSIT_PROGRESS = "DEPOSIT_PROGRESS",
+    DEPOSIT_SUCCESS = "DEPOSIT_SUCCESS",
+    NORD_AUTH = "NORD_AUTH",
+    AUTH_LOADING = "AUTH_LOADING",
+    FINAL_SUCCESS = "FINAL_SUCCESS",
+    ERROR = "ERROR"
+}
+/**
+ * Interface representing the flow context, containing all data necessary
+ * for the wallet connection flow
+ */
+export interface FlowContext {
+    walletType: 'solana' | 'ethereum' | null;
+    hasNordAccount: boolean;
+    hasActiveSession: boolean;
+    selectedChain: string | null;
+    amount: string;
+    transactionId: string | null;
+    error: Error | null;
+    lastInterruption: {
+        timestamp: number;
+        state: FlowState;
+        context: Partial<FlowContext>;
+    } | null;
+}
+/**
+ * Interface for state transitions in the flow
+ */
+export interface StateTransition {
+    from: FlowState | FlowState[];
+    to: FlowState;
+    condition?: (context: FlowContext) => boolean;
+}
+/**
+ * Initial flow context with default values
+ */
+export declare const initialFlowContext: FlowContext;
+export interface TableValues {
+    amount?: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    tx: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    from: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    to: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    network: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+    status: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
+}
+export interface WaitingMessageState {
+    title: string;
+    subtitle: string;
+    visible: boolean;
+    isTyping: boolean;
+}
+export interface Chain {
+    id: string;
+    name: string;
+    logo: string;
+}
+export interface App {
+    name: string;
+    color: string;
+    progress: number;
+}
+export type ButtonKey = 'deposit' | 'continue' | 'openApp';
+export interface ButtonState {
+    text: string;
+    isTyping: boolean;
+    showCursor: boolean;
+}
+export type ButtonStates = Record<ButtonKey, ButtonState>;

package/dist/WalletConnectionFlow/types.js

@@ -0,0 +1,34 @@
+/**
+ * Types for the wallet connection flow state machine
+ */
+/**
+ * Enum representing all possible states in the wallet connection flow
+ */
+export var FlowState;
+(function (FlowState) {
+    FlowState["IDLE"] = "IDLE";
+    FlowState["CONNECTING_WALLET"] = "CONNECTING_WALLET";
+    FlowState["WALLET_CONNECTED"] = "WALLET_CONNECTED";
+    FlowState["ETH_TO_SOL_AUTH"] = "ETH_TO_SOL_AUTH";
+    FlowState["CHAIN_SELECTION"] = "CHAIN_SELECTION";
+    FlowState["AMOUNT_INPUT"] = "AMOUNT_INPUT";
+    FlowState["DEPOSIT_PROGRESS"] = "DEPOSIT_PROGRESS";
+    FlowState["DEPOSIT_SUCCESS"] = "DEPOSIT_SUCCESS";
+    FlowState["NORD_AUTH"] = "NORD_AUTH";
+    FlowState["AUTH_LOADING"] = "AUTH_LOADING";
+    FlowState["FINAL_SUCCESS"] = "FINAL_SUCCESS";
+    FlowState["ERROR"] = "ERROR";
+})(FlowState || (FlowState = {}));
+/**
+ * Initial flow context with default values
+ */
+export var initialFlowContext = {
+    walletType: null,
+    hasNordAccount: false,
+    hasActiveSession: false,
+    selectedChain: null,
+    amount: '',
+    transactionId: null,
+    error: null,
+    lastInterruption: null,
+};

package/dist/WalletConnectionFlow/utils/persistence.d.ts

@@ -0,0 +1,24 @@
+import { FlowContext, FlowState } from '../types';
+/**
+ * Saves the current flow state and context to localStorage
+ * @param state Current flow state
+ * @param context Current flow context
+ */
+export declare const saveStateToLocalStorage: (state: FlowState, context: FlowContext) => void;
+/**
+ * Loads the flow state and context from localStorage if available and not expired
+ * @returns The loaded state and context, or null if not available or expired
+ */
+export declare const loadStateFromLocalStorage: () => {
+    state: FlowState;
+    context: FlowContext;
+} | null;
+/**
+ * Clears the stored flow state from localStorage
+ */
+export declare const clearStoredState: () => void;
+/**
+ * Checks if there is a stored state that can be recovered
+ * @returns True if there is a recoverable state, false otherwise
+ */
+export declare const hasRecoverableState: () => boolean;

package/dist/WalletConnectionFlow/utils/persistence.js

@@ -0,0 +1,83 @@
+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 { initialFlowContext } from '../types';
+import { FLOW_STATE_STORAGE_KEY, STATE_EXPIRY_TIME } from '../constants';
+/**
+ * Saves the current flow state and context to localStorage
+ * @param state Current flow state
+ * @param context Current flow context
+ */
+export var saveStateToLocalStorage = function (state, context) {
+    try {
+        var persistedData = {
+            state: state,
+            context: __assign(__assign({}, context), { 
+                // Filter out any sensitive data or error objects that shouldn't be persisted
+                error: context.error
+                    ? {
+                        message: context.error.message,
+                        name: context.error.name,
+                    }
+                    : null }),
+            timestamp: Date.now(),
+        };
+        localStorage.setItem(FLOW_STATE_STORAGE_KEY, JSON.stringify(persistedData));
+    }
+    catch (error) {
+        console.error('Failed to save flow state:', error);
+    }
+};
+/**
+ * Loads the flow state and context from localStorage if available and not expired
+ * @returns The loaded state and context, or null if not available or expired
+ */
+export var loadStateFromLocalStorage = function () {
+    try {
+        var storedData = localStorage.getItem(FLOW_STATE_STORAGE_KEY);
+        if (!storedData) {
+            return null;
+        }
+        var parsedData = JSON.parse(storedData);
+        var state = parsedData.state, context = parsedData.context, timestamp = parsedData.timestamp;
+        // Check if data is expired
+        if (Date.now() - timestamp > STATE_EXPIRY_TIME) {
+            localStorage.removeItem(FLOW_STATE_STORAGE_KEY);
+            return null;
+        }
+        return {
+            state: state,
+            context: __assign(__assign({}, initialFlowContext), context),
+        };
+    }
+    catch (error) {
+        console.error('Failed to load flow state:', error);
+        return null;
+    }
+};
+/**
+ * Clears the stored flow state from localStorage
+ */
+export var clearStoredState = function () {
+    try {
+        localStorage.removeItem(FLOW_STATE_STORAGE_KEY);
+    }
+    catch (error) {
+        console.error('Failed to clear flow state:', error);
+    }
+};
+/**
+ * Checks if there is a stored state that can be recovered
+ * @returns True if there is a recoverable state, false otherwise
+ */
+export var hasRecoverableState = function () {
+    return loadStateFromLocalStorage() !== null;
+};

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

@@ -1,6 +1,13 @@
 import { TableValues } from '../types';
 interface TransactionTableProps {
-    tableValues: TableValues;
+    tableValues: TableValues & {
+        amount?: {
+            text: string;
+            visible: boolean;
+            typing: boolean;
+        };
+    };
+    onClose?: () => void;
 }
-export declare function TransactionTable({ tableValues }: TransactionTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function TransactionTable({ tableValues, onClose }: TransactionTableProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,58 @@
 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));
-            }) }) }));
+    var tableValues = _a.tableValues, onClose = _a.onClose;
+    // Friendly labels for the keys
+    var getLabel = function (key) {
+        var labels = {
+            amount: 'Amount',
+            tx: 'Transaction ID',
+            from: 'From',
+            to: 'To',
+            network: 'Network',
+            status: 'Status'
+        };
+        return labels[key] || key;
+    };
+    // Get appropriate color for values based on key
+    var getValueStyles = function (key, value) {
+        if (key === 'status') {
+            if (value.toLowerCase().includes('success') || value.toLowerCase().includes('confirmed')) {
+                return 'text-green-500 dark:text-emerald-500 font-medium';
+            }
+            if (value.toLowerCase().includes('pending')) {
+                return 'text-amber-500 dark:text-amber-400 font-medium';
+            }
+            if (value.toLowerCase().includes('fail') || value.toLowerCase().includes('error')) {
+                return 'text-red-500 dark:text-red-400 font-medium';
+            }
+        }
+        if (key === 'tx') {
+            return 'text-primary-600 dark:text-primary-400 text-xs ';
+        }
+        if (key === 'network') {
+            return 'text-purple-600 dark:text-purple-400 font-medium';
+        }
+        if (key === 'from' || key === 'to') {
+            return 'text-gray-800 dark:text-gray-200 text-xs ';
+        }
+        if (key === 'amount') {
+            return 'text-green-600 dark:text-emerald-500 font-semibold';
+        }
+        return 'text-gray-900 dark:text-gray-50 font-medium';
+    };
+    // Order of fields to display
+    var fieldOrder = ['amount', 'status', 'network', 'from', 'to', 'tx'];
+    // Sort entries based on fieldOrder
+    var sortedEntries = Object.entries(tableValues)
+        .sort(function (_a, _b) {
+        var keyA = _a[0];
+        var keyB = _b[0];
+        var indexA = fieldOrder.indexOf(keyA);
+        var indexB = fieldOrder.indexOf(keyB);
+        return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);
+    });
+    return (_jsxs("div", { className: "relative w-full h-full bg-gray-100 dark:bg-gray-950 border border-gray-200 dark:border-gray-800 p-5 rounded-sm flex flex-col justify-center", children: [onClose && (_jsx("button", { onClick: onClose, className: "absolute top-3 right-2 text-gray-500 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none", "aria-label": "Close details", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: "space-y-3 text-sm pt-5", children: sortedEntries.map(function (_a) {
+                    var key = _a[0], value = _a[1];
+                    return (_jsxs("div", { className: "flex items-center justify-between py-2 ", children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium min-w-[120px]", children: getLabel(key) }), _jsxs("div", { className: "relative transition-all duration-300 ".concat(value.visible ? 'opacity-100' : 'opacity-0', " max-w-[65%] text-right flex-1"), children: [_jsx("span", { className: "".concat(getValueStyles(key, value.text), " break-all inline-block"), children: value.text }), value.typing && (_jsx("span", { className: "inline-block ml-1 w-[2px] h-[14px] bg-primary-500 dark:bg-primary-400 animate-pulse" }))] })] }, key));
+                }) })] }));
 }

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

@@ -1,4 +1,9 @@
 export interface TableValues {
+    amount?: {
+        text: string;
+        visible: boolean;
+        typing: boolean;
+    };
     tx: {
         text: string;
         visible: boolean;

package/dist/components/logos/ArbitrumLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ArbitrumLogoProps {
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const ArbitrumLogo: React.FC<ArbitrumLogoProps>;
+export {};

package/dist/components/logos/ArbitrumLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var ArbitrumLogo = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 48 : _b, _c = _a.height, height = _c === void 0 ? 48 : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (_jsx("svg", { width: width, height: height, viewBox: "0 0 2500 2500", className: className, xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { children: [_jsx("rect", { className: "st0", width: "2500", height: "2500", fill: "none" }), _jsx("g", { children: _jsxs("g", { children: [_jsx("path", { fill: "#213147", d: "M226,760v980c0,63,33,120,88,152l849,490c54,31,121,31,175,0l849-490c54-31,88-89,88-152V760\n                c0-63-33-120-88-152l-849-490c-54-31-121-31-175,0L314,608c-54,31-87,89-87,152H226z" }), _jsx("g", { children: _jsxs("g", { children: [_jsx("g", { children: _jsx("path", { fill: "#12AAFF", d: "M1435,1440l-121,332c-3,9-3,19,0,29l208,571l241-139l-289-793C1467,1422,1442,1422,1435,1440z" }) }), _jsx("g", { children: _jsx("path", { fill: "#12AAFF", d: "M1678,882c-7-18-32-18-39,0l-121,332c-3,9-3,19,0,29l341,935l241-139L1678,883V882z" }) })] }) }), _jsx("g", { children: _jsx("path", { fill: "#9DCCED", d: "M1250,155c6,0,12,2,17,5l918,530c11,6,17,18,17,30v1060c0,12-7,24-17,30l-918,530c-5,3-11,5-17,5\n                s-12-2-17-5l-918-530c-11-6-17-18-17-30V719c0-12,7-24,17-30l918-530c5-3,11-5,17-5l0,0V155z M1250,0c-33,0-65,8-95,25L237,555\n                c-59,34-95,96-95,164v1060c0,68,36,130,95,164l918,530c29,17,62,25,95,25s65-8,95-25l918-530c59-34,95-96,95-164V719\n                c0-68-36-130-95-164L1344,25c-29-17-62-25-95-25l0,0H1250z" }) }), _jsx("polygon", { fill: "#213147", points: "642,2179 727,1947 897,2088 738,2234" }), _jsxs("g", { children: [_jsx("path", { fill: "#FFFFFF", d: "M1172,644H939c-17,0-33,11-39,27L401,2039l241,139l550-1507c5-14-5-28-19-28L1172,644z" }), _jsx("path", { fill: "#FFFFFF", d: "M1580,644h-233c-17,0-33,11-39,27L738,2233l241,139l620-1701c5-14-5-28-19-28V644z" })] })] }) })] }) }));
+};

package/dist/components/logos/BaseLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface BaseLogoProps {
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const BaseLogo: React.FC<BaseLogoProps>;
+export {};

package/dist/components/logos/BaseLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var BaseLogo = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 48 : _b, _c = _a.height, height = _c === void 0 ? 48 : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (_jsxs("svg", { width: width, height: height, viewBox: "0 0 24 24", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#0052FF" }), _jsx("path", { d: "M12 5.5L18.5 12L12 18.5L5.5 12L12 5.5Z", fill: "white" })] }));
+};

package/dist/components/logos/BeraLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface BeraLogoProps {
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const BeraLogo: React.FC<BeraLogoProps>;
+export {};

package/dist/components/logos/BeraLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var BeraLogo = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 48 : _b, _c = _a.height, height = _c === void 0 ? 48 : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (_jsxs("svg", { width: width, height: height, viewBox: "0 0 24 24", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#000000" }), _jsx("path", { d: "M7.5 7.5C7.5 6.67157 8.17157 6 9 6H15C15.8284 6 16.5 6.67157 16.5 7.5V9C16.5 9.82843 15.8284 10.5 15 10.5H9C8.17157 10.5 7.5 9.82843 7.5 9V7.5Z", fill: "#FFD700" }), _jsx("path", { d: "M7.5 15C7.5 14.1716 8.17157 13.5 9 13.5H15C15.8284 13.5 16.5 14.1716 16.5 15V16.5C16.5 17.3284 15.8284 18 15 18H9C8.17157 18 7.5 17.3284 7.5 16.5V15Z", fill: "#FFD700" }), _jsx("path", { d: "M12 10.5V13.5", stroke: "#FFD700", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+};

package/dist/components/logos/BitcoinLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface BitcoinLogoProps {
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const BitcoinLogo: React.FC<BitcoinLogoProps>;
+export {};

package/dist/components/logos/BitcoinLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var BitcoinLogo = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 48 : _b, _c = _a.height, height = _c === void 0 ? 48 : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (_jsx("svg", { width: width, height: height, viewBox: "0 0 4091.27 4091.73", className: className, xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { children: [_jsx("path", { fill: "#F7931A", fillRule: "nonzero", d: "M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z" }), _jsx("path", { fill: "white", fillRule: "nonzero", d: "M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z" })] }) }));
+};

package/dist/components/logos/EVMChainsGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EVMChainsGroupProps {
+    size?: number;
+    className?: string;
+}
+export declare const EVMChainsGroup: React.FC<EVMChainsGroupProps>;
+export {};