Merge pull request #133 from BuidlerDAO/nig-772

fix: nig-772
BuidlerDAO · Apr 30, 2024 · 568fdf6 · 568fdf6
2 parents 8d65ea4 + 77d486f
commit 568fdf6
Show file tree

Hide file tree

Showing 17 changed files with 147 additions and 58 deletions.
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
+
 import { getCurrentChain } from '../../config/chainConfig';
 interface TSelectProps {
   handleChange: (value: string) => void;

diff --git a/src/constants.ts b/src/constants.ts
@@ -21,3 +21,6 @@ export const XFANS_MIN_WIDTH = 458;
 
 export const XFANS_NETWORK_ARB = 'Arb Sepolia';
 export const XFANS_NETWORK_BERA = 'Bera Artio';
+
+// shares 精度单位，输出除以10，输入乘以10
+export const SHARE_UNIT_MODIFIER = 10;
diff --git a/src/content/drawer/index.tsx b/src/content/drawer/index.tsx
@@ -5,6 +5,7 @@ import Divider from '@mui/material/Divider';
 import Drawer from '@mui/material/Drawer';
 
 import * as toaster from '../../components/Toaster';
+import { getCurrentChain, setCurrentChain } from '../../config/chainConfig';
 import { XFANS_CONTENT_WIDTH } from '../../constants';
 import { XFANS_TOKEN } from '../../constants';
 import { ProfileData } from '../../service/login/me';
@@ -22,7 +23,6 @@ import SignInWithXPage from '../loginPage/signInWithXPage';
 import LogoButton from './logoButton';
 
 import '../../tailwind.css';
-import { setCurrentChain, getCurrentChain } from '../../config/chainConfig';
 
 export default function PersistentDrawerRight() {
   const { isShowDrawer, goPage, page, logout } = useGlobalStore((state) => ({ ...state }));

diff --git a/src/content/loginPage/signInWithXPage.tsx b/src/content/loginPage/signInWithXPage.tsx
@@ -2,7 +2,8 @@ import React, { FC } from 'react';
 
 import { NextButton } from '../../components/buttons/loginButton';
 import TSelect from '../../components/Select/index';
-import { setCurrentChain, getCurrentChain } from '../../config/chainConfig';
+import { getCurrentChain, setCurrentChain } from '../../config/chainConfig';
+
 import '../../tailwind.css';
 
 interface SignInWithXPageProps {

diff --git a/src/service/contract/shares.ts b/src/service/contract/shares.ts
@@ -1,5 +1,6 @@
 import BigNumber from 'bignumber.js';
 
+import { SHARE_UNIT_MODIFIER } from '../../constants';
 import { contractRequestHttp as http } from '../request';
 
 export async function getFloorPrice(address: string) {
@@ -12,31 +13,31 @@ export async function getFloorPrice(address: string) {
 
 export async function getBuyPrice(address: string, amount: number) {
   const data = await http.get<{ gasFee: string; price: string }>('/xfans/api/shares/getBuyPrice', {
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
     address,
   });
   return data;
 }
 
 export async function getBuyPriceAfterFee(address: string, amount: number) {
   const data = await http.get<string>('/xfans/api/shares/getBuyPriceAfterFee', {
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
     address,
   });
   return data;
 }
 
 export async function getSellPrice(address: string, amount: number) {
   const data = await http.get<{ gasFee: string; price: string }>('/xfans/api/shares/getSellPrice', {
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
     address,
   });
   return data;
 }
 
 export async function getSellPriceAfterFee(address: string, amount: number) {
   const data = await http.get<string>('/xfans/api/shares/getSellPriceAfterFee', {
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
     address,
   });
   return data;
@@ -55,14 +56,14 @@ export async function getSharesBalance(address: string) {
 
 export async function buyShares(address: string, amount: number) {
   await http.post<null>('/xfans/api/shares/buy', {
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
     address,
   });
 }
 
 export async function sellShares(address: string, amount: number) {
   await http.post<null>('/xfans/api/shares/sell', {
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
     address,
   });
 }
@@ -76,14 +77,14 @@ export async function getStakeBalance(address: string) {
 export async function stake(address: string, amount: number) {
   return await http.post<string>('/xfans/api/shares/stake', {
     address,
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
   });
 }
 
 export async function unstake(address: string, amount: number) {
   return await http.post<string>('/xfans/api/shares/unstake', {
     address,
-    amount: BigNumber(amount).times(10).toFixed(),
+    amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
   });
 }
 export async function transfer(address: string, amount: string) {

diff --git a/src/service/request.ts b/src/service/request.ts
@@ -7,10 +7,10 @@ import axios, {
 } from 'axios';
 
 import * as toaster from '../components/Toaster';
+import ChainConfig, { getCurrentChain } from '../config/chainConfig';
 import useGlobalStore from '../store/useGlobalStore';
 
 import { checkStatus } from './checkStatus';
-import ChainConfig, { getCurrentChain } from '../config/chainConfig';
 
 // 请求响应参数（不包含data）
 export interface Result {

diff --git a/src/welcome/Profile/Community.tsx b/src/welcome/Profile/Community.tsx
@@ -4,6 +4,7 @@ import { Tooltip } from '@mui/material';
 import { ListEmpty } from '../../components/Empty';
 import { InfoCircle } from '../../components/icons/InfoCircle';
 import Loading from '../../components/Loading';
+import { SHARE_UNIT_MODIFIER } from '../../constants';
 import useAccount from '../../hooks/useAccount';
 import { getList } from '../../service/community';
 import { getUnreadMessageCount, ReceiveMessage } from '../../service/room';
@@ -136,10 +137,10 @@ const Community = () => {
                   </span>
                   <div className="flex items-start justify-between">
                     <span className="text-xs text-[#5B7083]">
-                      Unlock Requires Staking: {+item.requiredStakedShares / 10}
+                      Unlock Requires Staking: {+item.requiredStakedShares / SHARE_UNIT_MODIFIER}
                     </span>
                     <span className="text-xs text-[#5B7083]">
-                      Staked: {+item.stakedShares / 10}
+                      Staked: {+item.stakedShares / SHARE_UNIT_MODIFIER}
                     </span>
                   </div>
                 </div>

diff --git a/src/welcome/Profile/Explore.tsx b/src/welcome/Profile/Explore.tsx
@@ -15,6 +15,7 @@ import UpIcon from '../../components/icons/UpIcon';
 import Loading from '../../components/Loading';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import UserName from '../../components/User';
+import { SHARE_UNIT_MODIFIER } from '../../constants';
 import { useNewList, useRecentList, useShareList, useTopList } from '../../service/share';
 import useProfileModal from '../../store/useProfileModal';
 import useShareStore from '../../store/useShareStore';
@@ -353,7 +354,7 @@ const Explore = () => {
                             }`}
                           >
                             {item.isBuy ? '+' : '-'}
-                            {Number(item.shareAmount) / 10} Shares
+                            {Number(item.shareAmount) / SHARE_UNIT_MODIFIER} Shares
                           </span>
                           <div className="flex items-center space-x-1">
                             <ETHIcon />

diff --git a/src/welcome/Profile/community/ChatRoomDrawer.tsx b/src/welcome/Profile/community/ChatRoomDrawer.tsx
@@ -10,7 +10,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Drawer } from '@mui/material';
+import { CircularProgress, Drawer } from '@mui/material';
 import { useRequest, useThrottleFn } from 'ahooks';
 import imageCompression from 'browser-image-compression';
 import dayjs from 'dayjs';
@@ -43,7 +43,11 @@ export default function ChatRoomDrawer({ open = false, community, onClose }: Pro
   const { wallet } = useAccount();
   const { messages, members, sendMessage, loadMessages } = useRoom(wallet, community?.subject);
   const ref = useRef<HTMLDivElement>(null);
-  const { data: userCount = 0, run: runGetUserCount } = useRequest(
+  const {
+    data: userCount = 0,
+    loading: loadingUserCount,
+    run: runGetUserCount,
+  } = useRequest(
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     () => getUserCount(community!.subject),
     {
@@ -161,14 +165,19 @@ export default function ChatRoomDrawer({ open = false, community, onClose }: Pro
         <header className="flex h-[64px] items-center justify-between  px-[16px] ">
           <div className="flex items-center font-bold text-[#0F1419]">
             <ArrowBackIcon className="cursor-pointer" onClick={onClose} />
-            <span className="ml-[8px]">{community?.ownerUser.username}&apos;s Community</span>
+            <span className="ml-[8px] max-w-[250px]">
+              {community?.ownerUser.username}&apos;s Community
+            </span>
           </div>
           <div className="flex leading-none">
             <div
               className="flex cursor-pointer items-center rounded-full border border-[#9A6CF9] px-[8px] py-[4px] font-medium"
               onClick={() => setIsMembersDrawerOpen(true)}
             >
-              <MembersIcon /> <span className="ml-[2px] text-[#0F1419]">{userCount}</span>
+              <MembersIcon />
+              <span className="ml-[2px] text-[#0F1419]">
+                {loadingUserCount ? <CircularProgress size={12} /> : userCount}
+              </span>
             </div>
             <div
               className="ml-[18px] flex cursor-pointer items-center rounded-full border border-[#9A6CF9] px-[8px] py-[4px] font-medium"

diff --git a/src/welcome/Profile/community/MembersDrawer.tsx b/src/welcome/Profile/community/MembersDrawer.tsx
@@ -6,8 +6,9 @@ import { Drawer, Switch } from '@mui/material';
 import { useRequest } from 'ahooks';
 
 import ArrowBackIcon from '../../../components/icons/ArrowBackIcon';
+import Loading from '../../../components/Loading';
 import { success } from '../../../components/Toaster';
-import { XFANS_CONTENT_WIDTH } from '../../../constants';
+import { SHARE_UNIT_MODIFIER, XFANS_CONTENT_WIDTH } from '../../../constants';
 import { blockUser, getUserList } from '../../../service/community';
 
 import { ToasterMessageType } from './constants';
@@ -21,7 +22,11 @@ type Props = {
 
 export default function MembersDrawer({ isOwner = false, subject, open = false, onClose }: Props) {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const { data: userList = [], run: runGetUserList } = useRequest(() => getUserList(subject!), {
+  const {
+    data: userList = [],
+    loading,
+    run: runGetUserList,
+  } = useRequest(() => getUserList(subject!), {
     manual: true,
   });
 
@@ -30,6 +35,30 @@ export default function MembersDrawer({ isOwner = false, subject, open = false,
       runGetUserList();
     }
   }, [open, runGetUserList]);
+
+  function renderContent() {
+    if (loading) {
+      return (
+        <div className="flex flex-1 items-center justify-center">
+          <Loading />
+        </div>
+      );
+    }
+    return (
+      <div className="xfans-scrollbar flex-1 overflow-y-auto px-[16px]">
+        {userList.map((item) => (
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          <MemberItem
+            key={item.address}
+            disabled={!isOwner || item.address === subject}
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            subject={subject!}
+            user={item}
+          />
+        ))}
+      </div>
+    );
+  }
   return (
     <Drawer
       sx={{
@@ -52,18 +81,7 @@ export default function MembersDrawer({ isOwner = false, subject, open = false,
             <span className="ml-[8px]">Members</span>
           </div>
         </header>
-        <div className="xfans-scrollbar flex-1 overflow-y-auto px-[16px]">
-          {userList.map((item) => (
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            <MemberItem
-              key={item.address}
-              disabled={!isOwner || item.address === subject}
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              subject={subject!}
-              user={item}
-            />
-          ))}
-        </div>
+        {renderContent()}
       </div>
     </Drawer>
   );
@@ -96,7 +114,7 @@ function MemberItem({
         <div className="font-bold text-[#0F1419]">{user.username}</div>
         <div className="text-[#919099]">
           <span className="text-sm">Holding</span>
-          <span className="font- ml-[6px] text-base">{+user.shares / 10}</span>
+          <span className="font- ml-[6px] text-base">{+user.shares / SHARE_UNIT_MODIFIER}</span>
         </div>
       </div>
       <div className="">