@n1xyz/wallet-widget 0.0.1 → 0.0.4

package/LICENSE

@@ -0,0 +1,44 @@
+SOFTWARE LICENSE AGREEMENT
+
+Copyright (c) 2024 N1 Labs. All Rights Reserved.
+
+This software and associated documentation files (the "Software") are protected by copyright laws 
+and international treaties. The following terms govern your use of the Software:
+
+1. PERMISSIONS
+   You are permitted to:
+   a) Install and use the Software through official npm packages
+   b) Use the Software as part of your applications
+   c) Create and distribute applications that use the Software as a dependency
+
+2. RESTRICTIONS
+   You may not:
+   a) Modify, adapt, or create derivative works of the Software
+   b) Reverse engineer, decompile, or disassemble the Software
+   c) Remove or modify any copyright or proprietary notices
+   d) Redistribute the Software except through official npm package dependencies
+   e) Fork or create alternate distributions of the Software
+
+3. OWNERSHIP
+   The Software is owned by N1 Labs and is protected by copyright laws and international treaty 
+   provisions. N1 Labs retains all rights not expressly granted to you in this Agreement.
+
+4. DISTRIBUTION
+   The Software may only be distributed through the official npm registry as a package dependency.
+   You may list this package as a dependency in your package.json, but may not include its source
+   code in your projects.
+
+5. NO WARRANTIES
+   The Software is provided "AS IS" without warranty of any kind. N1 Labs disclaims all 
+   warranties, expressed or implied, including but not limited to the implied warranties 
+   of merchantability and fitness for a particular purpose.
+
+6. LIMITATION OF LIABILITY
+   In no event shall N1 Labs be liable for any damages whatsoever arising out of the use 
+   of or inability to use the Software.
+
+7. TERMINATION
+   This license will terminate automatically if you fail to comply with any of the terms 
+   and conditions of this Agreement. Upon termination, you must cease all use of the Software.
+
+For licensing inquiries, please contact: legal@n1.xyz 

package/README.md

@@ -0,0 +1,45 @@
+# @n1xyz/wallet-widget
+
+A React wallet widget component for N1 applications that provides a seamless integration for wallet connections and management.
+
+## Installation
+
+```bash
+npm install @n1xyz/wallet-widget
+# or
+yarn add @n1xyz/wallet-widget
+# or
+pnpm add @n1xyz/wallet-widget
+```
+
+## Usage
+
+```tsx
+import { WalletWidget } from '@n1xyz/wallet-widget';
+import '@n1xyz/wallet-widget/dist/main.css';
+
+function App() {
+  return (
+    <div>
+      <WalletWidget />
+    </div>
+  );
+}
+```
+
+## Features
+
+- Seamless wallet connection
+- Support for multiple wallet providers
+- Built-in styling with Tailwind CSS
+- TypeScript support
+- Customizable appearance
+
+## Requirements
+
+- React 18 or higher
+- React DOM 18 or higher
+
+## License
+
+See [LICENSE](./LICENSE) file for details. 

package/dist/Logic/utils.d.ts

@@ -18,3 +18,4 @@ export declare function hexToUint8Array(hex: string): Uint8Array<ArrayBuffer>;
 export declare function createWebSession(signMessageWithSessionKey: any, sessionPubKey: any, walletPubKey: any): Promise<void>;
 export declare function createUser(username: any): Promise<void>;
 export declare function getUser(): Promise<any>;
+export declare function getUserBalances(address: string): Promise<any>;

package/dist/Logic/utils.js

@@ -115,6 +115,9 @@ export function createWebSession(signMessageWithSessionKey, sessionPubKey, walle
                     return [4 /*yield*/, signMessageWithSessionKey(msg)];
                 case 1:
                     signature = _c.sent();
+                    if (process.env.SKIP_ARGUS) {
+                        return [2 /*return*/];
+                    }
                     return [4 /*yield*/, fetch("".concat(process.env.ARGUS_URL, "/api/auth/login"), {
                             method: 'POST',
                             headers: {
@@ -170,7 +173,12 @@ export function getUser() {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _a.trys.push([0, 5, , 6]);
+                    if (process.env.SKIP_ARGUS) {
+                        return [2 /*return*/, { name: 'test' }];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, , 7]);
                     return [4 /*yield*/, fetch("".concat(process.env.ARGUS_URL, "/api/db/getUser"), {
                             method: 'GET',
                             headers: {
@@ -178,21 +186,51 @@ export function getUser() {
                             },
                             credentials: 'include', // Include cookies in requests
                         })];
-                case 1:
+                case 2:
                     response = _a.sent();
-                    if (!(response.status === 200)) return [3 /*break*/, 3];
+                    if (!(response.status === 200)) return [3 /*break*/, 4];
                     return [4 /*yield*/, response.json()];
-                case 2: return [2 /*return*/, _a.sent()];
-                case 3:
+                case 3: return [2 /*return*/, _a.sent()];
+                case 4:
                     if (response.status === 404) {
                         return [2 /*return*/, null];
                     }
-                    _a.label = 4;
-                case 4: return [3 /*break*/, 6];
-                case 5:
+                    _a.label = 5;
+                case 5: return [3 /*break*/, 7];
+                case 6:
                     error_1 = _a.sent();
                     throw new Error('failed to get user!');
-                case 6: return [2 /*return*/];
+                case 7: return [2 /*return*/];
+            }
+        });
+    });
+}
+export function getUserBalances(address) {
+    return __awaiter(this, void 0, void 0, function () {
+        var response, data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetch("https://n1ts.n1.xyz/app/data?tag=user_balance_".concat(address.toLowerCase()), {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })];
+                case 1:
+                    response = _a.sent();
+                    if (!(response.status === 200)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _a.sent();
+                    return [2 /*return*/, data.data.map(function (item) {
+                            return {
+                                mint: item.field_id.split('_')[2],
+                                balance: item.value,
+                                appId: item.app_id,
+                                symbol: item.symbol,
+                            };
+                        })];
+                case 3: return [2 /*return*/, null];
             }
         });
     });

package/dist/Modal/BackButton.js

@@ -1,13 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useN1WalletInternalContext } from '../Provider/hooks';
+import { useState } from 'react';
 import { N1ModalViewMode } from '../Provider/types';
+import { ANIMATION_EASE } from '../components/WalletDeposit/constants';
 export function BackButton(props) {
     var _a = useN1WalletInternalContext(), setViewMode = _a.setViewMode, dynamicHandleLogOut = _a.dynamicHandleLogOut;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), isPressed = _c[0], setIsPressed = _c[1];
     function back() {
         // todo: disconnect
         console.log('back');
         dynamicHandleLogOut();
         setViewMode(N1ModalViewMode.Connect);
     }
-    return (_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", onClick: props.onClick || back, children: "Back" }));
+    return (_jsx("button", { onClick: props.onClick || back, 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", 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: "Back" }) }) }) }));
 }

package/dist/Modal/ConnectView.js

@@ -35,37 +35,34 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IoMdWallet } from 'react-icons/io';
 import { useN1WalletInternalContext } from '../Provider/hooks';
 import { ModalHeader } from './ModalHeader';
-import { WalletError, WalletErrorCode } from '../errors/types';
-import { IoMdWallet } from 'react-icons/io';
-import clsx from 'clsx';
+import { ANIMATION_EASE, } from '../components/WalletDeposit/constants';
+import { useState } from 'react';
 export function ConnectView() {
     var _this = this;
     var _a = useN1WalletInternalContext(), showDynamicWidget = _a.showDynamicWidget, handleError = _a.handleError;
+    var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
     var handleConnect = function () { return __awaiter(_this, void 0, void 0, function () {
+        var error_1;
         return __generator(this, function (_a) {
-            try {
-                if (!showDynamicWidget) {
-                    handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Wallet connection not ready', { reason: 'Dynamic SDK not initialized' }));
-                    return [2 /*return*/];
-                }
-                showDynamicWidget(true);
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, showDynamicWidget(true)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _a.sent();
+                    handleError(error_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
             }
-            catch (error) {
-                if (error instanceof WalletError) {
-                    handleError(error);
-                }
-                else {
-                    handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Failed to connect to wallet', { originalError: error }));
-                }
-            }
-            return [2 /*return*/];
         });
     }); };
-    return (_jsxs("div", { className: "rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 dark:text-stone-200", children: [_jsx(ModalHeader, {}), _jsx("div", { className: "my-2", children: _jsxs("div", { className: "space-y-2", children: [_jsxs(AnimatedArrowButton, { onClick: handleConnect, buttonClassName: "w-full py-4 border rounded-[18px] text-white bg-neutral-900 dark:bg-white dark:text-black cursor-pointer hover:opacity-80 transition-all flex items-center justify-center group", children: [_jsx(IoMdWallet, { className: "ml-4 mr-2 w-5 h-5" }), "Continue with Wallet"] }), _jsx("button", { className: "w-full py-4 border rounded-[18px] bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700 cursor-not-allowed", disabled: true, children: "Continue with Google (soon)" }), _jsx("button", { className: "w-full py-4 border rounded-[18px] bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700 cursor-not-allowed", disabled: true, children: "Continue with Email (soon)" })] }) })] }));
-}
-function AnimatedArrowButton(_a) {
-    var children = _a.children, onClick = _a.onClick, buttonClassName = _a.buttonClassName;
-    return (_jsxs("button", { className: clsx(buttonClassName, 'flex flex-row'), onClick: onClick, children: [children, _jsx("span", { className: "ml-4 opacity-0 transform translate-x-[-10px] transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0", children: "\u2192" })] }));
+    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-4", children: [_jsx("button", { onClick: handleConnect, onMouseEnter: function () { return setIsHovered('wallet'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center\n              transition-all duration-300 ".concat(ANIMATION_EASE, "\n              cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60\n            "), style: {
+                                transform: isHovered === 'wallet' ? 'scale(0.99)' : 'scale(1)',
+                            }, children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsxs("div", { className: "flex items-center", children: [_jsx(IoMdWallet, { className: "w-5 h-5 text-gray-500 dark:text-neutral-400 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300" }), _jsx("span", { className: "\n                  ml-2 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: "Continue with Wallet" })] }) }) }), _jsx("button", { disabled: true, onMouseEnter: function () { return setIsHovered('google'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center\n              transition-all duration-300 ".concat(ANIMATION_EASE, "\n              cursor-not-allowed border-gray-200 dark:border-gray-800 opacity-50\n            "), children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center", children: _jsx("span", { className: "text-base font-medium tracking-wide text-gray-500 dark:text-neutral-400", children: "Continue with Google (soon)" }) }) }) }), _jsx("button", { disabled: true, onMouseEnter: function () { return setIsHovered('email'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n              group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center\n              transition-all duration-300 ".concat(ANIMATION_EASE, "\n              cursor-not-allowed border-gray-200 dark:border-gray-800 opacity-50\n            "), children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center", children: _jsx("span", { className: "text-base font-medium tracking-wide text-gray-500 dark:text-neutral-400", children: "Continue with Email (soon)" }) }) }) })] }) })] }));
 }

package/dist/Modal/CreateSessionView.js

@@ -36,20 +36,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { ANIMATION_EASE } from '../components/WalletDeposit/constants';
+import { WalletError, WalletErrorCode } from '../errors/types';
+import { createWebSession, generateSessionKeyPair, getUser, storeSessionKeysInLocalStorage, } from '../Logic/utils';
 import { useN1WalletContext, useN1WalletInternalContext, } from '../Provider/hooks';
-import { ModalHeader } from './ModalHeader';
 import { N1ModalViewMode } from '../Provider/types';
+import { logger } from '../utils/logger';
 import { BackButton } from './BackButton';
-import { createWebSession, generateSessionKeyPair, getUser, storeSessionKeysInLocalStorage, } from '../Logic/utils';
+import { ModalHeader } from './ModalHeader';
 import { signEd25519 } from '@n1xyz/nts-sdk';
-import { logger } from '../utils/logger';
-import { WalletError, WalletErrorCode } from '../errors/types';
 export function CreateSessionView() {
     var _this = this;
-    var _a = useState(null), NTSComponents = _a[0], setNTSComponents = _a[1];
-    var _b = useState(null), keyPair = _b[0], setKeyPair = _b[1];
-    var _c = useN1WalletInternalContext(), setViewMode = _c.setViewMode, setUsername = _c.setUsername, setStartClosingLogin = _c.setStartClosingLogin, setIsConnected = _c.setIsConnected, dynamicWallet = _c.dynamicWallet, handleError = _c.handleError, setSessionPubKey = _c.setSessionPubKey, setSignMessageWithSessionKey = _c.setSignMessageWithSessionKey, dynamicHandleLogOut = _c.dynamicHandleLogOut, setDynamicWallet = _c.setDynamicWallet, setAddress = _c.setAddress, setSignMessageWithWalletKey = _c.setSignMessageWithWalletKey;
-    var _d = useN1WalletContext(), ntsInterface = _d.ntsInterface, walletPubKey = _d.walletPubKey, address = _d.address;
+    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var _b = useState(false), isPressed = _b[0], setIsPressed = _b[1];
+    var _c = useState(null), NTSComponents = _c[0], setNTSComponents = _c[1];
+    var _d = useState(null), keyPair = _d[0], setKeyPair = _d[1];
+    var _e = useN1WalletInternalContext(), setViewMode = _e.setViewMode, setUsername = _e.setUsername, setStartClosingLogin = _e.setStartClosingLogin, setIsConnected = _e.setIsConnected, dynamicWallet = _e.dynamicWallet, handleError = _e.handleError, setSessionPubKey = _e.setSessionPubKey, setSignMessageWithSessionKey = _e.setSignMessageWithSessionKey, dynamicHandleLogOut = _e.dynamicHandleLogOut, setDynamicWallet = _e.setDynamicWallet, setAddress = _e.setAddress, setSignMessageWithWalletKey = _e.setSignMessageWithWalletKey;
+    var _f = useN1WalletContext(), ntsInterface = _f.ntsInterface, walletPubKey = _f.walletPubKey, address = _f.address;
     // Initialize NTS SDK and generate key pair
     useEffect(function () {
         var loadNTSSDK = function () { return __awaiter(_this, void 0, void 0, function () {
@@ -224,13 +227,22 @@ export function CreateSessionView() {
             }
         });
     }); };
-    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", alt: "Session creation illustration" }) }), _jsx("div", { className: "my-2", children: _jsxs("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-black disabled:opacity-50 disabled:cursor-not-allowed", onClick: handleSign, disabled: !NTSComponents || !keyPair, children: "Authenticate" }), _jsx(BackButton, { onClick: function () {
+    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-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-xl font-medium text-gray-900 dark:text-white mb-2", children: "Create Session" }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "Please authenticate to create a new session." })] }), _jsx("button", { onClick: handleSign, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
+                                setIsHovered(false);
+                                setIsPressed(false);
+                            }, onMouseDown: function () { return setIsPressed(true); }, onMouseUp: function () { return setIsPressed(false); }, disabled: !NTSComponents || !keyPair, className: "\n              group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-left\n              transition-all duration-300 ".concat(ANIMATION_EASE, "\n              ").concat(!NTSComponents || !keyPair
+                                ? 'cursor-not-allowed border-gray-200 dark:border-gray-800 opacity-50'
+                                : 'cursor-pointer border-gray-200 dark:border-gray-800 hover:border-gray-400 dark:hover:border-white/60', "\n            "), style: {
+                                transform: isPressed && (!NTSComponents || !keyPair)
+                                    ? 'scale(0.98)'
+                                    : isHovered && (!NTSComponents || !keyPair)
+                                        ? 'scale(0.99)'
+                                        : 'scale(1)',
+                            }, children: _jsx("div", { className: "relative z-[200] pl-4 isolate", children: _jsx("div", { className: "flex items-center justify-start", 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: "Authenticate" }) }) }) }), _jsx(BackButton, { onClick: function () {
                                 logger.debug('BackButton clicked');
-                                // Log out wallet
                                 setDynamicWallet(null);
                                 setAddress('');
                                 dynamicHandleLogOut();
-                                // Set view mode to connect
                                 setViewMode(N1ModalViewMode.Connect);
                             } })] }) })] }));
 }

package/dist/Modal/CreateUserView.js

@@ -156,5 +156,5 @@ export function CreateUserView() {
             });
         });
     }
-    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-red-500' : '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-red-600 bg-red-100 dark:bg-red-900/20 dark:text-red-400 border border-red-400 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" }) })] })] }) })] }));
+    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/ModalHeader.js

@@ -1,9 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useN1WalletInternalContext } from '../Provider/hooks';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../Provider/hooks';
+import { N1ModalViewMode } from '../Provider/types';
+import { X } from 'lucide-react';
+import Logo from '../components/Logo';
+import { ANIMATION_EASE } from '../components/WalletDeposit/constants';
 export function ModalHeader() {
-    var setStartClosingLogin = useN1WalletInternalContext().setStartClosingLogin;
+    var _a = useN1WalletInternalContext(), setViewMode = _a.setViewMode, setStartClosingLogin = _a.setStartClosingLogin, setDynamicWallet = _a.setDynamicWallet, setAddress = _a.setAddress, dynamicHandleLogOut = _a.dynamicHandleLogOut;
+    var viewMode = useN1WalletContext().viewMode;
     var close = function () {
         setStartClosingLogin(true);
+        if (viewMode === N1ModalViewMode.CreateSession) {
+            setDynamicWallet(null);
+            setAddress('');
+            dynamicHandleLogOut();
+            setViewMode(N1ModalViewMode.Connect);
+        }
     };
-    return (_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10", children: _jsxs("svg", { viewBox: "0 0 236 125", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_239_935)", children: [_jsx("path", { d: "M181.737 0H152.268V29.4694H181.737V0Z", fill: "currentColor" }), _jsx("path", { d: "M57.0683 0H29.4694L0 29.4694V124.674H29.4694V29.4694H44.8619L140.066 124.674H181.74L86.5377 29.4694L57.0683 0Z", fill: "currentColor" }), _jsx("path", { d: "M206.531 29.4694V124.674H236.001V0L206.531 29.4694Z", fill: "currentColor" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_239_935", children: _jsx("rect", { width: "236", height: "124.674", fill: "white" }) }) })] }) }), _jsx("h2", { className: "text-lg text-neutral-900 dark:text-stone-200", children: "Sign in with N1" })] }), _jsx("button", { onClick: close, className: "text-neutral-400 hover:text-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 cursor-pointer text-3xl rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 h-10 w-10 p-1 flex items-center justify-center", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 13L13 1M1 1L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] }));
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-6 h-6 text-gray-50", children: _jsx(Logo, { size: 24 }) }), _jsxs("h2", { className: "text-xl text-gray-400 flex items-center gap-2", children: ["Connect", viewMode === N1ModalViewMode.CreateSession && (_jsx("span", { className: "text-gray-700 dark:text-gray-300 font-normal", children: "/ / Session" })), viewMode === N1ModalViewMode.Signing && (_jsx("span", { className: "text-gray-700 dark:text-gray-300 font-normal", children: "/ / Sign" })), viewMode === N1ModalViewMode.CreatingUser && (_jsx("span", { className: "text-gray-700 dark:text-gray-300 font-normal", children: "/ / Create User" })), viewMode === N1ModalViewMode.Success && (_jsx("span", { className: "text-gray-700 dark:text-gray-300 font-normal", children: "/ / Success" }))] })] }), _jsx("button", { onClick: close, className: "\n          text-neutral-400 hover:text-gray-900 dark:hover:text-white \n          transition-colors duration-300 ".concat(ANIMATION_EASE, "\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(X, { size: 20 }) })] }));
 }

package/dist/Modal/N1WalletModal.js

@@ -37,11 +37,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, lazy, Suspense } from 'react';
 import { useN1WalletContext, useN1WalletInternalContext, } from '../Provider/hooks';
-import { createWebSession, getSessionKeysFromLocalStorage, getUser, } from '../Logic/utils';
+import { createWebSession, getSessionKeysFromLocalStorage, getUser, getUserBalances, } from '../Logic/utils';
 import { getEd25519PublicKey, signEd25519, bs58Decode } from '@n1xyz/nts-sdk';
 import { N1ModalViewMode } from '../Provider/types';
 import { logger } from '../utils/logger';
 import { WalletError, WalletErrorCode } from '../errors/types';
+import { ANIMATION_EASE, } from '../components/WalletDeposit/constants';
 // Lazy load components
 var ConnectView = lazy(function () {
     return import('./ConnectView').then(function (mod) { return ({ default: mod.ConnectView }); });
@@ -66,11 +67,11 @@ var N1Sidebar = lazy(function () {
 var NoWhitelistView = lazy(function () {
     return import('./NoWhitelistView').then(function (mod) { return ({ default: mod.NoWhitelistView }); });
 });
-var LoadingFallback = function () { return (_jsx("div", { className: "flex items-center justify-center w-full h-full", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-white" }) })); };
+var LoadingFallback = function () { return (_jsx("div", { className: "flex items-center justify-center w-full h-full", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-200 dark:border-gray-800" }) })); };
 export function N1WalletModal() {
     var _this = this;
     var _a = useN1WalletContext(), showLogin = _a.showLogin, setShowLogin = _a.setShowLogin, viewMode = _a.viewMode;
-    var _b = useN1WalletInternalContext(), setViewMode = _b.setViewMode, setUsername = _b.setUsername, setSessionPubKey = _b.setSessionPubKey, setSignMessageWithSessionKey = _b.setSignMessageWithSessionKey, setIsConnected = _b.setIsConnected, setWalletPubKey = _b.setWalletPubKey, setStartClosingLogin = _b.setStartClosingLogin, startClosingLogin = _b.startClosingLogin, setLoading = _b.setLoading, setAddress = _b.setAddress, dynamicWallet = _b.dynamicWallet, dynamicSdkHasLoaded = _b.dynamicSdkHasLoaded, darkMode = _b.darkMode, handleError = _b.handleError, showSidebar = _b.showSidebar;
+    var _b = useN1WalletInternalContext(), setBalances = _b.setBalances, setViewMode = _b.setViewMode, setUsername = _b.setUsername, setSessionPubKey = _b.setSessionPubKey, setSignMessageWithSessionKey = _b.setSignMessageWithSessionKey, setIsConnected = _b.setIsConnected, setWalletPubKey = _b.setWalletPubKey, setStartClosingLogin = _b.setStartClosingLogin, startClosingLogin = _b.startClosingLogin, setLoading = _b.setLoading, setAddress = _b.setAddress, dynamicWallet = _b.dynamicWallet, dynamicSdkHasLoaded = _b.dynamicSdkHasLoaded, darkMode = _b.darkMode, handleError = _b.handleError, showSidebar = _b.showSidebar;
     var _c = useState(false), showLoginAnimation = _c[0], setShowLoginAnimation = _c[1];
     // Handle loading state
     useEffect(function () {
@@ -82,7 +83,7 @@ export function N1WalletModal() {
     useEffect(function () {
         logger.debug('N1WalletModal attempt to call initializeSession...');
         var initializeSession = function () { return __awaiter(_this, void 0, void 0, function () {
-            var response, whitelistData, walletPubKey, sessionData_1, sessionPubKey, signFn_1, user, storedUsername, username, error_1, error_2;
+            var response, whitelistData, walletPubKey, sessionData_1, sessionPubKey, signFn_1, user, storedUsername, username, balances, error_1, error_2;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -93,7 +94,7 @@ export function N1WalletModal() {
                         }
                         _a.label = 1;
                     case 1:
-                        _a.trys.push([1, 12, , 13]);
+                        _a.trys.push([1, 15, , 16]);
                         logger.debug('Initialize Session...');
                         if (!dynamicWallet) return [3 /*break*/, 4];
                         return [4 /*yield*/, fetch('https://argus-1g4n.onrender.com/api/db/verifyWhitelist', {
@@ -119,7 +120,7 @@ export function N1WalletModal() {
                         console.log('Session Initialization started');
                         _a.label = 5;
                     case 5:
-                        _a.trys.push([5, 9, 10, 11]);
+                        _a.trys.push([5, 12, 13, 14]);
                         walletPubKey = dynamicWallet.chain === 'SOL'
                             ? bs58Decode(dynamicWallet.address)
                             : Uint8Array.from(Buffer.from(dynamicWallet.address.slice(2), 'hex'));
@@ -172,34 +173,42 @@ export function N1WalletModal() {
                     case 8:
                         user = _a.sent();
                         storedUsername = localStorage.getItem("n1_".concat(dynamicWallet.address, "_username"));
-                        if ((user === null || user === void 0 ? void 0 : user.name) || storedUsername) {
-                            logger.info('User found, completing login');
-                            username = (user === null || user === void 0 ? void 0 : user.name) || storedUsername;
-                            setIsConnected(true);
-                            setUsername(username);
-                            localStorage.setItem("n1_".concat(dynamicWallet.address, "_username"), username);
-                            setStartClosingLogin(true);
-                        }
-                        else {
-                            logger.info('No user found, transitioning to CreateUser');
-                            setViewMode(N1ModalViewMode.CreatingUser);
-                        }
-                        return [3 /*break*/, 11];
+                        if (!((user === null || user === void 0 ? void 0 : user.name) || storedUsername)) return [3 /*break*/, 10];
+                        logger.info('User found, completing login');
+                        username = (user === null || user === void 0 ? void 0 : user.name) || storedUsername;
+                        setIsConnected(true);
+                        setUsername(username);
+                        localStorage.setItem("n1_".concat(dynamicWallet.address, "_username"), username);
+                        //fetch balances
+                        logger.info('fetching balances');
+                        return [4 /*yield*/, getUserBalances(dynamicWallet.address)];
                     case 9:
+                        balances = _a.sent();
+                        setBalances(balances);
+                        logger.info('balances fetched', balances);
+                        //finish login
+                        setStartClosingLogin(true);
+                        return [3 /*break*/, 11];
+                    case 10:
+                        logger.info('No user found, transitioning to CreateUser');
+                        setViewMode(N1ModalViewMode.CreatingUser);
+                        _a.label = 11;
+                    case 11: return [3 /*break*/, 14];
+                    case 12:
                         error_1 = _a.sent();
                         logger.error('Session initialization failed:', error_1);
                         handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Failed to initialize session', { originalError: error_1 }));
-                        return [3 /*break*/, 11];
-                    case 10:
+                        return [3 /*break*/, 14];
+                    case 13:
                         logger.groupEnd();
                         return [7 /*endfinally*/];
-                    case 11: return [3 /*break*/, 13];
-                    case 12:
+                    case 14: return [3 /*break*/, 16];
+                    case 15:
                         error_2 = _a.sent();
                         logger.error('Whitelist check failed:', error_2);
                         handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Failed to check whitelist', { originalError: error_2 }));
-                        return [3 /*break*/, 13];
-                    case 13: return [2 /*return*/];
+                        return [3 /*break*/, 16];
+                    case 16: return [2 /*return*/];
                 }
             });
         }); };
@@ -224,9 +233,5 @@ export function N1WalletModal() {
     }, [startClosingLogin, setShowLogin, setStartClosingLogin]);
     if (!showLogin && !showSidebar)
         return null;
-    console.log('SHOW', showSidebar);
-    return (_jsxs("div", { className: darkMode ? 'dark' : '', children: [showLogin && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: _jsx("div", { className: "duration-500 ease-in-out font-monument w-screen h-screen fixed top-0 left-0 flex items-center justify-center z-100 ".concat(showLoginAnimation ? 'opacity-100' : 'opacity-0'), style: {
-                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                        backdropFilter: 'blur(4px)',
-                    }, children: _jsxs(Suspense, { fallback: _jsx(LoadingFallback, {}), children: [viewMode === N1ModalViewMode.Connect && _jsx(ConnectView, {}), viewMode === N1ModalViewMode.CreateSession && (_jsx(CreateSessionView, {})), viewMode === N1ModalViewMode.Signing && _jsx(SigningView, {}), viewMode === N1ModalViewMode.CreatingUser && _jsx(CreateUserView, {}), viewMode === N1ModalViewMode.Success && _jsx(SuccessView, {}), viewMode === N1ModalViewMode.NoWhitelist && _jsx(NoWhitelistView, {})] }) }) })), _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: _jsx(N1Sidebar, {}) })] }));
+    return (_jsxs("div", { className: darkMode ? 'dark' : '', children: [showLogin && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "\n              fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-sm\n              transition-all duration-500 ".concat(ANIMATION_EASE, "\n              ").concat(showLoginAnimation ? 'opacity-100' : 'opacity-0', "\n            "), onClick: function () { return setStartClosingLogin(true); } }), _jsx("div", { className: "\n              relative z-50 transition-all duration-500 ".concat(ANIMATION_EASE, "\n              ").concat(showLoginAnimation ? 'opacity-100 scale-100' : 'opacity-0 scale-95', "\n            "), children: _jsxs(Suspense, { fallback: _jsx(LoadingFallback, {}), children: [viewMode === N1ModalViewMode.Connect && _jsx(ConnectView, {}), viewMode === N1ModalViewMode.CreateSession && (_jsx(CreateSessionView, {})), viewMode === N1ModalViewMode.Signing && _jsx(SigningView, {}), viewMode === N1ModalViewMode.CreatingUser && _jsx(CreateUserView, {}), viewMode === N1ModalViewMode.Success && _jsx(SuccessView, {}), viewMode === N1ModalViewMode.NoWhitelist && _jsx(NoWhitelistView, {})] }) })] })), _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: _jsx(N1Sidebar, {}) })] }));
 }

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 '../components/WalletDeposit/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" }) }) }) })] }) })] }));
 }