Trade Box

1"use client";
2 
3import { LeverageSlider } from "@/registry/sol/leverage-slider";
4import { TokenInput } from "@/registry/sol/token-input";
5import { TradeButtons } from "@/registry/sol/trade-buttons";
6import { Button } from "@/components/ui/button";
7import { Separator } from "@/components/ui/separator";
8import type { DetailRow } from "@/registry/lib/types";
9import { cn } from "@/lib/utils";
10 
11type TradeBoxDetail = DetailRow;
12 
13interface TradeBoxProps {
14  tokens: { icon: string; symbol: string }[];
15  defaultToken?: string;
16  balance?: string;
17  labels?: [string, string];
18  defaultSide?: string;
19  leverageMin?: number;
20  leverageMax?: number;
21  leverageDefault?: number;
22  leverageStep?: number;
23  details?: TradeBoxDetail[];
24  submitLabel?: string;
25  onSubmit?: () => void;
26  className?: string;
27}
28 
29const TradeBox = ({
30  tokens,
31  defaultToken,
32  balance,
33  labels = ["Long", "Short"],
34  defaultSide = "long",
35  leverageMin = 1,
36  leverageMax = 50,
37  leverageDefault = 5,
38  leverageStep = 1,
39  details,
40  submitLabel = "Open Long",
41  onSubmit,
42  className,
43}: TradeBoxProps) => {
44  return (
45    <div className={cn("flex flex-col gap-4 border rounded-lg p-4", className)}>
46      <TradeButtons defaultValue={defaultSide} labels={labels} />
47      <Separator />
48      <div className="flex flex-col gap-2">
49        <TokenInput
50          tokens={tokens}
51          defaultToken={defaultToken}
52          balance={balance}
53        />
54      </div>
55      <LeverageSlider
56        min={leverageMin}
57        max={leverageMax}
58        defaultValue={[leverageDefault]}
59        step={leverageStep}
60      />
61      {details && details.length > 0 && (
62        <>
63          <Separator />
64          <div className="flex flex-col gap-1.5 text-sm">
65            {details.map((detail) => (
66              <div key={detail.label} className="flex justify-between">
67                <span className="text-muted-foreground">{detail.label}</span>
68                <span className={detail.className}>{detail.value}</span>
69              </div>
70            ))}
71          </div>
72        </>
73      )}
74      <Button className="w-full" size="lg" onClick={onSubmit}>
75        {submitLabel}
76      </Button>
77    </div>
78  );
79};
80 
81export type { TradeBoxProps, TradeBoxDetail };
82export { TradeBox };