@jaw.id/ui 0.0.1

package/src/components/FeeTokenSelector/index.tsx

@@ -0,0 +1,308 @@
+'use client'
+
+import { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { Button } from '../ui/button';
+import { Spinner } from '../ui/spinner';
+import { EthIcon, UsdcIcon, UsdtIcon, GenericTokenIcon } from '../../icons';
+import { cn } from '../../lib/utils';
+import { ChevronDown, X } from 'lucide-react';
+
+export interface FeeTokenOption {
+  uid: string;
+  symbol: string;
+  address: string;
+  decimals: number;
+  balance: bigint;
+  balanceFormatted: string;
+  isNative: boolean;
+  isSelectable: boolean;
+  // Optional: USD values for display
+  balanceUsd?: string;
+  gasCostUsd?: string;
+  gasCostFormatted?: string;
+  // Optional: Token logo URI from API
+  logoURI?: string;
+}
+
+interface FeeTokenSelectorProps {
+  tokens: FeeTokenOption[];
+  selectedToken: FeeTokenOption | null;
+  onSelect: (token: FeeTokenOption) => void;
+  isLoading: boolean;
+  disabled?: boolean;
+  nativeTokenPrice?: number;
+  estimatedGasEth?: string;
+}
+
+// Get token icon - use logoURI if available, otherwise fall back to symbol-based icons
+const getTokenIcon = (symbol: string, className?: string, logoURI?: string) => {
+  const iconClass = cn('size-8 shrink-0', className);
+
+  // Use logoURI if available
+  if (logoURI) {
+    return (
+      <img
+        src={logoURI}
+        alt={symbol}
+        className={cn(iconClass, 'rounded-full object-cover')}
+        onError={(e) => {
+          // Fallback to generic icon if image fails to load
+          e.currentTarget.style.display = 'none';
+          e.currentTarget.nextElementSibling?.classList.remove('hidden');
+        }}
+      />
+    );
+  }
+
+  // Fallback to symbol-based icons
+  switch (symbol.toUpperCase()) {
+    case 'ETH':
+      return <EthIcon className={iconClass} />;
+    case 'USDC':
+      return <UsdcIcon className={iconClass} />;
+    case 'USDT':
+      return <UsdtIcon className={iconClass} />;
+    default:
+      return <GenericTokenIcon className={iconClass} />;
+  }
+};
+
+// Format balance for display (max 6 decimal places, min 4 for small values)
+const formatBalance = (balance: string, symbol: string) => {
+  const num = parseFloat(balance);
+  if (num === 0) return '0';
+  if (num < 0.0001) return '<0.0001';
+  // For ETH, show more decimals; for stablecoins, show 2
+  const decimals = symbol.toUpperCase() === 'ETH' ? 6 : 2;
+  return num.toLocaleString('en-US', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: decimals,
+  });
+};
+
+// Format USD value (show at least 4 decimals for small gas amounts)
+const formatUsd = (value: number) => {
+  return `$${value.toLocaleString('en-US', {
+    minimumFractionDigits: 4,
+    maximumFractionDigits: 4,
+  })}`;
+};
+
+export const FeeTokenSelector = ({
+  tokens,
+  selectedToken,
+  onSelect,
+  isLoading,
+  disabled,
+  nativeTokenPrice = 0,
+  estimatedGasEth,
+}: FeeTokenSelectorProps) => {
+  const [open, setOpen] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Spinner className="size-3" />
+        <span>Loading payment options...</span>
+      </div>
+    );
+  }
+
+  // Don't render if no ERC-20 tokens available (only native)
+  const hasErc20Options = tokens.some(t => !t.isNative);
+  if (!hasErc20Options) {
+    return null;
+  }
+
+  const nativeToken = tokens.find(t => t.isNative);
+  const erc20Tokens = tokens.filter(t => !t.isNative);
+
+  const handleSelect = (token: FeeTokenOption) => {
+    if (token.isSelectable) {
+      onSelect(token);
+      setOpen(false);
+    }
+  };
+
+  // Calculate USD values for tokens
+  const getBalanceUsd = (token: FeeTokenOption): string => {
+    if (token.isNative && nativeTokenPrice > 0) {
+      const usd = parseFloat(token.balanceFormatted) * nativeTokenPrice;
+      return formatUsd(usd);
+    }
+    // For non-native ERC-20 tokens, show balance with token decimals
+    if (!token.isNative) {
+      const balance = parseFloat(token.balanceFormatted);
+      // Show appropriate decimal places based on token decimals
+      const displayDecimals = token.decimals >= 6 ? 2 : token.decimals;
+      return `${balance.toLocaleString('en-US', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: displayDecimals,
+      })} ${token.symbol}`;
+    }
+    return '';
+  };
+
+  // Get gas cost for a token
+  // For ERC-20 tokens, use pre-computed gasCostFormatted if available (from paymaster quote)
+  const getGasCost = (token: FeeTokenOption): { formatted: string; usd: string } | null => {
+    // Tokens with 0 balance - no gas cost to show
+    if (token.balance === 0n) {
+      return null;
+    }
+
+    // If token has pre-computed gas cost (from paymaster quote), use that
+    if (token.gasCostFormatted) {
+      // Check if it's a valid numeric value (not "Insufficient" or "Estimation failed")
+      const numericPart = token.gasCostFormatted.replace(/[^0-9.]/g, '');
+      const tokenCost = parseFloat(numericPart);
+
+      // If not a valid number, don't show gas cost
+      if (isNaN(tokenCost) || numericPart === '') {
+        return null;
+      }
+
+      return {
+        formatted: token.gasCostFormatted,
+        usd: ['USDC', 'USDT', 'DAI'].includes(token.symbol.toUpperCase()) && !isNaN(tokenCost)
+          ? formatUsd(tokenCost)
+          : '',
+      };
+    }
+
+    // Fallback: calculate from ETH gas estimate
+    if (!estimatedGasEth || !nativeTokenPrice) {
+      return null;
+    }
+
+    const gasEth = parseFloat(estimatedGasEth);
+    if (isNaN(gasEth)) {
+      return null;
+    }
+
+    const gasUsd = gasEth * nativeTokenPrice;
+
+    if (token.isNative) {
+      return {
+        formatted: `${formatBalance(estimatedGasEth, token.symbol)} ${token.symbol}`,
+        usd: formatUsd(gasUsd),
+      };
+    }
+
+    // For non-native ERC-20 tokens, gas cost in token
+    // Show appropriate decimal places based on token decimals
+    const displayDecimals = token.decimals >= 6 ? 3 : token.decimals;
+    return {
+      formatted: `${gasUsd.toFixed(displayDecimals)} ${token.symbol}`,
+      usd: formatUsd(gasUsd),
+    };
+  };
+
+  // Token row component
+  const TokenRow = ({ token, showGasCost = true }: { token: FeeTokenOption; showGasCost?: boolean }) => {
+    const balanceUsd = getBalanceUsd(token);
+    const gasCost = showGasCost ? getGasCost(token) : null;
+    const isSelected = selectedToken?.address === token.address;
+
+    return (
+      <button
+        onClick={() => handleSelect(token)}
+        disabled={!token.isSelectable || disabled}
+        className={cn(
+          'w-full flex items-center gap-2 px-2 py-2 rounded-md transition-colors',
+          'hover:bg-muted/60',
+          isSelected && 'bg-zinc-200',
+          !token.isSelectable && 'opacity-50 cursor-not-allowed',
+          token.isSelectable && 'cursor-pointer'
+        )}
+      >
+        {/* Token Icon */}
+        {getTokenIcon(token.symbol, 'size-6', token.logoURI)}
+
+        {/* Token Info */}
+        <div className="flex-1 text-left min-w-0">
+          <div className="flex items-center gap-1">
+            <span className={cn("font-semibold text-xs", isSelected && "text-foreground")}>{token.symbol}</span>
+          </div>
+          <div className="text-[10px] text-muted-foreground truncate">
+            Bal: {balanceUsd || `${formatBalance(token.balanceFormatted, token.symbol)} ${token.symbol}`}
+          </div>
+        </div>
+
+        {/* Gas Cost / Status */}
+        <div className="text-right shrink-0">
+          {gasCost?.usd ? (
+            <>
+              <div className="font-semibold text-xs">{gasCost.usd}</div>
+              <div className="text-[10px] text-muted-foreground">Up to {gasCost.formatted}</div>
+            </>
+          ) : !token.isSelectable ? (
+            <span className="text-[10px] text-destructive">
+              {token.balance === 0n ? '0' : 'Insufficient'}
+            </span>
+          ) : null}
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className="h-7 px-2 gap-1 text-xs font-medium rounded-md border-muted-foreground/30"
+        >
+          {selectedToken && getTokenIcon(selectedToken.symbol, 'size-3.5', selectedToken.logoURI)}
+          <span>{selectedToken?.symbol || 'Select'}</span>
+          <ChevronDown className="size-3 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-64 p-0"
+        align="end"
+        sideOffset={4}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-3 py-2.5 border-b">
+          <h3 className="font-semibold text-sm">Select a token</h3>
+          <button
+            onClick={() => setOpen(false)}
+            className="rounded-full p-0.5 hover:bg-muted transition-colors"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        {/* Token List */}
+        <div className="p-1.5 max-h-64 overflow-y-auto">
+          {/* Native Token Section */}
+          {nativeToken && (
+            <div className="mb-1">
+              <p className="text-[10px] font-medium text-muted-foreground px-2 py-1">
+                Pay with {nativeToken.symbol}
+              </p>
+              <TokenRow token={nativeToken} />
+            </div>
+          )}
+
+          {/* ERC-20 Tokens Section */}
+          {erc20Tokens.length > 0 && (
+            <div>
+              <p className="text-[10px] font-medium text-muted-foreground px-2 py-1">
+                Pay with other tokens
+              </p>
+              {erc20Tokens.map((token) => (
+                <TokenRow key={token.address} token={token} showGasCost={true} />
+              ))}
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/OnboardingDialog/index.tsx

@@ -0,0 +1,317 @@
+'use client'
+
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Spinner } from '../ui/spinner';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { WalletIcon } from '../../icons';
+import { ChevronRight } from 'lucide-react';
+import { OrSeparator } from '../OrSeparator';
+import { OnboardingDialogProps } from './types';
+import { useState, useEffect, useRef } from 'react';
+import { getJustaNameInstance } from '../../utils/justaNameInstance';
+import {toCoinType} from "viem";
+
+export function OnboardingDialog({
+  accounts,
+  onAccountSelect,
+  loggingInAccount,
+  onImportAccount,
+  isImporting,
+  onCreateAccount,
+  onAccountCreationComplete,
+  isCreating,
+  ensDomain,
+  chainId,
+  mainnetRpcUrl,
+  apiKey,
+  supportedChains,
+  subnameTextRecords,
+}: OnboardingDialogProps) {
+  // Ref for scrollable container
+  const scrollableRef = useRef<HTMLDivElement>(null);
+
+  // Validation state
+  const [isValid, setIsValid] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [username, setUsername] = useState('')
+  const [debouncedUsername, setDebouncedUsername] = useState(username);
+
+  // Error state
+  const [error, setError] = useState<string | null>(null);
+
+  // Debounce username input
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedUsername(username);
+    }, 500);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [username]);
+
+  // Validate username and check availability
+  useEffect(() => {
+    const validateUsername = async () => {
+      // Reset state
+      setIsLoading(false);
+      setIsValid(false);
+      setMessage('');
+
+      // Check if username includes dots
+      if (username.includes('.')) {
+        setMessage('Invalid format');
+        setIsValid(false);
+        return;
+      }
+
+      // Check minimum length
+      if (username.length > 0 && username.length <= 2) {
+        setMessage('Minimum 3 characters');
+        setIsValid(false);
+        return;
+      }
+
+      // If username is empty, don't show anything
+      if (username.length === 0) {
+        return;
+      }
+
+      // If no ensDomain, just validate format and length
+      if (!ensDomain) {
+        setMessage('Available');
+        setIsValid(true);
+        return;
+      }
+
+      // Check availability with SDK
+      if (debouncedUsername.length > 2 && chainId) {
+        setIsLoading(true);
+        setMessage('Checking availability...');
+
+        try {
+          const justaName = getJustaNameInstance(mainnetRpcUrl);
+          const result = await justaName.subnames.isSubnameAvailable({
+            subname: debouncedUsername + '.' + ensDomain,
+            chainId: 1, // ENS offchain subnames must always be issued on Ethereum mainnet (chainId 1)
+          });
+
+          if (result?.isAvailable) {
+            setMessage('Available');
+            setIsValid(true);
+          } else {
+            setMessage('Unavailable');
+            setIsValid(false);
+          }
+        } catch (error) {
+          console.error('Error checking subname availability:', error);
+          setMessage('Error checking availability');
+          setIsValid(false);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    validateUsername();
+  }, [debouncedUsername, username, ensDomain, chainId]);
+
+  // Handle wheel events for smooth scrolling over buttons
+  useEffect(() => {
+    const scrollable = scrollableRef.current;
+    if (!scrollable) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Prevent default to handle scroll manually
+      e.preventDefault();
+      // Smooth scroll
+      scrollable.scrollTop += e.deltaY;
+    };
+
+    // Add event listener with passive: false to allow preventDefault
+    scrollable.addEventListener('wheel', handleWheel, { passive: false });
+
+    return () => {
+      scrollable.removeEventListener('wheel', handleWheel);
+    };
+  }, []);
+
+  const handleCreateAccountClick = async () => {
+    // Clear any previous errors
+    setError(null);
+
+    try {
+      // onCreateAccount now returns full account data (not just address)
+      const accountData = await onCreateAccount(username);
+
+      if (ensDomain && chainId && apiKey && supportedChains && accountData.address) {
+        try {
+          const justaName = getJustaNameInstance(mainnetRpcUrl);
+
+          const addresses = supportedChains.map(chain => ({
+            address: accountData.address,
+            coinType: toCoinType(chain.id).toString(),
+          }));
+
+
+          console.log('subnameTextRecords', subnameTextRecords);
+
+          // Use subnameTextRecords from capabilities if provided (only used during new account creation)
+          // If not provided or empty, use empty array (no text records will be set)
+          await justaName.subnames.addSubname(
+            {
+              username: username,
+              ensDomain: ensDomain,
+              chainId: 1, // ENS offchain subnames must always be issued on Ethereum mainnet (chainId 1)
+              addresses: addresses,
+              overrideSignatureCheck: true,
+              text: subnameTextRecords && subnameTextRecords.length > 0 ? subnameTextRecords : [],
+            },
+            {
+              xApiKey: apiKey,
+              xAddress: accountData.address,
+              xMessage: "",
+            }
+          );
+
+        } catch (subnameError) {
+          const errorMessage = `Failed to register subname: ${subnameError instanceof Error ? subnameError.message : 'Unknown error'}`;
+          console.error('❌ SUBNAME ERROR:', errorMessage, subnameError);
+          setError(errorMessage);
+          return; // Don't complete if subname registration fails
+        }
+      }
+
+      // Pass account data through to completion handler
+      await onAccountCreationComplete(accountData);
+    } catch (error) {
+      const errorMessage = `Account creation failed: ${error instanceof Error ? error.message : 'Unknown error'}`;
+      console.error('❌ ACCOUNT CREATION ERROR:', errorMessage, error);
+      setError(errorMessage);
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md shadow-xl">
+      <CardHeader className="flex flex-col gap-1">
+        <CardTitle className="text-xl font-normal">
+          Sign In
+        </CardTitle>
+
+        <CardDescription className='text-xs font-medium'>
+          {`Choose one of your existing accounts below to sign in instantly.
+          If you're on a new device or don't see your account listed, you can
+          import it from your cloud backup.`}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-5">
+        {/* Existing Accounts */}
+        <div ref={scrollableRef} className="flex flex-col gap-1 max-h-[40vh] overflow-y-auto overscroll-contain">
+          {accounts.map((account) => (
+            <Button
+              key={account.credentialId || account.username || Math.random().toString()}
+              onClick={() => onAccountSelect(account)}
+              variant="ghost"
+              className="w-full h-auto !py-2 !px-3 flex items-center justify-between hover:bg-muted/50"
+              disabled={loggingInAccount !== null}
+            >
+              <div className="flex items-center flex-row gap-2">
+                <WalletIcon className='!w-6 !h-6' />
+                <div className="text-left">
+                  <p className="text-sm font-normal text-foreground">
+                    {account.username || 'Unnamed Account'}
+                  </p>
+                  <p className="text-xs font-semibold text-muted-foreground">
+                    {new Date(account.creationDate).toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric'
+                    })}
+                  </p>
+                </div>
+              </div>
+              {loggingInAccount === account.username ? (
+                <Spinner className="!h-5 !w-5" />
+              ) : (
+                <ChevronRight className="!h-5 !w-5 text-black" />
+              )}
+            </Button>
+          ))}
+        </div>
+
+        {/* Import Account Button */}
+        <Button
+          onClick={onImportAccount}
+          variant="outline"
+          className="w-full h-10 flex items-center flex-row gap-2"
+          disabled={isImporting}
+        >
+          <WalletIcon className='!w-6 !h-6' stroke='black' />
+          <span>{isImporting ? 'Opening Passkey...' : 'Import an existing account'}</span>
+        </Button>
+
+        <OrSeparator />
+
+        {/* Create New Account */}
+        <div className='flex flex-col gap-2'>
+          <div className="flex flex-row items-center gap-2">
+            <Input
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="flex-1"
+              right={ensDomain ? <span className="text-sm font-bold text-foreground">{`.${ensDomain}`}</span> : undefined}
+            />
+            {isCreating ? (
+              <Spinner className="w-10 h-10" />
+            ) : (
+              <Button
+                onClick={async () => {
+                  try {
+                    await handleCreateAccountClick();
+                  } catch (err) {
+                    console.error('❌ Button onClick caught error:', err);
+                  }
+                }}
+                disabled={!isValid || isLoading}
+              >
+                Create Account
+              </Button>
+            )}
+          </div>
+          {username.length > 0 && message && !error && (
+            <div className="flex items-center justify-between px-1">
+              <span className={`text-xs font-medium ${isLoading
+                ? 'text-muted-foreground'
+                : isValid
+                  ? 'text-green-600'
+                  : 'text-red-600'
+                }`}>
+                {message}
+              </span>
+            </div>
+          )}
+          {error && (
+            <div className="flex flex-col gap-2 px-1 py-2 bg-red-50 border border-red-200 rounded-md overflow-hidden">
+              <span className="text-xs font-medium text-red-600 break-all">
+                {error}
+              </span>
+              <Button
+                onClick={() => setError(null)}
+                variant="ghost"
+                className="h-6 text-xs text-red-600 hover:text-red-700 hover:bg-red-100"
+              >
+                Dismiss
+              </Button>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export * from './types';

package/src/components/OnboardingDialog/types.ts

@@ -0,0 +1,43 @@
+import type { SubnameTextRecordCapabilityRequest } from "@jaw.id/core";
+
+export interface LocalStorageAccount {
+  username: string;
+  creationDate: Date;
+  credentialId?: string;
+  isImported?: boolean;
+}
+
+/**
+ * Data returned from account creation, passed through to completion handler.
+ * This allows data to flow naturally through callbacks without intermediate state.
+ */
+export interface CreatedAccountData {
+  address: string;
+  credentialId: string;
+  username: string;
+  publicKey: `0x${string}`;
+}
+
+export interface OnboardingDialogProps {
+  // Account list section
+  accounts: LocalStorageAccount[];
+  onAccountSelect: (account: LocalStorageAccount) => Promise<void>;
+  loggingInAccount: string | null;
+
+  // Import existing account section
+  onImportAccount: () => void;
+  isImporting: boolean;
+
+  // Create new account section
+  onCreateAccount: (username: string) => Promise<CreatedAccountData>;
+  onAccountCreationComplete: (account: CreatedAccountData) => Promise<void>;
+  isCreating: boolean;
+
+  // Configuration
+  ensDomain?: string;
+  chainId?: number;
+  mainnetRpcUrl: string;
+  apiKey?: string; // API key for JustaName API authentication (xApiKey header)
+  supportedChains?: Array<{ id: number }>;
+  subnameTextRecords?: SubnameTextRecordCapabilityRequest;
+}

package/src/components/OrSeparator/index.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "../ui/separator";
+
+export const OrSeparator = () => {
+    return (
+        <div className="flex flex-row gap-2 items-center max-w-full">
+            <Separator className='w-full shrink' />
+            <span className="bg-background text-sm text-muted-foreground">
+                Or
+            </span>
+            <Separator className='w-full shrink' />
+        </div>
+    )
+}