Email OTP Authentication

import { useState } from 'react'
import { useAccount, useDisconnect } from 'wagmi'
import { useSendOTP, useVerifyOTP } from '@zerodev/wallet-react'
 
function EmailOTPAuth() {
  const [email, setEmail] = useState('')
  const [code, setCode] = useState('')
  const [otpId, setOtpId] = useState<string | null>(null)
 
  const { address, isConnected } = useAccount()
  const { disconnectAsync } = useDisconnect()
  const sendOTP = useSendOTP()
  const verifyOTP = useVerifyOTP()
 
  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnectAsync()}>Logout</button>
      </div>
    )
  }
 
  if (!otpId) {
    return (
      <div>
        <input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <button
          onClick={async () => {
            const result = await sendOTP.mutateAsync({ email })
            setOtpId(result.otpId)
          }}
          disabled={sendOTP.isPending || !email}
        >
          {sendOTP.isPending ? 'Sending...' : 'Send Code'}
        </button>
        {sendOTP.isError && <p>Error: {sendOTP.error.message}</p>}
      </div>
    )
  }
 
  return (
    <div>
      <p>Code sent to {email}</p>
      <input
        type="text"
        placeholder="Enter verification code"
        value={code}
        onChange={(e) => setCode(e.target.value)}
      />
      <button
        onClick={() => verifyOTP.mutateAsync({ code, otpId })}
        disabled={verifyOTP.isPending || !code}
      >
        {verifyOTP.isPending ? 'Verifying...' : 'Verify Code'}
      </button>
      {verifyOTP.isError && <p>Error: {verifyOTP.error.message}</p>}
    </div>
  )
}