blog/src/features/Web3/components/Input/InputGroup.tsx

import { useState, type ReactElement } from 'react'
import Input from '@components/Input'
import { Conversion } from '../Conversion'
import styles from './InputGroup.module.css'
import { TokenSelect } from '../TokenSelect'
import { $amount, $isInitSend, $selectedToken } from '@features/Web3/stores'
import { useStore } from '@nanostores/react'

export function InputGroup({
  isDisabled,
  error
}: {
  isDisabled: boolean
  error: string | undefined
}): ReactElement {
  const amount = useStore($amount)
  const selectedToken = useStore($selectedToken)

  const [isFocus, setIsFocus] = useState(false)

  function handleChange(newAmount: string) {
    $amount.set(newAmount)
  }

  return (
    <>
      <div
        className={`${styles.inputGroup} ${isFocus ? styles.focus : ''} ${
          error ? styles.error : ''
        }`}
      >
        <div className={styles.token}>
          <TokenSelect />
        </div>
        <Input
          type="text"
          inputMode="decimal"
          pattern="[0-9.]*"
          value={amount}
          placeholder="0.00"
          onChange={(e) => handleChange(e.target.value)}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          className={styles.inputInput}
        />
        <button
          className={`${styles.submit} btn btn-primary`}
          disabled={
            isDisabled ||
            !amount ||
            amount === '' ||
            !selectedToken ||
            Boolean(error)
          }
          onClick={() => $isInitSend.set(true)}
        >
          Preview
        </button>

        {error ? <span className={styles.errorOutput}>{error}</span> : null}
      </div>

      <div className={styles.conversion}>
        <Conversion />
      </div>
    </>
  )
}