{active.component}
+
+ {/* Hidden input for react-hook-form ref */}
+
+
+ {/* Trigger button */}
+
+
+ {/* Popover */}
+
+ )
+ },
+)
+
+TokenSelector.displayName = 'TokenSelector'
+
+export default TokenSelector
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000000..3259cfefa1
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,59 @@
+@import "tailwindcss";
+
+:root {
+ --text: #6b6375;
+ --text-h: #08060d;
+ --bg: #fff;
+ --border: #e5e4e7;
+ --code-bg: #f4f3ec;
+ --accent: #0e8cfa;
+ --accent-bg: rgba(59, 92, 255, 0.1);
+ --accent-border: rgba(142, 168, 225, 0.5);
+ --social-bg: rgba(244, 243, 236, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+ --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --mono: ui-monospace, Consolas, monospace;
+
+ font: 18px/145% var(--sans);
+ letter-spacing: 0.18px;
+ color-scheme: light dark;
+ color: var(--text);
+ background: var(--bg);
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ @media (max-width: 1024px) {
+ font-size: 16px;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text: #9ca3af;
+ --text-h: #f3f4f6;
+ --bg: #16171d;
+ --border: #2e303a;
+ --code-bg: #1f2028;
+ --accent: #c084fc;
+ --accent-bg: rgba(192, 132, 252, 0.15);
+ --accent-border: rgba(192, 132, 252, 0.5);
+ --social-bg: rgba(47, 48, 58, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+ }
+}
+
+#root {
+ min-height: 100svh;
+ display: flex;
+ flex-direction: column;
+}
+
+body {
+ margin: 0;
+}
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
new file mode 100644
index 0000000000..2cdc62fd3c
--- /dev/null
+++ b/src/lib/i18n.ts
@@ -0,0 +1,51 @@
+const messages: Record
+ {/* Search */}
+
+
+ setSearch(e.target.value)}
+ placeholder="Search token..."
+ className={[
+ 'w-full px-3 py-1.5 rounded-lg text-sm bg-(--code-bg)',
+ 'text-(--text-h) placeholder:text-(--text)',
+ 'border border-transparent focus:outline-none focus:border-(--accent)',
+ 'transition-colors duration-150',
+ ].join(' ')}
+ />
+
+
+ {/* List */}
+ -
+ {filtered.length === 0
+ ? (
+
- + No tokens found + + ) + : filtered.map((token) => { + const isSelected = token.symbol === value + const isDisabled = token.symbol === disabledSymbol + + return ( +
- selectToken(token.symbol)}
+ className={[
+ 'flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors duration-100',
+ isDisabled
+ ? 'opacity-40 cursor-not-allowed'
+ : isSelected
+ ? 'bg-(--accent-bg) text-(--accent)'
+ : 'hover:bg-(--code-bg)',
+ ].join(' ')}
+ >
+
{ (e.currentTarget as HTMLImageElement).style.display = 'none' }} + /> +
+ + {token.symbol} + ++ + ${token.price.toLocaleString('en-US', { maximumFractionDigits: 4 })} + + {isSelected && ( + + )} +
+ )
+ })}
+
+
+
+
+ {/* solution preview */}
+
+ )
+}
diff --git a/src/problems/problem1/problem1_solution.png b/src/problems/problem1/problem1_solution.png
new file mode 100644
index 0000000000..d85fe5c4a8
Binary files /dev/null and b/src/problems/problem1/problem1_solution.png differ
diff --git a/src/problems/problem1/solutions.test.ts b/src/problems/problem1/solutions.test.ts
new file mode 100644
index 0000000000..5aad9d4d96
--- /dev/null
+++ b/src/problems/problem1/solutions.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+import { sum_to_n_a, sum_to_n_b, sum_to_n_c } from './solutions'
+
+// ── sum_to_n_a (Gaussian closed-form) ────────────────────────────────────────
+describe('sum_to_n_a', () => {
+ it('returns expected output for typical input', () => {
+ expect(sum_to_n_a(5)).toBe(15)
+ })
+
+ it('returns neutral value for zero input', () => {
+ expect(sum_to_n_a(0)).toBe(0)
+ })
+
+ it('returns neutral value for negative input', () => {
+ expect(sum_to_n_a(-3)).toBe(0)
+ })
+
+ it('handles minimum valid input', () => {
+ expect(sum_to_n_a(1)).toBe(1)
+ })
+
+ it('handles input at the upper boundary', () => {
+ expect(sum_to_n_a(1000)).toBe(500500)
+ })
+})
+
+// ── sum_to_n_b (iterative loop) ───────────────────────────────────────────────
+describe('sum_to_n_b', () => {
+ it('returns expected output for typical input', () => {
+ expect(sum_to_n_b(5)).toBe(15)
+ })
+
+ it('returns neutral value for zero input', () => {
+ expect(sum_to_n_b(0)).toBe(0)
+ })
+
+ it('returns neutral value for negative input', () => {
+ expect(sum_to_n_b(-3)).toBe(0)
+ })
+
+ it('handles minimum valid input', () => {
+ expect(sum_to_n_b(1)).toBe(1)
+ })
+
+ it('handles input at the upper boundary', () => {
+ expect(sum_to_n_b(1000)).toBe(500500)
+ })
+})
+
+// ── sum_to_n_c (recursion) ────────────────────────────────────────────────────
+describe('sum_to_n_c', () => {
+ it('returns expected output for typical input', () => {
+ expect(sum_to_n_c(5)).toBe(15)
+ })
+
+ it('returns neutral value for zero input', () => {
+ expect(sum_to_n_c(0)).toBe(0)
+ })
+
+ it('returns neutral value for negative input', () => {
+ expect(sum_to_n_c(-3)).toBe(0)
+ })
+
+ it('handles minimum valid input', () => {
+ expect(sum_to_n_c(1)).toBe(1)
+ })
+
+ it('handles input at the upper boundary', () => {
+ expect(sum_to_n_c(1000)).toBe(500500)
+ })
+})
+
+// ── Parity ────────────────────────────────────────────────────────────────────
+describe('parity across all three implementations', () => {
+ it('all implementations produce the same output', () => {
+ const inputs = [1, 2, 5, 10, 100, 1000]
+ for (const input of inputs) {
+ expect(sum_to_n_b(input)).toBe(sum_to_n_a(input))
+ expect(sum_to_n_c(input)).toBe(sum_to_n_a(input))
+ }
+ })
+})
diff --git a/src/problems/problem1/solutions.ts b/src/problems/problem1/solutions.ts
new file mode 100644
index 0000000000..ffaf7602a6
--- /dev/null
+++ b/src/problems/problem1/solutions.ts
@@ -0,0 +1,30 @@
+// ── Implementation A: Gaussian closed-form formula O(1) ──────────────────────
+export const sum_to_n_a = (n: number): number => {
+ if (n <= 0) {
+ return 0
+ }
+ return (n * (n + 1)) / 2
+}
+
+// ── Implementation B: Iterative loop O(n) ────────────────────────────────────
+export const sum_to_n_b = (n: number): number => {
+ if (n <= 0) {
+ return 0
+ }
+ let sum = 0
+ for (let i = 1; i <= n; i++) {
+ sum += i
+ }
+ return sum
+}
+
+// ── Implementation C: Recursion O(n) ─────────────────────────────────────────
+export const sum_to_n_c = (n: number): number => {
+ if (n <= 0) {
+ return 0
+ }
+ if (n === 1) {
+ return 1
+ }
+ return n + sum_to_n_c(n - 1)
+}
diff --git a/src/problems/problem2/index.tsx b/src/problems/problem2/index.tsx
new file mode 100644
index 0000000000..15f0ce4125
--- /dev/null
+++ b/src/problems/problem2/index.tsx
@@ -0,0 +1,468 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import Task from '../../components/Task';
+import TokenSelector from '../../components/TokenSelector';
+import { t } from '../../lib/i18n';
+import {
+ normalizeTokenPrices,
+ fetchTokenPrices,
+ simulateSwap,
+ formatAmount,
+} from './logic';
+import { useSwapForm } from './useSwapForm';
+import type { SwapRecord } from './types';
+
+// ── Skeleton ───────────────────────────────────────────────────────────────
+const FieldSkeleton = () => (
+
+);
+
+// ── History item ───────────────────────────────────────────────────────────
+const HistoryItem = ({ record }: { record: SwapRecord }) => (
+ Provide 3 unique implementations of the following function in JavaScript.
+Input: n - any integer. Assuming this input will always produce a result lesser than Number.MAX_SAFE_INTEGER.
+Output: return - summation to n, i.e. sum_to_n(5) === 1 + 2 + 3 + 4 + 5 === 15.
+
+ {`var sum_to_n_a = function(n) { // your code here };
+var sum_to_n_b = function(n) { // your code here };
+var sum_to_n_c = function(n) { // your code here };`}
+
+
+ 
+
+
+
+
+ {/* result */}
+ {result && resultMethod && (
+ + Solution Preview +
+
+
+ )}
+ + {t('result.heading')} +
++ {t('result.expression', { n: result.n, value: result.value })} +
+
+ {t('result.reference')}
+
+
+ {resultMethod.path}:{resultMethod.line}
+
+
+
+
+ Done
+
+ + {formatAmount(record.fromAmount)} {record.fromSymbol} + {' → '} + {formatAmount(record.toAmount)} {record.toSymbol} +
++ 1 {record.fromSymbol} = {formatAmount(record.rate)} {record.toSymbol} + {' · '} + {record.timestamp.toLocaleTimeString()} +
+
+ {/* ── Task statement ─────────────────────────────────────────────── */}
+
+
+
+ {/* ── Form card ──────────────────────────────────────────────────── */}
+
+ );
+}
diff --git a/src/problems/problem2/logic.test.ts b/src/problems/problem2/logic.test.ts
new file mode 100644
index 0000000000..8b29746727
--- /dev/null
+++ b/src/problems/problem2/logic.test.ts
@@ -0,0 +1,257 @@
+import { describe, expect, it } from 'vitest'
+import {
+ bankersRound,
+ formatAmount,
+ computeRate,
+ computeToAmount,
+ normalizeTokenPrices,
+} from './logic'
+import type { TokenInfo, TokenPrice } from './types'
+
+// ── bankersRound ──────────────────────────────────────────────────────────────
+describe('bankersRound', () => {
+ it('rounds a typical value to the specified decimal places', () => {
+ expect(bankersRound(1.2345, 2)).toBe(1.23)
+ })
+
+ it('rounds an exactly halfway value down when the floor digit is even', () => {
+ // floor digit is 2 (even) → round down: 2.5 → 2
+ expect(bankersRound(2.5, 0)).toBe(2)
+ })
+
+ it('rounds an exactly halfway value up when the floor digit is odd', () => {
+ // floor digit is 3 (odd) → round up: 3.5 → 4
+ expect(bankersRound(3.5, 0)).toBe(4)
+ })
+
+ it('rounds a halfway value at decimal precision with even floor digit down', () => {
+ // 2.45 at 1dp: floor digit at that position is 4 (even) → 2.4
+ expect(bankersRound(2.45, 1)).toBe(2.4)
+ })
+
+ it('rounds a halfway value at decimal precision with odd floor digit up', () => {
+ // 2.35 at 1dp: floor digit at that position is 3 (odd) → 2.4
+ expect(bankersRound(2.35, 1)).toBe(2.4)
+ })
+
+ it('returns zero unchanged', () => {
+ expect(bankersRound(0, 4)).toBe(0)
+ })
+
+ it('handles zero decimal places', () => {
+ expect(bankersRound(7.3, 0)).toBe(7)
+ expect(bankersRound(7.7, 0)).toBe(8)
+ })
+
+ it('handles a large number with high decimal precision', () => {
+ expect(bankersRound(123456.123456, 2)).toBe(123456.12)
+ })
+
+ it('handles a very small number near zero', () => {
+ expect(bankersRound(0.000001234, 8)).toBe(0.00000123)
+ })
+})
+
+// ── formatAmount ──────────────────────────────────────────────────────────────
+describe('formatAmount', () => {
+ it('formats a typical medium-range value with 6 decimal places', () => {
+ expect(formatAmount(12.3456789)).toBe('12.345679')
+ })
+
+ it('returns 0 for a zero value', () => {
+ expect(formatAmount(0)).toBe('0')
+ })
+
+ it('formats a large value (above 100 000) with 2 decimal places', () => {
+ expect(formatAmount(150000.5678)).toBe('150,000.57')
+ })
+
+ it('formats a value in the thousands range with 4 decimal places', () => {
+ expect(formatAmount(1234.56789)).toBe('1,234.5679')
+ })
+
+ it('formats a small value below 1 with 8 decimal places', () => {
+ expect(formatAmount(0.123456789)).toBe('0.12345679')
+ })
+
+ it('formats a very small value below 0.0001 with extended precision', () => {
+ const result = formatAmount(0.00000123)
+ // should preserve at least 5 significant digits past the leading zeros
+ expect(result).toBe('0.00000123')
+ })
+
+ it('adds a thousands separator for large values', () => {
+ expect(formatAmount(1000000)).toBe('1,000,000')
+ })
+
+ it('applies banker\'s rounding, not plain round-half-up', () => {
+ // 2.5 rounds to 2 (even), not 3
+ expect(bankersRound(2.5, 0)).toBe(2)
+ // 3.5 rounds to 4 (even), not 3
+ expect(bankersRound(3.5, 0)).toBe(4)
+ })
+})
+
+// ── computeRate ───────────────────────────────────────────────────────────────
+const makeToken = (symbol: string, price: number): TokenInfo => ({
+ symbol,
+ price,
+ imageUrl: `https://example.com/${symbol}.svg`,
+})
+
+describe('computeRate', () => {
+ it('returns the correct rate between two tokens', () => {
+ const eth = makeToken('ETH', 2000)
+ const usdt = makeToken('USDT', 1)
+ // 1 ETH = 2000 USDT
+ expect(computeRate(eth, usdt)).toBe(2000)
+ })
+
+ it('returns the inverse rate when token order is reversed', () => {
+ const eth = makeToken('ETH', 2000)
+ const usdt = makeToken('USDT', 1)
+ // 1 USDT = 0.0005 ETH
+ expect(computeRate(usdt, eth)).toBe(0.0005)
+ })
+
+ it('returns 1 when both tokens have the same price', () => {
+ const a = makeToken('A', 500)
+ const b = makeToken('B', 500)
+ expect(computeRate(a, b)).toBe(1)
+ })
+
+ it('returns null when the from token is undefined', () => {
+ const usdt = makeToken('USDT', 1)
+ expect(computeRate(undefined, usdt)).toBeNull()
+ })
+
+ it('returns null when the to token is undefined', () => {
+ const eth = makeToken('ETH', 2000)
+ expect(computeRate(eth, undefined)).toBeNull()
+ })
+
+ it('returns null when both tokens are undefined', () => {
+ expect(computeRate(undefined, undefined)).toBeNull()
+ })
+
+ it('returns null when the from token has a zero price', () => {
+ const broken = makeToken('BROKEN', 0)
+ const usdt = makeToken('USDT', 1)
+ expect(computeRate(broken, usdt)).toBeNull()
+ })
+
+ it('returns null when the to token has a zero price', () => {
+ const eth = makeToken('ETH', 2000)
+ const broken = makeToken('BROKEN', 0)
+ expect(computeRate(eth, broken)).toBeNull()
+ })
+})
+
+// ── computeToAmount ───────────────────────────────────────────────────────────
+describe('computeToAmount', () => {
+ it('returns the correctly formatted output for a typical conversion', () => {
+ // 10 ETH at rate 2000 = 20 000 USDT → large value, 4 dp
+ const result = computeToAmount('10', 2000)
+ expect(result).toBe('20,000')
+ })
+
+ it('returns an empty string when fromAmount is empty', () => {
+ expect(computeToAmount('', 2000)).toBe('')
+ })
+
+ it('returns an empty string when rate is null', () => {
+ expect(computeToAmount('10', null)).toBe('')
+ })
+
+ it('returns an empty string when fromAmount is zero', () => {
+ expect(computeToAmount('0', 2000)).toBe('')
+ })
+
+ it('returns an empty string when fromAmount is negative', () => {
+ expect(computeToAmount('-5', 2000)).toBe('')
+ })
+
+ it('returns an empty string when fromAmount is not a number', () => {
+ expect(computeToAmount('abc', 2000)).toBe('')
+ })
+
+ it('handles a fractional fromAmount', () => {
+ // 0.5 ETH at rate 2000 = 1000 USDT
+ expect(computeToAmount('0.5', 2000)).toBe('1,000')
+ })
+
+ it('handles a rate that produces a very small result', () => {
+ // 1 USDT at rate 0.0005 = 0.0005 ETH → small value, 8 dp
+ const result = computeToAmount('1', 0.0005)
+ expect(result).toBe('0.0005')
+ })
+
+ it('handles a minimum fromAmount of 0.000001', () => {
+ const result = computeToAmount('0.000001', 1)
+ expect(result).not.toBe('')
+ })
+})
+
+// ── normalizeTokenPrices ──────────────────────────────────────────────────────
+describe('normalizeTokenPrices', () => {
+ const makeRaw = (
+ currency: string,
+ price: number,
+ date = '2024-01-01T00:00:00Z',
+ ): TokenPrice => ({ currency, price, date })
+
+ it('returns a token list sorted alphabetically by symbol', () => {
+ const raw = [makeRaw('USDT', 1), makeRaw('ETH', 2000), makeRaw('BTC', 50000)]
+ const result = normalizeTokenPrices(raw)
+ const symbols = result.map((t) => t.symbol)
+ expect(symbols).toEqual(['BTC', 'ETH', 'USDT'])
+ })
+
+ it('filters out entries with a zero price', () => {
+ const raw = [makeRaw('ETH', 2000), makeRaw('BROKEN', 0)]
+ const result = normalizeTokenPrices(raw)
+ expect(result.map((t) => t.symbol)).toEqual(['ETH'])
+ })
+
+ it('filters out entries with a negative price', () => {
+ const raw = [makeRaw('ETH', 2000), makeRaw('NEG', -1)]
+ const result = normalizeTokenPrices(raw)
+ expect(result.map((t) => t.symbol)).toEqual(['ETH'])
+ })
+
+ it('deduplicates by keeping the entry with the most recent date', () => {
+ const raw = [
+ makeRaw('ETH', 1800, '2024-01-01T00:00:00Z'),
+ makeRaw('ETH', 2000, '2024-06-01T00:00:00Z'),
+ makeRaw('ETH', 1900, '2024-03-01T00:00:00Z'),
+ ]
+ const result = normalizeTokenPrices(raw)
+ expect(result).toHaveLength(1)
+ expect(result[0].price).toBe(2000)
+ })
+
+ it('returns an empty array when input is empty', () => {
+ expect(normalizeTokenPrices([])).toEqual([])
+ })
+
+ it('returns an empty array when all entries have invalid prices', () => {
+ const raw = [makeRaw('A', 0), makeRaw('B', -5)]
+ expect(normalizeTokenPrices(raw)).toEqual([])
+ })
+
+ it('builds the correct image URL for each token', () => {
+ const raw = [makeRaw('ETH', 2000)]
+ const result = normalizeTokenPrices(raw)
+ expect(result[0].imageUrl).toBe(
+ 'https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens/ETH.svg',
+ )
+ })
+
+ it('handles a single valid entry without error', () => {
+ const raw = [makeRaw('BTC', 50000)]
+ const result = normalizeTokenPrices(raw)
+ expect(result).toHaveLength(1)
+ expect(result[0].symbol).toBe('BTC')
+ expect(result[0].price).toBe(50000)
+ })
+})
diff --git a/src/problems/problem2/logic.ts b/src/problems/problem2/logic.ts
new file mode 100644
index 0000000000..55dadcca0f
--- /dev/null
+++ b/src/problems/problem2/logic.ts
@@ -0,0 +1,127 @@
+import { t } from '../../lib/i18n'
+import type { TokenInfo, TokenPrice } from './types'
+
+const TOKEN_IMAGE_BASE =
+ 'https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens'
+
+export const buildTokenImageUrl = (symbol: string): string => {
+ return `${TOKEN_IMAGE_BASE}/${symbol}.svg`
+}
+
+export const normalizeTokenPrices = (raw: TokenPrice[]): TokenInfo[] => {
+ const map = new MapCreate a currency swap form based on the template provided.
++ The submission is required to: +
+-
+
- Retrieve token prices from the provided API endpoint. +
- Allow users to select tokens and input a swap amount. +
- Display the converted output amount in real time. +
- Provide UI feedback for pending and error states. +
+ The form must not use any form state management other than{' '}
+ react-hook-form, and all token data must be fetched from
+ the live endpoint below.
+
+ https://interview.switcheo.com/prices.json
+
+
+
+
+ {/* ── History panel ──────────────────────────────────────────────────── */}
+ + Swap +
++ Exchange tokens at real-time rates +
+ + {/* Error state */} + {isError && ( +
+ {error?.message ?? t('swap.error')}
+
+ )}
+
+
+
+ {/* ── Success result ────────────────────────────────────────────── */}
+ 0
+ ? 'grid-rows-[1fr] mt-4'
+ : 'grid-rows-[0fr]',
+ ].join(' ')}
+ >
+
+
+ {isSuccess && history[0] && (
+
+
+
+ )}
+
+
+
+ {t('swap.result_heading')}
+
+
+ + {t('swap.result_detail', { + fromAmount: formatAmount(history[0].fromAmount), + from: history[0].fromSymbol, + toAmount: formatAmount(history[0].toAmount), + to: history[0].toSymbol, + })} +
+ 0 ? 'opacity-100' : 'opacity-0 pointer-events-none',
+ ].join(' ')}
+ >
+
+
+
+ + {t('swap.history_heading')} +
+-
+ {history.map((record) => (
+
+ {rows}
+
+ )
+}`
+
+export default function Problem3() {
+ return (
+
+ {/* ── Task statement ─────────────────────────────────────────────── */}
+
+
+
+ {/* ── Solution preview ───────────────────────────────────────────── */}
+
+ )
+}
diff --git a/src/problems/problem3/logic.ts b/src/problems/problem3/logic.ts
new file mode 100644
index 0000000000..5fb150e169
--- /dev/null
+++ b/src/problems/problem3/logic.ts
@@ -0,0 +1,51 @@
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type Blockchain = 'Osmosis' | 'Ethereum' | 'Arbitrum' | 'Zilliqa' | 'Neo'
+
+export interface BoxProps {
+ [key: string]: unknown
+}
+
+export interface WalletBalance {
+ currency: string
+ amount: number
+ blockchain: Blockchain
+}
+
+export interface FormattedWalletBalance extends WalletBalance {
+ formatted: string
+ usdValue: number
+}
+
+// ── Pure logic ────────────────────────────────────────────────────────────────
+
+export const getPriority = (blockchain: Blockchain): number => {
+ switch (blockchain) {
+ case 'Osmosis': return 100
+ case 'Ethereum': return 50
+ case 'Arbitrum': return 30
+ case 'Zilliqa': return 20
+ case 'Neo': return 20
+ default: return -99
+ }
+}
+
+// ── Mock hooks ────────────────────────────────────────────────────────────────
+
+export const useWalletBalances = (): WalletBalance[] => {
+ return [
+ { currency: 'OSMO', amount: 120.5, blockchain: 'Osmosis' },
+ { currency: 'ETH', amount: 2.75, blockchain: 'Ethereum' },
+ { currency: 'ARB', amount: 500, blockchain: 'Arbitrum' },
+ { currency: 'ZIL', amount: 0, blockchain: 'Zilliqa' },
+ { currency: 'NEO', amount: -5, blockchain: 'Neo' },
+ ]
+}
+
+export const usePrices = (): Record+ 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}
+
+
+ 
+
+
+ {/* ── Refactored output ──────────────────────────────────────────── */}
+ + Solution Preview +
+
+ {rows}
+ // [N3] children never rendered
+
+ )
+}
+
+*/
+
+// ── REFACTORED ────────────────────────────────────────────────────────────────
+
+import React, { useMemo } from 'react'
+
+import type { BoxProps, FormattedWalletBalance, WalletBalance } from './logic'
+import { getPriority, usePrices, useWalletBalances } from './logic'
+
+// ── WalletRow ─────────────────────────────────────────────────────────────────
+
+interface WalletRowProps {
+ index: number
+ currency: string
+ amount: number
+ usdValue: number
+ formattedAmount: string
+}
+
+const WalletRow: React.FC}>
+
+
+
+ {children}
+
+ )
+}
+
+export default WalletPage
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000000..7f42e5f7cd
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..1ffef600d9
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000000..d3c52ea64c
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "module": "esnext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/video_demo.mov b/video_demo.mov
new file mode 100644
index 0000000000..734f93fb1b
Binary files /dev/null and b/video_demo.mov differ
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000000..37b6f5a064
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ react(),
+ babel({ presets: [reactCompilerPreset()] }),
+ ],
+})
| # | +Currency | +Amount | +USD Value | +
|---|