Components

Pre-built UI components for authentication and wallet management.

SignIn

Authentication component with support for email, passkey, and external wallet auth.

Basic Usage

import { SignIn } from '@agentfish/react';

// Shows a sign-in button that opens a modal
<SignIn 
  providers={['email', 'passkey', 'wallet']}
  onSuccess={(wallet) => console.log('Authenticated!', wallet.address)}
  onError={(error) => console.error(error)}
/>

Controlled Mode

Control the modal state with your own button:

import { SignIn } from '@agentfish/react';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Sign In
      </button>
      <SignIn 
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        providers={['email', 'wallet']}
        onSuccess={(wallet) => console.log('Authenticated!')}
      />
    </>
  );
}

Props

Prop	Type	Default	Description
providers	('email' | 'passkey' | 'wallet')[]	['email', 'passkey', 'wallet']	Auth methods to show
isOpen	boolean	-	Controlled mode: modal open state
onOpenChange	(open: boolean) => void	-	Controlled mode: state change handler
onSuccess	(wallet: Wallet) => void	-	Called on successful auth
onError	(error: Error) => void	-	Called on auth error
className	string	-	Custom class for trigger button

WalletButton

Displays wallet info with a dropdown for balance, address, and actions.

Basic Usage

import { WalletButton } from '@agentfish/react';

<WalletButton />

Variants

// Full button with balance
<WalletButton variant="full" showBalance={true} />

// Compact button
<WalletButton variant="compact" />

// Icon only
<WalletButton variant="icon-only" />

Props

Prop	Type	Default	Description
variant	'full' | 'compact' | 'icon-only'	'full'	Button style
showBalance	boolean	true	Show balance in button
dropdownAlign	'left' | 'right'	'right'	Dropdown alignment
dropdownDirection	'up' | 'down'	'down'	Dropdown direction
onAddFunds	() => void	-	Callback when add funds clicked
onDisconnect	() => void	-	Callback on disconnect

AddFundsModal

QR code modal for funding the wallet.

import { AddFundsModal } from '@agentfish/react';
import { useState } from 'react';
import { useWallet } from '@agentfish/react';

function FundWallet() {
  const [isOpen, setIsOpen] = useState(false);
  const { address } = useWallet();

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Add Funds
      </button>
      <AddFundsModal 
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        address={address!}
      />
    </>
  );
}

Props

Prop	Type	Required	Description
isOpen	boolean	Yes	Modal open state
onClose	() => void	Yes	Close handler
address	string	Yes	Wallet address for QR code

Supported Wallets

External Wallet Auth

The SDK automatically detects installed wallets:

Solana:

• Phantom
• Solflare

EVM:

• MetaMask
• Coinbase Wallet