+
+ );
+ }
+
+ if (isError) {
+ return (
+
+
+
+ Loading currencies...
+
+
+ );
+ }
+
+ return (
+
+
+ + Error loading currency data. Please try again later. +
+
+
+ );
+}
+
+export default App;
diff --git a/src/problem2/src/assets/react.svg b/src/problem2/src/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/src/problem2/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/problem2/src/components/Button.tsx b/src/problem2/src/components/Button.tsx
new file mode 100644
index 000000000..97051e71e
--- /dev/null
+++ b/src/problem2/src/components/Button.tsx
@@ -0,0 +1,18 @@
+const Button = (props: {
+ onClick: () => void;
+ disabled: boolean;
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default Button;
diff --git a/src/problem2/src/components/Input.tsx b/src/problem2/src/components/Input.tsx
new file mode 100644
index 000000000..bca98efdc
--- /dev/null
+++ b/src/problem2/src/components/Input.tsx
@@ -0,0 +1,26 @@
+import { Input as ShadcnInput } from '@/components/ui/input';
+
+const Input = (props: {
+ onchange?: (value: string) => void;
+ className?: string;
+ placeholder?: string;
+ type: string;
+ value: string;
+ readOnly?: boolean;
+}) => {
+ return (
+
+
+
+
+
+ + 💱 Currency Exchange +
++ Real-time cryptocurrency conversion +
+
+
+
+
+
+
+
+
+ (
+ {}}
+ />
+ )}
+ />
+
+ {errors.amount && (
+
+ (
+
+ )}
+ />
+
+ + {errors.amount.message} +
+ )} + {fromCurrency === toCurrency && fromCurrency && toCurrency && ( ++ Cannot convert same currency +
+ )} + {fromCurrency && ( ++ 1 {fromCurrency} = ${fromPrice.toFixed(6)} USD +
+ )} +
+
+
+
+
+
+
+
+ {fromCurrency && toCurrency && (
+
+ (
+ {}}
+ />
+ )}
+ />
+
+
+
+ {isConverting && (
+
+
+
+
+ )}
+
+
+
+ Converting...
+
+
+
+
+ )}
+ + 1 {fromCurrency} = {(fromPrice / toPrice).toFixed(6)}{' '} + {toCurrency} +
+
+
+ + Available Currencies +
+
+ {currencies.map((token) => (
+
+
+ 
{
+ (e.target as HTMLImageElement).src =
+ 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3C/svg%3E';
+ }}
+ />
+
+ ))}
+
+
+ + {token.currency} +
++ ${token.price.toFixed(6)} +
+{rows}
;
+};
diff --git a/src/problem3/Test3_original.tsx b/src/problem3/Test3_original.tsx
new file mode 100644
index 000000000..c3e796182
--- /dev/null
+++ b/src/problem3/Test3_original.tsx
@@ -0,0 +1,90 @@
+interface WalletBalance {
+ currency: string;
+ amount: number;
+}
+// this can be extend with WalletBalance
+interface FormattedWalletBalance {
+ currency: string;
+ amount: number;
+ formatted: string;
+}
+
+interface Props extends BoxProps {}
+const WalletPage: React.FC{rows}
;
+};
diff --git a/src/problem3/WALLETPAGE_ISSUES.md b/src/problem3/WALLETPAGE_ISSUES.md
new file mode 100644
index 000000000..caf79c769
--- /dev/null
+++ b/src/problem3/WALLETPAGE_ISSUES.md
@@ -0,0 +1,98 @@
+# WalletPage — Issues & Fixes
+
+## Summary
+
+This document captures the runtime, TypeScript, performance, and React anti-pattern issues found in the `WalletPage` implementation and provides concrete recommendations and minimal code suggestions to fix them.
+
+---
+
+## 1) Critical Logic & Runtime Errors
+
+- **Undefined variable (`lhsPriority`)**
+
+ - Problem: A non-existent variable is referenced inside the `.filter` callback. This will throw at runtime.
+
+- **Inverted filter logic**
+
+ - Problem: The filter currently returns `true` for `balance.amount <= 0`, which includes empty or negative wallets and excludes positive balances.
+
+- **Property mismatch: missing `blockchain` on `WalletBalance`**
+
+ - Problem: The code uses `balance.blockchain` but the type `WalletBalance` in the original code did not declare `blockchain`.
+ - Fix: Add `blockchain: string` to `WalletBalance`.
+
+- **Missing sort fallback**
+
+ - Problem: The comparator does not explicitly return `0` when priorities are equal.
+
+---
+
+## 2) TypeScript & Type Safety Issues
+
+- **Use of `any` in `getPriority`**
+
+ - Problem: `getPriority(blockchain: any)` undermines type safety.
+
+- **Redundant interfaces**
+
+ - Problem: `FormattedWalletBalance` repeated `currency` and `amount`.
+
+- **Interface mismatch when mapping**
+ - Problem: Mapping `sortedBalances` (WalletBalance) as `FormattedWalletBalance` causes type errors because `formatted` doesn't exist yet.
+
+---
+
+## 3) Performance & Computational Issues
+
+- **Inefficient `useMemo` dependencies**
+
+ - Problem: Including `prices` in `useMemo` used for sorting causes re-sorts whenever prices update, even though prices don't affect order.
+
+- **Double mapping**
+
+ - Problem: First map to `formattedBalances`, then map again to create `rows` — two iterations.
+
+- **Re-defining `getPriority` per render**
+ - Problem: `getPriority` is declared inside the component body and re-created on each render.
+
+---
+
+## 4) React Best Practices & Anti-patterns
+
+- **Unstable keys (using index)**
+
+ - Problem: Using array index as `key` breaks reconciliation when the list reorders.
+ - Fix: Use a stable composite key, e.g., `${balance.blockchain}-${balance.currency}`.
+
+- **Missing precision control**
+
+ - Problem: `balance.amount.toFixed()` with no argument rounds to integer.
+
+- **Potentially undefined prices**
+ - Problem: `prices[balance.currency]` may be `undefined`, resulting in `NaN` when multiplied.
+
+## Fixes Applied
+
+1. Logic & Runtime Fixes
+
+- **Fixed Undefined Reference:** Replaced the non-existent `lhsPriority` with `balancePriority` to prevent runtime crashes.
+- **Corrected Filter Logic:** Changed the inverted `amount <= 0` check to `amount > 0` so wallets with positive balances are shown.
+- **Resolved Interface Mismatch:** Added `blockchain: string` to `WalletBalance` so `balance.blockchain` compiles correctly.
+
+2. Performance Optimizations
+
+- **Dependency Array Cleanup:** Removed `prices` from the `useMemo` dependency array used for sorting to avoid unnecessary re-sorts when prices change.
+- **Loop Consolidation:** Eliminated the redundant `.map()`; formatting and rendering are done in a single pass.
+- **Static Function Hoisting:** Moved `getPriority` outside the component to avoid re-allocating it on every render.
+
+3. TypeScript & Type Safety
+
+- **Eliminated `any`:** Changed the `blockchain` parameter type from `any` to `string` for better type safety.
+- **Interface Extension:** Documented that `FormattedWalletBalance` should extend `WalletBalance` if used.
+- **Accurate Mapping Type:** The final `.map()` uses `WalletBalance` and computes formatted values inline instead of pretending items already had a `formatted` field.
+
+4. User Experience (UX) & Stability
+
+- **Decimal Precision:** Added `.toFixed(6)` to preserve fractional amounts for crypto values.
+- **Stable React Keys:** Replaced index keys with `${balance.blockchain}-${balance.currency}` for stable reconciliation.
+- **NaN Prevention:** Used `(prices[balance.currency] || 0)` to avoid `NaN` when prices are missing.