@n1xyz/wallet-widget 0.0.1 → 0.0.5

package/dist/Provider/LazyWalletProvider.js

@@ -46,82 +46,111 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useN1WalletInternalContext } from './hooks';
-import { logger } from '../utils/logger';
-var getSettings = function (darkMode) { return ({
-    initialAuthenticationMode: 'connect-only',
-    environmentId: '9a47561c-6a0b-4a5b-ace1-12621c11cebd',
-    theme: {
-        mode: darkMode ? 'dark' : 'light',
-    },
-    events: {
-        onAuthSuccess: function (args) {
-            console.log('onAuthSuccess was called', args);
-        },
-    },
-}); };
+import { N1SessionMode } from './types';
 function DynamicContextConsumer(_a) {
     var children = _a.children;
-    var _b = useN1WalletInternalContext(), setDynamicWallet = _b.setDynamicWallet, setAddress = _b.setAddress, setDynamicSdkHasLoaded = _b.setDynamicSdkHasLoaded, setShowDynamicWidget = _b.setShowDynamicWidget, darkMode = _b.darkMode, setDynamicHandleLogOut = _b.setDynamicHandleLogOut;
-    var _c = useState(null), DynamicContext = _c[0], setDynamicContext = _c[1];
+    var _b = useState(null), DynamicContext = _b[0], setDynamicContext = _b[1];
     var showAuthFlowRef = useRef(null);
+    // Use refs to track previous values and prevent unnecessary updates
+    var prevPrimaryWalletRef = useRef(null);
+    var prevHandleLogOutRef = useRef(null);
+    var prevSdkHasLoadedRef = useRef(null);
+    var _c = useN1WalletInternalContext(), setDynamicWallet = _c.setDynamicWallet, setDynamicHandleLogOut = _c.setDynamicHandleLogOut, setDynamicSdkHasLoaded = _c.setDynamicSdkHasLoaded, setAddress = _c.setAddress, setShowDynamicWidget = _c.setShowDynamicWidget;
+    // Load the Dynamic context only once
     useEffect(function () {
+        var isMounted = true;
         import('@dynamic-labs/sdk-react-core').then(function (_a) {
             var useDynamicContext = _a.useDynamicContext;
-            setDynamicContext(function () { return useDynamicContext; });
+            if (isMounted) {
+                setDynamicContext(function () { return useDynamicContext; });
+            }
         });
+        return function () { isMounted = false; };
     }, []);
-    // Set up a stable widget function that uses the ref
+    // Set up a stable widget function that uses the ref - only once
     useEffect(function () {
-        setShowDynamicWidget(function () { return function (show) {
+        var stableShowWidget = function (show) {
             if (showAuthFlowRef.current) {
                 showAuthFlowRef.current(show);
             }
-        }; });
+        };
+        setShowDynamicWidget(function () { return stableShowWidget; });
     }, [setShowDynamicWidget]);
     if (!DynamicContext) {
         return _jsx(_Fragment, { children: children });
     }
     var DynamicComponent = function () {
         var _a = DynamicContext(), primaryWallet = _a.primaryWallet, sdkHasLoaded = _a.sdkHasLoaded, setShowAuthFlow = _a.setShowAuthFlow, handleLogOut = _a.handleLogOut;
-        // Store setShowAuthFlow in ref to avoid re-renders
+        // Store setShowAuthFlow in ref to avoid re-renders - only when it changes
         useEffect(function () {
-            showAuthFlowRef.current = setShowAuthFlow;
+            if (setShowAuthFlow !== showAuthFlowRef.current) {
+                showAuthFlowRef.current = setShowAuthFlow;
+            }
         }, [setShowAuthFlow]);
+        // Set the dynamic wallet and address when the primary wallet changes
+        // Use deep comparison to prevent unnecessary updates
         useEffect(function () {
-            if (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) {
-                logger.debug('Primary wallet found');
+            // Skip if the wallet hasn't actually changed
+            if (primaryWallet === prevPrimaryWalletRef.current) {
+                return;
+            }
+            prevPrimaryWalletRef.current = primaryWallet;
+            if (primaryWallet) {
                 setDynamicWallet(primaryWallet);
                 setAddress(primaryWallet.address);
             }
             else {
-                logger.debug('No primary wallet found');
                 setDynamicWallet(null);
                 setAddress('');
             }
-        }, [primaryWallet]);
+        }, [primaryWallet, setDynamicWallet, setAddress]);
+        // Set the logout handler when it changes - only when it actually changes
         useEffect(function () {
-            if (sdkHasLoaded) {
-                setDynamicSdkHasLoaded(true);
+            if (handleLogOut && handleLogOut !== prevHandleLogOutRef.current) {
+                prevHandleLogOutRef.current = handleLogOut;
+                setDynamicHandleLogOut(function () { return handleLogOut; });
             }
-        }, [sdkHasLoaded]);
-        // Set the logout handler
+        }, [handleLogOut, setDynamicHandleLogOut]);
+        // Set the SDK loaded flag when it changes - only when it actually changes
         useEffect(function () {
-            if (handleLogOut) {
-                setDynamicHandleLogOut(function () { return handleLogOut; });
+            if (sdkHasLoaded !== prevSdkHasLoadedRef.current) {
+                prevSdkHasLoadedRef.current = sdkHasLoaded;
+                setDynamicSdkHasLoaded(sdkHasLoaded);
             }
-        }, [handleLogOut]);
+        }, [sdkHasLoaded, setDynamicSdkHasLoaded]);
         return _jsx(_Fragment, { children: children });
     };
     return _jsx(DynamicComponent, {});
 }
+var getSettings = function (darkMode) { return ({
+    initialAuthenticationMode: 'connect-only',
+    environmentId: '9a47561c-6a0b-4a5b-ace1-12621c11cebd',
+    silentAuthentication: true,
+    silentAuth: true,
+    theme: {
+        mode: darkMode ? 'dark' : 'light',
+    },
+    events: {
+        onAuthSuccess: function (args) {
+            console.log('onAuthSuccess was called', args);
+        },
+    },
+}); };
 function LazyInternal(props) {
     var _this = this;
     var _a = useState(null), Provider = _a[0], setProvider = _a[1];
     var _b = useState([]), walletConnectors = _b[0], setWalletConnectors = _b[1];
-    var darkMode = useN1WalletInternalContext().darkMode;
+    var _c = useN1WalletInternalContext(), darkMode = _c.darkMode, sessionMode = _c.sessionMode;
+    // Use a ref to track the previous session mode
+    var prevSessionModeRef = useRef(null);
     useEffect(function () {
+        // Skip if the session mode hasn't changed
+        if (sessionMode === prevSessionModeRef.current) {
+            return;
+        }
+        prevSessionModeRef.current = sessionMode;
         var loadDynamicDeps = function () { return __awaiter(_this, void 0, void 0, function () {
             var _a, DynamicContextProvider_1, EthereumWalletConnectors, SolanaWalletConnectors, error_1;
             return __generator(this, function (_b) {
@@ -136,7 +165,14 @@ function LazyInternal(props) {
                     case 1:
                         _a = _b.sent(), DynamicContextProvider_1 = _a[0].DynamicContextProvider, EthereumWalletConnectors = _a[1].EthereumWalletConnectors, SolanaWalletConnectors = _a[2].SolanaWalletConnectors;
                         setProvider(function () { return DynamicContextProvider_1; });
-                        setWalletConnectors([EthereumWalletConnectors, SolanaWalletConnectors]);
+                        if (sessionMode === N1SessionMode.Nord) {
+                            // Only use Solana wallet connectors for Nord mode
+                            setWalletConnectors([SolanaWalletConnectors]);
+                        }
+                        else {
+                            // Use all wallet connectors for NTS mode
+                            setWalletConnectors([EthereumWalletConnectors, SolanaWalletConnectors]);
+                        }
                         return [3 /*break*/, 3];
                     case 2:
                         error_1 = _b.sent();
@@ -147,12 +183,13 @@ function LazyInternal(props) {
             });
         }); };
         loadDynamicDeps();
-    }, []);
+    }, [sessionMode]);
+    // Memoize the dynamic settings to prevent unnecessary re-renders
+    var dynamicSettings = useCallback(function () { return (__assign(__assign({}, getSettings(darkMode)), { walletConnectors: walletConnectors })); }, [darkMode, walletConnectors]);
     if (!Provider || walletConnectors.length === 0) {
         return null;
     }
-    var dynamicSettings = __assign(__assign({}, getSettings(darkMode)), { walletConnectors: walletConnectors });
-    return (_jsx(Provider, { settings: dynamicSettings, children: _jsx(DynamicContextConsumer, { children: props.children }) }));
+    return (_jsx(Provider, { settings: dynamicSettings(), theme: darkMode ? 'dark' : 'light', children: _jsx(DynamicContextConsumer, { children: props.children }) }));
 }
 export function LazyWalletProvider(_a) {
     var children = _a.children;

package/dist/Provider/N1WalletProvider.d.ts

@@ -1,2 +1,2 @@
 import { N1WalletProviderProps } from './types';
-export declare function N1WalletProvider({ children, providedSessionMode, appId, darkMode, onError, }: N1WalletProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function N1WalletProvider({ children, providedSessionMode, appId, darkMode, onError, faucetUrl, nord, }: N1WalletProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/Provider/N1WalletProvider.js

@@ -55,7 +55,10 @@ import React, { Suspense, useCallback, useEffect, useState } from 'react';
 import { N1WalletModal } from '../Modal/N1WalletModal';
 import { WalletError, WalletErrorCode } from '../errors/types';
 import { N1InternalWalletContext, N1WalletContext } from './context';
-import { N1ModalViewMode, N1SessionMode } from './types';
+import { N1ModalViewMode, N1SessionMode, } from './types';
+import { useNordWalletConnect } from '../Modal/NordFlow/hooks/useNordWalletConnect';
+import { useNordInstance } from '../Modal/NordFlow/hooks/useNordInstance';
+import { FlowState } from '../Modal/NordFlow/types';
 var LazyWalletProvider = React.lazy(function () {
     return import('./LazyWalletProvider').then(function (mod) { return ({
         default: mod.LazyWalletProvider,
@@ -83,7 +86,7 @@ var WalletErrorBoundary = /** @class */ (function (_super) {
 }(React.Component));
 export function N1WalletProvider(_a) {
     var _this = this;
-    var children = _a.children, providedSessionMode = _a.providedSessionMode, appId = _a.appId, _b = _a.darkMode, darkMode = _b === void 0 ? true : _b, onError = _a.onError;
+    var children = _a.children, providedSessionMode = _a.providedSessionMode, appId = _a.appId, _b = _a.darkMode, darkMode = _b === void 0 ? true : _b, onError = _a.onError, faucetUrl = _a.faucetUrl, nord = _a.nord;
     var _c = useState(false), isConnected = _c[0], setIsConnected = _c[1];
     var _d = useState(null), ntsInterface = _d[0], setNtsInterface = _d[1];
     var _e = useState(false), showLogin = _e[0], setShowLogin = _e[1];
@@ -93,27 +96,35 @@ export function N1WalletProvider(_a) {
     var _j = useState(''), username = _j[0], setUsername = _j[1];
     var _k = useState(null), signMessageWithSessionKey = _k[0], setSignMessageWithSessionKey = _k[1];
     var _l = useState(null), signMessageWithWalletKey = _l[0], setSignMessageWithWalletKey = _l[1];
-    var _m = useState(false), showSidebar = _m[0], setShowSidebar = _m[1];
-    var _o = useState(false), startClosingLogin = _o[0], setStartClosingLogin = _o[1];
-    var _p = useState(false), loading = _p[0], setLoading = _p[1];
-    var _q = useState(N1ModalViewMode.Connect), viewMode = _q[0], setViewMode = _q[1];
-    // Log initialization only once on mount
-    useEffect(function () {
-        // eslint-disable-next-line no-console
-        console.log('N1WalletProvider initializing');
-    }, []);
+    var _m = useState(null), signTransactionWithWalletKey = _m[0], setSignTransactionWithWalletKey = _m[1];
+    var _o = useState(false), showSidebar = _o[0], setShowSidebar = _o[1];
+    var _p = useState(false), startClosingLogin = _p[0], setStartClosingLogin = _p[1];
+    var _q = useState(false), loading = _q[0], setLoading = _q[1];
+    var _r = useState(N1ModalViewMode.Connect), viewMode = _r[0], setViewMode = _r[1];
+    var _s = useState(null), nordUser = _s[0], setNordUser = _s[1];
     // dynamic
-    var _r = useState(''), address = _r[0], setAddress = _r[1];
-    var _s = useState(''), chain = _s[0], setChain = _s[1];
-    var _t = useState(null), dynamicSdkHasLoaded = _t[0], setDynamicSdkHasLoaded = _t[1];
-    var _u = useState(null), dynamicHandleLogOut = _u[0], setDynamicHandleLogOut = _u[1];
-    var _v = useState(null), sessionMode = _v[0], setSessionMode = _v[1];
-    var _w = useState(null), dynamicWallet = _w[0], setDynamicWallet = _w[1];
-    var _x = useState(null), showDynamicWidget = _x[0], setShowDynamicWidget = _x[1];
+    var _t = useState(''), address = _t[0], setAddress = _t[1];
+    var _u = useState([]), balances = _u[0], setBalances = _u[1];
+    var _v = useState(''), chain = _v[0], setChain = _v[1];
+    var _w = useState(null), dynamicSdkHasLoaded = _w[0], setDynamicSdkHasLoaded = _w[1];
+    var _x = useState(null), dynamicHandleLogOut = _x[0], setDynamicHandleLogOut = _x[1];
+    var _y = useState(null), sessionMode = _y[0], setSessionMode = _y[1];
+    var _z = useState(null), dynamicWallet = _z[0], setDynamicWallet = _z[1];
+    var _0 = useState(null), showDynamicWidget = _0[0], setShowDynamicWidget = _0[1];
+    // Create a separate component for Nord hooks to avoid conditional hook calls
+    var NordHooks = function () {
+        useNordInstance();
+        useNordWalletConnect(FlowState.IDLE, function (newState) { return console.log('State transition:', newState); }, {}, // context
+        function (updates) { return console.log('Context updates:', updates); }, providedSessionMode);
+        return null;
+    };
     // Combine SDK loading and initialization into a single effect
     useEffect(function () {
         var mounted = true;
-        var loadNTSSDK = function () { return __awaiter(_this, void 0, void 0, function () {
+        // Set the session mode from props
+        setSessionMode(providedSessionMode);
+        // Load the appropriate SDK
+        var loadSDK = function () { return __awaiter(_this, void 0, void 0, function () {
             var NTSInterface, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -121,8 +132,6 @@ export function N1WalletProvider(_a) {
                         // eslint-disable-next-line no-console
                         console.log('Loading NTS SDK');
                         if (providedSessionMode === N1SessionMode.Nord) {
-                            // eslint-disable-next-line no-console
-                            console.log('Nord mode, skipping NTS SDK load');
                             return [2 /*return*/];
                         }
                         _a.label = 1;
@@ -148,11 +157,11 @@ export function N1WalletProvider(_a) {
                 }
             });
         }); };
-        loadNTSSDK();
+        loadSDK();
         return function () {
             mounted = false;
         };
-    }, [providedSessionMode]);
+    }, [providedSessionMode, onError]);
     // Separate effect to handle loading state based on both SDKs
     useEffect(function () {
         var isDynamicReady = dynamicSdkHasLoaded || providedSessionMode === N1SessionMode.Nord;
@@ -169,24 +178,31 @@ export function N1WalletProvider(_a) {
             return [2 /*return*/];
         });
     }); };
-    return (_jsx(WalletErrorBoundary, { onError: handleError, children: _jsx(N1WalletContext.Provider, { value: {
-                address: address,
-                appId: appId,
-                chain: chain,
-                isConnected: isConnected,
-                ntsInterface: ntsInterface,
-                sessionMode: sessionMode,
-                sessionPubKey: sessionPubKey,
-                setShowLogin: setShowLogin,
-                showLogin: showLogin,
-                signMessageWithSessionKey: signMessageWithSessionKey,
-                signMessageWithWalletKey: signMessageWithWalletKey,
-                userChain: userChain,
-                username: username,
-                viewMode: viewMode,
-                walletPubKey: walletPubKey,
-                throwTestError: throwTestError,
-            }, children: _jsxs(N1InternalWalletContext.Provider, { value: {
+    // Create the wallet context value
+    var walletContextValue = {
+        address: address,
+        appId: appId,
+        balances: balances,
+        chain: chain,
+        isConnected: isConnected,
+        ntsInterface: ntsInterface,
+        sessionMode: sessionMode,
+        sessionPubKey: sessionPubKey,
+        setShowLogin: setShowLogin,
+        showLogin: showLogin,
+        signMessageWithSessionKey: signMessageWithSessionKey,
+        signMessageWithWalletKey: signMessageWithWalletKey,
+        signTransactionWithWalletKey: signTransactionWithWalletKey,
+        userChain: userChain,
+        username: username,
+        viewMode: viewMode,
+        walletPubKey: walletPubKey,
+        throwTestError: throwTestError,
+        faucetUrl: faucetUrl,
+        nord: nord,
+        nordUser: nordUser,
+    };
+    return (_jsx(WalletErrorBoundary, { onError: handleError, children: _jsx(N1WalletContext.Provider, { value: walletContextValue, children: _jsxs(N1InternalWalletContext.Provider, { value: {
                     dynamicHandleLogOut: dynamicHandleLogOut,
                     dynamicWallet: dynamicWallet,
                     loading: loading,
@@ -194,6 +210,7 @@ export function N1WalletProvider(_a) {
                     handleError: handleError,
                     setDynamicSdkHasLoaded: setDynamicSdkHasLoaded,
                     setAddress: setAddress,
+                    setBalances: setBalances,
                     setChain: setChain,
                     setDynamicHandleLogOut: setDynamicHandleLogOut,
                     setDynamicWallet: setDynamicWallet,
@@ -205,6 +222,7 @@ export function N1WalletProvider(_a) {
                     setShowSidebar: setShowSidebar,
                     setSignMessageWithSessionKey: setSignMessageWithSessionKey,
                     setSignMessageWithWalletKey: setSignMessageWithWalletKey,
+                    setSignTransactionWithWalletKey: setSignTransactionWithWalletKey,
                     setStartClosingLogin: setStartClosingLogin,
                     setUsername: setUsername,
                     setUserChain: setUserChain,
@@ -215,5 +233,8 @@ export function N1WalletProvider(_a) {
                     showDynamicWidget: showDynamicWidget,
                     setShowDynamicWidget: setShowDynamicWidget,
                     darkMode: darkMode,
-                }, children: [children, _jsx(N1WalletModal, {}), _jsx(Suspense, { fallback: null, children: _jsx(LazyWalletProvider, {}) })] }) }) }));
+                    sessionMode: sessionMode,
+                    faucetUrl: faucetUrl,
+                    setNordUser: setNordUser,
+                }, children: [children, providedSessionMode === N1SessionMode.Nord && _jsx(NordHooks, {}), _jsx(N1WalletModal, {}), _jsx(Suspense, { fallback: null, children: _jsx(LazyWalletProvider, {}) })] }) }) }));
 }

package/dist/Provider/types.d.ts

@@ -1,4 +1,5 @@
 import type { WalletError } from '../errors/types';
+import { Nord } from '@n1xyz/nord-ts';
 export declare enum N1ModalViewMode {
     Connect = 0,
     CreateSession = 1,
@@ -17,10 +18,69 @@ export interface N1WalletProviderProps {
     appId: string;
     darkMode?: boolean;
     onError?: (error: WalletError) => void;
+    faucetUrl?: string;
+    nord?: Nord;
+}
+export interface Balance {
+    mint: string;
+    balance: bigint;
+    appId: string;
+    appType: string;
+}
+export interface N1NordFunctions {
+    getMarkets: () => Promise<any[]>;
+    getOrderbook: (symbol: string) => Promise<any>;
+    getTrades: (params: any) => Promise<any>;
+    getMarketsStats: () => Promise<any>;
+    placeOrder: (params: {
+        sessionId: bigint | string;
+        marketId: number;
+        side: 'BUY' | 'SELL';
+        fillMode: 'GTC' | 'IOC' | 'FOK' | 'POST_ONLY';
+        isReduceOnly: boolean;
+        size?: number | string;
+        price?: number | string;
+        quoteSize?: number | string;
+        clientOrderId?: bigint | string;
+    }) => Promise<bigint | undefined>;
+    cancelOrder: (params: {
+        sessionId: bigint | string;
+        orderId: bigint | string;
+    }) => Promise<bigint>;
+    createSession: (params: {
+        userPubkey: Uint8Array;
+        sessionPubkey: Uint8Array;
+        expiryTimestamp?: bigint;
+    }) => Promise<bigint>;
+    revokeSession: (params: {
+        sessionId: bigint | string;
+    }) => Promise<void>;
+    withdraw: (params: {
+        sessionId: bigint | string;
+        tokenId: number;
+        amount: number;
+    }) => Promise<void>;
+    transfer: (params: {
+        sessionId: bigint | string;
+        fromAccountId: number;
+        toAccountId?: number;
+        tokenId: number;
+        tokenDecimals: number;
+        amount: number | string;
+    }) => Promise<number | undefined>;
+    getTimestamp: () => Promise<bigint>;
+    getActionNonce: () => Promise<number>;
+    queryBlock: (query: any) => Promise<any>;
+    queryLastNBlocks: () => Promise<any>;
+    queryRecentBlocks: (last_n: number) => Promise<any>;
+    queryAction: (query: any) => Promise<any>;
+    queryRecentActions: (last_n: number) => Promise<any>;
+    getActions: (fromActionId: number, toActionId: number) => Promise<any>;
 }
 export interface N1WalletState {
     address: string;
     appId: string | null;
+    balances: Balance[];
     chain: string;
     isConnected: boolean;
     ntsInterface: any;
@@ -30,11 +90,15 @@ export interface N1WalletState {
     showLogin: boolean;
     signMessageWithSessionKey: ((message: any) => Promise<any>) | null;
     signMessageWithWalletKey: ((message: any) => Promise<any>) | null;
+    signTransactionWithWalletKey: ((transaction: any) => Promise<any>) | null;
     userChain: string | null;
     username: string;
     viewMode: N1ModalViewMode;
     walletPubKey: Uint8Array | null;
     throwTestError: () => Promise<void>;
+    nord?: Nord;
+    faucetUrl?: string;
+    nordUser?: any;
 }
 export interface N1InternalWalletState {
     dynamicHandleLogOut: any;
@@ -44,6 +108,7 @@ export interface N1InternalWalletState {
     handleError: (error: WalletError) => void;
     setDynamicSdkHasLoaded: (loaded: any) => void;
     setAddress: (address: string) => void;
+    setBalances: (balances: Balance[]) => void;
     setChain: (chain: string) => void;
     setDynamicHandleLogOut: (handler: any) => void;
     setDynamicWallet: (wallet: any) => void;
@@ -55,14 +120,18 @@ export interface N1InternalWalletState {
     setShowSidebar: (show: boolean) => void;
     setSignMessageWithSessionKey: React.Dispatch<React.SetStateAction<((message: any) => Promise<any>) | null>>;
     setSignMessageWithWalletKey: React.Dispatch<React.SetStateAction<((message: any) => Promise<any>) | null>>;
+    setSignTransactionWithWalletKey: React.Dispatch<React.SetStateAction<((transaction: any) => Promise<any>) | null>>;
     setStartClosingLogin: (closing: boolean) => void;
     setUsername: (username: string) => void;
     setUserChain: (chain: string) => void;
     setViewMode: (mode: N1ModalViewMode) => void;
     setWalletPubKey: (key: Uint8Array) => void;
+    setNordUser: (user: any) => void;
     showSidebar: boolean;
     startClosingLogin: boolean;
     showDynamicWidget: any;
     setShowDynamicWidget: (show: any) => void;
     darkMode: boolean;
+    sessionMode: N1SessionMode | null;
+    faucetUrl?: string;
 }

package/dist/WalletConnectionFlow/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 {};

package/dist/WalletConnectionFlow/WalletConnectionFlow.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import Logo from '../components/Logo';
+import { CHAINS } from './constants';
+import { useDepositFlow, useFlowState, useInterruptHandler, useNordSession, useWalletConnect } from './hooks';
+import { AmountInputScreen, AuthLoadingScreen, ChainSelectionScreen, ConnectWalletScreen, DepositProgressScreen, DepositSuccessScreen, ErrorScreen, EvmWalletAuthScreen, FinalSuccessScreen, NordAuthScreen } from './screens';
+import { FlowState } from './types';
+var ConfirmationDialog = function (_a) {
+    var onConfirm = _a.onConfirm, onCancel = _a.onCancel;
+    return (_jsx("div", { className: "fixed inset-0 bg-gray-50 dark:bg-gray-950 flex items-center justify-center z-50 font-era overflow-auto", 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] animate-fade-in", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx("div", { className: "flex items-center justify-between", children: _jsx("div", { className: "flex items-center gap-3", children: _jsx("h2", { className: "text-xl text-gray-700 dark:text-gray-300", children: "Confirm Close" }) }) }) }), _jsxs("div", { className: "p-6 overflow-hidden relative", children: [_jsx("p", { className: "text-gray-700 dark:text-gray-300 text-center mb-6", children: "Are you sure you want to close? This operation is in progress." }), _jsxs("div", { className: "flex flex-col space-y-3", children: [_jsx("button", { onClick: onConfirm, className: "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 ease-[cubic-bezier(0.16,1,0.3,1)]\n            cursor-pointer border-gray-200 dark:border-neutral-800 hover:border-gray-400 dark:hover:border-white/60\n            text-gray-800 dark:text-gray-200", children: "Yes, close" }), _jsx("button", { onClick: onCancel, className: "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 ease-[cubic-bezier(0.16,1,0.3,1)]\n            cursor-pointer border-gray-200 dark:border-neutral-800 hover:border-gray-400 dark:hover:border-white/60\n            text-gray-800 dark:text-gray-200", children: "No, continue" })] })] })] }) }));
+};
+/**
+ * Main component for the wallet connection flow
+ */
+export var WalletConnectionFlow = function (_a) {
+    var onClose = _a.onClose;
+    // 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 _b = useFlowState({
+        autoRecover: false, // We'll handle recovery with a prompt
+        onStateChange: handleStateChange,
+        onError: handleError,
+    }), state = _b.state, context = _b.context, transition = _b.transition, updateContext = _b.updateContext, recover = _b.recover, recordInterruption = _b.recordInterruption, handleFlowError = _b.handleError, isRecoveryAvailable = _b.isRecoveryAvailable;
+    // Initialize wallet connection
+    var _c = useWalletConnect({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+    }), isConnecting = _c.isConnecting, connectWallet = _c.connectWallet;
+    // Initialize Nord session
+    var hasNordAccount = useNordSession({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+    }).hasNordAccount;
+    // Initialize deposit flow
+    var _d = useDepositFlow({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+        updateContext: updateContext,
+    }), selectedChain = _d.selectedChain, amount = _d.amount, isDepositing = _d.isDepositing, transactionId = _d.transactionId, selectChain = _d.selectChain, updateAmount = _d.updateAmount, startDeposit = _d.startDeposit, goBackToChainSelection = _d.goBackToChainSelection;
+    // Initialize interrupt handler
+    var _e = useInterruptHandler({
+        state: state,
+        recordInterruption: recordInterruption,
+        onClose: onClose,
+    }), isClosing = _e.isClosing, showConfirmation = _e.showConfirmation, handleCloseRequest = _e.handleCloseRequest, confirmClose = _e.confirmClose, cancelClose = _e.cancelClose;
+    // Check for recovery on mount
+    var _f = useState(false), hasAttemptedRecovery = _f[0], setHasAttemptedRecovery = _f[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 _g = useState({
+        visible: true,
+        title: 'Processing Deposit',
+        subtitle: 'Please wait while we process your deposit',
+        isTyping: false
+    }), depositMessage = _g[0], setDepositMessage = _g[1];
+    // Mock table values for success screen
+    var tableValues = {
+        tx: { text: transactionId || '0x123...456', visible: true, typing: false },
+        from: { text: 'Your Wallet', visible: true, typing: false },
+        to: { text: 'Nord Account', visible: true, typing: false },
+        network: { text: 'Ethereum', visible: true, typing: false },
+        status: { text: 'Completed', visible: true, typing: false }
+    };
+    var handleFinish = function () {
+        if (onClose) {
+            onClose();
+        }
+    };
+    // Render confirmation dialog if needed
+    var renderConfirmationDialog = function () {
+        if (!showConfirmation)
+            return null;
+        return (_jsx(ConfirmationDialog, { onConfirm: confirmClose, onCancel: cancelClose }));
+    };
+    // Render current screen based on state
+    var renderScreen = function () {
+        switch (state) {
+            case FlowState.IDLE:
+            case FlowState.CONNECTING_WALLET:
+                return (_jsx(ConnectWalletScreen, { onConnectWallet: connectWallet, isConnecting: isConnecting }));
+            case FlowState.ETH_TO_SOL_AUTH:
+                return (_jsx(EvmWalletAuthScreen, { onAuth: function () { return transition(FlowState.CHAIN_SELECTION); } }));
+            case FlowState.CHAIN_SELECTION:
+                return (_jsx(ChainSelectionScreen, { chains: CHAINS, onChainSelect: selectChain }));
+            case FlowState.AMOUNT_INPUT:
+                return (_jsx(AmountInputScreen, { amount: amount, onAmountChange: updateAmount, onContinue: startDeposit, balance: 100 }));
+            case FlowState.DEPOSIT_PROGRESS:
+                return (_jsx(DepositProgressScreen, { message: depositMessage, percentComplete: 75 }));
+            case FlowState.DEPOSIT_SUCCESS:
+                return (_jsx(DepositSuccessScreen, { amount: amount, tableValues: tableValues, onContinue: function () { return transition(FlowState.NORD_AUTH); } }));
+            case FlowState.NORD_AUTH:
+                return (_jsx(NordAuthScreen, { hasNordAccount: hasNordAccount, onCreateAccount: function () { return transition(FlowState.AUTH_LOADING, { hasNordAccount: false }); }, onLogin: function () { return transition(FlowState.AUTH_LOADING, { hasNordAccount: true }); } }));
+            case FlowState.AUTH_LOADING:
+                return (_jsx(AuthLoadingScreen, { isCreatingAccount: !hasNordAccount, onAuthComplete: function (success) {
+                        if (success) {
+                            console.log('Auth complete callback in WalletConnectionFlow, transitioning to FINAL_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(FinalSuccessScreen, { onDone: handleFinish }));
+            case FlowState.ERROR:
+                return (_jsx(ErrorScreen, { error: context.error, onRetry: function () {
+                        // Logic to go back to appropriate state based on error
+                        transition(FlowState.CONNECTING_WALLET);
+                    }, onCancel: handleFinish }));
+            default:
+                return _jsx("div", { 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" }) }) })] }) }), _jsxs("div", { className: "wallet-connection-flow-content p-6 overflow-hidden", children: [renderConfirmationDialog(), renderScreen()] })] }) }));
+};

package/dist/WalletConnectionFlow/components/AnimatedButton.d.ts

@@ -0,0 +1,14 @@
+import { ButtonKey, ButtonStates } from '../types';
+interface AnimatedButtonProps {
+    onClick: () => void;
+    text: string;
+    isTyping: boolean;
+    disabled?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const AnimatedButton: ({ onClick, text, isTyping, disabled, onMouseEnter, onMouseLeave, }: AnimatedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useButtonTyping: (buttonStates: ButtonStates, setButtonStates: React.Dispatch<React.SetStateAction<ButtonStates>>, buttonConfigs: Record<ButtonKey, {
+    text: string;
+}>) => void;
+export {};