Merge pull request #126 from BuidlerDAO/nig-722

fix: nig-722
BuidlerDAO · Apr 18, 2024 · 090d77a · 090d77a
2 parents 9039ff6 + 000652c
commit 090d77a
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 121 deletions.
diff --git a/src/hooks/useETHPrice.ts b/src/hooks/useETHPrice.ts
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import { useEthPrice as useEthPriceService } from '../service/share';
+import useShareStore from '../store/useShareStore';
+
+/**
+ * 获取最新 eth 价格
+ */
+export function useETHPrice() {
+  const { run: getPrice } = useEthPriceService();
+  const { ethPrice } = useShareStore((state) => ({ ...state }));
+
+  useEffect(() => {
+    getPrice();
+  }, [getPrice]);
+
+  return ethPrice?.price ?? 0;
+}
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
-import { OAUTH2, XFANS_MIN_WIDTH, XFANS_CONTENT_WIDTH } from './constants';
+
+import { OAUTH2, XFANS_CONTENT_WIDTH, XFANS_MIN_WIDTH } from './constants';
 
 export function formatTime(seconds: any) {
   if (seconds < 60) {
@@ -18,6 +19,20 @@ export function formatTime(seconds: any) {
   }
 }
 
+export function formatDollar(amount: string, ethPrice: number) {
+  const number = new BigNumber(amount)
+    .dividedBy(new BigNumber(Math.pow(10, 18)))
+    .multipliedBy(new BigNumber(ethPrice ?? 0));
+
+  if (number.gte(0.00001)) {
+    return `≈$${number.toFixed(5)}`;
+  } else if (number.isGreaterThan(0)) {
+    return `<$0.00001`;
+  } else {
+    return '≈$0';
+  }
+}
+
 export function getTimeDistanceFromDate(date: any) {
   const now = dayjs();
   const targetDate = dayjs(date);

diff --git a/src/welcome/Profile/Claim.tsx b/src/welcome/Profile/Claim.tsx
@@ -7,17 +7,18 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { useToggle } from 'ahooks';
-import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
 
 import { BasicButton, PrimaryLoadingButton } from '../../components/Button';
 import TableEmptyWidget from '../../components/Empty';
 import Modal from '../../components/Modal';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import * as toaster from '../../components/Toaster';
+import { useETHPrice } from '../../hooks/useETHPrice';
 import { useTweetReward } from '../../service/tweet';
 import { useWalletClaimReward } from '../../service/wallet';
 import useTweetStore from '../../store/useTweetStore';
+import { formatDollar } from '../../utils';
 
 const Icon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -43,10 +44,7 @@ const Claim = (props: { price?: number }) => {
     ...state,
   }));
   const { run: getReward } = useTweetReward();
-
-  const rewardUSD = new BigNumber(tweetRewardTotalRewardAmount)
-    .dividedBy(new BigNumber(Math.pow(10, 18)))
-    .multipliedBy(new BigNumber(props.price ?? 0));
+  const ethPrice = useETHPrice();
 
   const { loading, run: claimReward } = useWalletClaimReward(
     tweetRewardList,
@@ -90,7 +88,7 @@ const Claim = (props: { price?: number }) => {
               </span>
               <div className="flex flex-col space-y-2">
                 <span className="text-xl font-medium leading-[20px] text-[#0F1419]">
-                  ${rewardUSD.toString()}
+                  {formatDollar(tweetRewardTotalRewardAmount, ethPrice)}
                 </span>
                 <div className="flex items-center space-x-1">
                   <Icon />
@@ -109,7 +107,7 @@ const Claim = (props: { price?: number }) => {
               onClick={() => {
                 claimReward();
               }}
-              disabled={loading || rewardUSD.isZero()}
+              disabled={loading || tweetRewardTotalRewardAmount === '0'}
               loading={loading}
               loadingPosition="end"
               endIcon={<span />}

diff --git a/src/welcome/Profile/History.tsx b/src/welcome/Profile/History.tsx
@@ -7,16 +7,17 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { useToggle } from 'ahooks';
-import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
 
 import { BasicButton } from '../../components/Button';
 import TableEmptyWidget from '../../components/Empty';
 import Modal from '../../components/Modal';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import { ROWS_PER_PAGE } from '../../constants';
+import { useETHPrice } from '../../hooks/useETHPrice';
 import { useTweetRewardHistory } from '../../service/tweet';
 import useTweetStore from '../../store/useTweetStore';
+import { formatDollar } from '../../utils';
 
 const Icon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -41,6 +42,7 @@ const History = (props: { price?: number }) => {
   const { rewardHistoryList, rewardHistoryListTotal, rewardHistoryTotalRewardAmount } =
     useTweetStore((state) => ({ ...state }));
   const [page, setPage] = useState(0);
+  const ethPrice = useETHPrice();
 
   const { run: getRewardHistory, loading } = useTweetRewardHistory();
 
@@ -76,11 +78,7 @@ const History = (props: { price?: number }) => {
               </span>
               <div className="flex flex-col space-y-[6px]">
                 <span className="text-xl font-medium leading-[20px] text-[#0F1419]">
-                  $
-                  {new BigNumber(rewardHistoryTotalRewardAmount)
-                    .dividedBy(new BigNumber(Math.pow(10, 18)))
-                    .multipliedBy(new BigNumber(props.price ?? 0))
-                    .toNumber()}
+                  {formatDollar(rewardHistoryTotalRewardAmount, ethPrice)}
                 </span>
                 <div className="flex items-center space-x-1">
                   <Icon />

diff --git a/src/welcome/Wallet/BuyModal.tsx b/src/welcome/Wallet/BuyModal.tsx
@@ -7,9 +7,9 @@ import Modal from '../../components/Modal';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import NumberInput, { NumberInputRef } from '../../components/NumberInput';
 import * as toaster from '../../components/Toaster';
-import TruncateText from '../../components/TruncateText';
 import { ContractError } from '../../constants';
 import useAccount from '../../hooks/useAccount';
+import { useETHPrice } from '../../hooks/useETHPrice';
 import {
   buyShares,
   getBuyPrice,
@@ -18,7 +18,7 @@ import {
 } from '../../service/contract/shares';
 import { getBalance } from '../../service/contract/user';
 import useProfileModal from '../../store/useProfileModal';
-import useShareStore from '../../store/useShareStore';
+import { formatDollar } from '../../utils';
 
 const Icon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24" fill="none">
@@ -77,7 +77,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
   const [loadingPirceAfterFee, setLoadingPirceAfterFee] = useState<boolean>(false);
   const [loadingBalance, setLoadingBalance] = useState<boolean>(true);
 
-  const { ethPrice } = useShareStore((state) => ({ ...state }));
+  const ethPrice = useETHPrice();
 
   useEffect(() => {
     if (amount === 0) {
@@ -127,18 +127,6 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
     }
   }, [wallet]);
 
-  const totalPriceUSD = useMemo(() => {
-    if (price !== '0' && priceAfterFee !== '0') {
-      const _totalPriceUSD = new BigNumber(price)
-        .dividedBy(new BigNumber(Math.pow(10, 18)))
-        .multipliedBy(new BigNumber(ethPrice?.price ?? 0))
-        .toFixed(5);
-      return _totalPriceUSD.toString();
-    } else {
-      return '0';
-    }
-  }, [price, priceAfterFee, ethPrice?.price]);
-
   // Transaction fee
   const transactionFee = useMemo(() => {
     if (price !== '0' && priceAfterFee !== '0') {
@@ -149,19 +137,6 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
     }
   }, [price, priceAfterFee]);
 
-  const transactionFeeUSD = useMemo(() => {
-    if (price !== '0' && priceAfterFee !== '0') {
-      const _transactionFee = new BigNumber(priceAfterFee)
-        .minus(new BigNumber(price))
-        .dividedBy(new BigNumber(Math.pow(10, 18)))
-        .multipliedBy(new BigNumber(ethPrice?.price ?? 0))
-        .toFixed(5);
-      return _transactionFee.toString();
-    } else {
-      return '0';
-    }
-  }, [price, priceAfterFee, ethPrice?.price]);
-
   // total
   const total = useMemo(() => {
     if (priceAfterFee !== '0' && gasFee !== '0') {
@@ -172,22 +147,6 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
     }
   }, [gasFee, priceAfterFee]);
 
-  const gasFeeUSD = useMemo(() => {
-    if (priceAfterFee !== '0' && gasFee !== '0') {
-      const _gasFee = new BigNumber(gasFee)
-        .dividedBy(new BigNumber(Math.pow(10, 18)))
-        .multipliedBy(new BigNumber(ethPrice?.price ?? 0));
-
-      if (_gasFee.comparedTo(new BigNumber(0.00001)) >= 0) {
-        return _gasFee.toFixed(5).toString();
-      } else {
-        return 0.00001;
-      }
-    } else {
-      return '0';
-    }
-  }, [gasFee, priceAfterFee, ethPrice?.price]);
-
   // 刷新数据, 可能有顺序问题
   function refresh() {
     numberInputRef.current?.reset();
@@ -268,7 +227,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
                   <NumberDisplayer text={price} loading={loadingPrice || loadingPirceAfterFee} />
                 </span>
               </div>
-              <span className="text-[#919099]">≈${totalPriceUSD}</span>
+              <span className="text-[#919099]">{formatDollar(price, ethPrice)}</span>
             </div>
           </div>
         </div>
@@ -295,7 +254,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
                   />
                 </span>
               </div>
-              <span className="text-[#919099]">≈${transactionFeeUSD}</span>
+              <span className="text-[#919099]">{formatDollar(transactionFee, ethPrice)}</span>
             </div>
           </div>
           <div className="flex items-center justify-between">
@@ -307,9 +266,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
                   <NumberDisplayer text={gasFee} loading={loadingPrice} />
                 </span>
               </div>
-              <span className="text-[#919099]">
-                {gasFeeUSD === '0' || gasFeeUSD !== 0.00001 ? `≈$${gasFeeUSD}` : '<$0.00001'}
-              </span>
+              <span className="text-[#919099]">{formatDollar(gasFee, ethPrice)}</span>
             </div>
           </div>
         </div>

diff --git a/src/welcome/Wallet/Profile.tsx b/src/welcome/Wallet/Profile.tsx
@@ -15,7 +15,7 @@ import { CenterLoading } from '../../components/Loading';
 import Modal from '../../components/Modal';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import { ROWS_PER_PAGE } from '../../constants';
-import { useEthPrice, useHolderList } from '../../service/share';
+import { useHolderList } from '../../service/share';
 import { useTweetList } from '../../service/tweet';
 import useProfileModal from '../../store/useProfileModal';
 import useShareStore from '../../store/useShareStore';
@@ -36,8 +36,6 @@ const ProfileModal = () => {
   const [isSellModalOpen, { setLeft: closeSellModal, setRight: openSellModal }] = useToggle(false);
   const [loadingx, setLoadingx] = useState(true);
 
-  const { run: getPrice } = useEthPrice();
-
   const openTwitterProfile = (username: string | undefined) =>
     username && window.open(`https://twitter.com/${username}`, '_blank');
 
@@ -149,12 +147,6 @@ const ProfileModal = () => {
     }
   }, [curPages, fetchMap, currentKey, open]);
 
-  useEffect(() => {
-    if (isBuyModalOpen || isSellModalOpen) {
-      getPrice();
-    }
-  }, [isBuyModalOpen, isSellModalOpen]);
-
   return (
     <>
       <Modal onClose={closeProfile} open={open} width={626} closebuttonstyle={{ marginTop: '5px' }}>