.
+
+
+ // --- Original (bad) ---
+ // const { children, ...rest } = props;
+
+ // --- Fixed: just spread rest; don't destructure unused vars ---
+ const { ...rest } = props;
+
+ const balances = useWalletBalances();
+ const prices = usePrices();
+
+
+ // Issue 7 (BUG): `lhsPriority` is a reference error
+ // Line 39 uses `lhsPriority` but the variable on line 38 is
+ // named `balancePriority`. This would crash at runtime with
+ // "ReferenceError: lhsPriority is not defined".
+ //
+ // Issue 8 (BUG): filter logic is inverted
+ // The condition `balance.amount <= 0` keeps wallets that are
+ // EMPTY or NEGATIVE. The clear intent is to show wallets
+ // that actually HAVE a balance (amount > 0).
+ //
+ // Issue 9: sort comparator returns `undefined` when equal
+ // When `leftPriority === rightPriority` neither branch runs,
+ // so the comparator returns `undefined` instead of `0`.
+ // Per the spec this produces implementation-defined order —
+ // a subtle, hard-to-debug inconsistency.
+ //
+ // Issue 10: `prices` is in the dependency array but not used
+ // inside the useMemo callback. Every time prices update the
+ // memo is invalidated and the whole filter+sort runs again
+ // for nothing — a wasted re-computation.
+ //
+ // Issue 11: `getPriority` (when inside component) is also a
+ // missing dependency — its reference changes every render,
+ // making the memo unreliable. Moving it outside (done above)
+ // solves this entirely.
+
+
+ // --- Original (bad) ---
+ // const sortedBalances = useMemo(() => {
+ // return balances.filter((balance: WalletBalance) => {
+ // const balancePriority = getPriority(balance.blockchain);
+ // if (lhsPriority > -99) { // undefined variable
+ // if (balance.amount <= 0) { // inverted logic
+ // return true;
+ // }
+ // }
+ // return false
+ // }).sort((lhs: WalletBalance, rhs: WalletBalance) => {
+ // const leftPriority = getPriority(lhs.blockchain);
+ // const rightPriority = getPriority(rhs.blockchain);
+ // if (leftPriority > rightPriority) {
+ // return -1;
+ // } else if (rightPriority > leftPriority) {
+ // return 1;
+ // }
+ // // missing return 0
+ // });
+ // }, [balances, prices]); // prices is unused, getPriority missing
+
+ // --- Fixed: correct variable name, correct filter logic,
+ // return 0 for equal, only `balances` in deps ---
+ const sortedBalances = useMemo(() => {
+ return balances
+ .filter((balance: WalletBalance) => {
+ const priority = getPriority(balance.blockchain);
+ // Keep only recognized blockchains (priority > -99) that
+ // actually hold a positive balance.
+ return priority > -99 && balance.amount > 0;
+ })
+ .sort((lhs: WalletBalance, rhs: WalletBalance) => {
+ return getPriority(rhs.blockchain) - getPriority(lhs.blockchain);
+ });
+ }, [balances]);
+
+
+ // Issue 12 (BUG): `formattedBalances` is computed but the
+ // `rows` mapping below iterates over `sortedBalances` instead,
+ // so the formatted data is thrown away and `balance.formatted`
+ // is always `undefined` in the JSX.
+ //
+ // Issue 13: `formattedBalances` is not memoized
+ // It's re-derived every render even when `sortedBalances`
+ // hasn't changed. We should either merge it into the existing
+ // useMemo or wrap it in its own.
+
+
+ // --- Original (bad) ---
+ // const formattedBalances = sortedBalances.map((balance: WalletBalance) => {
+ // return {
+ // ...balance,
+ // formatted: balance.amount.toFixed()
+ // }
+ // })
+
+ // --- Fixed: memoize, and we'll actually USE this below ---
+ const formattedBalances: FormattedWalletBalance[] = useMemo(() => {
+ return sortedBalances.map((balance) => ({
+ ...balance,
+ formatted: balance.amount.toFixed(2),
+ }));
+ }, [sortedBalances]);
+
+
+ // Issue 14 (BUG): `rows` maps over `sortedBalances` (WalletBalance[])
+ // but annotates each item as `FormattedWalletBalance`.
+ // This is a type lie — `balance.formatted` doesn't exist on
+ // `WalletBalance`, so `formattedAmount` is always undefined.
+ //
+ // Issue 15: Using array index as React `key`
+ // If the list is re-ordered, React can't tell which item is
+ // which and may incorrectly reuse DOM nodes, causing visual
+ // glitches or stale state. Use a unique stable id like
+ // `currency` instead.
+ //
+ // Issue 16: `classes.row` is never defined
+ // `classes` doesn't exist anywhere in scope. This would crash
+ // at runtime. Either import a stylesheet, use CSS modules, or
+ // use a plain className string.
+
+
+ // --- Original (bad) ---
+ // const rows = sortedBalances.map((balance: FormattedWalletBalance, index: number) => {
+ // const usdValue = prices[balance.currency] * balance.amount;
+ // return (
+ //
+ // )
+ // })
+
+ // --- Fixed: map formattedBalances, use currency as key,
+ // use a real className string ---
+ const rows = formattedBalances.map((balance: FormattedWalletBalance) => {
+ const usdValue = prices[balance.currency] * balance.amount;
+ return (
+
+ );
+ });
+
+ return
{rows}
;
+};