defi-swap

1"use client";
2 
3import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
4import { Button } from "@/components/ui/button";
5import { Card } from "@/components/ui/card";
6import {
7    Select,
8    SelectContent,
9    SelectItem,
10    SelectTrigger,
11    SelectValue,
12} from "@/components/ui/select";
13import { RiSettings4Line, RiArrowDownLine } from "@remixicon/react";
14import { I18nProvider, Input, Label, NumberField } from "react-aria-components";
15import { cn } from "@repo/shadcn-ui/lib/utils";
16import { useState } from "react";
17 
18interface ConverterFieldProps {
19    className?: string;
20    isLast?: boolean;
21    amount: number;
22    onAmountChange: (value: number) => void;
23    balance: string;
24    selectedCoin: string;
25    onSelectCoin: (value: string) => void;
26    onMax?: () => void;
27    coins: {
28        id: string;
29        name: string;
30        image: string;
31    }[];
32}
33 
34function ConverterField({
35    className,
36    isLast,
37    amount,
38    onAmountChange,
39    balance,
40    selectedCoin,
41    onSelectCoin,
42    onMax,
43    coins,
44}: ConverterFieldProps) {
45    return (
46        <>
47            {/* Arrow */}
48            {isLast && (
49                <div
50                    className="size-6 border z-10 rounded-full border-primary flex flex-col items-center justify-center bg-linear-to-b from-primary to-primary-to inset-shadow-[0_1px_rgb(255_255_255/0.15)] absolute top-1/2 -translate-y-1/2"
51                    aria-hidden="true"
52                >
53                    <RiArrowDownLine className="text-primary-foreground" size={20} />
54                </div>
55            )}
56            {/* Converter */}
57            <Card
58                className={cn(
59                    "relative w-full flex-row items-center justify-between gap-2 p-4 dark:bg-card/64 border-2 border-border",
60                    isLast
61                        ? "[mask-image:radial-gradient(ellipse_26px_24px_at_50%_0%,transparent_0,_transparent_24px,_black_25px)]"
62                        : "[mask-image:radial-gradient(ellipse_26px_24px_at_50%_100%,transparent_0,_transparent_24px,_black_25px)]",
63                    className,
64                )}
65            >
66                {/* Arrow */}
67                {isLast && (
68                    <div
69                        className="absolute -top-px left-1/2 -translate-x-1/2 w-[50px] h-[25px] rounded-b-full border-b border-x border-white/15"
70                        aria-hidden="true"
71                    ></div>
72                )}
73// … truncated