[FE] Code challenge - Tran Thanh Minh

src/problem1/sum-to-n.js

@@ -0,0 +1,64 @@
+/**
+ * Problem 1: Three ways to sum to n
+ *
+ * Assumptions:
+ * - n is an integer.
+ * - n is non-negative.
+ * - Result is less than Number.MAX_SAFE_INTEGER.
+ */
+
+var sum_to_n_a = function (n) {
+  // Iterative loop (O(n) time, O(1) space)
+  var sum = 0;
+  for (var i = 1; i <= n; i += 1) {
+    sum += i;
+  }
+  return sum;
+};
+
+var sum_to_n_b = function (n) {
+  // Mathematical formula (O(1) time, O(1) space)
+  return (n * (n + 1)) / 2;
+};
+
+var sum_to_n_c = function (n) {
+  // Recursion (O(n) time, O(n) call stack)
+  if (n <= 1) return n;
+  return n + sum_to_n_c(n - 1);
+};
+
+
+const runTests = () => {
+
+  const testCases = [
+    { input: 0, expected: 0 },
+    { input: 1, expected: 1 },
+    { input: 5, expected: 15 },
+    { input: 10, expected: 55 },
+    { input: 100, expected: 5050 }
+];
+
+const implementations = [
+    { name: "Iterative", fn: sum_to_n_a },
+    { name: "Formula", fn: sum_to_n_b },
+    { name: "Functional", fn: sum_to_n_c }
+];
+
+console.log("Running Tests...\n");
+
+testCases.forEach(({ input, expected }) => {
+    console.log(`Test n = ${input} (expected: ${expected})`);
+    implementations.forEach(({ name, fn }) => {
+        const result = fn(input);
+        const pass = result === expected;
+        console.log(
+            `  ${name.padEnd(12)} → ${result} ${pass ? "✅ PASS" : "❌ FAIL"}`
+        );
+    });
+    console.log("");
+});
+
+console.log("All tests completed.");
+};
+
+runTests();

src/problem2/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

src/problem2/App.tsx

@@ -0,0 +1,181 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useToast } from "./src/components/Toast/ToastProvider";
+import SwapForm from "./src/components/SwapForm/SwapForm";
+import { SwapFormSkeleton } from "./src/components/SwapForm/SwapFormSkeleton";
+import { ThemeToggle } from "./src/components/ThemeToggle/ThemeToggle";
+import type { FormValues } from "./src/form/swapFormTypes";
+import { useTokenPrices } from "./src/hooks/useTokenPrices";
+import { getDefaultTokenPair } from "./src/lib/defaultTokens";
+import { useTheme } from "./src/theme/ThemeProvider";
+
+const SUBMIT_DELAY_MS = 2000;
+
+const swapTokenApi = async (values: FormValues) => {
+  return new Promise<void>((resolve, reject) => {
+    window.setTimeout(() => {
+      if (Math.random() > 0.5) {
+        console.log(values);
+        resolve();
+      } else {
+        reject(new Error("Failed to submit swap."));
+      }
+    }, SUBMIT_DELAY_MS);
+  });
+};
+
+function App() {
+  const toast = useToast();
+  const { resolved, toggleResolved } = useTheme();
+  const { tokenPrices, loadError, isLoading } = useTokenPrices();
+  const symbols = useMemo(() => Array.from(tokenPrices.keys()), [tokenPrices]);
+
+  const { from, to } = getDefaultTokenPair(symbols);
+  const initialValues = useMemo(
+    () => ({ fromToken: from, toToken: to, fromAmount: "", toAmount: "" }),
+    [from, to],
+  );
+  const [submitInProgress, setSubmitInProgress] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (values: FormValues) => {
+      setSubmitInProgress(true);
+      toast.dismissAll();
+
+      try {
+        await swapTokenApi(values);
+        toast.success("Swap submitted successfully. (Mock transaction)");
+        setSubmitInProgress(false);
+        return { success: true };
+      } catch (error) {
+        toast.error("Failed to submit swap.");
+        setSubmitInProgress(false);
+        return { success: false };
+      }
+    },
+    [toast],
+  );
+
+  const handleClearSubmitFeedback = useCallback(() => {
+    toast.dismissAll();
+  }, [toast]);
+
+  const pricesReady = symbols.length > 0;
+  /**
+   * Stagger real form fade-in one frame past mount so opacity transitions interpolate (prevents flicker).
+   * Skips extra frames when the user prefers reduced motion.
+   */
+  const [formEnter, setFormEnter] = useState(false);
+
+  useEffect(() => {
+    if (!pricesReady) {
+      setFormEnter(false);
+      return;
+    }
+    let canceled = false;
+    const prefersReduce =
+      typeof window.matchMedia !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReduce) {
+      queueMicrotask(() => {
+        if (!canceled) {
+          setFormEnter(true);
+        }
+      });
+      return () => {
+        canceled = true;
+      };
+    }
+    let idInner = 0;
+    const idOuter = window.requestAnimationFrame(() => {
+      idInner = window.requestAnimationFrame(() => {
+        if (!canceled) {
+          setFormEnter(true);
+        }
+      });
+    });
+    return () => {
+      canceled = true;
+      window.cancelAnimationFrame(idOuter);
+      window.cancelAnimationFrame(idInner);
+    };
+  }, [pricesReady]);
+
+  const revealForm = pricesReady && formEnter;
+
+  return (
+    <>
+      <div className="fixed right-3 top-3 z-[180] sm:right-8 sm:top-6">
+        <ThemeToggle isDark={resolved === "dark"} onToggle={toggleResolved} />
+      </div>
+
+      <main className="relative isolate flex min-h-screen items-center justify-center overflow-hidden px-4 py-10 transition-colors duration-500 sm:py-14">
+        <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
+          <div className="motion-safe:animate-float absolute -left-32 top-[10%] h-[min(32rem,80vw)] w-[min(32rem,80vw)] rounded-full bg-violet-400/30 blur-[120px] dark:bg-violet-500/28" />
+          <div className="motion-safe:animate-float absolute bottom-[5%] right-[-12%] h-[min(26rem,70vw)] w-[min(26rem,70vw)] rounded-full bg-cyan-300/25 blur-[100px] motion-safe:delay-[2.5s] dark:bg-cyan-400/22" />
+        </div>
+
+        <section
+          className="relative z-[1] w-full max-w-[600px] rounded-[1.75rem] border border-white/60 bg-white/[0.92] p-6 shadow-card backdrop-blur-2xl transition-[border-color,background,color,box-shadow] duration-500 max-[500px]:rounded-3xl max-[500px]:p-5 dark:border-slate-700 dark:bg-slate-950/[0.82] dark:shadow-[0_26px_60px_-18px_rgba(0,0,0,0.74)] sm:p-8"
+          aria-labelledby="swap-title"
+        >
+          <header className="text-center sm:text-left">
+            <p className="mb-2 inline-flex items-center gap-2 rounded-full border border-indigo-200/60 bg-gradient-to-r from-indigo-50/90 to-teal-50/80 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-indigo-700 dark:border-indigo-600/65 dark:from-indigo-950 dark:to-teal-950/80 dark:text-indigo-200">
+              <span className="relative flex h-1.5 w-1.5">
+                <span className="absolute inline-flex h-full w-full motion-safe:animate-ping rounded-full bg-teal-400 opacity-60 motion-reduce:opacity-40 dark:bg-teal-300" />
+                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-teal-500 dark:bg-teal-400" />
+              </span>
+              Live feed
+            </p>
+            <h1
+              id="swap-title"
+              className="m-0 bg-gradient-to-r from-slate-900 via-indigo-900 to-slate-800 bg-clip-text text-[1.65rem] font-bold leading-tight tracking-tight text-transparent dark:from-neutral-50 dark:via-indigo-200 dark:to-neutral-300 sm:text-[1.85rem]"
+            >
+              Swap tokens
+            </h1>
+            <p className="mt-2 max-w-[28ch] text-[0.95rem] leading-relaxed text-slate-600 dark:text-slate-400 sm:max-w-none">
+              Trade at market rates with a clean, production-style flow — powered by the Switcheo price API.
+            </p>
+          </header>
+
+          {loadError && (
+            <p
+              className="mt-5 rounded-2xl border border-red-200/80 bg-red-50/95 px-4 py-3 text-center text-[0.9rem] font-medium leading-snug text-red-900 shadow-sm dark:border-red-900 dark:bg-red-950/94 dark:text-red-100"
+              role="alert"
+            >
+              {loadError || "Failed to load market data."}
+            </p>
+          )}
+
+          {!loadError ? (
+            <div className="grid min-h-[26rem] [grid-template-areas:'swap'] sm:min-h-[28rem] [&>*]:[grid-area:swap]">
+              <div
+                className={`transition-opacity duration-[480ms] ease-out motion-reduce:duration-150 motion-reduce:transition-opacity ${revealForm ? "pointer-events-none opacity-0" : "opacity-100"
+                  }`}
+                aria-hidden={revealForm}
+              >
+                <SwapFormSkeleton />
+              </div>
+              <div
+                className={`transition-opacity duration-[480ms] ease-out motion-reduce:duration-150 motion-reduce:transition-opacity ${revealForm ? "opacity-100" : "pointer-events-none opacity-0"
+                  }`}
+              >
+                {pricesReady ? (
+                  <SwapForm
+                    onClearSubmitFeedback={handleClearSubmitFeedback}
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                    tokenPrices={tokenPrices}
+                    loadError={loadError}
+                    submitInProgress={submitInProgress}
+                  />
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+        </section>
+      </main>
+    </>
+  );
+}
+
+export default App;

src/problem2/index.html

@@ -1,27 +1,33 @@
-<html>
-
+<!doctype html>
+<html lang="en">
 <head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Fancy Form</title>
-
-  <!-- You may add more stuff here -->
-  <link href="style.css" rel="stylesheet" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Token Swap</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap"
+    rel="stylesheet"
+  />
+  <link rel="preconnect" href="https://raw.githubusercontent.com" />
+  <link rel="preconnect" href="https://interview.switcheo.com" />
+  <script>
+    (() => {
+      try {
+        const k = "swap-ui-theme";
+        const raw = localStorage.getItem(k);
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        const isDark = raw === "dark" || (!(raw === "light") && mq.matches);
+        document.documentElement.classList.toggle("dark", !!isDark);
+      } catch {
+        /* noop */
+      }
+    })();
+  </script>
 </head>
-
 <body>
-
-  <!-- You may reorganise the whole HTML, as long as your form achieves the same effect. -->
-  <form onsubmit="return !1">
-    <h5>Swap</h5>
-    <label for="input-amount">Amount to send</label>
-    <input id="input-amount" />
-
-    <label for="output-amount">Amount to receive</label>
-    <input id="output-amount" />
-
-    <button>CONFIRM SWAP</button>
-  </form>
-  <script src="script.js"></script>
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
 </body>
-
 </html>

src/problem2/main.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { ThemeProvider } from "./src/theme/ThemeProvider";
+import { ToastProvider } from "./src/components/Toast/ToastProvider";
+import "./styles/tailwind.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <ToastProvider>
+        <App />
+      </ToastProvider>
+    </ThemeProvider>
+  </React.StrictMode>,
+);

src/problem2/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "problem2-token-swap",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "latest",
+    "vite": "latest"
+  }
+}

src/problem2/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};