const { wallets, wcWallets, isFetchingWallets, isFetchingWcUri, isInitialized, wcUri, wcError, connectingWallet, page, count, fetchWallets, connect, resetWcUri } =
  useAppKitWallets()

import React, { useState } from 'react'
import type { WalletItem } from '@reown/appkit'
import type { ChainNamespace } from '@reown/appkit/networks'
import { useAppKitWallets } from '@reown/appkit/react'
import { NamespaceSelectionDialog } from './NamespaceDialog'
import { WalletConnectQRDialog } from './WalletConnectQRDialog'

function ConnectView() {
  const { wallets, connect } = useAppKitWallets()
  const [selectedWallet, setSelectedWallet] = useState<WalletItem | null>(null)

  async function handleConnect(wallet: WalletItem, namespace?: ChainNamespace) {
    await connect(wallet, namespace)
      .then(() => {
        toast({ title: 'Connected', status: 'success' })
      })
      .catch(() => {
        toast({ title: 'Connection declined', status: 'error' })
      })
  }

  return (
    <>
      {wallets.map(wallet => (
        <WalletListItem
          key={wallet.id}
          wallet={wallet}
          onConnect={() => {
            if (wallet.connectors.length > 1) {
              setSelectedWallet(wallet)
            } else {
              handleConnect(wallet, wallet.connectors[0]?.chain)
            }
          }}
        />
      ))}
      <NamespaceSelectionDialog
        wallet={selectedWallet}
        onSelect={handleConnect}
        onClose={() => setSelectedWallet(null)}
      />
      <WalletConnectQRDialog />
    </>
  )
}

export function WalletListItem({ wallet, onConnect }) {
  const { connectingWallet } = useAppKitWallets()

  return (
    <button onClick={onConnect}>
      <img url={wallet.imageUrl} />
      <span>{wallet.name}</span>
      {wallet.connectors.map(item => {
        return <img {item.chainImageUrl} alt={item.chain} />
      })}
      {connectingWallet?.id === wallet.id ? "connecting..." : null}
    </button>
  )
}

import { ChevronRightIcon } from 'lucide-react'
import Image from 'next/image'

import type { WalletItem } from '@reown/appkit'
import type { ChainNamespace } from '@reown/appkit/networks'

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog'
import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from '@/components/ui/item'

interface NamespaceSelectionDialogProps {
  wallet: WalletItem | null
  onSelect?: (wallet: WalletItem, namespace: ChainNamespace) => void
  onClose?: () => void
}

const CHAIN_NAME_MAP: Record<string, string> = {
  eip155: 'EVM Networks',
  solana: 'Solana',
  polkadot: 'Polkadot',
  bip122: 'Bitcoin',
  cosmos: 'Cosmos',
  sui: 'Sui',
  stacks: 'Stacks',
  ton: 'TON'
}

export function NamespaceSelectionDialog({
  wallet,
  onSelect,
  onClose
}: NamespaceSelectionDialogProps) {
  if (!wallet) return null

  return (
    <Dialog open={!!wallet} onOpenChange={open => !open && onClose?.()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Connect to {wallet.name}</DialogTitle>
          <DialogDescription>
            {wallet.name} supports multiple chains. Select a chain you want to connect to.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-2">
          {wallet.connectors.map(connector => (
            <Item key={connector.chain} onClick={() => onSelect?.(wallet, connector.chain)}>
              {connector.chainImageUrl && (
                <ItemMedia className="rounded-md overflow-hidden w-8 h-8">
                  <Image
                    src={connector.chainImageUrl}
                    alt={connector.chain}
                    width={32}
                    height={32}
                  />
                </ItemMedia>
              )}
              <ItemContent>
                <ItemTitle>{CHAIN_NAME_MAP[connector.chain] || connector.chain}</ItemTitle>
              </ItemContent>
              <ItemActions>
                <ChevronRightIcon className="size-4" />
              </ItemActions>
            </Item>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  )
}

import QRCode from 'react-qr-code'
import Image from 'next/image'
import { Loader2Icon } from 'lucide-react'

import { useAppKitWallets } from '@reown/appkit/react'

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog'

export function WalletConnectQRDialog() {
  const { wcUri, connectingWallet, isFetchingWcUri, resetWcUri } = useAppKitWallets()

  if (!connectingWallet || connectingWallet.isInjected) {
    return null
  }

  return (
    <Dialog
      open={Boolean(wcUri)}
      onOpenChange={open => {
        if (!open) {
          resetWcUri()
        }
      }}
    >
      <DialogContent>
        <DialogHeader>
          <div className="flex items-center gap-3">
            <Image
              src={connectingWallet.imageUrl}
              alt={connectingWallet.name}
              width={40}
              height={40}
              className="rounded-full"
            />
            <DialogTitle>Connect to {connectingWallet.name}</DialogTitle>
          </div>
          <DialogDescription>
            Scan the QR code with {connectingWallet.name} to connect to your app.
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col items-center justify-center p-6">
          {isFetchingWcUri ? (
            <Loader2Icon className="animate-spin size-8" />
          ) : (
            <QRCode
              value={wcUri}
              size={256}
              style={{ height: 'auto', maxWidth: '100%', width: 'auto' }}
            />
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}

import React, { useState, useEffect } from 'react'
import { useAppKitWallets } from '@reown/appkit/react'

function AllWalletsView() {
  const { wcWallets, isFetchingWcUri, isFetchingWallets, fetchWallets, connect, page } =
    useAppKitWallets()
  const [inputValue, setInputValue] = useState('')
  const searchQuery = useDebounceValue(inputValue, 500)

  useEffect(() => {
    fetchWallets?.()
  }, [])

  useEffect(() => {
    if (searchQuery.length > 0) {
      fetchWallets?.({ search: searchQuery })
    } else {
      fetchWallets?.()
    }
  }, [searchQuery])

  function handleLoadMore() {
    if (searchQuery.length > 0) {
      fetchWallets?.({ page: page + 1, search: searchQuery })
    } else {
      fetchWallets?.({ page: page + 1 })
    }
  }

  return (
    <>
      <input
        type="text"
        placeholder="Search wallets..."
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      {isFetchingWallets && <div>Loading wallets...</div>}
      {wcWallets.map(wallet => {
        return <WalletListItem key={wallet.id} wallet={wallet} onConnect={connect} />
      })}
      <button onClick={handleLoadMore} disabled={isFetchingWallets}>
        Load More
      </button>
    </>
  )
}