Bridge Deposit

1"use client";
2import React, {
3  type FC,
4  memo,
5  type RefObject,
6  useEffect,
7  useMemo,
8  useState,
9} from "react";
10import { Button } from "../../ui/button";
11import { Input } from "../../ui/input";
12import { Label } from "../../ui/label";
13import {
14  type AllowanceHookSource,
15  type OnAllowanceHookData,
16} from "@avail-project/nexus-core";
17import { CHAIN_METADATA } from "../../common";
18import { formatTokenBalance, parseUnits } from "@avail-project/nexus-core/utils";
19import { useNexusError } from "../../common";
20import { Loader2 } from "lucide-react";
21 
22interface AllowanceModalProps {
23  allowance: RefObject<OnAllowanceHookData | null>;
24  callback?: () => void;
25  onCloseCallback?: () => void;
26  onError?: (message: string) => void;
27}
28 
29type AllowanceChoice = "min" | "max" | "custom";
30 
31interface AllowanceOptionProps {
32  index: number;
33  name: string;
34  choice: AllowanceChoice;
35  selectedChoice?: AllowanceChoice;
36  onSelect: (index: number, choice: AllowanceChoice) => void;
37  title: string;
38  description?: string;
39  children?: React.ReactNode;
40  allowanceValue?: string;
41}
42 
43const ALLOWANCE_CHOICES: Array<{
44  choice: AllowanceChoice;
45  title: string;
46  description: string;
47}> = [
48  {
49    choice: "min",
50    title: "Minimum",
51    description: "Grant the lowest allowance required for this action.",
52  },
53  {
54    choice: "max",
55    title: "Maximum",
56    description: "Approve once and skip future approvals for this token.",
57  },
58  {
59    choice: "custom",
60    title: "Custom amount",
61    description: "Specify an allowance that fits your threshold.",
62  },
63];
64 
65const AllowanceOption: FC<AllowanceOptionProps> = ({
66  index,
67  name,
68  choice,
69  selectedChoice,
70  onSelect,
71  title,
72  description,
73  children,
74  allowanceValue,
75}) => {
76  const isActive = selectedChoice === choice;
77 
78  return (
79    <Label className="block cursor-pointer">
80      <input
81        type="radio"
82        name={name}
83        value={choice}
84        checked={isActive}
85        onChange={() => onSelect(index, choice)}
86        className="peer sr-only"
87      />
88      <div className="flex flex-col gap-3 rounded-xl border border-border/40 bg-background/40 px-4 py-3 transition peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50 peer-checked:border-primary peer-checked:bg-primary/10 sm:flex-row sm:items-center sm:justify-between">
89        <div className="flex items-center justify-between w-full">
90          <div>
91// … truncated