@jaw.id/ui 0.0.3 → 0.0.5

package/src/components/FeeTokenSelector/index.tsx

@@ -1,308 +0,0 @@
-'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

@@ -1,317 +0,0 @@
-'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

@@ -1,43 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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>
-    )
-}