Merge pull request #166 from dinahmaccodes/issueb

fix: prevent race conditions and add retry for fee estimator

Author: k-deejah

package-lock.json

@@ -40,7 +40,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "vite",
+"dev": "vite",
     "build": "npm run build:lib",
     "build:lib": "vite build --config vite.lib.config.ts",
     "build:app": "tsc -b && vite build",
@@ -97,7 +97,7 @@
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^3.0.5"
   },
-  "size-limit": [
+"size-limit": [
     {
       "name": "ES module (gzip)",
       "path": "dist/sorokit-ui.es.js",
@@ -110,5 +110,13 @@
       "limit": "70 KB",
       "gzip": true
     }
-  ]
+  ],
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  }
 }

package.json

@@ -70,16 +70,35 @@ describe("AssetBadge", () => {
     expect(document.querySelector("[data-address]")).not.toBeInTheDocument();
   });
 
-  it("falls back to grey/surface-2 for an unknown asset", () => {
+  it("applies deterministic color classes for an unknown asset", () => {
     const { container } = render(<AssetBadge balance={unknownBalance} />);
-    const icon = container.querySelector(".bg-surface-2");
+    // WAVEX (hash % 10 = 5) maps to purple background/text
+    const icon = container.querySelector(".text-purple");
     expect(icon).toBeInTheDocument();
   });
 
   it("renders the asset code for an unknown asset", () => {
     render(<AssetBadge balance={unknownBalance} />);
     expect(screen.getByText("WAVEX")).toBeInTheDocument();
   });
+
+  it("renders 1-character asset codes centered in the icon circle", () => {
+    const oneCharBalance: Balance = {
+      assetType: "credit_alphanum4",
+      assetCode: "A",
+      assetIssuer: "GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN",
+      balance: "100",
+      balanceFloat: 100,
+    };
+    const { container } = render(<AssetBadge balance={oneCharBalance} />);
+    const icon = container.querySelector(".rounded-full");
+    expect(icon).toHaveClass("flex");
+    expect(icon).toHaveClass("items-center");
+    expect(icon).toHaveClass("justify-center");
+    expect(icon).toHaveClass("text-center");
+    expect(icon).toHaveClass("leading-none");
+    expect(icon?.textContent).toBe("A");
+  });
 });
 
 describe("AssetPill", () => {
@@ -98,11 +117,10 @@ describe("AssetPill", () => {
     expect(screen.getByText("USDC")).toHaveClass("text-brand");
   });
 
-  it("falls back to grey for an unknown asset code", () => {
+  it("applies deterministic color for an unknown asset code", () => {
     render(<AssetPill assetCode="WAVEX" />);
     const pill = screen.getByText("WAVEX");
-    expect(pill).toHaveClass("bg-surface-2");
-    expect(pill).toHaveClass("text-ink-2");
+    expect(pill).toHaveClass("text-purple");
   });
 
   it("merges a custom className", () => {

src/components/AssetBadge.test.tsx

@@ -2,16 +2,26 @@ import type { Balance } from "@/lib/client";
 import { cn } from "@/lib/utils";
 import { truncateAddress } from "@/lib/utils";
 
-const ASSET_COLORS: Record<string, { bg: string; text: string }> = {
-  XLM: { bg: "bg-[rgba(20,184,166,0.12)]", text: "text-teal" },
-  USDC: { bg: "bg-[rgba(86,69,212,0.12)]", text: "text-brand" },
-  USDT: { bg: "bg-success-dim-strong", text: "text-green" },
-  BTC: { bg: "bg-[rgba(249,115,22,0.12)]", text: "text-orange" },
-  ETH: { bg: "bg-[rgba(168,85,247,0.12)]", text: "text-purple" },
-};
+const PALETTE = [
+  { bg: "bg-success-dim-strong", text: "text-green" },                      // 0: USDT (hash % 10 = 0)
+  { bg: "bg-[rgba(20,184,166,0.12)]", text: "text-teal" },                  // 1: XLM (hash % 10 = 1)
+  { bg: "bg-error-dim", text: "text-red" },                                  // 2: Red
+  { bg: "bg-[rgba(86,69,212,0.12)]", text: "text-brand" },                  // 3: USDC (hash % 10 = 3)
+  { bg: "bg-[rgba(236,72,153,0.12)]", text: "text-[rgb(236,72,153)]" },      // 4: Pink
+  { bg: "bg-[rgba(168,85,247,0.12)]", text: "text-purple" },                 // 5: ETH / WAVEX (hash % 10 = 5)
+  { bg: "bg-[rgba(6,182,212,0.12)]", text: "text-[rgb(6,182,212)]" },        // 6: Cyan
+  { bg: "bg-[rgba(249,115,22,0.12)]", text: "text-orange" },                 // 7: BTC (hash % 10 = 7)
+  { bg: "bg-[rgba(234,179,8,0.12)]", text: "text-[rgb(234,179,8)]" },        // 8: Yellow
+  { bg: "bg-[rgba(99,102,241,0.12)]", text: "text-[rgb(99,102,241)]" },      // 9: Indigo
+];
 
 function getAssetColor(code: string) {
-  return ASSET_COLORS[code] ?? { bg: "bg-surface-2", text: "text-ink-2" };
+  let hash = 0;
+  for (let i = 0; i < code.length; i++) {
+    hash = code.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const index = Math.abs(hash) % 10;
+  return PALETTE[index];
 }
 
 interface AssetBadgeProps {
@@ -53,6 +63,7 @@ export function AssetBadge({
         className={cn(
           "rounded-full flex items-center justify-center font-bold shrink-0",
           iconSize,
+          "text-center leading-none",
           bg,
           text,
         )}

src/components/AssetBadge.tsx

@@ -47,13 +47,40 @@ describe("FeeEstimator", () => {
     expect(screen.getByText("Recommended")).toBeInTheDocument();
   });
 
-  it("renders the error message when the client returns an error", async () => {
-    mockEstimateFee({ data: null, error: "Rate limit exceeded" });
+  it("renders the error message and a retry button when the client returns an error", async () => {
+    let callCount = 0;
+    vi.mocked(getClient).mockReturnValue({
+      transaction: {
+        estimateFee: vi.fn().mockImplementation(() => {
+          callCount++;
+          if (callCount === 1) {
+            return Promise.resolve({ data: null, error: "Rate limit exceeded" });
+          } else {
+            return Promise.resolve({ data: { baseFee: "150", recommended: "600" }, error: null });
+          }
+        }),
+      },
+    } as unknown as SorokitClient);
+
     render(<FeeEstimator />);
 
+    // Initial check for error state
     await waitFor(() => {
       expect(screen.getByText("Rate limit exceeded")).toBeInTheDocument();
     });
+
+    const retryButton = screen.getByRole("button", { name: "Retry" });
+    expect(retryButton).toBeInTheDocument();
+
+    // Click retry
+    fireEvent.click(retryButton);
+
+    // Should resolve with new data, clearing the error
+    await waitFor(() => {
+      expect(screen.getByText("150")).toBeInTheDocument();
+      expect(screen.getByText("600")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Rate limit exceeded")).not.toBeInTheDocument();
   });
 
   it("clicking the refresh button triggers a new estimateFee call", async () => {

src/components/FeeEstimator.test.tsx

@@ -1,31 +1,42 @@
-import { Refresh01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { useCallback, useEffect, useState } from "react";
-
+import { useEffect, useState, useRef, useCallback } from "react";
 import { getClient } from "@/lib/client";
 import { cn } from "@/lib/utils";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Refresh01Icon } from "@hugeicons/core-free-icons";
 
-interface FeeData {
-  baseFee: string;
-  recommended: string;
-}
-
-interface FeeEstimatorProps {
+export interface FeeEstimatorProps {
+  operations?: number;
+  network?: "testnet" | "public";
+  onEstimate?: (fee: string) => void;
   className?: string;
-  /** Auto-refresh interval in ms. 0 = no refresh. */
   refreshInterval?: number;
 }
 
 export function FeeEstimator({
+  operations = 1,
+  network: _network = "testnet",
+  onEstimate,
   className,
-  refreshInterval = 0,
+  refreshInterval = 10000,
 }: FeeEstimatorProps) {
-  const [fee, setFee] = useState<FeeData | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [fee, setFee] = useState<{ baseFee: string; recommended: string } | null>(null);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [retryTrigger, setRetryTrigger] = useState(0);
+
+  const loadingRef = useRef(false);
+  const onEstimateRef = useRef(onEstimate);
+
+  // Update ref without triggering re-render
+  useEffect(() => {
+    onEstimateRef.current = onEstimate;
+  });
 
   const load = useCallback(async () => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
     setLoading(true);
+    setError(null);
     try {
       const { data, error: err } = await getClient().transaction.estimateFee();
       if (err) {
@@ -34,33 +45,62 @@ export function FeeEstimator({
       }
       setFee(data);
       setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load fee estimate");
     } finally {
       setLoading(false);
+      loadingRef.current = false;
     }
   }, []);
 
+  // Initial load and retry trigger
   useEffect(() => {
-    const timerId = window.setTimeout(() => {
+    let cancelled = false;
+    const doLoad = async () => {
+      if (!cancelled) {
+        await load();
+      }
+    };
+    void doLoad();
+    return () => {
+      cancelled = true;
+    };
+  }, [load, retryTrigger]);
+
+  // Interval manager
+  useEffect(() => {
+    if (refreshInterval <= 0 || error) return;
+
+    const intervalId = setInterval(() => {
       void load();
-    }, 0);
-    if (refreshInterval > 0) {
-      const id = setInterval(() => {
-        void load();
-      }, refreshInterval);
-      return () => {
-        window.clearTimeout(timerId);
-        clearInterval(id);
-      };
-    }
+    }, refreshInterval);
+
     return () => {
-      window.clearTimeout(timerId);
+      clearInterval(intervalId);
     };
-  }, [load, refreshInterval]);
+  }, [load, refreshInterval, error]);
+
+  // Handle onEstimate callback when recommended fee or operations changes
+  useEffect(() => {
+    if (fee?.recommended) {
+      const displayRecommended = (parseInt(fee.recommended) * operations).toString();
+      onEstimateRef.current?.(displayRecommended);
+    }
+  }, [fee?.recommended, operations]);
+
+  // Trigger manually or via retry
+  const handleRetry = useCallback(() => {
+    setRetryTrigger((prev) => prev + 1);
+  }, []);
+
+  // Calculate fees to display
+  const displayBaseFee = fee ? (parseInt(fee.baseFee) * operations).toString() : "";
+  const displayRecommended = fee ? (parseInt(fee.recommended) * operations).toString() : "";
 
   return (
     <div
       className={cn(
-        "rounded-xl border border-line bg-surface overflow-hidden",
+"rounded-xl border border-line bg-surface overflow-hidden relative",
         className,
       )}
     >
@@ -72,11 +112,11 @@ export function FeeEstimator({
           </p>
         </div>
         <button
-          onClick={() => void load()}
+onClick={handleRetry}
           disabled={loading}
+          aria-label="Refresh fee estimate"
           className="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors disabled:opacity-40"
           title="Refresh"
-          aria-label="Refresh fee estimate"
         >
           <HugeiconsIcon
             icon={Refresh01Icon}
@@ -88,21 +128,40 @@ export function FeeEstimator({
         </button>
       </div>
 
-      <div className="px-5 py-4" aria-live="polite" aria-atomic="true">
-        {loading && !fee ? (
-          <div className="flex gap-4">
-            <div className="h-8 w-24 rounded-lg bg-surface-2 animate-pulse" />
-            <div className="h-8 w-24 rounded-lg bg-surface-2 animate-pulse" />
+<div className="px-5 py-4 min-h-[64px] flex items-center">
+        {/* Polite live region for screen readers to announce fee updates */}
+        <div aria-live="polite" aria-atomic="true" className="sr-only">
+          {fee ? `Base Fee: ${displayBaseFee} stroops, Recommended: ${displayRecommended} stroops` : ""}
+        </div>
+
+        {loading && !fee && !error ? (
+          <div className="flex gap-4 animate-pulse w-full">
+            <div className="h-8 w-24 rounded-lg bg-surface-2" />
+            <div className="h-8 w-24 rounded-lg bg-surface-2" />
           </div>
         ) : error ? (
-          <p className="text-[12px] text-red">{error}</p>
+          <div className="flex flex-col gap-2 items-start w-full">
+            <p className="text-[12px] text-red">{error}</p>
+            <button
+              type="button"
+              onClick={handleRetry}
+              className="px-3 py-1.5 text-[11px] font-medium text-white bg-brand rounded-lg hover:bg-brand-hover transition-colors"
+            >
+              Retry
+            </button>
+          </div>
         ) : fee ? (
-          <div className="flex items-center gap-4">
-            <FeeCell label="Base Fee" value={fee.baseFee} unit="stroops" />
+          <div className="flex items-center gap-4 relative w-full">
+            {loading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-surface/50 backdrop-blur-[0.5px]">
+                <span className="w-4 h-4 border border-current border-t-transparent rounded-full animate-spin text-brand" />
+              </div>
+            )}
+            <FeeCell label="Base Fee" value={displayBaseFee} unit="stroops" />
             <div className="w-px h-8 bg-line" />
             <FeeCell
               label="Recommended"
-              value={fee.recommended}
+              value={displayRecommended}
               unit="stroops"
               highlight
             />
@@ -113,17 +172,19 @@ export function FeeEstimator({
   );
 }
 
+interface FeeCellProps {
+  label: string;
+  value: string;
+  unit: string;
+  highlight?: boolean;
+}
+
 function FeeCell({
   label,
   value,
   unit,
   highlight,
-}: {
-  label: string;
-  value: string;
-  unit: string;
-  highlight?: boolean;
-}) {
+}: FeeCellProps) {
   return (
     <div className="flex flex-col gap-1">
       <span className="text-[10px] font-semibold uppercase tracking-[0.1em] text-ink-4">