fix: trending currency and ui (#10582)

packages/mask/shared-ui/locales/en-US.json

@@ -256,7 +256,7 @@
     "search_box_placeholder": "Type here to search",
     "select_all": "Select All",
     "nonce": "Nonce",
-    "none": "None",
+    "none": "N/A",
     "select_none": "Select None",
     "all_friends": "All Friends",
     "select_specific_friends_dialog__title": "Share with",
@@ -493,7 +493,6 @@
     "plugin_trader_dear_user": "Dear Users,",
     "plugin_trader_user_warning": "Clicking the confirm button means that you agree to take the potential risks and proceed with the transaction.",
     "plugin_trader_price_updated": "The price has expired.",
-    "plugin_trader_usdc_price_statistic": "Price Statistic",
     "plugin_trader_market_statistic": "Market Statistic",
     "plugin_trader_floor_price": "Floor Price",
     "plugin_trader_trending": "Trending",
@@ -535,14 +534,8 @@
     "plugin_trader_tab_exchange": "Exchange",
     "plugin_trader_tab_activities": "Activities",
     "plugin_trader_nft_items": "NFTs",
-    "plugin_trader_tab_swap": "Swap",
-    "plugin_trader_table_exchange": "Exchange",
-    "plugin_trader_table_pair": "Pair",
-    "plugin_trader_table_price": "Price",
-    "plugin_trader_table_volume": "Volume (24h)",
     "plugin_trader_table_nft": "NFT",
     "plugin_trader_table_method": "Method",
-    "plugin_trader_table_updated": "Updated",
     "plugin_trader_table_value": "Value",
     "plugin_trader_table_from": "From",
     "plugin_trader_table_to": "To",
@@ -1282,7 +1275,7 @@
     "transaction_confirmed_at": "The transaction was confirmed at {{- datetime}}",
     "transaction_completed_at": "The transaction was complete and has been recorded on blockchain at {{- datetime}}",
     "collectible_title": "Collectible",
-    "collectible_description": "Desciptioin",
+    "collectible_description": "Description",
     "collectible_properties": "Properties",
     "collectible_last_sale_price": "Properties",
     "about_collection": "Abount {{- name}}",

packages/mask/shared-ui/locales/ja-JP.json

@@ -352,12 +352,6 @@
     "plugin_trader_tab_market": "一般",
     "plugin_trader_tab_price": "価格",
     "plugin_trader_tab_exchange": "取引所",
-    "plugin_trader_tab_swap": "スワップ 🔥",
-    "plugin_trader_table_exchange": "ソース",
-    "plugin_trader_table_pair": "通貨ペア",
-    "plugin_trader_table_price": "価格",
-    "plugin_trader_table_volume": "取引高（24時間）",
-    "plugin_trader_table_updated": "更新",
     "plugin_trader_error_amount_absence": "量を入力してください。",
     "plugin_trader_error_insufficient_balance": "{{symbol}} の残高が足りません",
     "plugin_trader_error_insufficient_lp": "流動性が足りません",

packages/mask/shared-ui/locales/ko-KR.json

@@ -422,7 +422,6 @@
     "plugin_trader_dear_user": "안녕하세요 유저님,",
     "plugin_trader_user_warning": "확인 버튼을 클릭하면 잠재적 위험을 감수하고 거래를 진행하는 데 동의한다는 말입니다.",
     "plugin_trader_price_updated": "가격은 업데이트뒤었습니다",
-    "plugin_trader_usdc_price_statistic": "가격 통계",
     "plugin_trader_market_statistic": "마켓 통계",
     "plugin_trader_floor_price": "바닥 가격",
     "plugin_trader_trending": "추세",
@@ -461,14 +460,8 @@
     "plugin_trader_tab_exchange": "교환",
     "plugin_trader_tab_activities": "활동",
     "plugin_trader_nft_items": "NFTs",
-    "plugin_trader_tab_swap": "스왑 🔥",
-    "plugin_trader_table_exchange": "교환",
-    "plugin_trader_table_pair": "짝",
-    "plugin_trader_table_price": "가격",
-    "plugin_trader_table_volume": "거래량(24h)",
     "plugin_trader_table_nft": "NFT",
     "plugin_trader_table_method": "방법",
-    "plugin_trader_table_updated": "업데이트",
     "plugin_trader_table_value": "값",
     "plugin_trader_table_from": "보낸 사람",
     "plugin_trader_table_to": "받는 사람",

packages/mask/shared-ui/locales/qya-AA.json

@@ -492,7 +492,6 @@
     "plugin_trader_dear_user": "crwdns17734:0crwdne17734:0",
     "plugin_trader_user_warning": "crwdns17736:0crwdne17736:0",
     "plugin_trader_price_updated": "crwdns10237:0crwdne10237:0",
-    "plugin_trader_usdc_price_statistic": "crwdns17666:0crwdne17666:0",
     "plugin_trader_market_statistic": "crwdns18128:0crwdne18128:0",
     "plugin_trader_floor_price": "crwdns18130:0crwdne18130:0",
     "plugin_trader_trending": "crwdns19347:0crwdne19347:0",
@@ -534,14 +533,8 @@
     "plugin_trader_tab_exchange": "crwdns4895:0crwdne4895:0",
     "plugin_trader_tab_activities": "crwdns19359:0crwdne19359:0",
     "plugin_trader_nft_items": "crwdns18140:0crwdne18140:0",
-    "plugin_trader_tab_swap": "crwdns4897:0crwdne4897:0",
-    "plugin_trader_table_exchange": "crwdns4899:0crwdne4899:0",
-    "plugin_trader_table_pair": "crwdns4901:0crwdne4901:0",
-    "plugin_trader_table_price": "crwdns4903:0crwdne4903:0",
-    "plugin_trader_table_volume": "crwdns4905:0crwdne4905:0",
     "plugin_trader_table_nft": "crwdns19361:0crwdne19361:0",
     "plugin_trader_table_method": "crwdns19363:0crwdne19363:0",
-    "plugin_trader_table_updated": "crwdns4907:0crwdne4907:0",
     "plugin_trader_table_value": "crwdns19365:0crwdne19365:0",
     "plugin_trader_table_from": "crwdns19367:0crwdne19367:0",
     "plugin_trader_table_to": "crwdns19369:0crwdne19369:0",

packages/mask/shared-ui/locales/zh-CN.json

@@ -492,7 +492,6 @@
     "plugin_trader_dear_user": "尊敬的用户，",
     "plugin_trader_user_warning": "点击确认按钮意味着您同意承担潜在的风险并选择继续进行交易。",
     "plugin_trader_price_updated": "价格已更新",
-    "plugin_trader_usdc_price_statistic": "价值数据统计",
     "plugin_trader_market_statistic": "市场数据统计",
     "plugin_trader_floor_price": "地板价",
     "plugin_trader_trending": "趋势",
@@ -534,14 +533,8 @@
     "plugin_trader_tab_exchange": "交易",
     "plugin_trader_tab_activities": "活动",
     "plugin_trader_nft_items": "NFTs",
-    "plugin_trader_tab_swap": "兑换",
-    "plugin_trader_table_exchange": "交易所",
-    "plugin_trader_table_pair": "交易对",
-    "plugin_trader_table_price": "价格",
-    "plugin_trader_table_volume": "交易量 (24h)",
     "plugin_trader_table_nft": "NFT",
     "plugin_trader_table_method": "操作",
-    "plugin_trader_table_updated": "更新时间",
     "plugin_trader_table_value": "价值",
     "plugin_trader_table_from": "从",
     "plugin_trader_table_to": "至",

packages/mask/shared-ui/locales/zh-TW.json

@@ -189,12 +189,6 @@
     "plugin_trader_tab_market": "一般",
     "plugin_trader_tab_price": "價格",
     "plugin_trader_tab_exchange": "交易所",
-    "plugin_trader_tab_swap": "交換",
-    "plugin_trader_table_exchange": "交易所",
-    "plugin_trader_table_pair": "交易對",
-    "plugin_trader_table_price": "價格",
-    "plugin_trader_table_volume": "交易量 (24h)",
-    "plugin_trader_table_updated": "已更新",
     "plugin_trader_error_amount_absence": "輸入一個金額",
     "plugin_trader_error_insufficient_balance": "{{symbol}} 餘額不足",
     "plugin_trader_error_insufficient_lp": "本次交易流動性不足",

packages/mask/src/extension/popups/pages/Wallet/CollectibleDetail/index.tsx

@@ -72,12 +72,17 @@ const useStyles = makeStyles()((theme) => ({
     },
     priceLabel: {
         fontSize: 14,
+        fontWeight: 700,
         color: theme.palette.maskColor.second,
     },
     priceValue: {
         color: theme.palette.maskColor.main,
+        fontWeight: 700,
         marginTop: theme.spacing(1.5),
     },
+    noneValue: {
+        color: theme.palette.maskColor.second,
+    },
     sectionTitle: {
         fontSize: 14,
         fontWeight: 700,
@@ -143,7 +148,7 @@ const formatTimestamp = (timestamp: string) => {
 }
 
 export const CollectibleDetail = memo(function CollectibleDetail() {
-    const { classes } = useStyles()
+    const { classes, cx } = useStyles()
     const { t } = useI18N()
     const navigate = useNavigate()
     const location = useLocation()
@@ -242,16 +247,20 @@ export const CollectibleDetail = memo(function CollectibleDetail() {
             </div>
             <div className={classes.prices}>
                 <div className={classes.price}>
-                    <Typography className={classes.priceLabel}>{t('collectible_last_sale_price')}</Typography>
-                    <Typography className={classes.priceValue}>
+                    <Typography variant="h2" className={classes.priceLabel}>
+                        {t('collectible_last_sale_price')}
+                    </Typography>
+                    <Typography className={cx(classes.priceValue, lastSale ? '' : classes.noneValue)}>
                         {lastSale
                             ? `${formatBalance(lastSale.amount, lastSale.token.decimals)} ${lastSale.token.symbol}`
                             : t('none')}
                     </Typography>
                 </div>
                 <div className={classes.price}>
-                    <Typography className={classes.priceLabel}>{t('floor_price')}</Typography>
-                    <Typography className={classes.priceValue}>
+                    <Typography variant="h2" className={classes.priceLabel}>
+                        {t('floor_price')}
+                    </Typography>
+                    <Typography className={cx(classes.priceValue, floorPrice ? '' : classes.noneValue)}>
                         {floorPrice
                             ? `${formatBalance(floorPrice.value, floorPrice.payment_token.decimals)} ${
                                   floorPrice.payment_token.symbol
@@ -264,7 +273,7 @@ export const CollectibleDetail = memo(function CollectibleDetail() {
                 {t('collectible_description')}
             </Typography>
             <Typography variant="body1" className={classes.text}>
-                {assetDesc}
+                {assetDesc || t('none')}
             </Typography>
             {isLoading || asset?.traits?.length ? (
                 <>

packages/mask/src/extension/popups/pages/Wallet/Receive/index.tsx

@@ -46,6 +46,7 @@ const useStyles = makeStyles()((theme) => {
             color: theme.palette.maskColor.second,
             marginTop: theme.spacing(1),
             fontSize: 16,
+            height: 30,
             display: 'flex',
             alignItems: 'center',
         },
@@ -99,6 +100,10 @@ const useStyles = makeStyles()((theme) => {
             textAlign: 'center',
             color: theme.palette.maskColor.second,
         },
+        copyButton: {
+            marginLeft: 8,
+            color: theme.palette.maskColor.main,
+        },
     }
 })
 
@@ -160,7 +165,7 @@ export default memo(function Receive() {
                 )}
                 <Typography className={classes.address}>
                     <FormattedAddress address={account} formatter={formatEthereumAddress} size={4} />
-                    <CopyButton text={account} size={24} ml={2} style={{ marginLeft: 16 }} />
+                    <CopyButton text={account} size={18} className={classes.copyButton} />
                 </Typography>
             </Box>
             <div className={classes.halo}>

packages/plugins/Trader/src/SiteAdaptor/trending/CoinMarketTable.tsx

@@ -4,7 +4,7 @@ import type { Web3Helper } from '@masknet/web3-helpers'
 import { useNetworkDescriptor } from '@masknet/web3-hooks-base'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { TokenIcon, WalletIcon, FungibleCoinMarketTable } from '@masknet/shared'
-import { formatInteger, formatSupply, TokenType } from '@masknet/web3-shared-base'
+import { CurrencyType, formatInteger, formatSupply, TokenType } from '@masknet/web3-shared-base'
 import type { Trending } from '../../types/index.js'
 import { useHighestFloorPrice, useNFT_TrendingOverview, useOneDaySaleAmounts } from '../../trending/useTrending.js'
 import { useI18N } from '../../locales/index.js'
@@ -182,5 +182,9 @@ export function NonFungibleCoinMarketTable(props: CoinMarketTableProps) {
 
 export function CoinMarketTable(props: CoinMarketTableProps) {
     const isNFT = props.trending.coin.type === TokenType.NonFungible
-    return isNFT ? <NonFungibleCoinMarketTable {...props} /> : <FungibleCoinMarketTable {...props} />
+    return isNFT ? (
+        <NonFungibleCoinMarketTable {...props} />
+    ) : (
+        <FungibleCoinMarketTable {...props} sign={CurrencyType.USD} />
+    )
 }

packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx

@@ -17,7 +17,7 @@ import { useSiteThemeMode } from '@masknet/plugin-infra/content-script'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import { FormattedCurrency } from '@masknet/shared'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { formatCurrency, formatElapsed } from '@masknet/web3-shared-base'
+import { CurrencyType, formatCurrency, formatElapsed } from '@masknet/web3-shared-base'
 import type { Ticker } from '../../types/index.js'
 import { TrendingViewContext } from './context.js'
 import { useI18N } from '../../locales/index.js'
@@ -96,7 +96,9 @@ export function TickersTable({ tickers }: TickersTableProps) {
             </Stack>
         )
         const cellMap: Record<Cells, ReactNode> = {
-            volume: volume ? <FormattedCurrency value={volume} formatter={formatCurrency} /> : null,
+            volume: volume ? (
+                <FormattedCurrency value={volume} formatter={formatCurrency} sign={CurrencyType.USD} />
+            ) : null,
             updated: ticker.updated ? formatElapsed(ticker.updated.getTime()) : null,
             exchange: marketplaceOrExchange,
             pair: (() => {

packages/plugins/Trader/src/locales/en-US.json

@@ -46,7 +46,6 @@
     "plugin_trader_dear_user": "Dear Users,",
     "plugin_trader_user_warning": "Clicking the confirm button means that you agree to take the potential risks and proceed with the transaction.",
     "plugin_trader_price_updated": "The price has expired.",
-    "plugin_trader_usdc_price_statistic": "Price Statistic",
     "plugin_trader_market_statistic": "Market Statistic",
     "plugin_trader_floor_price": "Floor Price",
     "plugin_trader_trending": "Trending",

packages/plugins/Trader/src/locales/qya-AA.json

@@ -46,7 +46,6 @@
     "plugin_trader_dear_user": "crwdns20859:0crwdne20859:0",
     "plugin_trader_user_warning": "crwdns20861:0crwdne20861:0",
     "plugin_trader_price_updated": "crwdns20863:0crwdne20863:0",
-    "plugin_trader_usdc_price_statistic": "crwdns20865:0crwdne20865:0",
     "plugin_trader_market_statistic": "crwdns20867:0crwdne20867:0",
     "plugin_trader_floor_price": "crwdns20869:0crwdne20869:0",
     "plugin_trader_trending": "crwdns20871:0crwdne20871:0",

packages/plugins/Trader/src/locales/zh-CN.json

@@ -45,7 +45,6 @@
     "plugin_trader_dear_user": "尊敬的用户，",
     "plugin_trader_user_warning": "点击确认按钮意味着您同意承担潜在的风险并选择继续进行交易。",
     "plugin_trader_price_updated": "价格已过期。",
-    "plugin_trader_usdc_price_statistic": "价格统计数据",
     "plugin_trader_market_statistic": "市场数据统计",
     "plugin_trader_floor_price": "地板价",
     "plugin_trader_trending": "趋势",

packages/shared/src/UI/components/FungibleCoinMarketTable/index.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from '@masknet/theme'
 import type { TrendingAPI } from '@masknet/web3-providers/types'
-import { formatMarketCap, formatSupply } from '@masknet/web3-shared-base'
+import { type CurrencyType, formatCurrency, formatSupply } from '@masknet/web3-shared-base'
 import {
     Paper,
     Skeleton,
@@ -15,6 +15,7 @@ import {
 import { memo } from 'react'
 import { useSharedI18N } from '../../../locales/index.js'
 import { useCurrencyType, useFiatCurrencyRate } from '@masknet/web3-hooks-base'
+import { FormattedCurrency } from '../../wallet/FormattedCurrency.js'
 
 const useStyles = makeStyles()({
     container: {
@@ -43,8 +44,9 @@ const useStyles = makeStyles()({
 })
 interface CoinMarketTableProps {
     trending?: TrendingAPI.Trending | null
+    sign?: CurrencyType
 }
-export const FungibleCoinMarketTable = memo(function FungibleCoinMarketTable({ trending }: CoinMarketTableProps) {
+export const FungibleCoinMarketTable = memo(function FungibleCoinMarketTable({ trending, sign }: CoinMarketTableProps) {
     const t = useSharedI18N()
     const { classes } = useStyles()
     const currencyType = useCurrencyType()
@@ -69,9 +71,15 @@ export const FungibleCoinMarketTable = memo(function FungibleCoinMarketTable({ t
                                 </Typography>
                             </TableCell>
                             <TableCell className={classes.cell}>
-                                {market?.market_cap && !isLoading
-                                    ? formatMarketCap(market.market_cap, currencyType, fiatCurrencyRate)
-                                    : '--'}
+                                {market?.market_cap && !isLoading ? (
+                                    <FormattedCurrency
+                                        value={market.market_cap}
+                                        formatter={formatCurrency}
+                                        sign={sign}
+                                    />
+                                ) : (
+                                    '--'
+                                )}
                             </TableCell>
                         </TableRow>
 
@@ -93,9 +101,15 @@ export const FungibleCoinMarketTable = memo(function FungibleCoinMarketTable({ t
                                 </Typography>
                             </TableCell>
                             <TableCell className={classes.cell}>
-                                {market?.total_volume && !isLoading
-                                    ? formatMarketCap(market.total_volume, currencyType, fiatCurrencyRate)
-                                    : '--'}
+                                {market?.total_volume && !isLoading ? (
+                                    <FormattedCurrency
+                                        value={market.total_volume}
+                                        formatter={formatCurrency}
+                                        sign={sign}
+                                    />
+                                ) : (
+                                    '--'
+                                )}
                             </TableCell>
                         </TableRow>
                         <TableRow>