Swap Box

1"use client";
2 
3import { ArrowDownUpIcon } from "lucide-react";
4import React from "react";
5import { TokenInput } from "@/registry/sol/token-input";
6import { Button } from "@/components/ui/button";
7import type { DetailRow } from "@/registry/lib/types";
8import { cn } from "@/lib/utils";
9 
10type SwapBoxDetail = DetailRow;
11 
12interface SwapBoxProps {
13  tokens: { icon: string; symbol: string }[];
14  defaultFromToken?: string;
15  defaultToToken?: string;
16  fromBalance?: string;
17  toBalance?: string;
18  fromLabel?: string;
19  toLabel?: string;
20  details?: SwapBoxDetail[];
21  submitLabel?: string;
22  onSubmit?: () => void;
23  className?: string;
24}
25 
26const SwapBox = ({
27  tokens,
28  defaultFromToken,
29  defaultToToken,
30  fromBalance,
31  toBalance,
32  fromLabel = "Sell",
33  toLabel = "Buy",
34  details,
35  submitLabel = "Swap",
36  onSubmit,
37  className,
38}: SwapBoxProps) => {
39  const [fromToken, setFromToken] = React.useState(defaultFromToken);
40  const [toToken, setToToken] = React.useState(defaultToToken);
41  const [fromBal, setFromBal] = React.useState(fromBalance);
42  const [toBal, setToBal] = React.useState(toBalance);
43 
44  const handleFlip = () => {
45    const prevFrom = fromToken;
46    const prevTo = toToken;
47    const prevFromBal = fromBal;
48    const prevToBal = toBal;
49    setFromToken(prevTo);
50    setToToken(prevFrom);
51    setFromBal(prevToBal);
52    setToBal(prevFromBal);
53  };
54 
55  return (
56    <div className={cn("flex flex-col border rounded-lg p-5", className)}>
57      <div className="w-full flex flex-col gap-1.5">
58        <span className="text-xs font-medium text-muted-foreground">
59          {fromLabel}
60        </span>
61        <TokenInput
62          key={`from-${fromToken}`}
63          tokens={tokens}
64          defaultToken={fromToken}
65          balance={fromBal}
66          onTokenSelect={(token) => setFromToken(token.symbol)}
67        />
68      </div>
69      <div className="flex items-center justify-center pt-4">
70        <Button
71          variant="outline"
72          size="icon"
73          className="rounded-full size-9 bg-background border-2"
74          onClick={handleFlip}
75        >
76          <ArrowDownUpIcon className="size-4" />
77        </Button>
78      </div>
79      <div className="w-full flex flex-col gap-1.5">
80        <span className="text-xs font-medium text-muted-foreground">
81          {toLabel}
82        </span>
83        <TokenInput
84          key={`to-${toToken}`}
85          tokens={tokens}
86          defaultToken={toToken}
87          balance={toBal}
88// … truncated