From c403dac4842b86f7851445778dc7cdb01fa1d8c8 Mon Sep 17 00:00:00 2001 From: binmax <501711499@qq.com> Date: Sun, 28 Apr 2024 23:18:06 +0800 Subject: [PATCH 1/2] fix: nig-772 --- .env | 1 + src/constants.ts | 5 +- src/service/contract/shares.ts | 17 ++-- src/welcome/Profile/Community.tsx | 5 +- src/welcome/Profile/Explore.tsx | 3 +- .../Profile/community/ChatRoomDrawer.tsx | 19 +++-- .../Profile/community/MembersDrawer.tsx | 48 +++++++---- src/welcome/Profile/community/StackModal.tsx | 80 +++++++++++++++---- src/welcome/Wallet/Profile.tsx | 6 +- src/welcome/Wallet/SellModal.tsx | 6 +- 10 files changed, 138 insertions(+), 52 deletions(-) diff --git a/.env b/.env index 0451449..9516c28 100644 --- a/.env +++ b/.env @@ -2,4 +2,5 @@ VITE_SOCKET_BASE_URL="wss://dev-chat-xfans-api.buidlerdao.xyz" VITE_ROOM_BASE_URL="https://dev-chat-xfans-api.buidlerdao.xyz" VITE_CONTRACT_BASE_URL="https://test-mpc-xfans-api.buidlerdao.xyz" VITE_BASE_URL="https://test-api.xfans.tech" +VITE_NETWORK="Arb Sepolia" diff --git a/src/constants.ts b/src/constants.ts index 4844c2d..f5f26d9 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -19,4 +19,7 @@ export enum ContractError { export const XFANS_CONTENT_WIDTH = 433; export const XFANS_MIN_WIDTH = 458; -export const XFANS_NETWORK = 'Arb Sepolia'; +export const XFANS_NETWORK = import.meta.env.VITE_NETWORK; + +// shares 精度单位，输出除以10，输入乘以10 +export const SHARE_UNIT_MODIFIER = 10; diff --git a/src/service/contract/shares.ts b/src/service/contract/shares.ts index b5b218c..770598d 100644 --- 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,7 +13,7 @@ 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; @@ -20,7 +21,7 @@ export async function getBuyPrice(address: string, amount: number) { export async function getBuyPriceAfterFee(address: string, amount: number) { const data = await http.get('/xfans/api/shares/getBuyPriceAfterFee', { - amount: BigNumber(amount).times(10).toFixed(), + amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(), address, }); return data; @@ -28,7 +29,7 @@ export async function getBuyPriceAfterFee(address: string, amount: number) { 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; @@ -36,7 +37,7 @@ export async function getSellPrice(address: string, amount: number) { export async function getSellPriceAfterFee(address: string, amount: number) { const data = await http.get('/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('/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('/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('/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('/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/welcome/Profile/Community.tsx b/src/welcome/Profile/Community.tsx index e3fd030..8d34580 100644 --- 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 = () => {
- Unlock Requires Staking: {+item.requiredStakedShares / 10} + Unlock Requires Staking: {+item.requiredStakedShares / SHARE_UNIT_MODIFIER} - Staked: {+item.stakedShares / 10} + Staked: {+item.stakedShares / SHARE_UNIT_MODIFIER}
diff --git a/src/welcome/Profile/Explore.tsx b/src/welcome/Profile/Explore.tsx index aa8e36e..f094c2f 100644 --- 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
diff --git a/src/welcome/Profile/community/ChatRoomDrawer.tsx b/src/welcome/Profile/community/ChatRoomDrawer.tsx index 2f0e380..ab6c925 100644 --- 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(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), { @@ -102,7 +106,7 @@ export default function ChatRoomDrawer({ open = false, community, onClose }: Pro runGetMyInfo(); } }, [open, runGetMyInfo, runGetUserCount]); - + console.log(loadingUserCount); const { run: handleScroll } = useThrottleFn( (env: React.UIEvent) => { if (ref.current == null) return; @@ -161,14 +165,19 @@ export default function ChatRoomDrawer({ open = false, community, onClose }: Pro
- {community?.ownerUser.username}'s Community + + {community?.ownerUser.username}'s Community +
setIsMembersDrawerOpen(true)} > - {userCount} + + + {loadingUserCount ? : userCount} +
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 ( +
+ +
+ ); + } + return ( +
+ {userList.map((item) => ( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + + ))} +
+ ); + } return ( Members
-
- {userList.map((item) => ( - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - - ))} -
+ {renderContent()}
); @@ -96,7 +114,7 @@ function MemberItem({
{user.username}
Holding - {+user.shares / 10} + {+user.shares / SHARE_UNIT_MODIFIER}
diff --git a/src/welcome/Profile/community/StackModal.tsx b/src/welcome/Profile/community/StackModal.tsx index 6b8f14f..6e674ab 100644 --- a/src/welcome/Profile/community/StackModal.tsx +++ b/src/welcome/Profile/community/StackModal.tsx @@ -6,6 +6,7 @@ import { BasicButton, PrimaryButton } from '../../../components/Button'; import Modal from '../../../components/Modal'; import NumberInput from '../../../components/NumberInput'; import { success } from '../../../components/Toaster'; +import { SHARE_UNIT_MODIFIER } from '../../../constants'; import { getBySubject } from '../../../service/community'; import { getSharesBalance, @@ -22,8 +23,8 @@ type ModalProps = { export default function StackModal({ onClose, subject }: ModalProps) { const [currentTab, setCurrentTab] = useState<'stack' | 'unstack'>('stack'); const activedTabNavClassName = 'bg-[#9A6CF9] text-white'; - const [sharesBalance, setSharesBalance] = useState('0'); - const [stakeBalance, setStakeBalance] = useState('0'); + const [sharesBalance, setSharesBalance] = useState(null); + const [stakeBalance, setStakeBalance] = useState(null); const { data: community } = useRequest(() => getBySubject(subject)); useEffect(() => { @@ -45,7 +46,13 @@ export default function StackModal({ onClose, subject }: ModalProps) {

- Stake at least 5 shares to unlock the + Stake at least{' '} + {community?.requiredStakedShares == null ? ( + + ) : ( + +community.requiredStakedShares / SHARE_UNIT_MODIFIER + )}{' '} + shares to unlock the
creator's community

@@ -54,9 +61,21 @@ export default function StackModal({ onClose, subject }: ModalProps) { stakeRequired={+(community?.requiredStakedShares ?? 0)} />

- Community total staked: {+(community?.stakedShares ?? 0) / 10} + Community total staked: + {community?.stakedShares == null ? ( + + ) : ( + +(community.stakedShares ?? 0) / SHARE_UNIT_MODIFIER + )} +

+

+ you staked: + {stakeBalance == null ? ( + + ) : ( + +stakeBalance / SHARE_UNIT_MODIFIER + )}

-

you staked: {+stakeBalance / 10}

{/* tab bar */}
@@ -93,7 +112,7 @@ export default function StackModal({ onClose, subject }: ModalProps) { type StackPanelProps = { address: string; - sharesBalance: string; + sharesBalance: string | null; // false cancel true confirm onClose(fromConfirm?: boolean): void; }; @@ -114,8 +133,22 @@ function StackPanel({ sharesBalance, onClose, address }: StackPanelProps) { <>

- Shares you hold: {+sharesBalance / 10} - Max stake: {+sharesBalance / 10} + + Shares you hold: + {sharesBalance == null ? ( + + ) : ( + +sharesBalance / SHARE_UNIT_MODIFIER + )} + + + Max stake: + {sharesBalance == null ? ( + + ) : ( + +sharesBalance / SHARE_UNIT_MODIFIER + )} +

setAmount(v ?? 0)} />
@@ -155,7 +188,7 @@ function StackPanel({ sharesBalance, onClose, address }: StackPanelProps) { type UnstackPanelProps = { address: string; - stakeBalance: string; + stakeBalance: string | null; // false cancel true confirm onClose(fromConfirm?: boolean): void; }; @@ -176,8 +209,22 @@ function UnstackPanel({ stakeBalance, address, onClose }: UnstackPanelProps) { <>

- Shares you staked: {+stakeBalance / 10} - Max unstake: {+stakeBalance / 10} + + Shares you staked: + {stakeBalance == null ? ( + + ) : ( + +stakeBalance / SHARE_UNIT_MODIFIER + )} + + + Max unstake: + {stakeBalance == null ? ( + + ) : ( + +stakeBalance / SHARE_UNIT_MODIFIER + )} +

setAmount(v ?? 0)} />
@@ -225,10 +272,15 @@ function ProgressBar({ staked, stakeRequired }: { staked: number; stakeRequired: style={{ width: `calc(${Math.min(percentage, 100)}%)`, background: 'linear-gradient(92.17deg, #BD95FF 1.19%, #9A6CF9 98.18%)', + transition: 'width 0.3s ease-in-out', }} />
- {stakeRequired / 10} + {stakeRequired === 0 ? ( + + ) : ( + stakeRequired / SHARE_UNIT_MODIFIER + )}
); diff --git a/src/welcome/Wallet/Profile.tsx b/src/welcome/Wallet/Profile.tsx index d79dce9..b8342fb 100644 --- a/src/welcome/Wallet/Profile.tsx +++ b/src/welcome/Wallet/Profile.tsx @@ -14,7 +14,7 @@ import TableEmptyWidget from '../../components/Empty'; import { CenterLoading } from '../../components/Loading'; import Modal from '../../components/Modal'; import { NumberDisplayer } from '../../components/NumberDisplayer'; -import { ROWS_PER_PAGE } from '../../constants'; +import { ROWS_PER_PAGE, SHARE_UNIT_MODIFIER } from '../../constants'; import { useHolderList } from '../../service/share'; import { useTweetList } from '../../service/tweet'; import useProfileModal from '../../store/useProfileModal'; @@ -49,7 +49,7 @@ const ProfileModal = () => { {item.holderUser?.username}
), - shares: Number(item.shares) / 10, + shares: Number(item.shares) / SHARE_UNIT_MODIFIER, value: (
@@ -70,7 +70,7 @@ const ProfileModal = () => { {item.subjectUser?.username}
), - shares: Number(item.shares) / 10, + shares: Number(item.shares) / SHARE_UNIT_MODIFIER, value: (
diff --git a/src/welcome/Wallet/SellModal.tsx b/src/welcome/Wallet/SellModal.tsx index 920cee2..7d63026 100644 --- a/src/welcome/Wallet/SellModal.tsx +++ b/src/welcome/Wallet/SellModal.tsx @@ -7,7 +7,7 @@ import Modal from '../../components/Modal'; import { NumberDisplayer } from '../../components/NumberDisplayer'; import NumberInput, { NumberInputRef } from '../../components/NumberInput'; import * as toaster from '../../components/Toaster'; -import { ContractError } from '../../constants'; +import { ContractError, SHARE_UNIT_MODIFIER } from '../../constants'; import useAccount from '../../hooks/useAccount'; import { useETHPrice } from '../../hooks/useETHPrice'; import { @@ -215,7 +215,7 @@ const SellModal = ({ onClose }: SellModalProps) => { {loadingSharesBalance ? ( ) : ( - +shareBalance / 10 + +shareBalance / SHARE_UNIT_MODIFIER )}
@@ -226,7 +226,7 @@ const SellModal = ({ onClose }: SellModalProps) => { className="!mt-6" fullWidth label="Amount" - max={+shareBalance / 10} + max={+shareBalance / SHARE_UNIT_MODIFIER} disabled={isSelling} onChange={(v) => { setAmount(v ?? 0); From b1db4d710448234f6cad70a652e17badf247f13e Mon Sep 17 00:00:00 2001 From: binmax <501711499@qq.com> Date: Mon, 29 Apr 2024 10:18:40 +0800 Subject: [PATCH 2/2] chore: remove useless code --- src/welcome/Profile/community/ChatRoomDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/welcome/Profile/community/ChatRoomDrawer.tsx b/src/welcome/Profile/community/ChatRoomDrawer.tsx index ab6c925..83d83bb 100644 --- a/src/welcome/Profile/community/ChatRoomDrawer.tsx +++ b/src/welcome/Profile/community/ChatRoomDrawer.tsx @@ -106,7 +106,7 @@ export default function ChatRoomDrawer({ open = false, community, onClose }: Pro runGetMyInfo(); } }, [open, runGetMyInfo, runGetUserCount]); - console.log(loadingUserCount); + const { run: handleScroll } = useThrottleFn( (env: React.UIEvent) => { if (ref.current == null) return;