ToolsWalletAddress.tsx

import React, { useState, useRef, useEffect } from 'react'
import { cx } from 'class-variance-authority'
import { ToolsSecondaryButton, InputField, Tooltip } from '@/components'
import { Heading5 } from '@/typography'
import {
  checkHrefFormat,
  getWalletAddress,
  toWalletAddressUrl,
} from '@shared/utils'
import { SVGRefresh, SVGSpinner } from '~/assets/svg'
import { useConnectWallet } from '~/hooks/useConnectWallet'
import type { ElementErrors } from '~/lib/types'
import { useUIActions } from '~/stores/uiStore'
import type { WalletActions, WalletStore } from '~/stores/wallet-store'

interface Props {
  store: WalletStore
  walletActions: WalletActions
  toolName: 'drawer banner' | 'payment widget' | 'offerwall experience'
}

export const ToolsWalletAddress = ({
  store: snap,
  walletActions,
  toolName,
}: Props) => {
  const { connect, disconnect } = useConnectWallet(snap, walletActions)
  const uiActions = useUIActions()
  const [error, setError] = useState<ElementErrors>()
  const [isLoading, setIsLoading] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    const walletInputApi = {
      focus: () => {
        if (inputRef.current) {
          inputRef.current.focus()
          const length = inputRef.current.value.length
          inputRef.current.setSelectionRange(length, length)
        }
      },
    }

    return uiActions.registerWalletInput(walletInputApi)
  }, [])

  const handleContinue = async () => {
    if (!snap.walletAddress.trim()) {
      setError({
        fieldErrors: { walletAddress: ['This field is required'] },
        message: [],
      })
      return
    }

    setIsLoading(true)
    setError(undefined)
    try {
      const walletAddressUrl = checkHrefFormat(
        toWalletAddressUrl(snap.walletAddress),
      )

      const walletAddressInfo = await getWalletAddress(walletAddressUrl)
      walletActions.setWalletAddressId(walletAddressInfo.id)
      await connect()
    } catch (error) {
      setError({
        fieldErrors: { walletAddress: [(error as Error).message] },
        message: [],
      })
    } finally {
      setIsLoading(false)
    }
  }

  const handleWalletAddressChange = (
    e: React.ChangeEvent<HTMLInputElement>,
  ) => {
    walletActions.setWalletAddress(e.target.value)

    if (snap.walletConnectStep !== 'unfilled') {
      walletActions.setConnectWalletStep('unfilled')
    }
    if (error) {
      setError(undefined)
    }
  }

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!snap.isWalletConnected && !isLoading) {
      handleContinue()
    }
  }

  const getStatusMessage = (): {
    message: string
    type: 'error' | 'success' | 'info'
  } => {
    if (snap.walletConnectStep === 'error') {
      return {
        message: 'You have not connected your wallet address yet.',
        type: 'error',
      }
    }
    if (!snap.isWalletConnected) {
      return {
        message:
          "If you're connecting your wallet address for the first time, you'll start with the default profile. You can then customize and save your profile as needed.",
        type: 'info',
      }
    }
    if (!snap.hasRemoteConfigs) {
      return {
        message: `There are no custom edits for the ${toolName} correlated to this wallet address but you can start customizing when you want.`,
        type: 'success',
      }
    }

    return {
      message: `We've loaded your profiles. Feel free to keep customizing your ${toolName} to fit your style.`,
      type: 'success',
    }
  }

  const statusMessage = getStatusMessage()
  return (
    <form
      onSubmit={handleSubmit}
      className={cx(
        'flex flex-col xl:flex-row xl:items-start gap-2xl p-md bg-white rounded-lg',
        snap.walletConnectStep === 'error' && 'border border-red-600',
      )}
    >
      <div className="items-start gap-md w-full xl:flex-1 xl:grow">
        <div className="inline-flex items-center gap-xs">
          <Heading5 htmlFor="wallet-address-url" as="label">
            Wallet address
          </Heading5>
          <Tooltip label="Why do I need to connect my wallet?">
            Connecting your wallet allows us to save your custom profiles, link
            them to you as the original author, and verify ownership for future
            updates.
            <br /> It also embeds the wallet address into your web page
            automatically, enabling Web Monetization on your behalf.
          </Tooltip>
        </div>
        <div className="flex items-start gap-3 w-full pt-md">
          <div className="flex-1 min-w-0 h-12">
            <InputField
              ref={inputRef}
              id="wallet-address-url"
              placeholder={
                snap.isWalletConnected
                  ? undefined
                  : 'https://walletprovider.com/MyWallet'
              }
              value={snap.walletAddress}
              onChange={handleWalletAddressChange}
              disabled={snap.isWalletConnected}
              readOnly={isLoading}
              error={error?.fieldErrors.walletAddress}
            />
          </div>
          {snap.isWalletConnected && (
            <button
              onClick={disconnect}
              className="flex items-center justify-center w-12 h-12 p-2 rounded-lg shrink-0 hover:bg-gray-50 active:bg-gray-100 transition-colors"
              aria-label="Disconnect wallet"
            >
              <SVGRefresh className="w-5 h-5 text-purple-500" />
            </button>
          )}
        </div>
      </div>

      <div className="flex flex-col w-full xl:max-w-[490px] items-start gap-xs xl:flex-1 xl:grow">
        <span
          id="wallet-status"
          role={statusMessage.type === 'error' ? 'alert' : 'status'}
          className={cx(
            'w-full text-style-small-standard',
            statusMessage.type === 'error' && '!text-red-600',
            statusMessage.type === 'success' && '!text-text-success',
          )}
        >
          {statusMessage.message}
        </span>

        {!snap.isWalletConnected && (
          <ToolsSecondaryButton
            type="submit"
            className="xl:w-[143px]"
            disabled={isLoading}
            aria-busy={isLoading}
          >
            <div className="flex items-center justify-center gap-2">
              {isLoading && <SVGSpinner className="w-4 h-4" />}
              <span>{isLoading ? 'Connecting...' : 'Continue'}</span>
            </div>
          </ToolsSecondaryButton>
        )}
      </div>
    </form>
  )
}