@n1xyz/wallet-widget 0.0.4 → 0.0.7

package/dist/Modal/NordFlow/components/ImageWithFallback.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+/**
+ * A component that renders an image with a fallback div when the image is not available
+ */
+export var ImageWithFallback = function (_a) {
+    var src = _a.src, alt = _a.alt, _b = _a.width, width = _b === void 0 ? 'auto' : _b, _c = _a.height, height = _c === void 0 ? 'auto' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.fallbackClassName, fallbackClassName = _e === void 0 ? '' : _e, fallbackText = _a.fallbackText, _f = _a.fallbackBgColor, fallbackBgColor = _f === void 0 ? 'bg-gray-200 dark:bg-gray-800' : _f, _g = _a.fallbackTextColor, fallbackTextColor = _g === void 0 ? 'text-gray-500 dark:text-gray-400' : _g;
+    var _h = useState(false), imageError = _h[0], setImageError = _h[1];
+    // Get initials from alt text for fallback
+    var getInitials = function (text) {
+        if (!text)
+            return '';
+        return text
+            .split(' ')
+            .map(function (word) { return word[0]; })
+            .join('')
+            .toUpperCase()
+            .substring(0, 2);
+    };
+    var handleError = function () {
+        setImageError(true);
+    };
+    if (imageError || !src) {
+        // Render fallback div
+        return (_jsx("div", { className: "flex items-center justify-center ".concat(fallbackBgColor, " ").concat(fallbackTextColor, " ").concat(fallbackClassName), style: {
+                width: typeof width === 'number' ? "".concat(width, "px") : width,
+                height: typeof height === 'number' ? "".concat(height, "px") : height,
+            }, "aria-label": alt, children: fallbackText || getInitials(alt) }));
+    }
+    // Render image
+    return (_jsx("img", { src: src, alt: alt, width: width, height: height, className: className, onError: handleError }));
+};

package/dist/Modal/NordFlow/components/LoadingSquares.d.ts

@@ -0,0 +1 @@
+export declare function LoadingSquares(): import("react/jsx-runtime").JSX.Element;

package/dist/Modal/NordFlow/components/LoadingSquares.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function LoadingSquares() {
+    return (_jsx("div", { className: "relative w-32 h-32 animate-fade-up", style: { animationDelay: '0.2s' }, children: _jsxs("div", { className: "absolute inset-0 grid grid-cols-2 gap-2", children: [_jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader" }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader", style: { animationDelay: '0.2s' } }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader", style: { animationDelay: '0.4s' } }) }), _jsx("div", { className: "relative bg-white dark:bg-neutral-900 border-2 border-gray-100 dark:border-neutral-800 overflow-hidden", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 h-full bg-main/40 dark:bg-main/20 animate-square-loader", style: { animationDelay: '0.6s' } }) })] }) }));
+}

package/dist/Modal/NordFlow/components/MoreButton.d.ts

@@ -0,0 +1,8 @@
+import { Chain } from '../types';
+interface MoreButtonProps {
+    chain: Chain;
+    onClick: (chainId: string) => void;
+    disabled?: boolean;
+}
+export declare function MoreButton({ chain, onClick, disabled, }: MoreButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Modal/NordFlow/components/MoreButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreChainsGroup } from '../../../components/logos';
+export function MoreButton(_a) {
+    var chain = _a.chain, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var handleClick = function () {
+        if (!disabled) {
+            onClick(chain.id);
+        }
+    };
+    var baseClasses = 'flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-950 border-2 border-gray-100 dark:border-gray-800 transition-all duration-200 group rounded-lg';
+    var enabledClasses = 'hover:border-red-500 dark:hover:border-red-500 hover:bg-red-50/50 dark:hover:bg-gray-900';
+    var disabledClasses = 'opacity-50 cursor-not-allowed';
+    var buttonClasses = "".concat(baseClasses, " ").concat(disabled ? disabledClasses : enabledClasses);
+    var textClasses = disabled
+        ? 'mt-4 font-medium text-gray-400 dark:text-gray-500'
+        : 'mt-4 font-medium text-gray-600 dark:text-gray-400 group-hover:text-red-500 dark:group-hover:text-gray-50 transition-colors duration-200';
+    return (_jsxs("button", { onClick: handleClick, className: buttonClasses, disabled: disabled, children: [_jsx(MoreChainsGroup, { size: 32, className: disabled ? 'opacity-50 grayscale' : 'opacity-90' }), _jsx("span", { className: textClasses, children: chain.name })] }));
+}

package/dist/Modal/NordFlow/components/TransactionTable.d.ts

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

package/dist/Modal/NordFlow/components/TransactionTable.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { shortenAddress } from '../utils/nordUtils';
+import { getExplorerUrl } from '../../../Logic/transactionManager';
+export function TransactionTable(_a) {
+    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 font-medium hover:text-primary-700 dark:hover:text-primary-300 transition-colors duration-200';
+        }
+        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 font-medium hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200';
+        }
+        if (key === 'amount') {
+            return 'text-green-600 dark:text-emerald-500 font-semibold';
+        }
+        return 'text-gray-900 dark:text-gray-50 font-medium';
+    };
+    // Format display value with ellipsis for long text
+    var getDisplayValue = function (key, value) {
+        if (key === 'tx') {
+            return shortenAddress(value, 5, 4);
+        }
+        if (key === 'from' || key === 'to') {
+            return shortenAddress(value, 5, 4);
+        }
+        return value;
+    };
+    // Get explorer URL for transaction ID or address
+    var getExplorerLink = function (key, value) {
+        var _a;
+        // Extract network from tableValues to determine which explorer to use
+        var network = ((_a = tableValues.network) === null || _a === void 0 ? void 0 : _a.text) || 'solana-mainnet';
+        if (key === 'tx') {
+            return getExplorerUrl(value, network);
+        }
+        if (key === 'from') {
+            return "https://explorer.solana.com/address/".concat(value, "?cluster=devnet");
+        }
+        return '';
+    };
+    // 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: [(key === 'tx' || key === 'from') &&
+                                        getExplorerLink(key, value.text) ? (_jsxs("a", { href: getExplorerLink(key, value.text), target: "_blank", rel: "noopener noreferrer", className: "".concat(getValueStyles(key, value.text), " break-all inline-block group"), title: value.text, children: [_jsx("span", { className: "underline hover:font-bold", children: getDisplayValue(key, value.text) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 ml-1 inline-block opacity-50 group-hover:opacity-100 transition-opacity duration-200", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })] })) : (_jsx("span", { className: "".concat(getValueStyles(key, value.text), " break-all inline-block"), title: value.text, 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/Modal/NordFlow/components/WaitingMessage.d.ts

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

package/dist/Modal/NordFlow/components/WaitingMessage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingSquares } from './LoadingSquares';
+export function WaitingMessage(_a) {
+    var message = _a.message;
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx(LoadingSquares, {}), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsxs("h3", { className: "text-xl text-gray-800 dark:text-white transition-all duration-300 h-[32px] flex items-center justify-center relative font-semibold", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Waiting for transaction" }), _jsx("div", { className: "absolute min-w-[280px]", children: message.visible && message.title })] }), _jsxs("div", { className: "text-sm text-gray-600 dark:text-neutral-400 h-[20px] flex items-center justify-center relative", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Please sign the transaction in your wallet" }), _jsx("div", { className: "absolute min-w-[280px]", children: message.visible && message.subtitle })] })] })] }));
+}

package/dist/Modal/NordFlow/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ImageWithFallback';
+export * from './ChainButton';
+export * from './LoadingSquares';
+export * from './TransactionTable';
+export * from './WaitingMessage';

package/dist/Modal/NordFlow/components/index.js

@@ -0,0 +1,5 @@
+export * from './ImageWithFallback';
+export * from './ChainButton';
+export * from './LoadingSquares';
+export * from './TransactionTable';
+export * from './WaitingMessage';

package/dist/Modal/NordFlow/constants.d.ts

@@ -0,0 +1,37 @@
+import { StateTransition } from './types';
+export declare const ANIMATION_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+export declare const TYPING_INTERVAL = 50;
+export declare const ANIMATION_DURATION = 3000;
+export declare const MIN_DEPOSIT = 10000;
+export declare const MAX_DEPOSIT = 10000;
+export declare const INITIAL_APPS: {
+    name: string;
+    color: string;
+    progress: number;
+}[];
+/**
+ * Available chains for deposit
+ */
+export declare const AVAILABLE_CHAINS: {
+    id: string;
+    name: string;
+    logo: string;
+}[];
+export declare const CHAINS: {
+    id: string;
+    name: string;
+    logo: string;
+}[];
+/**
+ * State machine transitions
+ * Defines all possible transitions between states and their conditions
+ */
+export declare const STATE_TRANSITIONS: StateTransition[];
+/**
+ * Local storage key for persisting flow state
+ */
+export declare const FLOW_STATE_STORAGE_KEY = "n1_wallet_connection_flow_state";
+/**
+ * Time in milliseconds after which a persisted state is considered stale
+ */
+export declare const STATE_EXPIRY_TIME: number;

package/dist/Modal/NordFlow/constants.js

@@ -0,0 +1,192 @@
+import { FlowState } from './types';
+export var ANIMATION_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)';
+export var TYPING_INTERVAL = 50;
+export var ANIMATION_DURATION = 3000;
+export var MIN_DEPOSIT = 10000;
+export var MAX_DEPOSIT = 10000;
+export var INITIAL_APPS = Array.from({ length: 20 }, function (_, i) { return ({
+    name: "App".concat(i + 1),
+    color: '#ff2b1f',
+    progress: 0,
+}); });
+/**
+ * Available chains for deposit
+ */
+export var AVAILABLE_CHAINS = [
+    {
+        id: 'ethereum',
+        name: 'Ethereum',
+        logo: 'ethereum-logo.svg',
+    },
+    {
+        id: 'solana',
+        name: 'Solana',
+        logo: 'solana-logo.svg',
+    },
+];
+export var CHAINS = [
+    {
+        id: 'ethereum',
+        name: 'Ethereum',
+        logo: '/images/chains/ethereum.svg',
+    },
+    {
+        id: 'polygon',
+        name: 'Polygon',
+        logo: '/images/chains/polygon.svg',
+    },
+    {
+        id: 'arbitrum',
+        name: 'Arbitrum',
+        logo: '/images/chains/arbitrum.svg',
+    },
+    {
+        id: 'optimism',
+        name: 'Optimism',
+        logo: '/images/chains/optimism.svg',
+    },
+];
+/**
+ * State machine transitions
+ * Defines all possible transitions between states and their conditions
+ */
+export var STATE_TRANSITIONS = [
+    // From IDLE state
+    {
+        from: FlowState.IDLE,
+        to: FlowState.CONNECTING_WALLET,
+        condition: function (context) { return !context.walletType; }, // Only if wallet is not connected
+    },
+    {
+        from: FlowState.CONNECTING_WALLET,
+        to: FlowState.ERROR,
+        // When wallet connection fails
+    },
+    {
+        from: FlowState.CONNECTING_WALLET,
+        to: FlowState.CHAIN_SELECTION,
+        condition: function (context) { return context.walletType === 'solana'; }, // If Solana wallet and no Nord account
+    },
+    {
+        from: FlowState.CONNECTING_WALLET,
+        to: FlowState.AUTH_LOADING,
+        condition: function (context) {
+            return context.walletType === 'solana' && context.hasNordAccount;
+        }, // If Solana wallet and no Nord account
+    },
+    {
+        from: FlowState.CONNECTING_WALLET,
+        to: FlowState.FINAL_SUCCESS,
+        condition: function (context) {
+            return context.walletType === 'solana' &&
+                context.hasNordAccount &&
+                context.hasActiveSession;
+        }, // If Solana wallet and no Nord account
+    },
+    // From ETH_TO_SOL_AUTH state
+    {
+        from: FlowState.ETH_TO_SOL_AUTH,
+        to: FlowState.CHAIN_SELECTION,
+        condition: function (context) { return !context.hasNordAccount; }, // After ETH auth, if no Nord account
+    },
+    {
+        from: FlowState.ETH_TO_SOL_AUTH,
+        to: FlowState.AUTH_LOADING,
+        condition: function (context) { return context.hasNordAccount && !context.hasActiveSession; },
+        // After ETH auth, if has Nord account but no active session
+    },
+    {
+        from: FlowState.ETH_TO_SOL_AUTH,
+        to: FlowState.FINAL_SUCCESS,
+        condition: function (context) { return context.hasNordAccount && context.hasActiveSession; },
+        // After ETH auth, if has Nord account and active session
+    },
+    {
+        from: FlowState.ETH_TO_SOL_AUTH,
+        to: FlowState.ERROR,
+        // If ETH to SOL auth fails
+    },
+    // From CHAIN_SELECTION state
+    {
+        from: FlowState.CHAIN_SELECTION,
+        to: FlowState.AMOUNT_INPUT,
+        // After chain selection
+    },
+    // From AMOUNT_INPUT state
+    {
+        from: FlowState.AMOUNT_INPUT,
+        to: FlowState.DEPOSIT_PROGRESS,
+        // After amount input
+    },
+    {
+        from: FlowState.AMOUNT_INPUT,
+        to: FlowState.CHAIN_SELECTION,
+        // If user goes back to chain selection
+    },
+    // From DEPOSIT_PROGRESS state
+    {
+        from: FlowState.DEPOSIT_PROGRESS,
+        to: FlowState.DEPOSIT_SUCCESS,
+        // When deposit is successful
+    },
+    {
+        from: FlowState.DEPOSIT_PROGRESS,
+        to: FlowState.ERROR,
+        // When deposit fails
+    },
+    // From DEPOSIT_SUCCESS state
+    {
+        from: FlowState.DEPOSIT_SUCCESS,
+        to: FlowState.AUTH_LOADING,
+        condition: function (context) { return !context.hasActiveSession; }, // If no active Nord session
+    },
+    {
+        from: FlowState.DEPOSIT_SUCCESS,
+        to: FlowState.FINAL_SUCCESS,
+        condition: function (context) { return context.hasActiveSession; }, // If active Nord session exists
+    },
+    {
+        from: FlowState.AUTH_LOADING,
+        to: FlowState.ERROR,
+        // When Nord auth fails to start
+    },
+    // From AUTH_LOADING state
+    {
+        from: FlowState.AUTH_LOADING,
+        to: FlowState.FINAL_SUCCESS,
+        // When auth is successful
+    },
+    {
+        from: FlowState.AUTH_LOADING,
+        to: FlowState.ERROR,
+        // When auth fails
+    },
+    // From ERROR state
+    {
+        from: FlowState.ERROR,
+        to: FlowState.IDLE,
+        // When restarting after error
+    },
+    // Global recovery transition (can happen from any state upon recovery)
+    {
+        from: [
+            FlowState.CONNECTING_WALLET,
+            FlowState.ETH_TO_SOL_AUTH,
+            FlowState.CHAIN_SELECTION,
+            FlowState.AMOUNT_INPUT,
+            FlowState.DEPOSIT_PROGRESS,
+            FlowState.DEPOSIT_SUCCESS,
+            FlowState.AUTH_LOADING,
+        ],
+        to: FlowState.IDLE,
+        // For recovery after interruption
+    },
+];
+/**
+ * Local storage key for persisting flow state
+ */
+export var FLOW_STATE_STORAGE_KEY = 'n1_wallet_connection_flow_state';
+/**
+ * Time in milliseconds after which a persisted state is considered stale
+ */
+export var STATE_EXPIRY_TIME = 30 * 60 * 1000; // 30 minutes

package/dist/Modal/NordFlow/hoc/index.d.ts

@@ -0,0 +1 @@
+export * from './withImageFallback';

package/dist/Modal/NordFlow/hoc/index.js

@@ -0,0 +1 @@
+export * from './withImageFallback';

package/dist/Modal/NordFlow/hoc/withImageFallback.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentType } from 'react';
+/**
+ * A Higher-Order Component (HOC) that adds image fallback functionality to a component
+ * @param WrappedComponent The component to wrap
+ * @returns A new component with image fallback functionality
+ */
+export declare function withImageFallback<P extends object>(WrappedComponent: ComponentType<P>): React.FC<P>;

package/dist/Modal/NordFlow/hoc/withImageFallback.js

@@ -0,0 +1,60 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ImageWithFallback } from '../components';
+/**
+ * A Higher-Order Component (HOC) that adds image fallback functionality to a component
+ * @param WrappedComponent The component to wrap
+ * @returns A new component with image fallback functionality
+ */
+export function withImageFallback(WrappedComponent) {
+    // Create a new component that wraps the original component
+    var WithImageFallback = function (props) {
+        // Function to recursively process React elements
+        var processNode = function (node) {
+            if (!React.isValidElement(node)) {
+                return node;
+            }
+            var element = node;
+            // If it's an img element, replace it with ImageWithFallback
+            if (element.type === 'img') {
+                var _a = element.props, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, className = _a.className, rest = __rest(_a, ["src", "alt", "width", "height", "className"]);
+                return (_jsx(ImageWithFallback, __assign({ src: src, alt: alt || 'Image', width: width, height: height, className: className }, rest)));
+            }
+            // If it has children, process them recursively
+            if (element.props && element.props.children) {
+                var children = React.Children.map(element.props.children, processNode);
+                return React.cloneElement(element, __assign({}, element.props), children);
+            }
+            return element;
+        };
+        // Render the wrapped component and process its output
+        var renderedComponent = _jsx(WrappedComponent, __assign({}, props));
+        return processNode(renderedComponent);
+    };
+    // Set display name for debugging
+    var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    WithImageFallback.displayName = "withImageFallback(".concat(wrappedComponentName, ")");
+    return WithImageFallback;
+}

package/dist/Modal/NordFlow/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useDepositFlow';
+export * from './useNordWalletConnect';
+export * from './useInterruptHandler';
+export * from './useFlowState';
+export * from './useNordInstance';

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

@@ -0,0 +1,5 @@
+export * from './useDepositFlow';
+export * from './useNordWalletConnect';
+export * from './useInterruptHandler';
+export * from './useFlowState';
+export * from './useNordInstance';

package/dist/Modal/NordFlow/hooks/useButtonTyping.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ButtonKey, ButtonStates } from '../types';
+interface ButtonConfig {
+    text: string;
+}
+export declare function useButtonTyping(buttonStates: ButtonStates, setButtonStates: Dispatch<SetStateAction<ButtonStates>>, buttonConfigs?: Record<ButtonKey, ButtonConfig>): void;
+export {};

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

@@ -0,0 +1,43 @@
+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 { useEffect } from 'react';
+import { TYPING_INTERVAL } from '../constants';
+var DEFAULT_BUTTON_CONFIGS = {
+    deposit: { text: 'Deposit' },
+    continue: { text: 'Continue' },
+    openApp: { text: 'Launch' },
+};
+export function useButtonTyping(buttonStates, setButtonStates, buttonConfigs) {
+    if (buttonConfigs === void 0) { buttonConfigs = DEFAULT_BUTTON_CONFIGS; }
+    useEffect(function () {
+        Object.entries(buttonStates).forEach(function (_a) {
+            var key = _a[0], state = _a[1];
+            if (state.isTyping) {
+                var config_1 = buttonConfigs[key];
+                var index_1 = 0;
+                var interval_1 = setInterval(function () {
+                    if (index_1 <= config_1.text.length) {
+                        setButtonStates(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { text: config_1.text.slice(0, index_1) }), _a)));
+                        });
+                        index_1++;
+                    }
+                    else {
+                        clearInterval(interval_1);
+                    }
+                }, TYPING_INTERVAL);
+                return function () { return clearInterval(interval_1); };
+            }
+        });
+    }, [buttonStates, setButtonStates, buttonConfigs]);
+}

package/dist/Modal/NordFlow/hooks/useDepositFlow.d.ts

@@ -0,0 +1,52 @@
+import { FlowContext, FlowState } from '../types';
+import { TransactionResult } from '../../../Logic/transactionManager';
+/**
+ * Hook for handling the deposit flow
+ *
+ * @param options Configuration options
+ * @returns Deposit flow methods and state
+ */
+export declare const useDepositFlow: (options: {
+    /**
+     * Flow state
+     */
+    state: FlowState;
+    /**
+     * Flow context
+     */
+    context: FlowContext;
+    /**
+     * Transition to a new state
+     */
+    transition: (newState: FlowState, contextUpdates?: Partial<FlowContext>) => boolean;
+    /**
+     * Handle errors
+     */
+    handleError: (error: Error) => void;
+    /**
+     * Update context
+     */
+    updateContext?: (contextUpdates: Partial<FlowContext>) => void;
+}) => {
+    selectedChain: string | null;
+    setSelectedChain: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    amount: string;
+    setAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
+    isDepositing: boolean;
+    transactionId: string | null;
+    transactionResult: TransactionResult | null;
+    selectChain: (chainId: string) => void;
+    updateAmount: (newAmount: string) => void;
+    startDeposit: () => Promise<void>;
+    completeDeposit: () => void;
+    goBackToChainSelection: () => void;
+    getTransactionDetails: () => {
+        amount: string;
+        tx: string;
+        from: string;
+        to: string;
+        network: string;
+        status: string;
+        explorerUrl: string;
+    };
+};