index.tsx

import { Box, Flex, Skeleton } from '@chakra-ui/react'
import {
  NetworkArbitrumOne,
  NetworkEthereum,
  NetworkOptimism,
  NetworkPolygon,
  NetworkSepolia,
} from '@web3icons/react'
import { useState } from 'react'
import { arbitrum, mainnet, optimism, polygon, sepolia } from 'viem/chains'
import OptionsDropdown from '@/src/components/pageComponents/home/Examples/demos/OptionsDropdown'
import Icon from '@/src/components/pageComponents/home/Examples/demos/TokenInput/Icon'
import BaseTokenInput from '@/src/components/sharedComponents/TokenInput'
import { useTokenInput } from '@/src/components/sharedComponents/TokenInput/useTokenInput'
import type { Networks } from '@/src/components/sharedComponents/TokenSelect/types'
import { includeTestnets } from '@/src/constants/common'
import { useTokenLists } from '@/src/hooks/useTokenLists'
import { useTokenSearch } from '@/src/hooks/useTokenSearch'
import { useWeb3Status } from '@/src/hooks/useWeb3Status'
import { withSuspenseAndRetry } from '@/src/utils/suspenseWrapper'

type Options = 'single' | 'multi'

const SkeletonLoadingTokenInput = () => (
  <Flex
    flexDirection="column"
    height="144px"
    padding={4}
    rowGap={2}
    width="100%"
  >
    <Skeleton
      height="17px"
      minHeight="0"
      width="80px"
    />
    <Skeleton
      borderRadius="8px"
      minHeight="58px"
      width="100%"
    />
    <Skeleton
      borderRadius="8px"
      minHeight="18px"
      width="100%"
    />
  </Flex>
)

/**
 * Select multi-token or single-token mode
 */
const TokenInputMode = withSuspenseAndRetry(
  ({ currentTokenInput }: { currentTokenInput: Options }) => {
    const { isWalletConnected } = useWeb3Status()
    const [currentNetworkId, setCurrentNetworkId] = useState<number>()
    const { tokensByChainId } = useTokenLists()
    const { searchResult } = useTokenSearch({
      tokens: tokensByChainId[1],
      defaultSearchTerm: 'WETH',
    })
    const tokenInputMulti = useTokenInput()
    const tokenInputSingle = useTokenInput(searchResult[0])

    const networks: Networks = [
      {
        icon: (
          <NetworkEthereum
            size={24}
            variant="background"
          />
        ),
        id: mainnet.id,
        label: mainnet.name,
        onClick: () => setCurrentNetworkId(mainnet.id),
      },
      {
        icon: (
          <NetworkOptimism
            size={24}
            variant="background"
          />
        ),
        id: optimism.id,
        label: optimism.name,
        onClick: () => setCurrentNetworkId(optimism.id),
      },
      {
        icon: (
          <NetworkArbitrumOne
            size={24}
            variant="background"
          />
        ),
        id: arbitrum.id,
        label: arbitrum.name,
        onClick: () => setCurrentNetworkId(arbitrum.id),
      },
      {
        icon: (
          <NetworkPolygon
            size={24}
            variant="background"
          />
        ),
        id: polygon.id,
        label: polygon.name,
        onClick: () => setCurrentNetworkId(polygon.id),
      },
      ...(includeTestnets
        ? [
            {
              icon: (
                <NetworkSepolia
                  size={24}
                  variant="background"
                />
              ),
              id: sepolia.id,
              label: sepolia.name,
              onClick: () => setCurrentNetworkId(sepolia.id),
            },
          ]
        : []),
    ]

    return (
      <BaseTokenInput
        currentNetworkId={currentNetworkId}
        networks={networks}
        showAddTokenButton
        showBalance={isWalletConnected}
        showTopTokens
        singleToken={currentTokenInput === 'single'}
        title="You pay"
        tokenInput={currentTokenInput === 'multi' ? tokenInputMulti : tokenInputSingle}
      />
    )
  },
)

/**
 * This demo uses the TokenInput component to show how to use it in a single
 * token or multi token mode.
 */
const TokenInput = () => {
  const [currentTokenInput, setCurrentTokenInput] = useState<Options>('multi')
  const dropdownItems = [
    { label: 'Multi token', onClick: () => setCurrentTokenInput('multi') },
    { label: 'Single token', onClick: () => setCurrentTokenInput('single') },
  ]

  return (
    <Box
      paddingTop={{ base: 2, lg: 6 }}
      width="100%"
    >
      <OptionsDropdown
        items={dropdownItems}
        currentItem={dropdownItems[0].label}
      />
      <TokenInputMode
        currentTokenInput={currentTokenInput}
        suspenseFallback={<SkeletonLoadingTokenInput />}
      />
    </Box>
  )
}

const tokenInput = {
  demo: <TokenInput />,
  href: 'https://bootnodedev.github.io/dAppBooster/variables/components_sharedComponents_TokenInput.TokenInput.html',
  icon: <Icon />,
  text: (
    <>
      <a
        href="https://bootnodedev.github.io/dAppBooster/variables/components_sharedComponents_TokenSelect.TokenSelect.html"
        rel="noreferrer"
        target="_blank"
      >
        Select a token
      </a>{' '}
      or specify one beforehand, enter a token amount, auto detect token decimals, user balance, min
      and max boundaries, format numbers, max button.
    </>
  ),
  title: 'Token input',
}

export default tokenInput