@hongming-wang/usdc-bridge-widget 0.1.0

package/dist/index.js

@@ -0,0 +1,2356 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  BridgeWidget: () => BridgeWidget,
+  CHAIN_ICONS: () => CHAIN_ICONS,
+  CheckIcon: () => CheckIcon,
+  ChevronDownIcon: () => ChevronDownIcon,
+  DEFAULT_CHAIN_CONFIGS: () => DEFAULT_CHAIN_CONFIGS,
+  DEFAULT_LOCALE: () => DEFAULT_LOCALE,
+  ErrorIcon: () => ErrorIcon,
+  ExternalLinkIcon: () => ExternalLinkIcon,
+  MAX_USDC_AMOUNT: () => MAX_USDC_AMOUNT,
+  MIN_USDC_AMOUNT: () => MIN_USDC_AMOUNT,
+  SpinnerIcon: () => SpinnerIcon,
+  SwapIcon: () => SwapIcon,
+  TESTNET_CHAIN_CONFIGS: () => TESTNET_CHAIN_CONFIGS,
+  THEME_COLORS: () => THEME_COLORS,
+  THEME_FONTS: () => THEME_FONTS,
+  THEME_SIZING: () => THEME_SIZING,
+  TOKEN_MESSENGER_ADDRESSES: () => TOKEN_MESSENGER_ADDRESSES,
+  TOKEN_MESSENGER_V1_ADDRESSES: () => TOKEN_MESSENGER_V1_ADDRESSES,
+  TOKEN_MESSENGER_V2_ADDRESS: () => TOKEN_MESSENGER_V2_ADDRESS,
+  USDC_ADDRESSES: () => USDC_ADDRESSES,
+  USDC_BRAND_COLOR: () => USDC_BRAND_COLOR,
+  USDC_DECIMALS: () => USDC_DECIMALS,
+  WalletIcon: () => WalletIcon,
+  arbitrum: () => import_chains.arbitrum,
+  arbitrumSepolia: () => import_chains.arbitrumSepolia,
+  avalanche: () => import_chains.avalanche,
+  avalancheFuji: () => import_chains.avalancheFuji,
+  base: () => import_chains.base,
+  baseSepolia: () => import_chains.baseSepolia,
+  codex: () => codex,
+  createChainConfig: () => createChainConfig,
+  createTestnetChainConfig: () => createTestnetChainConfig,
+  defaultTheme: () => defaultTheme,
+  formatNumber: () => formatNumber,
+  getChainName: () => getChainName,
+  getErrorMessage: () => getErrorMessage,
+  hyperEvm: () => hyperEvm,
+  ink: () => import_chains.ink,
+  isValidPositiveAmount: () => isValidPositiveAmount,
+  linea: () => import_chains.linea,
+  mainnet: () => import_chains.mainnet,
+  mergeTheme: () => mergeTheme,
+  monad: () => monad,
+  optimism: () => import_chains.optimism,
+  optimismSepolia: () => import_chains.optimismSepolia,
+  parseUSDCAmount: () => parseUSDCAmount,
+  plume: () => plume,
+  polygon: () => import_chains.polygon,
+  polygonAmoy: () => import_chains.polygonAmoy,
+  sei: () => import_chains.sei,
+  sepolia: () => import_chains.sepolia,
+  sonic: () => import_chains.sonic,
+  themePresets: () => themePresets,
+  unichain: () => unichain,
+  useAllUSDCBalances: () => useAllUSDCBalances,
+  useBridge: () => useBridge,
+  useBridgeEstimate: () => useBridgeEstimate,
+  useBridgeQuote: () => useBridgeQuote,
+  useFormatNumber: () => useFormatNumber,
+  useUSDCAllowance: () => useUSDCAllowance,
+  useUSDCBalance: () => useUSDCBalance,
+  validateAmountInput: () => validateAmountInput,
+  validateChainConfig: () => validateChainConfig,
+  validateChainConfigs: () => validateChainConfigs,
+  worldchain: () => import_chains.worldchain,
+  xdc: () => import_chains.xdc
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/BridgeWidget.tsx
+var import_react3 = require("react");
+var import_wagmi3 = require("wagmi");
+
+// src/hooks.ts
+var import_react2 = require("react");
+var import_wagmi2 = require("wagmi");
+var import_viem2 = require("viem");
+
+// src/constants.ts
+var USDC_DECIMALS = 6;
+var USDC_BRAND_COLOR = "#2775ca";
+var MAX_USDC_AMOUNT = "100000000000";
+var MIN_USDC_AMOUNT = "0.000001";
+var DEFAULT_LOCALE = "en-US";
+var USDC_ADDRESSES = {
+  // Original chains
+  1: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+  // Ethereum
+  42161: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+  // Arbitrum
+  43114: "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
+  // Avalanche
+  8453: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+  // Base
+  10: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
+  // Optimism
+  137: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
+  // Polygon
+  59144: "0x176211869cA2b568f2A7D4EE941E073a821EE1ff",
+  // Linea
+  // New CCTP V2 chains
+  130: "0x078D782b760474a361dDA0AF3839290b0EF57AD6",
+  // Unichain
+  146: "0x29219dd400f2Bf60E5a23d13Be72B486D4038894",
+  // Sonic
+  480: "0x79A02482A880bCE3F13e09Da970dC34db4CD24d1",
+  // World Chain
+  10200: "0x754704Bc059F8C67012fEd69BC8A327a5aafb603",
+  // Monad
+  1329: "0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392",
+  // Sei
+  50: "0xfA2958CB79b0491CC627c1557F441eF849Ca8eb1",
+  // XDC
+  999: "0xb88339CB7199b77E23DB6E890353E22632Ba630f",
+  // HyperEVM
+  57073: "0x2D270e6886d130D724215A266106e6832161EAEd",
+  // Ink
+  98866: "0x222365EF19F7947e5484218551B56bb3965Aa7aF",
+  // Plume
+  81224: "0xd996633a415985DBd7D6D12f4A4343E31f5037cf"
+  // Codex
+};
+var TOKEN_MESSENGER_V1_ADDRESSES = {
+  1: "0xBd3fa81B58Ba92a82136038B25aDec7066af3155",
+  // Ethereum
+  42161: "0x19330d10D9Cc8751218eaf51E8885D058642E08A",
+  // Arbitrum
+  43114: "0x6B25532e1060CE10cc3B0A99e5683b91BFDe6982",
+  // Avalanche
+  8453: "0x1682Ae6375C4E4A97e4B583BC394c861A46D8962",
+  // Base
+  10: "0x2B4069517957735bE00ceE0fadAE88a26365528f",
+  // Optimism
+  137: "0x9daF8c91AEFAE50b9c0E69629D3F6Ca40cA3B3FE"
+  // Polygon
+};
+var TOKEN_MESSENGER_V2_ADDRESS = "0x28b5a0e9C621a5BadaA536219b3a228C8168cf5d";
+var TOKEN_MESSENGER_ADDRESSES = {
+  // All CCTP V2 supported chains use the same address
+  1: TOKEN_MESSENGER_V2_ADDRESS,
+  // Ethereum
+  42161: TOKEN_MESSENGER_V2_ADDRESS,
+  // Arbitrum
+  43114: TOKEN_MESSENGER_V2_ADDRESS,
+  // Avalanche
+  8453: TOKEN_MESSENGER_V2_ADDRESS,
+  // Base
+  10: TOKEN_MESSENGER_V2_ADDRESS,
+  // Optimism
+  137: TOKEN_MESSENGER_V2_ADDRESS,
+  // Polygon
+  59144: TOKEN_MESSENGER_V2_ADDRESS,
+  // Linea
+  130: TOKEN_MESSENGER_V2_ADDRESS,
+  // Unichain
+  146: TOKEN_MESSENGER_V2_ADDRESS,
+  // Sonic
+  480: TOKEN_MESSENGER_V2_ADDRESS,
+  // World Chain
+  10200: TOKEN_MESSENGER_V2_ADDRESS,
+  // Monad
+  1329: TOKEN_MESSENGER_V2_ADDRESS,
+  // Sei
+  50: TOKEN_MESSENGER_V2_ADDRESS,
+  // XDC
+  999: TOKEN_MESSENGER_V2_ADDRESS,
+  // HyperEVM
+  57073: TOKEN_MESSENGER_V2_ADDRESS,
+  // Ink
+  98866: TOKEN_MESSENGER_V2_ADDRESS,
+  // Plume
+  81224: TOKEN_MESSENGER_V2_ADDRESS
+  // Codex
+};
+var CHAIN_ICONS = {
+  1: "https://icons.llamao.fi/icons/chains/rsz_ethereum.jpg",
+  // Ethereum
+  42161: "https://icons.llamao.fi/icons/chains/rsz_arbitrum.jpg",
+  // Arbitrum
+  43114: "https://icons.llamao.fi/icons/chains/rsz_avalanche.jpg",
+  // Avalanche
+  8453: "https://icons.llamao.fi/icons/chains/rsz_base.jpg",
+  // Base
+  10: "https://icons.llamao.fi/icons/chains/rsz_optimism.jpg",
+  // Optimism
+  137: "https://icons.llamao.fi/icons/chains/rsz_polygon.jpg",
+  // Polygon
+  59144: "https://icons.llamao.fi/icons/chains/rsz_linea.jpg",
+  // Linea
+  130: "https://icons.llamao.fi/icons/chains/rsz_unichain.jpg",
+  // Unichain
+  146: "https://icons.llamao.fi/icons/chains/rsz_sonic.jpg",
+  // Sonic
+  480: "https://icons.llamao.fi/icons/chains/rsz_world-chain.jpg",
+  // World Chain
+  10200: "https://icons.llamao.fi/icons/chains/rsz_monad.jpg",
+  // Monad
+  1329: "https://icons.llamao.fi/icons/chains/rsz_sei.jpg",
+  // Sei
+  50: "https://icons.llamao.fi/icons/chains/rsz_xdc.jpg",
+  // XDC
+  999: "https://icons.llamao.fi/icons/chains/rsz_hyperevm.jpg",
+  // HyperEVM
+  57073: "https://icons.llamao.fi/icons/chains/rsz_ink.jpg",
+  // Ink
+  98866: "https://icons.llamao.fi/icons/chains/rsz_plume.jpg",
+  // Plume
+  81224: "https://raw.githubusercontent.com/0xa3k5/web3icons/main/packages/core/src/svgs/networks/branded/codex.svg"
+  // Codex
+};
+
+// src/utils.ts
+var import_viem = require("viem");
+function formatNumber(value, decimals = 2, locale = DEFAULT_LOCALE) {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) return "0";
+  return num.toLocaleString(locale, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  });
+}
+function validateAmountInput(value) {
+  if (value === "") {
+    return { isValid: true, sanitized: "" };
+  }
+  if (/[eE]/.test(value)) {
+    return { isValid: false, sanitized: "", error: "Scientific notation not allowed" };
+  }
+  if (value.includes("-")) {
+    return { isValid: false, sanitized: "", error: "Negative values not allowed" };
+  }
+  if (value === "." || value === "0.") {
+    return { isValid: true, sanitized: value };
+  }
+  if (!/^[0-9]*\.?[0-9]*$/.test(value)) {
+    return { isValid: false, sanitized: "", error: "Invalid characters" };
+  }
+  const parts = value.split(".");
+  if (parts.length === 2 && parts[1].length > USDC_DECIMALS) {
+    return {
+      isValid: false,
+      sanitized: `${parts[0]}.${parts[1].slice(0, USDC_DECIMALS)}`,
+      error: `Maximum ${USDC_DECIMALS} decimal places`
+    };
+  }
+  const num = parseFloat(value);
+  if (!isNaN(num) && num > parseFloat(MAX_USDC_AMOUNT)) {
+    return { isValid: false, sanitized: value, error: "Amount exceeds maximum" };
+  }
+  let sanitized = value;
+  if (sanitized.length > 1 && sanitized.startsWith("0") && sanitized[1] !== ".") {
+    sanitized = sanitized.replace(/^0+/, "") || "0";
+  }
+  return { isValid: true, sanitized };
+}
+function parseUSDCAmount(amount) {
+  try {
+    if (!amount || parseFloat(amount) < 0) return null;
+    return (0, import_viem.parseUnits)(amount, USDC_DECIMALS);
+  } catch {
+    return null;
+  }
+}
+function isValidPositiveAmount(amount) {
+  if (!amount) return false;
+  const num = parseFloat(amount);
+  return !isNaN(num) && num > 0;
+}
+function getErrorMessage(error) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "string") {
+    return error;
+  }
+  if (error !== null && typeof error === "object" && "message" in error && typeof error.message === "string") {
+    return error.message;
+  }
+  return "An unknown error occurred";
+}
+function validateChainConfig(config) {
+  const errors = [];
+  if (!config.chain) {
+    errors.push("Chain object is required");
+    return { isValid: false, errors };
+  }
+  if (typeof config.chain.id !== "number" || config.chain.id <= 0) {
+    errors.push(`Invalid chain ID: ${config.chain.id}`);
+  }
+  if (!config.chain.name || typeof config.chain.name !== "string") {
+    errors.push("Chain name is required");
+  }
+  if (!config.usdcAddress) {
+    errors.push(`USDC address is required for chain ${config.chain.name || config.chain.id}`);
+  } else if (!(0, import_viem.isAddress)(config.usdcAddress)) {
+    errors.push(`Invalid USDC address for chain ${config.chain.name}: ${config.usdcAddress}`);
+  }
+  if (config.tokenMessengerAddress && !(0, import_viem.isAddress)(config.tokenMessengerAddress)) {
+    errors.push(
+      `Invalid TokenMessenger address for chain ${config.chain.name}: ${config.tokenMessengerAddress}`
+    );
+  }
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+}
+function validateChainConfigs(configs) {
+  const allErrors = [];
+  if (!Array.isArray(configs)) {
+    return { isValid: false, errors: ["Chain configs must be an array"] };
+  }
+  if (configs.length === 0) {
+    return { isValid: false, errors: ["At least one chain configuration is required"] };
+  }
+  if (configs.length < 2) {
+    return { isValid: false, errors: ["At least two chains are required for bridging"] };
+  }
+  const chainIds = /* @__PURE__ */ new Set();
+  for (const config of configs) {
+    if (config.chain?.id) {
+      if (chainIds.has(config.chain.id)) {
+        allErrors.push(`Duplicate chain ID: ${config.chain.id}`);
+      }
+      chainIds.add(config.chain.id);
+    }
+    const result = validateChainConfig(config);
+    if (!result.isValid) {
+      allErrors.push(...result.errors);
+    }
+  }
+  return {
+    isValid: allErrors.length === 0,
+    errors: allErrors
+  };
+}
+
+// src/useBridge.ts
+var import_react = require("react");
+var import_wagmi = require("wagmi");
+var import_bridge_kit = require("@circle-fin/bridge-kit");
+var import_adapter_viem_v2 = require("@circle-fin/adapter-viem-v2");
+var MAX_EVENTS = 100;
+var CHAIN_ID_TO_BRIDGE_CHAIN = {
+  1: import_bridge_kit.BridgeChain.Ethereum,
+  42161: import_bridge_kit.BridgeChain.Arbitrum,
+  43114: import_bridge_kit.BridgeChain.Avalanche,
+  8453: import_bridge_kit.BridgeChain.Base,
+  10: import_bridge_kit.BridgeChain.Optimism,
+  137: import_bridge_kit.BridgeChain.Polygon,
+  59144: import_bridge_kit.BridgeChain.Linea,
+  130: import_bridge_kit.BridgeChain.Unichain,
+  146: import_bridge_kit.BridgeChain.Sonic,
+  480: import_bridge_kit.BridgeChain.World_Chain,
+  // Note: Monad (10200) not yet supported in Circle Bridge Kit
+  1329: import_bridge_kit.BridgeChain.Sei,
+  50: import_bridge_kit.BridgeChain.XDC,
+  999: import_bridge_kit.BridgeChain.HyperEVM,
+  57073: import_bridge_kit.BridgeChain.Ink,
+  98866: import_bridge_kit.BridgeChain.Plume,
+  81224: import_bridge_kit.BridgeChain.Codex
+};
+function isBridgeEventWithTxHash(event) {
+  return typeof event === "object" && event !== null && ("values" in event ? typeof event.values === "object" : true);
+}
+function extractTxHash(event) {
+  if (isBridgeEventWithTxHash(event) && event.values?.txHash) {
+    const hash = event.values.txHash;
+    if (typeof hash === "string" && hash.startsWith("0x")) {
+      return hash;
+    }
+  }
+  return void 0;
+}
+function isEIP1193Provider(provider) {
+  return typeof provider === "object" && provider !== null && "request" in provider && typeof provider.request === "function";
+}
+function getBridgeChain(chainId) {
+  return CHAIN_ID_TO_BRIDGE_CHAIN[chainId];
+}
+function getChainName(chainId) {
+  const bridgeChain = CHAIN_ID_TO_BRIDGE_CHAIN[chainId];
+  return bridgeChain || `Chain_${chainId}`;
+}
+function useBridge() {
+  const { connector, isConnected } = (0, import_wagmi.useAccount)();
+  const [state, setState] = (0, import_react.useState)({
+    status: "idle",
+    events: []
+  });
+  const isMountedRef = (0, import_react.useRef)(true);
+  const currentBridgeRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (currentBridgeRef.current) {
+        currentBridgeRef.current.aborted = true;
+      }
+    };
+  }, []);
+  const addEvent = (0, import_react.useCallback)((type, data) => {
+    if (!isMountedRef.current) return;
+    setState((prev) => {
+      const newEvents = [...prev.events, { type, timestamp: Date.now(), data }];
+      if (newEvents.length > MAX_EVENTS) {
+        newEvents.splice(0, newEvents.length - MAX_EVENTS);
+      }
+      return { ...prev, events: newEvents };
+    });
+  }, []);
+  const reset = (0, import_react.useCallback)(() => {
+    if (currentBridgeRef.current) {
+      currentBridgeRef.current.aborted = true;
+    }
+    currentBridgeRef.current = null;
+    setState({ status: "idle", events: [] });
+  }, []);
+  const bridge = (0, import_react.useCallback)(
+    async (params) => {
+      const { sourceChainConfig, destChainConfig, amount, recipientAddress } = params;
+      if (currentBridgeRef.current) {
+        currentBridgeRef.current.aborted = true;
+      }
+      const operation = { aborted: false, kit: null };
+      currentBridgeRef.current = operation;
+      if (!isConnected || !connector) {
+        setState({
+          status: "error",
+          error: new Error("Wallet not connected"),
+          events: []
+        });
+        return;
+      }
+      setState({ status: "loading", events: [] });
+      addEvent("start", { amount, sourceChain: sourceChainConfig.chain.id, destChain: destChainConfig.chain.id });
+      let cleanupListeners = null;
+      try {
+        const provider = await connector.getProvider();
+        if (!provider) {
+          throw new Error("Could not get wallet provider from connector");
+        }
+        if (!isEIP1193Provider(provider)) {
+          throw new Error("Wallet provider is not EIP-1193 compatible");
+        }
+        const adapter = await (0, import_adapter_viem_v2.createViemAdapterFromProvider)({
+          provider
+        });
+        if (operation.aborted) {
+          return;
+        }
+        const kit = new import_bridge_kit.BridgeKit();
+        operation.kit = kit;
+        const handleApprove = (event) => {
+          if (operation.aborted || !isMountedRef.current) return;
+          addEvent("approve", event);
+          setState((prev) => ({
+            ...prev,
+            status: "approving",
+            txHash: extractTxHash(event)
+          }));
+        };
+        const handleBurn = (event) => {
+          if (operation.aborted || !isMountedRef.current) return;
+          addEvent("burn", event);
+          setState((prev) => ({
+            ...prev,
+            status: "burning",
+            txHash: extractTxHash(event)
+          }));
+        };
+        const handleFetchAttestation = (event) => {
+          if (operation.aborted || !isMountedRef.current) return;
+          addEvent("fetchAttestation", event);
+          setState((prev) => ({
+            ...prev,
+            status: "fetching-attestation"
+          }));
+        };
+        const handleMint = (event) => {
+          if (operation.aborted || !isMountedRef.current) return;
+          addEvent("mint", event);
+          setState((prev) => ({
+            ...prev,
+            status: "minting",
+            txHash: extractTxHash(event)
+          }));
+        };
+        cleanupListeners = () => {
+          try {
+            kit.off("approve", handleApprove);
+            kit.off("burn", handleBurn);
+            kit.off("fetchAttestation", handleFetchAttestation);
+            kit.off("mint", handleMint);
+          } catch {
+          }
+        };
+        kit.on("approve", handleApprove);
+        kit.on("burn", handleBurn);
+        kit.on("fetchAttestation", handleFetchAttestation);
+        kit.on("mint", handleMint);
+        const sourceBridgeChain = getBridgeChain(sourceChainConfig.chain.id);
+        const destBridgeChain = getBridgeChain(destChainConfig.chain.id);
+        if (!sourceBridgeChain) {
+          throw new Error(`Unsupported source chain: ${sourceChainConfig.chain.name} (${sourceChainConfig.chain.id})`);
+        }
+        if (!destBridgeChain) {
+          throw new Error(`Unsupported destination chain: ${destChainConfig.chain.name} (${destChainConfig.chain.id})`);
+        }
+        const result = await kit.bridge({
+          from: { adapter, chain: sourceBridgeChain },
+          to: recipientAddress ? { adapter, chain: destBridgeChain, recipientAddress } : { adapter, chain: destBridgeChain },
+          amount
+        });
+        cleanupListeners();
+        if (operation.aborted || !isMountedRef.current) {
+          return;
+        }
+        addEvent("complete", result);
+        setState((prev) => ({
+          ...prev,
+          status: "success",
+          txHash: extractTxHash(result)
+        }));
+      } catch (error) {
+        if (cleanupListeners) {
+          cleanupListeners();
+        }
+        if (operation.aborted || !isMountedRef.current) {
+          return;
+        }
+        addEvent("error", error);
+        setState((prev) => ({
+          ...prev,
+          status: "error",
+          error: error instanceof Error ? error : new Error("Bridge transfer failed")
+        }));
+        throw error;
+      }
+    },
+    [isConnected, connector, addEvent]
+  );
+  return { bridge, state, reset };
+}
+function useBridgeQuote(sourceChainId, destChainId, amount) {
+  const [quote, setQuote] = (0, import_react.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!sourceChainId || !destChainId || !amount || parseFloat(amount) <= 0) {
+      setQuote(null);
+      setError(null);
+      return;
+    }
+    const fetchQuote = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const sourceBridgeChain = getBridgeChain(sourceChainId);
+        const destBridgeChain = getBridgeChain(destChainId);
+        if (!sourceBridgeChain || !destBridgeChain) {
+          setQuote({
+            estimatedGasFee: "Estimated by wallet",
+            bridgeFee: "0.00",
+            totalFee: "Gas only",
+            estimatedTime: "~15-20 minutes"
+          });
+          return;
+        }
+        setQuote({
+          estimatedGasFee: "Estimated by wallet",
+          bridgeFee: "0-14 bps (FAST) / 0 (SLOW)",
+          totalFee: "Gas + protocol fee",
+          estimatedTime: "~15-20 minutes"
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to get quote"));
+        setQuote(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    let isActive = true;
+    const debounceTimer = setTimeout(() => {
+      if (isActive) {
+        fetchQuote();
+      }
+    }, 500);
+    return () => {
+      isActive = false;
+      clearTimeout(debounceTimer);
+    };
+  }, [sourceChainId, destChainId, amount]);
+  return { quote, isLoading, error };
+}
+
+// src/hooks.ts
+function useUSDCBalance(chainConfig) {
+  const { address } = (0, import_wagmi2.useAccount)();
+  const {
+    data: balance,
+    isLoading,
+    refetch
+  } = (0, import_wagmi2.useReadContract)({
+    address: chainConfig?.usdcAddress,
+    abi: import_viem2.erc20Abi,
+    functionName: "balanceOf",
+    args: address ? [address] : void 0,
+    query: {
+      enabled: !!address && !!chainConfig?.usdcAddress
+    }
+  });
+  return {
+    balance: balance ?? 0n,
+    balanceFormatted: balance ? (0, import_viem2.formatUnits)(balance, USDC_DECIMALS) : "0",
+    isLoading,
+    refetch
+  };
+}
+function useAllUSDCBalances(chainConfigs) {
+  const { address } = (0, import_wagmi2.useAccount)();
+  const contracts = (0, import_react2.useMemo)(() => {
+    if (!address) return [];
+    return chainConfigs.filter((config) => config.usdcAddress).map((config) => ({
+      address: config.usdcAddress,
+      abi: import_viem2.erc20Abi,
+      functionName: "balanceOf",
+      args: [address],
+      chainId: config.chain.id
+    }));
+  }, [address, chainConfigs]);
+  const {
+    data: results,
+    isLoading,
+    refetch
+  } = (0, import_wagmi2.useReadContracts)({
+    contracts,
+    query: {
+      enabled: !!address && contracts.length > 0
+    }
+  });
+  const balances = (0, import_react2.useMemo)(() => {
+    const balanceMap = {};
+    if (!results) return balanceMap;
+    chainConfigs.forEach((config, index) => {
+      const result = results[index];
+      if (result?.status === "success" && typeof result.result === "bigint") {
+        balanceMap[config.chain.id] = {
+          balance: result.result,
+          formatted: (0, import_viem2.formatUnits)(result.result, USDC_DECIMALS)
+        };
+      } else {
+        balanceMap[config.chain.id] = {
+          balance: 0n,
+          formatted: "0"
+        };
+      }
+    });
+    return balanceMap;
+  }, [results, chainConfigs]);
+  return {
+    balances,
+    isLoading,
+    refetch
+  };
+}
+function useUSDCAllowance(chainConfig, spenderAddress) {
+  const { address } = (0, import_wagmi2.useAccount)();
+  const effectiveSpender = spenderAddress || chainConfig?.tokenMessengerAddress;
+  const {
+    data: allowance,
+    isLoading,
+    refetch
+  } = (0, import_wagmi2.useReadContract)({
+    address: chainConfig?.usdcAddress,
+    abi: import_viem2.erc20Abi,
+    functionName: "allowance",
+    args: address && effectiveSpender ? [address, effectiveSpender] : void 0,
+    query: {
+      enabled: !!address && !!chainConfig?.usdcAddress && !!effectiveSpender
+    }
+  });
+  const { writeContractAsync, isPending: isApproving } = (0, import_wagmi2.useWriteContract)();
+  const [approvalTxHash, setApprovalTxHash] = (0, import_react2.useState)();
+  const [approvalError, setApprovalError] = (0, import_react2.useState)(null);
+  const { isLoading: isConfirming, isSuccess: isApprovalConfirmed } = (0, import_wagmi2.useWaitForTransactionReceipt)({
+    hash: approvalTxHash
+  });
+  const approve = (0, import_react2.useCallback)(
+    async (amount) => {
+      if (!chainConfig?.usdcAddress || !effectiveSpender) {
+        throw new Error("Missing chain config or spender address");
+      }
+      setApprovalError(null);
+      try {
+        const amountBigInt = (0, import_viem2.parseUnits)(amount, USDC_DECIMALS);
+        const hash = await writeContractAsync({
+          address: chainConfig.usdcAddress,
+          abi: import_viem2.erc20Abi,
+          functionName: "approve",
+          args: [effectiveSpender, amountBigInt]
+        });
+        setApprovalTxHash(hash);
+        return hash;
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error("Approval failed");
+        setApprovalError(err);
+        throw err;
+      }
+    },
+    [chainConfig?.usdcAddress, effectiveSpender, writeContractAsync]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (isApprovalConfirmed) {
+      refetch();
+    }
+  }, [isApprovalConfirmed, refetch]);
+  const needsApproval = (0, import_react2.useCallback)(
+    (amount) => {
+      if (!amount || !allowance) return false;
+      const parsedAmount = parseFloat(amount);
+      if (isNaN(parsedAmount) || parsedAmount <= 0) return false;
+      try {
+        const amountBigInt = (0, import_viem2.parseUnits)(amount, USDC_DECIMALS);
+        return allowance < amountBigInt;
+      } catch {
+        return false;
+      }
+    },
+    [allowance]
+  );
+  return {
+    allowance: allowance ?? 0n,
+    allowanceFormatted: allowance ? (0, import_viem2.formatUnits)(allowance, USDC_DECIMALS) : "0",
+    isLoading,
+    isApproving: isApproving || isConfirming,
+    approve,
+    needsApproval,
+    refetch,
+    approvalError
+  };
+}
+function useBridgeEstimate(sourceChainId, destChainId, amount) {
+  (0, import_react2.useEffect)(() => {
+    console.warn(
+      "[DEPRECATED] useBridgeEstimate is deprecated and will be removed in a future version. Use useBridgeQuote from './useBridge' instead."
+    );
+  }, []);
+  const [estimate, setEstimate] = (0, import_react2.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const fetchEstimate = (0, import_react2.useCallback)(async () => {
+    if (!amount || parseFloat(amount) <= 0 || !sourceChainId || !destChainId) {
+      setEstimate(null);
+      setError(null);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const sourceBridgeChain = getBridgeChain(sourceChainId);
+      const destBridgeChain = getBridgeChain(destChainId);
+      if (!sourceBridgeChain || !destBridgeChain) {
+        setEstimate({
+          gasFee: "Estimated by wallet",
+          bridgeFee: "0.00",
+          totalFee: "Gas only",
+          estimatedTime: "~15-20 minutes"
+        });
+        setIsLoading(false);
+        return;
+      }
+      setEstimate({
+        gasFee: "Estimated by wallet",
+        bridgeFee: "0-14 bps (FAST) / 0 (SLOW)",
+        totalFee: "Gas + protocol fee",
+        estimatedTime: "~15-20 minutes"
+      });
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to estimate bridge cost");
+      setError(error2);
+      setEstimate(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sourceChainId, destChainId, amount]);
+  (0, import_react2.useEffect)(() => {
+    let isActive = true;
+    const debounceTimer = setTimeout(() => {
+      if (isActive) {
+        fetchEstimate();
+      }
+    }, 500);
+    return () => {
+      isActive = false;
+      clearTimeout(debounceTimer);
+    };
+  }, [fetchEstimate]);
+  return { estimate, isLoading, error };
+}
+function useFormatNumber() {
+  (0, import_react2.useEffect)(() => {
+    console.warn(
+      "[DEPRECATED] useFormatNumber is deprecated and will be removed in a future version. Use the formatNumber utility function from './utils' directly instead."
+    );
+  }, []);
+  return (0, import_react2.useCallback)(
+    (value, decimals = 2) => {
+      return formatNumber(value, decimals);
+    },
+    []
+  );
+}
+
+// src/chains.ts
+var import_viem3 = require("viem");
+var import_chains = require("viem/chains");
+var unichain = (0, import_viem3.defineChain)({
+  id: 130,
+  name: "Unichain",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://mainnet.unichain.org"] }
+  },
+  blockExplorers: {
+    default: { name: "Uniscan", url: "https://uniscan.xyz" }
+  }
+});
+var hyperEvm = (0, import_viem3.defineChain)({
+  id: 999,
+  name: "HyperEVM",
+  nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.hyperliquid.xyz/evm"] }
+  },
+  blockExplorers: {
+    default: { name: "Hyperscan", url: "https://hyperscan.xyz" }
+  }
+});
+var plume = (0, import_viem3.defineChain)({
+  id: 98866,
+  name: "Plume",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.plume.org"] }
+  },
+  blockExplorers: {
+    default: { name: "Plume Explorer", url: "https://explorer.plume.org" }
+  }
+});
+var monad = (0, import_viem3.defineChain)({
+  id: 10200,
+  name: "Monad",
+  nativeCurrency: { name: "MON", symbol: "MON", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.monad.xyz"] }
+  },
+  blockExplorers: {
+    default: { name: "Monad Explorer", url: "https://explorer.monad.xyz" }
+  }
+});
+var codex = (0, import_viem3.defineChain)({
+  id: 81224,
+  name: "Codex",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.codex.storage"] }
+  },
+  blockExplorers: {
+    default: { name: "Codex Explorer", url: "https://explorer.codex.storage" }
+  }
+});
+function createChainConfig(chain, options) {
+  return {
+    chain,
+    usdcAddress: options?.usdcAddress || USDC_ADDRESSES[chain.id],
+    tokenMessengerAddress: options?.tokenMessengerAddress || TOKEN_MESSENGER_ADDRESSES[chain.id],
+    iconUrl: options?.iconUrl || CHAIN_ICONS[chain.id]
+  };
+}
+var DEFAULT_CHAIN_CONFIGS = [
+  createChainConfig(import_chains.mainnet),
+  createChainConfig(import_chains.arbitrum),
+  createChainConfig(import_chains.base),
+  createChainConfig(import_chains.optimism),
+  createChainConfig(import_chains.polygon),
+  createChainConfig(import_chains.avalanche),
+  createChainConfig(import_chains.linea),
+  createChainConfig(import_chains.sonic),
+  createChainConfig(import_chains.worldchain),
+  createChainConfig(import_chains.sei),
+  createChainConfig(import_chains.xdc),
+  createChainConfig(import_chains.ink),
+  createChainConfig(unichain),
+  createChainConfig(hyperEvm),
+  createChainConfig(plume),
+  createChainConfig(codex)
+];
+var TESTNET_USDC_ADDRESSES = {
+  11155111: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+  // Sepolia
+  421614: "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d",
+  // Arbitrum Sepolia
+  43113: "0x5425890298aed601595a70AB815c96711a31Bc65",
+  // Avalanche Fuji
+  84532: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
+  // Base Sepolia
+  11155420: "0x5fd84259d66Cd46123540766Be93DFE6D43130D7",
+  // Optimism Sepolia
+  80002: "0x41E94Eb019C0762f9Bfcf9Fb1E58725BfB0e7582"
+  // Polygon Amoy
+};
+var TESTNET_TOKEN_MESSENGER_V2_ADDRESS = "0x9f3B8679c73C2Fef8b59B4f3444d4e156fb70AA5";
+function createTestnetChainConfig(chain, options) {
+  return {
+    chain,
+    usdcAddress: options?.usdcAddress || TESTNET_USDC_ADDRESSES[chain.id],
+    tokenMessengerAddress: options?.tokenMessengerAddress || TESTNET_TOKEN_MESSENGER_V2_ADDRESS,
+    iconUrl: options?.iconUrl || CHAIN_ICONS[chain.id]
+  };
+}
+var TESTNET_CHAIN_CONFIGS = [
+  createTestnetChainConfig(import_chains.sepolia),
+  createTestnetChainConfig(import_chains.arbitrumSepolia),
+  createTestnetChainConfig(import_chains.avalancheFuji),
+  createTestnetChainConfig(import_chains.baseSepolia),
+  createTestnetChainConfig(import_chains.optimismSepolia),
+  createTestnetChainConfig(import_chains.polygonAmoy)
+];
+
+// src/theme.ts
+var THEME_COLORS = {
+  /** Primary accent - Indigo */
+  primary: "#6366f1",
+  /** Secondary accent - Purple */
+  secondary: "#a855f7",
+  /** Success state - Green */
+  success: "#22c55e",
+  /** Error state - Red */
+  error: "#ef4444",
+  /** Text color - White */
+  text: "#ffffff",
+  /** Muted text - Semi-transparent white */
+  mutedText: "rgba(255, 255, 255, 0.54)",
+  /** Border color - Semi-transparent white */
+  border: "rgba(255, 255, 255, 0.06)",
+  /** Background - Dark with transparency */
+  background: "rgba(15, 15, 25, 0.8)",
+  /** Card background - Darker with transparency */
+  cardBackground: "rgba(15, 15, 25, 0.6)",
+  /** Dropdown background - Near opaque dark */
+  dropdownBackground: "rgba(20, 20, 35, 0.98)",
+  /** Input background - Transparent black */
+  inputBackground: "rgba(0, 0, 0, 0.3)",
+  /** Hover state - Semi-transparent white */
+  hover: "rgba(255, 255, 255, 0.05)"
+};
+var THEME_SIZING = {
+  /** Default border radius in pixels */
+  borderRadius: 12,
+  /** Widget max width */
+  maxWidth: "480px",
+  /** Standard padding */
+  padding: "16px",
+  /** Gap between elements */
+  gap: "12px",
+  /** Small gap */
+  smallGap: "8px",
+  /** Dropdown max height */
+  dropdownMaxHeight: "300px"
+};
+var THEME_FONTS = {
+  /** Primary font family */
+  family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  /** Font sizes */
+  sizes: {
+    xs: "10px",
+    sm: "12px",
+    base: "14px",
+    lg: "18px"
+  },
+  /** Font weights */
+  weights: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  }
+};
+var defaultTheme = {
+  primaryColor: THEME_COLORS.primary,
+  secondaryColor: THEME_COLORS.secondary,
+  backgroundColor: THEME_COLORS.background,
+  cardBackgroundColor: THEME_COLORS.cardBackground,
+  textColor: THEME_COLORS.text,
+  mutedTextColor: THEME_COLORS.mutedText,
+  borderColor: THEME_COLORS.border,
+  successColor: THEME_COLORS.success,
+  errorColor: THEME_COLORS.error,
+  hoverColor: THEME_COLORS.hover,
+  borderRadius: THEME_SIZING.borderRadius,
+  fontFamily: THEME_FONTS.family
+};
+function mergeTheme(theme) {
+  return { ...defaultTheme, ...theme };
+}
+var themePresets = {
+  /** Default dark theme */
+  dark: defaultTheme,
+  /** Light theme variant */
+  light: {
+    ...defaultTheme,
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
+    cardBackgroundColor: "rgba(245, 245, 245, 0.9)",
+    textColor: "#1a1a2e",
+    mutedTextColor: "rgba(0, 0, 0, 0.54)",
+    borderColor: "rgba(0, 0, 0, 0.1)",
+    hoverColor: "rgba(0, 0, 0, 0.05)"
+  },
+  /** Blue accent theme */
+  blue: {
+    ...defaultTheme,
+    primaryColor: "#3b82f6",
+    secondaryColor: "#06b6d4"
+  },
+  /** Green accent theme */
+  green: {
+    ...defaultTheme,
+    primaryColor: "#10b981",
+    secondaryColor: "#34d399"
+  }
+};
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChevronDownIcon({
+  size = 16,
+  color = "currentColor",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      className,
+      style,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M19 9l-7 7-7-7"
+        }
+      )
+    }
+  );
+}
+function SwapIcon({
+  size = 20,
+  color = "currentColor",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      className,
+      style,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+        }
+      )
+    }
+  );
+}
+function SpinnerIcon({
+  size = 20,
+  color = "currentColor",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      className,
+      style: {
+        animation: "cc-spin 1s linear infinite",
+        ...style
+      },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes cc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            strokeWidth: 2,
+            strokeDasharray: "32",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function CheckIcon({
+  size = 20,
+  color = "currentColor",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      className,
+      style,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M5 13l4 4L19 7"
+        }
+      )
+    }
+  );
+}
+function ErrorIcon({
+  size = 20,
+  color = "currentColor",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      className,
+      style,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M6 18L18 6M6 6l12 12"
+        }
+      )
+    }
+  );
+}
+function ExternalLinkIcon({
+  size = 16,
+  color = "currentColor",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      className,
+      style,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+        }
+      )
+    }
+  );
+}
+function WalletIcon({
+  size = 20,
+  color = "currentColor",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      className,
+      style,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M3 10h18M3 6h18a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2zm14 6h.01"
+        }
+      )
+    }
+  );
+}
+
+// src/BridgeWidget.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ChainIcon({
+  chainConfig,
+  theme,
+  size = 24
+}) {
+  const [hasError, setHasError] = (0, import_react3.useState)(false);
+  if (!chainConfig.iconUrl || hasError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          width: `${size}px`,
+          height: `${size}px`,
+          borderRadius: "50%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: `${size * 0.5}px`,
+          fontWeight: "bold",
+          color: theme.textColor,
+          background: `linear-gradient(135deg, ${theme.primaryColor}, ${theme.secondaryColor})`
+        },
+        "aria-hidden": "true",
+        children: chainConfig.chain.name.charAt(0)
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "img",
+    {
+      src: chainConfig.iconUrl,
+      alt: "",
+      "aria-hidden": "true",
+      style: { width: `${size}px`, height: `${size}px`, borderRadius: "50%" },
+      onError: () => setHasError(true)
+    }
+  );
+}
+function BalanceSpinner({ size = 12 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      style: {
+        animation: "cc-balance-spin 1s linear infinite",
+        opacity: 0.6
+      },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `@keyframes cc-balance-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function ChainSelector({
+  label,
+  chains,
+  selectedChain,
+  onSelect,
+  excludeChainId,
+  theme,
+  id,
+  balances,
+  isLoadingBalances,
+  disabled
+}) {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, import_react3.useState)(-1);
+  const [typeAhead, setTypeAhead] = (0, import_react3.useState)("");
+  const typeAheadTimeoutRef = (0, import_react3.useRef)(null);
+  const buttonRef = (0, import_react3.useRef)(null);
+  const listRef = (0, import_react3.useRef)(null);
+  const availableChains = chains.filter(
+    (c) => c.chain.id !== excludeChainId
+  );
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (typeAheadTimeoutRef.current) {
+        clearTimeout(typeAheadTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleButtonKeyDown = (0, import_react3.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        buttonRef.current?.focus();
+      } else if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        if (!isOpen) {
+          e.preventDefault();
+          setIsOpen(true);
+          setFocusedIndex(0);
+        }
+      }
+    },
+    [isOpen]
+  );
+  const handleListKeyDown = (0, import_react3.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        setTypeAhead("");
+        buttonRef.current?.focus();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev < availableChains.length - 1 ? prev + 1 : 0
+        );
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev > 0 ? prev - 1 : availableChains.length - 1
+        );
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < availableChains.length) {
+          onSelect(availableChains[focusedIndex]);
+          setIsOpen(false);
+          setTypeAhead("");
+          buttonRef.current?.focus();
+        }
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setFocusedIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setFocusedIndex(availableChains.length - 1);
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault();
+        const newTypeAhead = typeAhead + e.key.toLowerCase();
+        setTypeAhead(newTypeAhead);
+        if (typeAheadTimeoutRef.current) {
+          clearTimeout(typeAheadTimeoutRef.current);
+        }
+        typeAheadTimeoutRef.current = setTimeout(() => {
+          setTypeAhead("");
+        }, 1e3);
+        const matchIndex = availableChains.findIndex(
+          (chain) => chain.chain.name.toLowerCase().startsWith(newTypeAhead)
+        );
+        if (matchIndex !== -1) {
+          setFocusedIndex(matchIndex);
+        }
+      }
+    },
+    [availableChains, focusedIndex, onSelect, typeAhead]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (isOpen && listRef.current) {
+      listRef.current.focus();
+    }
+  }, [isOpen]);
+  (0, import_react3.useEffect)(() => {
+    if (!isOpen) return;
+    const handleGlobalKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        setTypeAhead("");
+        buttonRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleGlobalKeyDown);
+    return () => document.removeEventListener("keydown", handleGlobalKeyDown);
+  }, [isOpen]);
+  (0, import_react3.useEffect)(() => {
+    if (!isOpen) {
+      setTypeAhead("");
+      if (typeAheadTimeoutRef.current) {
+        clearTimeout(typeAheadTimeoutRef.current);
+        typeAheadTimeoutRef.current = null;
+      }
+    }
+  }, [isOpen]);
+  const buttonId = `${id}-button`;
+  const listboxId = `${id}-listbox`;
+  const selectedBalance = balances?.[selectedChain.chain.id];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", flex: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "label",
+      {
+        id: `${id}-label`,
+        htmlFor: buttonId,
+        style: {
+          display: "block",
+          fontSize: "10px",
+          color: theme.mutedTextColor,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontWeight: 500,
+          marginBottom: "4px"
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        ref: buttonRef,
+        id: buttonId,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        onKeyDown: disabled ? void 0 : handleButtonKeyDown,
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-labelledby": `${id}-label`,
+        "aria-controls": isOpen ? listboxId : void 0,
+        "aria-disabled": disabled,
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 12px",
+          borderRadius: `${theme.borderRadius}px`,
+          background: theme.cardBackgroundColor,
+          border: `1px solid ${theme.borderColor}`,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
+          transition: "all 0.2s"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChainIcon, { chainConfig: selectedChain, theme }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    color: theme.textColor
+                  },
+                  children: selectedChain.chain.name
+                }
+              ),
+              isLoadingBalances ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "span",
+                {
+                  style: {
+                    fontSize: "10px",
+                    color: theme.mutedTextColor,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BalanceSpinner, { size: 10 }),
+                    " Loading..."
+                  ]
+                }
+              ) : selectedBalance ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "span",
+                {
+                  style: {
+                    fontSize: "10px",
+                    color: theme.mutedTextColor
+                  },
+                  children: [
+                    formatNumber(selectedBalance.formatted, 2),
+                    " USDC"
+                  ]
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ChevronDownIcon,
+            {
+              size: 16,
+              color: theme.mutedTextColor,
+              style: {
+                transition: "transform 0.2s",
+                transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 10
+          },
+          onClick: () => setIsOpen(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "ul",
+        {
+          ref: listRef,
+          id: listboxId,
+          role: "listbox",
+          "aria-labelledby": `${id}-label`,
+          "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${availableChains[focusedIndex]?.chain.id}` : void 0,
+          tabIndex: 0,
+          onKeyDown: handleListKeyDown,
+          style: {
+            position: "absolute",
+            zIndex: 20,
+            width: "100%",
+            marginTop: "8px",
+            borderRadius: `${theme.borderRadius}px`,
+            boxShadow: "0 10px 40px rgba(0,0,0,0.3)",
+            background: theme.cardBackgroundColor,
+            backdropFilter: "blur(10px)",
+            border: `1px solid ${theme.borderColor}`,
+            maxHeight: "300px",
+            overflowY: "auto",
+            overflowX: "hidden",
+            padding: 0,
+            margin: 0,
+            listStyle: "none",
+            outline: "none"
+          },
+          children: availableChains.map((chainConfig, index) => {
+            const chainBalance = balances?.[chainConfig.chain.id];
+            const isFocused = index === focusedIndex;
+            const isSelected = chainConfig.chain.id === selectedChain.chain.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "li",
+              {
+                id: `${id}-option-${chainConfig.chain.id}`,
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => {
+                  onSelect(chainConfig);
+                  setIsOpen(false);
+                  buttonRef.current?.focus();
+                },
+                style: {
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  padding: "10px 12px",
+                  background: isFocused ? theme.hoverColor : "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  transition: "background 0.2s"
+                },
+                onMouseEnter: () => setFocusedIndex(index),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChainIcon, { chainConfig, theme }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          color: isSelected ? theme.textColor : theme.mutedTextColor,
+                          fontWeight: isSelected ? 500 : 400
+                        },
+                        children: chainConfig.chain.name
+                      }
+                    ),
+                    isLoadingBalances ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          color: theme.mutedTextColor,
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "4px"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BalanceSpinner, { size: 10 })
+                      }
+                    ) : chainBalance ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          color: parseFloat(chainBalance.formatted) > 0 ? theme.successColor : theme.mutedTextColor
+                        },
+                        children: [
+                          formatNumber(chainBalance.formatted, 2),
+                          " USDC"
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          color: theme.mutedTextColor
+                        },
+                        children: "0.00 USDC"
+                      }
+                    )
+                  ] })
+                ]
+              },
+              chainConfig.chain.id
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+}
+function SwapButton({
+  onClick,
+  theme,
+  disabled
+}) {
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      onClick,
+      disabled,
+      "aria-label": "Swap source and destination chains",
+      style: {
+        padding: "8px",
+        borderRadius: `${theme.borderRadius}px`,
+        background: `${theme.primaryColor}15`,
+        border: `1px solid ${theme.primaryColor}40`,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "all 0.2s",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "flex-end",
+        marginBottom: "4px",
+        transform: isHovered && !disabled ? "scale(1.1)" : "scale(1)"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SwapIcon, { size: 20, color: theme.primaryColor })
+    }
+  );
+}
+function AmountInput({
+  value,
+  onChange,
+  balance,
+  onMaxClick,
+  theme,
+  id,
+  disabled
+}) {
+  const inputId = `${id}-input`;
+  const labelId = `${id}-label`;
+  const handleInputChange = (0, import_react3.useCallback)(
+    (e) => {
+      if (disabled) return;
+      const result = validateAmountInput(e.target.value);
+      if (result.isValid) {
+        onChange(result.sanitized);
+      } else if (result.sanitized) {
+        onChange(result.sanitized);
+      }
+    },
+    [onChange, disabled]
+  );
+  const handleKeyDown = (0, import_react3.useCallback)((e) => {
+    if (e.key === "e" || e.key === "E" || e.key === "+" || e.key === "-") {
+      e.preventDefault();
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          marginBottom: "4px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "label",
+            {
+              id: labelId,
+              htmlFor: inputId,
+              style: {
+                fontSize: "10px",
+                color: theme.mutedTextColor,
+                textTransform: "uppercase",
+                letterSpacing: "0.05em",
+                fontWeight: 500
+              },
+              children: "Amount"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "span",
+            {
+              style: { fontSize: "10px", color: theme.mutedTextColor },
+              "aria-live": "polite",
+              children: [
+                "Balance:",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: theme.textColor }, children: [
+                  formatNumber(balance),
+                  " USDC"
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          borderRadius: `${theme.borderRadius}px`,
+          overflow: "hidden",
+          background: theme.cardBackgroundColor,
+          border: `1px solid ${theme.borderColor}`,
+          opacity: disabled ? 0.6 : 1
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: inputId,
+              type: "text",
+              inputMode: "decimal",
+              pattern: "[0-9]*\\.?[0-9]*",
+              value,
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              placeholder: "0.00",
+              disabled,
+              "aria-labelledby": labelId,
+              "aria-describedby": `${id}-currency`,
+              "aria-disabled": disabled,
+              style: {
+                flex: 1,
+                background: "transparent",
+                border: "none",
+                padding: "12px",
+                fontSize: "18px",
+                color: theme.textColor,
+                fontWeight: 500,
+                outline: "none",
+                minWidth: 0,
+                fontFamily: theme.fontFamily,
+                cursor: disabled ? "not-allowed" : "text"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                paddingRight: "12px"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: onMaxClick,
+                    disabled,
+                    "aria-label": "Set maximum amount",
+                    style: {
+                      padding: "4px 8px",
+                      fontSize: "10px",
+                      fontWeight: 600,
+                      borderRadius: "4px",
+                      background: `${theme.primaryColor}20`,
+                      color: theme.primaryColor,
+                      border: "none",
+                      cursor: disabled ? "not-allowed" : "pointer",
+                      opacity: disabled ? 0.5 : 1
+                    },
+                    children: "MAX"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    id: `${id}-currency`,
+                    style: { display: "flex", alignItems: "center", gap: "4px" },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: "20px",
+                            height: "20px",
+                            borderRadius: "50%",
+                            background: USDC_BRAND_COLOR,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center"
+                          },
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "10px",
+                                fontWeight: "bold",
+                                color: "#fff"
+                              },
+                              children: "$"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            color: theme.textColor
+                          },
+                          children: "USDC"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function BridgeWidget({
+  chains = DEFAULT_CHAIN_CONFIGS,
+  defaultSourceChainId,
+  defaultDestinationChainId,
+  onBridgeStart,
+  onBridgeSuccess,
+  onBridgeError,
+  onConnectWallet,
+  theme: themeOverrides,
+  className,
+  style
+}) {
+  const theme = mergeTheme(themeOverrides);
+  const { address, isConnected } = (0, import_wagmi3.useAccount)();
+  const currentChainId = (0, import_wagmi3.useChainId)();
+  const { switchChainAsync } = (0, import_wagmi3.useSwitchChain)();
+  const { connect, connectors } = (0, import_wagmi3.useConnect)();
+  const [configError, setConfigError] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    const validation = validateChainConfigs(chains);
+    if (!validation.isValid) {
+      const errorMsg = validation.errors.join("; ");
+      console.error("[BridgeWidget] Invalid chain configuration:", errorMsg);
+      setConfigError(errorMsg);
+    } else {
+      setConfigError(null);
+    }
+  }, [chains]);
+  const baseId = (0, import_react3.useId)();
+  const sourceChainId = `${baseId}-source`;
+  const destChainId = `${baseId}-dest`;
+  const amountId = `${baseId}-amount`;
+  const getChainConfig = (0, import_react3.useCallback)(
+    (chainId) => {
+      if (!chainId) return chains[0];
+      return chains.find((c) => c.chain.id === chainId) || chains[0];
+    },
+    [chains]
+  );
+  const [sourceChainConfig, setSourceChainConfig] = (0, import_react3.useState)(
+    () => getChainConfig(defaultSourceChainId)
+  );
+  const [destChainConfig, setDestChainConfig] = (0, import_react3.useState)(
+    () => getChainConfig(defaultDestinationChainId) || chains.find((c) => c.chain.id !== sourceChainConfig.chain.id) || chains[1] || chains[0]
+  );
+  const [amount, setAmount] = (0, import_react3.useState)("");
+  const [txHash, setTxHash] = (0, import_react3.useState)();
+  const [error, setError] = (0, import_react3.useState)(null);
+  const { balances: allBalances, isLoading: isLoadingAllBalances, refetch: refetchAllBalances } = useAllUSDCBalances(chains);
+  const { balanceFormatted, refetch: refetchBalance } = useUSDCBalance(
+    sourceChainConfig
+  );
+  const { needsApproval, approve, isApproving } = useUSDCAllowance(
+    sourceChainConfig
+  );
+  const refetchBalances = (0, import_react3.useCallback)(() => {
+    refetchBalance();
+    refetchAllBalances();
+  }, [refetchBalance, refetchAllBalances]);
+  const { bridge: executeBridge, state: bridgeState, reset: resetBridge } = useBridge();
+  const { isLoading: isConfirming, isSuccess } = (0, import_wagmi3.useWaitForTransactionReceipt)({
+    hash: txHash
+  });
+  const isBridging = bridgeState.status === "loading" || bridgeState.status === "approving" || bridgeState.status === "burning" || bridgeState.status === "fetching-attestation" || bridgeState.status === "minting";
+  const isOperationPending = isBridging || isConfirming || isApproving;
+  const onBridgeSuccessRef = (0, import_react3.useRef)(onBridgeSuccess);
+  onBridgeSuccessRef.current = onBridgeSuccess;
+  const onBridgeErrorRef = (0, import_react3.useRef)(onBridgeError);
+  onBridgeErrorRef.current = onBridgeError;
+  const needsChainSwitch = isConnected && currentChainId !== sourceChainConfig.chain.id;
+  const handleSwapChains = (0, import_react3.useCallback)(() => {
+    setSourceChainConfig((prev) => {
+      setDestChainConfig(prev);
+      return destChainConfig;
+    });
+  }, [destChainConfig]);
+  const handleMaxClick = (0, import_react3.useCallback)(() => {
+    setAmount(balanceFormatted);
+  }, [balanceFormatted]);
+  const handleSwitchChain = (0, import_react3.useCallback)(async () => {
+    try {
+      await switchChainAsync({ chainId: sourceChainConfig.chain.id });
+    } catch (err) {
+      setError(getErrorMessage(err));
+    }
+  }, [switchChainAsync, sourceChainConfig.chain.id]);
+  const handleBridge = (0, import_react3.useCallback)(async () => {
+    if (!address || !amount || parseFloat(amount) <= 0) return;
+    setError(null);
+    resetBridge();
+    try {
+      onBridgeStart?.({
+        sourceChainId: sourceChainConfig.chain.id,
+        destChainId: destChainConfig.chain.id,
+        amount
+      });
+      if (needsApproval(amount)) {
+        pendingBridgeRef.current = {
+          amount,
+          sourceChainConfig,
+          destChainConfig
+        };
+        const approveTx = await approve(amount);
+        setTxHash(approveTx);
+      } else {
+        await executeBridge({
+          sourceChainConfig,
+          destChainConfig,
+          amount
+        });
+      }
+    } catch (err) {
+      const errorMessage = getErrorMessage(err);
+      setError(errorMessage);
+      onBridgeErrorRef.current?.(
+        err instanceof Error ? err : new Error(errorMessage)
+      );
+    }
+  }, [
+    address,
+    amount,
+    needsApproval,
+    approve,
+    executeBridge,
+    resetBridge,
+    onBridgeStart,
+    sourceChainConfig,
+    destChainConfig
+  ]);
+  const pendingBridgeRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (isSuccess && txHash && pendingBridgeRef.current) {
+      const { amount: pendingAmount, sourceChainConfig: pendingSource, destChainConfig: pendingDest } = pendingBridgeRef.current;
+      pendingBridgeRef.current = null;
+      setTxHash(void 0);
+      void executeBridge({
+        sourceChainConfig: pendingSource,
+        destChainConfig: pendingDest,
+        amount: pendingAmount
+      }).catch((err) => {
+        setError(getErrorMessage(err));
+      });
+    }
+  }, [isSuccess, txHash, executeBridge]);
+  (0, import_react3.useEffect)(() => {
+    if (bridgeState.status === "success") {
+      const currentAmount = amount;
+      const currentSourceChainId = sourceChainConfig.chain.id;
+      const currentDestChainId = destChainConfig.chain.id;
+      const currentTxHash = bridgeState.txHash;
+      setAmount("");
+      refetchBalances();
+      if (currentTxHash) {
+        onBridgeSuccessRef.current?.({
+          sourceChainId: currentSourceChainId,
+          destChainId: currentDestChainId,
+          amount: currentAmount,
+          txHash: currentTxHash
+        });
+      }
+    } else if (bridgeState.status === "error" && bridgeState.error) {
+      setError(bridgeState.error.message);
+    }
+  }, [
+    bridgeState.status,
+    bridgeState.txHash,
+    bridgeState.error,
+    refetchBalances,
+    amount,
+    sourceChainConfig.chain.id,
+    destChainConfig.chain.id
+  ]);
+  const isButtonDisabled = !isConnected || needsChainSwitch || !amount || parseFloat(amount) <= 0 || parseFloat(amount) > parseFloat(balanceFormatted) || isConfirming || isApproving || isBridging;
+  const isButtonActuallyDisabled = isButtonDisabled && !needsChainSwitch && isConnected;
+  const getButtonText = (0, import_react3.useCallback)(() => {
+    if (!isConnected) return "Connect Wallet";
+    if (needsChainSwitch) return `Switch to ${sourceChainConfig.chain.name}`;
+    if (bridgeState.status === "loading") return "Preparing Bridge...";
+    if (bridgeState.status === "approving") return "Approving...";
+    if (bridgeState.status === "burning") return "Burning USDC...";
+    if (bridgeState.status === "fetching-attestation") return "Fetching Attestation...";
+    if (bridgeState.status === "minting") return "Minting on Destination...";
+    if (isConfirming || isApproving) {
+      return "Approving...";
+    }
+    if (!amount || parseFloat(amount) <= 0) return "Enter Amount";
+    if (parseFloat(amount) > parseFloat(balanceFormatted)) {
+      return "Insufficient Balance";
+    }
+    if (needsApproval(amount)) return "Approve & Bridge USDC";
+    return "Bridge USDC";
+  }, [
+    isConnected,
+    needsChainSwitch,
+    sourceChainConfig.chain.name,
+    bridgeState.status,
+    isConfirming,
+    isApproving,
+    amount,
+    balanceFormatted,
+    needsApproval
+  ]);
+  const handleButtonClick = (0, import_react3.useCallback)(() => {
+    if (!isConnected) {
+      if (onConnectWallet) {
+        onConnectWallet();
+      } else if (connectors.length > 0) {
+        const injectedConnector = connectors.find(
+          (c) => c.type === "injected"
+        );
+        connect({ connector: injectedConnector || connectors[0] });
+      }
+      return;
+    }
+    if (needsChainSwitch) {
+      handleSwitchChain();
+      return;
+    }
+    handleBridge();
+  }, [
+    isConnected,
+    onConnectWallet,
+    connectors,
+    connect,
+    needsChainSwitch,
+    handleSwitchChain,
+    handleBridge
+  ]);
+  const buttonStyles = (0, import_react3.useMemo)(
+    () => ({
+      width: "100%",
+      padding: "14px",
+      borderRadius: `${theme.borderRadius}px`,
+      fontSize: "14px",
+      fontWeight: 600,
+      border: "none",
+      cursor: isButtonActuallyDisabled ? "not-allowed" : "pointer",
+      transition: "all 0.2s",
+      color: isButtonActuallyDisabled ? theme.mutedTextColor : theme.textColor,
+      background: isButtonActuallyDisabled ? "rgba(255,255,255,0.1)" : `linear-gradient(135deg, ${theme.primaryColor} 0%, ${theme.secondaryColor} 100%)`,
+      boxShadow: isButtonActuallyDisabled ? "none" : `0 4px 14px ${theme.primaryColor}60, inset 0 1px 0 rgba(255,255,255,0.2)`
+    }),
+    [
+      theme.borderRadius,
+      theme.mutedTextColor,
+      theme.textColor,
+      theme.primaryColor,
+      theme.secondaryColor,
+      isButtonActuallyDisabled
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className,
+      role: "region",
+      "aria-label": "USDC Bridge Widget",
+      style: {
+        fontFamily: theme.fontFamily,
+        maxWidth: "480px",
+        width: "100%",
+        borderRadius: `${theme.borderRadius}px`,
+        padding: "16px",
+        background: theme.backgroundColor,
+        border: `1px solid ${theme.borderColor}`,
+        boxShadow: "0 4px 24px rgba(0,0,0,0.3)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-end",
+              gap: "12px",
+              marginBottom: "16px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                ChainSelector,
+                {
+                  id: sourceChainId,
+                  label: "From",
+                  chains,
+                  selectedChain: sourceChainConfig,
+                  onSelect: setSourceChainConfig,
+                  excludeChainId: destChainConfig.chain.id,
+                  theme,
+                  balances: allBalances,
+                  isLoadingBalances: isLoadingAllBalances,
+                  disabled: isOperationPending
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SwapButton, { onClick: handleSwapChains, theme, disabled: isOperationPending }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                ChainSelector,
+                {
+                  id: destChainId,
+                  label: "To",
+                  chains,
+                  selectedChain: destChainConfig,
+                  onSelect: setDestChainConfig,
+                  excludeChainId: sourceChainConfig.chain.id,
+                  theme,
+                  balances: allBalances,
+                  isLoadingBalances: isLoadingAllBalances,
+                  disabled: isOperationPending
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          AmountInput,
+          {
+            id: amountId,
+            value: amount,
+            onChange: setAmount,
+            balance: balanceFormatted,
+            onMaxClick: handleMaxClick,
+            theme,
+            disabled: isOperationPending
+          }
+        ) }),
+        configError && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            role: "alert",
+            style: {
+              fontSize: "12px",
+              color: theme.errorColor,
+              background: `${theme.errorColor}15`,
+              padding: "8px 12px",
+              borderRadius: `${theme.borderRadius}px`,
+              marginBottom: "16px"
+            },
+            children: [
+              "Configuration Error: ",
+              configError
+            ]
+          }
+        ),
+        error && !configError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            role: "alert",
+            style: {
+              fontSize: "12px",
+              color: theme.errorColor,
+              background: `${theme.errorColor}15`,
+              padding: "8px 12px",
+              borderRadius: `${theme.borderRadius}px`,
+              marginBottom: "16px"
+            },
+            children: error
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: handleButtonClick,
+            disabled: isButtonActuallyDisabled,
+            "aria-busy": isConfirming || isApproving || isBridging,
+            style: buttonStyles,
+            children: getButtonText()
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BridgeWidget,
+  CHAIN_ICONS,
+  CheckIcon,
+  ChevronDownIcon,
+  DEFAULT_CHAIN_CONFIGS,
+  DEFAULT_LOCALE,
+  ErrorIcon,
+  ExternalLinkIcon,
+  MAX_USDC_AMOUNT,
+  MIN_USDC_AMOUNT,
+  SpinnerIcon,
+  SwapIcon,
+  TESTNET_CHAIN_CONFIGS,
+  THEME_COLORS,
+  THEME_FONTS,
+  THEME_SIZING,
+  TOKEN_MESSENGER_ADDRESSES,
+  TOKEN_MESSENGER_V1_ADDRESSES,
+  TOKEN_MESSENGER_V2_ADDRESS,
+  USDC_ADDRESSES,
+  USDC_BRAND_COLOR,
+  USDC_DECIMALS,
+  WalletIcon,
+  arbitrum,
+  arbitrumSepolia,
+  avalanche,
+  avalancheFuji,
+  base,
+  baseSepolia,
+  codex,
+  createChainConfig,
+  createTestnetChainConfig,
+  defaultTheme,
+  formatNumber,
+  getChainName,
+  getErrorMessage,
+  hyperEvm,
+  ink,
+  isValidPositiveAmount,
+  linea,
+  mainnet,
+  mergeTheme,
+  monad,
+  optimism,
+  optimismSepolia,
+  parseUSDCAmount,
+  plume,
+  polygon,
+  polygonAmoy,
+  sei,
+  sepolia,
+  sonic,
+  themePresets,
+  unichain,
+  useAllUSDCBalances,
+  useBridge,
+  useBridgeEstimate,
+  useBridgeQuote,
+  useFormatNumber,
+  useUSDCAllowance,
+  useUSDCBalance,
+  validateAmountInput,
+  validateChainConfig,
+  validateChainConfigs,
+  worldchain,
+  xdc
+});