rename Token price to value and associated files, fixed display in ac…

…tivities
onflow · Feb 7, 2025 · ded3c00 · ded3c00
1 parent ccf00b8
commit ded3c00
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 18 deletions.
diff --git a/src/shared/utils/formatPrice.test.ts → src/shared/utils/formatTokenValue.test.ts b/src/shared/utils/formatPrice.test.ts → src/shared/utils/formatTokenValue.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 
-import { formatPrice } from './formatPrice';
+import { formatPrice } from './formatTokenValue';
 
 describe('formatPrice', () => {
   it('should handle zero', () => {

diff --git a/src/shared/utils/formatPrice.ts → src/shared/utils/formatTokenValue.ts b/src/shared/utils/formatPrice.ts → src/shared/utils/formatTokenValue.ts
diff --git a/src/ui/views/Staking/TransferList.tsx b/src/ui/views/Staking/TransferList.tsx
@@ -23,6 +23,7 @@ import activity from 'ui/FRWAssets/svg/activity.svg';
 import { useWallet } from 'ui/utils';
 
 import IconExec from '../../../components/iconfont/IconExec';
+import { TokenPrice } from '../TokenDetail/TokenValue';
 
 dayjs.extend(relativeTime);
 
@@ -103,9 +104,14 @@ const TransferList = ({ setCount }) => {
                 color: isReceive && isFT ? 'success.main' : 'text.primary',
               }}
             >
-              {props.type === 1
-                ? (isReceive ? '+' : '-') + `${props.amount}`
-                : `${props.token.split('.')[2]}`}
+              {props.type === 1 ? (
+                <TokenPrice
+                  value={`${props.amount}`.replace(/^-/, '')}
+                  prefix={isReceive ? '+' : '-'}
+                />
+              ) : (
+                `${props.token.split('.')[2]}`
+              )}
             </Typography>
           ) : (
             <Skeleton variant="text" width={35} height={15} />

diff --git a/src/ui/views/TokenDetail/TokenInfoCard.tsx b/src/ui/views/TokenDetail/TokenInfoCard.tsx
@@ -11,7 +11,7 @@ import { addDotSeparators } from 'ui/utils/number';
 
 import IconChevronRight from '../../../components/iconfont/IconChevronRight';
 
-import { TokenPrice } from './TokenPrice';
+import { TokenPrice } from './TokenValue';
 
 // import tips from 'ui/FRWAssets/svg/tips.svg';
 
@@ -224,7 +224,7 @@ const TokenInfoCard = ({
           <Typography variant="body1" color="text.secondary" sx={{ fontSize: '16px' }}>
             <Box component="span" sx={{ marginRight: '0.25rem' }}>
               <TokenPrice
-                price={balance * price}
+                value={balance * price}
                 prefix="$"
                 postFix={chrome.i18n.getMessage('USD')}
               />

diff --git a/src/ui/views/TokenDetail/TokenPrice.tsx → src/ui/views/TokenDetail/TokenValue.tsx b/src/ui/views/TokenDetail/TokenPrice.tsx → src/ui/views/TokenDetail/TokenValue.tsx
@@ -1,26 +1,29 @@
 import React from 'react';
 
-import { formatPrice } from '@/shared/utils/formatPrice';
+import { formatPrice } from '@/shared/utils/formatTokenValue';
 
 interface TokenPriceProps {
-  price: number | string;
+  value: number | string;
   className?: string;
   showPrefix?: boolean;
   prefix?: string;
   postFix?: string;
 }
 
 export const TokenPrice: React.FC<TokenPriceProps> = ({
-  price,
+  value,
   className = '',
   prefix = '$',
   postFix = '',
 }) => {
-  if (price === 0 || price === null || price === undefined || typeof price === 'string') {
+  if (value === 0 || value === null || value === undefined) {
     return <span className={className}>{''}</span>;
   }
 
-  const { formattedPrice } = formatPrice(price);
+  // convert value to number if it's a string
+  const valueNumber = typeof value === 'string' ? parseFloat(value) : value;
+
+  const { formattedPrice } = formatPrice(valueNumber);
   const { leadingPart, zeroPart, endingPart } = formattedPrice;
 
   return (

diff --git a/src/ui/views/Wallet/Coinlist.tsx b/src/ui/views/Wallet/Coinlist.tsx
@@ -16,7 +16,7 @@ import { useHistory } from 'react-router-dom';
 import { formatLargeNumber } from 'ui/utils/number';
 
 import IconCreate from '../../../components/iconfont/IconCreate';
-import { TokenPrice } from '../TokenDetail/TokenPrice';
+import { TokenPrice } from '../TokenDetail/TokenValue';
 
 const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
   // const wallet = useWallet();
@@ -54,7 +54,6 @@ const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
               variant="body1"
               sx={{ fontSize: 12, fontWeight: '500', textAlign: 'end', color: 'text.secondary' }}
             >
-              {props.change === null || props.change === 0 ? '' : '$'}
               {props.secondary === null || props.secondary === 0 ? '' : props.secondary}
             </Typography>
           ) : (
@@ -111,7 +110,7 @@ const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
                     }}
                   >
                     {props.change === null ? '-' : ''}
-                    <TokenPrice price={props.price} prefix="$" />
+                    <TokenPrice value={props.price} prefix="$" />
                   </Typography>
                   {props.change !== 0 && (
                     <Typography
@@ -192,7 +191,7 @@ const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
                   secondaryAction={
                     <EndListItemText
                       primary={parseFloat(coin.balance).toFixed(3)}
-                      secondary={<TokenPrice price={coin.balance * coin.price} />}
+                      secondary={<TokenPrice value={coin.balance * coin.price} prefix="$" />}
                       unit={coin.unit}
                       change={parseFloat(coin.change24h.toFixed(2))}
                     />

diff --git a/src/ui/views/Wallet/TransferList.tsx b/src/ui/views/Wallet/TransferList.tsx
@@ -20,6 +20,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { formatString } from '@/shared/utils/address';
 import activity from 'ui/FRWAssets/svg/activity.svg';
 import { useWallet } from 'ui/utils';
+
+import { TokenPrice } from '../TokenDetail/TokenValue';
 // import IconExec from '../../../components/iconfont/IconExec';
 // import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
 dayjs.extend(relativeTime);
@@ -87,6 +89,7 @@ const TransferList = ({ setCount }) => {
   const EndListItemText = (props) => {
     const isReceive = props.txType === 2;
     const isFT = props.type === 1;
+    const isContractCall = props.type === 1 && props.token === '';
 
     const calculateMaxWidth = () => {
       const textLength =
@@ -113,9 +116,14 @@ const TransferList = ({ setCount }) => {
                 textOverflow: 'ellipsis',
               }}
             >
-              {props.type === 1
-                ? (isReceive ? '+' : '-') + `${props.amount}`.replace(/^-/, '')
-                : `${props.token}`}
+              {props.type === 1 ? (
+                <TokenPrice
+                  value={`${props.amount}`.replace(/^-/, '')}
+                  prefix={!isContractCall ? (isReceive ? '+' : '-') : ''}
+                />
+              ) : (
+                `${props.token}`
+              )}
             </Typography>
           ) : (
             <Skeleton variant="text" width={35} height={15} />