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

package/src/BridgeWidget.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useId, useMemo } from "react";
+import { useState, useEffect, useCallback, useRef, useId, useMemo } from "react";
 import {
   useAccount,
   useChainId,
@@ -11,7 +11,7 @@ import type {
   BridgeWidgetTheme,
   BridgeChainConfig,
 } from "./types";
-import { useUSDCBalance, useUSDCAllowance, useAllUSDCBalances } from "./hooks";
+import { useUSDCAllowance, useAllUSDCBalances } from "./hooks";
 import { useBridge } from "./useBridge";
 import { DEFAULT_CHAIN_CONFIGS } from "./chains";
 import { USDC_BRAND_COLOR } from "./constants";
@@ -19,6 +19,46 @@ import { formatNumber, getErrorMessage, validateAmountInput, validateChainConfig
 import { mergeTheme } from "./theme";
 import { ChevronDownIcon, SwapIcon } from "./icons";
 
+// Constants
+const TYPE_AHEAD_RESET_MS = 1000;
+const DROPDOWN_MAX_HEIGHT = 300;
+const BOX_SHADOW_COLOR = "rgba(0,0,0,0.3)";
+const DISABLED_BUTTON_BACKGROUND = "rgba(255,255,255,0.1)";
+
+// Helper function for borderless styles
+function getBorderlessStyles(
+  borderless: boolean | undefined,
+  theme: Required<BridgeWidgetTheme>,
+  options?: { includeBoxShadow?: boolean; useBackgroundColor?: boolean }
+) {
+  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}`,
+    }),
+  };
+}
+
+// Shared keyframes style - injected once per document
+const SPINNER_KEYFRAMES = `@keyframes cc-balance-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`;
+const KEYFRAMES_ATTR = "data-cc-spinner-keyframes";
+
+function injectSpinnerKeyframes() {
+  if (typeof document === "undefined") return;
+  // Check if already injected using a data attribute on the style element
+  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);
+}
+
 // Chain icon with fallback
 function ChainIcon({
   chainConfig,
@@ -31,6 +71,11 @@ function ChainIcon({
 }) {
   const [hasError, setHasError] = useState(false);
 
+  // Reset error state when chainConfig changes
+  useEffect(() => {
+    setHasError(false);
+  }, [chainConfig.iconUrl]);
+
   if (!chainConfig.iconUrl || hasError) {
     return (
       <div
@@ -66,6 +111,11 @@ function ChainIcon({
 
 // Small loading spinner for balance display
 function BalanceSpinner({ size = 12 }: { size?: number }) {
+  // Inject keyframes once on first render
+  useEffect(() => {
+    injectSpinnerKeyframes();
+  }, []);
+
   return (
     <svg
       width={size}
@@ -80,7 +130,6 @@ function BalanceSpinner({ size = 12 }: { size?: number }) {
       }}
       aria-hidden="true"
     >
-      <style>{`@keyframes cc-balance-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
       <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
       <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
     </svg>
@@ -99,6 +148,7 @@ function ChainSelector({
   balances,
   isLoadingBalances,
   disabled,
+  borderless,
 }: {
   label: string;
   chains: BridgeChainConfig[];
@@ -110,6 +160,7 @@ function ChainSelector({
   balances?: Record<number, { balance: bigint; formatted: string }>;
   isLoadingBalances?: boolean;
   disabled?: boolean;
+  borderless?: boolean;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -117,8 +168,11 @@ function ChainSelector({
   const typeAheadTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
-  const availableChains = chains.filter(
-    (c) => c.chain.id !== excludeChainId
+
+  // Memoize filtered chains to avoid recalculation on every render
+  const availableChains = useMemo(
+    () => chains.filter((c) => c.chain.id !== excludeChainId),
+    [chains, excludeChainId]
   );
 
   // Clear type-ahead timer on unmount
@@ -189,10 +243,10 @@ function ChainSelector({
           clearTimeout(typeAheadTimeoutRef.current);
         }
 
-        // Reset type-ahead after 1 second of inactivity
+        // Reset type-ahead after timeout
         typeAheadTimeoutRef.current = setTimeout(() => {
           setTypeAhead("");
-        }, 1000);
+        }, TYPE_AHEAD_RESET_MS);
 
         // Find matching chain
         const matchIndex = availableChains.findIndex((chain) =>
@@ -280,9 +334,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",
@@ -312,7 +364,7 @@ function ChainSelector({
               >
                 <BalanceSpinner size={10} /> Loading...
               </span>
-            ) : selectedBalance ? (
+            ) : balances && selectedBalance ? (
               <span
                 style={{
                   fontSize: "10px",
@@ -363,11 +415,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,
@@ -380,6 +432,8 @@ function ChainSelector({
               const chainBalance = balances?.[chainConfig.chain.id];
               const isFocused = index === focusedIndex;
               const isSelected = chainConfig.chain.id === selectedChain.chain.id;
+              // Pre-compute parsed balance to avoid parseFloat in render
+              const hasPositiveBalance = chainBalance ? parseFloat(chainBalance.formatted) > 0 : false;
 
               return (
                 <li
@@ -428,25 +482,16 @@ function ChainSelector({
                       >
                         <BalanceSpinner size={10} />
                       </span>
-                    ) : chainBalance ? (
+                    ) : balances && chainBalance ? (
                       <span
                         style={{
                           fontSize: "10px",
-                          color: parseFloat(chainBalance.formatted) > 0 ? theme.successColor : theme.mutedTextColor,
+                          color: hasPositiveBalance ? theme.successColor : theme.mutedTextColor,
                         }}
                       >
                         {formatNumber(chainBalance.formatted, 2)} USDC
                       </span>
-                    ) : (
-                      <span
-                        style={{
-                          fontSize: "10px",
-                          color: theme.mutedTextColor,
-                        }}
-                      >
-                        0.00 USDC
-                      </span>
-                    )}
+                    ) : null}
                   </div>
                 </li>
               );
@@ -507,6 +552,8 @@ function AmountInput({
   theme,
   id,
   disabled,
+  showBalance = true,
+  borderless,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -515,6 +562,8 @@ function AmountInput({
   theme: Required<BridgeWidgetTheme>;
   id: string;
   disabled?: boolean;
+  showBalance?: boolean;
+  borderless?: boolean;
 }) {
   const inputId = `${id}-input`;
   const labelId = `${id}-label`;
@@ -564,24 +613,24 @@ function AmountInput({
         >
           Amount
         </label>
-        <span
-          style={{ fontSize: "10px", color: theme.mutedTextColor }}
-          aria-live="polite"
-        >
-          Balance:{" "}
-          <span style={{ color: theme.textColor }}>
-            {formatNumber(balance)} USDC
+        {showBalance && (
+          <span
+            style={{ fontSize: "10px", color: theme.mutedTextColor }}
+            aria-live="polite"
+          >
+            Balance:{" "}
+            <span style={{ color: theme.textColor }}>
+              {formatNumber(balance)} USDC
+            </span>
           </span>
-        </span>
+        )}
       </div>
       <div
         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,
         }}
       >
@@ -690,6 +739,7 @@ export function BridgeWidget({
   onBridgeError,
   onConnectWallet,
   theme: themeOverrides,
+  borderless = false,
   className,
   style,
 }: BridgeWidgetProps) {
@@ -705,7 +755,6 @@ export 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);
@@ -741,20 +790,28 @@ export function BridgeWidget({
   const [txHash, setTxHash] = useState<`0x${string}` | undefined>();
   const [error, setError] = useState<string | null>(null);
 
-  // Hooks - fetch balances for all chains
+  // Hooks - fetch balances for all chains (single batch request via multicall)
   const { balances: allBalances, isLoading: isLoadingAllBalances, refetch: refetchAllBalances } = useAllUSDCBalances(chains);
-  const { balanceFormatted, refetch: refetchBalance } = useUSDCBalance(
-    sourceChainConfig
-  );
+
+  // Derive source chain balance from the batch-fetched balances (no extra network request)
+  const balanceFormatted = useMemo(() => {
+    return allBalances[sourceChainConfig.chain.id]?.formatted ?? "0";
+  }, [allBalances, sourceChainConfig.chain.id]);
+
+  // Memoize parsed values to avoid repeated parsing
+  const parsedBalance = useMemo(() => parseFloat(balanceFormatted), [balanceFormatted]);
+  const parsedAmount = useMemo(() => parseFloat(amount) || 0, [amount]);
+
   const { needsApproval, approve, isApproving } = useUSDCAllowance(
     sourceChainConfig
   );
 
-  // Combined refetch for all balances
-  const refetchBalances = useCallback(() => {
-    refetchBalance();
-    refetchAllBalances();
-  }, [refetchBalance, refetchAllBalances]);
+  // Refetch balances when wallet connects or address changes
+  useEffect(() => {
+    if (address) {
+      refetchAllBalances();
+    }
+  }, [address, refetchAllBalances]);
 
   // Bridge hook
   const { bridge: executeBridge, state: bridgeState, reset: resetBridge } = useBridge();
@@ -785,11 +842,11 @@ export function BridgeWidget({
 
   // Swap chains
   const handleSwapChains = useCallback(() => {
-    setSourceChainConfig((prev) => {
-      setDestChainConfig(prev);
-      return destChainConfig;
-    });
-  }, [destChainConfig]);
+    const newSource = destChainConfig;
+    const newDest = sourceChainConfig;
+    setSourceChainConfig(newSource);
+    setDestChainConfig(newDest);
+  }, [destChainConfig, sourceChainConfig]);
 
   // Handle max click
   const handleMaxClick = useCallback(() => {
@@ -807,7 +864,7 @@ export function BridgeWidget({
 
   // Handle bridge
   const handleBridge = useCallback(async () => {
-    if (!address || !amount || parseFloat(amount) <= 0) return;
+    if (!address || !amount || parsedAmount <= 0) return;
 
     setError(null);
     resetBridge();
@@ -848,6 +905,7 @@ export function BridgeWidget({
   }, [
     address,
     amount,
+    parsedAmount,
     needsApproval,
     approve,
     executeBridge,
@@ -891,7 +949,7 @@ export function BridgeWidget({
       const currentTxHash = bridgeState.txHash;
 
       setAmount("");
-      refetchBalances();
+      refetchAllBalances();
 
       if (currentTxHash) {
         onBridgeSuccessRef.current?.({
@@ -908,19 +966,19 @@ export function BridgeWidget({
     bridgeState.status,
     bridgeState.txHash,
     bridgeState.error,
-    refetchBalances,
+    refetchAllBalances,
     amount,
     sourceChainConfig.chain.id,
     destChainConfig.chain.id,
   ]);
 
-  // Computed disabled state
+  // Computed disabled state using memoized values
   const isButtonDisabled =
     !isConnected ||
     needsChainSwitch ||
     !amount ||
-    parseFloat(amount) <= 0 ||
-    parseFloat(amount) > parseFloat(balanceFormatted) ||
+    parsedAmount <= 0 ||
+    parsedAmount > parsedBalance ||
     isConfirming ||
     isApproving ||
     isBridging;
@@ -944,8 +1002,8 @@ export function BridgeWidget({
       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";
@@ -958,7 +1016,8 @@ export function BridgeWidget({
     isConfirming,
     isApproving,
     amount,
-    balanceFormatted,
+    parsedAmount,
+    parsedBalance,
     needsApproval,
   ]);
 
@@ -1003,7 +1062,7 @@ export function BridgeWidget({
       transition: "all 0.2s",
       color: isButtonActuallyDisabled ? theme.mutedTextColor : theme.textColor,
       background: isButtonActuallyDisabled
-        ? "rgba(255,255,255,0.1)"
+        ? DISABLED_BUTTON_BACKGROUND
         : `linear-gradient(135deg, ${theme.primaryColor} 0%, ${theme.secondaryColor} 100%)`,
       boxShadow: isButtonActuallyDisabled
         ? "none"
@@ -1028,11 +1087,11 @@ export 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,
       }}
     >
@@ -1053,9 +1112,10 @@ export function BridgeWidget({
           onSelect={setSourceChainConfig}
           excludeChainId={destChainConfig.chain.id}
           theme={theme}
-          balances={allBalances}
-          isLoadingBalances={isLoadingAllBalances}
+          balances={isConnected ? allBalances : undefined}
+          isLoadingBalances={isConnected && isLoadingAllBalances}
           disabled={isOperationPending}
+          borderless={borderless}
         />
         <SwapButton onClick={handleSwapChains} theme={theme} disabled={isOperationPending} />
         <ChainSelector
@@ -1066,9 +1126,10 @@ export function BridgeWidget({
           onSelect={setDestChainConfig}
           excludeChainId={sourceChainConfig.chain.id}
           theme={theme}
-          balances={allBalances}
-          isLoadingBalances={isLoadingAllBalances}
+          balances={isConnected ? allBalances : undefined}
+          isLoadingBalances={isConnected && isLoadingAllBalances}
           disabled={isOperationPending}
+          borderless={borderless}
         />
       </div>
 
@@ -1082,6 +1143,8 @@ export function BridgeWidget({
           onMaxClick={handleMaxClick}
           theme={theme}
           disabled={isOperationPending}
+          showBalance={isConnected}
+          borderless={borderless}
         />
       </div>
 

package/src/__tests__/BridgeWidget.test.tsx

@@ -217,6 +217,22 @@ describe("BridgeWidget", () => {
     expect(widget.style.backgroundColor).toBe("red");
   });
 
+  it("applies borderless style when borderless prop is true", () => {
+    render(<BridgeWidget borderless />);
+    const widget = screen.getByRole("region", { name: "USDC Bridge Widget" });
+    // Check that borderless styles are applied
+    expect(widget.style.background).toBe("transparent");
+    // JSDOM normalizes "0px" to "0"
+    expect(widget.style.borderRadius).toBe("0");
+  });
+
+  it("applies default borders when borderless prop is false", () => {
+    render(<BridgeWidget borderless={false} />);
+    const widget = screen.getByRole("region", { name: "USDC Bridge Widget" });
+    // Check that default styles have border radius (not 0)
+    expect(widget.style.borderRadius).not.toBe("0");
+  });
+
   it("calls onBridgeStart when bridge is initiated", async () => {
     const onBridgeStart = vi.fn();
     render(<BridgeWidget onBridgeStart={onBridgeStart} />);
@@ -264,6 +280,19 @@ describe("BridgeWidget - Disconnected State", () => {
 
     expect(onConnectWallet).toHaveBeenCalled();
   });
+
+  it("does not show balance in amount input when wallet is disconnected", () => {
+    render(<BridgeWidget />);
+    // Balance label should not be present when disconnected
+    expect(screen.queryByText(/Balance:/)).toBeNull();
+  });
+
+  it("does not show balance in chain selectors when wallet is disconnected", () => {
+    render(<BridgeWidget />);
+    // USDC balance text should not appear in chain selectors
+    expect(screen.queryByText(/1,000.00 USDC/)).toBeNull();
+    expect(screen.queryByText(/500.00 USDC/)).toBeNull();
+  });
 });
 
 describe("BridgeWidget - Chain Switch Required", () => {

package/src/__tests__/hooks.test.ts

@@ -5,10 +5,11 @@ import type { BridgeChainConfig } from "../types";
 
 // Create mock functions
 const mockUseReadContracts = vi.fn();
+const mockUseAccount = vi.fn();
 
 // Mock wagmi hooks
 vi.mock("wagmi", () => ({
-  useAccount: vi.fn(() => ({ address: "0x1234567890123456789012345678901234567890" })),
+  useAccount: () => mockUseAccount(),
   useReadContract: vi.fn(() => ({
     data: 1000000000n,
     isLoading: false,
@@ -58,6 +59,8 @@ describe("useAllUSDCBalances", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    // Default to connected wallet
+    mockUseAccount.mockReturnValue({ address: "0x1234567890123456789012345678901234567890" });
     mockUseReadContracts.mockReturnValue({
       data: [
         { status: "success", result: 1000000000n },
@@ -124,4 +127,20 @@ describe("useAllUSDCBalances", () => {
     // Successful call should work
     expect(result.current.balances[8453].balance).toBe(500000000n);
   });
+
+  it("returns isLoading false when wallet not connected", () => {
+    // Set wallet as disconnected
+    mockUseAccount.mockReturnValue({ address: undefined });
+    mockUseReadContracts.mockReturnValue({
+      data: undefined,
+      isLoading: true, // Query reports loading but...
+      refetch: vi.fn(),
+    });
+
+    const { result } = renderHook(() => useAllUSDCBalances(mockChainConfigs));
+
+    // ...isLoading should be false since wallet is not connected
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.balances).toEqual({});
+  });
 });

package/src/hooks.ts

@@ -20,7 +20,7 @@ export function useUSDCBalance(chainConfig: BridgeChainConfig | undefined) {
 
   const {
     data: balance,
-    isLoading,
+    isLoading: queryLoading,
     refetch,
   } = useReadContract({
     address: chainConfig?.usdcAddress,
@@ -32,6 +32,9 @@ export function useUSDCBalance(chainConfig: BridgeChainConfig | undefined) {
     },
   });
 
+  // Only show loading when wallet is connected and query is actually running
+  const isLoading = !!address && queryLoading;
+
   return {
     balance: balance ?? 0n,
     balanceFormatted: balance ? formatUnits(balance, USDC_DECIMALS) : "0",
@@ -74,7 +77,7 @@ export function useAllUSDCBalances(chainConfigs: BridgeChainConfig[]): {
 
   const {
     data: results,
-    isLoading,
+    isLoading: queryLoading,
     refetch,
   } = useReadContracts({
     contracts,
@@ -83,6 +86,9 @@ export function useAllUSDCBalances(chainConfigs: BridgeChainConfig[]): {
     },
   });
 
+  // Only show loading when wallet is connected and query is actually running
+  const isLoading = !!address && queryLoading;
+
   // Map results to chain IDs
   const balances = useMemo(() => {
     const balanceMap: Record<
@@ -130,7 +136,7 @@ export function useUSDCAllowance(
 
   const {
     data: allowance,
-    isLoading,
+    isLoading: queryLoading,
     refetch,
   } = useReadContract({
     address: chainConfig?.usdcAddress,
@@ -143,6 +149,9 @@ export function useUSDCAllowance(
     },
   });
 
+  // Only show loading when wallet is connected and query is actually running
+  const isLoading = !!address && queryLoading;
+
   const { writeContractAsync, isPending: isApproving } = useWriteContract();
   const [approvalTxHash, setApprovalTxHash] = useState<
     `0x${string}` | undefined

package/src/types.ts

@@ -123,6 +123,8 @@ export 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 */