@n1xyz/wallet-widget 0.0.1 → 0.0.5

package/dist/Modal/NTSFlow/views/CreateUserView.js

@@ -0,0 +1,105 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import BlockiesSvg from 'blockies-react-svg';
+import { useState } from 'react';
+import { getPseudoName } from '../../../Logic/getPseudoName';
+import { createUser } from '../../../Logic/utils';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provider/hooks';
+import { N1ModalViewMode } from '../../../Provider/types';
+import { WalletError, WalletErrorCode } from '../../../errors/types';
+import { logger } from '../../../utils/logger';
+import { ModalHeader } from '../components/ModalHeader';
+export function CreateUserView() {
+    var _a = useN1WalletInternalContext(), setViewMode = _a.setViewMode, setIsConnected = _a.setIsConnected, setUsername = _a.setUsername, setStartClosingLogin = _a.setStartClosingLogin, handleError = _a.handleError;
+    var address = useN1WalletContext().address;
+    var close = function () {
+        setStartClosingLogin(true);
+    };
+    var _b = useState(getPseudoName(address)), usernameLocal = _b[0], setUsernameLocalLocal = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    function validateUsername() {
+        if (!usernameLocal) {
+            setError('Username cannot be blank.');
+            return false;
+        }
+        if (!/^[a-zA-Z0-9-]+$/.test(usernameLocal)) {
+            setError('Username must be alphanumeric.');
+            return false;
+        }
+        setError('');
+        return true;
+    }
+    function handleCreate() {
+        return __awaiter(this, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        logger.debug('Creating User');
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        if (!validateUsername()) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, createUser(usernameLocal)];
+                    case 2:
+                        _a.sent();
+                        setViewMode(N1ModalViewMode.Success);
+                        setIsConnected(true);
+                        setUsername(usernameLocal);
+                        localStorage.setItem('n1_' + address + '_username', usernameLocal);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        if (error_1 instanceof WalletError) {
+                            handleError(error_1);
+                        }
+                        else {
+                            handleError(new WalletError(WalletErrorCode.UNKNOWN, 'Failed to create user', {
+                                originalError: error_1,
+                            }));
+                        }
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    return (_jsxs("div", { className: "rounded-[25px] shadow-lg p-5 m-4 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200", children: [_jsx(ModalHeader, {}), _jsx("div", { className: "flex flex-col items-center justify-center", children: _jsxs("div", { className: "flex mb-2 justify-center sm:justify-between w-full flex-wrap max-w-screen", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "w-80 h-80 sm:w-48 sm:h-48 rounded-[25px] flex items-center justify-center relative bg-neutral-100 dark:bg-neutral-800", children: _jsx("div", { className: "overflow-hidden rounded-lg w-80 h-80 sm:w-48 sm:h-48 p-2", children: _jsx(BlockiesSvg, { address: address, className: "drop-shadow w-full h-full rounded-[20px]" }) }) }), _jsx("div", { className: "my-4 w-80 sm:w-48 p-2 border rounded-[15px] text-sm duration-300 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700", children: "You are creating an account that you can use across all N1." })] }), _jsxs("div", { className: "w-80 flex flex-col items-center sm:items-end justify-between h-full my-2", children: [_jsxs("div", { className: "flex flex-col relative bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700 rounded-[15px] border w-72", children: [_jsx("input", { type: "text", id: "username", placeholder: "Enter your username", value: usernameLocal, onChange: function (e) { return setUsernameLocalLocal(e.target.value); }, className: "p-3 py-4 outline-none focus:ring focus:ring-orange-200 bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-stone-200 rounded-[15px] border ".concat(error ? 'border-main' : 'border-neutral-200 dark:border-neutral-700') }), _jsxs("div", { className: "p-2 flex w-full justify-between text-xs text-neutral-500 dark:text-neutral-400", children: [_jsx("span", { className: "font-bold", children: "Username:" }), " ", usernameLocal] }), _jsxs("div", { className: "px-2 pb-2 flex w-full justify-between text-xs text-neutral-500 dark:text-neutral-400", children: [_jsx("span", { className: "font-bold", children: "Wallet:" }), ' ', address.substring(0, 9) + '...' + address.slice(-3)] })] }), error && (_jsx("div", { className: "mt-2 w-72 p-2 text-main bg-main/5 dark:bg-main/20 border border-main/40 rounded-[15px] text-center", children: error })), _jsx("button", { className: "my-4 w-72 py-4 border rounded-[15px] text-white bg-neutral-900 dark:bg-white dark:text-black cursor-pointer duration-300 hover:opacity-80", onClick: handleCreate, children: "Create" }), _jsx("div", { className: "w-72", children: _jsx("button", { className: "w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700 hover:opacity-80", onClick: close, children: "Close" }) })] })] }) })] }));
+}

package/dist/Modal/NTSFlow/views/NoWhitelistView.d.ts

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

package/dist/Modal/NTSFlow/views/NoWhitelistView.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provider/hooks';
+import { N1ModalViewMode } from '../../../Provider/types';
+import { ANIMATION_EASE } from '../../NordFlow/constants';
+import { ModalHeader } from '../components/ModalHeader';
+export function NoWhitelistView() {
+    var _a = useN1WalletInternalContext(), setViewMode = _a.setViewMode, dynamicHandleLogOut = _a.dynamicHandleLogOut, setIsConnected = _a.setIsConnected;
+    var address = useN1WalletContext().address;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), isPressed = _c[0], setIsPressed = _c[1];
+    function disconnect() {
+        // TODO: create a util function for disconnecting and clearing local storage
+        dynamicHandleLogOut();
+        if (typeof window !== 'undefined') {
+            localStorage.clear();
+            if ('caches' in window) {
+                caches.keys().then(function (cacheNames) {
+                    cacheNames.forEach(function (cacheName) {
+                        caches.delete(cacheName);
+                    });
+                });
+            }
+            window.location.reload();
+        }
+        setViewMode(N1ModalViewMode.Connect);
+        setIsConnected(false);
+    }
+    var addressText = address
+        ? "".concat(address.substring(0, 6), "...").concat(address.slice(-4))
+        : '';
+    return (_jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity]", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx(ModalHeader, {}) }), _jsx("div", { className: "p-6 overflow-hidden relative", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-xl font-medium text-gray-900 dark:text-white mb-2", children: "Not Whitelisted" }), _jsxs("p", { className: "text-gray-500 dark:text-gray-400", children: ["The wallet address ", addressText, " is not whitelisted for access."] })] }), _jsx("button", { onClick: disconnect, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
+                                setIsHovered(false);
+                                setIsPressed(false);
+                            }, onMouseDown: function () { return setIsPressed(true); }, onMouseUp: function () { return setIsPressed(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: isPressed
+                                    ? 'scale(0.98)'
+                                    : isHovered
+                                        ? 'scale(0.99)'
+                                        : 'scale(1)',
+                            }, children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center justify-center", children: _jsx("span", { className: "\n                  text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n                  text-gray-500 dark:text-neutral-400 group-hover:text-gray-900 dark:group-hover:text-white\n                "), children: "Disconnect" }) }) }) })] }) })] }));
+}

package/dist/Modal/NTSFlow/views/SigningView.d.ts

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

package/dist/Modal/NTSFlow/views/SigningView.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalHeader } from '../components/ModalHeader';
+export function SigningView() {
+    return (_jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity]", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx(ModalHeader, {}) }), _jsx("div", { className: "p-6 overflow-hidden relative", children: _jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx("div", { className: "relative", children: _jsx("div", { className: "animate-spin rounded-full h-16 w-16 border-2 border-gray-200 dark:border-gray-800", children: _jsx("div", { className: "absolute inset-0 rounded-full border-t-2 border-main" }) }) }), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsxs("h3", { className: "text-xl text-gray-900 dark:text-white transition-all duration-300 h-[32px] flex items-center justify-center relative font-semibold", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Waiting for signature" }), _jsx("div", { className: "absolute min-w-[280px]", children: "Waiting for signature" })] }), _jsxs("p", { className: "text-sm text-gray-600 dark:text-neutral-400 h-[20px] flex items-center justify-center relative", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Please sign the message in your wallet" }), _jsx("div", { className: "absolute min-w-[280px]", children: "Please sign the message in your wallet" })] })] })] }) })] }));
+}

package/dist/Modal/NTSFlow/views/SuccessView.d.ts

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

package/dist/Modal/NTSFlow/views/SuccessView.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useN1WalletInternalContext } from '../../../Provider/hooks';
+import { ModalHeader } from '../components/ModalHeader';
+export function SuccessView() {
+    var _a = useN1WalletInternalContext(), setViewMode = _a.setViewMode, setStartClosingLogin = _a.setStartClosingLogin;
+    var close = function () {
+        setStartClosingLogin(true);
+    };
+    return (_jsxs("div", { className: "rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200", children: [_jsx(ModalHeader, {}), _jsx("div", { className: 'rounded-[25px] overflow-hidden mb-4', children: _jsx("img", { src: 'https://cdn.midjourney.com/17b152e3-2c93-4d00-b4cc-860d787a4994/0_2.png', className: 'w-full' }) }), _jsx("div", { className: "my-2", children: _jsx("div", { className: "space-y-2", children: _jsx("button", { className: "w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 text-white bg-neutral-900 dark:bg-white dark:text-neutral-900", onClick: close, children: "Success! Continue" }) }) })] }));
+}

package/dist/Modal/NoWhitelistView.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useN1WalletInternalContext, useN1WalletContext, } from '../Provider/hooks';
 import { N1ModalViewMode } from '../Provider/types';
 import { ModalHeader } from './ModalHeader';
+import { ANIMATION_EASE } from '../WalletConnectionFlow/constants';
 export function NoWhitelistView() {
     var _a = useN1WalletInternalContext(), setViewMode = _a.setViewMode, dynamicHandleLogOut = _a.dynamicHandleLogOut, setIsConnected = _a.setIsConnected;
     var address = useN1WalletContext().address;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), isPressed = _c[0], setIsPressed = _c[1];
     function disconnect() {
         // TODO: create a util function for disconnecting and clearing local storage
         dynamicHandleLogOut();
@@ -25,5 +29,14 @@ export function NoWhitelistView() {
     var addressText = address
         ? "".concat(address.substring(0, 6), "...").concat(address.slice(-4))
         : '';
-    return (_jsxs("div", { className: "rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200", children: [_jsx(ModalHeader, {}), _jsxs("div", { className: "mt-6 text-center", children: [_jsx("p", { className: "text-lg mb-4", children: "Sorry, your wallet is not whitelisted." }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 mb-6", children: "N1 is currently available only for our early developer access program. Please reach out to us if you'd like to join." }), _jsx("button", { onClick: function () { return window.open('https://tally.so/r/wM8KRg', '_blank'); }, className: "w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 text-white bg-neutral-900 dark:bg-white dark:text-black mb-4", children: "Request Early Access" }), _jsxs("button", { onClick: disconnect, className: "w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800", children: ["Disconnect ", addressText] })] })] }));
+    return (_jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity]", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx(ModalHeader, {}) }), _jsx("div", { className: "p-6 overflow-hidden relative", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-xl font-medium text-gray-900 dark:text-white mb-2", children: "Not Whitelisted" }), _jsxs("p", { className: "text-gray-500 dark:text-gray-400", children: ["The wallet address ", addressText, " is not whitelisted for access."] })] }), _jsx("button", { onClick: disconnect, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
+                                setIsHovered(false);
+                                setIsPressed(false);
+                            }, onMouseDown: function () { return setIsPressed(true); }, onMouseUp: function () { return setIsPressed(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: isPressed
+                                    ? 'scale(0.98)'
+                                    : isHovered
+                                        ? 'scale(0.99)'
+                                        : 'scale(1)',
+                            }, children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center justify-center", children: _jsx("span", { className: "\n                  text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n                  text-gray-500 dark:text-neutral-400 group-hover:text-gray-900 dark:group-hover:text-white\n                "), children: "Disconnect" }) }) }) })] }) })] }));
 }

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface NordFlowProps {
+    onClose?: () => void;
+}
+/**
+ * Main component for the wallet connection flow
+ */
+export declare const NordFlow: React.FC<NordFlowProps>;
+export {};

package/dist/Modal/NordFlow/NordFlow.js

@@ -0,0 +1,262 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
+import Logo from '../../components/Logo';
+import { useN1WalletContext, useN1WalletInternalContext } from '../../Provider/hooks';
+import { CHAINS } from './constants';
+import { withImageFallback } from './hoc';
+import { useDepositFlow, useFlowState, useInterruptHandler, useNordInstance, useNordWalletConnect } from './hooks';
+import { AmountInputScreen, AuthLoadingScreen, ChainSelectionScreen, ConnectWalletScreen, DepositProgressScreen, DepositSuccessScreen, ErrorScreen, EvmWalletAuthScreen, FinalSuccessScreen } from './screens';
+import { FlowState } from './types';
+import { getTokenBalance, isNordConfigured } from './utils/nordUtils';
+// Apply the withImageFallback HOC to all screen components
+var EnhancedConnectWalletScreen = withImageFallback(ConnectWalletScreen);
+var EnhancedEvmWalletAuthScreen = withImageFallback(EvmWalletAuthScreen);
+var EnhancedChainSelectionScreen = withImageFallback(ChainSelectionScreen);
+var EnhancedAmountInputScreen = withImageFallback(AmountInputScreen);
+var EnhancedDepositProgressScreen = withImageFallback(DepositProgressScreen);
+var EnhancedDepositSuccessScreen = withImageFallback(DepositSuccessScreen);
+var EnhancedAuthLoadingScreen = withImageFallback(AuthLoadingScreen);
+var EnhancedFinalSuccessScreen = withImageFallback(FinalSuccessScreen);
+var EnhancedErrorScreen = withImageFallback(ErrorScreen);
+/**
+ * Main component for the wallet connection flow
+ */
+export var NordFlow = function (_a) {
+    var onClose = _a.onClose;
+    // Get session mode from context
+    var _b = useN1WalletInternalContext(), sessionMode = _b.sessionMode, faucetUrl = _b.faucetUrl;
+    var _c = useN1WalletContext(), balances = _c.balances, nord = _c.nord, nordUser = _c.nordUser;
+    var instanceNordUser = useNordInstance().nordUser;
+    // Use the nordUser from context, falling back to the one from useNordInstance
+    var currentNordUser = nordUser || instanceNordUser;
+    // Check if Nord is properly configured
+    useEffect(function () {
+        if (nord && !isNordConfigured(nord)) {
+            console.warn('Nord is available but not properly configured. Some functionality may be limited.');
+        }
+    }, [nord]);
+    // Handle state changes
+    var handleStateChange = useCallback(function (newState, prevState) {
+        console.log("State changed from ".concat(prevState, " to ").concat(newState));
+    }, []);
+    // Handle errors
+    var handleError = useCallback(function (error) {
+        console.error('Flow error:', error);
+    }, []);
+    // Initialize flow state
+    var _d = useFlowState({
+        autoRecover: false, // We'll handle recovery with a prompt
+        onStateChange: handleStateChange,
+        onError: handleError,
+    }), state = _d.state, context = _d.context, transition = _d.transition, updateContext = _d.updateContext, recover = _d.recover, recordInterruption = _d.recordInterruption, handleFlowError = _d.handleError, isRecoveryAvailable = _d.isRecoveryAvailable;
+    // Create a wrapped transition function that logs more details
+    var enhancedTransition = useCallback(function (newState, contextUpdates) {
+        console.log("Attempting transition to ".concat(newState), contextUpdates);
+        var result = transition(newState, contextUpdates);
+        console.log("Transition to ".concat(newState, " result:"), result);
+        return result;
+    }, [transition]);
+    // Initialize wallet connection
+    var _e = useNordWalletConnect(state, enhancedTransition, // Use enhanced transition instead of regular transition
+    context, updateContext, sessionMode || 0), connectWallet = _e.connectWallet, isConnecting = _e.isConnecting;
+    // Initialize deposit flow
+    var _f = useDepositFlow({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+        updateContext: updateContext,
+    }), amount = _f.amount, updateAmount = _f.updateAmount, startDeposit = _f.startDeposit, completeDeposit = _f.completeDeposit, getTransactionDetails = _f.getTransactionDetails;
+    // Initialize interrupt handler
+    var _g = useInterruptHandler({
+        state: state,
+        recordInterruption: recordInterruption,
+        onClose: onClose,
+    }), isClosing = _g.isClosing, handleCloseRequest = _g.handleCloseRequest;
+    // Check for recovery on mount
+    var _h = useState(false), hasAttemptedRecovery = _h[0], setHasAttemptedRecovery = _h[1];
+    React.useEffect(function () {
+        if (!hasAttemptedRecovery) {
+            if (isRecoveryAvailable) {
+                // Automatically recover without showing a prompt
+                recover();
+            }
+            else {
+                // Start at CONNECTING_WALLET so we show the wallet selection screen
+                // The actual connection will only happen when the user clicks the button
+                transition(FlowState.CONNECTING_WALLET);
+            }
+            setHasAttemptedRecovery(true);
+        }
+    }, [hasAttemptedRecovery, isRecoveryAvailable, transition, recover]);
+    // For deposit progress message
+    var _j = useState({
+        visible: true,
+        title: 'Processing Deposit',
+        subtitle: 'Please wait while we process your deposit',
+        isTyping: false
+    }), depositMessage = _j[0], setDepositMessage = _j[1];
+    var handleFinish = function () {
+        if (onClose) {
+            onClose();
+        }
+    };
+    // Handle chain selection
+    var handleChainSelect = useCallback(function (chainId) {
+        console.log('Chain selected in NordFlow:', chainId);
+        // For testnet, we need to use the network ID
+        var selectedChain = chainId;
+        console.log('Transitioning to AMOUNT_INPUT with chain:', selectedChain);
+        enhancedTransition(FlowState.AMOUNT_INPUT, {
+            selectedChain: selectedChain
+        });
+    }, [enhancedTransition]);
+    // Get the USDC balance
+    var getUsdcBalance = useCallback(function () {
+        // Try to get the balance from nordUser if available
+        if (currentNordUser) {
+            var usdcBalance = getTokenBalance(currentNordUser, 'USDC');
+            if (usdcBalance > 0) {
+                return usdcBalance;
+            }
+        }
+        // Fallback to the first balance from the context or a default value
+        return balances && balances.length > 0 ? Number(balances[0].balance) : 100;
+    }, [currentNordUser, balances]);
+    // Function to refresh balances
+    var refreshBalance = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var userAny, error_1, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 6, , 7]);
+                    console.log('Refreshing balance...');
+                    if (!(currentNordUser && nord && isNordConfigured(nord))) return [3 /*break*/, 5];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    userAny = currentNordUser;
+                    if (!(userAny && typeof userAny.refreshBalances === 'function')) return [3 /*break*/, 3];
+                    return [4 /*yield*/, userAny.refreshBalances()];
+                case 2:
+                    _a.sent();
+                    console.log('Balances refreshed using Nord-TS');
+                    return [2 /*return*/];
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _a.sent();
+                    console.warn('Error refreshing balances using Nord-TS, falling back to default method:', error_1);
+                    return [3 /*break*/, 5];
+                case 5:
+                    console.log('Balance refreshed using default method');
+                    return [3 /*break*/, 7];
+                case 6:
+                    error_2 = _a.sent();
+                    console.error('Error refreshing balance:', error_2);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }, [currentNordUser, nord]);
+    // Get available chains from Nord if possible
+    var getAvailableChains = useCallback(function () {
+        if (nord && isNordConfigured(nord) && nord.markets && nord.markets.length > 0) {
+            // Map Nord markets to chains format
+            return nord.markets.map(function (market) { return ({
+                id: market.marketId.toString(),
+                name: market.symbol,
+                logo: "/assets/chains/".concat(market.symbol.toLowerCase(), ".svg"),
+            }); });
+        }
+        // Fallback to predefined chains
+        return CHAINS;
+    }, [nord]);
+    // Render the appropriate screen based on the current state
+    var renderScreen = function () {
+        switch (state) {
+            case FlowState.CONNECTING_WALLET:
+                return (_jsx(EnhancedConnectWalletScreen, { onConnectWallet: connectWallet, isConnecting: isConnecting }));
+            case FlowState.CHAIN_SELECTION:
+                var availableChains = getAvailableChains();
+                return (_jsx(EnhancedChainSelectionScreen, { chains: availableChains, onChainSelect: handleChainSelect }));
+            case FlowState.ETH_TO_SOL_AUTH:
+                return (_jsx(EnhancedEvmWalletAuthScreen, { onAuth: function () { return transition(FlowState.CHAIN_SELECTION); } }));
+            case FlowState.AMOUNT_INPUT:
+                return (_jsx(EnhancedAmountInputScreen, { amount: amount, onAmountChange: updateAmount, onContinue: startDeposit, balance: getUsdcBalance(), faucetUrl: faucetUrl, refreshBalance: refreshBalance }));
+            case FlowState.DEPOSIT_PROGRESS:
+                return (_jsx(EnhancedDepositProgressScreen, { message: depositMessage }));
+            case FlowState.DEPOSIT_SUCCESS:
+                // Get transaction details from the deposit flow
+                var txDetails = getTransactionDetails();
+                // Create table values from transaction details
+                var updatedTableValues = {
+                    amount: { text: txDetails.amount, visible: true, typing: false },
+                    tx: { text: txDetails.tx, visible: true, typing: false },
+                    from: { text: txDetails.from, visible: true, typing: false },
+                    to: { text: txDetails.to, visible: true, typing: false },
+                    network: { text: txDetails.network, visible: true, typing: false },
+                    status: { text: txDetails.status, visible: true, typing: false },
+                };
+                return (_jsx(EnhancedDepositSuccessScreen, { amount: amount, tableValues: updatedTableValues, onContinue: completeDeposit }));
+            case FlowState.AUTH_LOADING:
+                return (_jsx(EnhancedAuthLoadingScreen, { onAuthComplete: function (success) {
+                        if (success) {
+                            // Update the context first
+                            updateContext({ hasActiveSession: true });
+                            // Then transition to success
+                            transition(FlowState.FINAL_SUCCESS, { hasActiveSession: true });
+                        }
+                        else {
+                            // Handle auth failure
+                            handleFlowError(new Error('Authentication failed'));
+                        }
+                    } }));
+            case FlowState.FINAL_SUCCESS:
+                return (_jsx(EnhancedFinalSuccessScreen, { onDone: handleFinish }));
+            case FlowState.ERROR:
+                return (_jsx(EnhancedErrorScreen, { error: context.error, onRetry: function () {
+                        // Logic to go back to appropriate state based on error
+                        transition(FlowState.CONNECTING_WALLET);
+                    }, onCancel: handleFinish }));
+            default:
+                return (_jsxs("div", { className: "flex flex-col items-center justify-center p-8 space-y-4", children: [_jsxs("div", { className: "relative w-12 h-12", children: [_jsx("div", { className: "absolute inset-0 border-2 border-gray-200 dark:border-gray-800 border-b-main rounded-full animate-spin-slow" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "w-2 h-2 bg-main rounded-full animate-pulse" }) })] }), _jsx("p", { className: "text-gray-700 dark:text-gray-300 text-sm font-medium", children: "Loading" })] }));
+        }
+    };
+    return (_jsx("div", { className: "z-50 flex items-center justify-center overflow-auto font-era ".concat(isClosing ? 'animate-fade-out' : 'animate-fade-in'), children: _jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity min-w-96", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800 w-full max-w-2xl mx-auto", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-3", children: _jsx("div", { className: "w-6 h-6 text-gray-50", children: _jsx(Logo, { size: 24 }) }) }), _jsx("button", { onClick: handleCloseRequest, className: "\n                text-neutral-400 hover:text-gray-900 dark:hover:text-white \n                transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\n                h-10 w-10 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800\n                flex items-center justify-center\n              ", children: _jsx("svg", { className: "w-5 h-5", 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: "M6 18L18 6M6 6l12 12" }) }) })] }) }), _jsx("div", { className: "wallet-connection-flow-content p-6 overflow-hidden", children: renderScreen() })] }) }));
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface NordFlowWrapperProps {
+    onClose?: () => void;
+    appId: string;
+    darkMode?: boolean;
+}
+/**
+ * Wrapper component for NordFlow that sets the isNordflow flag
+ */
+export declare const NordFlowWrapper: React.FC<NordFlowWrapperProps>;
+export {};

package/dist/Modal/NordFlow/NordFlowWrapper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { N1WalletProvider } from '../../Provider/N1WalletProvider';
+import { N1SessionMode } from '../../Provider/types';
+import { NordFlow } from './NordFlow';
+/**
+ * Wrapper component for NordFlow that sets the isNordflow flag
+ */
+export var NordFlowWrapper = function (_a) {
+    var onClose = _a.onClose, appId = _a.appId, _b = _a.darkMode, darkMode = _b === void 0 ? true : _b;
+    return (_jsx(N1WalletProvider, { providedSessionMode: N1SessionMode.Nord, appId: appId, darkMode: darkMode, isNordflow: true, children: _jsx(NordFlow, { onClose: onClose }) }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface WalletConnectionFlowProps {
+    onClose?: () => void;
+}
+/**
+ * Main component for the wallet connection flow
+ */
+export declare const WalletConnectionFlow: React.FC<WalletConnectionFlowProps>;
+export {};