Merge pull request #736 from alexstotsky/hide-0-perc-balance-change

(improvement) Balance change representation
bitfinexcom · Nov 28, 2023 · 3165546 · 3165546
2 parents 362f9b8 + 30b95d0
commit 3165546
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/components/AppSummary/AppSummary.columns.js b/src/components/AppSummary/AppSummary.columns.js
@@ -8,6 +8,7 @@ import {
   formatUsdValue,
   formatPercentValue,
   formatUsdValueChange,
+  shouldShowPercentCheck,
 } from './AppSummary.helpers'
 
 export const getFeesColumns = ({
@@ -141,17 +142,23 @@ export const getAssetColumns = ({
     name: 'summary.by_asset.balance_change',
     width: 178,
     renderer: (rowIndex) => {
-      const { valueChange30dUsd, valueChange30dPerc } = preparedData[rowIndex]
+      const { balanceUsd, valueChange30dUsd, valueChange30dPerc } = preparedData[rowIndex]
+      const shouldShowPercentChange = shouldShowPercentCheck(balanceUsd, valueChange30dUsd)
       return (
         <Cell tooltip={getTooltipContent(valueChange30dUsd, t)}>
           <>
             <span className='cell-value'>
               {formatUsdValueChange(valueChange30dUsd)}
             </span>
-            <br />
-            <span className='cell-value secondary-value'>
-              {formatPercentValue(valueChange30dPerc)}
-            </span>
+            {shouldShowPercentChange && (
+              <>
+                <br />
+                <span className='cell-value secondary-value'>
+                  {formatPercentValue(valueChange30dPerc)}
+                </span>
+              </>
+            )}
+
           </>
         </Cell>
       )

diff --git a/src/components/AppSummary/AppSummary.helpers.js b/src/components/AppSummary/AppSummary.helpers.js
@@ -25,3 +25,11 @@ export const formatUsdValueChange = (value) => {
   if (val < 0) return <span>{`-$${formatThousands(Math.abs(val))}`}</span>
   return <span>{`$${formatThousands(val)}`}</span>
 }
+
+export const shouldShowPercentCheck = (balance, balanceChange) => {
+  const bal = prepareNumericValue(balance)
+  const balChange = prepareNumericValue(balanceChange)
+  if (balChange === 0) return true
+  if (bal === balChange) return false
+  return true
+}