Feat/text style (#139)

Deland-Labs · Aug 20, 2024 · 98a41e6 · 98a41e6
1 parent 1c4be60
commit 98a41e6
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 97 deletions.
diff --git a/apps/wallet/src/components/PageHeader.tsx b/apps/wallet/src/components/PageHeader.tsx
@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { useNavigate } from "react-router-dom";
+import SvgGo from '../assets/right-arrow.svg?react'
+
+const PageHeader: FC<{ title: string, backable?: boolean }> = ({ title, backable = true }) => {
+  const navigate = useNavigate()
+
+  if (backable) {
+    return (
+      <div className="flex-none">
+        <button className="btn btn-ghost btn-sm gap-2 items-center pl-0" onClick={() => navigate(-1)}>
+          <SvgGo className="size-6 rotate-180" />
+          <span className="text-base font-bold">{title}</span>
+        </button>
+      </div>
+    )
+  } else {
+    return (
+      <div className="flex-none text-base font-bold">
+        {title}
+      </div>
+    )
+  }
+}
+
+export default PageHeader
diff --git a/apps/wallet/src/index.css b/apps/wallet/src/index.css
@@ -10,7 +10,7 @@ html, body, #root {
 
 @layer components {
   .btn {
-    @apply disabled:opacity-70 disabled:cursor-not-allowed;
+    @apply font-bold disabled:opacity-70 disabled:cursor-not-allowed;
   }
   .btn:not(.btn-primary,.btn-secondary,.btn-ghost,.btn-link,.btn-ex3-primary) {
     @apply bg-base-300 text-primary;

diff --git a/apps/wallet/src/pages/account-manage/index.tsx b/apps/wallet/src/pages/account-manage/index.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
-import SvgGo from '../../assets/right-arrow.svg?react'
 import SvgTrash from '../../assets/trash.svg?react'
 import { useNavigate } from "react-router-dom";
 import AuthenticatorLogo from "../../components/AuthenticatorLogo";
 import { AuthenticatorType } from "@deland-labs/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
@@ -18,18 +18,13 @@ const AccountManagePage: FC = () => {
 
   return (
     <div className="h-full px-6 flex flex-col gap-6 overflow-auto">
-      <div className="flex items-center gap-2">
-        <button className="btn btn-ghost btn-square btn-sm items-center" onClick={() => navigate(-1)}>
-          <SvgGo className="size-6 rotate-180" />
-        </button>
-        <span className="text-xs">{t('page_account_title')}</span>
-      </div>
+      <PageHeader title={t('page_account_title')} />
       {/* // TODO: add more auth parties */}
       {/* <div className="mt-6">
 
       </div> */}
       <div className="flex-1">
-        <p className="label-text text-neutral text-xs">{t('page_account_linked')}</p>
+        <p className="label-text text-neutral text-sm font-bold">{t('page_account_linked')}</p>
         <ul className="mt-4">
           {userLoginsQuery.data?.map((login) => (
             <li className="flex justify-between items-center" key={login.loginProvider}>

diff --git a/apps/wallet/src/pages/oidc-login/index.tsx b/apps/wallet/src/pages/oidc-login/index.tsx
@@ -12,12 +12,6 @@ const OidcLoginPage: FC = observer(() => {
     if (isUserLoggedIn) {
       navigate('/')
     }
-    // } else {
-    //   login({
-    //     doesCurrentHrefRequiresAuth: false,
-    //     redirectUrl: '/oidc-login'
-    //   })
-    // }
   }, [isUserLoggedIn])
 
   return (

diff --git a/apps/wallet/src/pages/password/create.tsx b/apps/wallet/src/pages/password/create.tsx
@@ -66,9 +66,6 @@ const CreatePasswordPage: FC = observer(() => {
 
   return (
     <div className="h-full px-6 pb-14 overflow-auto">
-      {/* <div className="text-xs">
-        Set Password
-      </div> */}
       <LogoSection />
       <div className="p-2 mt-6 rounded-lg bg-warning/15 text-warning text-xs">
         {t('page_password_create_warn')}
@@ -77,7 +74,7 @@ const CreatePasswordPage: FC = observer(() => {
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Set Password</span>
+              <span className="label-text text-neutral text-sm font-bold">Set Password</span>
             </div>
             <input
               {...register('password')}
@@ -95,7 +92,7 @@ const CreatePasswordPage: FC = observer(() => {
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Confirm Password</span>
+              <span className="label-text text-neutral text-sm font-bold">Confirm Password</span>
             </div>
             <input
               {...register('confirmPassword')}

diff --git a/apps/wallet/src/pages/password/reset.tsx b/apps/wallet/src/pages/password/reset.tsx
@@ -1,5 +1,4 @@
 import { FC, useEffect } from "react";
-import SvgGo from '../../assets/right-arrow.svg?react'
 import { useNavigate } from "react-router-dom";
 import { object, string, ref } from 'yup'
 import { useForm } from "react-hook-form";
@@ -12,6 +11,7 @@ import LoaderButton from "../../components/LoaderButton";
 import hibitIdSession from "../../stores/session";
 import { getErrorMessage, HibitIDError, HibitIDErrorCode } from "../../utils/error-code";
 import { useTranslation } from "react-i18next";
+import PageHeader from "../../components/PageHeader";
 
 const formSchema = object({
   password: string()
@@ -75,17 +75,12 @@ const ResetPasswordPage: FC = observer(() => {
 
   return (
     <div className="h-full px-6 pb-14 overflow-auto">
-      <div className="flex items-center gap-2">
-        <button className="btn btn-ghost btn-square btn-sm items-center" onClick={() => navigate(-1)}>
-          <SvgGo className="size-6 rotate-180" />
-        </button>
-        <span className="text-xs">Change Wallet Password</span>
-      </div>
+      <PageHeader title="Change Wallet Password" />
       <form className="mt-4 flex flex-col gap-5" onSubmit={handleConfirm}>
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Password</span>
+              <span className="label-text text-neutral text-sm font-bold">Password</span>
             </div>
             <input
               {...register('password')}
@@ -103,7 +98,7 @@ const ResetPasswordPage: FC = observer(() => {
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">New Password</span>
+              <span className="label-text text-neutral text-sm font-bold">New Password</span>
             </div>
             <input
               {...register('newPassword')}
@@ -120,7 +115,7 @@ const ResetPasswordPage: FC = observer(() => {
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Confirm Password</span>
+              <span className="label-text text-neutral text-sm font-bold">Confirm Password</span>
             </div>
             <input
               {...register('confirmNewPassword')}

diff --git a/apps/wallet/src/pages/password/verify.tsx b/apps/wallet/src/pages/password/verify.tsx
@@ -18,6 +18,7 @@ import { useOidc } from "../../utils/oidc";
 import { IS_TELEGRAM_MINI_APP, RUNTIME_ENV } from "../../utils/runtime";
 import { RuntimeEnv } from "../../utils/basicEnums";
 import rpcManager from "../../stores/rpc";
+import PageHeader from "../../components/PageHeader";
 
 const formSchema = object({
   password: string()
@@ -72,9 +73,7 @@ const VerifyPasswordPage: FC = observer(() => {
 
   return (
     <div className="h-full px-6 pb-14 overflow-auto">
-      <div className="text-xs">
-        Unlock wallet
-      </div>
+      <PageHeader title="Unlock wallet" backable={false} />
       <div className="mt-4">
         <LogoSection />
       </div>
@@ -98,7 +97,7 @@ const VerifyPasswordPage: FC = observer(() => {
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Password</span>
+              <span className="label-text text-neutral text-sm font-bold">Password</span>
             </div>
             <input
               {...register('password')}

diff --git a/apps/wallet/src/pages/receive-token/index.tsx b/apps/wallet/src/pages/receive-token/index.tsx
@@ -2,13 +2,11 @@ import { observer } from "mobx-react";
 import { FC, useEffect, useState } from "react";
 import hibitIdSession from "../../stores/session";
 import QRCode from 'qrcode'
-import { useNavigate } from "react-router-dom";
-import SvgGo from '../../assets/right-arrow.svg?react';
 import CopyButton from "../../components/CopyButton";
+import PageHeader from "../../components/PageHeader";
 
 const ReceiveTokenPage: FC = observer(() => {
   const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null)
-  const navigate = useNavigate()
 
   const address = hibitIdSession.account?.address ?? ''
   const chainInfo = hibitIdSession.chainInfo
@@ -22,12 +20,7 @@ const ReceiveTokenPage: FC = observer(() => {
 
   return (
     <div className="h-full px-6 overflow-auto">
-      <div>
-        <button className="btn btn-ghost btn-sm gap-2 items-center pl-0" onClick={() => navigate(-1)}>
-          <SvgGo className="size-6 rotate-180" />
-          <span className="text-xs">Receive</span>
-        </button>
-      </div>
+      <PageHeader title="Receive" />
       <div className="mt-6 flex flex-col items-center gap-6">
         <p>{`Receive Assets on ${chainInfo?.name ?? '--'}`}</p>
         <div className="size-[180px] p-2 bg-base-100 rounded-xl">

diff --git a/apps/wallet/src/pages/select-network/index.tsx b/apps/wallet/src/pages/select-network/index.tsx
@@ -1,12 +1,12 @@
 import { observer } from "mobx-react";
 import { FC, useMemo } from "react";
 import ChainIcon from "../../components/ChainIcon";
-import SvgRightArrow from '../../assets/right-arrow.svg?react'
 import { ChainInfo } from "../../utils/basicTypes";
 import { getSupportedChains } from "../../utils/chain";
 import { useTranslation } from "react-i18next";
 import hibitIdSession from "../../stores/session";
 import { useNavigate } from "react-router-dom";
+import PageHeader from "../../components/PageHeader";
 
 const SelectNetworkPage: FC = observer(() => {
   const { t } = useTranslation()
@@ -26,12 +26,7 @@ const SelectNetworkPage: FC = observer(() => {
 
   return (
     <div className="h-full px-6 overflow-auto flex flex-col gap-6">
-      <div className="flex-none flex items-center gap-2 text-xs">
-        <button className="btn btn-xs btn-square btn-ghost" onClick={() => navigate(-1)}>
-          <SvgRightArrow className="rotate-180" />
-        </button>
-        <span>Select Network</span>
-      </div>
+      <PageHeader title="Select Network" />
       <div className="-mx-1 px-1.5 flex-1 flex flex-col gap-6 overflow-auto">
         {Object.entries(chains).map(([chainName, chainList]) => (
           <div key={chainName}>

diff --git a/apps/wallet/src/pages/send-token/confirm-page.tsx b/apps/wallet/src/pages/send-token/confirm-page.tsx
@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 import { FC, useEffect, useMemo, useState } from "react";
 import hibitIdSession from "../../stores/session";
 import { useNavigate } from "react-router-dom";
-import SvgGo from '../../assets/right-arrow.svg?react';
 import SvgLoading from '../../assets/transfer-loading.svg?react';
 import SvgSuccess from '../../assets/transfer-success.svg?react';
 import SvgExternal from '../../assets/external.svg?react';
@@ -15,6 +14,7 @@ import { sendTokenStore } from "./store";
 import { formatNumber } from "../../utils/formatter";
 import { ChainAssetType } from "../../utils/basicTypes";
 import { getChainTxLink } from "../../utils/link";
+import PageHeader from "../../components/PageHeader";
 
 const SendTokenConfirmPage: FC = observer(() => {
   const [errMsg, setErrMsg] = useState<string>('')
@@ -139,50 +139,44 @@ const SendTokenConfirmPage: FC = observer(() => {
 
   return (
     <div className="h-full px-6 flex flex-col gap-6 overflow-auto">
-      <div>
-        <button className="btn btn-ghost btn-sm gap-2 items-center pl-0" onClick={() => navigate(-1)}>
-          <SvgGo className="size-6 rotate-180" />
-          <span className="text-xs">Edit</span>
-        </button>
-      </div>
-
+      <PageHeader title="Edit" />
       <div className="flex-1 flex flex-col gap-6">
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">To</span>
+              <span className="label-text text-neutral text-sm font-bold">To</span>
             </div>
             <div className="max-w-full p-2 pr-1 flex items-center gap-2 bg-base-100 rounded-xl text-primary">
-              <span className="text-xs break-all">{state.toAddress}</span>
+              <span className="text-xs font-bold break-all">{state.toAddress}</span>
               <CopyButton copyText={state.toAddress} />
             </div>
           </label>
         </div>
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Amount</span>
+              <span className="label-text text-neutral text-sm font-bold">Amount</span>
             </div>
-            <div className="flex items-center justify-between">
-              <span className="text-primary">{formatNumber(state.amount)}</span>
-              <span>{state.token?.assetSymbol}</span>
+            <div className="flex items-center justify-between font-bold">
+              <span className="text-primary text-sm">{formatNumber(state.amount)}</span>
+              <span className="text-xs">{state.token?.assetSymbol}</span>
             </div>
           </label>
         </div>
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Network fee estimation</span>
+              <span className="label-text text-neutral text-sm font-bold">Network fee estimation</span>
             </div>
-            <div className="flex items-center justify-between">
-              <span className="text-primary">
+            <div className="flex items-center justify-between font-bold">
+              <span className="text-primary text-sm">
                 {!feeQuery.isFetching ? (
                   <span>~{formatNumber(feeQuery.data)}</span>
                 ) : (
                   <span className="loading loading-spinner size-4" />
                 )}
               </span>
-              <span>{nativeTokenQuery.data?.assetSymbol}</span>
+              <span className="text-xs">{nativeTokenQuery.data?.assetSymbol}</span>
             </div>
             {errMsg && (
               <div className="label">

diff --git a/apps/wallet/src/pages/send-token/index.tsx b/apps/wallet/src/pages/send-token/index.tsx
@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 import { FC, useEffect, useMemo, useState } from "react";
 import hibitIdSession from "../../stores/session";
 import { useNavigate, useParams } from "react-router-dom";
-import SvgGo from '../../assets/right-arrow.svg?react';
 import { useTokenBalanceQuery, useTokenQuery } from "../../apis/react-query/token";
 import TokenSelect from "../../components/TokenSelect";
 import { RootAssetInfo } from "../../apis/models";
@@ -15,6 +14,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Controller, useForm } from "react-hook-form";
 import { SYSTEM_MAX_DECIMALS } from "../../utils/formatter/numberFormatter";
 import { sendTokenStore } from "./store";
+import PageHeader from "../../components/PageHeader";
 
 const SendTokenPage: FC = observer(() => {
   const { addressOrSymbol } = useParams()
@@ -87,18 +87,12 @@ const SendTokenPage: FC = observer(() => {
 
   return (
     <div className="h-full px-6 flex flex-col gap-6 overflow-auto">
-      <div>
-        <button className="btn btn-ghost btn-sm gap-2 items-center pl-0" onClick={() => navigate(-1)}>
-          <SvgGo className="size-6 rotate-180" />
-          <span className="text-xs">Send</span>
-        </button>
-      </div>
-
+      <PageHeader title="Send" />
       <div className="flex-1 flex flex-col gap-6">
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Send to</span>
+              <span className="label-text text-neutral text-sm font-bold">Send to</span>
             </div>
             <textarea
               placeholder="Recipient address"
@@ -115,7 +109,7 @@ const SendTokenPage: FC = observer(() => {
         <div>
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text text-neutral text-xs">Amount</span>
+              <span className="label-text text-neutral text-sm font-bold">Amount</span>
               <span className="label-text-alt text-xs">
                 <button
                   className="btn btn-link btn-xs px-0 no-underline gap-0"