more generous adding prices to priceMap, use evmAddress and fall back…

… to address when fetching evm prices, seems TokenInfo is inconsistent. if price is null or zero show blank
onflow · Feb 6, 2025 · 5785b31 · 5785b31
1 parent 50908df
commit 5785b31
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 16 deletions.
diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts
@@ -1174,7 +1174,10 @@ export class WalletController extends BaseController {
 
   private async evmtokenPrice(tokeninfo, data) {
     const token = tokeninfo.symbol.toLowerCase();
-    const price = await openapiService.getPricesByEvmaddress(tokeninfo.address, data);
+    const price = await openapiService.getPricesByEvmaddress(
+      tokeninfo.evmAddress || tokeninfo.address,
+      data
+    );
 
     if (token === 'flow') {
       const flowPrice = price || data['FLOW'];

diff --git a/src/background/service/openapi.ts b/src/background/service/openapi.ts
@@ -578,15 +578,15 @@ class OpenApiService {
 
       data.forEach((token) => {
         if (token.evmAddress) {
-          // EVM price
           const { rateToUSD, evmAddress, symbol } = token;
           const key = evmAddress.toLowerCase();
           pricesMap[key] = Number(rateToUSD).toFixed(8);
           const symbolKey = symbol.toUpperCase();
           if (symbolKey) {
             pricesMap[symbolKey] = Number(rateToUSD).toFixed(8);
           }
-        } else if (token.contractName && token.contractAddress) {
+        }
+        if (token.contractName && token.contractAddress) {
           // Flow chain price
           const { rateToUSD, contractName, contractAddress } = token;
           const key = `${contractName.toLowerCase()}${contractAddress.toLowerCase()}`;

diff --git a/src/shared/utils/formatPrice.test.ts b/src/shared/utils/formatPrice.test.ts
@@ -7,7 +7,7 @@ describe('formatPrice', () => {
     const result = formatPrice(0, 4);
     expect(result).toEqual({
       price: 0,
-      formattedPrice: { leadingPart: '-', zeroPart: null, endingPart: null },
+      formattedPrice: { leadingPart: '', zeroPart: null, endingPart: null },
     });
   });
 

diff --git a/src/shared/utils/formatPrice.ts b/src/shared/utils/formatPrice.ts
@@ -21,7 +21,7 @@ export function formatPrice(price: number, zeroCondenseThreshold = 4): Formatted
     return {
       price,
       formattedPrice: {
-        leadingPart: '-',
+        leadingPart: '',
         zeroPart: null,
         endingPart: null,
       },

diff --git a/src/ui/views/TokenDetail/TokenInfoCard.tsx b/src/ui/views/TokenDetail/TokenInfoCard.tsx
@@ -223,9 +223,12 @@ const TokenInfoCard = ({
           </Box>
           <Typography variant="body1" color="text.secondary" sx={{ fontSize: '16px' }}>
             <Box component="span" sx={{ marginRight: '0.25rem' }}>
-              <TokenPrice price={balance * price} prefix="$" />
+              <TokenPrice
+                price={balance * price}
+                prefix="$"
+                postFix={chrome.i18n.getMessage('USD')}
+              />
             </Box>
-            {chrome.i18n.getMessage('USD')}
           </Typography>
           <Box sx={{ display: 'flex', gap: '12px', height: '36px', mt: '24px', width: '100%' }}>
             {(!childType || childType === 'evm') && (

diff --git a/src/ui/views/TokenDetail/TokenPrice.tsx b/src/ui/views/TokenDetail/TokenPrice.tsx
@@ -7,25 +7,26 @@ interface TokenPriceProps {
   className?: string;
   showPrefix?: boolean;
   prefix?: string;
+  postFix?: string;
 }
 
 export const TokenPrice: React.FC<TokenPriceProps> = ({
   price,
   className = '',
-  showPrefix = true,
   prefix = '$',
+  postFix = '',
 }) => {
-  if (price === null || price === undefined || typeof price === 'string') {
-    return <span className={className}>{price}</span>;
+  if (price === 0 || price === null || price === undefined || typeof price === 'string') {
+    return <span className={className}>{''}</span>;
   }
 
   const { formattedPrice } = formatPrice(price);
   const { leadingPart, zeroPart, endingPart } = formattedPrice;
 
   return (
     <span className={className}>
-      {showPrefix && prefix}
-      <span style={leadingPart === '-' ? { padding: '0 0.25rem' } : undefined}>{leadingPart}</span>
+      {prefix}
+      <span style={leadingPart === '' ? { padding: '0 0.25rem' } : undefined}>{leadingPart}</span>
       {zeroPart !== null && (
         <sub
           style={{
@@ -37,6 +38,7 @@ export const TokenPrice: React.FC<TokenPriceProps> = ({
         </sub>
       )}
       {endingPart !== null && endingPart}
+      {postFix && <span style={{ marginLeft: '0.25rem' }}>{postFix}</span>}
     </span>
   );
 };
diff --git a/src/ui/views/TokenDetail/index.tsx b/src/ui/views/TokenDetail/index.tsx
@@ -133,7 +133,10 @@ const TokenDetail = () => {
       if (price) {
         setPrice(price);
       }
-      const evmPrice = await usewallet.openapi.getPricesByEvmaddress(tokenResult!.address, data);
+      const evmPrice = await usewallet.openapi.getPricesByEvmaddress(
+        tokenResult!.evmAddress!,
+        data
+      );
       if (evmPrice) {
         setPrice(evmPrice);
       }

diff --git a/src/ui/views/Wallet/Coinlist.tsx b/src/ui/views/Wallet/Coinlist.tsx
@@ -54,8 +54,8 @@ const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
               variant="body1"
               sx={{ fontSize: 12, fontWeight: '500', textAlign: 'end', color: 'text.secondary' }}
             >
-              {props.change === null ? '-' : '$'}
-              {props.secondary}
+              {props.change === null || props.change === 0 ? '' : '$'}
+              {props.secondary === null || props.secondary === 0 ? '' : props.secondary}
             </Typography>
           ) : (
             <Skeleton variant="text" width={35} height={15} />
@@ -192,7 +192,7 @@ const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
                   secondaryAction={
                     <EndListItemText
                       primary={parseFloat(coin.balance).toFixed(3)}
-                      secondary={parseFloat(coin.total.toFixed(2))}
+                      secondary={<TokenPrice price={coin.balance * coin.price} />}
                       unit={coin.unit}
                       change={parseFloat(coin.change24h.toFixed(2))}
                     />