Swaps

Install it

Source

1import { type FC, useRef } from "react";
2 
3interface AmountInputProps {
4  amount?: string;
5  onChange?: (value: string) => void;
6  onFocus?: () => void;
7  disabled?: boolean;
8}
9 
10const AmountInput: FC<AmountInputProps> = ({
11  amount,
12  onChange,
13  onFocus,
14  disabled,
15}) => {
16  const inputRef = useRef<HTMLInputElement>(null);
17  const mirrorRef = useRef<HTMLDivElement>(null);
18 
19  return (
20    <div className="relative flex items-start gap-2 text-4xl font-medium transition-all duration-150 ease-out w-full">
21      <div
22        ref={mirrorRef}
23        className="absolute invisible pointer-events-none text-4xl font-medium whitespace-pre"
24        style={{
25          fontVariantNumeric: "proportional-nums",
26        }}
27      >
28        {amount || "0"}
29      </div>
30 
31      <input
32        ref={inputRef}
33        type="text"
34        inputMode="decimal"
35        placeholder="0"
36        value={amount}
37        onChange={(e) => {
38          onChange?.(e.target.value);
39        }}
40        onFocus={onFocus}
41        maxLength={18}
42        autoFocus
43        className="bg-transparent w-full text-foreground text-4xl font-medium outline-none transition-all duration-150 placeholder-muted-foreground proportional-nums disabled:opacity-50"
44        disabled={disabled}
45      />
46      <div className="absolute -inset-1 -z-10 blur-sm pointer-events-none opacity-0" />
47    </div>
48  );
49};
50 
51export default AmountInput;

What it pulls in

npm packages

• @avail-project/nexus-core@2.2.3
• lucide-react
• viem

Other registry items

• availproject/widgets/accordion
• availproject/widgets/button
• availproject/widgets/checkbox
• availproject/widgets/dialog
• availproject/widgets/label
• availproject/widgets/nexus-provider
• availproject/widgets/select
• availproject/widgets/separator
• availproject/widgets/tooltip
• availproject/widgets/utils

Files it writes

• registry/avail-widgets/swaps/components/amount-input.tsx
• registry/avail-widgets/swaps/components/destination-asset-select.tsx
• registry/avail-widgets/swaps/components/destination-container.tsx
• registry/avail-widgets/swaps/components/source-asset-select.tsx
• registry/avail-widgets/swaps/components/source-container.tsx
• registry/avail-widgets/swaps/components/stacked-token-icons.tsx
• registry/avail-widgets/swaps/components/step-flow.tsx
• registry/avail-widgets/swaps/components/token-icon.tsx
• registry/avail-widgets/swaps/components/transaction-progress.tsx
• registry/avail-widgets/swaps/components/view-transaction.tsx
• registry/avail-widgets/swaps/config/destination.ts
• registry/avail-widgets/swaps/hooks/useHover.ts
• registry/avail-widgets/swaps/hooks/useSwaps.ts
• registry/avail-widgets/swaps/swap-widget.tsx
• registry/avail-widgets/swaps/utils/source-matching.ts
• registry/avail-widgets/common/components/ErrorBoundary.tsx
• registry/avail-widgets/common/hooks/useDebouncedCallback.ts
• registry/avail-widgets/common/hooks/useDebouncedValue.ts
• registry/avail-widgets/common/hooks/useInterval.ts
• registry/avail-widgets/common/hooks/useLatest.ts
• registry/avail-widgets/common/hooks/useNexusError.ts
• registry/avail-widgets/common/hooks/usePolling.ts
• registry/avail-widgets/common/hooks/useStableCallback.ts
• registry/avail-widgets/common/hooks/useStopwatch.ts
• registry/avail-widgets/common/hooks/useTransactionExecution.ts
• registry/avail-widgets/common/hooks/useTransactionFlow.ts
• registry/avail-widgets/common/index.ts
• registry/avail-widgets/common/tx/steps.ts
• registry/avail-widgets/common/tx/types.ts
• registry/avail-widgets/common/tx/useTransactionSteps.ts
• registry/avail-widgets/common/types/transaction-flow.ts
• registry/avail-widgets/common/utils/constant.ts
• registry/avail-widgets/common/utils/token-pricing.ts
• registry/avail-widgets/common/utils/transaction-flow.ts