@rockerone/xprnkit 0.4.0 → 0.4.2

package/README.md

@@ -1,86 +1,27 @@
-# xprnkit
+# @rockerone/xprnkit
 
-To install dependencies:
-
-```bash
-bun install
-```
-
-# XPRNKit:
+> **⚠️ Warning:** Version 0.4.0 introduces breaking changes. Make sure to save your project before migrate.
 
 ## Accelerating dApp Development for XPRNetwork
 
 XPRNKit is a React-based library designed to streamline decentralized application (dApp) development and prototyping on the XPRNetwork blockchain. It offers a comprehensive set of tools, components, and utilities that enable developers to rapidly build, deploy, and test dApps with minimal setup. By abstracting away much of the underlying complexity of blockchain interactions, XPRNKit empowers developers to focus on core functionality and user experience.
 
-Whether you're creating smart contracts, integrating wallets, or handling token transactions, XPRNKit simplifies common tasks and accelerates the development process. It’s perfect for both experienced blockchain developers looking to prototype quickly and newcomers who want to get up and running with XPRNetwork faster.
+Whether you're creating smart contracts, integrating wallets, or handling token transactions, XPRNKit simplifies common tasks and accelerates the development process. It's perfect for both experienced blockchain developers looking to prototype quickly and newcomers who want to get up and running with XPRNetwork faster.
 
 ## Key Features
 
 - **Pre-built Components**: Ready-to-use UI components for common dApp functionality like wallet connections, token balances, and transaction history.
 - **Blockchain Integration**: Simplified access to XPRNetwork's blockchain features, reducing the need for extensive configuration.
-- **Developer-Friendly Hook**: A simple unique hook to access objects and method to maximizing flexibility.
-- **Multi-Session Support**: Connect and manage multiple wallet sessions simultaneously, with easy switching between accounts.
+- **Developer-Friendly Hook**: A simple unique hook to access objects and methods, maximizing flexibility.
+- **Identity Proof**: Built-in wallet signature verification for secure user authentication with JWT token support.
+- **Multi-Account Support**: Connect and switch between multiple wallet accounts, powered by Proton Web SDK session storage.
+- **Token Swap Interface**: Complete swap UI with market provider abstraction and customizable layouts.
 
 XPRNKit is the ideal toolkit for developers who want to build and deploy secure, scalable, and user-friendly dApps on XPRNetwork with greater efficiency.
 
 ---
 
-## 0.3.1 Performance Update
-
-Version 0.3.1 introduces significant performance optimizations to the `XPRNProvider` multi-session management system. The internal state architecture has been refactored to use refs instead of useState for session storage, dramatically reducing unnecessary re-renders.
-
-### Performance Gains
-
-| Scenario | Before | After | Improvement |
-|----------|--------|-------|-------------|
-| **Single-session usage** | baseline | optimized | **~1.5x faster** |
-| **Multi-session (2-3 wallets)** | baseline | optimized | **~3-4x faster** |
-| **Heavy multi-session (4+ wallets)** | baseline | optimized | **~5x+ faster** |
-
-### Re-render Reduction (3-wallet scenario)
-
-| Operation | Before | After | Reduction |
-|-----------|--------|-------|-----------|
-| Connect wallet 1 | 3 re-renders | 2 re-renders | 33% |
-| Connect wallet 2 | 2 re-renders | 0 re-renders | 100% |
-| Connect wallet 3 | 2 re-renders | 0 re-renders | 100% |
-| Profile fetch (active) | 1 re-render | 1 re-render | 0% |
-| Profile fetch (non-active) | 1 re-render | 0 re-renders | 100% |
-| Authenticate (non-active) | 1 re-render | 0 re-renders | 100% |
-| **Total (3-wallet setup)** | **13 re-renders** | **4 re-renders** | **~70%** |
-
-### Callback Stability
-
-All session management callbacks are now stable references:
-
-| Callback | Dependencies | Stable? |
-|----------|--------------|---------|
-| `listSessions` | `[]` | ✅ Never recreated |
-| `getSessionById` | `[]` | ✅ Never recreated |
-| `getSessionByActor` | `[]` | ✅ Never recreated |
-| `getAllProfiles` | `[]` | ✅ Never recreated |
-| `getActiveSession` | `[]` | ✅ Never recreated |
-| `setActiveSession` | `[forceUpdate]` | ✅ Stable |
-| `switchSession` | `[setActiveSession]` | ✅ Stable |
-| `removeSession` | `[config, forceUpdate]` | ✅ Stable |
-| `disconnect` | `[removeSession]` | ✅ Stable |
-| `authenticate` | `[config, forceUpdate]` | ✅ Stable |
-| `connect` | `[config, forceUpdate]` | ✅ Stable |
-
-### Key Optimizations
-
-- **Ref-based session storage**: Sessions Map is now stored in a ref, eliminating Map recreation on every update
-- **Selective re-renders**: Only triggers re-renders when the **active session** data changes
-- **Zero re-renders for non-active operations**: Adding/updating non-active sessions doesn't cause re-renders
-- **Stable callback references**: Consumer components using these callbacks won't re-render due to callback identity changes
-
-### Backward Compatibility
-
-These optimizations are fully backward compatible. All existing code using `useXPRN()` continues to work without changes.
-
----
-
-# XPRNProvider and useXPRN Documentation
+# XPRNProvider and useXPRN
 
 ## XPRNProvider
 
@@ -107,10 +48,9 @@ type XPRProviderConfig = {
   dAppName: string;
   requesterAccount: string;
   requesterLogo?: string;
-  authenticationUrl?: string;
-  enforceAuthentication?: boolean;
   apiMode: "testnet" | "mainnet";
   restoreSession?: boolean;
+  identityProof?: XPRNKitIdentityProofConfig;
 };
 ```
 
@@ -119,15 +59,14 @@ type XPRProviderConfig = {
 - `dAppName`: Your dApp's display name.
 - `requesterAccount`: Your dApp's account name.
 - `requesterLogo`: Optional logo URL for your dApp.
-- `authenticationUrl`: Optional URL for user authentication endpoint.
-- `enforceAuthentication`: If true, automatically authenticates users on connection.
-- `apiMode`: Either "testnet" or "mainnet" for different network environments.
+- `apiMode`: Either `"testnet"` or `"mainnet"` for different network environments.
 - `restoreSession`: If true, restores the last active session on page refresh.
+- `identityProof`: Optional identity proof configuration (see [Identity Proof](#identity-proof) section).
 
 ### Usage
 
 ```jsx
-import {XPRNProvider} from "./path/to/XPRNProvider";
+import { XPRNProvider } from '@rockerone/xprnkit';
 
 const config = {
   chainId: "your-chain-id",
@@ -151,19 +90,18 @@ The `useXPRN` hook provides access to the XPRN context within your React compone
 ### Usage
 
 ```jsx
-import {useXPRN} from "./path/to/XPRNProvider";
+import { useXPRN } from '@rockerone/xprnkit';
 
 function YourComponent() {
   const {
     session,
     profile,
+    identityProof,
+    identityProofStatus,
     connect,
     disconnect,
-    authenticate,
-    // Multi-session methods
-    listSessions,
-    setActiveSession,
-    getActiveSession,
+    pushTransaction,
+    switchToSession,
   } = useXPRN();
 
   // Use the context values and functions
@@ -174,688 +112,563 @@ function YourComponent() {
 
 The `useXPRN` hook returns an object with the following properties:
 
-#### Backward Compatible Properties (Active Session)
+#### State
 
-- `session`: Current active LinkSession object or null.
-- `link`: ProtonWebLink object for active session or null.
-- `profile`: XPRNProfile object for active session or null.
-- `rpc`: JsonRpc object or null.
-- `authentication`: XPRNAuthentication object for active session or null.
-- `connect`: Function to initiate a connection (newly connected wallet becomes active).
-- `disconnect`: Function to disconnect a session (active or specific by actor).
-- `authenticate`: Function to authenticate the user using the authentication URL (active session or specific by actor).
-- `addTransactionError`: Function to add a transaction error to the stack.
-
-#### Multi-Session Management Methods
-
-- `getActiveSession`: Returns the current active session object or null.
-- `listSessions`: Returns an array of all connected sessions.
-- `setActiveSession`: Switch the active session by actor name.
-- `switchSession`: Alias for setActiveSession.
-- `removeSession`: Remove a specific session by actor name.
-- `getAllProfiles`: Returns an array of all profiles from all connected sessions.
-- `getSessionById`: Get a specific session by actor name.
-- `getSessionByActor`: Get a specific session by actor name (same as getSessionById).
-
-### Key Functions
-
-#### connect
-
-```typescript
-connect(
-  restore?: boolean,
-  silent?: boolean,
-  onSession?: (session: LinkSession) => void,
-  onProfile?: (profile: XPRNProfile) => void
-) => void
-```
+- `config`: `XPRProviderConfig | null` - Current provider configuration.
+- `session`: `LinkSession | null` - Current active session object.
+- `link`: `ProtonWebLink | Link | null` - Proton link object for the active session.
+- `profile`: `XPRNKitProfile | null` - Profile data for the active session.
+- `identityProof`: `XPRNKitIdentityProof | null` - Identity proof for the active session (when identity proof is configured).
+- `identityProofStatus`: `XPRNKitIdentityProofStatus` - Current status of the identity proof process (`"idle"` | `"signing"` | `"verifying"` | `"validating"` | `"success"` | `"expired"` | `"error"`).
 
-Initiates a connection to the WebAuth wallet. The newly connected wallet automatically becomes the active session.
+#### Methods
 
-#### disconnect
+- `connect(restore?: boolean)`: Initiates a connection to the WebAuth wallet. Pass `true` to restore a previous session silently.
+- `disconnect()`: Disconnects the current active session.
+- `pushTransaction(actions: any[])`: Pushes a transaction with the given actions using the active session.
+- `switchToSession(actor: string, permission: string)`: Switches to a different stored session by restoring it from the Proton Web SDK storage.
 
-```typescript
-disconnect(actor?: string) => void
-```
+### Basic Example
 
-Disconnects a session. If `actor` is provided, disconnects that specific session. Otherwise, disconnects the active session.
+```jsx
+import { useXPRN } from '@rockerone/xprnkit';
 
-#### authenticate
+function MyComponent() {
+  const { session, profile, connect, disconnect } = useXPRN();
 
-```typescript
-authenticate(
-  success: (res: any) => void,
-  fail: (e: any) => void,
-  actor?: string
-) => void
+  return (
+    <div>
+      {session ? (
+        <div>
+          <p>Logged in as: {profile?.displayName}</p>
+          <button onClick={() => disconnect()}>Logout</button>
+        </div>
+      ) : (
+        <button onClick={() => connect()}>Connect</button>
+      )}
+    </div>
+  );
+}
 ```
 
-Authenticates a user using the provided authentication URL. If `actor` is provided, authenticates that specific session. Otherwise, authenticates the active session.
-
-### Multi-Session Management Methods
+### Transaction Example
 
-#### getActiveSession
+```jsx
+import { useXPRN } from '@rockerone/xprnkit';
+
+function TransferButton() {
+  const { session, pushTransaction } = useXPRN();
+
+  const handleTransfer = async () => {
+    if (!session) return;
+
+    await pushTransaction([
+      {
+        account: "eosio.token",
+        name: "transfer",
+        authorization: [session.auth],
+        data: {
+          from: session.auth.actor.toString(),
+          to: "recipient",
+          quantity: "1.0000 XPR",
+          memo: "Hello!",
+        },
+      },
+    ]);
+  };
 
-```typescript
-getActiveSession(): XPRNSession | null
+  return <button onClick={handleTransfer}>Send 1 XPR</button>;
+}
 ```
 
-Returns the complete active session object containing session, link, profile, and authentication data.
+---
 
-#### listSessions
+# Identity Proof
 
-```typescript
-listSessions(): XPRNSession[]
-```
+Identity Proof allows you to verify that a user owns a specific wallet by having them sign a message. This is useful for authentication flows where you need to confirm a user's identity on your backend.
 
-Returns an array of all connected sessions.
+## Configuration
 
-#### setActiveSession / switchSession
+Add the `identityProof` configuration to your `XPRProvider`:
 
-```typescript
-setActiveSession(actor: string): void
-switchSession(actor: string): void
+```tsx
+const config = {
+  chainId: "your-chain-id",
+  endpoints: ["https://your-endpoint.com"],
+  dAppName: "MyDApp",
+  requesterAccount: "your-requester-account",
+  apiMode: "mainnet",
+  identityProof: {
+    required: true,                        // When true, identity proof is automatically triggered on connect
+    createUrl: "/api/auth/authorize",      // Backend endpoint to verify signatures and return a JWT
+    validationUrl: "/api/auth/validate",   // Backend endpoint to validate existing tokens (optional)
+    validationBuffer: 300,                 // Seconds before expiry to trigger revalidation (optional)
+    headers: {},                           // Custom headers to send with identity proof requests (optional)
+    timeout: 10000,                        // Request timeout in milliseconds (optional)
+  },
+};
 ```
 
-Switches the active session to the specified actor. Both methods are identical.
-
-#### removeSession
+### XPRNKitIdentityProofConfig
 
 ```typescript
-removeSession(actor: string): Promise<void>
+type XPRNKitIdentityProofConfig = {
+  required: boolean;
+  createUrl: string;
+  validationUrl?: string;
+  validationBuffer?: number;
+  headers?: Record<string, string>;
+  timeout?: number;
+};
 ```
 
-Removes a specific session by actor name. If the removed session was active, the active session is set to null.
+## How It Works
 
-#### getAllProfiles
+1. When `identityProof.required` is `true`, the provider automatically triggers the identity proof flow on wallet connect.
+2. The provider first checks localStorage for an existing identity proof and validates it via the `validationUrl` (if configured).
+3. If no valid proof exists, the user is prompted to sign a message in their wallet.
+4. The signed message is sent to the `createUrl` backend endpoint for verification.
+5. The backend returns a JWT token which is stored in localStorage and made available via `useXPRN().identityProof`.
 
-```typescript
-getAllProfiles(): XPRNProfile[]
-```
+## Backend Endpoints
 
-Returns an array of profiles from all connected sessions.
+### 1. Authorization Endpoint (`createUrl`)
 
-#### getSessionById / getSessionByActor
+Verifies the wallet signature and returns a JWT token:
 
 ```typescript
-getSessionById(actor: string): XPRNSession | null
-getSessionByActor(actor: string): XPRNSession | null
-```
-
-Retrieves a specific session by actor name. Both methods are identical.
-
-## Types
-
-### XPRNAuthentication
+// Expected request body
+{
+  signer: {
+    actor: string;
+    permission: string;
+  };
+  transaction: any;
+  signatures: string[];
+  chainId: string;
+}
 
-```typescript
-type XPRNAuthentication = {
-  actor: string;
-  publicKey: string;
-  data?: any;
-};
+// Response on success
+{
+  success: true,
+  validated: true,
+  actor: string,
+  permission: string,
+  token: string,  // JWT token
+  timestamp: string,
+}
 ```
 
-### XPRNProfile
-
-```typescript
-type XPRNProfile = {
-  displayName: string;
-  avatar?: string;
-  authentication?: XPRNAuthentication;
-  isKyc: boolean;
-};
-```
+### 2. Validation Endpoint (`validationUrl`)
 
-### XPRNSession
+Validates an existing JWT token:
 
 ```typescript
-type XPRNSession = {
-  actor: string;
-  session: LinkSession;
-  link: ProtonWebLink | Link;
-  profile: XPRNProfile | null;
-  authentication: XPRNAuthentication | null;
-};
+// Request: Authorization header with "Bearer <token>" or body { token: string }
+
+// Response
+{
+  valid: boolean,
+  actor?: string,
+  expiresAt?: string,
+  error?: string,
+}
 ```
 
-A complete session object that encapsulates all data for a connected wallet.
-
-## Multi-Session Support
-
-XPRNKit now supports managing multiple wallet sessions simultaneously. You can connect multiple wallets, switch between them, and manage each session independently.
+## Identity Proof Gate Component
 
-### Key Concepts
+Use `XPRNIdentityProofGate` to conditionally render content based on identity proof status:
 
-- **Active Session**: The currently selected session. All backward-compatible properties (`session`, `link`, `profile`, `authentication`) return data from the active session.
-- **Session Identification**: Sessions are uniquely identified by their actor name (e.g., `user1@proton`).
-- **Auto-Switch**: When a new wallet is connected, it automatically becomes the active session.
-- **Persistence**: Only the active session is persisted and restored on page refresh (when `restoreSession: true` in config).
-
-### Multi-Session Usage Examples
-
-#### Connecting Multiple Wallets
-
-```jsx
-import {useXPRN} from "xprnkit";
-
-function MultiWalletComponent() {
-  const {connect, listSessions, session} = useXPRN();
-
-  const handleConnectWallet = async () => {
-    await connect();
-    // Newly connected wallet is now the active session
-  };
+```tsx
+import { XPRNIdentityProofGate } from '@rockerone/xprnkit';
 
+function ProtectedContent() {
   return (
-    <div>
-      <button onClick={handleConnectWallet}>Connect Another Wallet</button>
-      <p>Active: {session?.auth.actor.toString()}</p>
-      <p>Total Sessions: {listSessions().length}</p>
-    </div>
+    <XPRNIdentityProofGate
+      fallback={<p>Please verify your identity to access this content.</p>}
+      loading={<p>Verifying identity...</p>}
+      error={<p>Verification failed. Please try again.</p>}
+      notConnected={<p>Please connect your wallet first.</p>}
+    >
+      <p>This content is only visible after identity verification.</p>
+    </XPRNIdentityProofGate>
   );
 }
 ```
 
-#### Listing and Switching Sessions
+### Props
+
+| Prop           | Type              | Description                                                              |
+| -------------- | ----------------- | ------------------------------------------------------------------------ |
+| `children`     | `React.ReactNode` | Content to render when identity proof is obtained.                       |
+| `fallback`     | `React.ReactNode` | Content to render when identity proof is not obtained (optional).        |
+| `loading`      | `React.ReactNode` | Content to render while identity proof is in progress (optional).        |
+| `error`        | `React.ReactNode` | Content to render when identity proof failed (optional, falls back to `fallback`). |
+| `notConnected` | `React.ReactNode` | Content to render when no session is connected (optional, falls back to `fallback`). |
 
-```jsx
-import {useXPRN} from "xprnkit";
+## useIdentityProofGate Hook
 
-function SessionSwitcher() {
-  const {listSessions, getActiveSession, setActiveSession} = useXPRN();
+Hook version of the gate component for programmatic access:
 
-  const sessions = listSessions();
-  const activeSession = getActiveSession();
+```tsx
+import { useIdentityProofGate } from '@rockerone/xprnkit';
 
-  return (
-    <div>
-      <h3>Connected Wallets</h3>
-      {sessions.map(session => (
-        <div key={session.actor}>
-          <button
-            onClick={() => setActiveSession(session.actor)}
-            disabled={activeSession?.actor === session.actor}
-          >
-            {session.profile?.displayName || session.actor}
-            {activeSession?.actor === session.actor && " (Active)"}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
+function MyComponent() {
+  const {
+    isGateActive,
+    isConnected,
+    isInProgress,
+    hasError,
+    isVerified,
+    shouldRenderChildren,
+    needsIdentityProof,
+    identityProofStatus,
+  } = useIdentityProofGate();
+
+  if (!shouldRenderChildren) {
+    return <p>Verification required</p>;
+  }
+
+  return <p>Verified content</p>;
 }
 ```
 
-#### Managing Multiple Sessions
+## Session Storage
 
-```jsx
-import {useXPRN} from "xprnkit";
+Identity proof tokens are automatically stored in localStorage and restored on session recovery. The token is validated silently when a session is restored, and if invalid, the full authentication flow is triggered again (when `required` is enabled).
 
-function SessionManager() {
-  const {listSessions, getActiveSession, removeSession, getAllProfiles} =
-    useXPRN();
+---
 
-  const handleRemoveSession = async (actor: string) => {
-    await removeSession(actor);
-  };
+# Multi-Account Support
 
-  return (
-    <div>
-      <h3>Session Manager</h3>
-      {listSessions().map(session => (
-        <div key={session.actor}>
-          <img
-            src={session.profile?.avatar}
-            alt={session.profile?.displayName}
-          />
-          <span>{session.profile?.displayName}</span>
-          <span>{session.actor}</span>
-          <button onClick={() => handleRemoveSession(session.actor)}>
-            Remove
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
+XPRNKit supports connecting multiple wallet accounts. Session persistence and restoration is handled by the Proton Web SDK storage layer, while profile data is persisted in localStorage by XPRNKit.
 
-#### Authenticating Specific Sessions
+### How It Works
 
-```jsx
-import {useXPRN} from "xprnkit";
+- When a user connects a wallet, the session is stored by the Proton Web SDK and the profile is saved in localStorage.
+- The provider maintains one **active session** at a time. The `session`, `link`, `profile`, and `identityProof` properties from `useXPRN()` always return data from the active session.
+- Use `switchToSession(actor, permission)` to switch to a different stored account. This restores the session from the SDK storage.
+- Use the `XPRNAccountList` component to provide a UI for users to switch, add, or remove accounts.
 
-function AuthenticateSession() {
-  const {authenticate, listSessions} = useXPRN();
+### Switching Accounts Programmatically
 
-  const handleAuthenticateSession = (actor: string) => {
-    authenticate(
-      response => {
-        console.log(`${actor} authenticated successfully`, response);
-      },
-      error => {
-        console.error(`${actor} authentication failed`, error);
-      },
-      actor // Authenticate specific session
-    );
+```tsx
+import { useXPRN } from '@rockerone/xprnkit';
+
+function AccountSwitcher() {
+  const { session, switchToSession } = useXPRN();
+
+  const handleSwitch = async () => {
+    await switchToSession("otheraccount", "active");
   };
 
   return (
     <div>
-      {listSessions().map(session => (
-        <div key={session.actor}>
-          <span>{session.actor}</span>
-          <span>
-            {session.authentication ? "✓ Authenticated" : "✗ Not Authenticated"}
-          </span>
-          {!session.authentication && (
-            <button onClick={() => handleAuthenticateSession(session.actor)}>
-              Authenticate
-            </button>
-          )}
-        </div>
-      ))}
+      <p>Current: {session?.auth.actor.toString()}</p>
+      <button onClick={handleSwitch}>Switch to otheraccount</button>
     </div>
   );
 }
 ```
 
-#### Disconnecting Specific Sessions
+---
 
-```jsx
-import {useXPRN} from "xprnkit";
+# Components
 
-function DisconnectSession() {
-  const {disconnect, listSessions, getActiveSession} = useXPRN();
+## XPRNConnectButton
 
-  const handleDisconnect = async (actor?: string) => {
-    // If actor is provided, disconnect that session
-    // Otherwise, disconnect active session
-    await disconnect(actor);
-  };
+A customizable button for connecting to and disconnecting from a wallet session.
 
-  return (
-    <div>
-      <button onClick={() => handleDisconnect()}>
-        Disconnect Active Session
-      </button>
-
-      {listSessions().map(session => (
-        <div key={session.actor}>
-          <span>{session.actor}</span>
-          <button onClick={() => handleDisconnect(session.actor)}>
-            Disconnect
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
+### Import
+
+```typescript
+import { XPRNConnectButton } from '@rockerone/xprnkit';
 ```
 
-### Backward Compatibility
+### Props
+
+| Prop              | Type                                                  | Description                                              |
+| ----------------- | ----------------------------------------------------- | -------------------------------------------------------- |
+| `className`       | `string`                                              | Additional CSS classes to apply to the button.           |
+| `variant`         | `string`                                              | Button variant (style).                                  |
+| `size`            | `string`                                              | Button size.                                             |
+| `asChild`         | `boolean`                                             | If true, renders the component as a child component.     |
+| `children`        | `React.ReactNode`                                     | Custom content for the button when not connected.        |
+| `onSession`       | `(session: LinkSession, link: ProtonWebLink \| Link) => void` | Called when session is established.              |
+| `onProfile`       | `(profile: XPRNKitProfile) => void`                   | Called when profile is fetched.                          |
+| `onIdentityProof` | `(proof: XPRNKitIdentityProof) => void`               | Called when identity proof is obtained.                  |
+| `...props`        | `React.ButtonHTMLAttributes<HTMLButtonElement>`        | Any other props accepted by HTML button element.         |
 
-All existing code continues to work without changes. The `session`, `link`, `profile`, and `authentication` properties always return data from the active session:
+### Usage
 
 ```jsx
-// This still works exactly as before
-function ExistingComponent() {
-  const {session, profile, connect, disconnect} = useXPRN();
+import { XPRNConnectButton } from '@rockerone/xprnkit';
 
-  // session, profile etc. return active session data
+function MyComponent() {
   return (
-    <div>
-      {session ? (
-        <div>
-          <p>Logged in as: {profile?.displayName}</p>
-          <button onClick={() => disconnect()}>Logout</button>
-        </div>
-      ) : (
-        <button onClick={() => connect()}>Connect</button>
-      )}
-    </div>
+    <XPRNConnectButton
+      className="custom-class"
+      onSession={(session, link) => console.log("Connected:", session.auth.actor.toString())}
+      onIdentityProof={(proof) => console.log("Identity verified:", proof.auth.actor)}
+    >
+      Connect Wallet
+    </XPRNConnectButton>
   );
 }
 ```
 
-## Authentication Persistence and SSR
+### Behavior
 
-### Overview
+- When there's no active session, the button displays the provided `children` content and triggers the `connect()` function when clicked.
+- When there's an active session, the button displays "Log out (actor)" and triggers the `disconnect()` function when clicked.
 
-XPRNKit automatically restores **wallet sessions** via the `restoreSession` config option, but **authentication data** (tokens, permissions, etc.) is **not automatically persisted** to give you full control over your security model.
+---
 
-This design is intentional:
-- ✅ **Wallet Connection** = Handled by XPRNKit (via Proton Web SDK)
-- ❌ **Authentication State** = Your responsibility (localStorage, cookies, server sessions, etc.)
+## XPRNIdentity
 
-### Storage Helper Utilities
+Displays user identity information with a dropdown menu and provides session management functionality.
 
-XPRNKit provides optional helper utilities:
+### Import
 
 ```typescript
-import { authStorage } from 'xprnkit';
-
-// Save authentication data
-authStorage.save('user@proton', {
-  actor: 'user@proton',
-  publicKey: 'PUB_K1_...',
-  data: { token: 'jwt-token' },
-  expiresAt: Date.now() + 86400000,
-});
-
-// Load/clear/list
-const auth = authStorage.load('user@proton');
-authStorage.clear('user@proton');
-authStorage.clearAll();
-const actors = authStorage.listActors();
+import { XPRNIdentity } from '@rockerone/xprnkit';
 ```
 
-### Implementation Patterns
+### Props
 
-#### Pattern 1: Client-Side (localStorage)
+| Prop                     | Type                                                  | Default | Description                                              |
+| ------------------------ | ----------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `children`               | `React.ReactNode`                                     | -       | Content to render inside the dropdown menu.              |
+| `className`              | `string`                                              | -       | Additional CSS classes for the root element.             |
+| `showLogout`             | `boolean`                                             | -       | Whether to show a logout link.                           |
+| `activeSessionClassName` | `string`                                              | -       | CSS classes for the active session container.            |
+| `dropdownClassName`      | `string`                                              | -       | CSS classes for the dropdown menu.                       |
+| `avatarClassName`        | `string`                                              | -       | CSS classes for the avatar component.                    |
+| `matchDropdownWidth`     | `boolean`                                             | `true`  | Match dropdown width to trigger width.                   |
+| `closeOnSelect`          | `boolean`                                             | `true`  | Close dropdown when children are clicked.                |
+| `onSession`              | `(session: LinkSession, link: ProtonWebLink \| Link) => void` | -  | Called when session is established.                    |
+| `onProfile`              | `(profile: XPRNKitProfile) => void`                   | -       | Called when profile is fetched.                          |
+| `onIdentityProof`        | `(proof: XPRNKitIdentityProof) => void`               | -       | Called when identity proof is obtained.                  |
 
-**Use Case:** Simple apps, prototypes
+### Usage
 
-```typescript
-import { useXPRN, authStorage } from 'xprnkit';
-
-function MyApp() {
-  const { session, authenticate } = useXPRN();
-
-  const handleAuth = () => {
-    authenticate(
-      (authData) => {
-        authStorage.save(session.auth.actor.toString(), {
-          actor: session.auth.actor.toString(),
-          publicKey: session.publicKey.toString(),
-          data: authData,
-          expiresAt: Date.now() + 86400000,
-        });
-      },
-      (error) => console.error(error)
-    );
-  };
+```jsx
+import { XPRNIdentity } from '@rockerone/xprnkit';
+
+function MyComponent() {
+  return (
+    <XPRNIdentity showLogout={true} avatarClassName="custom-avatar">
+      <div>Additional dropdown content</div>
+    </XPRNIdentity>
+  );
 }
 ```
 
-#### Pattern 2: SSR with Cookies (Next.js)
-
-**Use Case:** Next.js apps, production
+### Functionality
 
-**Client:**
-```typescript
-'use client';
-import { useXPRN } from 'xprnkit';
-
-function MyApp() {
-  const { session, authenticate } = useXPRN();
-
-  const handleAuth = () => {
-    authenticate(
-      async (authData) => {
-        await fetch('/api/auth/session', {
-          method: 'POST',
-          body: JSON.stringify({ actor: session.auth.actor, authData }),
-        });
-      },
-      (error) => console.error(error)
-    );
-  };
-}
-```
+1. If a user session exists:
+   - Displays a dropdown menu with the user's avatar and session information
+   - Shows the user's name and actor information
+   - Optionally displays a logout link
+   - Renders any child components in the dropdown content
 
-**Server:**
-```typescript
-// app/api/auth/session/route.ts
-import { NextResponse } from 'next/server';
-
-export async function POST(request: Request) {
-  const body = await request.json();
-  const response = NextResponse.json({ success: true });
-  
-  response.cookies.set('xprn_session', createToken(body), {
-    httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    maxAge: 86400,
-  });
-  
-  return response;
-}
-```
+2. If no user session exists:
+   - Displays a "Connect" button using the `XPRNConnectButton` component
 
-#### Pattern 3: Server Sessions (Redis/DB)
+### Identity Sub-Components
 
-**Use Case:** Scalable production apps
+The following components are also exported and can be used independently:
 
 ```typescript
-// app/api/session/create/route.ts
-import { redis } from '@/lib/redis';
-import { randomUUID } from 'crypto';
-
-export async function POST(request: Request) {
-  const body = await request.json();
-  const sessionId = randomUUID();
-  
-  await redis.setex(\`session:\${sessionId}\`, 86400, JSON.stringify(body));
-  
-  const response = NextResponse.json({ success: true });
-  response.cookies.set('session_id', sessionId, { httpOnly: true });
-  return response;
-}
+import {
+  XPRNAvatar,
+  XPRNSessionActor,
+  XPRNSessionName,
+} from '@rockerone/xprnkit';
 ```
 
-### Comparison
-
-| Approach | Security | SSR | Best For |
-|----------|----------|-----|----------|
-| **localStorage** | Medium | ❌ | Client apps |
-| **Cookies** | High | ✅ | SSR apps |
-| **Server Sessions** | Very High | ✅ | Production |
-
-### Full Examples
+- **XPRNAvatar**: Renders the user's profile avatar.
+- **XPRNSessionActor**: Displays the current session's actor (e.g., `user1@active`).
+- **XPRNSessionName**: Displays the current session user's display name.
 
-See the `examples/` directory for complete implementations:
-- `auth-localstorage.example.tsx` - Client-side with localStorage
-- `auth-cookies-ssr.example.tsx` - SSR with httpOnly cookies
-- `auth-server-session.example.tsx` - Server sessions with Redis/PostgreSQL
-
-# Components Documentation
+---
 
-# XRPNContainer
+## XPRNAccountList
 
-`XRPNContainer` is a React component that conditionally renders its children based on the presence of a session.
+Lists all stored accounts and allows switching between them, adding new accounts, and removing existing ones.
 
-## Import
+### Import
 
 ```typescript
-import {XRPNContainer} from "path/to/xprn-container";
+import { XPRNAccountList } from '@rockerone/xprnkit';
 ```
 
-## Props
-
-The `XRPNContainer` component accepts the following props:
+### Props
 
-| Prop             | Type                       | Description                                                 |
-| ---------------- | -------------------------- | ----------------------------------------------------------- |
-| `children`       | `ReactNode \| ReactNode[]` | The content to be rendered when a session is present.       |
-| `className`      | `string`                   | Optional CSS class name(s) to be applied to the container.  |
-| `noSessionState` | `ReactNode \| ReactNode[]` | Optional content to be rendered when no session is present. |
+| Prop                  | Type                                                      | Default        | Description                                        |
+| --------------------- | --------------------------------------------------------- | -------------- | -------------------------------------------------- |
+| `showRemove`          | `boolean`                                                 | `false`        | Show remove button for each account.               |
+| `showAddAccount`      | `boolean`                                                 | `false`        | Show an "Add Account" button.                      |
+| `addAccountLabel`     | `string`                                                  | `"Add Account"` | Custom label for the add account button.          |
+| `addAccountClassName` | `string`                                                  | -              | CSS class for the add account button.              |
+| `renderItem`          | `(props: AccountItemRenderProps) => React.ReactNode`      | -              | Custom render function for each account item.      |
+| `onSelect`            | `(entry: XPRNKitProfileStorageEntry) => void`             | -              | Called when an account is selected.                |
+| `onRemove`            | `(entry: XPRNKitProfileStorageEntry) => void`             | -              | Called when an account is removed.                 |
+| `onAddAccount`        | `() => void`                                              | -              | Called when the add account button is clicked.     |
+| `itemClassName`       | `string`                                                  | -              | CSS class for account items.                       |
+| `activeClassName`     | `string`                                                  | -              | CSS class for the active account item.             |
+| `className`           | `string`                                                  | -              | Additional CSS classes for the root element.       |
+
+### AccountItemRenderProps
 
-Additionally, `XRPNContainer` accepts all standard HTML div element attributes.
+```typescript
+type AccountItemRenderProps = {
+  entry: XPRNKitProfileStorageEntry;
+  isActive: boolean;
+  onSelect: () => void;
+  onRemove?: () => void;
+};
+```
 
-## Usage
+### Usage
 
 ```jsx
-import {XRPNContainer} from "path/to/xprn-container";
+import { XPRNIdentity, XPRNAccountList } from '@rockerone/xprnkit';
 
-function MyComponent() {
+function Navbar() {
   return (
-    <XRPNContainer
-      className="my-custom-class"
-      noSessionState={<p>Please log in to view content.</p>}
-    >
-      <h1>Welcome, user!</h1>
-      <p>This content is only visible when a session is present.</p>
-    </XRPNContainer>
+    <XPRNIdentity showLogout>
+      <XPRNAccountList
+        showAddAccount
+        showRemove
+        onSelect={(entry) => console.log("Switched to:", entry.auth.actor)}
+      />
+    </XPRNIdentity>
   );
 }
 ```
 
-## Behavior
-
-- If a session is present (determined by the `useXPRN` hook), the component renders its `children`.
-- If no session is present, the component renders the `noSessionState` content if provided, otherwise it renders nothing.
-
-## Dependencies
+### Behavior
 
-- React
-- `useXPRN` hook from "../providers/XPRNProvider"
+- Reads stored profiles from localStorage and displays them as a list.
+- The active account is highlighted with a checkmark.
+- Clicking an account calls `switchToSession` to restore that session.
+- The "Add Account" button triggers a new wallet connection via `connect()`.
+- Each account item shows the avatar, display name, actor, KYC badge, and identity proof badge.
 
-## Notes
-
-- This component uses the "use client" directive, indicating it's designed for client-side rendering in Next.js applications.
-- The component leverages the `useXPRN` hook to determine the session state.
+---
 
-# XPRNConnectButton
+## XRPNContainer / XPRNLogged / XPRNUnlogged
 
-The `XPRNConnectButton` is a React component that provides a customizable button for connecting to and disconnecting from an XPRN session.
+Conditional rendering components based on the presence of a session.
 
-## Import
+### Import
 
 ```typescript
-import {XPRNConnectButton} from "packages/xprnkit/src/components/xprn-session";
+import { XRPNContainer, XPRNLogged, XPRNUnlogged } from '@rockerone/xprnkit';
 ```
 
-## Props
-
-The `XPRNConnectButton` accepts the following props:
+### XRPNContainer
 
-| Prop        | Type                                            | Description                                                                     |
-| ----------- | ----------------------------------------------- | ------------------------------------------------------------------------------- |
-| `className` | `string`                                        | Additional CSS classes to apply to the button                                   |
-| `variant`   | `string`                                        | Button variant (style)                                                          |
-| `size`      | `string`                                        | Button size                                                                     |
-| `asChild`   | `boolean`                                       | If true, renders the component as a child component                             |
-| `onClick`   | `function`                                      | Custom click handler (Note: internal connect/disconnect logic will still apply) |
-| `children`  | `React.ReactNode`                               | Custom content for the button when not connected                                |
-| `...props`  | `React.ButtonHTMLAttributes<HTMLButtonElement>` | Any other props accepted by HTML button element                                 |
+Renders `children` when a session is present, or `noSessionState` content otherwise.
 
-## Usage
+| Prop             | Type                       | Description                                                 |
+| ---------------- | -------------------------- | ----------------------------------------------------------- |
+| `children`       | `ReactNode \| ReactNode[]` | Content to render when a session is present.                |
+| `className`      | `string`                   | Optional CSS class name(s).                                 |
+| `noSessionState` | `ReactNode \| ReactNode[]` | Content to render when no session is present.               |
 
 ```jsx
-import {XPRNConnectButton} from "packages/xprnkit/src/components/xprn-session";
-
-function MyComponent() {
-  return (
-    <XPRNConnectButton variant="primary" size="medium" className="custom-class">
-      Connect to XPRN
-    </XPRNConnectButton>
-  );
-}
+<XRPNContainer noSessionState={<p>Please log in.</p>}>
+  <p>Welcome! You are connected.</p>
+</XRPNContainer>
 ```
 
-## Behavior
-
-- When there's no active session, the button displays the provided `children` content and triggers the `connect()` function when clicked.
-- When there's an active session, the button displays "Log out (actor)" and triggers the `disconnect()` function when clicked.
+### XPRNLogged
 
-## Notes
+Renders its children **only** when a session is present.
 
-- The component uses the `useXPRN` hook to access the current session state and connect/disconnect functions.
+```jsx
+<XPRNLogged>
+  <p>This is only visible when connected.</p>
+</XPRNLogged>
+```
 
-# XPRNIdentity Component
+### XPRNUnlogged
 
-## Overview
+Renders its children **only** when no session is present.
 
-The `XPRNIdentity` component is a React functional component that displays user identity information and provides session management functionality
+```jsx
+<XPRNUnlogged>
+  <p>Please connect your wallet to continue.</p>
+</XPRNUnlogged>
+```
 
-## Props
+---
 
-The component accepts the following props:
+## XPRNTransaction
 
-- `children`: React nodes to be rendered inside the dropdown menu (optional)
-- `className`: Additional CSS classes for the root element (optional)
-- `showLogout`: Boolean to determine if the logout link should be displayed (optional)
-- `activeSessionClassName`: Additional CSS classes for the active session container (optional)
-- `dropdownClassName`: Additional CSS classes for the dropdown menu (optional)
-- `avatarClassName`: Additional CSS classes for the avatar component (optional)
+A button component that pushes a blockchain transaction using the active session.
 
-## Functionality
+### Import
 
-1. If a user session exists:
+```typescript
+import { XPRNTransaction } from '@rockerone/xprnkit';
+```
 
-   - Displays a dropdown menu with the user's avatar and session information
-   - Shows the user's name and actor information
-   - Optionally displays a logout link
-   - Renders any child components in the dropdown content
+### Props
 
-2. If no user session exists:
-   - Displays a "Connect" button using the `XPRNConnectButton` component
+| Prop                   | Type                              | Description                                              |
+| ---------------------- | --------------------------------- | -------------------------------------------------------- |
+| `actions`              | `any[]`                           | Array of transaction actions to push.                    |
+| `onTransactionStart`   | `() => void`                      | Called when the transaction starts (optional).            |
+| `onTransactionSuccess` | `(res: TransactResult) => void`   | Called when the transaction succeeds (optional).          |
+| `onTransactionFail`    | `(e: any) => void`                | Called when the transaction fails (optional).             |
+| `className`            | `string`                          | Additional CSS classes.                                  |
+| `variant`              | `string`                          | Button variant (style).                                  |
+| `size`                 | `string`                          | Button size.                                             |
+| `asChild`              | `boolean`                         | If true, renders as a child component.                   |
+| `children`             | `React.ReactNode`                 | Button label content.                                    |
 
-## Usage
+### Usage
 
 ```jsx
-import {XPRNIdentity} from "path/to/xprn-identity";
+import { XPRNTransaction } from '@rockerone/xprnkit';
 
-function MyComponent() {
+function SwapButton({ actions }) {
   return (
-    <XPRNIdentity showLogout={true} avatarClassName="custom-avatar">
-      <div>Additional dropdown content</div>
-    </XPRNIdentity>
+    <XPRNTransaction
+      actions={actions}
+      onTransactionSuccess={(res) => console.log("Success:", res)}
+      onTransactionFail={(err) => console.error("Failed:", err)}
+    >
+      Swap
+    </XPRNTransaction>
   );
 }
 ```
 
-## Notes
-
-- The component is wrapped in a "use client" directive, indicating it's designed for client-side rendering.
-- It uses the `useXPRN` hook to access session information and the `disconnect` function.
-- The logout functionality is implemented using the `disconnect` function from the XPRN context.
+### Behavior
 
-## Identity sub components
+- When no session is present, displays a "Connect" button that triggers wallet connection.
+- When a session is present, clicking the button pushes the transaction.
+- Automatically shows loading spinner during transaction and success/fail states after completion.
 
-The following components are used inside XPRNIdentity:
-
-1. **XPRNAvatar**
-
-   - Exported from: `'./xprn-avatar'`
-   - Description: A component for rendering user avatars or profile pictures.
-
-2. **XPRNSessionActor**
-
-   - Exported from: `'./xprn-session-actor'`
-   - Description: Related to the current session's active user or actor.
-
-3. **XPRNSessionName**
-   - Exported from: `'./xprn-session-name'`
-   - Description: For displaying the current session user's name.
-
-## Usage
-
-To use these components in your project, you can import them from this file:
+---
 
-```typescript
-import {
-  XPRNAvatar,
-  XPRNSessionActor,
-  XPRNSessionName,
-} from "xprnkit/src/components/identity";
-```
+# Swap Components
 
-# XPRNSwap Component
+## XPRNSwap
 
-The `XPRNSwap` component is a React functional component that provides a user interface for XPR Network tokens swapping functionality out of the box.
+The `XPRNSwap` component provides a complete token swap interface out of the box.
 
-## Import
+### Import
 
 ```typescript
-import {XPRNSwap} from "packages/xprnkit/src/components/swap/xprn-swap";
+import { XPRNSwap } from '@rockerone/xprnkit';
 ```
 
-## Props
-
-The `XPRNSwap` component accepts the following props:
+### Props
 
 | Prop        | Type                            | Description                                                 |
 | ----------- | ------------------------------- | ----------------------------------------------------------- |
@@ -865,38 +678,44 @@ The `XPRNSwap` component accepts the following props:
 | `className` | `string`                        | Optional. Additional CSS classes to apply to the component. |
 | `children`  | `React.ReactNode`               | Optional. Child elements to render within the component.    |
 
-Additionally, the component accepts all standard HTML attributes for a `div` element.
-
-## Usage
+### Usage
 
-### Basic
+#### Basic
 
 ```jsx
 <XPRNSwap />
 ```
 
-### With config
+#### With config
 
 ```jsx
 <XPRNSwap
-filters={...}
-sides={['buy', 'sell']}
-markets={['market1', 'market2']}
-className="custom-class"
+  filters={{ quoteSymbol: "XUSDC" }}
+  sides={['buy', 'sell']}
+  className="custom-class"
 />
 ```
 
-### Customs using `XPRNSwapProvider`
+#### Custom layout using `XPRNSwapProvider`
 
 ```jsx
+import {
+  XPRNSwapProvider,
+  XPRNPairsSelector,
+  XPRNSwapFieldsGroup,
+  XPRNSwapField,
+  XPRNSwapSideButton,
+  XPRNTransaction,
+} from '@rockerone/xprnkit';
+
 <XPRNSwapProvider
-  config={{filters: {quoteSymbol: "SNIPS", baseSymbol: "XUSDC"}}}
+  config={{ filters: { quoteSymbol: "SNIPS", baseSymbol: "XUSDC" } }}
 >
-  <div className="p4 bg-green-400 grid grid-cols-[1fr,min-content] gap-6 p-4 w-full">
+  <div className="grid grid-cols-[1fr,min-content] gap-6 p-4 w-full">
     <XPRNPairsSelector />
     <XPRNSwapFieldsGroup horizontal className="w-full">
       <XPRNSwapField />
-      <XPRNSwapSideButton horizontal>Yo!</XPRNSwapSideButton>
+      <XPRNSwapSideButton horizontal>Swap</XPRNSwapSideButton>
       <XPRNSwapField />
     </XPRNSwapFieldsGroup>
     <XPRNTransaction>Swap</XPRNTransaction>
@@ -904,41 +723,34 @@ className="custom-class"
 </XPRNSwapProvider>
 ```
 
-## Behavior
+### Behavior
 
 1. The component wraps its content in an `XPRNSwapProvider` to provide context for swap-related data and functionality.
 2. It renders an `XPRNSwapLayout` component within the provider.
 3. The component applies a default grid layout with padding and border styling.
-4. Custom CSS classes can be added via the `className` prop.
-
-## Dependencies
-
-- XPRNSwapProvider
-- XPRNSwapLayout
-
-## Notes
+4. Alternatively, you can rebuild the entire swap layout using the sub-components wrapped in a `XPRNSwapProvider`.
 
-- Alternatively, XPRNSwap component allow you to rebuild the entire swap component layout the way you want by using it's sub components wrapped in a `XPRNSwapProvider`
+---
 
-# XPRNSwapProvider
+## XPRNSwapProvider
 
-The `XPRNSwapProvider` is a React component that provides context for managing cryptocurrency swap operations.
+The `XPRNSwapProvider` is a React component that provides context for managing swap operations.
 
-## Usage
+### Usage
 
 ```jsx
-import { XPRNSwapProvider } from 'path/to/xprn-swap-provider';
+import { XPRNSwapProvider } from '@rockerone/xprnkit';
 
 function App() {
   return (
     <XPRNSwapProvider config={/* optional config */}>
-      {/* Your app components and XPRNKit swap sub components */}
+      {/* Your swap sub-components */}
     </XPRNSwapProvider>
   );
 }
 ```
 
-## Props
+### Props
 
 | Prop       | Type                                   | Description                                    |
 | ---------- | -------------------------------------- | ---------------------------------------------- |
@@ -953,9 +765,18 @@ function App() {
 | `marketFilters` | `string[]` (optional)                      | Filters for specific markets               |
 | `sides`         | `XPRNSwapSide[]` (optional)                | Available swap sides (e.g., "buy", "sell") |
 
-## Context
+### Context (useXPRNSwap)
+
+The `useXPRNSwap` hook provides access to the swap context:
+
+```jsx
+import { useXPRNSwap } from '@rockerone/xprnkit';
 
-The `XPRNSwapProvider` creates a context with the following properties and methods:
+function SwapComponent() {
+  const { currentSwapPair, swapSide, setSwapSide } = useXPRNSwap();
+  // ...
+}
+```
 
 | Property/Method            | Type                                                                    | Description                                 |
 | -------------------------- | ----------------------------------------------------------------------- | ------------------------------------------- |
@@ -968,7 +789,7 @@ The `XPRNSwapProvider` creates a context with the following properties and metho
 | `setCurrentSwapPair`       | `(pair: XPRNMarketProviderResult) => void`                              | Function to set the current swap pair       |
 | `currentSwapPair`          | `XPRNMarketProviderResult \| null`                                      | Currently selected swap pair                |
 | `swapTransaction`          | `any[]`                                                                 | Current swap transaction details            |
-| `swapSide`                 | `XPRNSwapSide`                                                          | Current swap side (e.g., "buy" or "sell")   |
+| `swapSide`                 | `XPRNSwapSide`                                                          | Current swap side ("buy" or "sell")         |
 | `setSwapSide`              | `(value: XPRNSwapSide) => void`                                         | Function to set the swap side               |
 | `swapVolume`               | `number`                                                                | Current swap volume                         |
 | `setSwapVolume`            | `(value: number) => void`                                               | Function to set the swap volume             |
@@ -976,47 +797,25 @@ The `XPRNSwapProvider` creates a context with the following properties and metho
 | `swapValues`               | `XPRNSwapValues`                                                        | Current swap values                         |
 | `updateSwapValues`         | `(base: number, quote: number, lastMutated: "base" \| "quote") => void` | Function to update swap values              |
 
-## Hook
-
-The `useXPRNSwap` hook can be used to access the `XPRNSwapProvider` context in child components.
+### Notes
 
-### Usage
-
-```jsx
-import { useXPRNSwap } from 'path/to/xprn-swap-provider';
-
-function SwapComponent() {
-  const { currentSwapPair, swapSide, setSwapSide } = useXPRNSwap();
-
-  // Use the context values and methods
-  // ...
-
-  return (
-    // Your component JSX
-  );
-}
-```
-
-## Notes
-
-- The provider fetches market pairs from the selected market provider's endpoint (currently Alcor is the only supported exchange). You can edit or add new provider using the `XPRNMarketProvider` interface.
+- The provider fetches market pairs from the selected market provider's endpoint (currently Alcor is the only supported exchange). You can add new providers using the `XPRNMarketProvider` interface.
 - It manages the state of the current swap, including the selected pair, swap side, and volume.
 - The provider automatically updates swap transactions when relevant values change.
-- Error handling is implemented for network requests and configuration issues.
 
-# XPRNSwapFieldsGroup
+---
+
+## XPRNSwapFieldsGroup
 
-The `XPRNSwapFieldsGroup` is a React component that provides a flexible container for grouping swap fields in the XPRN swap interface. It's a utility component that flip swap fields position according to side (buy or sell)
+A flexible container for grouping swap fields that flips field positions according to the swap side (buy or sell).
 
-## Import
+### Import
 
 ```typescript
-import {XPRNSwapFieldsGroup} from "packages/xprnkit/src/components/swap/xprn-swap-fields-group";
+import { XPRNSwapFieldsGroup } from '@rockerone/xprnkit';
 ```
 
-## Props
-
-The component accepts the following props:
+### Props
 
 | Prop         | Type              | Default     | Description                                               |
 | ------------ | ----------------- | ----------- | --------------------------------------------------------- |
@@ -1024,229 +823,181 @@ The component accepts the following props:
 | `className`  | `string`          | `undefined` | Additional CSS classes to be applied to the root element. |
 | `horizontal` | `boolean`         | `false`     | Determines if the fields should be arranged horizontally. |
 
-Additionally, the component accepts all standard HTML div element attributes.
-
-## Usage
-
-```jsx
-import {XPRNSwapFieldsGroup} from "packages/xprnkit/src/components/swap/xprn-swap-fields-group";
-
-function SwapInterface() {
-  return (
-    <XPRNSwapFieldsGroup horizontal={true} className="custom-class">
-      {/* Swap field components go here */}
-    </XPRNSwapFieldsGroup>
-  );
-}
-```
-
-## Behavior
+### Behavior
 
-- The component uses the `useXPRNSwap` hook to access the current swap configuration.
-- It dynamically applies CSS classes based on the `horizontal` prop and the current `swapSide`.
 - The layout of child components is reversed when `swapSide` is "sell".
-- The component supports both vertical (default) and horizontal layouts.
+- Supports both vertical (default) and horizontal layouts.
+
+---
 
-# XPRNSwapSideButton
+## XPRNSwapField
 
-The `XPRNSwapSideButton` is a React component that provides a button for switching between "buy" and "sell" sides in a swap interface.
+An input field for entering the amount of tokens to swap, for either the base or quote currency.
 
-## Import
+### Import
 
 ```typescript
-import {XPRNSwapSideButton} from "path/to/xprn-swap-side-button";
+import { XPRNSwapField } from '@rockerone/xprnkit';
 ```
 
-## Props
-
-The component accepts the following props:
-
-| Prop         | Type              | Default     | Description                                                                                   |
-| ------------ | ----------------- | ----------- | --------------------------------------------------------------------------------------------- |
-| `horizontal` | `boolean`         | `false`     | Determines the orientation of the swap icon. If `true`, a horizontal arrow icon is displayed. |
-| `children`   | `React.ReactNode` | `undefined` | Custom content to be rendered inside the button. If not provided, a default icon is used.     |
-| `className`  | `string`          | `undefined` | Additional CSS classes to be applied to the button.                                           |
+### Props
 
-The component also accepts all standard HTML attributes for a `div` element.
+- `type`: `"quote" | "base"` - Indicates whether this field is for the quote or base currency.
+- `className`: Optional string for additional CSS classes.
 
-## Usage
+Must be wrapped in a `XPRNSwapProvider`.
 
-```jsx
-import {XPRNSwapSideButton} from "path/to/xprn-swap-side-button";
+### Usage
 
-function SwapInterface() {
-  return (
-    <div>
-      {/* Other swap interface components */}
-      <XPRNSwapSideButton horizontal={true} className="custom-class" />
-    </div>
-  );
-}
+```tsx
+<XPRNSwapField type="base" className="custom-class" />
 ```
 
-## Behavior
-
-- The button toggles between "buy" and "sell" sides when clicked.
-- It uses the `useXPRNSwap` hook to access and modify the swap state.
-- The button is not rendered if the swap configuration only has one side.
-- The button has a hover effect that rotates it 180 degrees.
-
-## Customization
-
-- You can provide custom content by passing children to the component.
-- The default icon can be overridden by passing custom JSX as children.
-- Additional styling can be applied using the `className` prop.
-
-## Notes
-
-- The component is wrapped with `"use client"` directive, indicating it's a Client Component in Next.js.
-- It uses React hooks (`useCallback`, `useMemo`) for performance optimization.
-
-# XPRNSwapField Component
-
-## Overview
-
-The `XPRNSwapField` is a React component used in a the `XPRNSwap` interface. It provides an input field for users to enter the amount of tokens they want to swap, either for the base or quote currency of a trading pair. This component should be wrapped in a `XPRNSwapProvider`
-
-## Props
-
-The component accepts the following props:
-
-- `type`: A string, either "quote" or "base", indicating whether this field is for the quote or base currency.
-- `className`: An optional string for additional CSS classes.
-- `children`: Optional child elements (not used in the current implementation).
+---
 
-It also accepts any other props that can be applied to a `div` element.
+## XPRNSwapSideButton
 
-## Usage
+A button for switching between "buy" and "sell" sides in the swap interface.
 
-```tsx
-import {XPRNSwapField} from "./path/to/xprn-swap-field";
+### Import
 
-<XPRNSwapField type="base" className="custom-class" />;
+```typescript
+import { XPRNSwapSideButton } from '@rockerone/xprnkit';
 ```
 
-## Styling
-
-The component uses CSS classes for styling, including conditional classes based on the `className` prop and predefined classes for the input field.
-
-# XPRNSwapMarketsSelector
-
-## Overview
+### Props
 
-`XPRNSwapMarketsSelector` is a React functional component that renders a dropdown selector for swap market providers. It uses the `Select` component from a UI library and populates it with market providers from the `useXPRNSwap` hook. The component must be wrapped in a `XPRNSwapProvider` in order to be fed by markets config provided through `XPRNSwapProvider` config.
+| Prop         | Type              | Default     | Description                                                                        |
+| ------------ | ----------------- | ----------- | ---------------------------------------------------------------------------------- |
+| `horizontal` | `boolean`         | `false`     | If `true`, displays a horizontal arrow icon.                                       |
+| `children`   | `React.ReactNode` | `undefined` | Custom content inside the button. If not provided, a default arrow icon is used.   |
+| `className`  | `string`          | `undefined` | Additional CSS classes.                                                            |
 
-## Props
+### Behavior
 
-The component accepts the following props:
+- Toggles between "buy" and "sell" sides when clicked.
+- Not rendered if the swap configuration only has one side.
+- Has a hover effect that rotates the icon 180 degrees.
 
-- `children`: React node (optional)
-- `className`: string (optional)
+---
 
-These props are extended from `React.HTMLAttributes<HTMLDivElement>`.
+## XPRNSwapMarketsSelector
 
-## Usage
+A dropdown selector for swap market providers. Must be wrapped in a `XPRNSwapProvider`.
 
-```tsx
-import {XPRNSwapMarketsSelector} from "path/to/xprn-swap-markets-selector";
+### Import
 
-function MyComponent() {
-  return <XPRNSwapMarketsSelector className="custom-class" />;
-}
+```typescript
+import { XPRNSwapMarketsSelector } from '@rockerone/xprnkit';
 ```
 
-## Functionality
-
-1. The component uses the `useXPRNSwap` hook to get `marketProviders`.
-2. It initializes `services` state with `useState`.
-3. `defaultServices` are memoized using `useMemo` and set to `DEFAULT_SWAP_SERVICES`.
-4. `defaultService` is memoized to find the first service marked as default or the first service in the list.
-5. The component renders a `Select` component
-
-## Conditional Rendering
+### Props
 
-The component only renders if there is more than one market provider (`marketProviders.length > 1`).
+- `className`: Optional string for additional CSS classes.
 
-## Styling
+Only renders if there is more than one market provider available.
 
-The component uses `classNames` for conditional class application. The root `div` element receives the `className` prop if provided.
+---
 
-# XPRNPairsSelector Component
+## XPRNPairsSelector
 
-The `XPRNPairsSelector` is a React component that provides a dropdown selector for available (filtered or not) trading pairs form the selected market provider. It's designed to work within the context of an `XPRNSwapProvider`.
+A dropdown selector for available trading pairs from the selected market provider. Must be wrapped in a `XPRNSwapProvider`.
 
-## Import Statement
+### Import
 
 ```typescript
-import * as React from "react";
-import classNames from "classnames";
-import {useXPRNSwap} from "./xprn-swap-provider";
-import {
-  Select,
-  SelectItem,
-  SelectContent,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
+import { XPRNPairsSelector } from '@rockerone/xprnkit';
 ```
 
-## Props
-
-The component accepts the following props:
-
-- `className?: string`: Additional CSS classes for the root element.
-- `contentClassName?: string`: Additional CSS classes for the dropdown content.
-- `itemsClassName?: string`: Additional CSS classes for the dropdown items.
+### Props
 
-These props extend the standard `HTMLDivElement` attributes.
+- `className`: Optional CSS classes for the root element.
+- `contentClassName`: Optional CSS classes for the dropdown content.
+- `itemsClassName`: Optional CSS classes for the dropdown items.
 
-## Functionality
+### Behavior
 
-1. The component uses the `useXPRNSwap` hook to access swap-related data and functions.
-2. It displays a dropdown of available trading pairs when the loaded by the `XPRNSwapProvider` from the default or selected market provider.
-3. Users can select a trading pair, which updates the current swap pair inside the `XPRNSwapProvider`.
-4. The component shows loading and error states based on the `XPRNSwapProvider` loading status of the pair list.
+- Displays available trading pairs from the current market provider.
+- Shows loading and error states based on the pair list fetch status.
+- Does not render if there is only one or zero pairs available.
 
-## Usage
+---
 
-```tsx
-<XPRNPairsSelector
-  className="custom-class"
-  contentClassName="content-class"
-  itemsClassName="item-class"
-/>
-```
+# Types Reference
 
-## Render Logic
+```typescript
+type XPRProviderConfig = {
+  chainId: string;
+  endpoints: string[];
+  dAppName: string;
+  requesterAccount: string;
+  requesterLogo?: string;
+  apiMode: "testnet" | "mainnet";
+  restoreSession?: boolean;
+  identityProof?: XPRNKitIdentityProofConfig;
+};
 
-- If loading of the is "idle":
-  - Renders a `Select` component with the current pairs as options.
-- If loading of the is "pending":
-  - Displays "Loading Pairs".
-- If loading of the is "fail":
-  - Displays "Pairs shit" (consider changing this to a more appropriate error message).
+type XPRNKitProfile = {
+  displayName: string;
+  avatar?: string;
+  isKyc: boolean;
+};
 
-## Styling
+type XPRNKitIdentityProofConfig = {
+  required: boolean;
+  createUrl: string;
+  validationUrl?: string;
+  validationBuffer?: number;
+  headers?: Record<string, string>;
+  timeout?: number;
+};
 
-The component uses `classNames` for conditional styling:
+type XPRNKitIdentityProof = {
+  auth: {
+    actor: string;
+    permission: string;
+  };
+  token: string;
+};
 
-- Root element: Applies the `className` prop if provided.
-- Dropdown content: Applies "bg-white" and the `contentClassName` prop if provided.
-- Dropdown items: Applies "text-black" and the `itemsClassName` prop if provided.
+type XPRNKitIdentityProofPayload = {
+  signer: {
+    actor: string;
+    permission: string;
+  };
+  transaction: any;
+  signatures: string[];
+  chainId: string;
+};
 
-## Notes
+type XPRNKitIdentityProofStatus =
+  | "idle"
+  | "signing"
+  | "verifying"
+  | "validating"
+  | "success"
+  | "expired"
+  | "error";
+
+type XPRNKitProfileStorageEntry = {
+  auth: {
+    actor: string;
+    permission: string;
+  };
+  chainId: string;
+  profile: XPRNKitProfile;
+};
+```
 
-- The component doesn't render anything if there's only one or zero market pairs available.
-- The default selected value is set based on the `currentSwapPair`.
-- Consider improving the error message for the "fail" state to be more user-friendly and informative.
+---
 
-# toPrecision
+# Utilities
 
-## Description
+## toPrecision
 
-The `toPrecision` function adjusts a numeric value to a specified precision, with options for rounding behavior and decimal representation. It's used to format the an arbitrary price according to the token precision.
+The `toPrecision` function adjusts a numeric value to a specified precision, with options for rounding behavior and decimal representation. It's used to format an arbitrary price according to the token precision.
 
-## Function Signature
+### Function Signature
 
 ```typescript
 function toPrecision(
@@ -1257,7 +1008,7 @@ function toPrecision(
 ): string;
 ```
 
-## Parameters
+### Parameters
 
 - `value` (number): The input number to be adjusted.
 - `precision` (number): The number of decimal places to round to.
@@ -1268,19 +1019,11 @@ function toPrecision(
   - 'none': Uses 'ceil' behavior (same as 'ceil').
 - `forceDecimal` (boolean, optional): Whether to force the output to include decimal places. Defaults to true.
 
-## Returns
+### Returns
 
 - (string): The adjusted value as a string, with or without forced decimal places based on the `forceDecimal` parameter.
 
-## Behavior
-
-1. Multiplies the input `value` by 10^`precision` to shift the decimal point.
-2. Applies the specified rounding `mode` to the shifted value.
-3. Divides the result by 10^`precision` to shift the decimal point back.
-4. If `forceDecimal` is true, returns the result with the specified number of decimal places.
-5. If `forceDecimal` is false, returns the result as a string without forcing decimal places.
-
-## Example Usage
+### Example Usage
 
 ```typescript
 console.log(toPrecision(3.14159, 2)); // "3.15"
@@ -1290,9 +1033,3 @@ console.log(toPrecision(3.14159, 2, "ceil", false)); // "3.15"
 console.log(toPrecision(3, 2, "none", true)); // "3.00"
 console.log(toPrecision(3, 2, "ceil", false)); // "3"
 ```
-
-## Notes
-
-- The 'none' mode behaves the same as 'ceil' mode.
-- When `forceDecimal` is true, the output will always have the specified number of decimal places, even if the input is an integer.
-- When `forceDecimal` is false, the output may have fewer decimal places than specified if they are not needed (e.g., for whole numbers).