Merge pull request #212 from reborn-sama/main

Feature: modify wallet address
WTFAcademy · Jul 4, 2024 · cf730f3 · cf730f3
2 parents 1d063b0 + 2d93f5b
commit cf730f3
Show file tree

Hide file tree

Showing 10 changed files with 401 additions and 12 deletions.
diff --git a/src/api/user.ts b/src/api/user.ts
@@ -10,10 +10,10 @@ export const getUserInfo = () => {
 
 export const getUserCourse = (i18n = null) => {
   return request
-    .get<unknown, TResult<any>>(
-      "/user/my_course",
-      i18n ? { params: { lan: i18n } } : null,
-    )
+    .get<
+      unknown,
+      TResult<any>
+    >("/user/my_course", i18n ? { params: { lan: i18n } } : null)
     .then(res => res.data);
 };
 

diff --git a/src/api/wallet-auth.ts b/src/api/wallet-auth.ts
@@ -28,3 +28,9 @@ export const bindWallet = (data: TBindWalletParams) => {
     .post("/wallet/bind", data, { ignore: true })
     .then(res => res.data);
 };
+
+export const changeWallet = (data: TBindWalletParams) => {
+  return request
+    .post("/wallet/change", data, { ignore: true })
+    .then(res => res.data);
+};
diff --git a/src/icons/ChangeWallet.tsx b/src/icons/ChangeWallet.tsx
@@ -0,0 +1,26 @@
+import React, { SVGProps } from "react";
+
+const HeroiconsCog6Tooth = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87q.11.06.22.127c.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a8 8 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a7 7 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a7 7 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a7 7 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124q.108-.066.22-.128c.332-.183.582-.495.644-.869z"></path>
+        <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0"></path>
+      </g>
+    </svg>
+  );
+};
+
+export default HeroiconsCog6Tooth;
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
@@ -10,7 +10,6 @@ import Translate from "@docusaurus/Translate";
 function Login() {
   const { siteConfig } = useDocusaurusContext();
   const { isConnected } = useAccount();
-
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}

diff --git a/src/pages/personal/settings.tsx b/src/pages/personal/settings.tsx
@@ -6,10 +6,14 @@ import Link from "@docusaurus/Link";
 import useAuth from "@site/src/hooks/useAuth";
 import truncation from "@site/src/utils/truncation";
 import { updateUserInfo } from "@site/src/api/user";
+
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import Translate, { translate } from "@docusaurus/Translate";
 
+import HeroiconsCog6Tooth from "@site/src/icons/ChangeWallet";
+import { useHistory } from "@docusaurus/router";
+
 function Settings() {
   const { data } = useAuth();
 
@@ -20,6 +24,12 @@ function Settings() {
     });
   }, []);
 
+  const history = useHistory();
+
+  const handleIconClick = () => {
+    history.push("/wallet");
+  };
+
   const { register, handleSubmit, reset, watch } = useForm({
     defaultValues: {
       username: data?.username,
@@ -184,13 +194,26 @@ function Settings() {
                     </defs>
                   </svg>
                 </div>
-                <div className="flex flex-col w-full">
-                  <h4 className="text-sm font-medium text-content-subtle">
-                    ETH
-                  </h4>
-                  <p className="text-sm text-content-muted">
-                    {truncation(wallet)}
-                  </p>
+                <div className="flex justify-between items-center w-full">
+                  <div>
+                    <h4 className="text-sm font-medium text-content-subtle">
+                      ETH
+                    </h4>
+                    <p className="text-sm text-content-muted">
+                      {truncation(wallet)}
+                    </p>
+                  </div>
+                  {truncation(wallet) !== "***" && (
+                    <div
+                      className="flex items-center gap-1 hover:cursor-pointer "
+                      onClick={handleIconClick}
+                    >
+                      <HeroiconsCog6Tooth className="h-5 w-5 text-gray-500" />
+                      <h4 className="text-sm font-medium text-content-subtle mr-2">
+                        换绑钱包
+                      </h4>
+                    </div>
+                  )}
                 </div>
               </div>
               {/* <RHFInput label={'email'} name={'email'}></RHFInput> */}

diff --git a/src/pages/wallet/_ChangeWallet/_StepChangeWallet.tsx b/src/pages/wallet/_ChangeWallet/_StepChangeWallet.tsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useMemo } from "react";
+import StepCard from "@site/src/components/StepCard";
+import { ArrowRightCircleIcon } from "lucide-react";
+import { useAccount, useSigner } from "wagmi";
+import { useMutation } from "react-query";
+import { get } from "lodash-es";
+import useAuth from "@site/src/hooks/useAuth";
+import { changeWallet } from "@site/src/api/wallet-auth";
+import { useHistory } from "@docusaurus/router";
+import Spinner from "@site/src/components/ui/Spinner";
+import Translate from "@docusaurus/Translate";
+import { toast } from "react-hot-toast";
+
+const formatChainError = (message: string) => {
+  if (message.includes("user rejected signing")) {
+    return "User rejected signing";
+  }
+};
+
+const StepChangeWallet = () => {
+  const { data: user, isGithubLogin } = useAuth();
+  const { address } = useAccount();
+  const { data: signer } = useSigner();
+  const userWallet = JSON.parse(localStorage.getItem("WTF_USER")).wallet;
+
+  const githubName = get(user, "user_metadata.user_name"); // TODO(chong) 待使用统一格式USER数据
+  const history = useHistory();
+
+  const {
+    isSuccess,
+    isError,
+    isLoading,
+    error,
+    mutateAsync: bindWalletMutate,
+  } = useMutation(async () => {
+    // 添加一个对signer的检查
+    if (!signer) {
+      throw new Error("No signer found");
+    }
+    const nonce = await signer.getTransactionCount();
+    const message = `You are binding the wallet address to your github ID in WTF Academy. \n\nThis binding can not be changed later. \nPlease confirm the binding operation. \n\nGithub ID: ${githubName}\n\nWallet Address: ${address}\n\nNonce: ${nonce}`;
+    const signData = await signer.signMessage(message);
+    return changeWallet({ mesData: message, signData, wallet: address });
+  });
+
+  useEffect(() => {
+    if (isSuccess) {
+      history.push("/");
+    }
+  }, [isSuccess]);
+
+  const errorMessage = useMemo(() => {
+    return (
+      formatChainError((error as any)?.message || "") ||
+      (error as any)?.msg ||
+      "Unknown error"
+    );
+  }, [error]);
+
+  const handleOnClick = () => {
+    if (isGithubLogin) {
+      if (address != userWallet) {
+        bindWalletMutate();
+      } else {
+        toast.error("当前钱包与Github绑定的钱包一致，无需修改");
+      }
+    } else {
+      toast.error("请使用Github登录");
+    }
+  };
+
+  return (
+    <StepCard
+      error={isError}
+      errorMessage={errorMessage}
+      onClick={handleOnClick}
+      className={"cursor-pointer"}
+    >
+      <div className="flex justify-between w-full">
+        <div className="flex flex-col">
+          <span>
+            <Translate id="login.StepBindWallet.intro">
+              签名消息+绑定钱包
+            </Translate>
+          </span>
+          {isError && (
+            <span className="text-xs text-start text-destructive-foreground">
+              {errorMessage}
+            </span>
+          )}
+        </div>
+        {!isLoading ? (
+          <ArrowRightCircleIcon className="w-6 h-6 text-white" />
+        ) : (
+          <Spinner loading className="w-6 h-6" />
+        )}
+      </div>
+    </StepCard>
+  );
+};
+
+export default StepChangeWallet;
diff --git a/src/pages/wallet/_ChangeWallet/index.tsx b/src/pages/wallet/_ChangeWallet/index.tsx
@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import Stepper from "@site/src/components/ui/Stepper";
+import Step from "@site/src/components/ui/Stepper/Step";
+import StepChangeWallet from "@site/src/pages/wallet/_ChangeWallet/_StepChangeWallet";
+
+function ChangeWallet() {
+  const [activeStep] = useState(0);
+
+  return (
+    <Stepper activeStep={activeStep}>
+      <Step placeholderWidth={342}>
+        <StepChangeWallet />
+      </Step>
+    </Stepper>
+  );
+}
+
+export default ChangeWallet;