@n1xyz/wallet-widget 0.0.1

package/dist/Modal/BackButton.d.ts

@@ -0,0 +1,3 @@
+export declare function BackButton(props: {
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Modal/BackButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useN1WalletInternalContext } from '../Provider/hooks';
+import { N1ModalViewMode } from '../Provider/types';
+export function BackButton(props) {
+    var _a = useN1WalletInternalContext(), setViewMode = _a.setViewMode, dynamicHandleLogOut = _a.dynamicHandleLogOut;
+    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" }));
+}

package/dist/Modal/ConnectView.d.ts

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

package/dist/Modal/ConnectView.js

@@ -0,0 +1,71 @@
+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 { useN1WalletInternalContext } from '../Provider/hooks';
+import { ModalHeader } from './ModalHeader';
+import { WalletError, WalletErrorCode } from '../errors/types';
+import { IoMdWallet } from 'react-icons/io';
+import clsx from 'clsx';
+export function ConnectView() {
+    var _this = this;
+    var _a = useN1WalletInternalContext(), showDynamicWidget = _a.showDynamicWidget, handleError = _a.handleError;
+    var handleConnect = function () { return __awaiter(_this, void 0, void 0, function () {
+        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);
+            }
+            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" })] }));
+}

package/dist/Modal/CreateSessionView.d.ts

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

package/dist/Modal/CreateSessionView.js

@@ -0,0 +1,236 @@
+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 { useEffect, useState } from 'react';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../Provider/hooks';
+import { ModalHeader } from './ModalHeader';
+import { N1ModalViewMode } from '../Provider/types';
+import { BackButton } from './BackButton';
+import { createWebSession, generateSessionKeyPair, getUser, storeSessionKeysInLocalStorage, } from '../Logic/utils';
+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;
+    // Initialize NTS SDK and generate key pair
+    useEffect(function () {
+        var loadNTSSDK = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a, Transaction, AdminAction, CoreApps, newKeyPair, error_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, import('@n1xyz/nts-sdk')];
+                    case 1:
+                        _a = _b.sent(), Transaction = _a.Transaction, AdminAction = _a.AdminAction, CoreApps = _a.CoreApps;
+                        setNTSComponents({ Transaction: Transaction, AdminAction: AdminAction, CoreApps: CoreApps });
+                        return [4 /*yield*/, generateSessionKeyPair()];
+                    case 2:
+                        newKeyPair = _b.sent();
+                        setKeyPair(newKeyPair);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _b.sent();
+                        handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Failed to initialize NTS SDK', { originalError: error_1 }));
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadNTSSDK();
+    }, [handleError]);
+    var signWithWallet = function (msg) { return __awaiter(_this, void 0, void 0, function () {
+        var signature, binaryString, signatureUint8Array, i, sig, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log('zooooooooooooooo', msg);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 5, , 6]);
+                    if (!dynamicWallet) {
+                        throw new WalletError(WalletErrorCode.WALLET_NOT_FOUND, 'Wallet not found for signing');
+                    }
+                    if (!(dynamicWallet.chain === 'SOL')) return [3 /*break*/, 3];
+                    return [4 /*yield*/, dynamicWallet.signMessage(msg)];
+                case 2:
+                    signature = _a.sent();
+                    binaryString = atob(signature);
+                    signatureUint8Array = new Uint8Array(binaryString.length);
+                    for (i = 0; i < binaryString.length; i++) {
+                        signatureUint8Array[i] = binaryString.charCodeAt(i);
+                    }
+                    return [2 /*return*/, signatureUint8Array];
+                case 3: return [4 /*yield*/, dynamicWallet.signMessage(msg)];
+                case 4:
+                    sig = (_a.sent());
+                    logger.debug('Wallet signature received', { signature: sig });
+                    return [2 /*return*/, Uint8Array.from(Buffer.from(sig.slice(2), 'hex'))];
+                case 5:
+                    error_2 = _a.sent();
+                    throw new WalletError(WalletErrorCode.USER_REJECTED, 'Failed to sign message with wallet', { originalError: error_2 });
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleSign = function () { return __awaiter(_this, void 0, void 0, function () {
+        var sessionKeyHex, transactionData, tx, txRes, _1, signFn_1, user, error_3;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    logger.debug('handleSign');
+                    if (!NTSComponents || !keyPair) {
+                        logger.warn('Required components not initialized');
+                        return [2 /*return*/];
+                    }
+                    setViewMode(N1ModalViewMode.Signing);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 9, , 10]);
+                    sessionKeyHex = Buffer.from(keyPair.publicKey).toString('hex');
+                    logger.debug('Generated session key', { sessionKey: sessionKeyHex });
+                    transactionData = {
+                        appId: NTSComponents.CoreApps.Admin,
+                        action: NTSComponents.AdminAction.addSessionKey,
+                        framework: 'ts',
+                        data: [
+                            {
+                                sessionKey: sessionKeyHex,
+                                appId: 'hub',
+                            },
+                        ],
+                    };
+                    setSignMessageWithWalletKey(signWithWallet);
+                    tx = new NTSComponents.Transaction(transactionData, walletPubKey);
+                    return [4 /*yield*/, tx.signWithWalletFunction(signWithWallet)];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 5, , 6]);
+                    return [4 /*yield*/, ntsInterface.sendTransaction(tx, tx.signature, walletPubKey)];
+                case 4:
+                    txRes = _a.sent();
+                    if (txRes.success) {
+                        logger.debug('txRes', txRes);
+                    }
+                    else {
+                        logger.debug('txRes', txRes);
+                        throw new WalletError(WalletErrorCode.TRANSACTION_FAILED, 'Transaction failed');
+                    }
+                    return [3 /*break*/, 6];
+                case 5:
+                    _1 = _a.sent();
+                    throw new WalletError(WalletErrorCode.TRANSACTION_FAILED, 'Transaction did not succeed');
+                case 6:
+                    signFn_1 = function (message) { return __awaiter(_this, void 0, void 0, function () {
+                        var _2;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    _a.trys.push([0, 2, , 3]);
+                                    return [4 /*yield*/, signEd25519(message, keyPair.privateKey)];
+                                case 1: return [2 /*return*/, _a.sent()];
+                                case 2:
+                                    _2 = _a.sent();
+                                    console.log('error', _2);
+                                    throw _2;
+                                case 3: return [2 /*return*/];
+                            }
+                        });
+                    }); };
+                    // Store session keys
+                    logger.debug('Storing session keys');
+                    storeSessionKeysInLocalStorage({
+                        privKey: keyPair.privateKey,
+                        walletPublicKey: address,
+                        chainName: dynamicWallet.chain,
+                    });
+                    setSessionPubKey(keyPair.publicKey);
+                    setSignMessageWithSessionKey(function () { return signFn_1; });
+                    // Initialize web session with Argus who verifies that the session is
+                    // registered with Core, and if so, grants you access to its user metadata db
+                    return [4 /*yield*/, createWebSession(signFn_1, keyPair.publicKey, walletPubKey)];
+                case 7:
+                    // Initialize web session with Argus who verifies that the session is
+                    // registered with Core, and if so, grants you access to its user metadata db
+                    _a.sent();
+                    return [4 /*yield*/, getUser()];
+                case 8:
+                    user = _a.sent();
+                    if (user === null || user === void 0 ? void 0 : user.name) {
+                        logger.info('Existing user found, completing login');
+                        setUsername(user.name);
+                        localStorage.setItem("n1_".concat(address, "_username"), user.name);
+                        setStartClosingLogin(true);
+                        setIsConnected(true);
+                    }
+                    else {
+                        logger.info('No user found, transitioning to user creation');
+                        setViewMode(N1ModalViewMode.CreatingUser);
+                    }
+                    return [3 /*break*/, 10];
+                case 9:
+                    error_3 = _a.sent();
+                    logger.error('Session creation failed:', error_3);
+                    if (error_3.name === 'WalletError') {
+                        handleError(error_3);
+                    }
+                    else {
+                        handleError(new WalletError(WalletErrorCode.CONNECTION_FAILED, 'Failed to create session', { originalError: JSON.stringify(error_3) }));
+                    }
+                    setViewMode(N1ModalViewMode.CreateSession);
+                    return [3 /*break*/, 10];
+                case 10: return [2 /*return*/];
+            }
+        });
+    }); };
+    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 () {
+                                logger.debug('BackButton clicked');
+                                // Log out wallet
+                                setDynamicWallet(null);
+                                setAddress('');
+                                dynamicHandleLogOut();
+                                // Set view mode to connect
+                                setViewMode(N1ModalViewMode.Connect);
+                            } })] }) })] }));
+}

package/dist/Modal/CreateUserView.d.ts

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

package/dist/Modal/CreateUserView.js

@@ -0,0 +1,160 @@
+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 './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];
+    // TODO: not sure what this is for??? so i commented it out for now
+    // useEffect(() => {
+    //   const initializeSession = async () => {
+    //     try {
+    //       logger.debug("Initializing session");
+    //       logger.debug("signMessageWithSessionKey", signMessageWithSessionKey);
+    //       logger.debug("sessionPubKey", sessionPubKey);
+    //       logger.debug("walletPubKey", walletPubKey);
+    //       // Silently return if session keys are not available yet
+    //       if (!signMessageWithSessionKey || !sessionPubKey || !walletPubKey) {
+    //         return;
+    //       }
+    //       await createWebSession(
+    //         signMessageWithSessionKey,
+    //         sessionPubKey,
+    //         walletPubKey
+    //       );
+    //       const user = await getUser();
+    //       if (user) {
+    //         const usernameDb = user.name;
+    //         setIsConnected(true);
+    //         setUsername(usernameDb);
+    //         localStorage.setItem("n1_" + address + "_username", usernameDb);
+    //       }
+    //     } catch (error) {
+    //       if (error instanceof WalletError) {
+    //         handleError(error);
+    //       } else {
+    //         handleError(
+    //           new WalletError(
+    //             WalletErrorCode.UNKNOWN,
+    //             "Failed to initialize user session",
+    //             { originalError: error }
+    //           )
+    //         );
+    //       }
+    //     }
+    //   };
+    //   initializeSession();
+    // }, [
+    //   signMessageWithSessionKey,
+    //   sessionPubKey,
+    //   walletPubKey,
+    //   address,
+    //   setIsConnected,
+    //   setUsername,
+    //   setViewMode,
+    //   handleError,
+    // ]);
+    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]);
+                        // TODO: why is this here?
+                        // await createWebSession(
+                        //   signMessageWithSessionKey,
+                        //   sessionPubKey,
+                        //   walletPubKey
+                        // );
+                        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-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" }) })] })] }) })] }));
+}

package/dist/Modal/ModalHeader.d.ts

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

package/dist/Modal/ModalHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useN1WalletInternalContext } from '../Provider/hooks';
+export function ModalHeader() {
+    var setStartClosingLogin = useN1WalletInternalContext().setStartClosingLogin;
+    var close = function () {
+        setStartClosingLogin(true);
+    };
+    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" }) }) })] }));
+}

package/dist/Modal/N1WalletModal.d.ts

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