feat(components): add Number

Author: rockgold0911

UI/home/index.tsx

@@ -7,10 +7,10 @@ import Image from 'next/image'
 import BackgroundImage from './images/001-background.png'
 import { H1, H2, H3, H5 } from 'components/Typography'
 import FollowGrid from 'components/Follow/FollowGrid'
-import { useNumberFormat } from 'app/utils/number/hooks'
 import type { FollowMember } from 'components/Follow/types'
 import { DEFAULT_AVATARS, getFilePath } from 'app/constant'
 import { useUser } from 'domains/data'
+import { DisplayNumber } from 'components/Number'
 
 const FEATURED_PEOPLES: FollowMember[] = [
   {
@@ -54,7 +54,6 @@ const ROOT = styled(Stack)``
 const FollowGridDynamic = dynamic(async () => FollowGrid, { ssr: false })
 
 const Home: FC = () => {
-  const NF = useNumberFormat()
   const { account, selectDialog } = useUser()
   return (
     <ROOT spacing={2}>
@@ -67,7 +66,9 @@ const Home: FC = () => {
             </Stack>
             <Stack spacing={4} direction="row">
               <Stack spacing={2}>
-                <H2>{NF.format(1234123, NF.getOptions('number'))}</H2>
+                <H2>
+                  <DisplayNumber value={1234123} />
+                </H2>
                 <H5 sx={{ color: 'grey.400' }}>Total Users</H5>
               </Stack>
               <Stack spacing={2}>

UI/profile-board/ProfileInfo/index.tsx

@@ -9,7 +9,6 @@ import CardActions from '@mui/material/CardActions'
 import Stack from '@mui/material/Stack'
 import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
-import { useNumberFormat } from 'app/utils/number/hooks'
 import { Paragraph, H2, H3 } from 'components/Typography'
 import TwitterButton from 'components/btn/TwitterButton'
 import { useNFT3Follow, useNFT3Profile, useNFT3, useUser, useNFT3Social, useNFT3Wallet } from 'domains/data'
@@ -21,6 +20,7 @@ import etherscanIcon from './images/etherscan.svg'
 import looksrareIcon from './images/looksrare.svg'
 import openseaIcon from './images/opensea.svg'
 import FlexBetween from 'components/flexbox/FlexBetween'
+import { DisplayNumber } from 'components/Number'
 
 const ROOT = styled(Card)``
 
@@ -32,7 +32,6 @@ const ProfileInfo: FC = () => {
   const NFT3Follow = useNFT3Follow()
   const { twitter } = useNFT3Social()
   const { format } = useNFT3()
-  const NF = useNumberFormat()
   const { followed, count, follow, unfollow } = NFT3Follow
   const followContent = useMemo(
     () =>
@@ -100,12 +99,16 @@ const ProfileInfo: FC = () => {
           </Stack>
           <FlexBetween>
             <Stack spacing={2} flex="1" textAlign="center">
-              <H3 fontWeight={700}>{NF.format(count.following, NF.getOptions('number'))}</H3>
+              <H3 fontWeight={700}>
+                <DisplayNumber value={count.following} />
+              </H3>
               <Paragraph sx={{ color: 'text.secondary' }}>Following</Paragraph>
             </Stack>
             <Divider orientation="vertical" sx={{ height: 30 }} />
             <Stack spacing={2} flex="1" textAlign="center">
-              <H3 fontWeight={700}>{NF.format(count.followers, NF.getOptions('number'))}</H3>
+              <H3 fontWeight={700}>
+                <DisplayNumber value={count.followers} />
+              </H3>
               <Paragraph sx={{ color: 'text.secondary' }}>Follows</Paragraph>
             </Stack>
           </FlexBetween>

components/Follow/FollowCard.tsx

@@ -13,8 +13,8 @@ import { useFollow } from 'domains/data/nft3/follow/hooks'
 import type { FollowMember } from './types'
 import { createToastifyPromise } from 'app/utils/promise/toastify'
 import { useDebounceMemo } from 'app/hooks/useDebounceMemo'
-import { useNumberFormat } from 'app/utils/number/hooks'
 import { getDefaultProfileAvatar } from 'domains/data/nft3/profile/adapter/profileAvatar'
+import { DisplayNumber } from 'components/Number'
 
 const ROOT = styled(Card)``
 const Content = styled(CardContent)`
@@ -87,8 +87,6 @@ const FollowCard: FC<FollowMember> = (props) => {
     )
   }, [did, followed, identifier, selectDialog, userFollow, userUnfollow])
 
-  const NF = useNumberFormat()
-
   return (
     <ROOT>
       <Content>
@@ -103,7 +101,8 @@ const FollowCard: FC<FollowMember> = (props) => {
           <Stack spacing={1}>
             <H4>{name}</H4>
             <Paragraph sx={{ color: 'grey.700' }}>
-              {NF.format(count.followers, NF.getOptions('number'))} Followers
+              <DisplayNumber value={count.followers} />
+              <span>Followers</span>
             </Paragraph>
             <Paragraph sx={{ color: 'grey.400' }}>{bio}</Paragraph>
           </Stack>

components/Number.tsx

@@ -0,0 +1,14 @@
+import { useNumberFormat } from 'app/utils/number/hooks'
+import { Fragment } from 'react'
+
+type NumberProps = {
+  value: any
+}
+export const DisplayUSD: FC<NumberProps> = ({ value }) => {
+  const NF = useNumberFormat()
+  return <Fragment>{NF.format(value, NF.getOptions('USD')) || '-'}</Fragment>
+}
+export const DisplayNumber: FC<NumberProps> = ({ value }) => {
+  const NF = useNumberFormat()
+  return <Fragment>{NF.format(value, NF.getOptions('number')) || '-'}</Fragment>
+}