@shapeshiftoss/swap-widget 0.0.2

package/Dockerfile

@@ -0,0 +1,87 @@
+# syntax=docker/dockerfile:1
+
+# Build stage
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Install build dependencies (including Java for unchained-client code generation)
+RUN apk add --no-cache python3 make g++ openjdk17-jre
+
+# Copy workspace files
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn ./.yarn
+
+# Copy all workspace package.json files for resolution (yarn requires all workspaces present)
+COPY packages/caip/package.json ./packages/caip/
+COPY packages/chain-adapters/package.json ./packages/chain-adapters/
+COPY packages/contracts/package.json ./packages/contracts/
+COPY packages/errors/package.json ./packages/errors/
+COPY packages/hdwallet-coinbase/package.json ./packages/hdwallet-coinbase/
+COPY packages/hdwallet-core/package.json ./packages/hdwallet-core/
+COPY packages/hdwallet-gridplus/package.json ./packages/hdwallet-gridplus/
+COPY packages/hdwallet-integration/package.json ./packages/hdwallet-integration/
+COPY packages/hdwallet-keepkey/package.json ./packages/hdwallet-keepkey/
+COPY packages/hdwallet-keepkey-electron/package.json ./packages/hdwallet-keepkey-electron/
+COPY packages/hdwallet-keepkey-nodehid/package.json ./packages/hdwallet-keepkey-nodehid/
+COPY packages/hdwallet-keepkey-nodewebusb/package.json ./packages/hdwallet-keepkey-nodewebusb/
+COPY packages/hdwallet-keepkey-tcp/package.json ./packages/hdwallet-keepkey-tcp/
+COPY packages/hdwallet-keepkey-webusb/package.json ./packages/hdwallet-keepkey-webusb/
+COPY packages/hdwallet-keplr/package.json ./packages/hdwallet-keplr/
+COPY packages/hdwallet-ledger/package.json ./packages/hdwallet-ledger/
+COPY packages/hdwallet-ledger-webhid/package.json ./packages/hdwallet-ledger-webhid/
+COPY packages/hdwallet-ledger-webusb/package.json ./packages/hdwallet-ledger-webusb/
+COPY packages/hdwallet-metamask-multichain/package.json ./packages/hdwallet-metamask-multichain/
+COPY packages/hdwallet-native/package.json ./packages/hdwallet-native/
+COPY packages/hdwallet-native-vault/package.json ./packages/hdwallet-native-vault/
+COPY packages/hdwallet-phantom/package.json ./packages/hdwallet-phantom/
+COPY packages/hdwallet-sandbox/package.json ./packages/hdwallet-sandbox/
+COPY packages/hdwallet-trezor/package.json ./packages/hdwallet-trezor/
+COPY packages/hdwallet-trezor-connect/package.json ./packages/hdwallet-trezor-connect/
+COPY packages/hdwallet-vultisig/package.json ./packages/hdwallet-vultisig/
+COPY packages/hdwallet-walletconnectv2/package.json ./packages/hdwallet-walletconnectv2/
+COPY packages/hdwallet-seeker/package.json ./packages/hdwallet-seeker/
+COPY packages/public-api/package.json ./packages/public-api/
+COPY packages/swapper/package.json ./packages/swapper/
+COPY packages/swap-widget/package.json ./packages/swap-widget/
+COPY packages/types/package.json ./packages/types/
+COPY packages/unchained-client/package.json ./packages/unchained-client/
+COPY packages/utils/package.json ./packages/utils/
+
+# Install dependencies (skip build/postinstall scripts that require git/cypress/etc)
+RUN --mount=type=cache,id=s/4cafb297-3349-46e2-bfef-8210504e0583-/root/.yarn/berry/cache,target=/root/.yarn/berry/cache \
+    yarn install --immutable --mode skip-build
+
+# Copy unchained-client config and generator files FIRST (rarely changes, enables layer caching)
+COPY packages/unchained-client/openapitools.json ./packages/unchained-client/
+COPY packages/unchained-client/generator/ ./packages/unchained-client/generator/
+
+# Generate unchained-client code (required by tsc --build for workspace packages)
+RUN --mount=type=cache,id=s/4cafb297-3349-46e2-bfef-8210504e0583-/root/.openapitools,target=/root/.openapitools \
+    yarn workspace @shapeshiftoss/unchained-client generate
+
+# Copy remaining source files
+COPY packages/ ./packages/
+COPY public/generated/generatedAssetData.json ./public/generated/
+COPY tsconfig.json tsconfig.packages.json ./
+
+# Build all packages using parallel tsc with project references
+RUN yarn run -T tsc --build tsconfig.packages.json && yarn postbuild:packages
+
+# Build the swap-widget
+WORKDIR /app/packages/swap-widget
+RUN yarn build
+
+# Production stage
+FROM node:22-alpine AS runner
+
+RUN npm install -g serve
+
+WORKDIR /app
+
+# Copy only the built static files (node_modules not needed - vite bundles everything)
+COPY --from=builder /app/packages/swap-widget/dist ./dist
+
+EXPOSE 3000
+
+CMD ["serve", "-s", "dist", "-l", "3000"]

package/README.md

@@ -0,0 +1,519 @@
+# @shapeshiftoss/swap-widget
+
+An embeddable React widget that enables multi-chain token swaps using ShapeShift's aggregation API. Integrate swaps into your application with minimal configuration.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Props Reference](#props-reference)
+- [Theming](#theming)
+- [Examples](#examples)
+- [Exported Types](#exported-types)
+- [Exported Utilities](#exported-utilities)
+- [Exported Hooks](#exported-hooks)
+- [Supported Chains](#supported-chains)
+- [Notes and Limitations](#notes-and-limitations)
+
+## Installation
+
+```bash
+yarn add @shapeshiftoss/swap-widget
+# or
+npm install @shapeshiftoss/swap-widget
+```
+
+### Peer Dependencies
+
+This package requires React 18 or later:
+
+```json
+{
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}
+```
+
+## Quick Start
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget";
+
+function App() {
+  return (
+    <SwapWidget
+      affiliateAddress="0xYourArbitrumAddress"
+      theme="dark"
+      onSwapSuccess={(txHash) => console.log("Success:", txHash)}
+      onSwapError={(error) => console.error("Error:", error)}
+    />
+  );
+}
+```
+
+## Props Reference
+
+### SwapWidgetProps
+
+| Prop                     | Type                                            | Default          | Description                                                                                                |
+| ------------------------ | ----------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
+| `affiliateAddress`       | `string`                                        | -                | Your Arbitrum address for affiliate fee attribution. Optional — the widget works without it.               |
+| `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 Reown AppKit. Supports EVM, Bitcoin, and Solana wallets. 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
+
+The widget supports both simple theme modes and full customization.
+
+### Simple Theme Mode
+
+```tsx
+<SwapWidget theme="dark" />
+// or
+<SwapWidget theme="light" />
+```
+
+### Custom Theme Configuration
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget";
+import type { ThemeConfig } from "@shapeshiftoss/swap-widget";
+
+const customTheme: ThemeConfig = {
+  mode: "dark",
+  accentColor: "#3861fb", // Primary accent color (buttons, focus states)
+  backgroundColor: "#0a0a14", // Widget background
+  cardColor: "#12121c", // Card/panel background
+  textColor: "#ffffff", // Primary text color
+  borderRadius: "12px", // Border radius for elements
+  fontFamily: "Inter, sans-serif",
+};
+
+function App() {
+  return <SwapWidget theme={customTheme} />;
+}
+```
+
+### ThemeConfig Properties
+
+| Property          | Type                | Description                                        |
+| ----------------- | ------------------- | -------------------------------------------------- |
+| `mode`            | `"light" \| "dark"` | Base theme mode. Required.                         |
+| `accentColor`     | `string`            | Primary accent color for buttons and focus states. |
+| `backgroundColor` | `string`            | Widget background color.                           |
+| `cardColor`       | `string`            | Card and panel background color.                   |
+| `textColor`       | `string`            | Primary text color.                                |
+| `borderRadius`    | `string`            | Border radius for UI elements.                     |
+| `fontFamily`      | `string`            | Font family for the widget.                        |
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget";
+
+function App() {
+  return <SwapWidget affiliateAddress="0xYourArbitrumAddress" theme="dark" />;
+}
+```
+
+### With External Wallet Connection (wagmi/viem)
+
+If you already have wagmi set up in your application, you can pass the wallet client directly:
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget";
+import { useWalletClient } from "wagmi";
+
+function App() {
+  const { data: walletClient } = useWalletClient();
+
+  return (
+    <SwapWidget
+      affiliateAddress="0xYourArbitrumAddress"
+      walletClient={walletClient}
+      onConnectWallet={() => {
+        // Your custom wallet connection logic
+      }}
+      onSwapSuccess={(txHash) => {
+        console.log("Swap successful:", txHash);
+      }}
+      onSwapError={(error) => {
+        console.error("Swap failed:", error);
+      }}
+      theme={{
+        mode: "dark",
+        accentColor: "#3861fb",
+        backgroundColor: "#0a0a14",
+        cardColor: "#12121c",
+      }}
+    />
+  );
+}
+```
+
+### With Custom Default Assets
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget";
+import type { Asset } from "@shapeshiftoss/swap-widget";
+
+const defaultSellAsset: Asset = {
+  assetId: "eip155:137/slip44:966",
+  chainId: "eip155:137",
+  symbol: "MATIC",
+  name: "Polygon",
+  precision: 18,
+  icon: "https://example.com/matic.png",
+};
+
+const defaultBuyAsset: Asset = {
+  assetId: "eip155:137/erc20:0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
+  chainId: "eip155:137",
+  symbol: "USDC",
+  name: "USD Coin",
+  precision: 6,
+  icon: "https://example.com/usdc.png",
+};
+
+function App() {
+  return (
+    <SwapWidget
+      affiliateAddress="0xYourArbitrumAddress"
+      defaultSellAsset={defaultSellAsset}
+      defaultBuyAsset={defaultBuyAsset}
+      theme="dark"
+    />
+  );
+}
+```
+
+### 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";
+
+function App() {
+  return (
+    <SwapWidget
+      affiliateAddress="0xYourArbitrumAddress"
+      allowedChainIds={[
+        EVM_CHAIN_IDS.ethereum,
+        EVM_CHAIN_IDS.polygon,
+        EVM_CHAIN_IDS.arbitrum,
+      ]}
+      disabledAssetIds={[
+        "eip155:1/erc20:0x...", // Hide specific tokens
+      ]}
+      theme="dark"
+    />
+  );
+}
+```
+
+### With Built-in Wallet Connection (Multi-Chain)
+
+The widget can manage wallet connections internally using Reown AppKit, which supports EVM chains, Bitcoin, and Solana. This is useful when you don't have an existing wallet connection setup.
+
+```tsx
+import { SwapWidget } from "@shapeshiftoss/swap-widget";
+
+function App() {
+  return (
+    <SwapWidget
+      affiliateAddress="0xYourArbitrumAddress"
+      enableWalletConnection={true}
+      walletConnectProjectId="your-walletconnect-project-id"
+      theme="dark"
+    />
+  );
+}
+```
+
+When `enableWalletConnection` is true, the widget will:
+- Show a "Connect" button that opens the AppKit modal
+- Support connecting EVM wallets (MetaMask, WalletConnect, etc.)
+- Support connecting Bitcoin wallets via WalletConnect
+- Support connecting Solana wallets (Phantom, Solflare, etc.)
+
+### 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";
+
+function App() {
+  return (
+    <SwapWidget
+      affiliateAddress="0xYourArbitrumAddress"
+      defaultReceiveAddress="0x1234567890abcdef1234567890abcdef12345678"
+      theme="dark"
+    />
+  );
+}
+```
+
+## Exported Types
+
+```typescript
+import type {
+  Asset,
+  AssetId,
+  ChainId,
+  Chain,
+  TradeRate,
+  TradeQuote,
+  SwapperName,
+  SwapWidgetProps,
+  ThemeMode,
+  ThemeConfig,
+} from "@shapeshiftoss/swap-widget";
+```
+
+### Asset
+
+```typescript
+type Asset = {
+  assetId: AssetId; // CAIP-19 format: "eip155:1/slip44:60"
+  chainId: ChainId; // CAIP-2 format: "eip155:1"
+  symbol: string; // e.g., "ETH"
+  name: string; // e.g., "Ethereum"
+  precision: number; // e.g., 18
+  icon?: string; // URL to asset icon
+  color?: string; // Brand color
+  networkName?: string; // Display name for the network
+  networkIcon?: string; // URL to network icon
+  explorer?: string; // Block explorer URL
+  explorerTxLink?: string; // Transaction explorer link template
+  explorerAddressLink?: string; // Address explorer link template
+  relatedAssetKey?: AssetId | null; // Related asset for bridged tokens
+};
+```
+
+### SwapperName
+
+```typescript
+type SwapperName =
+  | "THORChain"
+  | "MAYAChain"
+  | "CoW Swap"
+  | "0x"
+  | "Portals"
+  | "Chainflip"
+  | "Relay"
+  | "Bebop"
+  | "Jupiter"
+  | "1inch"
+  | "ButterSwap"
+  | "ArbitrumBridge";
+```
+
+### TradeRate
+
+```typescript
+type TradeRate = {
+  swapperName: SwapperName;
+  rate: string;
+  buyAmountCryptoBaseUnit: string;
+  sellAmountCryptoBaseUnit: string;
+  steps: number;
+  estimatedExecutionTimeMs?: number;
+  affiliateBps: string;
+  networkFeeCryptoBaseUnit?: string;
+  error?: {
+    code: string;
+    message: string;
+  };
+  id?: string;
+};
+```
+
+## Exported Utilities
+
+```typescript
+import {
+  isEvmChainId,
+  getEvmChainIdNumber,
+  getChainType,
+  formatAmount,
+  parseAmount,
+  truncateAddress,
+  EVM_CHAIN_IDS,
+  UTXO_CHAIN_IDS,
+  COSMOS_CHAIN_IDS,
+  OTHER_CHAIN_IDS,
+  CHAIN_METADATA,
+  getChainMeta,
+  getChainName,
+  getChainIcon,
+  getChainColor,
+} from "@shapeshiftoss/swap-widget";
+```
+
+### Chain Type Utilities
+
+| Function              | Signature                                                                 | Description                                          |
+| --------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------- |
+| `isEvmChainId`        | `(chainId: string) => boolean`                                            | Check if a chain ID is an EVM chain.                 |
+| `getEvmChainIdNumber` | `(chainId: string) => number`                                             | Extract the numeric chain ID from a CAIP-2 chain ID. |
+| `getChainType`        | `(chainId: string) => "evm" \| "utxo" \| "cosmos" \| "solana" \| "other"` | Get the chain type from a chain ID.                  |
+
+### Amount Formatting
+
+| Function          | Signature                                                            | Description                                              |
+| ----------------- | -------------------------------------------------------------------- | -------------------------------------------------------- |
+| `formatAmount`    | `(amount: string, decimals: number, maxDecimals?: number) => string` | Format a base unit amount for display.                   |
+| `parseAmount`     | `(amount: string, decimals: number) => string`                       | Parse a human-readable amount to base units.             |
+| `truncateAddress` | `(address: string, chars?: number) => string`                        | Truncate an address for display (e.g., `0x1234...5678`). |
+
+### Chain Metadata
+
+| Function        | Signature                                      | Description                       |
+| --------------- | ---------------------------------------------- | --------------------------------- |
+| `getChainMeta`  | `(chainId: ChainId) => ChainMeta \| undefined` | Get full metadata for a chain.    |
+| `getChainName`  | `(chainId: ChainId) => string`                 | Get the display name for a chain. |
+| `getChainIcon`  | `(chainId: ChainId) => string \| undefined`    | Get the icon URL for a chain.     |
+| `getChainColor` | `(chainId: ChainId) => string`                 | Get the brand color for a chain.  |
+
+### Chain ID Constants
+
+```typescript
+const EVM_CHAIN_IDS = {
+  ethereum: "eip155:1",
+  arbitrum: "eip155:42161",
+  optimism: "eip155:10",
+  polygon: "eip155:137",
+  base: "eip155:8453",
+  avalanche: "eip155:43114",
+  bsc: "eip155:56",
+  gnosis: "eip155:100",
+};
+
+const UTXO_CHAIN_IDS = {
+  bitcoin: "bip122:000000000019d6689c085ae165831e93",
+  bitcoinCash: "bip122:000000000000000000651ef99cb9fcbe",
+  dogecoin: "bip122:00000000001a91e3dace36e2be3bf030",
+  litecoin: "bip122:12a765e31ffd4059bada1e25190f6e98",
+};
+
+const COSMOS_CHAIN_IDS = {
+  cosmos: "cosmos:cosmoshub-4",
+  thorchain: "cosmos:thorchain-1",
+  mayachain: "cosmos:mayachain-mainnet-v1",
+};
+
+const OTHER_CHAIN_IDS = {
+  solana: "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp",
+};
+```
+
+## Exported Hooks
+
+```typescript
+import {
+  useAssets,
+  useAssetById,
+  useChains,
+  useAssetsByChainId,
+  useAssetSearch,
+} from "@shapeshiftoss/swap-widget";
+```
+
+| Hook                              | Return Type                                | Description                                                    |
+| --------------------------------- | ------------------------------------------ | -------------------------------------------------------------- |
+| `useAssets()`                     | `{ data: Asset[], isLoading, error, ... }` | Fetch all available assets.                                    |
+| `useAssetById(assetId)`           | `{ data: Asset \| undefined, ... }`        | Fetch a specific asset by ID.                                  |
+| `useChains()`                     | `{ data: ChainInfo[], ... }`               | Fetch all available chains with their native assets.           |
+| `useAssetsByChainId(chainId)`     | `{ data: Asset[], ... }`                   | Fetch all assets for a specific chain.                         |
+| `useAssetSearch(query, chainId?)` | `{ data: Asset[], ... }`                   | Search assets by symbol or name, optionally filtered by chain. |
+
+## Supported Chains
+
+| Chain             | Chain ID                                  | Type   |
+| ----------------- | ----------------------------------------- | ------ |
+| Ethereum          | `eip155:1`                                | EVM    |
+| Arbitrum One      | `eip155:42161`                            | EVM    |
+| Optimism          | `eip155:10`                               | EVM    |
+| Polygon           | `eip155:137`                              | EVM    |
+| Base              | `eip155:8453`                             | EVM    |
+| Avalanche C-Chain | `eip155:43114`                            | EVM    |
+| BNB Smart Chain   | `eip155:56`                               | EVM    |
+| Gnosis            | `eip155:100`                              | EVM    |
+| Bitcoin           | `bip122:000000000019d6689c085ae165831e93` | UTXO   |
+| Bitcoin Cash      | `bip122:000000000000000000651ef99cb9fcbe` | UTXO   |
+| Dogecoin          | `bip122:00000000001a91e3dace36e2be3bf030` | UTXO   |
+| Litecoin          | `bip122:12a765e31ffd4059bada1e25190f6e98` | UTXO   |
+| Cosmos Hub        | `cosmos:cosmoshub-4`                      | Cosmos |
+| THORChain         | `cosmos:thorchain-1`                      | Cosmos |
+| MAYAChain         | `cosmos:mayachain-mainnet-v1`             | Cosmos |
+| Solana            | `solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp` | Solana |
+
+## Notes and Limitations
+
+### Multi-Chain Swap Support
+
+The widget supports swaps across multiple blockchain types:
+
+- **EVM swaps** (e.g., ETH to USDC, MATIC to WETH) can be executed directly within the widget when a wallet is connected via the `walletClient` prop or through the built-in AppKit wallet connection.
+- **Bitcoin/UTXO swaps** - When using the built-in wallet connection (`enableWalletConnection={true}`), Bitcoin and other UTXO chains can be signed directly via WalletConnect-compatible wallets.
+- **Solana swaps** - Solana transactions can be signed via Phantom, Solflare, or other Solana wallets when using the built-in wallet connection.
+- **Unsupported chains** - Swaps involving chains without wallet support will redirect to [app.shapeshift.com](https://app.shapeshift.com) to complete the transaction.
+
+### Affiliate Address
+
+An affiliate address is optional. Pass your Arbitrum address via the `affiliateAddress` prop to attribute swaps for affiliate fee tracking. The widget works without it — no registration or approval required.
+
+### Internal QueryClient
+
+The widget manages its own React Query `QueryClient` internally. You do not need to wrap it in a `QueryClientProvider`.
+
+### Swap Aggregation
+
+The widget fetches quotes from multiple DEXs and aggregators including:
+
+- THORChain
+- MAYAChain
+- CoW Swap
+- 0x
+- 1inch
+- Portals
+- Chainflip
+- Jupiter (Solana)
+- Bebop
+- Relay
+- ButterSwap
+- Arbitrum Bridge
+
+### Wallet Balance Display
+
+When a wallet is connected (`walletClient` prop), the widget displays the user's balance for the selected sell and buy assets. This only works for EVM chains where the connected wallet has assets.
+
+### USD Price Display
+
+The widget automatically fetches and displays USD prices for selected assets.
+
+### Mobile Responsive
+
+The widget is designed to be responsive and works well on mobile devices.

package/dist/assets/PhArrowCircleDown-B305t-Sh.js

@@ -0,0 +1,14 @@
+import{n as g,Y as c,t as r,p as d,O as s,s as A}from"./property-C9JG5tag.js";var m=Object.defineProperty,w=Object.getOwnPropertyDescriptor,l=(a,o,p,i)=>{for(var e=i>1?void 0:i?w(o,p):o,h=a.length-1,n;h>=0;h--)(n=a[h])&&(e=(i?n(o,p,e):n(e))||e);return i&&e&&m(o,p,e),e};let t=class extends g{constructor(){super(...arguments),this.size="1em",this.weight="regular",this.color="currentColor",this.mirrored=!1}render(){var a;return c`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${this.size}"
+      height="${this.size}"
+      fill="${this.color}"
+      viewBox="0 0 256 256"
+      transform=${this.mirrored?"scale(-1, 1)":null}
+    >
+      ${t.weightsMap.get((a=this.weight)!=null?a:"regular")}
+    </svg>`}};t.weightsMap=new Map([["thin",r`<path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm34.83-86.83a4,4,0,0,1,0,5.66l-32,32a4,4,0,0,1-5.66,0l-32-32a4,4,0,0,1,5.66-5.66L124,158.34V88a4,4,0,0,1,8,0v70.34l25.17-25.17A4,4,0,0,1,162.83,133.17Z"/>`],["light",r`<path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm36.24-86.24a6,6,0,0,1,0,8.48l-32,32a6,6,0,0,1-8.48,0l-32-32a6,6,0,0,1,8.48-8.48L122,153.51V88a6,6,0,0,1,12,0v65.51l21.76-21.75A6,6,0,0,1,164.24,131.76Z"/>`],["regular",r`<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm37.66-85.66a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L120,148.69V88a8,8,0,0,1,16,0v60.69l18.34-18.35A8,8,0,0,1,165.66,130.34Z"/>`],["bold",r`<path d="M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm40.49-84.49a12,12,0,0,1,0,17l-32,32a12,12,0,0,1-17,0l-32-32a12,12,0,1,1,17-17L116,139V88a12,12,0,0,1,24,0v51l11.51-11.52A12,12,0,0,1,168.49,127.51Z"/>`],["fill",r`<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,117.66-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L120,148.69V88a8,8,0,0,1,16,0v60.69l18.34-18.35a8,8,0,0,1,11.32,11.32Z"/>`],["duotone",r`<path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"/><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm37.66-85.66a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L120,148.69V88a8,8,0,0,1,16,0v60.69l18.34-18.35A8,8,0,0,1,165.66,130.34Z"/>`]]);t.styles=d`
+    :host {
+      display: contents;
+    }
+  `;l([s({type:String,reflect:!0})],t.prototype,"size",2);l([s({type:String,reflect:!0})],t.prototype,"weight",2);l([s({type:String,reflect:!0})],t.prototype,"color",2);l([s({type:Boolean,reflect:!0})],t.prototype,"mirrored",2);t=l([A("ph-arrow-circle-down")],t);export{t as PhArrowCircleDown};

package/dist/assets/PhArrowClockwise-CJPxQhr_.js

@@ -0,0 +1,14 @@
+import{n as g,Y as c,t as r,p as d,O as i,s as w}from"./property-C9JG5tag.js";var u=Object.defineProperty,A=Object.getOwnPropertyDescriptor,o=(a,l,s,h)=>{for(var e=h>1?void 0:h?A(l,s):l,p=a.length-1,n;p>=0;p--)(n=a[p])&&(e=(h?n(l,s,e):n(e))||e);return h&&e&&u(l,s,e),e};let t=class extends g{constructor(){super(...arguments),this.size="1em",this.weight="regular",this.color="currentColor",this.mirrored=!1}render(){var a;return c`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${this.size}"
+      height="${this.size}"
+      fill="${this.color}"
+      viewBox="0 0 256 256"
+      transform=${this.mirrored?"scale(-1, 1)":null}
+    >
+      ${t.weightsMap.get((a=this.weight)!=null?a:"regular")}
+    </svg>`}};t.weightsMap=new Map([["thin",r`<path d="M236,56v48a4,4,0,0,1-4,4H184a4,4,0,0,1,0-8h37.7L187.53,68.69l-.13-.12a84,84,0,1,0-1.75,120.51,4,4,0,0,1,5.5,5.82A91.43,91.43,0,0,1,128,220h-1.26A92,92,0,1,1,193,62.84l35,32.05V56a4,4,0,1,1,8,0Z"/>`],["light",r`<path d="M238,56v48a6,6,0,0,1-6,6H184a6,6,0,0,1,0-12h32.55l-30.38-27.8c-.06-.06-.12-.13-.19-.19a82,82,0,1,0-1.7,117.65,6,6,0,0,1,8.24,8.73A93.46,93.46,0,0,1,128,222h-1.28A94,94,0,1,1,194.37,61.4L226,90.35V56a6,6,0,1,1,12,0Z"/>`],["regular",r`<path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z"/>`],["bold",r`<path d="M244,56v48a12,12,0,0,1-12,12H184a12,12,0,1,1,0-24H201.1l-19-17.38c-.13-.12-.26-.24-.38-.37A76,76,0,1,0,127,204h1a75.53,75.53,0,0,0,52.15-20.72,12,12,0,0,1,16.49,17.45A99.45,99.45,0,0,1,128,228h-1.37A100,100,0,1,1,198.51,57.06L220,76.72V56a12,12,0,0,1,24,0Z"/>`],["fill",r`<path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1-5.66-13.66l17-17-10.55-9.65-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,1,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60l10.93,10L226.34,50.3A8,8,0,0,1,240,56Z"/>`],["duotone",r`<path d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z" opacity="0.2"/><path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z"/>`]]);t.styles=d`
+    :host {
+      display: contents;
+    }
+  `;o([i({type:String,reflect:!0})],t.prototype,"size",2);o([i({type:String,reflect:!0})],t.prototype,"weight",2);o([i({type:String,reflect:!0})],t.prototype,"color",2);o([i({type:Boolean,reflect:!0})],t.prototype,"mirrored",2);t=o([w("ph-arrow-clockwise")],t);export{t as PhArrowClockwise};

package/dist/assets/PhArrowDown-C4hT9BVu.js

@@ -0,0 +1,14 @@
+import{n as g,Y as d,t as r,p as w,O as s,s as c}from"./property-C9JG5tag.js";var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,l=(a,o,h,i)=>{for(var e=i>1?void 0:i?y(o,h):o,p=a.length-1,n;p>=0;p--)(n=a[p])&&(e=(i?n(o,h,e):n(e))||e);return i&&e&&u(o,h,e),e};let t=class extends g{constructor(){super(...arguments),this.size="1em",this.weight="regular",this.color="currentColor",this.mirrored=!1}render(){var a;return d`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${this.size}"
+      height="${this.size}"
+      fill="${this.color}"
+      viewBox="0 0 256 256"
+      transform=${this.mirrored?"scale(-1, 1)":null}
+    >
+      ${t.weightsMap.get((a=this.weight)!=null?a:"regular")}
+    </svg>`}};t.weightsMap=new Map([["thin",r`<path d="M202.83,146.83l-72,72a4,4,0,0,1-5.66,0l-72-72a4,4,0,0,1,5.66-5.66L124,206.34V40a4,4,0,0,1,8,0V206.34l65.17-65.17a4,4,0,0,1,5.66,5.66Z"/>`],["light",r`<path d="M204.24,148.24l-72,72a6,6,0,0,1-8.48,0l-72-72a6,6,0,0,1,8.48-8.48L122,201.51V40a6,6,0,0,1,12,0V201.51l61.76-61.75a6,6,0,0,1,8.48,8.48Z"/>`],["regular",r`<path d="M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z"/>`],["bold",r`<path d="M208.49,152.49l-72,72a12,12,0,0,1-17,0l-72-72a12,12,0,0,1,17-17L116,187V40a12,12,0,0,1,24,0V187l51.51-51.52a12,12,0,0,1,17,17Z"/>`],["fill",r`<path d="M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,56,136h64V40a8,8,0,0,1,16,0v96h64a8,8,0,0,1,5.66,13.66Z"/>`],["duotone",r`<path d="M200,144l-72,72L56,144Z" opacity="0.2"/><path d="M207.39,140.94A8,8,0,0,0,200,136H136V40a8,8,0,0,0-16,0v96H56a8,8,0,0,0-5.66,13.66l72,72a8,8,0,0,0,11.32,0l72-72A8,8,0,0,0,207.39,140.94ZM128,204.69,75.31,152H180.69Z"/>`]]);t.styles=w`
+    :host {
+      display: contents;
+    }
+  `;l([s({type:String,reflect:!0})],t.prototype,"size",2);l([s({type:String,reflect:!0})],t.prototype,"weight",2);l([s({type:String,reflect:!0})],t.prototype,"color",2);l([s({type:Boolean,reflect:!0})],t.prototype,"mirrored",2);t=l([c("ph-arrow-down")],t);export{t as PhArrowDown};