Nig-696

src/components/NumberDisplayer.test.tsx

@@ -15,7 +15,7 @@ it('if integer part less than 1, decimal part should have 4 decimals', () => {
   expect(render(<NumberDisplayer text="145000000000000000" />).container).toMatchSnapshot();
 });
 it('if decimal part less than 0.0001, decimal part should round into 4 decimals', () => {
-  expect(render(<NumberDisplayer text="000000000012457" />).container).toMatchSnapshot();
+  expect(render(<NumberDisplayer text="000000000012455" />).container).toMatchSnapshot();
 });
 
 it('should throw error if text is not string', () => {

src/components/NumberDisplayer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import BigNumber from 'bignumber.js';
 
@@ -20,39 +20,45 @@ export function NumberDisplayer({ text = '0', className, loading = false }: Numb
   // 防止不会使用，或者错误传错类型，有助于开发阶段尽早发现问题
   if (typeof text !== 'string') throw new Error('text should be string');
   // 转成处理过后的字符串形式
-  const number = new BigNumber(text).dividedBy(new BigNumber(Math.pow(10, 18))).toFixed();
-  // 拆分成2部分
+  const number = useMemo(
+    () => new BigNumber(text).dividedBy(new BigNumber(Math.pow(10, 18))).toFixed(),
+    [text]
+  );
   const [valueBeforeDot, valueAfterDot] = number.split('.');
-  let value;
-  // 整数补2个0，不用算
-  if (valueAfterDot == null) {
-    value = '00';
-    // 如果 >= 1
-  } else if (BigNumber(valueBeforeDot).gte(1)) {
-    // 小数部分取2位长度
-    value = BigNumber(`0.${valueAfterDot}`).toFixed(2).split('.')[1];
-    // 如果 < 1 && 小数部分 > 0.0001
-  } else if (
-    BigNumber(valueBeforeDot).isLessThan(1) &&
-    BigNumber(`0.${valueAfterDot}`).gte(0.0001)
-  ) {
-    // 小数部分取4个长度
-    value = BigNumber(`0.${valueAfterDot}`).toFixed(4).split('.')[1];
-    // 其他情况给0计数
-  } else {
-    const lastZeroIndex = getLastZero(valueAfterDot);
-    const zeroCount = valueAfterDot.substring(0, lastZeroIndex + 1).length;
-    const noneZeroValue = valueAfterDot.substring(lastZeroIndex + 1);
-    const [, noneZeroRealValue] = (+`0.${noneZeroValue}`).toFixed(4).split('.');
-    value = `0{${zeroCount}}${noneZeroRealValue}`;
-  }
+  const computedValue = useMemo(() => {
+    let value;
+    // 整数补2个0，不用算
+    if (valueAfterDot == null) {
+      value = '00';
+      // 如果 >= 1
+    } else if (BigNumber(valueBeforeDot).gte(1)) {
+      // 小数部分取2位长度
+      value = BigNumber(`0.${valueAfterDot}`).toFixed(2).split('.')[1];
+      // 如果 < 1 && 小数部分 > 0.0001
+    } else if (
+      BigNumber(valueBeforeDot).isLessThan(1) &&
+      BigNumber(`0.${valueAfterDot}`).gte(0.0001)
+    ) {
+      // 小数部分取4个长度
+      value = BigNumber(`0.${valueAfterDot}`).toFixed(4).split('.')[1];
+      // 其他情况给0计数
+    } else {
+      const lastZeroIndex = getLastZero(valueAfterDot);
+      const zeroCount = valueAfterDot.substring(0, lastZeroIndex + 1).length;
+      const noneZeroValue = valueAfterDot.substring(lastZeroIndex + 1);
+      const [, noneZeroRealValue] = BigNumber(`0.${noneZeroValue}`).toFixed(4).split('.');
+      value = `0{${zeroCount}}${noneZeroRealValue}`;
+    }
+    return value;
+  }, [valueAfterDot, valueBeforeDot]);
+  // 拆分成2部分
 
   return (
     <span className={className}>
       {loading ? (
         <CircularProgress size={12} sx={{ marginTop: '6px' }} />
       ) : (
-        valueBeforeDot + '.' + value
+        valueBeforeDot + '.' + computedValue
       )}
     </span>
   );

src/components/icons/ArrowRight.tsx

@@ -0,0 +1,20 @@
+export default function ArrowRight() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3 7.00053H5.53363L10 7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.89502 4L11.6553 6.89496L8.76035 9.65525"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/components/icons/InfoCircle.tsx

@@ -0,0 +1,41 @@
+import { SVGProps } from 'react';
+
+export function InfoCircle(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2046_18544)">
+        <path
+          d="M9 16.5C11.071 16.5 12.9461 15.6605 14.3033 14.3033C15.6605 12.9461 16.5 11.071 16.5 9C16.5 6.92895 15.6605 5.05395 14.3033 3.6967C12.9461 2.33947 11.071 1.5 9 1.5C6.92895 1.5 5.05395 2.33947 3.6967 3.6967C2.33947 5.05395 1.5 6.92895 1.5 9C1.5 11.071 2.33947 12.9461 3.6967 14.3033C5.05395 15.6605 6.92895 16.5 9 16.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9 7.15579C9.51776 7.15579 9.9375 6.73605 9.9375 6.21829C9.9375 5.70053 9.51776 5.28079 9 5.28079C8.48224 5.28079 8.0625 5.70053 8.0625 6.21829C8.0625 6.73605 8.48224 7.15579 9 7.15579Z"
+          fill="currentColor"
+        />
+        <path
+          d="M9 8.68362L9 11.7564"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2046_18544">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

src/content/drawer/index.tsx

@@ -5,6 +5,7 @@ import Divider from '@mui/material/Divider';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
+
 import * as toaster from '../../components/Toaster';
 import { XFANS_CONTENT_WIDTH, XFANS_MIN_WIDTH } from '../../constants';
 import { ProfileData } from '../../service/login/me';
@@ -212,17 +213,17 @@ export default function PersistentDrawerRight() {
         sx={{
           width: drawerWidth,
           flexShrink: 0,
-          '& .MuiDrawer-paper': {
+          '& > .MuiDrawer-paper': {
             width: drawerWidth,
           },
         }}
         variant="persistent"
         anchor="right"
         open={isShowDrawer}
       >
-        <div className="flex h-full overflow-hidden">
+        <div className="flex h-full w-full overflow-hidden">
           <div
-            className={`mx-[2px] mt-[37px] flex h-[24px] flex-shrink-0 justify-end`}
+            className={`mx-[2px] mt-[37px] flex h-[24px] flex-1 flex-shrink-0 justify-end`}
             style={{
               width: backWidth,
             }}
@@ -233,31 +234,36 @@ export default function PersistentDrawerRight() {
             />
           </div>
           <Divider orientation="vertical" flexItem />
-          {page === PageType.Login && (
-            <SignInWithXPage
-              showLoading={loginLoading}
-              handleButtonClick={() => {
-                // reset follow status
-                useGlobalStore.setState({
-                  isGoFollow: false,
-                  isGoFollowVerify: false,
-                });
-                clickLogin();
-              }}
-            />
-          )}
-          {page === PageType.Invite && (
-            <InvitePage handleButtonClick={(inviteCode) => clickRegisterInviteCode(inviteCode)} />
-          )}
-          {page === PageType.Congratulation && (
-            <CongratulationPage goProfile={() => goPage(PageType.Profile)} />
-          )}
-          {page === PageType.Profile && (
-            <Profile handleButtonClick={() => goPage(PageType.Wallet)} />
-          )}
-          {page === PageType.Wallet && (
-            <Wallet back={() => goPage(PageType.Profile)} logout={logout} />
-          )}
+          <div
+            className="min-h-screen shrink-0"
+            style={{ width: XFANS_CONTENT_WIDTH + 'px', flexBasis: XFANS_CONTENT_WIDTH + 'px' }}
+          >
+            {page === PageType.Login && (
+              <SignInWithXPage
+                showLoading={loginLoading}
+                handleButtonClick={() => {
+                  // reset follow status
+                  useGlobalStore.setState({
+                    isGoFollow: false,
+                    isGoFollowVerify: false,
+                  });
+                  clickLogin();
+                }}
+              />
+            )}
+            {page === PageType.Invite && (
+              <InvitePage handleButtonClick={(inviteCode) => clickRegisterInviteCode(inviteCode)} />
+            )}
+            {page === PageType.Congratulation && (
+              <CongratulationPage goProfile={() => goPage(PageType.Profile)} />
+            )}
+            {page === PageType.Profile && (
+              <Profile handleButtonClick={() => goPage(PageType.Wallet)} />
+            )}
+            {page === PageType.Wallet && (
+              <Wallet back={() => goPage(PageType.Profile)} logout={logout} />
+            )}
+          </div>
         </div>
       </Drawer>
     </Box>

src/content/loginPage/congratulationPage.tsx

@@ -85,7 +85,7 @@ const CongratulationPage: FC<CongratulationPageProps> = ({ goProfile }) => {
   }, []);
 
   return (
-    <div className="min-h-screen w-full items-center justify-center text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center text-center">
       <p className="mt-[81px] mb-[44px] text-center text-[32px] font-bold leading-[38px] text-[#0F1419]">
         Congratulations!
       </p>

src/content/loginPage/invitePage.tsx

@@ -47,7 +47,7 @@ const InvitePage: FC<InvitePageProps> = ({ handleButtonClick }) => {
     }
   };
   return (
-    <div className="min-h-screen w-full items-center justify-center px-[34px] text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center px-[34px] text-center">
       <p className=" mt-[81px] text-center text-[32px] font-bold leading-[38px] text-[#0F1419]">
         Invite Code
       </p>

src/content/loginPage/signInWithXPage.tsx

@@ -11,7 +11,7 @@ interface SignInWithXPageProps {
 
 const SignInWithXPage: FC<SignInWithXPageProps> = ({ handleButtonClick, showLoading }) => {
   return (
-    <div className="min-h-screen w-full items-center justify-center text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center text-center">
       <img
         className="mx-auto mt-[81px] mb-[32px] h-[120px] w-[120px] cursor-pointer"
         src="https://cdn-fe.s3.amazonaws.com/xfans/20240328-153101.png"

src/service/contract/shares.ts

@@ -4,9 +4,8 @@ import { contractRequestHttp as http } from '../request';
 
 export async function getFloorPrice(address: string) {
   const data = await http.get<{ gasFee: string; price: string }>('/xfans/api/shares/getBuyPrice', {
-    // 地板价指买 100 个最小单位 0.01 的 amount
-    amount: '100',
     address,
+    amount: '1',
   });
   return data.price;
 }

src/service/request.ts

@@ -90,11 +90,8 @@ class RequestHttp {
       (response: AxiosResponse) => {
         const { data } = response;
         // 登陆失效
-        if (data.code == ResultEnum.OVERDUE) {
-          toaster.error(data.message);
-          useGlobalStore.setState({
-            token: '',
-          });
+        if (data.code === ResultEnum.OVERDUE) {
+          useGlobalStore.getState().logout();
           return Promise.reject(data);
         }
         // 全局错误信息拦截（防止下载文件的时候返回数据流，没有 code 直接报错）

src/welcome/Profile/Community.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { Tooltip } from '@mui/material';
 
 import { ListEmpty } from '../../components/Empty';
+import { InfoCircle } from '../../components/icons/InfoCircle';
 import Loading from '../../components/Loading';
 import useAccount from '../../hooks/useAccount';
 import { getList } from '../../service/community';
@@ -118,9 +120,14 @@ const Community = () => {
 
     return (
       <>
-        <p className="mt-[100px] text-center text-[15px] font-medium text-[#9A6CF9]">
+        <div className="mt-[100px] flex items-center justify-center text-center text-[15px] font-medium text-[#9A6CF9]">
           The Following Are Locked Communities
-        </p>
+          <Tooltip title="To unlock the community features, fans need to collectively pledge more than 3 shares. Pledges can be revoked at any time, but if the total falls below 3 shares, the community will lock again while keeping chat data.">
+            <span className="ml-[6px]">
+              <InfoCircle />
+            </span>
+          </Tooltip>
+        </div>
 
         <div>
           <ul className="mt-4 space-y-[10px]">