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

package/README.md

@@ -88,6 +88,7 @@ function App() {
 | `onBridgeError` | `function` | - | Called on bridge error |
 | `onConnectWallet` | `function` | - | Called when "Connect Wallet" clicked |
 | `theme` | `BridgeWidgetTheme` | Default theme | Custom theme overrides |
+| `borderless` | `boolean` | `false` | Remove borders/shadows for seamless integration |
 | `className` | `string` | - | Custom CSS class |
 | `style` | `CSSProperties` | - | Custom inline styles |
 
@@ -169,6 +170,22 @@ const customChainConfig = {
 />
 ```
 
+## Borderless Mode
+
+Use the `borderless` prop for seamless integration into your existing UI. This removes all borders, shadows, and backgrounds from the widget container and its child components:
+
+```tsx
+<BridgeWidget borderless />
+
+{/* Or combine with custom styling */}
+<div className="my-custom-container">
+  <BridgeWidget
+    borderless
+    style={{ padding: 0 }}
+  />
+</div>
+```
+
 ## Callbacks
 
 ```tsx

package/dist/index.d.mts

@@ -126,6 +126,8 @@ interface BridgeWidgetProps {
     onConnectWallet?: () => void;
     /** Custom theme overrides to customize the widget appearance */
     theme?: BridgeWidgetTheme;
+    /** Remove all borders from the widget for seamless integration */
+    borderless?: boolean;
     /** Custom CSS class name to apply to the widget container */
     className?: string;
     /** Custom inline styles to apply to the widget container */
@@ -160,7 +162,7 @@ interface BridgeResult {
     error?: string;
 }
 
-declare function BridgeWidget({ chains, defaultSourceChainId, defaultDestinationChainId, onBridgeStart, onBridgeSuccess, onBridgeError, onConnectWallet, theme: themeOverrides, className, style, }: BridgeWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BridgeWidget({ chains, defaultSourceChainId, defaultDestinationChainId, onBridgeStart, onBridgeSuccess, onBridgeError, onConnectWallet, theme: themeOverrides, borderless, className, style, }: BridgeWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to get USDC balance for a specific chain

package/dist/index.d.ts

@@ -126,6 +126,8 @@ interface BridgeWidgetProps {
     onConnectWallet?: () => void;
     /** Custom theme overrides to customize the widget appearance */
     theme?: BridgeWidgetTheme;
+    /** Remove all borders from the widget for seamless integration */
+    borderless?: boolean;
     /** Custom CSS class name to apply to the widget container */
     className?: string;
     /** Custom inline styles to apply to the widget container */
@@ -160,7 +162,7 @@ interface BridgeResult {
     error?: string;
 }
 
-declare function BridgeWidget({ chains, defaultSourceChainId, defaultDestinationChainId, onBridgeStart, onBridgeSuccess, onBridgeError, onConnectWallet, theme: themeOverrides, className, style, }: BridgeWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BridgeWidget({ chains, defaultSourceChainId, defaultDestinationChainId, onBridgeStart, onBridgeSuccess, onBridgeError, onConnectWallet, theme: themeOverrides, borderless, className, style, }: BridgeWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to get USDC balance for a specific chain

package/dist/index.js

@@ -621,7 +621,7 @@ function useUSDCBalance(chainConfig) {
   const { address } = (0, import_wagmi2.useAccount)();
   const {
     data: balance,
-    isLoading,
+    isLoading: queryLoading,
     refetch
   } = (0, import_wagmi2.useReadContract)({
     address: chainConfig?.usdcAddress,
@@ -632,6 +632,7 @@ function useUSDCBalance(chainConfig) {
       enabled: !!address && !!chainConfig?.usdcAddress
     }
   });
+  const isLoading = !!address && queryLoading;
   return {
     balance: balance ?? 0n,
     balanceFormatted: balance ? (0, import_viem2.formatUnits)(balance, USDC_DECIMALS) : "0",
@@ -653,7 +654,7 @@ function useAllUSDCBalances(chainConfigs) {
   }, [address, chainConfigs]);
   const {
     data: results,
-    isLoading,
+    isLoading: queryLoading,
     refetch
   } = (0, import_wagmi2.useReadContracts)({
     contracts,
@@ -661,6 +662,7 @@ function useAllUSDCBalances(chainConfigs) {
       enabled: !!address && contracts.length > 0
     }
   });
+  const isLoading = !!address && queryLoading;
   const balances = (0, import_react2.useMemo)(() => {
     const balanceMap = {};
     if (!results) return balanceMap;
@@ -691,7 +693,7 @@ function useUSDCAllowance(chainConfig, spenderAddress) {
   const effectiveSpender = spenderAddress || chainConfig?.tokenMessengerAddress;
   const {
     data: allowance,
-    isLoading,
+    isLoading: queryLoading,
     refetch
   } = (0, import_wagmi2.useReadContract)({
     address: chainConfig?.usdcAddress,
@@ -702,6 +704,7 @@ function useUSDCAllowance(chainConfig, spenderAddress) {
       enabled: !!address && !!chainConfig?.usdcAddress && !!effectiveSpender
     }
   });
+  const isLoading = !!address && queryLoading;
   const { writeContractAsync, isPending: isApproving } = (0, import_wagmi2.useWriteContract)();
   const [approvalTxHash, setApprovalTxHash] = (0, import_react2.useState)();
   const [approvalError, setApprovalError] = (0, import_react2.useState)(null);
@@ -1269,12 +1272,40 @@ function WalletIcon({
 
 // src/BridgeWidget.tsx
 var import_jsx_runtime2 = require("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] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    setHasError(false);
+  }, [chainConfig.iconUrl]);
   if (!chainConfig.iconUrl || hasError) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
@@ -1308,6 +1339,9 @@ function ChainIcon({
   );
 }
 function BalanceSpinner({ size = 12 }) {
+  (0, import_react3.useEffect)(() => {
+    injectSpinnerKeyframes();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     {
@@ -1323,7 +1357,6 @@ function BalanceSpinner({ size = 12 }) {
       },
       "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" })
       ]
@@ -1340,7 +1373,8 @@ function ChainSelector({
   id,
   balances,
   isLoadingBalances,
-  disabled
+  disabled,
+  borderless
 }) {
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
   const [focusedIndex, setFocusedIndex] = (0, import_react3.useState)(-1);
@@ -1348,8 +1382,9 @@ function ChainSelector({
   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
+  const availableChains = (0, import_react3.useMemo)(
+    () => chains.filter((c) => c.chain.id !== excludeChainId),
+    [chains, excludeChainId]
   );
   (0, import_react3.useEffect)(() => {
     return () => {
@@ -1412,7 +1447,7 @@ function ChainSelector({
         }
         typeAheadTimeoutRef.current = setTimeout(() => {
           setTypeAhead("");
-        }, 1e3);
+        }, TYPE_AHEAD_RESET_MS);
         const matchIndex = availableChains.findIndex(
           (chain) => chain.chain.name.toLowerCase().startsWith(newTypeAhead)
         );
@@ -1489,9 +1524,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"
@@ -1526,7 +1559,7 @@ function ChainSelector({
                     " Loading..."
                   ]
                 }
-              ) : selectedBalance ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              ) : balances && selectedBalance ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                 "span",
                 {
                   style: {
@@ -1584,11 +1617,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,
@@ -1600,6 +1633,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__ */ (0, import_jsx_runtime2.jsxs)(
               "li",
               {
@@ -1649,28 +1683,19 @@ function ChainSelector({
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BalanceSpinner, { size: 10 })
                       }
-                    ) : chainBalance ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    ) : balances && chainBalance ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                       "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__ */ (0, import_jsx_runtime2.jsx)(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "10px",
-                          color: theme.mutedTextColor
-                        },
-                        children: "0.00 USDC"
-                      }
-                    )
+                    ) : null
                   ] })
                 ]
               },
@@ -1722,7 +1747,9 @@ function AmountInput({
   onMaxClick,
   theme,
   id,
-  disabled
+  disabled,
+  showBalance = true,
+  borderless
 }) {
   const inputId = `${id}-input`;
   const labelId = `${id}-label`;
@@ -1768,7 +1795,7 @@ function AmountInput({
               children: "Amount"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          showBalance && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "span",
             {
               style: { fontSize: "10px", color: theme.mutedTextColor },
@@ -1792,10 +1819,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: [
@@ -1922,6 +1947,7 @@ function BridgeWidget({
   onBridgeError,
   onConnectWallet,
   theme: themeOverrides,
+  borderless = false,
   className,
   style
 }) {
@@ -1935,7 +1961,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);
@@ -1962,22 +1987,19 @@ function BridgeWidget({
   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 balanceFormatted = (0, import_react3.useMemo)(() => {
+    return allBalances[sourceChainConfig.chain.id]?.formatted ?? "0";
+  }, [allBalances, sourceChainConfig.chain.id]);
+  const parsedBalance = (0, import_react3.useMemo)(() => parseFloat(balanceFormatted), [balanceFormatted]);
+  const parsedAmount = (0, import_react3.useMemo)(() => parseFloat(amount) || 0, [amount]);
   const { needsApproval, approve, isApproving } = useUSDCAllowance(
     sourceChainConfig
   );
-  const refetchBalances = (0, import_react3.useCallback)(() => {
-    refetchBalance();
-    refetchAllBalances();
-  }, [refetchBalance, refetchAllBalances]);
   (0, import_react3.useEffect)(() => {
     if (address) {
       refetchAllBalances();
-      refetchBalance();
     }
-  }, [address, refetchAllBalances, refetchBalance]);
+  }, [address, refetchAllBalances]);
   const { bridge: executeBridge, state: bridgeState, reset: resetBridge } = useBridge();
   const { isLoading: isConfirming, isSuccess } = (0, import_wagmi3.useWaitForTransactionReceipt)({
     hash: txHash
@@ -1990,11 +2012,11 @@ function BridgeWidget({
   onBridgeErrorRef.current = onBridgeError;
   const needsChainSwitch = isConnected && currentChainId !== sourceChainConfig.chain.id;
   const handleSwapChains = (0, import_react3.useCallback)(() => {
-    setSourceChainConfig((prev) => {
-      setDestChainConfig(prev);
-      return destChainConfig;
-    });
-  }, [destChainConfig]);
+    const newSource = destChainConfig;
+    const newDest = sourceChainConfig;
+    setSourceChainConfig(newSource);
+    setDestChainConfig(newDest);
+  }, [destChainConfig, sourceChainConfig]);
   const handleMaxClick = (0, import_react3.useCallback)(() => {
     setAmount(balanceFormatted);
   }, [balanceFormatted]);
@@ -2006,7 +2028,7 @@ function BridgeWidget({
     }
   }, [switchChainAsync, sourceChainConfig.chain.id]);
   const handleBridge = (0, import_react3.useCallback)(async () => {
-    if (!address || !amount || parseFloat(amount) <= 0) return;
+    if (!address || !amount || parsedAmount <= 0) return;
     setError(null);
     resetBridge();
     try {
@@ -2040,6 +2062,7 @@ function BridgeWidget({
   }, [
     address,
     amount,
+    parsedAmount,
     needsApproval,
     approve,
     executeBridge,
@@ -2070,7 +2093,7 @@ function BridgeWidget({
       const currentDestChainId = destChainConfig.chain.id;
       const currentTxHash = bridgeState.txHash;
       setAmount("");
-      refetchBalances();
+      refetchAllBalances();
       if (currentTxHash) {
         onBridgeSuccessRef.current?.({
           sourceChainId: currentSourceChainId,
@@ -2086,12 +2109,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 = (0, import_react3.useCallback)(() => {
     if (!isConnected) return "Connect Wallet";
@@ -2104,8 +2127,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";
@@ -2118,7 +2141,8 @@ function BridgeWidget({
     isConfirming,
     isApproving,
     amount,
-    balanceFormatted,
+    parsedAmount,
+    parsedBalance,
     needsApproval
   ]);
   const handleButtonClick = (0, import_react3.useCallback)(() => {
@@ -2158,7 +2182,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)`
     }),
     [
@@ -2180,11 +2204,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: [
@@ -2208,9 +2232,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__ */ (0, import_jsx_runtime2.jsx)(SwapButton, { onClick: handleSwapChains, theme, disabled: isOperationPending }),
@@ -2224,9 +2249,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
                 }
               )
             ]
@@ -2241,7 +2267,9 @@ function BridgeWidget({
             balance: balanceFormatted,
             onMaxClick: handleMaxClick,
             theme,
-            disabled: isOperationPending
+            disabled: isOperationPending,
+            showBalance: isConnected,
+            borderless
           }
         ) }),
         configError && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(