`.
+// Callers that need both custom layout and rows should either compose at a parent level or
+// extend this component to render `props.children` explicitly next to `rows`.
+```
+
+---
+
+### 11. **`.sort()` Mutates the Array (Immutability)**
+
+`Array.prototype.sort` sorts in place. Mutating arrays owned by hooks or parents can cause subtle bugs.
+
+```ts
+// ❌ In-place sort on a shared or aliased array is risky
+
+// ✅ Use a non-mutating sort (`walletRowPipeline.ts`)
+// Requires `lib` including ES2023 Array (see repo `tsconfig.json`).
+.toSorted((a, b) => getPriority(b.blockchain) - getPriority(a.blockchain));
+```
+
+---
+
+### 12. **`prices[currency]` May Be `undefined` → `NaN` (Safety)**
+
+Multiplying `undefined * amount` yields `NaN`, which can propagate into the UI.
+
+```ts
+// ❌ NaN if currency not in prices
+const usdValue = prices[balance.currency] * balance.amount;
+
+// ✅ (`toWalletRowViewModel` in `walletRowPipeline.ts`)
+const unitUsd = prices[balance.currency] ?? 0;
+return { ...balance, formatted: balance.amount.toFixed(), usdValue: unitUsd * balance.amount };
+```
+
+---
+
+### 13. **`amount.toFixed()` — Decimal Precision (Code Quality)**
+
+`toFixed()` with no argument uses **0** decimal places. For money-like values, an explicit precision (e.g. `toFixed(2)`) is usually clearer.
+
+```ts
+// Current implementation (matches original behavior, easy to tighten later)
+formatted: balance.amount.toFixed();
+
+// Optional improvement
+formatted: balance.amount.toFixed(2);
+```
+
+---
+
+## Summary of Issues
+
+| # | Issue | Category |
+|---|-------|----------|
+| 1 | `lhsPriority` undefined — `ReferenceError` at runtime | Bug |
+| 2 | Filter logic inverted (`<= 0` kept bad balances) | Logic error |
+| 3 | `getPriority` recreated every render | Performance |
+| 4 | `blockchain: any` — no type safety | TypeScript |
+| 5 | `prices` dep mismatch / `usdValue` not aligned with memo | Performance / logic |
+| 6 | `formattedBalances` unused; `formatted` wrong | Bug / dead code |
+| 7 | Array index as React `key` | React anti-pattern |
+| 8 | `blockchain` missing from `WalletBalance` | TypeScript gap |
+| 9 | `sort` returned `undefined` for equal priorities | Edge case |
+| 10 | `children` not rendered (original) | Silent data loss |
+| 11 | `.sort()` mutates in place | Immutability |
+| 12 | Missing price → `NaN` | Safety |
+| 13 | `toFixed()` precision implicit | Code quality |
+
+---
+
+## Refactored Version (This Repo)
+
+Design choices in this submission:
+
+1. **Pure pipeline** — `buildWalletRowViewModels` in `walletRowPipeline.ts` has no React imports, so filter/sort/format/USD logic is **unit-testable** and reused from a single `useMemo` in `page.tsx`.
+2. **Stable module APIs** — priorities and `getPriority` live beside the model types instead of inside the component.
+3. **Immutability** — `toSorted` avoids mutating the filtered array (ES2023).
+
+### `models.ts` (types)
+
+```ts
+export type Blockchain =
+ | 'Osmosis'
+ | 'Ethereum'
+ | 'Arbitrum'
+ | 'Zilliqa'
+ | 'Neo'
+ | (string & {});
+
+export interface WalletBalance {
+ blockchain: Blockchain;
+ currency: string;
+ amount: number;
+}
+
+export interface FormattedWalletBalance extends WalletBalance {
+ formatted: string;
+}
+
+export interface WalletRowViewModel extends FormattedWalletBalance {
+ usdValue: number;
+}
+
+export type BoxProps = ComponentPropsWithoutRef<'div'>;
+```
+
+### `consts.ts` (priority table)
+
+```ts
+export const PRIORITY_BY_CHAIN: Readonly
>> = {
+ Osmosis: 100,
+ Ethereum: 50,
+ Arbitrum: 30,
+ Zilliqa: 20,
+ Neo: 20,
+};
+
+export const UNKNOWN_PRIORITY = -99;
+```
+
+### `walletRowPipeline.ts` (pure builder)
+
+```ts
+export function getPriority(chain: Blockchain): number {
+ return PRIORITY_BY_CHAIN[chain] ?? UNKNOWN_PRIORITY;
+}
+
+function isEligibleRow(priority: number, amount: number): boolean {
+ return priority > UNKNOWN_PRIORITY && amount > 0;
+}
+
+function toWalletRowViewModel(
+ balance: WalletBalance,
+ prices: Readonly>,
+): WalletRowViewModel {
+ const unitUsd = prices[balance.currency] ?? 0;
+ return {
+ ...balance,
+ formatted: balance.amount.toFixed(),
+ usdValue: unitUsd * balance.amount,
+ };
+}
+
+export const buildWalletRowViewModels = (
+ balances: readonly WalletBalance[],
+ prices: Readonly>,
+): WalletRowViewModel[] =>
+ balances
+ .filter((balance) => isEligibleRow(getPriority(balance.blockchain), balance.amount))
+ .toSorted((a, b) => getPriority(b.blockchain) - getPriority(a.blockchain))
+ .map((balance) => toWalletRowViewModel(balance, prices));
+```
+
+### `page.tsx` (React boundary)
+
+```tsx
+export function WalletPage(props: BoxProps) {
+ const balances = useWalletBalances();
+ const prices = usePrices();
+
+ const rows = useMemo((): ReactElement[] => {
+ const viewModels = buildWalletRowViewModels(balances, prices);
+ return viewModels.map((row) => (
+
+ ));
+ }, [balances, prices]);
+
+ return {rows}
;
+}
+```
+
+### `WalletRow.tsx` (presentational row)
+
+```tsx
+export function WalletRow({
+ className,
+ amount,
+ usdValue,
+ formattedAmount,
+}: WalletRowProps) {
+ return (
+
+ {formattedAmount}
+
+ );
+}
+```
+
+### `hooks.ts` (stubs)
+
+`useWalletBalances` and `usePrices` are placeholders for the real data layer (context, React Query, etc.).
+
+---
+
+## File map
+
+| File | Role |
+|------|------|
+| `models.ts` | `Blockchain`, `WalletBalance`, `WalletRowViewModel`, `BoxProps` |
+| `consts.ts` | `PRIORITY_BY_CHAIN`, `UNKNOWN_PRIORITY` |
+| `walletRowPipeline.ts` | `getPriority`, `buildWalletRowViewModels` |
+| `hooks.ts` | Data hooks (stubs) |
+| `page.tsx` | `WalletPage` + `useMemo` wiring |
+| `WalletRow.tsx` | Row UI |
diff --git a/src/problem3/WalletRow.tsx b/src/problem3/WalletRow.tsx
new file mode 100644
index 0000000000..aed19b07c6
--- /dev/null
+++ b/src/problem3/WalletRow.tsx
@@ -0,0 +1,19 @@
+export interface WalletRowProps {
+ className?: string;
+ amount: number;
+ usdValue: number;
+ formattedAmount: string;
+}
+
+export function WalletRow({
+ className,
+ amount,
+ usdValue,
+ formattedAmount,
+}: WalletRowProps) {
+ return (
+
+ {formattedAmount}
+
+ );
+}
diff --git a/src/problem3/consts.ts b/src/problem3/consts.ts
new file mode 100644
index 0000000000..54c24845af
--- /dev/null
+++ b/src/problem3/consts.ts
@@ -0,0 +1,11 @@
+import type { Blockchain } from './models';
+
+export const PRIORITY_BY_CHAIN: Readonly>> = {
+ Osmosis: 100,
+ Ethereum: 50,
+ Arbitrum: 30,
+ Zilliqa: 20,
+ Neo: 20,
+};
+
+export const UNKNOWN_PRIORITY = -99;
diff --git a/src/problem3/hooks.ts b/src/problem3/hooks.ts
new file mode 100644
index 0000000000..853ce0eaf0
--- /dev/null
+++ b/src/problem3/hooks.ts
@@ -0,0 +1,11 @@
+import type { WalletBalance } from './models';
+
+/** Replace with your app’s data layer (context, React Query, etc.). */
+export function useWalletBalances(): WalletBalance[] {
+ return [];
+}
+
+/** Replace with your price feed / store. */
+export function usePrices(): Readonly> {
+ return {};
+}
diff --git a/src/problem3/models.ts b/src/problem3/models.ts
new file mode 100644
index 0000000000..1dc5ea235f
--- /dev/null
+++ b/src/problem3/models.ts
@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export type Blockchain =
+ | 'Osmosis'
+ | 'Ethereum'
+ | 'Arbitrum'
+ | 'Zilliqa'
+ | 'Neo'
+ | (string & {});
+
+export interface WalletBalance {
+ blockchain: Blockchain;
+ currency: string;
+ amount: number;
+}
+
+export interface FormattedWalletBalance extends WalletBalance {
+ formatted: string;
+}
+
+/** Row-ready data: formatted amount + derived USD for one balance. */
+export interface WalletRowViewModel extends FormattedWalletBalance {
+ usdValue: number;
+}
+
+export type BoxProps = ComponentPropsWithoutRef<'div'>;
diff --git a/src/problem3/page.tsx b/src/problem3/page.tsx
new file mode 100644
index 0000000000..e7ece8f19c
--- /dev/null
+++ b/src/problem3/page.tsx
@@ -0,0 +1,25 @@
+import { useMemo, type ReactElement } from 'react';
+import { usePrices, useWalletBalances } from './hooks';
+import type { BoxProps } from './models';
+import { WalletRow } from './WalletRow';
+import { buildWalletRowViewModels } from './walletRowPipeline';
+
+export function WalletPage(props: BoxProps) {
+ const balances = useWalletBalances();
+ const prices = usePrices();
+
+ const rows = useMemo((): ReactElement[] => {
+ const viewModels = buildWalletRowViewModels(balances, prices);
+ return viewModels.map((row) => (
+
+ ));
+ }, [balances, prices]);
+
+ return {rows}
;
+}
diff --git a/src/problem3/walletRowPipeline.ts b/src/problem3/walletRowPipeline.ts
new file mode 100644
index 0000000000..b6f0060ca4
--- /dev/null
+++ b/src/problem3/walletRowPipeline.ts
@@ -0,0 +1,36 @@
+import { UNKNOWN_PRIORITY, PRIORITY_BY_CHAIN } from './consts';
+import type { Blockchain, WalletBalance, WalletRowViewModel } from './models';
+
+
+export function getPriority(chain: Blockchain): number {
+ return PRIORITY_BY_CHAIN[chain] ?? UNKNOWN_PRIORITY;
+}
+
+function isEligibleRow(priority: number, amount: number): boolean {
+ return priority > UNKNOWN_PRIORITY && amount > 0;
+}
+
+function toWalletRowViewModel(
+ balance: WalletBalance,
+ prices: Readonly>,
+): WalletRowViewModel {
+ const unitUsd = prices[balance.currency] ?? 0;
+ return {
+ ...balance,
+ formatted: balance.amount.toFixed(),
+ usdValue: unitUsd * balance.amount,
+ };
+}
+
+/**
+ * Pure pipeline: filter by chain priority + positive amount, sort by priority,
+ * attach formatted amount and USD. Keeps React out so this stays easy to unit test.
+ */
+export const buildWalletRowViewModels = (
+ balances: readonly WalletBalance[],
+ prices: Readonly>,
+): WalletRowViewModel[] => balances
+ .filter((balance) => isEligibleRow(getPriority(balance.blockchain), balance.amount))
+ .toSorted((a, b) => getPriority(b.blockchain) - getPriority(a.blockchain) )
+ .map((balance ) => toWalletRowViewModel(balance, prices));
+
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..fad34b0e79
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2022", "ES2023.Array", "DOM", "DOM.Iterable"],
+ "jsx": "react-jsx",
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "strict": true,
+ "skipLibCheck": true,
+ "noEmit": true,
+ "isolatedModules": true,
+ "verbatimModuleSyntax": true
+ },
+ "include": ["src/**/*.ts", "src/**/*.tsx", "vitest.config.ts"]
+}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000000..8940065fb2
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+ test: {
+ globals: false,
+ include: ["src/**/*.test.ts"],
+ },
+});