Multi-chain Swap

1"use client";
2// beui.dev/components/blocks/swap
3 
4import { useEffect, useMemo, useState } from "react";
5import { Settings } from "lucide-react";
6import { useReducedMotion } from "motion/react";
7import { cn } from "@/lib/utils";
8import { CHAINS, TOKENS } from "./swap/data";
9import { ActionButton, DestinationRow, FlipButton } from "./swap/controls";
10import { Field } from "./swap/field";
11import { QuoteRow } from "./swap/quote-row";
12import { TokenPicker } from "./swap/token-picker";
13import type { Chain, Token, TokenSide } from "./swap/types";
14import { formatAmount } from "./swap/utils";
15 
16export type { Chain, Token } from "./swap/types";
17export { SWAP_DRAWER_EASE } from "./swap/constants";
18 
19export interface MultiChainSwapProps {
20  chains?: Chain[];
21  tokens?: Token[];
22  defaultFromId?: string;
23  defaultToId?: string;
24  className?: string;
25}
26 
27export function MultiChainSwap({
28  chains = CHAINS,
29  tokens = TOKENS,
30  defaultFromId = "eth-eth",
31  defaultToId = "sol-sol",
32  className,
33}: MultiChainSwapProps) {
34  const reduce = useReducedMotion();
35  const [fromId, setFromId] = useState(defaultFromId);
36  const [toId, setToId] = useState(defaultToId);
37  const [amount, setAmount] = useState("1");
38  const [flipRot, setFlipRot] = useState(0);
39  const [quoting, setQuoting] = useState(false);
40  const [picking, setPicking] = useState<TokenSide | null>(null);
41  const [showDest, setShowDest] = useState(false);
42  const [destAddress, setDestAddress] = useState("");
43 
44  const from = findToken(tokens, fromId);
45  const to = findToken(tokens, toId);
46  const fromChain = findChain(chains, from.chainId);
47  const toChain = findChain(chains, to.chainId);
48 
49  const numericAmount = Number(amount) || 0;
50  const quoteKey = `${numericAmount}:${fromId}:${toId}`;
51  const rate = useMemo(() => {
52    if (!from.usd || !to.usd) return 1;
53    return from.usd / to.usd;
54  }, [from.usd, to.usd]);
55  const toAmount = numericAmount * rate;
56 
57  useEffect(() => {
58    if (!quoteKey) return;
59    if (numericAmount === 0) return;
60    setQuoting(true);
61    const id = setTimeout(() => setQuoting(false), 450);
62    return () => clearTimeout(id);
63  }, [numericAmount, quoteKey]);
64 
65  const flip = () => {
66    setFlipRot((r) => r + 180);
67    setFromId(toId);
68    setToId(fromId);
69  };
70 
71  const pickToken = (id: string) => {
72    if (!picking) return;
73 
74    if (picking === "from") {
75      if (id === toId) setToId(fromId);
76      setFromId(id);
77    } else {
78      if (id === fromId) setFromId(toId);
79      setToId(id);
80    }
81 
82// … truncated