@n1xyz/wallet-widget 0.0.30 → 0.0.33-alpha.0

package/README.md

@@ -1,288 +1,197 @@
 # N1 Wallet Widget
 
-A React component library for integrating N1 wallet functionality into your application. This widget provides a seamless way to connect to blockchain wallets, manage sessions, and perform wallet operations.
+`@n1xyz/wallet-widget` is the Nord-only wallet modal, deposit flow, and React context that powers N1 applications. Drop the provider at the root of your app and you get connection UX, session management, deposit orchestration, and signing utilities with no extra wiring.
 
-## Features
+## Highlights
+- Full Nord onboarding flow (connect wallet → choose chain → fund → authenticate) with automatic error handling
+- `N1ConnectButton`, hooks, and context helpers for driving the modal or building custom UI
+- Shadow DOM + embedded Tailwind CSS keep widget styles isolated while still allowing brand overrides
+- Ships with a Next.js playground for iterating locally before consuming the published package
 
-- Wallet connection and authentication
-- Session management (Nord mode)
-- Transaction signing
-- Message signing
-- Balance display
-- Error handling
-- Dark/light mode support
-- Customizable UI
-
-> **Note:** As of this release the NTS flow and related SDK have been removed. The widget now targets the Nord experience exclusively.
-
-## Installation
+## Install
 
 ```bash
-npm install @n1xyz/wallet-widget
+pnpm add @n1xyz/wallet-widget @n1xyz/nord-ts @solana/web3.js
 # or
-yarn add @n1xyz/wallet-widget
+npm install @n1xyz/wallet-widget @n1xyz/nord-ts @solana/web3.js
 ```
 
-## Quick Start
+## Configure Nord
+
+- Create a `Nord` client with the same RPC + web server URLs you use in production. 
+- Common environment variables:
+  - `NEXT_PUBLIC_NORD_SOLANA_URL`
+  - `NEXT_PUBLIC_NORD_WEB_SERVER_URL`
+  - `NEXT_PUBLIC_NORD_BRIDGE_VK`
+- The widget currently exposes `N1SessionMode.Nord` only. Other modes are ignored.
+
+## Quick start
 
-```jsx
+```tsx
 import { useEffect, useState } from 'react';
 import { Connection } from '@solana/web3.js';
-import { N1WalletProvider, N1SessionMode } from '@n1xyz/wallet-widget';
 import { Nord } from '@n1xyz/nord-ts';
+import {
+  N1ConnectButton,
+  N1WalletProvider,
+  N1SessionMode,
+} from '@n1xyz/wallet-widget';
 
-function App() {
-  const [nord, setNord] = useState(null);
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const [nord, setNord] = useState<Nord | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-
-    async function initNord() {
+    (async () => {
       const client = await Nord.new({
-        webServerUrl: 'https://your-nord-web-server',
-        solanaConnection: new Connection('https://your-solana-rpc'),
-        app: 'bridge-verification-key',
+        webServerUrl: process.env.NEXT_PUBLIC_NORD_WEB_SERVER_URL!,
+        solanaConnection: new Connection(process.env.NEXT_PUBLIC_NORD_SOLANA_URL!),
+        app: process.env.NEXT_PUBLIC_NORD_BRIDGE_VK!,
       });
-
-      if (!cancelled) {
-        setNord(client);
-      }
-    }
-
-    initNord();
+      if (!cancelled) setNord(client);
+    })();
     return () => {
       cancelled = true;
     };
   }, []);
 
-  if (!nord) {
-    return null;
-  }
+  if (!nord) return null;
 
   return (
-    <N1WalletProvider 
-      providedSessionMode={N1SessionMode.Nord} 
-      appId="your-app-id"
+    <N1WalletProvider
+      providedSessionMode={N1SessionMode.Nord}
       nord={nord}
+      onError={(error) => console.error('[wallet]', error)}
     >
-      {/* Your application components */}
+      <N1ConnectButton label="Launch Nord Wallet" />
+      {children}
     </N1WalletProvider>
   );
 }
 ```
 
-## Nord Configuration
-
-The widget expects a fully initialized `Nord` client. When using the example app (or wiring your own integration) configure:
-
-- `NEXT_PUBLIC_NORD_SOLANA_URL`: the Solana RPC endpoint Nord will use.
-- `NEXT_PUBLIC_NORD_WEB_SERVER_URL`: the Nord REST/web server host (used for all HTTP + WebSocket calls).
-- `NEXT_PUBLIC_NORD_BRIDGE_VK`: the bridge verification key for your target environment.
-
-## Usage
-
-The wallet widget provides a React context that can be accessed throughout your application to interact with the wallet functionality.
-
-### Accessing Wallet Context
+## Provider props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `React.ReactNode` | ✅ | Your application tree. |
+| `providedSessionMode` | `N1SessionMode` | ✅ | Pass `N1SessionMode.Nord`; any other value is ignored. |
+| `nord` | `Nord \| null` | ✅ | Initialized Nord client instance. |
+| `onError` | `(error: WalletError) => void` | – | Surface widget errors to your own logger or telemetry. |
+| `colorOverrides` | `{ color: string; replacement: string; }[]` | – | Replace CSS colors without ejecting styles. The comparison is case-insensitive. |
+| `skipFinalScreen` | `boolean` | – | When `true`, the modal closes immediately after the success step so you can show your own confirmation UI. |
+
+## Accessing wallet state
+
+`useN1WalletContext()` exposes the most relevant data and helpers:
+
+| Field | Type | Notes |
+|-------|------|-------|
+| `address`, `chain`, `username` | `string` | Empty when the user is not connected. |
+| `balances` | `Balance[]` | `balance` is a `bigint`. Convert to string before serialising. |
+| `isConnected`, `showLogin`, `viewMode` | `boolean \| N1ModalViewMode` | Track UI state. |
+| `nordUser` | `NordUser \| null` | Use for authenticated Nord calls (trading, withdrawals, etc.). |
+| `setShowLogin()` | `(show: boolean) => void` | Opens or closes the modal. |
+| `startDepositFlow()` | `() => boolean` | Jumps straight into chain selection + deposit for authenticated users. |
+| `setViewMode()` | `(mode: N1ModalViewMode) => void` | Force the modal to render a specific screen (useful for QA). |
+| `signMessageWithSessionKey`, `signMessageWithWalletKey`, `signTransactionWithWalletKey` | functions \| `null` | Populated after the user connects. |
+| `disconnectWallet()` | `() => void` | Logs the user out of the Dynamic session and clears state. |
 
-```jsx
+```tsx
 import { useN1WalletContext } from '@n1xyz/wallet-widget';
 
-function WalletInfo() {
-  const { 
-    address, 
-    isConnected, 
-    balances, 
-    username,
-    setShowLogin
+export function AccountBadge() {
+  const {
+    address,
+    balances,
+    isConnected,
+    setShowLogin,
+    disconnectWallet,
   } = useN1WalletContext();
 
+  if (!isConnected) {
+    return <button onClick={() => setShowLogin(true)}>Connect</button>;
+  }
+
   return (
     <div>
-      {isConnected ? (
-        <>
-          <p>Connected as: {username}</p>
-          <p>Address: {address}</p>
-          <p>Balances: {balances.map(b => `${b.balance} ${b.appType}`).join(', ')}</p>
-        </>
-      ) : (
-        <button onClick={() => setShowLogin(true)}>Connect Wallet</button>
-      )}
+      <span>{address}</span>
+      <span>{Number(balances[0]?.balance ?? 0n)} {balances[0]?.appType}</span>
+      <button onClick={disconnectWallet}>Sign out</button>
     </div>
   );
 }
 ```
 
-### Signing Messages and Transactions
-
-```jsx
-import { useN1WalletContext } from '@n1xyz/wallet-widget';
-
-function SigningExample() {
-  const { 
-    signMessageWithSessionKey,
-    signMessageWithWalletKey,
-    signTransactionWithWalletKey
-  } = useN1WalletContext();
-
-  const handleSignMessage = async () => {
-    if (signMessageWithSessionKey) {
-      const message = { content: "Hello, world!" };
-      const signature = await signMessageWithSessionKey(message);
-      console.log("Signature:", signature);
-    }
-  };
-
-  return (
-    <button onClick={handleSignMessage}>Sign Message</button>
-  );
-}
-```
+## Modal controls & deposit flow
 
-### Starting the Deposit Flow After Authentication
-
-When a user already has an authenticated Nord session you can bypass the connection/auth screens and jump straight into the deposit experience (chain selection → amount → progress → success) by calling `startDepositFlow()`:
+You can script the modal without touching internals:
 
 ```tsx
-import { useN1WalletContext } from '@n1xyz/wallet-widget';
+import { N1ModalViewMode, useN1WalletContext } from '@n1xyz/wallet-widget';
 
-function DepositButton() {
-  const { startDepositFlow } = useN1WalletContext();
+function DepositCTA() {
+  const { isConnected, startDepositFlow, setShowLogin, setViewMode } =
+    useN1WalletContext();
+
+  const open = () => {
+    setViewMode(N1ModalViewMode.Automatic);
+    setShowLogin(true);
+  };
 
-  const handleClick = () => {
+  const deposit = () => {
     const started = startDepositFlow();
-    if (!started) {
-      console.warn('Unable to start deposit flow until the user is authenticated.');
-    }
+    if (!started) open();
   };
 
   return (
-    <button onClick={handleClick}>Fund Account</button>
+    <button onClick={isConnected ? deposit : open}>
+      {isConnected ? 'Deposit' : 'Connect'}
+    </button>
   );
 }
 ```
 
-This helper opens the modal (if it is not already visible), begins at the chain-selection screen, skips the auth loading step, and swaps the Deposit Success action button to `Close` so the user can exit immediately. No cache or `localStorage` entries are touched during this fast-path flow.
-
-## API Reference
-
-### N1WalletProvider Props
-
-| Prop                | Type                         | Required | Default | Description                            |
-|---------------------|------------------------------|----------|---------|----------------------------------------|
-| children            | React.ReactNode              | Yes      | -       | Child components                       |
-| providedSessionMode | N1SessionMode                | Yes      | -       | Session mode (Nord only)               |
-| appId               | string                       | Yes      | -       | Your application ID                    |
-| darkMode            | boolean                      | No       | true    | Enable dark mode UI                    |
-| onError             | (error: WalletError) => void | No       | -       | Error handler callback                 |
-| faucetUrl           | string                       | No       | -       | URL for faucet service                 |
-| isTestnet           | boolean                      | No       | false   | Enable testnet UX (faucet, warnings)   |
-| nord                | Nord                         | No       | -       | Nord instance (required for Nord mode) |
+`N1ModalViewMode` options: `Automatic`, `Connect`, `ChainSelection`, `AmountInput`, `DepositProgress`, `DepositSuccess`, `AuthLoading`, and `Error`. Stick to `Automatic` in production and reserve direct view overrides for testing or debugging.
 
-### N1SessionMode
+## Styling & branding
 
-```typescript
-enum N1SessionMode {
-  Nord,
-}
-```
+- All widget UI is rendered inside a Shadow DOM root with pre-bundled Tailwind CSS (`src/styles/embedded-main-css.ts`). Your app styles will not leak in.
+- Use `colorOverrides` to patch specific hex/rgb values:
 
-### N1WalletContext
-
-The context provides the following values:
-
-| Property                     | Type                               | Description                      |
-|------------------------------|------------------------------------|----------------------------------|
-| address                      | string                             | User's wallet address            |
-| appId                        | string                             | Application ID                   |
-| balances                     | Balance[]                          | User's token balances            |
-| chain                        | string                             | Current blockchain               |
-| isConnected                  | boolean                            | Connection status                |
-| sessionMode                  | N1SessionMode                      | Current session mode             |
-| sessionPubKey                | Uint8Array                         | Session public key               |
-| setShowLogin                 | (show: boolean) => void            | Show/hide login modal            |
-| startDepositFlow             | () => boolean                      | Start deposit-only flow once authenticated |
-| showLogin                    | boolean                            | Login modal visibility state     |
-| signMessageWithSessionKey    | (message: any) => Promise<any>     | Sign message with session key    |
-| signMessageWithWalletKey     | (message: any) => Promise<any>     | Sign message with wallet key     |
-| signTransactionWithWalletKey | (transaction: any) => Promise<any> | Sign transaction with wallet key |
-| username                     | string                             | User's username                  |
-| walletPubKey                 | Uint8Array                         | Wallet public key                |
-| isTestnet                    | boolean                            | Indicates if widget runs on testnet |
-
-## Error Handling
-
-The wallet widget includes a built-in error boundary that catches and processes wallet-related errors. You can provide a custom error handler through the `onError` prop:
-
-```jsx
+```tsx
 <N1WalletProvider
-  providedSessionMode={N1SessionMode.Nord}
-  appId="your-app-id"
-  onError={(error) => {
-    console.error("Wallet error:", error.code, error.message);
-    // Handle error appropriately
-  }}
+  colorOverrides={[
+    { color: '#ffffff', replacement: '#0c0c0c' },
+    { color: '#ffb347', replacement: '#0a84ff' },
+  ]}
+  {...otherProps}
 >
-  {/* Your application */}
+  …
 </N1WalletProvider>
 ```
 
-## Examples
-
-### Next.js sandbox
+- Additional exports:
+  - `N1ConnectButton` – drop-in CTA that follows widget styles and defers modal open until Dynamic loads.
+  - `Logo`, `N1LoaderAnimation`, and `ProcessingAnimation` – useful for composing branded fallback UI.
 
-An interactive Next.js playground lives in `examples/nextjs-wallet`. It lets you:
+## Example app
 
-- launch the Nord modal via the floating connect button;
-- inspect live wallet context state across routes;
-- tweak the widget source in `src/` and watch the app hot-reload.
+A ready-to-run Next.js sandbox lives in `examples/nextjs-wallet`.
 
 ```bash
 pnpm install
 cp examples/nextjs-wallet/.env.local.example examples/nextjs-wallet/.env.local
-pnpm dev:example:next
+pnpm --filter wallet-widget-next-example dev
 # open http://localhost:4000
 ```
 
-### Nord Mode Integration
+The UI Playground page lets you jump to any modal screen (including deposit success) without wiring backend services.
 
-```jsx
-import { useEffect, useState } from 'react';
-import { Connection } from '@solana/web3.js';
-import { N1WalletProvider, N1SessionMode } from '@n1xyz/wallet-widget';
-import { Nord } from '@n1xyz/nord-ts';
+## Security
 
-function App() {
-  const [nord, setNord] = useState(null);
-
-  useEffect(() => {
-    async function initNord() {
-      const nordClient = await Nord.new({
-        webServerUrl: 'https://your-nord-web-server',
-        solanaConnection: new Connection('https://your-solana-rpc'),
-        app: 'bridge-verification-key',
-      });
-      setNord(nordClient);
-    }
-    
-    initNord();
-  }, []);
-
-  if (!nord) return <div>Loading...</div>;
-
-  return (
-    <N1WalletProvider 
-      providedSessionMode={N1SessionMode.Nord} 
-      appId="your-app-id"
-      faucetUrl="https://your-faucet-url.com/api/faucet"
-      nord={nord}
-    >
-      <YourApplication />
-    </N1WalletProvider>
-  );
-}
-```
+All dependencies are pinned. Run `pnpm run security:deps` to verify specifiers and `pnpm run security:audit` for the registry audit before publishing. `pnpm run setup:hooks` installs a pre-commit hook that runs both checks (set `SKIP_SECURITY_AUDIT=1` when you are offline).
 
 ## License
 
-[MIT License](LICENSE)
+Use of the widget is governed by the proprietary N1 Labs license found in [`LICENSE`](LICENSE).  Reach out to `legal@n1.xyz` for questions about redistribution.

package/dist/components/LoadingFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingFallback.js","sourceRoot":"","sources":["../../src/components/LoadingFallback.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,eAAe,GAAa,cAAM,OAAA,CAC7C,cAAK,SAAS,EAAC,gDAAgD,YAC7D,cAAK,SAAS,EAAC,6EAA6E,GAAO,GAC/F,CACP,EAJ8C,CAI9C,CAAC","sourcesContent":["import React from 'react';\n\nexport const LoadingFallback: React.FC = () => (\n  <div className=\"flex items-center justify-center w-full h-full\">\n    <div className=\"n1-ww-animate-spin-slow rounded-full h-8 w-8 border-b-2 border-n1-ww-border\"></div>\n  </div>\n);\n"]}

package/dist/{WidgetButton → components}/N1ConnectButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BlockiesSvg from 'blockies-react-svg';
 import { useEffect, useState } from 'react';
-import { useN1WalletContext, useN1WalletInternalContext, } from '../Provider/hooks';
-import { ShadowRootWrapper } from '../Provider/ShadowRootWrapper';
-import mainCss from '../embedded-main-css';
+import { useN1WalletContext, useN1WalletInternalContext, } from '../hooks';
+import { ShadowRootWrapper } from '../providers/ShadowRootWrapper';
+import mainCss from '../styles/embedded-main-css';
 export function N1ConnectButton(_props) {
     var _a = useN1WalletContext(), isConnected = _a.isConnected, setShowLogin = _a.setShowLogin, address = _a.address;
     var _b = useState(false), toOpen = _b[0], setToOpen = _b[1];

package/dist/components/N1ConnectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"N1ConnectButton.js","sourceRoot":"","sources":["../../src/components/N1ConnectButton.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAElD,MAAM,UAAU,eAAe,CAAC,MAG/B;IACO,IAAA,KAAyC,kBAAkB,EAAE,EAA3D,WAAW,iBAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAyB,CAAC;IAC9D,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IACtC,IAAA,KAAiC,0BAA0B,EAAE,EAA3D,OAAO,aAAA,EAAE,iBAAiB,uBAAiC,CAAC;IACpE,IAAM,WAAW,GAAG,WAAW;QAC7B,CAAC,CAAC,UAAG,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,gBAAM,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAE;QACrD,CAAC,CAAC,EAAE,CAAC;IAEP,IAAM,WAAW,GAAG;QAClB,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;YACd,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAM,WAAW,GACf,0ZAA0Z,CAAC;IAE7Z,IAAM,WAAW,GAAG,EAAE,CAAC;IAEvB,IAAM,WAAW,GAAG;QAClB,IAAI,OAAO,IAAI,CAAC,WAAW;YAAE,OAAO,eAAe,CAAC;QACpD,IAAI,CAAC,WAAW;YAAE,OAAO,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC;QACnD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,CAAC,KAAK,CAAC,gDAAgD,CAAC,CAAC;YAChE,OAAO;QACT,CAAC;QAED,IAAI,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,IAAI,WAAW;YAAE,OAAO;QAExB,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;QACpE,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,IAAC,WAAW,EAAE,OAAO,GAAG,WAAW,YACnD,cAAK,SAAS,EAAC,uBAAuB,YACpC,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,eACT,OAAO,IAAI,CAAC,WAAW,aAEjC,WAAW,IAAI,CACd,eAAM,SAAS,EAAC,gEAAgE,YAC9E,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,sBAAsB,GAChC,GACG,CACR,EACD,yBAAO,WAAW,EAAE,GAAQ,IACrB,GACL,GACY,CACrB,CAAC;AACJ,CAAC","sourcesContent":["import BlockiesSvg from 'blockies-react-svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n  useN1WalletContext,\n  useN1WalletInternalContext,\n} from '../hooks';\nimport { ShadowRootWrapper } from '../providers/ShadowRootWrapper';\nimport mainCss from '../styles/embedded-main-css';\n\nexport function N1ConnectButton(_props: {\n  label: string;\n  children?: React.ReactNode;\n}) {\n  const { isConnected, setShowLogin, address } = useN1WalletContext();\n  const [toOpen, setToOpen] = useState(false);\n  const { loading, startClosingLogin } = useN1WalletInternalContext();\n  const addressText = isConnected\n    ? `${address.substring(0, 6)}...${address.slice(-4)}`\n    : '';\n\n  const showLoginFn = () => {\n    setShowLogin(true);\n  };\n\n  useEffect(() => {\n    if (!loading && toOpen) {\n      showLoginFn();\n      setToOpen(false);\n    }\n  }, [loading]);\n\n  const buttonClass =\n    'inline-flex w-full items-center justify-center gap-2 rounded-full border border-n1-ww-border bg-black px-4 py-2 text-xs font-semibold uppercase tracking-wide text-white transition-colors duration-200 hover:bg-white hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:pointer-events-none disabled:opacity-60 min-w-[7rem] sm:w-auto';\n\n  const injectedCss = '';\n\n  const renderLabel = () => {\n    if (loading && !isConnected) return 'Connecting...';\n    if (!isConnected) return _props.label || 'Connect';\n    return addressText;\n  };\n\n  const handleClick = () => {\n    if (startClosingLogin) {\n      console.debug('[N1ConnectButton] click ignored; modal closing');\n      return;\n    }\n\n    if (loading && !isConnected) {\n      setToOpen(true);\n      console.debug('[N1ConnectButton] deferring open until loading completes');\n      return;\n    }\n\n    if (isConnected) return;\n\n    console.debug('[N1ConnectButton] opening modal via connect button');\n    showLoginFn();\n  };\n\n  return (\n    <ShadowRootWrapper injectedCss={mainCss + injectedCss}>\n      <div className=\"n1-wallet-widget dark\">\n        <button\n          type=\"button\"\n          className={buttonClass}\n          onClick={handleClick}\n          aria-busy={loading && !isConnected}\n        >\n          {isConnected && (\n            <span className=\"flex h-5 w-5 items-center justify-center rounded-full bg-white\">\n              <BlockiesSvg\n                address={address}\n                className=\"h-4 w-4 rounded-full\"\n              />\n            </span>\n          )}\n          <span>{renderLabel()}</span>\n        </button>\n      </div>\n    </ShadowRootWrapper>\n  );\n}\n"]}

package/dist/components/logos/ZeroOneLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ZeroOneLogoProps {
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const ZeroOneLogo: React.FC<ZeroOneLogoProps>;
+export {};

package/dist/components/logos/ZeroOneLogo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ZeroOneLogo = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 43 : _b, _c = _a.height, height = _c === void 0 ? 34 : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (_jsx("svg", { width: width, height: height, viewBox: "0 0 43 34", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: _jsx("path", { d: "M21.3299 20.7674C21.3299 22.8824 21.0824 24.7499 20.5874 26.3699C20.1074 27.9749 19.4099 29.3174 18.4949 30.3974C17.5799 31.4924 16.4624 32.3174 15.1424 32.8724C13.8224 33.4274 12.3374 33.7049 10.6874 33.7049C9.05244 33.7049 7.57494 33.4274 6.25494 32.8724C4.93494 32.3174 3.81744 31.4924 2.90244 30.3974C1.97244 29.3174 1.25244 27.9749 0.742442 26.3699C0.247442 24.7499 -0.0000579674 22.8824 -0.0000579674 20.7674V12.9374C-0.0000579674 10.8224 0.247442 8.96242 0.742442 7.35742C1.23744 5.73742 1.94994 4.37992 2.87994 3.28492C3.79494 2.20492 4.90494 1.38742 6.20994 0.832423C7.52994 0.277423 9.00744 -0.0000766945 10.6424 -0.0000766945C12.2924 -0.0000766945 13.7774 0.277423 15.0974 0.832423C16.4174 1.38742 17.5424 2.20492 18.4724 3.28492C19.3874 4.37992 20.0924 5.73742 20.5874 7.35742C21.0824 8.96242 21.3299 10.8224 21.3299 12.9374V20.7674ZM6.29994 18.0674L15.0299 11.5649C14.9999 10.3349 14.8649 9.28492 14.6249 8.41492C14.3999 7.52992 14.0624 6.82492 13.6124 6.29992C13.2674 5.87992 12.8399 5.57242 12.3299 5.37742C11.8349 5.16742 11.2724 5.06242 10.6424 5.06242C9.93744 5.06242 9.31494 5.19742 8.77494 5.46742C8.24994 5.72242 7.80744 6.11242 7.44744 6.63742C7.05744 7.19242 6.76494 7.91242 6.56994 8.79742C6.38994 9.68242 6.29994 10.7324 6.29994 11.9474V15.5699C6.29994 16.2899 6.29994 16.7699 6.29994 17.0099C6.29994 17.2499 6.29994 17.6024 6.29994 18.0674ZM15.0299 21.7124V17.9099C15.0299 17.4149 15.0299 17.0549 15.0299 16.8299C15.0299 16.5899 15.0299 16.2524 15.0299 15.8174L6.29994 22.2974C6.32994 23.2874 6.42744 24.1649 6.59244 24.9299C6.77244 25.6949 7.01994 26.3324 7.33494 26.8424C7.69494 27.4574 8.15244 27.9149 8.70744 28.2149C9.26244 28.5149 9.92244 28.6649 10.6874 28.6649C11.3924 28.6649 12.0149 28.5374 12.5549 28.2824C13.0949 28.0124 13.5449 27.6074 13.9049 27.0674C14.2799 26.4974 14.5574 25.7699 14.7374 24.8849C14.9324 23.9849 15.0299 22.9274 15.0299 21.7124ZM42.9974 33.2324H36.6749V8.09992L28.3949 11.0699V5.62492L42.6599 0.472423H42.9974V33.2324Z", fill: "white" }) }));
+};
+//# sourceMappingURL=ZeroOneLogo.js.map

package/dist/components/logos/ZeroOneLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZeroOneLogo.js","sourceRoot":"","sources":["../../../src/components/logos/ZeroOneLogo.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAIvD;QAHC,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IACV,OAAA,CACJ,cACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,YAEpB,eACE,CAAC,EAAC,27DAA27D,EAC77D,IAAI,EAAC,OAAO,GACZ,GACE,CACP;AAdK,CAcL,CAAC","sourcesContent":["import React from 'react';\n\ninterface ZeroOneLogoProps {\n  width?: number;\n  height?: number;\n  className?: string;\n}\n\nexport const ZeroOneLogo: React.FC<ZeroOneLogoProps> = ({\n  width = 43,\n  height = 34,\n  className = '',\n}) => (\n  <svg\n    width={width}\n    height={height}\n    viewBox=\"0 0 43 34\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"M21.3299 20.7674C21.3299 22.8824 21.0824 24.7499 20.5874 26.3699C20.1074 27.9749 19.4099 29.3174 18.4949 30.3974C17.5799 31.4924 16.4624 32.3174 15.1424 32.8724C13.8224 33.4274 12.3374 33.7049 10.6874 33.7049C9.05244 33.7049 7.57494 33.4274 6.25494 32.8724C4.93494 32.3174 3.81744 31.4924 2.90244 30.3974C1.97244 29.3174 1.25244 27.9749 0.742442 26.3699C0.247442 24.7499 -0.0000579674 22.8824 -0.0000579674 20.7674V12.9374C-0.0000579674 10.8224 0.247442 8.96242 0.742442 7.35742C1.23744 5.73742 1.94994 4.37992 2.87994 3.28492C3.79494 2.20492 4.90494 1.38742 6.20994 0.832423C7.52994 0.277423 9.00744 -0.0000766945 10.6424 -0.0000766945C12.2924 -0.0000766945 13.7774 0.277423 15.0974 0.832423C16.4174 1.38742 17.5424 2.20492 18.4724 3.28492C19.3874 4.37992 20.0924 5.73742 20.5874 7.35742C21.0824 8.96242 21.3299 10.8224 21.3299 12.9374V20.7674ZM6.29994 18.0674L15.0299 11.5649C14.9999 10.3349 14.8649 9.28492 14.6249 8.41492C14.3999 7.52992 14.0624 6.82492 13.6124 6.29992C13.2674 5.87992 12.8399 5.57242 12.3299 5.37742C11.8349 5.16742 11.2724 5.06242 10.6424 5.06242C9.93744 5.06242 9.31494 5.19742 8.77494 5.46742C8.24994 5.72242 7.80744 6.11242 7.44744 6.63742C7.05744 7.19242 6.76494 7.91242 6.56994 8.79742C6.38994 9.68242 6.29994 10.7324 6.29994 11.9474V15.5699C6.29994 16.2899 6.29994 16.7699 6.29994 17.0099C6.29994 17.2499 6.29994 17.6024 6.29994 18.0674ZM15.0299 21.7124V17.9099C15.0299 17.4149 15.0299 17.0549 15.0299 16.8299C15.0299 16.5899 15.0299 16.2524 15.0299 15.8174L6.29994 22.2974C6.32994 23.2874 6.42744 24.1649 6.59244 24.9299C6.77244 25.6949 7.01994 26.3324 7.33494 26.8424C7.69494 27.4574 8.15244 27.9149 8.70744 28.2149C9.26244 28.5149 9.92244 28.6649 10.6874 28.6649C11.3924 28.6649 12.0149 28.5374 12.5549 28.2824C13.0949 28.0124 13.5449 27.6074 13.9049 27.0674C14.2799 26.4974 14.5574 25.7699 14.7374 24.8849C14.9324 23.9849 15.0299 22.9274 15.0299 21.7124ZM42.9974 33.2324H36.6749V8.09992L28.3949 11.0699V5.62492L42.6599 0.472423H42.9974V33.2324Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n"]}

package/dist/components/logos/index.d.ts

@@ -6,3 +6,4 @@ export * from './BitcoinLogo';
 export * from './HyperliquidLogo';
 export * from './BaseLogo';
 export * from './BeraLogo';
+export * from './ZeroOneLogo';

package/dist/components/logos/index.js

@@ -6,4 +6,5 @@ export * from './BitcoinLogo';
 export * from './HyperliquidLogo';
 export * from './BaseLogo';
 export * from './BeraLogo';
+export * from './ZeroOneLogo';
 //# sourceMappingURL=index.js.map

package/dist/components/logos/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/logos/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC","sourcesContent":["export * from './SolanaLogo';\nexport * from './EthereumLogo';\nexport * from './OptimismLogo';\nexport * from './ArbitrumLogo';\nexport * from './BitcoinLogo';\nexport * from './HyperliquidLogo';\nexport * from './BaseLogo';\nexport * from './BeraLogo';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/logos/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC","sourcesContent":["export * from './SolanaLogo';\nexport * from './EthereumLogo';\nexport * from './OptimismLogo';\nexport * from './ArbitrumLogo';\nexport * from './BitcoinLogo';\nexport * from './HyperliquidLogo';\nexport * from './BaseLogo';\nexport * from './BeraLogo';\nexport * from './ZeroOneLogo';\n"]}

package/dist/config/chains.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=chains.js.map

package/dist/config/chains.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chains.js","sourceRoot":"","sources":["../../src/config/chains.tsx"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/config/solana.js

@@ -14,6 +14,6 @@ var DEFAULT_SOLANA_RPC_URL = 'https://api.mainnet-beta.solana.com';
  */
 export function getSolanaRpcUrl() {
     var _a;
-    return ((_a = process.env.NEXT_PUBLIC_NORD_RPC_URL) === null || _a === void 0 ? void 0 : _a.trim()) || DEFAULT_SOLANA_RPC_URL;
+    return ((_a = process.env.NEXT_PUBLIC_NORD_SOLANA_URL) === null || _a === void 0 ? void 0 : _a.trim()) || DEFAULT_SOLANA_RPC_URL;
 }
 //# sourceMappingURL=solana.js.map

package/dist/config/solana.js.map

@@ -1 +1 @@
-{"version":3,"file":"solana.js","sourceRoot":"","sources":["../../src/config/solana.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,yCAAwB,CAAA;IACxB,oCAAmB,CAAA;IACnB,kCAAiB,CAAA;AACnB,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAED,IAAM,sBAAsB,GAAG,qCAAqC,CAAC;AAErE;;;GAGG;AACH,MAAM,UAAU,eAAe;;IAC7B,OAAO,CAAA,MAAA,OAAO,CAAC,GAAG,CAAC,wBAAwB,0CAAE,IAAI,EAAE,KAAI,sBAAsB,CAAC;AAChF,CAAC","sourcesContent":["/**\n * Solana network configuration\n */\n\nexport enum SolanaNetwork {\n  MAINNET = 'mainnet-beta',\n  TESTNET = 'testnet',\n  DEVNET = 'devnet',\n}\n\nconst DEFAULT_SOLANA_RPC_URL = 'https://api.mainnet-beta.solana.com';\n\n/**\n * Resolve the Solana RPC URL from environment variables.\n * Falls back to mainnet RPC if none provided.\n */\nexport function getSolanaRpcUrl(): string {\n  return process.env.NEXT_PUBLIC_NORD_RPC_URL?.trim() || DEFAULT_SOLANA_RPC_URL;\n}\n"]}
+{"version":3,"file":"solana.js","sourceRoot":"","sources":["../../src/config/solana.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,yCAAwB,CAAA;IACxB,oCAAmB,CAAA;IACnB,kCAAiB,CAAA;AACnB,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAED,IAAM,sBAAsB,GAAG,qCAAqC,CAAC;AAErE;;;GAGG;AACH,MAAM,UAAU,eAAe;;IAC7B,OAAO,CAAA,MAAA,OAAO,CAAC,GAAG,CAAC,2BAA2B,0CAAE,IAAI,EAAE,KAAI,sBAAsB,CAAC;AACnF,CAAC","sourcesContent":["/**\n * Solana network configuration\n */\n\nexport enum SolanaNetwork {\n  MAINNET = 'mainnet-beta',\n  TESTNET = 'testnet',\n  DEVNET = 'devnet',\n}\n\nconst DEFAULT_SOLANA_RPC_URL = 'https://api.mainnet-beta.solana.com';\n\n/**\n * Resolve the Solana RPC URL from environment variables.\n * Falls back to mainnet RPC if none provided.\n */\nexport function getSolanaRpcUrl(): string {\n  return process.env.NEXT_PUBLIC_NORD_SOLANA_URL?.trim() || DEFAULT_SOLANA_RPC_URL;\n}\n"]}

package/dist/{Provider/context.d.ts → context/n1-wallet-context.d.ts}

@@ -1,5 +1,5 @@
-import { N1WalletState } from './types';
-import { N1InternalWalletState } from './types';
+import { N1WalletState } from '../types/wallet';
+import { N1InternalWalletState } from '../types/wallet';
 declare const N1WalletContext: import("react").Context<N1WalletState>;
 declare const N1InternalWalletContext: import("react").Context<N1InternalWalletState>;
 export { N1WalletContext, N1InternalWalletContext };

package/dist/{Provider/context.js → context/n1-wallet-context.js}

@@ -2,4 +2,4 @@ import { createContext } from 'react';
 var N1WalletContext = createContext({});
 var N1InternalWalletContext = createContext({});
 export { N1WalletContext, N1InternalWalletContext };
-//# sourceMappingURL=context.js.map
+//# sourceMappingURL=n1-wallet-context.js.map

package/dist/context/n1-wallet-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"n1-wallet-context.js","sourceRoot":"","sources":["../../src/context/n1-wallet-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,IAAM,eAAe,GAAG,aAAa,CAAgB,EAAmB,CAAC,CAAC;AAC1E,IAAM,uBAAuB,GAAG,aAAa,CAC3C,EAA2B,CAC5B,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,CAAC","sourcesContent":["import { N1WalletState } from '../types/wallet';\n\nimport { createContext } from 'react';\nimport { N1InternalWalletState } from '../types/wallet';\n\nconst N1WalletContext = createContext<N1WalletState>({} as N1WalletState);\nconst N1InternalWalletContext = createContext<N1InternalWalletState>(\n  {} as N1InternalWalletState\n);\n\nexport { N1WalletContext, N1InternalWalletContext };\n"]}

package/dist/{Modal → features/onboarding-flow}/N1WalletModal.d.ts

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

package/dist/{Modal → features/onboarding-flow}/N1WalletModal.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import '../main.css';
+import '../../styles/main.css';
 import { lazy, Suspense, useEffect, useState, useCallback } from 'react';
-import { ANIMATION_EASE } from './NordFlow/constants';
-import { useN1WalletContext, useN1WalletInternalContext, } from '../Provider/hooks';
-import { LoadingFallback } from './LoadingFallback';
-import { logger } from '../utils/logger';
-// Lazy load the NordFlow component
-var NordFlow = lazy(function () {
-    return import('./NordFlow/NordFlow').then(function (mod) { return ({
-        default: mod.NordFlow,
+import { useN1WalletContext, useN1WalletInternalContext, } from '../../hooks';
+import { LoadingFallback } from '../../components/LoadingFallback';
+import { logger } from '../../utils/logger';
+// Lazy load the onboarding flow component
+var OnboardingFlow = lazy(function () {
+    return import('./OnboardingFlow').then(function (mod) { return ({
+        default: mod.OnboardingFlow,
     }); });
 });
+var lastLoggedShowLogin = null;
 export function N1WalletModal() {
     var _a = useN1WalletContext(), showLogin = _a.showLogin, setShowLogin = _a.setShowLogin;
     var _b = useN1WalletInternalContext(), setStartClosingLogin = _b.setStartClosingLogin, startClosingLogin = _b.startClosingLogin, setLoading = _b.setLoading, dynamicWallet = _b.dynamicWallet, dynamicSdkHasLoaded = _b.dynamicSdkHasLoaded, blockModalReopen = _b.blockModalReopen;
@@ -50,7 +50,10 @@ export function N1WalletModal() {
     }, [dynamicSdkHasLoaded, dynamicWallet, setLoading]);
     // Handle modal visibility
     useEffect(function () {
-        logger.debug('N1WalletModal: showLogin state changed', { showLogin: showLogin });
+        if (lastLoggedShowLogin !== showLogin) {
+            logger.debug('N1WalletModal: showLogin state changed', { showLogin: showLogin });
+            lastLoggedShowLogin = showLogin;
+        }
         if (showLogin) {
             setStartClosingLogin(false);
             setShowLoginAnimation(true);
@@ -67,9 +70,9 @@ export function N1WalletModal() {
             return function () { return clearTimeout(timeout_1); };
         }
     }, [startClosingLogin, setStartClosingLogin]);
-    // Handle modal close for Nord mode
-    var handleNordFlowClose = function () {
-        logger.debug('N1WalletModal: handleNordFlowClose invoked');
+    // Handle modal close for onboarding mode
+    var handleOnboardingFlowClose = function () {
+        logger.debug('N1WalletModal: handleOnboardingFlowClose invoked');
         suppressDocumentClick();
         blockModalReopen(1200);
         setShowLogin(false);
@@ -77,13 +80,13 @@ export function N1WalletModal() {
     };
     if (!showLogin && !startClosingLogin)
         return null;
-    return (_jsx("div", { className: "n1-wallet-widget dark ", children: showLogin && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center w-full h-full", children: [_jsx("div", { className: "\n               fixed inset-0 w-full h-full bg-black/40 backdrop-blur-sm\n               transition-all duration-500 ".concat(ANIMATION_EASE, "\n               ").concat(showLoginAnimation ? 'opacity-100' : 'opacity-0', "\n            "), onClick: function (event) {
+    return (_jsx("div", { className: "n1-wallet-widget dark ", children: showLogin && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center w-full h-full", children: [_jsx("div", { className: "\n               fixed inset-0 w-full h-full bg-black/40 backdrop-blur-sm\n               transition-all duration-500 cubic-bezier(0.16, 1, 0.3, 1)\n               ".concat(showLoginAnimation ? 'opacity-100' : 'opacity-0', "\n            "), onClick: function (event) {
                         logger.debug('N1WalletModal: backdrop clicked, closing modal');
                         blockEventPropagation(event);
                         suppressDocumentClick();
                         blockModalReopen(1200);
                         setShowLogin(false);
                         setStartClosingLogin(true);
-                    }, onMouseDown: blockEventPropagation, onMouseUp: blockEventPropagation, onPointerDown: blockEventPropagation, onPointerUp: blockEventPropagation, onTouchStart: blockEventPropagation, onTouchEnd: blockEventPropagation }), _jsx("div", { className: "\n              scale-100 relative z-50 transition-all duration-500 ".concat(ANIMATION_EASE, "\n              ").concat(showLoginAnimation ? 'opacity-100 scale-100' : 'opacity-0 scale-95', "\n            "), children: _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: _jsx(NordFlow, { onClose: handleNordFlowClose }) }) })] })) }));
+                    }, onMouseDown: blockEventPropagation, onMouseUp: blockEventPropagation, onPointerDown: blockEventPropagation, onPointerUp: blockEventPropagation, onTouchStart: blockEventPropagation, onTouchEnd: blockEventPropagation }), _jsx("div", { className: "\n              scale-100 relative z-50 transition-all duration-500 cubic-bezier(0.16, 1, 0.3, 1)\n              ".concat(showLoginAnimation ? 'opacity-100 scale-100' : 'opacity-0 scale-95', "\n            "), children: _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: _jsx(OnboardingFlow, { onClose: handleOnboardingFlowClose }) }) })] })) }));
 }
 //# sourceMappingURL=N1WalletModal.js.map