@jaw.id/ui 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export * from './components/DefaultDialog';
+export * from './components/OrSeparator';
+export * from './components/OnboardingDialog';
+export * from './components/TransactionDialog';
+export * from './components/SignatureDialog';
+export * from './components/SiweDialog';
+export * from './components/ConnectDialog';
+export * from './components/Eip712Dialog';
+export * from './components/PermissionDialog';
+export * from './components/FeeTokenSelector';
+export * from './lib/utils';
+export * from './icons';
+export * from './hooks';
+export * from './utils';
+export * from './react';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,38 @@
+import { q as e, m as o, C as n, o as c, n as i, D as t, E as l, r, p as I, F as d, G as g, L as D, h as k, O as u, P as T, R as C, S as p, j as h, T as m, U as f, t as E, W as P, I as S, k as U, N as y, A, J as F, K as G, z as N, M as O, v as R, y as b, w as v, x as w, u as x } from "./index-DlfjdYW4.js";
+export {
+  e as BadgeDollarIcon,
+  o as CloseIcon,
+  n as ConnectDialog,
+  c as CopiedIcon,
+  i as CopyIcon,
+  t as DefaultDialog,
+  l as Eip712Dialog,
+  r as EthIcon,
+  I as EyeIcon,
+  d as FeeTokenSelector,
+  g as GenericTokenIcon,
+  D as LockIcon,
+  k as OnboardingDialog,
+  u as OrSeparator,
+  T as PermissionDialog,
+  C as ReactUIHandler,
+  p as SignatureDialog,
+  h as SiweDialog,
+  m as TransactionDialog,
+  f as UsdcIcon,
+  E as UsdtIcon,
+  P as WalletIcon,
+  S as clearTokenPriceCache,
+  U as cn,
+  y as fetchTokenBalance,
+  A as fetchTokenPrice,
+  F as formatAddress,
+  G as getDisplayAddress,
+  N as getJustaNameInstance,
+  O as isNativeToken,
+  R as useChainIconURI,
+  b as useDecodedCalldata,
+  v as useFeeTokenPrice,
+  w as useGasEstimation,
+  x as useIsMobile
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/react/ReactUIHandler.d.ts

@@ -0,0 +1,35 @@
+import { UIHandler, UIHandlerConfig, UIRequest, UIResponse } from '../../../core/src/index.ts';
+/**
+ * React UI handler for app-specific mode
+ *
+ * This handler is automatically initialized by the SDK with the necessary configuration.
+ * Simply pass a new instance to JAW.create() and the SDK will call init() with the config.
+ *
+ * @example
+ * ```typescript
+ * import { JAW, Mode } from '@jaw.id/core';
+ * import { ReactUIHandler } from '@jaw.id/ui';
+ *
+ * const jaw = JAW.create({
+ *   apiKey: 'your-api-key',
+ *   defaultChainId: 1,
+ *   preference: {
+ *     mode: Mode.AppSpecific,
+ *     uiHandler: new ReactUIHandler(),
+ *   },
+ * });
+ * ```
+ */
+export declare class ReactUIHandler implements UIHandler {
+    private config;
+    /**
+     * Initialize the handler with SDK configuration
+     * Called automatically by the SDK - do not call directly
+     */
+    init(config: UIHandlerConfig): void;
+    request<T = unknown>(request: UIRequest): Promise<UIResponse<T>>;
+    canHandle(request: UIRequest): boolean;
+    cleanup(): Promise<void>;
+    private renderDialog;
+}
+//# sourceMappingURL=ReactUIHandler.d.ts.map

package/dist/react/ReactUIHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactUIHandler.d.ts","sourceRoot":"","sources":["../../src/react/ReactUIHandler.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,SAAS,EACT,eAAe,EACf,SAAS,EACT,UAAU,EA0BX,MAAM,cAAc,CAAC;AAyGtB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,cAAe,YAAW,SAAS;IAC9C,OAAO,CAAC,MAAM,CAA0C;IAExD;;;OAGG;IACH,IAAI,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI;IAI7B,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,OAAO,EAAE,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAuDtE,SAAS,CAAC,OAAO,EAAE,SAAS,GAAG,OAAO;IAahC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAU9B,OAAO,CAAC,YAAY;CAuMrB"}

package/dist/react/index.d.ts

@@ -0,0 +1,2 @@
+export { ReactUIHandler } from './ReactUIHandler';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/utils/formatAddress.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Truncates an Ethereum address for display
+ * Shows first 6 characters + ... + last 4 characters
+ *
+ * @example
+ * formatAddress('0x1234567890abcdef1234567890abcdef12345678')
+ * // Returns: '0x1234...5678'
+ */
+export declare const formatAddress: (address: string) => string;
+/**
+ * Returns the display string for an address - either the resolved name or formatted address
+ *
+ * @param resolvedName - The resolved ENS/subname (if any)
+ * @param address - The raw Ethereum address
+ * @returns The resolved name if available, otherwise the formatted address
+ */
+export declare const getDisplayAddress: (resolvedName: string | null | undefined, address: string) => string;
+//# sourceMappingURL=formatAddress.d.ts.map

package/dist/utils/formatAddress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatAddress.d.ts","sourceRoot":"","sources":["../../src/utils/formatAddress.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,SAAS,MAAM,KAAG,MAG/C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,cAAc,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,SAAS,MAAM,KAAG,MAG5F,CAAC"}

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './justaNameInstance';
+export * from './tokenPrice';
+export * from './formatAddress';
+export * from './tokenBalance';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

package/dist/utils/justaNameInstance.d.ts

@@ -0,0 +1,7 @@
+import { JustaName } from '@justaname.id/sdk';
+/**
+ * Get or create the singleton JustaName SDK instance
+ * @param providerUrl - The Ethereum mainnet RPC URL for ENS resolution
+ */
+export declare function getJustaNameInstance(providerUrl: string): JustaName;
+//# sourceMappingURL=justaNameInstance.d.ts.map

package/dist/utils/justaNameInstance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"justaNameInstance.d.ts","sourceRoot":"","sources":["../../src/utils/justaNameInstance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAK9C;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,aAcvD"}

package/dist/utils/tokenBalance.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Checks if a token address represents the native token (ETH)
+ */
+export declare function isNativeToken(tokenAddress: string): boolean;
+/**
+ * Fetches the balance of a token for a given wallet address.
+ * Supports both native ETH (address = 0x0...0 or 0xeee...eee) and ERC-20 tokens.
+ */
+export declare function fetchTokenBalance(tokenAddress: string, walletAddress: string, rpcUrl: string): Promise<bigint>;
+//# sourceMappingURL=tokenBalance.d.ts.map

package/dist/utils/tokenBalance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenBalance.d.ts","sourceRoot":"","sources":["../../src/utils/tokenBalance.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAE3D;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CACrC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,MAAM,CAAC,CAiBjB"}

package/dist/utils/tokenPrice.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Fetches the current price in USD for a token by its symbol from CryptoCompare API
+ * Results are cached for 5 minutes per symbol to reduce API calls
+ * @param symbol - The token symbol (ETH, AVAX, BNB, USDC, etc.)
+ * @returns Promise<number> - The token price in USD, or 0 if fetch fails
+ */
+export declare function fetchTokenPrice(symbol: string): Promise<number>;
+/**
+ * Clears all token price caches (useful for testing or forcing refresh)
+ */
+export declare function clearTokenPriceCache(): void;
+//# sourceMappingURL=tokenPrice.d.ts.map

package/dist/utils/tokenPrice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenPrice.d.ts","sourceRoot":"","sources":["../../src/utils/tokenPrice.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,wBAAsB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAoCrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@jaw.id/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./src/styles.css",
+    "./dist/index.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JustaName-id/jaw-mono.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@jaw-mono/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@jaw.id/core": "0.0.1",
+    "@hookform/resolvers": "^5.2.2",
+    "@justaname.id/sdk": "^0.2.204",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.545.0",
+    "react-hook-form": "^7.65.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "@shazow/whatsabi": "^0.26.0",
+    "viem": "^2.38.2",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "3",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/ConnectDialog/index.tsx

@@ -0,0 +1,270 @@
+'use client'
+
+import { useState, useEffect } from "react";
+import { BadgeDollarIcon, EyeIcon, CopyIcon, CopiedIcon } from "../../icons";
+import { useIsMobile } from "../../hooks";
+import { DefaultDialog } from "../DefaultDialog";
+import { Button } from "../ui/button";
+import { ConnectDialogProps } from "./types";
+import { getJustaNameInstance } from "../../utils/justaNameInstance";
+
+export const ConnectDialog = ({
+  open,
+  onOpenChange,
+  appName,
+  appLogoUrl,
+  origin,
+  timestamp,
+  accountName,
+  walletAddress,
+  chainName,
+  chainId,
+  chainIcon,
+  mainnetRpcUrl,
+  onConnect,
+  onCancel,
+  showPermissions = true,
+  isProcessing,
+}: ConnectDialogProps) => {
+  const isMobile = useIsMobile();
+  const [resolvedAddress, setResolvedAddress] = useState<string | null>(null);
+  const [isAddressCopied, setIsAddressCopied] = useState(false);
+
+  // Resolve wallet address to human-readable name
+  useEffect(() => {
+    if (walletAddress && chainId) {
+      const justaName = getJustaNameInstance(mainnetRpcUrl);
+      justaName.subnames.reverseResolve({
+        address: walletAddress as `0x${string}`,
+        chainId: chainId,
+      }).then((result) => {
+        if (result) {
+          setResolvedAddress(result);
+        }
+      }).catch(() => {
+        // Silently fail if resolution fails
+      });
+    }
+  }, [walletAddress, chainId]);
+
+  // Use resolved address, then accountName prop, then truncated address
+  const displayName = resolvedAddress || accountName;
+
+  // Format origin to display only domain (remove protocol)
+  const formatOrigin = (url: string) => {
+    try {
+      const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`);
+      return urlObj.hostname.replace('www.', '');
+    } catch {
+      return origin;
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    if (typeof window !== 'undefined' && navigator?.clipboard) {
+      navigator.clipboard.writeText(text);
+      setIsAddressCopied(true);
+      setTimeout(() => setIsAddressCopied(false), 3000);
+    }
+  };
+
+  // Format wallet address for display
+  const formatAddress = (address: string) => {
+    if (!address || address.length < 10) return address;
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  };
+
+  return (
+    <DefaultDialog
+      open={open}
+      handleClose={onCancel}
+      onOpenChange={!isProcessing ? onOpenChange : undefined}
+      header={
+        <div className="flex flex-col gap-2.5 p-3.5">
+          <p className="text-xs font-bold text-muted-foreground leading-[100%]">
+            {timestamp.toLocaleDateString('en-US', {
+              weekday: 'long',
+              day: 'numeric',
+              month: 'long'
+            })} at {timestamp.toLocaleTimeString('en-US', {
+              hour: '2-digit',
+              minute: '2-digit',
+              second: '2-digit',
+              timeZoneName: 'short'
+            })}
+          </p>
+          <div className="flex flex-col gap-1">
+            <div className="flex flex-row items-center gap-1">
+              <p className="text-sm leading-none text-muted-foreground">
+                Sign in as {displayName || formatAddress(walletAddress)}
+              </p>
+              {!displayName && (
+                isAddressCopied ? (
+                  <CopiedIcon width={10} height={10} className="flex-shrink-0" />
+                ) : (
+                  <CopyIcon
+                    width={10}
+                    height={10}
+                    onClick={() => copyToClipboard(walletAddress)}
+                    className="cursor-pointer flex-shrink-0"
+                  />
+                )
+              )}
+            </div>
+            {displayName && (
+              <div className="flex flex-row items-center gap-1">
+                <p className="text-sm leading-none text-muted-foreground">
+                  {formatAddress(walletAddress)}
+                </p>
+                {isAddressCopied ? (
+                  <CopiedIcon width={10} height={10} className="flex-shrink-0" />
+                ) : (
+                  <CopyIcon
+                    width={10}
+                    height={10}
+                    onClick={() => copyToClipboard(walletAddress)}
+                    className="cursor-pointer flex-shrink-0"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      }
+      contentStyle={isMobile ? {
+        width: '100%',
+        height: '100%',
+        maxWidth: 'none',
+        maxHeight: 'none',
+      } : {
+        width: 'fit-content',
+        maxWidth: '500px',
+      }}
+    >
+      <div className="flex flex-col h-full gap-3 overflow-y-auto min-h-0">
+        {/* App Logo and Title */}
+        <div className="flex flex-1 flex-col p-3.5 items-center justify-center">
+          {appLogoUrl && (
+            <img
+              src={appLogoUrl}
+              alt={`${appName} logo`}
+              className="w-[72px] h-[72px] rounded-full mb-3"
+            />
+          )}
+          <div className="flex flex-col items-center gap-1 text-foreground">
+            <p className="text-2xl font-normal leading-[133%]">
+              Connect to {appName}
+            </p>
+            <p className="text-base leading-[150%] text-muted-foreground">
+              This app wants to connect to your wallet
+            </p>
+          </div>
+        </div>
+
+        {/* Account Details Card */}
+        {/* <div className="flex-1 p-3.5 bg-secondary border border-border rounded-[6px]">
+          <div className="flex flex-col gap-2">
+            <div className="flex justify-between items-center">
+              <span className="text-xs font-bold text-foreground">Account</span>
+              <span className="text-sm font-medium text-foreground">
+                {accountName || 'Wallet'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-xs font-bold text-foreground">Address</span>
+              <span className="text-sm font-mono font-medium text-foreground">
+                {formatAddress(walletAddress)}
+              </span>
+            </div>
+            {supportedChains && supportedChains.length > 0 && (
+              <div className="flex justify-between items-center">
+                <span className="text-xs font-bold text-foreground">Chains</span>
+                <span className="text-sm font-medium text-foreground">
+                  {supportedChains.length} {supportedChains.length === 1 ? 'chain' : 'chains'}
+                </span>
+              </div>
+            )}
+          </div>
+        </div> */}
+
+        {/* Permissions Section */}
+        {showPermissions && (
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center flex-row gap-2.5 p-3.5 border border-border rounded-[6px]">
+              <EyeIcon className="w-4 h-4 flex-shrink-0" />
+              <p className="text-foreground text-xs font-normal leading-[150%]">
+                Allow the app to see your addresses
+              </p>
+            </div>
+            <div className="flex items-center flex-row gap-2.5 p-3.5 border border-border rounded-[6px]">
+              <BadgeDollarIcon className="w-4 h-4 flex-shrink-0" />
+              <p className="text-foreground text-xs font-normal leading-[150%]">
+                Allow the app to propose transactions
+              </p>
+            </div>
+            <div className="flex items-center flex-row gap-2.5 p-3.5 border border-border rounded-[6px]">
+              <BadgeDollarIcon className="w-4 h-4 flex-shrink-0" />
+              <p className="text-foreground text-xs font-normal leading-[150%]">
+                The app cannot move funds without your permission
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Network and URL Information */}
+        <div className="flex flex-row gap-4 border border-border rounded-[6px] p-2">
+          {/* Network Column */}
+          {chainName && (
+            <>
+              <div className="flex flex-col gap-1 flex-1">
+                <p className="text-xs font-bold text-foreground">Network</p>
+                <div className="flex flex-row items-center gap-2">
+                  {chainIcon && (
+                    <div className="w-6 h-6 min-w-4 flex items-center justify-center flex-shrink-0">
+                      {chainIcon}
+                    </div>
+                  )}
+                  <p className="text-sm font-normal text-foreground">
+                    {chainName}
+                  </p>
+                </div>
+              </div>
+              {/* Vertical Separator */}
+              <div className="w-[1px] bg-border min-h-[40px]"></div>
+            </>
+          )}
+          {/* URL Column */}
+          <div className="flex flex-col gap-1 flex-1">
+            <p className="text-xs font-bold text-foreground">URL</p>
+            <p className="text-sm font-normal text-foreground">
+              {formatOrigin(origin)}
+            </p>
+          </div>
+        </div>
+
+        {/* Action Buttons Section */}
+        <div className="flex mt-3 flex-shrink-0">
+          <div className="flex gap-2 w-full justify-between">
+            <Button
+              variant="outline"
+              onClick={onCancel}
+              disabled={isProcessing}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={onConnect}
+              disabled={isProcessing}
+              className="flex-1"
+            >
+              {isProcessing ? 'Connecting...' : 'Connect'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </DefaultDialog>
+  )
+}
+
+export * from './types';

package/src/components/ConnectDialog/types.ts

@@ -0,0 +1,34 @@
+import { JSX } from "react";
+
+export interface ConnectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+
+  // App information
+  appName: string;
+  appLogoUrl?: string;
+  origin: string;
+  timestamp: Date;
+
+  // User account information
+  accountName?: string;
+  walletAddress: string;
+
+  // Chain information
+  chainName?: string;
+  chainId?: number;
+  chainIcon?: JSX.Element;
+
+  // RPC configuration
+  mainnetRpcUrl: string;
+
+  // Actions
+  onConnect: () => Promise<void>;
+  onCancel: () => void;
+
+  // Whether to show the permission info messages (default: true)
+  showPermissions?: boolean;
+
+  // Status
+  isProcessing: boolean;
+}