Merge branch 'main' into nig-647

# Conflicts:
#	src/welcome/Profile/Reward.tsx

jest.config.js

@@ -4,6 +4,31 @@ module.exports = {
   moduleNameMapper: {
     '\\.(scss|sass|css)$': 'identity-obj-proxy',
     '^@/(.*)$': '<rootDir>/src/$1',
+    'lodash-es': 'lodash',
   },
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  globals: {
+    'ts-jest': {
+      diagnostics: {
+        ignoreCodes: [1343],
+      },
+      astTransformers: {
+        before: [
+          {
+            path: 'node_modules/ts-jest-mock-import-meta', // or, alternatively, 'ts-jest-mock-import-meta' directly, without node_modules.
+            options: {
+              metaObjectReplacement: {
+                env: {
+                  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-xfans-api.d.buidlerdao.xyz',
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
 };

package.json

@@ -107,6 +107,7 @@
     "stylelint-config-standard": "26.0.0",
     "tailwindcss": "3.1.8",
     "ts-jest": "28.0.7",
+    "ts-jest-mock-import-meta": "1.2.0",
     "ts-node": "10.9.1",
     "typescript": "4.7.4",
     "vite": "2.9.14"

src/components/NumberDisplayer.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+
+import { NumberDisplayer } from './NumberDisplayer';
+
+it('bignumber should work well', () => {
+  expect(render(<NumberDisplayer text="3368437500000000" />).container).toMatchSnapshot();
+});
+it('integer should be append two zero to tail', () => {
+  expect(render(<NumberDisplayer text="3000000000000000000" />).container).toMatchSnapshot();
+});
+it('if interer part great than 1, decimal part should have 2 decimals', () => {
+  expect(render(<NumberDisplayer text="3145000000000000000" />).container).toMatchSnapshot();
+});
+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();
+});
+
+it('should throw error if text is not string', () => {
+  expect(() =>
+    render(<NumberDisplayer text={3.14 as unknown as string} />)
+  ).toThrowErrorMatchingSnapshot();
+});

src/components/NumberDisplayer.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
 import BigNumber from 'bignumber.js';
-import Loading from './Loading';
-import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
 
 type NumberDisplayerProps = {
   text?: string;
   className?: string;
-  /**
-   * @default true
-   */
-  isBigNumber?: boolean;
   /**
    * @default false
    */
@@ -21,16 +16,11 @@ type NumberDisplayerProps = {
  *
  * eg. 0.0{4}5252
  */
-export function NumberDisplayer({
-  text = '0',
-  className,
-  isBigNumber = true,
-  loading = false,
-}: NumberDisplayerProps) {
+export function NumberDisplayer({ text = '0', className, loading = false }: NumberDisplayerProps) {
+  // 防止不会使用，或者错误传错类型，有助于开发阶段尽早发现问题
+  if (typeof text !== 'string') throw new Error('text should be string');
   // 转成处理过后的字符串形式
-  const number = isBigNumber
-    ? new BigNumber(text).dividedBy(new BigNumber(Math.pow(10, 18))).toFixed()
-    : text;
+  const number = new BigNumber(text).dividedBy(new BigNumber(Math.pow(10, 18))).toFixed();
   // 拆分成2部分
   const [valueBeforeDot, valueAfterDot] = number.split('.');
   let value;

src/components/__snapshots__/NumberDisplayer.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`bignumber should work well 1`] = `
+<div>
+  <span>
+    0.0034
+  </span>
+</div>
+`;
+
+exports[`if decimal part less than 0.0001, decimal part should round into 4 decimals 1`] = `
+<div>
+  <span>
+    0.0{13}1246
+  </span>
+</div>
+`;
+
+exports[`if integer part less than 1, decimal part should have 4 decimals 1`] = `
+<div>
+  <span>
+    0.1450
+  </span>
+</div>
+`;
+
+exports[`if interer part great than 1, decimal part should have 2 decimals 1`] = `
+<div>
+  <span>
+    3.15
+  </span>
+</div>
+`;
+
+exports[`integer should be append two zero to tail 1`] = `
+<div>
+  <span>
+    3.00
+  </span>
+</div>
+`;
+
+exports[`should throw error if text is not string 1`] = `"text should be string"`;

src/components/twitterAdded/feedsPage/ethIcon.tsx

@@ -27,7 +27,7 @@ export const FriendPrice: FC<FriendPriceProps> = ({ twitterUsername }) => {
     batchUserInfo(userInfo);
   }, []);
 
-  return !isShowPrice && userInfo?.isRegistered ? (
+  return !isShowPrice && userInfo?.isActive ? (
     <div
       className="w-auto items-center justify-center text-center"
       onClick={(e) => {

src/components/twitterAdded/twitterPage/userEthIcon.tsx

@@ -54,7 +54,7 @@ export const UserPagePrice: FC<UserPagePriceProps> = ({ twitterUsername }) => {
     setElementWidth(width);
   }, []); // This effect runs only once after the initial render
 
-  return !isShowPrice && userInfo?.isActive ? (
+  return userInfo?.isActive ? (
     <span
       onClick={(e) => {
         openProfile(userInfo);

src/content/Content.tsx

@@ -1,7 +1,6 @@
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
 
 import Toaster from '../components/Toaster';
-import http from '../service/request';
 
 import PersistentDrawerRight from './drawer';
 

src/service/share/index.ts

@@ -93,4 +93,20 @@ const useHolderList = () => {
   return result;
 };
 
-export { useHolderList, useNewList, useRecentList, useShareList, useTopList };
+const useEthPrice = () => {
+  const result = useRequest<ResultData<{ id: number; symbol: string; price: number }>, unknown[]>(
+    () => http.get('/api/share/eth-price'),
+    {
+      manual: true,
+      onSuccess(response) {
+        useShareStore.setState({
+          ethPrice: response.data,
+        });
+      },
+    }
+  );
+
+  return result;
+};
+
+export { useEthPrice, useHolderList, useNewList, useRecentList, useShareList, useTopList };

src/store/useShareStore.ts

@@ -9,6 +9,7 @@ interface ShareStoreProps {
   holderListTotal: number;
   holderingList: HolderProps[] | null;
   holderingListTotal: number;
+  ethPrice: { id: number; symbol: string; price: number } | null;
 }
 
 const useShareStore = create<ShareStoreProps>((set) => ({
@@ -20,6 +21,7 @@ const useShareStore = create<ShareStoreProps>((set) => ({
   holderListTotal: 0,
   holderingList: null,
   holderingListTotal: 0,
+  ethPrice: null,
 }));
 
 export default useShareStore;

src/welcome/Profile/Claim.tsx

@@ -37,7 +37,7 @@ const Icon = () => (
   </svg>
 );
 
-const Claim = (props: { price?: string }) => {
+const Claim = (props: { price?: number }) => {
   const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
   const { tweetRewardList, tweetRewardTotalRewardAmount } = useTweetStore((state) => ({
     ...state,

src/welcome/Profile/Explore.tsx

@@ -282,7 +282,7 @@ const Explore = () => {
                       <span className="text-[14px] font-normal text-[#A1A1AA]">
                         {dayjs(item.createdAt).format('YYYY/MM/DD HH:mm')}
                       </span>
-                      <div className="flex items-center justify-between pl-4">
+                      <div className="flex items-center justify-between pl-6">
                         <div className="flex items-center space-x-9">
                           <div className="flex w-9 flex-col items-center">
                             <img

src/welcome/Profile/History.tsx

@@ -36,7 +36,7 @@ const Icon = () => (
   </svg>
 );
 
-const History = (props: { price?: string }) => {
+const History = (props: { price?: number }) => {
   const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
   const { rewardHistoryList, rewardHistoryListTotal, rewardHistoryTotalRewardAmount } =
     useTweetStore((state) => ({ ...state }));

src/welcome/Profile/Reward.tsx

@@ -5,15 +5,14 @@ import TabPanel from '@mui/lab/TabPanel';
 import { Divider } from '@mui/material';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
-import { useAsyncEffect } from 'ahooks';
 import dayjs from 'dayjs';
 import { CenterLoading } from '../../components/Loading';
 import { ListEmpty } from '../../components/Empty';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import { useTweetList, useTweetYourRank } from '../../service/tweet';
 import { usePoolBalance } from '../../service/wallet';
-
 import useProfileModal from '../../store/useProfileModal';
+import useShareStore from '../../store/useShareStore';
 import useTweetStore from '../../store/useTweetStore';
 import useUserStore from '../../store/useUserStore';
 
@@ -41,7 +40,6 @@ const Icon = () => (
 const Reward = () => {
   const { openProfile } = useProfileModal((state) => ({ ...state }));
   const list = Array(7).fill('');
-  const [priceMap, setPriceMap] = useState<Record<string, any>>([]);
   const [value, setValue] = React.useState('1');
   const [poolBalance, setPoolBalance] = React.useState('0');
   const { run: getTweet, loading: loadingTweetList } = useTweetList();
@@ -54,7 +52,7 @@ const Reward = () => {
   const currentIndex = tweetList
     ? tweetList?.findIndex((item) => item.author?.twitterId === userInfo?.twitterId)
     : -1;
-  console.log('tweetList', tweetList);
+  const { ethPrice } = useShareStore((state) => ({ ...state }));
 
   const { loading, run: fetchPool } = usePoolBalance(
     (balance) => {
@@ -134,8 +132,8 @@ const Reward = () => {
         </div>
 
         <div className="flex items-center space-x-[14px]">
-          <Claim price={priceMap.find((item: any) => item.symbol === 'ETHUSDT')?.price} />
-          <History price={priceMap.find((item: any) => item.symbol === 'ETHUSDT')?.price} />
+          <Claim price={ethPrice?.price} />
+          <History price={ethPrice?.price} />
         </div>
       </div>