✨ feat: recover account section in settings (#190)

Deland-Labs · Oct 30, 2024 · b6cc33e · b6cc33e
1 parent 797cabd
commit b6cc33e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 24 deletions.
diff --git a/apps/wallet/src/apis/models.ts b/apps/wallet/src/apis/models.ts
@@ -409,9 +409,10 @@ export class UpdateMnemonicResult extends GetMnemonicResult {
 }
 
 export class GetUserLoginsResultItem {
-  providerKey!: string
-  loginProvider!: string
-  providerDisplayName!: string
+  providerKey!: string  // user id
+  loginProvider!: string  // provider id, eg. 'telegram', 'google', 'twitter'
+  providerDisplayName!: string  // provider name
+  userDisplayName!: string  // user name
 }
 
 export type GetUserLoginsResult = GetUserLoginsResultItem[]
diff --git a/apps/wallet/src/pages/account-manage/index.tsx b/apps/wallet/src/pages/account-manage/index.tsx
@@ -2,14 +2,10 @@ import { FC } from "react";
 import SvgTrash from '../../assets/trash.svg?react'
 import { useNavigate } from "react-router-dom";
 import AuthenticatorLogo from "../../components/AuthenticatorLogo";
-import { AuthenticatorType } from "@delandlabs/hibit-id-sdk";
 import { useTranslation } from "react-i18next";
 import { useUserLoginsQuery } from "../../apis/react-query/auth";
 import PageHeader from "../../components/PageHeader";
-
-const authProviderLogoMap: Record<string, AuthenticatorType> = {
-  'telegram': AuthenticatorType.Telegram
-}
+import { authProviderTypeMap } from "../../utils/auth";
 
 const AccountManagePage: FC = () => {
   const { t } = useTranslation()
@@ -29,8 +25,8 @@ const AccountManagePage: FC = () => {
           {userLoginsQuery.data?.map((login) => (
             <li className="flex justify-between items-center" key={login.loginProvider}>
               <div className="flex items-center gap-4">
-                <AuthenticatorLogo type={authProviderLogoMap[login.loginProvider]} className="size-6" />
-                <span className="text-xs">{login.providerKey}</span>
+                <AuthenticatorLogo type={authProviderTypeMap[login.loginProvider]} className="size-6" />
+                <span className="text-xs">{login.userDisplayName}</span>
               </div>
               {/* // TODO: delete api */}
               {userLoginsQuery.data?.length > 1 && (

diff --git a/apps/wallet/src/pages/settings/index.tsx b/apps/wallet/src/pages/settings/index.tsx
@@ -1,42 +1,52 @@
 import { observer } from "mobx-react";
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import AuthenticatorLogo from "../../components/AuthenticatorLogo";
-import { AuthenticatorType } from "@delandlabs/hibit-id-sdk";
 import hibitIdSession from "../../stores/session";
 import PageHeader from "../../components/PageHeader";
 import SvgGo from '../../assets/right-arrow.svg?react'
 import { languages } from "../../utils/lang";
+import { useUserLoginsQuery } from "../../apis/react-query/auth";
+import { authProviderTypeMap } from "../../utils/auth";
 
 const SettingsPage: FC = observer(() => {
   const navigate = useNavigate()
   const { t } = useTranslation()
+  const userLoginsQuery = useUserLoginsQuery()
+
+  const loginInfo = useMemo(() => {
+    if (!userLoginsQuery.data?.length) {
+      return null
+    }
+    return userLoginsQuery.data[0]
+  }, [userLoginsQuery.data])
 
-  const userName: string = (hibitIdSession.auth?.decodedIdToken?.preferred_username
-    || hibitIdSession.auth?.decodedIdToken?.unique_name) as string
-
   return (
     <div className="h-full px-6 overflow-auto">
       <PageHeader title={t('page_settings_title')} />
 
-      {/* // TODO: TEMP HIDE */}
-      {/* <div className="mt-6">
+      <div className="mt-6">
         <p className="label-text text-neutral text-sm font-bold">
           {t('page_settings_account')}
         </p>
         <div className="mt-2 flex justify-between items-center">
-          <div className="flex items-center gap-2 text-xs">
-            <AuthenticatorLogo type={AuthenticatorType.Telegram} className="size-6" />
-            <span>{userName}</span>
-          </div>
-          <button className="btn btn-link btn-sm no-underline p-0" onClick={() => {
+          {!loginInfo ? (
+            <span className="loading loading-spinner"></span>
+          ) : (
+            <div className="flex items-center gap-2 text-xs">
+              <AuthenticatorLogo type={authProviderTypeMap[loginInfo.loginProvider]} className="size-6" />
+              <span>{loginInfo.userDisplayName}</span>
+            </div>
+          )}
+          {/* // TODO: TEMP HIDE */}
+          {/* <button className="btn btn-link btn-sm no-underline p-0" onClick={() => {
             navigate('/account-manage')
           }}>
             {t('page_settings_linkMore')}
-          </button>
+          </button> */}
         </div>
-      </div> */}
+      </div>
 
       <div className="mt-6">
         <p className="label-text text-neutral text-sm font-bold">

diff --git a/apps/wallet/src/utils/auth/index.ts b/apps/wallet/src/utils/auth/index.ts
@@ -5,7 +5,16 @@ import { prOidc } from "../oidc";
 import { GoogleAuthenticateProvider } from "./providers/google";
 import { XAuthenticateProvider } from "./providers/x";
 
+// TODO: add more auth parties
+export const authProviderTypeMap: Record<string, AuthenticatorType> = {
+  'telegram': AuthenticatorType.Telegram,
+  'google': AuthenticatorType.Google,
+  'x': AuthenticatorType.X,
+  'twitter': AuthenticatorType.X,
+}
+
 export class AuthManager {
+  // TODO: add more auth parties
   public static readonly supportedAuthenticators: AuthenticatorType[] = [
     AuthenticatorType.Telegram,
     AuthenticatorType.Google,