Token Input

1"use client";
2 
3import { WalletIcon } from "lucide-react";
4import React from "react";
5import { NumericFormat } from "react-number-format";
6import { TokenCombobox } from "@/registry/sol/token-combobox";
7import { Button } from "@/components/ui/button";
8import { Input } from "@/components/ui/input";
9import { cn } from "@/lib/utils";
10 
11interface TokenInputProps {
12  tokens: { icon: string; symbol: string }[];
13  defaultToken?: string;
14  balance?: string;
15  value?: string;
16  usdValue?: string;
17  onValueChange?: (value: string) => void;
18  onTokenSelect?: (token: { icon: string; symbol: string }) => void;
19  className?: string;
20}
21 
22const TokenInput = ({
23  tokens,
24  defaultToken,
25  balance,
26  value,
27  usdValue,
28  onValueChange,
29  onTokenSelect,
30  className,
31}: TokenInputProps) => {
32  const [internalValue, setInternalValue] = React.useState(value ?? "");
33  const currentValue = value ?? internalValue;
34 
35  const handleValueChange = (values: { value: string }) => {
36    setInternalValue(values.value);
37    onValueChange?.(values.value);
38  };
39 
40  const handleQuickAmount = (fraction: number) => {
41    if (!balance) return;
42    const numericBalance = Number.parseFloat(balance.replace(/,/g, ""));
43    if (Number.isNaN(numericBalance)) return;
44    const newValue = (numericBalance * fraction).toString();
45    setInternalValue(newValue);
46    onValueChange?.(newValue);
47  };
48 
49  return (
50    <div
51      className={cn(
52        "flex flex-col gap-3 border p-4 rounded-lg w-full",
53        className,
54      )}
55    >
56      {balance && (
57        <div className="flex items-center justify-between">
58          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
59            <WalletIcon className="size-3.5" />
60            {balance}
61          </span>
62          <div className="flex items-center gap-2">
63            <Button
64              variant="outline"
65              size="sm"
66              className="text-xs h-6 px-2 rounded-sm"
67              onClick={() => handleQuickAmount(0.5)}
68            >
69              Half
70            </Button>
71            <Button
72              variant="outline"
73              size="sm"
74              className="text-xs h-6 px-2 rounded-sm"
75              onClick={() => handleQuickAmount(1)}
76            >
77              Max
78            </Button>
79          </div>
80        </div>
81      )}
82      <div className="flex items-center gap-2 w-full">
83        <TokenCombobox
84          tokens={tokens}
85          defaultValue={defaultToken}
86// … truncated