Deposit
avail-widgets/depositFreeComponent
Deprecated: use Nexus Widget instead. A legacy component built with Nexus to enable deposits.
Install it
npx shadcn@latest add https://elements.nexus.availproject.org/r/deposit.jsonSource
1"use client";23import { useCallback, useRef, useEffect, useState, useMemo } from "react";4import type { SwapMaxParams } from "@avail-project/nexus-core";5import { TokenIcon } from "./token-icon";6import { ErrorBanner } from "./error-banner";7import { PercentageSelector } from "./percentage-selector";8import { parseCurrencyInput } from "../utils";9import { UpDownArrows } from "./icons";10import { usdFormatter } from "../../common";11import { type DestinationConfig } from "../types";12import { Skeleton } from "../../ui/skeleton";13import {14 BALANCE_SAFETY_MARGIN,15 CHARACTER_ANIMATION_DURATION_MS,16 SHINE_ANIMATION_DURATION_MS,17 MAX_INPUT_WIDTH_PX,18} from "../constants/widget";19import { TOKEN_IMAGES } from "../constants/assets";20import { useNexus } from "../../nexus/NexusProvider";2122// Hoisted RegExp to avoid recreation on every render (js-hoist-regexp)23const NUMERIC_INPUT_REGEX = /^\d*\.?\d*$/;2425interface AmountCardProps {26 amount?: string;27 onAmountChange?: (amount: string) => void;28 selectedTokenAmount?: number;29 maxSwapInput?: SwapMaxParams;30 onErrorStateChange?: (hasError: boolean) => void;31 totalSelectedBalance: number;32 totalBalance: {33 balance: number;34 usdBalance: number;35 };36 destinationConfig: DestinationConfig;37}3839function AmountCard({40 amount: externalAmount,41 onAmountChange,42 selectedTokenAmount = 0,43 maxSwapInput,44 onErrorStateChange,45 totalSelectedBalance,46 totalBalance,47 destinationConfig,48}: AmountCardProps) {49 const [internalAmount, setInternalAmount] = useState("");50 const amount = externalAmount ?? internalAmount;51 const setAmount = onAmountChange ?? setInternalAmount;5253 const [inputWidth, setInputWidth] = useState(0);54 const [isShining, setIsShining] = useState(false);55 const [isCalculatingMax, setIsCalculatingMax] = useState(false);56 const [animatingIndices, setAnimatingIndices] = useState<Set<number>>(57 new Set(),58 );59 const prevAmountRef = useRef<string>("");60 const prevLengthRef = useRef(0);61 const measureRef = useRef<HTMLSpanElement>(null);62 const inputRef = useRef<HTMLInputElement>(null);6364 const displayValue = amount || "";65 const measureText = displayValue || "0";6667 // Split display value into characters for animation68 const displayChars = displayValue.split("");69 const { nexusSDK, getFiatValue } = useNexus();7071 // Track which characters should animate (newly added ones)72 useEffect(() => {73 const currentLength = displayValue.length;74 const prevLength = prevLengthRef.current;7576// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from avail-widgets
All 27 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | avail-widgets | Components | Free | 2 deps | |
| All Elementsall | avail-widgets | Components | Free | no deps | |
| Animated Spinneranimated-spinner | avail-widgets | Components | Free | no deps | |
| Badgebadge | avail-widgets | Components | Free | 2 deps | |
| Bridge Depositbridge-deposit | avail-widgets | Components | Free | 3 deps · 32 files | |
| Buttonbutton | avail-widgets | Components | Free | 2 deps | |
| Cardcard | avail-widgets | Components | Free | no deps | |
| Checkboxcheckbox | avail-widgets | Components | Free | 2 deps |
