@hongming-wang/usdc-bridge-widget 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -542,7 +542,7 @@ function useUSDCBalance(chainConfig) {
   const { address } = useAccount2();
   const {
     data: balance,
-    isLoading,
+    isLoading: queryLoading,
     refetch
   } = useReadContract({
     address: chainConfig?.usdcAddress,
@@ -553,6 +553,7 @@ function useUSDCBalance(chainConfig) {
       enabled: !!address && !!chainConfig?.usdcAddress
     }
   });
+  const isLoading = !!address && queryLoading;
   return {
     balance: balance ?? 0n,
     balanceFormatted: balance ? formatUnits(balance, USDC_DECIMALS) : "0",
@@ -574,7 +575,7 @@ function useAllUSDCBalances(chainConfigs) {
   }, [address, chainConfigs]);
   const {
     data: results,
-    isLoading,
+    isLoading: queryLoading,
     refetch
   } = useReadContracts({
     contracts,
@@ -582,6 +583,7 @@ function useAllUSDCBalances(chainConfigs) {
       enabled: !!address && contracts.length > 0
     }
   });
+  const isLoading = !!address && queryLoading;
   const balances = useMemo(() => {
     const balanceMap = {};
     if (!results) return balanceMap;
@@ -612,7 +614,7 @@ function useUSDCAllowance(chainConfig, spenderAddress) {
   const effectiveSpender = spenderAddress || chainConfig?.tokenMessengerAddress;
   const {
     data: allowance,
-    isLoading,
+    isLoading: queryLoading,
     refetch
   } = useReadContract({
     address: chainConfig?.usdcAddress,
@@ -623,6 +625,7 @@ function useUSDCAllowance(chainConfig, spenderAddress) {
       enabled: !!address && !!chainConfig?.usdcAddress && !!effectiveSpender
     }
   });
+  const isLoading = !!address && queryLoading;
   const { writeContractAsync, isPending: isApproving } = useWriteContract();
   const [approvalTxHash, setApprovalTxHash] = useState2();
   const [approvalError, setApprovalError] = useState2(null);
@@ -1209,12 +1212,40 @@ function WalletIcon({
 
 // src/BridgeWidget.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TYPE_AHEAD_RESET_MS = 1e3;
+var DROPDOWN_MAX_HEIGHT = 300;
+var BOX_SHADOW_COLOR = "rgba(0,0,0,0.3)";
+var DISABLED_BUTTON_BACKGROUND = "rgba(255,255,255,0.1)";
+function getBorderlessStyles(borderless, theme, options) {
+  const bgColor = options?.useBackgroundColor ? theme.backgroundColor : theme.cardBackgroundColor;
+  return {
+    borderRadius: borderless ? 0 : `${theme.borderRadius}px`,
+    background: borderless ? "transparent" : bgColor,
+    border: borderless ? "none" : `1px solid ${theme.borderColor}`,
+    ...options?.includeBoxShadow && {
+      boxShadow: borderless ? "none" : `0 4px 24px ${BOX_SHADOW_COLOR}`
+    }
+  };
+}
+var SPINNER_KEYFRAMES = `@keyframes cc-balance-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`;
+var KEYFRAMES_ATTR = "data-cc-spinner-keyframes";
+function injectSpinnerKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.querySelector(`style[${KEYFRAMES_ATTR}]`)) return;
+  const style = document.createElement("style");
+  style.setAttribute(KEYFRAMES_ATTR, "true");
+  style.textContent = SPINNER_KEYFRAMES;
+  document.head.appendChild(style);
+}
 function ChainIcon({
   chainConfig,
   theme,
   size = 24
 }) {
   const [hasError, setHasError] = useState3(false);
+  useEffect3(() => {
+    setHasError(false);
+  }, [chainConfig.iconUrl]);
   if (!chainConfig.iconUrl || hasError) {
     return /* @__PURE__ */ jsx2(
       "div",
@@ -1248,6 +1279,9 @@ function ChainIcon({
   );
 }
 function BalanceSpinner({ size = 12 }) {
+  useEffect3(() => {
+    injectSpinnerKeyframes();
+  }, []);
   return /* @__PURE__ */ jsxs2(
     "svg",
     {
@@ -1263,7 +1297,6 @@ function BalanceSpinner({ size = 12 }) {
       },
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx2("style", { children: `@keyframes cc-balance-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }),
         /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
         /* @__PURE__ */ jsx2("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })
       ]
@@ -1280,7 +1313,8 @@ function ChainSelector({
   id,
   balances,
   isLoadingBalances,
-  disabled
+  disabled,
+  borderless
 }) {
   const [isOpen, setIsOpen] = useState3(false);
   const [focusedIndex, setFocusedIndex] = useState3(-1);
@@ -1288,8 +1322,9 @@ function ChainSelector({
   const typeAheadTimeoutRef = useRef2(null);
   const buttonRef = useRef2(null);
   const listRef = useRef2(null);
-  const availableChains = chains.filter(
-    (c) => c.chain.id !== excludeChainId
+  const availableChains = useMemo2(
+    () => chains.filter((c) => c.chain.id !== excludeChainId),
+    [chains, excludeChainId]
   );
   useEffect3(() => {
     return () => {
@@ -1352,7 +1387,7 @@ function ChainSelector({
         }
         typeAheadTimeoutRef.current = setTimeout(() => {
           setTypeAhead("");
-        }, 1e3);
+        }, TYPE_AHEAD_RESET_MS);
         const matchIndex = availableChains.findIndex(
           (chain) => chain.chain.name.toLowerCase().startsWith(newTypeAhead)
         );
@@ -1429,9 +1464,7 @@ function ChainSelector({
           alignItems: "center",
           justifyContent: "space-between",
           padding: "10px 12px",
-          borderRadius: `${theme.borderRadius}px`,
-          background: theme.cardBackgroundColor,
-          border: `1px solid ${theme.borderColor}`,
+          ...getBorderlessStyles(borderless, theme),
           cursor: disabled ? "not-allowed" : "pointer",
           opacity: disabled ? 0.6 : 1,
           transition: "all 0.2s"
@@ -1466,7 +1499,7 @@ function ChainSelector({
                     " Loading..."
                   ]
                 }
-              ) : selectedBalance ? /* @__PURE__ */ jsxs2(
+              ) : balances && selectedBalance ? /* @__PURE__ */ jsxs2(
                 "span",
                 {
                   style: {
@@ -1524,11 +1557,11 @@ function ChainSelector({
             width: "100%",
             marginTop: "8px",
             borderRadius: `${theme.borderRadius}px`,
-            boxShadow: "0 10px 40px rgba(0,0,0,0.3)",
+            boxShadow: `0 10px 40px ${BOX_SHADOW_COLOR}`,
             background: theme.cardBackgroundColor,
             backdropFilter: "blur(10px)",
             border: `1px solid ${theme.borderColor}`,
-            maxHeight: "300px",
+            maxHeight: `${DROPDOWN_MAX_HEIGHT}px`,
             overflowY: "auto",
             overflowX: "hidden",
             padding: 0,
@@ -1540,6 +1573,7 @@ function ChainSelector({
             const chainBalance = balances?.[chainConfig.chain.id];
             const isFocused = index === focusedIndex;
             const isSelected = chainConfig.chain.id === selectedChain.chain.id;
+            const hasPositiveBalance = chainBalance ? parseFloat(chainBalance.formatted) > 0 : false;
             return /* @__PURE__ */ jsxs2(
               "li",
               {
@@ -1589,28 +1623,19 @@ function ChainSelector({
                         },
                         children: /* @__PURE__ */ jsx2(BalanceSpinner, { size: 10 })
                       }
-                    ) : chainBalance ? /* @__PURE__ */ jsxs2(
+                    ) : balances && chainBalance ? /* @__PURE__ */ jsxs2(
                       "span",
                       {
                         style: {
                           fontSize: "10px",
-                          color: parseFloat(chainBalance.formatted) > 0 ? theme.successColor : theme.mutedTextColor
+                          color: hasPositiveBalance ? theme.successColor : theme.mutedTextColor
                         },
                         children: [
                           formatNumber(chainBalance.formatted, 2),
                           " USDC"
                         ]
                       }
-                    ) : /* @__PURE__ */ jsx2(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "10px",
-                          color: theme.mutedTextColor
-                        },
-                        children: "0.00 USDC"
-                      }
-                    )
+                    ) : null
                   ] })
                 ]
               },
@@ -1662,7 +1687,9 @@ function AmountInput({
   onMaxClick,
   theme,
   id,
-  disabled
+  disabled,
+  showBalance = true,
+  borderless
 }) {
   const inputId = `${id}-input`;
   const labelId = `${id}-label`;
@@ -1708,7 +1735,7 @@ function AmountInput({
               children: "Amount"
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          showBalance && /* @__PURE__ */ jsxs2(
             "span",
             {
               style: { fontSize: "10px", color: theme.mutedTextColor },
@@ -1732,10 +1759,8 @@ function AmountInput({
         style: {
           display: "flex",
           alignItems: "center",
-          borderRadius: `${theme.borderRadius}px`,
           overflow: "hidden",
-          background: theme.cardBackgroundColor,
-          border: `1px solid ${theme.borderColor}`,
+          ...getBorderlessStyles(borderless, theme),
           opacity: disabled ? 0.6 : 1
         },
         children: [
@@ -1862,6 +1887,7 @@ function BridgeWidget({
   onBridgeError,
   onConnectWallet,
   theme: themeOverrides,
+  borderless = false,
   className,
   style
 }) {
@@ -1875,7 +1901,6 @@ function BridgeWidget({
     const validation = validateChainConfigs(chains);
     if (!validation.isValid) {
       const errorMsg = validation.errors.join("; ");
-      console.error("[BridgeWidget] Invalid chain configuration:", errorMsg);
       setConfigError(errorMsg);
     } else {
       setConfigError(null);
@@ -1902,16 +1927,19 @@ function BridgeWidget({
   const [txHash, setTxHash] = useState3();
   const [error, setError] = useState3(null);
   const { balances: allBalances, isLoading: isLoadingAllBalances, refetch: refetchAllBalances } = useAllUSDCBalances(chains);
-  const { balanceFormatted, refetch: refetchBalance } = useUSDCBalance(
-    sourceChainConfig
-  );
+  const balanceFormatted = useMemo2(() => {
+    return allBalances[sourceChainConfig.chain.id]?.formatted ?? "0";
+  }, [allBalances, sourceChainConfig.chain.id]);
+  const parsedBalance = useMemo2(() => parseFloat(balanceFormatted), [balanceFormatted]);
+  const parsedAmount = useMemo2(() => parseFloat(amount) || 0, [amount]);
   const { needsApproval, approve, isApproving } = useUSDCAllowance(
     sourceChainConfig
   );
-  const refetchBalances = useCallback3(() => {
-    refetchBalance();
-    refetchAllBalances();
-  }, [refetchBalance, refetchAllBalances]);
+  useEffect3(() => {
+    if (address) {
+      refetchAllBalances();
+    }
+  }, [address, refetchAllBalances]);
   const { bridge: executeBridge, state: bridgeState, reset: resetBridge } = useBridge();
   const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt2({
     hash: txHash
@@ -1924,11 +1952,11 @@ function BridgeWidget({
   onBridgeErrorRef.current = onBridgeError;
   const needsChainSwitch = isConnected && currentChainId !== sourceChainConfig.chain.id;
   const handleSwapChains = useCallback3(() => {
-    setSourceChainConfig((prev) => {
-      setDestChainConfig(prev);
-      return destChainConfig;
-    });
-  }, [destChainConfig]);
+    const newSource = destChainConfig;
+    const newDest = sourceChainConfig;
+    setSourceChainConfig(newSource);
+    setDestChainConfig(newDest);
+  }, [destChainConfig, sourceChainConfig]);
   const handleMaxClick = useCallback3(() => {
     setAmount(balanceFormatted);
   }, [balanceFormatted]);
@@ -1940,7 +1968,7 @@ function BridgeWidget({
     }
   }, [switchChainAsync, sourceChainConfig.chain.id]);
   const handleBridge = useCallback3(async () => {
-    if (!address || !amount || parseFloat(amount) <= 0) return;
+    if (!address || !amount || parsedAmount <= 0) return;
     setError(null);
     resetBridge();
     try {
@@ -1974,6 +2002,7 @@ function BridgeWidget({
   }, [
     address,
     amount,
+    parsedAmount,
     needsApproval,
     approve,
     executeBridge,
@@ -2004,7 +2033,7 @@ function BridgeWidget({
       const currentDestChainId = destChainConfig.chain.id;
       const currentTxHash = bridgeState.txHash;
       setAmount("");
-      refetchBalances();
+      refetchAllBalances();
       if (currentTxHash) {
         onBridgeSuccessRef.current?.({
           sourceChainId: currentSourceChainId,
@@ -2020,12 +2049,12 @@ function BridgeWidget({
     bridgeState.status,
     bridgeState.txHash,
     bridgeState.error,
-    refetchBalances,
+    refetchAllBalances,
     amount,
     sourceChainConfig.chain.id,
     destChainConfig.chain.id
   ]);
-  const isButtonDisabled = !isConnected || needsChainSwitch || !amount || parseFloat(amount) <= 0 || parseFloat(amount) > parseFloat(balanceFormatted) || isConfirming || isApproving || isBridging;
+  const isButtonDisabled = !isConnected || needsChainSwitch || !amount || parsedAmount <= 0 || parsedAmount > parsedBalance || isConfirming || isApproving || isBridging;
   const isButtonActuallyDisabled = isButtonDisabled && !needsChainSwitch && isConnected;
   const getButtonText = useCallback3(() => {
     if (!isConnected) return "Connect Wallet";
@@ -2038,8 +2067,8 @@ function BridgeWidget({
     if (isConfirming || isApproving) {
       return "Approving...";
     }
-    if (!amount || parseFloat(amount) <= 0) return "Enter Amount";
-    if (parseFloat(amount) > parseFloat(balanceFormatted)) {
+    if (!amount || parsedAmount <= 0) return "Enter Amount";
+    if (parsedAmount > parsedBalance) {
       return "Insufficient Balance";
     }
     if (needsApproval(amount)) return "Approve & Bridge USDC";
@@ -2052,7 +2081,8 @@ function BridgeWidget({
     isConfirming,
     isApproving,
     amount,
-    balanceFormatted,
+    parsedAmount,
+    parsedBalance,
     needsApproval
   ]);
   const handleButtonClick = useCallback3(() => {
@@ -2092,7 +2122,7 @@ function BridgeWidget({
       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%)`,
+      background: isButtonActuallyDisabled ? DISABLED_BUTTON_BACKGROUND : `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)`
     }),
     [
@@ -2114,11 +2144,11 @@ function BridgeWidget({
         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)",
+        ...getBorderlessStyles(borderless, theme, {
+          includeBoxShadow: true,
+          useBackgroundColor: true
+        }),
         ...style
       },
       children: [
@@ -2142,9 +2172,10 @@ function BridgeWidget({
                   onSelect: setSourceChainConfig,
                   excludeChainId: destChainConfig.chain.id,
                   theme,
-                  balances: allBalances,
-                  isLoadingBalances: isLoadingAllBalances,
-                  disabled: isOperationPending
+                  balances: isConnected ? allBalances : void 0,
+                  isLoadingBalances: isConnected && isLoadingAllBalances,
+                  disabled: isOperationPending,
+                  borderless
                 }
               ),
               /* @__PURE__ */ jsx2(SwapButton, { onClick: handleSwapChains, theme, disabled: isOperationPending }),
@@ -2158,9 +2189,10 @@ function BridgeWidget({
                   onSelect: setDestChainConfig,
                   excludeChainId: sourceChainConfig.chain.id,
                   theme,
-                  balances: allBalances,
-                  isLoadingBalances: isLoadingAllBalances,
-                  disabled: isOperationPending
+                  balances: isConnected ? allBalances : void 0,
+                  isLoadingBalances: isConnected && isLoadingAllBalances,
+                  disabled: isOperationPending,
+                  borderless
                 }
               )
             ]
@@ -2175,7 +2207,9 @@ function BridgeWidget({
             balance: balanceFormatted,
             onMaxClick: handleMaxClick,
             theme,
-            disabled: isOperationPending
+            disabled: isOperationPending,
+            showBalance: isConnected,
+            borderless
           }
         ) }),
         configError && /* @__PURE__ */ jsxs2(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hongming-wang/usdc-bridge-widget",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A reusable USDC cross-chain bridge widget powered by Circle CCTP",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -17,14 +17,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "tsup src/index.tsx --format cjs,esm --dts --external react --external react-dom --external wagmi --external viem --external @tanstack/react-query",
-    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "dependencies": {
     "@circle-fin/bridge-kit": "^1.0.0",
     "@circle-fin/adapter-viem-v2": "^1.3.0"
@@ -59,5 +51,13 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/hongming-wang/usdc-bridge-widget"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --external react --external react-dom --external wagmi --external viem --external @tanstack/react-query",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
-}
+}