Redemption Modal. Redemption Magic flow. User Account Icondev

3 files changed, 73 insertions, 6 deletions

diff --git a/jb-ui/src/pages/MagicLink.tsx b/jb-ui/src/pages/MagicLink.tsx
index 48d7dc5..e85bac3 100644
--- a/jb-ui/src/pages/MagicLink.tsx
+++ b/jb-ui/src/pages/MagicLink.tsx
@@ -5,6 +5,7 @@ type ExchangeState = "working" | "failed" | "missing";
 const MagicLink = 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.
@@ -31,14 +32,19 @@ const MagicLink = function () {
         if (!response.ok) throw new Error("Magic-link exchange failed");
         window.location.replace("/");
       })
-      .catch(() => setState("failed"));
+      .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>This login link is invalid or has expired.</p>;
+    return <p>{errorMsg}</p>;
+    // return <p>This login link is invalid or has expired.</p>;
   }
   return <p>Signing you in…</p>;
 };
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;
diff --git a/jb-ui/src/pages/Work.tsx b/jb-ui/src/pages/Work.tsx
index 6d0b1c1..c039436 100644
--- a/jb-ui/src/pages/Work.tsx
+++ b/jb-ui/src/pages/Work.tsx
@@ -782,10 +782,13 @@ const SurveyEnter = () => {
       </div>
       <BucketDetails />
 
-      <div className="border-2 border-emerald-200 rounded py-2 m-0">
-        <p className="text-emerald-700 text-sm text-center font-medium px-2 m-0">
-          <Markdown>{bucket.eligibility_explanation}</Markdown>
-        </p>
+      <div
+        className="
+          border-2 border-emerald-200 rounded py-2 m-0
+        text-emerald-700 text-sm text-center font-medium px-2
+      "
+      >
+        <Markdown>{bucket.eligibility_explanation}</Markdown>
       </div>
     </>
   );