Hooks

import {
  useCopyToClipboard,
  useWalletOptions,
  useWyllet,
  useWylletActivity,
  useWylletAuth,
  useWylletButton,
  useWylletChains,
  useWylletToast,
  useWylletTokens,
} from 'wyllet'

function useWyllet(): {
  open(view?: PanelView, options?: OpenOptions): void
  close(): void
  openConnect(options?: OpenOptions): void
  openAccount(options?: OpenOptions): void
  openTab(tab: AccountTab, options?: OpenOptions): void
  view: PanelView | null
  isConnected: boolean
  address: Address | undefined
  chainId: number | undefined
  authStatus: AuthStatus | undefined
}

function Toolbar() {
  const { openConnect, openTab, isConnected } = useWyllet()
  return isConnected ? (
    <button onClick={(e) => openTab('activity', { anchor: e.currentTarget })}>Activity</button>
  ) : (
    <button onClick={() => openConnect()}>Connect</button>
  )
}

function useWylletButton(): WylletButtonState

function MyButton() {
  const { mounted, account, chain, open } = useWylletButton()
  if (!mounted) return <button disabled>Connect</button>
  return (
    <button onClick={(e) => open(e.currentTarget)}>
      {account ? `${account.displayName} on ${chain?.name}` : 'Connect'}
    </button>
  )
}

function useWylletToast(): ToastApi

const toast = useWylletToast()
 
toast.success('Saved')
 
await toast.promise(bridge(), {
  loading: 'Bridging…',
  success: 'Bridged',
  error: (e) => `Bridge failed: ${String(e)}`,
})

function useWylletActivity(): {
  activity: ActivityItem[]
  addTransaction(tx: {
    hash: Hash
    description?: string
    chainId?: number
    account?: Address
    toast?: boolean
  }): boolean
  log(entry: {
    title: string
    description?: string
    status?: ActivityStatus
    account?: Address
  }): boolean
  clearActivity(): void
}

const { writeContractAsync } = useWriteContract()
const { addTransaction, log } = useWylletActivity()
 
const hash = await writeContractAsync({ /* ... */ })
addTransaction({ hash, description: 'Mint 1 NFT' })
 
log({ title: 'Staked 10 ETH', status: 'success' })

function useWylletAuth(): {
  enabled: boolean
  status: AuthStatus
  signIn(options?: OpenOptions): void
  signOut(): Promise<void>
}

function Session() {
  const { status, signIn, signOut } = useWylletAuth()
  if (status === 'loading') return null
  return status === 'authenticated' ? (
    <button onClick={() => signOut()}>Sign out</button>
  ) : (
    <button onClick={(e) => signIn({ anchor: e.currentTarget })}>Sign in</button>
  )
}

function useWylletTokens(chainId?: number): {
  tokens: ListedToken[]
  importToken(token: Token, chainId?: number): void
  removeToken(address: string, chainId?: number): void
  canImport: boolean
}

function TokenList() {
  const { tokens } = useWylletTokens(8453)
  return (
    <ul>
      {tokens.map((t) => (
        <li key={t.address}>{t.symbol}</li>
      ))}
    </ul>
  )
}

function useWylletChains(): { chains: Chain[] }

const { chains } = useWylletChains()
// With chainOrder={[8453]}: Base first, then the rest of your config

function useCopyToClipboard(resetMs?: number): {
  copied: boolean
  copy(text: string): Promise<boolean>
}

function CopyAddress({ address }: { address: string }) {
  const { copied, copy } = useCopyToClipboard()
  return <button onClick={() => copy(address)}>{copied ? 'Copied' : 'Copy'}</button>
}

function useWalletOptions(): {
  groups: WalletGroup[]
  all: WalletOption[]
  walletConnectConnector?: Connector
}

import { useConnect } from 'wagmi'
 
function Picker() {
  const { all } = useWalletOptions()
  const { connect } = useConnect()
  return all
    .filter((o) => o.action === 'connect' && o.connector)
    .map((o) => (
      <button key={o.wallet.id} onClick={() => connect({ connector: o.connector! })}>
        {o.wallet.name}
      </button>
    ))
}