@hongming-wang/usdc-bridge-widget 0.1.0

package/dist/chunk-JHG7XCWW.mjs

@@ -0,0 +1,218 @@
+// src/useBridge.ts
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useConnectorClient } from "wagmi";
+var CHAIN_NAME_MAP = {
+  1: "Ethereum",
+  42161: "Arbitrum",
+  43114: "Avalanche",
+  8453: "Base",
+  10: "OP_Mainnet",
+  137: "Polygon",
+  59144: "Linea",
+  130: "Unichain",
+  146: "Sonic",
+  480: "World_Chain",
+  143: "Monad",
+  1329: "Sei",
+  50: "XDC",
+  999: "HyperEVM",
+  57073: "Ink",
+  98866: "Plume",
+  81224: "Codex"
+};
+function getChainName(chainId) {
+  return CHAIN_NAME_MAP[chainId] || `Chain_${chainId}`;
+}
+function useBridge() {
+  const { data: connectorClient } = useConnectorClient();
+  const [state, setState] = useState({
+    status: "idle",
+    events: []
+  });
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  const addEvent = useCallback((type, data) => {
+    if (!isMountedRef.current) return;
+    setState((prev) => ({
+      ...prev,
+      events: [...prev.events, { type, timestamp: Date.now(), data }]
+    }));
+  }, []);
+  const reset = useCallback(() => {
+    setState({ status: "idle", events: [] });
+  }, []);
+  const bridge = useCallback(
+    async (params) => {
+      const { sourceChainConfig, destChainConfig, amount, recipientAddress } = params;
+      if (!connectorClient) {
+        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 });
+      try {
+        let BridgeKit;
+        let createAdapterFromProvider;
+        try {
+          const bridgingKitPath = ["@circle-fin", "bridge-kit"].join("/");
+          const adapterPath = ["@circle-fin", "adapter-viem-v2"].join("/");
+          const dynamicImport = Function("m", "return import(m)");
+          const [bridgingKitModule, adapterModule] = await Promise.all([
+            dynamicImport(bridgingKitPath),
+            dynamicImport(adapterPath)
+          ]);
+          BridgeKit = bridgingKitModule.BridgeKit;
+          createAdapterFromProvider = adapterModule.createAdapterFromProvider;
+        } catch {
+          throw new Error(
+            "Circle Bridge Kit packages not installed. Run: npm install @circle-fin/bridge-kit @circle-fin/adapter-viem-v2"
+          );
+        }
+        const clientWithTransport = connectorClient;
+        const provider = clientWithTransport?.transport?.value?.provider;
+        if (!provider) {
+          throw new Error("Could not get wallet provider from connector");
+        }
+        const adapter = await createAdapterFromProvider({ provider });
+        const kit = new BridgeKit();
+        kit.on("approve", (event) => {
+          addEvent("approve", event);
+          if (isMountedRef.current) {
+            setState((prev) => ({
+              ...prev,
+              status: "approving",
+              txHash: event.values?.txHash
+            }));
+          }
+        });
+        kit.on("burn", (event) => {
+          addEvent("burn", event);
+          if (isMountedRef.current) {
+            setState((prev) => ({
+              ...prev,
+              status: "burning",
+              txHash: event.values?.txHash
+            }));
+          }
+        });
+        kit.on("mint", (event) => {
+          addEvent("mint", event);
+          if (isMountedRef.current) {
+            setState((prev) => ({
+              ...prev,
+              status: "minting",
+              txHash: event.values?.txHash
+            }));
+          }
+        });
+        const sourceChainName = getChainName(sourceChainConfig.chain.id);
+        const destChainName = getChainName(destChainConfig.chain.id);
+        const bridgeParams = {
+          from: { adapter, chain: sourceChainName },
+          to: { adapter, chain: destChainName },
+          amount
+        };
+        if (recipientAddress) {
+          bridgeParams.recipientAddress = recipientAddress;
+        }
+        const result = await kit.bridge(bridgeParams);
+        addEvent("complete", result);
+        if (isMountedRef.current) {
+          setState((prev) => ({
+            ...prev,
+            status: "success",
+            txHash: result?.txHash
+          }));
+        }
+      } catch (error) {
+        addEvent("error", error);
+        if (isMountedRef.current) {
+          setState((prev) => ({
+            ...prev,
+            status: "error",
+            error: error instanceof Error ? error : new Error("Bridge transfer failed")
+          }));
+        }
+        throw error;
+      }
+    },
+    [connectorClient, addEvent]
+  );
+  return { bridge, state, reset };
+}
+function useBridgeQuote(sourceChainId, destChainId, amount) {
+  const [quote, setQuote] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!sourceChainId || !destChainId || !amount || parseFloat(amount) <= 0) {
+      setQuote(null);
+      setError(null);
+      return;
+    }
+    const fetchQuote = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        let BridgeKit;
+        try {
+          const modulePath = ["@circle-fin", "bridge-kit"].join("/");
+          const dynamicImport = Function("m", "return import(m)");
+          const bridgingKitModule = await dynamicImport(modulePath);
+          BridgeKit = bridgingKitModule.BridgeKit;
+        } catch {
+          setError(new Error("Bridge Kit not installed. Run: npm install @circle-fin/bridge-kit"));
+          setQuote(null);
+          return;
+        }
+        const kit = new BridgeKit();
+        const sourceChainName = getChainName(sourceChainId);
+        const destChainName = getChainName(destChainId);
+        if (typeof kit.getQuote === "function") {
+          const result = await kit.getQuote({
+            from: { chain: sourceChainName },
+            to: { chain: destChainName },
+            amount
+          });
+          setQuote({
+            estimatedGasFee: result.estimatedGasFee || "0.00",
+            bridgeFee: result.bridgeFee || "0.00",
+            totalFee: result.totalFee || result.estimatedGasFee || "0.00",
+            estimatedTime: result.estimatedTime || "~15-20 minutes",
+            expiresAt: result.expiresAt
+          });
+        } else {
+          setQuote({
+            estimatedGasFee: "Estimated by wallet",
+            bridgeFee: "0.00",
+            totalFee: "Gas only",
+            estimatedTime: "~15-20 minutes"
+          });
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to get quote"));
+        setQuote(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const debounceTimer = setTimeout(fetchQuote, 500);
+    return () => clearTimeout(debounceTimer);
+  }, [sourceChainId, destChainId, amount]);
+  return { quote, isLoading, error };
+}
+
+export {
+  getChainName,
+  useBridge,
+  useBridgeQuote
+};