-
Swap Widget
-
+
+
+
+
Swap Widget
+
Embeddable multi-chain swap widget powered by ShapeShift
-
+
{showCustomizer && (
-
-
Customize Widget
-
-
-
-
- {THEME_PRESETS.map((preset) => {
- const previewColors =
- theme === "dark" ? preset.dark : preset.light;
+
+
Customize Widget
+
+
+
+
+ {THEME_PRESETS.map(preset => {
+ const previewColors = theme === 'dark' ? preset.dark : preset.light
return (
- );
+ )
})}
-
-
-
+
+
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
+
+
{isConnected ? (
<>
- Connected
-
+ Connected
+
{address?.slice(0, 6)}...{address?.slice(-4)}
) : (
- Not connected
+ Not connected
)}
-
-
diff --git a/packages/swap-widget-poc/src/hooks/useBalances.ts b/packages/swap-widget-poc/src/hooks/useBalances.ts
index d3ea6e219dd..0fb49c4e86f 100644
--- a/packages/swap-widget-poc/src/hooks/useBalances.ts
+++ b/packages/swap-widget-poc/src/hooks/useBalances.ts
@@ -1,12 +1,53 @@
-import { useBalance, useReadContracts } from "wagmi";
+import { useBalance } from "wagmi";
import { useMemo } from "react";
import { useQueries } from "@tanstack/react-query";
-import { getBalance } from "@wagmi/core";
+import { getBalance, readContract } from "@wagmi/core";
import { useConfig } from "wagmi";
import type { AssetId } from "../types";
import { formatAmount, getEvmChainIdNumber } from "../types";
import { erc20Abi } from "viem";
+const CONCURRENCY_LIMIT = 5;
+const DELAY_BETWEEN_BATCHES_MS = 50;
+
+class ThrottledQueue {
+ private running = 0;
+ private queue: Array<() => Promise
> = [];
+
+ async add(fn: () => Promise): Promise {
+ return new Promise((resolve, reject) => {
+ const run = async () => {
+ this.running++;
+ try {
+ const result = await fn();
+ resolve(result);
+ } catch (error) {
+ reject(error);
+ } finally {
+ this.running--;
+ await new Promise((r) => setTimeout(r, DELAY_BETWEEN_BATCHES_MS));
+ this.processQueue();
+ }
+ };
+
+ if (this.running < CONCURRENCY_LIMIT) {
+ run();
+ } else {
+ this.queue.push(run);
+ }
+ });
+ }
+
+ private processQueue() {
+ if (this.queue.length > 0 && this.running < CONCURRENCY_LIMIT) {
+ const next = this.queue.shift();
+ next?.();
+ }
+ }
+}
+
+const balanceQueue = new ThrottledQueue();
+
type BalanceResult = {
assetId: AssetId;
balance: string;
@@ -56,6 +97,8 @@ export const useAssetBalance = (
chainId: isNative ? parsed.chainId : undefined,
query: {
enabled: !!address && !!isNative,
+ staleTime: 60_000,
+ refetchOnWindowFocus: false,
},
});
@@ -69,6 +112,8 @@ export const useAssetBalance = (
token: isErc20 ? parsed.tokenAddress : undefined,
query: {
enabled: !!address && !!isErc20,
+ staleTime: 60_000,
+ refetchOnWindowFocus: false,
},
});
@@ -141,44 +186,60 @@ export const useEvmBalances = (
queryKey: ["nativeBalance", address, asset.chainId],
queryFn: async () => {
if (!address) return null;
- try {
- const result = await getBalance(config, {
- address: address as `0x${string}`,
- chainId: asset.chainId,
- });
- return {
- assetId: asset.assetId,
- balance: result.value.toString(),
- precision: asset.precision,
- };
- } catch {
- return null;
- }
+ return balanceQueue.add(async () => {
+ try {
+ const result = await getBalance(config, {
+ address: address as `0x${string}`,
+ chainId: asset.chainId,
+ });
+ return {
+ assetId: asset.assetId,
+ balance: result.value.toString(),
+ precision: asset.precision,
+ };
+ } catch {
+ return null;
+ }
+ });
},
enabled: !!address,
- staleTime: 30_000,
+ staleTime: 60_000,
+ refetchOnWindowFocus: false,
})),
});
- const erc20Contracts = useMemo(
- () =>
- erc20Assets.map((asset) => ({
- address: asset.tokenAddress!,
- abi: erc20Abi,
- functionName: "balanceOf" as const,
- args: [address as `0x${string}`],
- chainId: asset.chainId,
- })),
- [erc20Assets, address],
- );
-
- const { data: erc20Results, isLoading: isErc20Loading } = useReadContracts({
- contracts: erc20Contracts,
- query: {
- enabled: !!address && erc20Contracts.length > 0,
- },
+ const erc20Queries = useQueries({
+ queries: erc20Assets.map((asset) => ({
+ queryKey: ["erc20Balance", address, asset.chainId, asset.tokenAddress],
+ queryFn: async () => {
+ if (!address) return null;
+ return balanceQueue.add(async () => {
+ try {
+ const result = await readContract(config, {
+ address: asset.tokenAddress!,
+ abi: erc20Abi,
+ functionName: "balanceOf",
+ args: [address as `0x${string}`],
+ chainId: asset.chainId,
+ });
+ return {
+ assetId: asset.assetId,
+ balance: (result as bigint).toString(),
+ precision: asset.precision,
+ };
+ } catch {
+ return null;
+ }
+ });
+ },
+ enabled: !!address,
+ staleTime: 60_000,
+ refetchOnWindowFocus: false,
+ })),
});
+ const isErc20Loading = erc20Queries.some((q) => q.isLoading);
+
const balances = useMemo((): BalancesMap => {
const result: BalancesMap = {};
@@ -193,22 +254,19 @@ export const useEvmBalances = (
}
});
- if (erc20Results) {
- erc20Assets.forEach((asset, index) => {
- const balanceResult = erc20Results[index];
- if (balanceResult?.status === "success" && balanceResult.result) {
- const balance = (balanceResult.result as bigint).toString();
- result[asset.assetId] = {
- assetId: asset.assetId,
- balance,
- balanceFormatted: formatAmount(balance, asset.precision),
- };
- }
- });
- }
+ erc20Queries.forEach((query) => {
+ if (query.data) {
+ const { assetId, balance, precision } = query.data;
+ result[assetId] = {
+ assetId,
+ balance,
+ balanceFormatted: formatAmount(balance, precision),
+ };
+ }
+ });
return result;
- }, [nativeQueries, erc20Results, erc20Assets]);
+ }, [nativeQueries, erc20Queries]);
const isLoading = nativeQueries.some((q) => q.isLoading) || isErc20Loading;
@@ -219,13 +277,13 @@ export const useEvmBalances = (
loading.add(nativeAssets[index].assetId);
}
});
- if (isErc20Loading) {
- erc20Assets.forEach((asset) => {
- loading.add(asset.assetId);
- });
- }
+ erc20Queries.forEach((query, index) => {
+ if (query.isLoading) {
+ loading.add(erc20Assets[index].assetId);
+ }
+ });
return loading;
- }, [nativeQueries, nativeAssets, isErc20Loading, erc20Assets]);
+ }, [nativeQueries, nativeAssets, erc20Queries, erc20Assets]);
return { data: balances, isLoading, loadingAssetIds };
};
diff --git a/yarn.lock b/yarn.lock
index 1e409a035cc..9a719cb4ffb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12703,6 +12703,7 @@ __metadata:
"@vitejs/plugin-react": ^4.2.0
react: ^18.2.0
react-dom: ^18.2.0
+ react-virtuoso: ^4.18.1
typescript: ^5.2.2
viem: ^2.21.0
vite: ^5.0.0
@@ -33233,6 +33234,16 @@ pvutils@latest:
languageName: node
linkType: hard
+"react-virtuoso@npm:^4.18.1":
+ version: 4.18.1
+ resolution: "react-virtuoso@npm:4.18.1"
+ peerDependencies:
+ react: ">=16 || >=17 || >= 18 || >= 19"
+ react-dom: ">=16 || >=17 || >= 18 || >=19"
+ checksum: 613261e9555a4d6fbb17ffc3443bc2d0b877c2f8ec52b5cd45ab40c91183e0e14d74151d1cf16195b0df91e41017d733d78aaf28b26987e55642d2b13aa733ed
+ languageName: node
+ linkType: hard
+
"react-virtuoso@npm:^4.7.11":
version: 4.7.11
resolution: "react-virtuoso@npm:4.7.11"
From c990620d8065f8d9375b79aada6828086ad6d63e Mon Sep 17 00:00:00 2001
From: NeOMakinG <14963751+NeOMakinG@users.noreply.github.com>
Date: Tue, 13 Jan 2026 11:43:44 +0100
Subject: [PATCH 17/41] chore: code quality improvements for swap widget MVP
- Fix all ESLint and Prettier errors across all files
- Replace custom ThrottledQueue with p-queue library
- Add proper ARIA roles and accessibility to modals
- Remove non-null assertions in favor of proper guards
- Add lint/type-check scripts to package.json
- Update README with new props (allowedChainIds, defaultReceiveAddress, enableWalletConnection, walletConnectProjectId)
- Fix demo app to use ShapeShift WalletConnect project ID
- Add min-height to token modal for better UX
---
packages/swap-widget-poc/README.md | 78 +-
packages/swap-widget-poc/package.json | 6 +-
packages/swap-widget-poc/src/api/client.ts | 84 +-
.../src/components/AddressInputModal.tsx | 229 ++---
.../src/components/QuoteSelector.tsx | 133 ++-
.../src/components/QuotesModal.tsx | 230 +++--
.../src/components/SettingsModal.tsx | 192 ++--
.../src/components/SwapWidget.css | 37 +
.../src/components/SwapWidget.tsx | 871 +++++++++---------
.../src/components/TokenSelectModal.css | 1 +
.../src/components/TokenSelectModal.tsx | 391 ++++----
.../src/components/WalletProvider.tsx | 125 +++
.../swap-widget-poc/src/constants/swappers.ts | 69 +-
packages/swap-widget-poc/src/demo/App.tsx | 16 +-
packages/swap-widget-poc/src/demo/main.tsx | 18 +-
.../swap-widget-poc/src/hooks/useAssets.ts | 194 ++--
.../swap-widget-poc/src/hooks/useBalances.ts | 246 +++--
.../src/hooks/useMarketData.ts | 165 ++--
.../swap-widget-poc/src/hooks/useSwapQuote.ts | 44 +-
.../swap-widget-poc/src/hooks/useSwapRates.ts | 52 +-
packages/swap-widget-poc/src/index.ts | 10 +-
packages/swap-widget-poc/src/types/index.ts | 351 ++++---
.../src/utils/addressValidation.ts | 184 ++--
.../swap-widget-poc/src/utils/redirect.ts | 61 +-
packages/swap-widget-poc/src/vite-env.d.ts | 6 +-
25 files changed, 1932 insertions(+), 1861 deletions(-)
create mode 100644 packages/swap-widget-poc/src/components/WalletProvider.tsx
diff --git a/packages/swap-widget-poc/README.md b/packages/swap-widget-poc/README.md
index 210cbe8a4d4..bbe7778ee31 100644
--- a/packages/swap-widget-poc/README.md
+++ b/packages/swap-widget-poc/README.md
@@ -57,24 +57,27 @@ function App() {
### SwapWidgetProps
-| Prop | Type | Default | Description |
-| ------------------ | ----------------------------------------------- | ---------------- | ------------------------------------------------------------------------ |
-| `apiKey` | `string` | - | ShapeShift API key for fetching swap rates. Required for production use. |
-| `apiBaseUrl` | `string` | - | Custom API base URL. Useful for testing or custom deployments. |
-| `defaultSellAsset` | `Asset` | ETH on Ethereum | Initial asset to sell. |
-| `defaultBuyAsset` | `Asset` | USDC on Ethereum | Initial asset to buy. |
-| `disabledChainIds` | `ChainId[]` | `[]` | Chain IDs to hide from the asset selector. |
-| `disabledAssetIds` | `AssetId[]` | `[]` | Asset IDs to hide from the asset selector. |
-| `allowedChainIds` | `ChainId[]` | - | If provided, only show assets from these chains. |
-| `allowedAssetIds` | `AssetId[]` | - | If provided, only show these specific assets. |
-| `walletClient` | `WalletClient` | - | Viem wallet client for executing EVM transactions. |
-| `onConnectWallet` | `() => void` | - | Callback when user clicks "Connect Wallet" button. |
-| `onSwapSuccess` | `(txHash: string) => void` | - | Callback when a swap transaction succeeds. |
-| `onSwapError` | `(error: Error) => void` | - | Callback when a swap transaction fails. |
-| `onAssetSelect` | `(type: "sell" \| "buy", asset: Asset) => void` | - | Callback when user selects an asset. |
-| `theme` | `ThemeMode \| ThemeConfig` | `"dark"` | Theme mode (`"light"` or `"dark"`) or full theme configuration. |
-| `defaultSlippage` | `string` | `"0.5"` | Default slippage tolerance percentage. |
-| `showPoweredBy` | `boolean` | `true` | Show "Powered by ShapeShift" branding. |
+| Prop | Type | Default | Description |
+| ------------------------ | ----------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------- |
+| `apiKey` | `string` | - | ShapeShift API key for fetching swap rates. Required for production use. |
+| `apiBaseUrl` | `string` | - | Custom API base URL. Useful for testing or custom deployments. |
+| `defaultSellAsset` | `Asset` | ETH on Ethereum | Initial asset to sell. |
+| `defaultBuyAsset` | `Asset` | USDC on Ethereum | Initial asset to buy. |
+| `disabledChainIds` | `ChainId[]` | `[]` | Chain IDs to hide from the asset selector. |
+| `disabledAssetIds` | `AssetId[]` | `[]` | Asset IDs to hide from the asset selector. |
+| `allowedChainIds` | `ChainId[]` | - | If provided, only show assets from these chains. Use this to restrict the widget to specific chains. |
+| `allowedAssetIds` | `AssetId[]` | - | If provided, only show these specific assets. |
+| `walletClient` | `WalletClient` | - | Viem wallet client for executing EVM transactions. |
+| `onConnectWallet` | `() => void` | - | Callback when user clicks "Connect Wallet" button. |
+| `onSwapSuccess` | `(txHash: string) => void` | - | Callback when a swap transaction succeeds. |
+| `onSwapError` | `(error: Error) => void` | - | Callback when a swap transaction fails. |
+| `onAssetSelect` | `(type: "sell" \| "buy", asset: Asset) => void` | - | Callback when user selects an asset. |
+| `theme` | `ThemeMode \| ThemeConfig` | `"dark"` | Theme mode (`"light"` or `"dark"`) or full theme configuration. |
+| `defaultSlippage` | `string` | `"0.5"` | Default slippage tolerance percentage. |
+| `showPoweredBy` | `boolean` | `true` | Show "Powered by ShapeShift" branding. |
+| `enableWalletConnection` | `boolean` | `false` | Enable built-in wallet connection UI using RainbowKit. Requires `walletConnectProjectId`. |
+| `walletConnectProjectId` | `string` | - | WalletConnect project ID for the built-in wallet connection. Get one at https://cloud.walletconnect.com. |
+| `defaultReceiveAddress` | `string` | - | Fixed receive address for swaps. When set, users cannot change the receive address. |
## Theming
@@ -204,6 +207,8 @@ function App() {
### Restricting Available Chains and Assets
+Use `allowedChainIds` to restrict the widget to only show specific chains. This is useful when you want to limit swaps to certain networks.
+
```tsx
import { SwapWidget, EVM_CHAIN_IDS } from "@shapeshiftoss/swap-widget-poc";
@@ -225,6 +230,43 @@ function App() {
}
```
+### With Built-in Wallet Connection
+
+The widget can manage wallet connections internally using RainbowKit. This is useful when you don't have an existing wallet connection setup.
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget-poc";
+
+function App() {
+ return (
+
+ );
+}
+```
+
+### With Fixed Receive Address
+
+Use `defaultReceiveAddress` to lock the receive address. When set, users cannot change the destination address. This is useful for integrations where you want all swaps to go to a specific address.
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget-poc";
+
+function App() {
+ return (
+
+ );
+}
+```
+
## Exported Types
```typescript
diff --git a/packages/swap-widget-poc/package.json b/packages/swap-widget-poc/package.json
index d804b55a2d9..9b44aa4cddf 100644
--- a/packages/swap-widget-poc/package.json
+++ b/packages/swap-widget-poc/package.json
@@ -9,12 +9,16 @@
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
- "preview": "vite preview"
+ "preview": "vite preview",
+ "lint": "eslint src --ext .ts,.tsx",
+ "lint:fix": "eslint src --ext .ts,.tsx --fix",
+ "type-check": "tsc --noEmit"
},
"dependencies": {
"@rainbow-me/rainbowkit": "^2.2.3",
"@shapeshiftoss/caip": "^8.16.5",
"@tanstack/react-query": "^5.60.0",
+ "p-queue": "^8.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-virtuoso": "^4.18.1",
diff --git a/packages/swap-widget-poc/src/api/client.ts b/packages/swap-widget-poc/src/api/client.ts
index a7a9981b895..62085ec798a 100644
--- a/packages/swap-widget-poc/src/api/client.ts
+++ b/packages/swap-widget-poc/src/api/client.ts
@@ -1,75 +1,70 @@
-import type {
- RatesResponse,
- QuoteResponse,
- AssetsResponse,
- AssetId,
-} from "../types";
+import type { AssetId, AssetsResponse, QuoteResponse, RatesResponse } from '../types'
-const DEFAULT_API_BASE_URL = "https://api.shapeshift.com";
+const DEFAULT_API_BASE_URL = 'https://api.shapeshift.com'
export type ApiClientConfig = {
- baseUrl?: string;
- apiKey?: string;
-};
+ baseUrl?: string
+ apiKey?: string
+}
export const createApiClient = (config: ApiClientConfig = {}) => {
- const baseUrl = config.baseUrl ?? DEFAULT_API_BASE_URL;
+ const baseUrl = config.baseUrl ?? DEFAULT_API_BASE_URL
const fetchWithConfig = async (
endpoint: string,
params?: Record,
- method: "GET" | "POST" = "GET",
+ method: 'GET' | 'POST' = 'GET',
): Promise => {
- const url = new URL(`${baseUrl}${endpoint}`);
+ const url = new URL(`${baseUrl}${endpoint}`)
const headers: Record = {
- "Content-Type": "application/json",
- };
+ 'Content-Type': 'application/json',
+ }
if (config.apiKey) {
- headers["x-api-key"] = config.apiKey;
+ headers['x-api-key'] = config.apiKey
}
- const fetchOptions: RequestInit = { headers, method };
+ const fetchOptions: RequestInit = { headers, method }
- if (method === "GET" && params) {
+ if (method === 'GET' && params) {
Object.entries(params).forEach(([key, value]) => {
- url.searchParams.append(key, value);
- });
- } else if (method === "POST" && params) {
- fetchOptions.body = JSON.stringify(params);
+ url.searchParams.append(key, value)
+ })
+ } else if (method === 'POST' && params) {
+ fetchOptions.body = JSON.stringify(params)
}
- const response = await fetch(url.toString(), fetchOptions);
+ const response = await fetch(url.toString(), fetchOptions)
if (!response.ok) {
- throw new Error(`API error: ${response.status} ${response.statusText}`);
+ throw new Error(`API error: ${response.status} ${response.statusText}`)
}
- return response.json() as Promise;
- };
+ return response.json() as Promise
+ }
return {
- getAssets: () => fetchWithConfig("/v1/assets"),
+ getAssets: () => fetchWithConfig('/v1/assets'),
getRates: (params: {
- sellAssetId: AssetId;
- buyAssetId: AssetId;
- sellAmountCryptoBaseUnit: string;
+ sellAssetId: AssetId
+ buyAssetId: AssetId
+ sellAmountCryptoBaseUnit: string
}) =>
- fetchWithConfig("/v1/swap/rates", {
+ fetchWithConfig('/v1/swap/rates', {
sellAssetId: params.sellAssetId,
buyAssetId: params.buyAssetId,
sellAmountCryptoBaseUnit: params.sellAmountCryptoBaseUnit,
}),
getQuote: (params: {
- sellAssetId: AssetId;
- buyAssetId: AssetId;
- sellAmountCryptoBaseUnit: string;
- sendAddress: string;
- receiveAddress: string;
- swapperName: string;
- slippageTolerancePercentageDecimal?: string;
+ sellAssetId: AssetId
+ buyAssetId: AssetId
+ sellAmountCryptoBaseUnit: string
+ sendAddress: string
+ receiveAddress: string
+ swapperName: string
+ slippageTolerancePercentageDecimal?: string
}) =>
fetchWithConfig(
- "/v1/swap/quote",
+ '/v1/swap/quote',
{
sellAssetId: params.sellAssetId,
buyAssetId: params.buyAssetId,
@@ -78,13 +73,12 @@ export const createApiClient = (config: ApiClientConfig = {}) => {
receiveAddress: params.receiveAddress,
swapperName: params.swapperName,
...(params.slippageTolerancePercentageDecimal && {
- slippageTolerancePercentageDecimal:
- params.slippageTolerancePercentageDecimal,
+ slippageTolerancePercentageDecimal: params.slippageTolerancePercentageDecimal,
}),
},
- "POST",
+ 'POST',
),
- };
-};
+ }
+}
-export type ApiClient = ReturnType;
+export type ApiClient = ReturnType
diff --git a/packages/swap-widget-poc/src/components/AddressInputModal.tsx b/packages/swap-widget-poc/src/components/AddressInputModal.tsx
index 54075b3d5e3..200aa0d7a99 100644
--- a/packages/swap-widget-poc/src/components/AddressInputModal.tsx
+++ b/packages/swap-widget-poc/src/components/AddressInputModal.tsx
@@ -1,31 +1,30 @@
-import { useState, useCallback, useEffect, useMemo } from "react";
-import type { ChainId } from "../types";
-import {
- validateAddress,
- getAddressFormatHint,
-} from "../utils/addressValidation";
-import "./AddressInputModal.css";
+import './AddressInputModal.css'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import type { ChainId } from '../types'
+import { getAddressFormatHint, validateAddress } from '../utils/addressValidation'
const useLockBodyScroll = (isLocked: boolean) => {
useEffect(() => {
- if (!isLocked) return;
- const originalOverflow = document.body.style.overflow;
- document.body.style.overflow = "hidden";
+ if (!isLocked) return
+ const originalOverflow = document.body.style.overflow
+ document.body.style.overflow = 'hidden'
return () => {
- document.body.style.overflow = originalOverflow;
- };
- }, [isLocked]);
-};
+ document.body.style.overflow = originalOverflow
+ }
+ }, [isLocked])
+}
type AddressInputModalProps = {
- isOpen: boolean;
- onClose: () => void;
- chainId: ChainId;
- chainName: string;
- currentAddress: string;
- onAddressChange: (address: string) => void;
- walletAddress?: string;
-};
+ isOpen: boolean
+ onClose: () => void
+ chainId: ChainId
+ chainName: string
+ currentAddress: string
+ onAddressChange: (address: string) => void
+ walletAddress?: string
+}
export const AddressInputModal = ({
isOpen,
@@ -36,182 +35,188 @@ export const AddressInputModal = ({
onAddressChange,
walletAddress,
}: AddressInputModalProps) => {
- useLockBodyScroll(isOpen);
- const [inputValue, setInputValue] = useState(currentAddress);
- const [hasInteracted, setHasInteracted] = useState(false);
+ useLockBodyScroll(isOpen)
+ const [inputValue, setInputValue] = useState(currentAddress)
+ const [hasInteracted, setHasInteracted] = useState(false)
useEffect(() => {
if (isOpen) {
- setInputValue(currentAddress);
- setHasInteracted(false);
+ setInputValue(currentAddress)
+ setHasInteracted(false)
}
- }, [isOpen, currentAddress]);
+ }, [isOpen, currentAddress])
const validation = useMemo(() => {
if (!inputValue || !hasInteracted) {
- return { valid: true, error: undefined };
+ return { valid: true, error: undefined }
}
- return validateAddress(inputValue, chainId);
- }, [inputValue, chainId, hasInteracted]);
+ return validateAddress(inputValue, chainId)
+ }, [inputValue, chainId, hasInteracted])
- const formatHint = useMemo(() => getAddressFormatHint(chainId), [chainId]);
+ const formatHint = useMemo(() => getAddressFormatHint(chainId), [chainId])
const handleInputChange = useCallback((value: string) => {
- setInputValue(value);
- setHasInteracted(true);
- }, []);
+ setInputValue(value)
+ setHasInteracted(true)
+ }, [])
const handleUseWalletAddress = useCallback(() => {
if (walletAddress) {
- setInputValue(walletAddress);
- setHasInteracted(true);
+ setInputValue(walletAddress)
+ setHasInteracted(true)
}
- }, [walletAddress]);
+ }, [walletAddress])
const handleConfirm = useCallback(() => {
- const result = validateAddress(inputValue, chainId);
+ const result = validateAddress(inputValue, chainId)
if (result.valid) {
- onAddressChange(inputValue);
- onClose();
+ onAddressChange(inputValue)
+ onClose()
}
- }, [inputValue, chainId, onAddressChange, onClose]);
+ }, [inputValue, chainId, onAddressChange, onClose])
const handleClear = useCallback(() => {
- setInputValue("");
- setHasInteracted(false);
- onAddressChange("");
- onClose();
- }, [onAddressChange, onClose]);
+ setInputValue('')
+ setHasInteracted(false)
+ onAddressChange('')
+ onClose()
+ }, [onAddressChange, onClose])
const handleBackdropClick = useCallback(
(e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
- onClose();
+ onClose()
}
},
[onClose],
- );
+ )
const isConfirmDisabled = useMemo(() => {
- if (!inputValue) return true;
- return !validateAddress(inputValue, chainId).valid;
- }, [inputValue, chainId]);
+ if (!inputValue) return true
+ return !validateAddress(inputValue, chainId).valid
+ }, [inputValue, chainId])
- if (!isOpen) return null;
+ if (!isOpen) return null
return (
-
-
-
-
Receive Address
-