Build Select Token Component

[earth2travis]

src/components/app/SelectToken.tsx

guess we'll need something for funding request field. might be fun for you to play with one in the SAMPLE form and cobble together some shadcn

[earth2travis]

Started this in v0:

'use client';

import * as React from 'react';
import Image from 'next/image';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

interface SelectTokenProps {
  maxAmount?: number;
  onQuantityChange?: (value: string) => void;
  onTokenSelect?: (value: string) => void;
}

export function SelectToken({
  maxAmount = 0.031,
  onQuantityChange,
  onTokenSelect,
}: SelectTokenProps) {
  const [quantity, setQuantity] = React.useState('');

  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuantity(e.target.value);
    onQuantityChange?.(e.target.value);
  };

  const handleMaxClick = () => {
    setQuantity(maxAmount.toString());
    onQuantityChange?.(maxAmount.toString());
  };

  const handleTokenSelect = (value: string) => {
    onTokenSelect?.(value);
  };

  return (
    <div className="w-full space-y-4 rounded-lg border p-4">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <Input
            type="number"
            value={quantity}
            onChange={handleQuantityChange}
            className="border-none text-4xl font-medium placeholder:text-gray-400 p-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
            placeholder="0"
          />
        </div>
        <Select onValueChange={handleTokenSelect} defaultValue="eth">
          <SelectTrigger className="w-[140px] border rounded-full">
            <SelectValue>
              <div className="flex items-center gap-2">
                <div className="w-6 h-6 relative flex-shrink-0">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-kUQ1C0N4c64TpjCXD79MXNPk1JLiBY.png"
                    alt="ETH"
                    fill
                    className="rounded-full object-contain"
                  />
                </div>
                <span>ETH</span>
              </div>
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="eth">
              <div className="flex items-center gap-2">
                <div className="w-6 h-6 relative flex-shrink-0">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-kUQ1C0N4c64TpjCXD79MXNPk1JLiBY.png"
                    alt="ETH"
                    fill
                    className="rounded-full object-contain"
                  />
                </div>
                <span>ETH</span>
              </div>
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="flex items-center justify-between">
        <div className="text-sm text-gray-600">
          ${quantity ? (parseFloat(quantity) * 2000).toFixed(2) : '0.00'}
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-600">{maxAmount} ETH</span>
          <Button
            variant="outline"
            onClick={handleMaxClick}
            className="h-auto px-2 py-1 text-xs bg-gray-100"
          >
            Max
          </Button>
        </div>
      </div>
    </div>
  );
}

[earth2travis]

However, I am thinking it would be cool to modify the Uniswap token picker from horsefacts' Uniframe: https://github.com/horsefacts/interface