UseAddressInputExample.tsx

"use client";

import { AddressInput, BaseInput } from "@scaffold-ui/components";
import { useAddressInput } from "@scaffold-ui/hooks";
import { useTheme } from "next-themes";
import { CSSProperties, useState, useMemo } from "react";
import { Address } from "viem";

export const UseAddressInputExample = () => {
  const [value, setValue] = useState<string>("");
  const { theme } = useTheme();
  const isDark = theme === "dark";

  const customInputStyle = useMemo(
    () =>
      ({
        "--color-sui-input-border": isDark ? "#4ade80" : "#22c55e",
        "--color-sui-input-background": isDark ? "#14532d" : "#dcfce7",
        "--color-sui-input-text": isDark ? "#dcfce7" : "#166534",
        "--color-sui-accent": isDark ? "#dcfce7" : "#14532d",
      }) as CSSProperties,
    [isDark],
  );

  const errorInputStyle = useMemo(
    () =>
      ({
        "--color-sui-input-border": isDark ? "#f87171" : "#ff6b6b",
        "--color-sui-input-background": isDark ? "#7f1d1d" : "#fff5f5",
        "--color-sui-input-text": isDark ? "#fecaca" : "#d63031",
        "--color-sui-accent": isDark ? "#fecaca" : "#7f1d1d",
      }) as CSSProperties,
    [isDark],
  );

  const [manualImplementationValue, setManualImplementationValue] = useState<string>("");
  const { ensAddress, ensName, ensAvatar, isEnsAddressLoading, isEnsNameLoading, isEnsAvatarLoading } = useAddressInput(
    {
      value: manualImplementationValue,
    },
  );

  return (
    <div className="mt-8 p-6 max-w-2xl bg-white/5 shadow-xl  w-full">
      <h1 className="text-2xl font-bold mb-6">useAddressInput Hook & AddressInput Component Examples</h1>

      <div className="space-y-8">
        {/* AddressInput Component Examples */}
        <div className="space-y-4">
          <h2 className="text-xl font-semibold text-[var(--color-sui-primary-content)]">
            AddressInput Component Examples
          </h2>

          <div className="space-y-4">
            <div className="flex flex-col">
              <span className="text-sm text-gray-500 mb-1">Default</span>
              <AddressInput
                value={value}
                onChange={setValue}
              />
            </div>

            <div className="flex flex-col">
              <span className="text-sm text-gray-500 mb-1">Disabled</span>
              <AddressInput
                value={value}
                onChange={setValue}
                disabled
              />
            </div>

            <div className="flex flex-col">
              <span className="text-sm text-gray-500 mb-1">With placeholder</span>
              <AddressInput
                value={value}
                onChange={setValue}
                placeholder="Enter an address"
              />
            </div>

            <div className="flex flex-col">
              <span className="text-sm text-gray-500 mb-1">Custom colors</span>
              <AddressInput value={value} onChange={setValue} style={customInputStyle} />
            </div>

            <div className="flex flex-col" style={errorInputStyle}>
              <span className="text-sm text-gray-500 mb-1">Custom colors using CSS variables</span>
              <AddressInput
                value={value}
                onChange={setValue}
                placeholder="Enter an address"
              />
            </div>
          </div>
        </div>

        {/* Manual Implementation using useAddress hook */}
        <div className="space-y-4 border-t border-gray-700 pt-6">
          <h2 className="text-xl font-semibold text-[var(--color-sui-primary-content)]">
            Manual Implementation (useAddressInput Hook)
          </h2>

          <h3 className="text-lg font-semibold text-[var(--color-sui-primary-content)]">
            Shows address when ENS is entered and vice versa
          </h3>

          {ensAddress ? <div className="bg-[#dae8ff] items-center">Address: {ensAddress}</div> : null}
          {ensName ? (
            <div className="flex bg-[#dae8ff] items-center">
              {isEnsAvatarLoading && <div className="skeleton w-[35px] h-[35px] shrink-0"></div>}
              {ensAvatar ? (
                <span className="w-[35px]">
                  {
                    // eslint-disable-next-line
                    <img
                      className="w-full"
                      src={ensAvatar}
                      alt={`${ensAddress} avatar`}
                    />
                  }
                </span>
              ) : null}
              <span className="text-sui-primary px-2">{ensName}</span>
            </div>
          ) : (
            (isEnsNameLoading || isEnsAddressLoading) && (
              <div className="flex bg-[#dae8ff] items-center gap-2 pr-2">
                <div className="animate-pulse bg-[#f4f8ff] w-[35px] h-[35px] shrink-0"></div>
                <div className="animate-pulse bg-[#f4f8ff] h-3 w-20"></div>
              </div>
            )
          )}
          <BaseInput<Address>
            name="address"
            placeholder="Address Input"
            error={ensAddress === null}
            value={manualImplementationValue as Address}
            onChange={(val) => setManualImplementationValue(val)}
            disabled={isEnsAddressLoading || isEnsNameLoading}
          />
        </div>
      </div>
    </div>
  );
};