Token Combobox

1"use client";
2 
3import { Check, ChevronsUpDown } from "lucide-react";
4import React from "react";
5import { TokenIcon } from "@/registry/sol/token-icon";
6import { Button } from "@/components/ui/button";
7import {
8  Command,
9  CommandEmpty,
10  CommandGroup,
11  CommandInput,
12  CommandItem,
13  CommandList,
14} from "@/components/ui/command";
15import {
16  Popover,
17  PopoverContent,
18  PopoverTrigger,
19} from "@/components/ui/popover";
20import { cn } from "@/lib/utils";
21 
22interface TokenComboboxProps {
23  tokens: {
24    icon: string;
25    symbol: string;
26  }[];
27  defaultValue?: string;
28  onSelect?: (token: { icon: string; symbol: string }) => void;
29  className?: string;
30}
31 
32const TokenCombobox = ({
33  tokens,
34  defaultValue,
35  onSelect,
36  className,
37}: TokenComboboxProps) => {
38  const [open, setOpen] = React.useState(false);
39  const [value, setValue] = React.useState(defaultValue ?? "");
40 
41  const activeToken = tokens.find(
42    (token) => token.symbol.toLowerCase() === value.toLowerCase(),
43  );
44 
45  return (
46    <Popover open={open} onOpenChange={setOpen}>
47      <PopoverTrigger asChild>
48        <Button
49          variant="outline"
50          role="combobox"
51          aria-expanded={open}
52          className={cn("shrink-0 justify-between", className)}
53        >
54          {activeToken ? (
55            <div className="flex items-center gap-2.5">
56              <TokenIcon
57                src={activeToken.icon}
58                alt={activeToken.symbol}
59                width={20}
60                height={20}
61              />
62              {activeToken.symbol}
63            </div>
64          ) : (
65            "Select token..."
66          )}
67          <ChevronsUpDown className="opacity-50" />
68        </Button>
69      </PopoverTrigger>
70      <PopoverContent className="w-[200px] p-0">
71        <Command>
72          <CommandInput placeholder="Search token..." className="h-9" />
73          <CommandList>
74            <CommandEmpty>No tokens found.</CommandEmpty>
75            <CommandGroup>
76              {tokens.map((token) => (
77                <CommandItem
78                  key={token.symbol}
79                  value={token.symbol}
80                  onSelect={(currentValue) => {
81                    const newValue = currentValue === value ? "" : currentValue;
82                    setValue(newValue);
83                    setOpen(false);
84                    if (newValue) {
85                      const selected = tokens.find(
86                        (t) =>
87// … truncated