Merge branch 'feat/revoke-gas-account' into tmp/20241025

src/ui/utils/number.ts

@@ -67,7 +67,8 @@ export const numberWithCommasIsLtOne = (
 export const formatNumber = (
   num: string | number,
   decimal = 2,
-  opt = {} as BigNumber.Format
+  opt = {} as BigNumber.Format,
+  roundingMode = BigNumber.ROUND_UP as BigNumber.RoundingMode
 ) => {
   const n = new BigNumber(num);
   const format = {
@@ -87,11 +88,11 @@ export const formatNumber = (
   // hide the after-point part if number is more than 1000000
   if (n.isGreaterThan(1000000)) {
     if (n.gte(1e9)) {
-      return `${n.div(1e9).toFormat(decimal, format)}B`;
+      return `${n.div(1e9).toFormat(decimal, roundingMode, format)}B`;
     }
     return n.decimalPlaces(0).toFormat(format);
   }
-  return n.toFormat(decimal, format);
+  return n.toFormat(decimal, roundingMode, format);
 };
 
 export const formatPrice = (price: string | number) => {
@@ -116,13 +117,21 @@ export const intToHex = (n: number) => {
   return `0x${n.toString(16)}`;
 };
 
-export const formatUsdValue = (value: string | number) => {
+export const formatUsdValue = (
+  value: string | number,
+  roundingMode = BigNumber.ROUND_UP as BigNumber.RoundingMode
+) => {
   const bnValue = new BigNumber(value);
   if (bnValue.lt(0)) {
-    return `-$${formatNumber(Math.abs(Number(value)))}`;
+    return `-$${formatNumber(
+      Math.abs(Number(value)),
+      2,
+      undefined,
+      roundingMode
+    )}`;
   }
   if (bnValue.gte(0.01) || bnValue.eq(0)) {
-    return `$${formatNumber(value)}`;
+    return `$${formatNumber(value, 2, undefined, roundingMode)}`;
   }
   return '<$0.01';
 };

src/ui/views/GasAccount/components/DashBoardHeader.tsx

@@ -10,9 +10,11 @@ const formatUsdValue = (usd: string | number) => {
     return `$${formatTokenAmount(Number(v).toFixed(0), 0)}`;
   }
   if (v >= 100) {
-    return `$${Number(v).toFixed(1)}`;
+    const fixDown = Math.floor(v * 10) / 10;
+    return `$${Number(fixDown).toFixed(1)}`;
   }
-  return `$${Number(v).toFixed(2)}`;
+  const fixDown = Math.floor(v * 100) / 100;
+  return `$${Number(fixDown).toFixed(2)}`;
 };
 
 export const GasAccountDashBoardHeader = () => {

src/ui/views/GasAccount/components/History.tsx

@@ -1,13 +1,30 @@
 import React from 'react';
 import { ReactComponent as RcIconEmptyCC } from '@/ui/assets/empty-cc.svg';
 import { useTranslation } from 'react-i18next';
-import { formatUsdValue, sinceTime } from '@/ui/utils';
+import { formatNumber, sinceTime } from '@/ui/utils';
 import clsx from 'clsx';
 import { useGasAccountHistory } from '../hooks';
 import { Skeleton } from 'antd';
 import { ReactComponent as RcIconPendingCC } from '@/ui/assets/pending-cc.svg';
 import { ReactComponent as RcIconOpenExternalCC } from '@/ui/assets/open-external-cc.svg';
 import { findChainByServerID } from '@/utils/chain';
+import BigNumber from 'bignumber.js';
+
+const formatUsdValue = (value: string | number) => {
+  const bnValue = new BigNumber(value);
+  if (bnValue.lt(0)) {
+    return `-$${formatNumber(
+      Math.abs(Number(value)),
+      4,
+      undefined,
+      BigNumber.ROUND_DOWN
+    )}`;
+  }
+  if (bnValue.gte(0.0001) || bnValue.eq(0)) {
+    return `$${formatNumber(value, 4, undefined, BigNumber.ROUND_DOWN)}`;
+  }
+  return '<$0.0001';
+};
 
 const HistoryItem = ({
   time,

src/ui/views/GasAccount/components/LoginPopup.tsx

@@ -30,9 +30,9 @@ export const GasACcountCurrentAddress = ({
   const [alias] = useAlias(account?.address || currentAccount?.address || '');
 
   const addressTypeIcon = useBrandIcon({
-    address: currentAccount!.address,
-    brandName: currentAccount!.brandName,
-    type: currentAccount!.type,
+    address: account?.address || currentAccount!.address,
+    brandName: account?.brandName || currentAccount!.brandName,
+    type: account?.type || currentAccount!.type,
   });
   return (
     <div className="mb-[20px] py-12 px-16 rounded-[6px] flex items-center bg-r-neutral-card-2">

src/ui/views/GasAccount/index.tsx

@@ -18,6 +18,7 @@ import { useHistory } from 'react-router-dom';
 import { GasAccountRefreshIdProvider } from './hooks/context';
 import { GasAccountWrapperBg } from './components/WrapperBg';
 import { GasAccountBlueLogo } from './components/GasAccountBlueLogo';
+import BigNumber from 'bignumber.js';
 
 const DEPOSIT_LIMIT = 1000;
 
@@ -112,7 +113,7 @@ const GasAccountInner = () => {
         <GasAccountWrapperBg className="mb-[20px] flex flex-col items-center h-[260px] bg-r-neutral-card1 rounded-[8px] py-20 px-16 pt-24">
           <GasAccountBlueLogo />
           <div className="text-r-neutral-title-1 text-[32px] leading-normal font-bold mt-24">
-            {formatUsdValue(balance)}
+            {formatUsdValue(balance, BigNumber.ROUND_DOWN)}
           </div>
 
           <div className="w-full mt-auto flex gap-12 items-center justify-center">