+
+
+ )}
+
+ {error && (
+ Loading tokens…
+
+
+ )}
+
+ {!loading && !error && Could not load token prices.
+Please refresh the page.
+
+
+ ⟡ Switcheo
+
+
+
+ {loading && (
+
+
+ );
+}
diff --git a/src/problem2/src/components/SwapForm.tsx b/src/problem2/src/components/SwapForm.tsx
new file mode 100644
index 0000000000..654dd7b539
--- /dev/null
+++ b/src/problem2/src/components/SwapForm.tsx
@@ -0,0 +1,161 @@
+import { useState } from "react";
+import type { FormEvent } from "react";
+import type { Token } from "../types";
+import { TokenSelect } from "./TokenSelect";
+import { computeReceiveAmount, formatAmount, formatRate } from "../lib/format";
+
+type SubmitState = "idle" | "loading" | "success";
+
+interface Props {
+ tokens: Token[];
+}
+
+export function SwapForm({ tokens }: Props) {
+ const [fromToken, setFromToken] = useState
+ {label}
+
+
+
+ {open && (
+
+ );
+}
diff --git a/src/problem2/src/hooks/usePrices.ts b/src/problem2/src/hooks/usePrices.ts
new file mode 100644
index 0000000000..9791b70084
--- /dev/null
+++ b/src/problem2/src/hooks/usePrices.ts
@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import type { Token } from "../types";
+import { fetchTokens } from "../lib/prices";
+
+interface PricesState {
+ loading: boolean;
+ tokens: Token[];
+ error: string | null;
+}
+
+/**
+ * Fetches the token list once on mount and exposes loading / error / data.
+ * The fetch is not retried automatically — a page refresh is the expected
+ * recovery path for a network error in this context.
+ */
+export function usePrices(): PricesState {
+ const [state, setState] = useState
+ setQuery(e.target.value)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus
+ />
+
+ )}
+ -
+ {filtered.length > 0 ? (
+ filtered.map((token) => (
+
- handleSelect(token)}
+ >
+
{ + (e.target as HTMLImageElement).style.display = "none"; + }} + /> + {token.symbol} +
+ ))
+ ) : (
+ - No tokens found + )} +
{rows}
;
+};
+
+export default WalletPage;
diff --git a/src/problem3/request.md b/src/problem3/request.md
new file mode 100644
index 0000000000..9ef59c383e
--- /dev/null
+++ b/src/problem3/request.md
@@ -0,0 +1,99 @@
+# Problem 3: Messy React
+
+## Task
+
+List out the computational inefficiencies and anti-patterns found in the code block below.
+
+This code block uses:
+- ReactJS with TypeScript
+- Functional components
+- React Hooks
+
+You should also provide a refactored version of the code, but more points are awarded to accurately stating the issues and explaining correctly how to improve them.
+
+## Original code
+
+```tsx
+interface WalletBalance {
+ currency: string;
+ amount: number;
+}
+interface FormattedWalletBalance {
+ currency: string;
+ amount: number;
+ formatted: string;
+}
+
+interface Props extends BoxProps {
+
+}
+const WalletPage: React.FC
+ {rows}
+
+ )
+}
+```