1 files changed, 58 insertions, 0 deletions
diff --git a/jb-ui/src/pages/MagicWallet.tsx b/jb-ui/src/pages/MagicWallet.tsx
new file mode 100644
index 0000000..21331f9
--- /dev/null
+++ b/jb-ui/src/pages/MagicWallet.tsx
@@ -0,0 +1,58 @@
+import {
+  WalletApi as JBApi,
+  CashoutConfirmation,
+  Configuration,
+} from "@/api_jb";
+import { useEffect, useRef, useState } from "react";
+
+type ExchangeState = "working" | "failed" | "missing";
+
+const MagicWallet = function () {
+  const started = useRef(false);
+  const [state, setState] = useState<ExchangeState>("working");
+  const [errorMsg, setErrorMesg] = useState("");
+
+  useEffect(() => {
+    // React Strict Mode runs effects twice in development. Never redeem twice.
+    if (started.current) return;
+    started.current = true;
+
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get("token");
+    if (!token) {
+      setState("missing");
+      return;
+    }
+
+    // Keep the credential out of browser history and subsequent Referer headers.
+    window.history.replaceState({}, "", window.location.pathname);
+
+    const cc = {
+      token: token,
+    } as CashoutConfirmation;
+
+    const config = new Configuration({ basePath: "http://localhost:5174" });
+    new JBApi(config)
+      .confirmCashoutWalletCashoutConfirmPost(cc)
+      .then((res) => {
+        console.log("confirmCashoutWalletCashoutConfirmPost", res.data);
+        // if (!res.ok) throw new Error("Magic-link exchange failed");
+        window.location.replace("/");
+      })
+      .catch((err) => {
+        const response = err?.response?.data;
+        setErrorMesg(response?.detail ?? err.message);
+        setState("failed");
+      });
+  }, []);
+
+  if (state === "missing") {
+    return <p>This login link is missing its token.</p>;
+  }
+  if (state === "failed") {
+    return <p>{errorMsg}</p>;
+  }
+  return <p>Signing you in…</p>;
+};
+
+export default MagicWallet;