Token Command

1"use client";
2 
3import { ChevronsUpDown } from "lucide-react";
4import React from "react";
5import { TokenIcon } from "@/registry/sol/token-icon";
6import { Button } from "@/components/ui/button";
7import {
8  CommandDialog,
9  CommandEmpty,
10  CommandGroup,
11  CommandInput,
12  CommandItem,
13  CommandList,
14} from "@/components/ui/command";
15import { cn } from "@/lib/utils";
16 
17interface TokenCommandToken {
18  icon: string;
19  symbol: string;
20}
21 
22interface TokenCommandGroup {
23  heading: string;
24  tokens: TokenCommandToken[];
25}
26 
27type TokenCommandProps = {
28  onSelect?: (token: TokenCommandToken) => void;
29  className?: string;
30} & (
31  | { tokens: TokenCommandToken[]; groups?: never }
32  | { groups: TokenCommandGroup[]; tokens?: never }
33);
34 
35const TokenCommand = ({
36  tokens,
37  groups,
38  onSelect,
39  className,
40}: TokenCommandProps) => {
41  const [open, setOpen] = React.useState(false);
42  const [value, setValue] = React.useState("");
43 
44  const allTokens = React.useMemo(() => {
45    if (tokens) return tokens;
46    if (groups) return groups.flatMap((g) => g.tokens);
47    return [];
48  }, [tokens, groups]);
49 
50  const activeToken = allTokens.find(
51    (token) => token.symbol.toLowerCase() === value.toLowerCase(),
52  );
53 
54  React.useEffect(() => {
55    const down = (e: KeyboardEvent) => {
56      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
57        e.preventDefault();
58        setOpen((open) => !open);
59      }
60    };
61 
62    document.addEventListener("keydown", down);
63    return () => document.removeEventListener("keydown", down);
64  }, []);
65 
66  const renderItem = (token: TokenCommandToken) => (
67    <CommandItem
68      key={token.symbol}
69      value={token.symbol}
70      onSelect={(currentValue) => {
71        const newValue = currentValue === value ? "" : currentValue;
72        setValue(newValue);
73        setOpen(false);
74        if (newValue) {
75          onSelect?.(token);
76        }
77      }}
78    >
79      <TokenIcon src={token.icon} alt={token.symbol} width={20} height={20} />
80      {token.symbol}
81    </CommandItem>
82  );
83 
84  return (
85    <>
86      <Button
87        variant="outline"
88        className={cn("w-[200px] justify-between", className)}
89        onClick={() => setOpen(true)}
90      >
91        {activeToken ? (
92          <div className="flex items-center gap-2.5">
93            <TokenIcon
94              src={activeToken.icon}
95              alt={activeToken.symbol}
96              width={20}
97              height={20}
98            />
99            {activeToken.symbol}
100          </div>
101        ) : (
102// … truncated