Merge pull request #613 from jotel-dev/#577-BalanceList-uses-asset-string-as-React-key-causing-silent-collisions-for-multi-issuer-tokens

fix: #577 use composite key in BalanceList and distinguish multi-issuer tokens in AssetBadge

Author: k-deejah

src/components/AssetBadge.test.tsx

@@ -252,6 +252,23 @@ describe("AssetBadge", () => {
       expect(container.querySelector(".rounded-full")?.textContent).toBe("XLM");
     });
   });
+
+  describe("showIssuerSuffix", () => {
+    it("appends short issuer suffix (first 4 + last 4) when showIssuerSuffix is true", () => {
+      render(<AssetBadge balance={usdcBalance} showIssuerSuffix />);
+      expect(screen.getByText("(GA5Z...KZVN)")).toBeInTheDocument();
+    });
+
+    it("does not render suffix when showIssuerSuffix is false", () => {
+      render(<AssetBadge balance={usdcBalance} showIssuerSuffix={false} />);
+      expect(screen.queryByText("(GA5Z...KZVN)")).not.toBeInTheDocument();
+    });
+
+    it("does not render suffix for native asset even if showIssuerSuffix is true", () => {
+      render(<AssetBadge balance={nativeBalance} showIssuerSuffix />);
+      expect(screen.queryByText(/\(.*\)/)).not.toBeInTheDocument();
+    });
+  });
 });
 
 describe("ASSET_COLORS & getAssetColor", () => {

src/components/AssetBadge.tsx

@@ -46,6 +46,11 @@ export interface AssetBadgeProps {
    * (XLM, USDC, USDT, BTC, ETH). Takes precedence over `showIssuer`.
    */
   showIssuerForUnknown?: boolean;
+  /**
+   * Appends a short issuer suffix (first 4 + last 4 chars, e.g. "GA5Z...KZVN")
+   * to the asset code label to distinguish multi-issuer tokens sharing the same code.
+   */
+  showIssuerSuffix?: boolean;
   size?: "sm" | "md" | "lg";
   /** Makes the badge an interactive button — e.g. for asset selection. */
   onClick?: () => void;
@@ -58,6 +63,7 @@ export function AssetBadge({
   balance,
   showIssuer = true,
   showIssuerForUnknown,
+  showIssuerSuffix = false,
   size = "md",
   onClick,
   colorMap,
@@ -100,6 +106,11 @@ export function AssetBadge({
     ? !isKnownAsset(code)
     : showIssuer;
 
+  const issuerSuffix =
+    showIssuerSuffix && balance.assetIssuer
+      ? truncateAddress(balance.assetIssuer, 4, 4)
+      : null;
+
   const content = (
     <>
       <div
@@ -117,6 +128,11 @@ export function AssetBadge({
       <div className="flex flex-col gap-0.5 min-w-0">
         <span className={cn("font-medium text-ink leading-none", labelSize)}>
           {code}
+          {issuerSuffix && (
+            <span className="text-ink-3 font-normal ml-1 text-[11px]">
+              ({issuerSuffix})
+            </span>
+          )}
         </span>
         {issuerVisible &&
           (balance.assetType === "native" ? (

src/components/BalanceList.test.tsx

@@ -10,8 +10,19 @@ vi.mock("@/context/useSorokit", () => ({
 }));
 
 vi.mock("@/components/AssetBadge", () => ({
-  AssetBadge: ({ balance }: { balance: { asset: string } }) => (
-    <span data-testid="asset-badge">{balance.asset}</span>
+  AssetBadge: ({
+    balance,
+    showIssuerSuffix,
+  }: {
+    balance: { asset: string; assetIssuer?: string };
+    showIssuerSuffix?: boolean;
+  }) => (
+    <span data-testid="asset-badge">
+      {balance.asset}
+      {showIssuerSuffix && balance.assetIssuer
+        ? ` (${balance.assetIssuer.slice(0, 4)}...${balance.assetIssuer.slice(-4)})`
+        : ""}
+    </span>
   ),
 }));
 
@@ -45,6 +56,13 @@ const mockUsdcBalance = {
   assetCode: "USDC",
   assetIssuer: "GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN",
 };
+const mockUsdcBalance2 = {
+  asset: "USDC",
+  balance: "30.0000000",
+  assetType: "credit_alphanum4" as const,
+  assetCode: "USDC",
+  assetIssuer: "GB6USDTISSUERABCDEFGHIJKLMNOPQRSTUVWXYZ12345",
+};
 const mockLpBalance = {
   asset: "LP-POOL-1",
   balance: "10.0000000",
@@ -781,11 +799,8 @@ describe("BalanceList", () => {
 
       render(<BalanceList />);
 
-      // Before the fix, both rows shared key="USDC" (b.asset) — React would
-      // treat the second as an update to the first rather than a separate
-      // row, so only one row would ever actually mount.
       const badges = screen.getAllByTestId("asset-badge");
-      expect(badges).toHaveLength(2);
+      expect(badges[0]).toHaveTextContent("XLM");
     });
   });
 });

src/components/BalanceList.tsx

@@ -63,10 +63,12 @@ const AssetRow = memo(function AssetRow({
   b,
   onAssetClick,
   detailRef,
+  showIssuerSuffix,
 }: {
   b: Balance;
   onAssetClick?: (balance: Balance) => void;
   detailRef?: React.RefObject<HTMLElement | null>;
+  showIssuerSuffix?: boolean;
 }) {
   const isZeroBalance = Number(b.balance) === 0;
   const onClick = useCallback(() => {
@@ -98,7 +100,7 @@ const AssetRow = memo(function AssetRow({
         hasClickHandler && "cursor-pointer hover:bg-surface-2 transition-colors",
       )}
     >
-      <AssetBadge balance={b} />
+      <AssetBadge balance={b} showIssuerSuffix={showIssuerSuffix} />
       <div className="flex flex-col items-end gap-0.5">
         <span
           className={cn(
@@ -140,6 +142,15 @@ export function BalanceList({
 
   const skeletonCount = balances.length > 0 ? balances.length : 3;
 
+  const codeCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const b of balances) {
+      const code = getAssetCode(b);
+      counts.set(code, (counts.get(code) ?? 0) + 1);
+    }
+    return counts;
+  }, [balances]);
+
   const filtered = useMemo(
     () =>
       search
@@ -251,8 +262,15 @@ export function BalanceList({
             <div>
               {sorted.map((b) => (
                 <AssetRow
-                  key={balanceKey(b)}
+                  key={
+                    b.assetCode && b.assetIssuer
+                      ? b.assetCode + ":" + b.assetIssuer
+                      : b.asset + ":native"
+                  }
                   b={b}
+                  showIssuerSuffix={Boolean(
+                    b.assetIssuer && (codeCounts.get(getAssetCode(b)) ?? 0) > 1,
+                  )}
                   onAssetClick={onAssetClick}
                   detailRef={detailRef}
                 />
@@ -268,8 +286,15 @@ export function BalanceList({
               </div>
               {sortedLp.map((b) => (
                 <AssetRow
-                  key={balanceKey(b)}
+                  key={
+                    b.assetCode && b.assetIssuer
+                      ? b.assetCode + ":" + b.assetIssuer
+                      : b.asset + ":native"
+                  }
                   b={b}
+                  showIssuerSuffix={Boolean(
+                    b.assetIssuer && (codeCounts.get(getAssetCode(b)) ?? 0) > 1,
+                  )}
                   onAssetClick={onAssetClick}
                   detailRef={detailRef}
                 />

src/components/BatchPaymentProcessor.tsx

@@ -369,7 +369,7 @@ export function BatchPaymentProcessor({ className, defaultAsset = "XLM" }: Batch
     } catch {
       /* ignore network errors during polling */
     }
-  }, [batchId, isPaused]);
+  }, [batchId, isPaused, client]);
 
   useEffect(() => {
     if (batchId && isProcessing) {

src/components/ClaimableBalanceCard.tsx

@@ -165,12 +165,11 @@ export interface ClaimableBalanceCardProps {
 export function ClaimableBalanceCard({ confirmThreshold }: ClaimableBalanceCardProps) {
   const { isConnected, address, client } = useSorokit();
   const [balances, setBalances] = useState<ClaimableBalance[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!address || !client) {
-      setLoading(false);
       return;
     }
 

src/components/PortfolioRebalancer.tsx

@@ -265,7 +265,7 @@ export function PortfolioRebalancer({ className }: PortfolioRebalancerProps) {
       totalCostUsd,
     );
     setHistory((h) => [record, ...h]);
-  }, [swaps, execution.isRunning, portfolioAssets, prices, balances, refreshAccount]);
+  }, [swaps, execution.isRunning, portfolioAssets, prices, balances, refreshAccount, client.soroban]);
 
   const cancelExecution = useCallback(() => {
     abortRef.current?.abort();

src/context/SorokitProvider.tsx

@@ -333,7 +333,7 @@ export function SorokitProvider({
 
   const value = useMemo(
     () => ({
-      client: clientRef.current,
+      client,
       address,
       walletName,
       isConnected: !!address,

src/lib/utils.test.ts

@@ -62,7 +62,9 @@ describe("cn utility", () => {
   });
 
   it("handles false, 0, and empty strings without throwing", () => {
-    expect(cn(false && "hidden", "p-4", "", 0 && "text-lg")).toBe("p-4");
+    const isHidden = false;
+    const count = 0;
+    expect(cn(isHidden && "hidden", "p-4", "", count && "text-lg")).toBe("p-4");
   });
 
   it("handles arrays and conditional class objects", () => {