Merge pull request #3171 from Emurgo/Ahmed/format-nums

feat: format big numbers using `Intl` api when rendered on screen
Emurgo · Jun 16, 2023 · 7044a7f · 7044a7f
2 parents 145e2da + be6bb81
commit 7044a7f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/packages/yoroi-extension/app/components/wallet/assets/AssetsPage.js b/packages/yoroi-extension/app/components/wallet/assets/AssetsPage.js
@@ -24,14 +24,14 @@ type Props = {|
 export default class AssetsPage extends Component<Props> {
 
   render(): Node {
-    const { assetDeposit, network } = this.props
+    const { assetDeposit, network, assetsList, getTokenInfo, shouldHideBalance } = this.props;
     return (
       <div className={styles.component}>
         <AssetsList
-          assetsList={this.props.assetsList}
+          assetsList={assetsList}
           assetDeposit={assetDeposit}
-          getTokenInfo={this.props.getTokenInfo}
-          shouldHideBalance={this.props.shouldHideBalance}
+          getTokenInfo={getTokenInfo}
+          shouldHideBalance={shouldHideBalance}
           network={network}
         />
       </div>

diff --git a/packages/yoroi-extension/app/containers/wallet/TokensPageRevamp.js b/packages/yoroi-extension/app/containers/wallet/TokensPageRevamp.js
@@ -4,12 +4,11 @@ import { Component } from 'react';
 import type { InjectedOrGenerated } from '../../types/injectedPropsType';
 import type { Node } from 'react';
 import {
-  genFormatTokenAmount,
   genLookupOrFail,
   getTokenIdentifierIfExists,
   getTokenStrictName,
 } from '../../stores/stateless/tokenHelpers';
-import { truncateToken } from '../../utils/formatters';
+import { splitAmount, truncateToken } from '../../utils/formatters';
 import { computed } from 'mobx';
 import type { TokenInfoMap } from '../../stores/toplevel/TokenInfoStore';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
@@ -40,11 +39,20 @@ export default class TokensPageRevamp extends Component<InjectedOrGenerated<Gene
           info: getTokenInfo(entry),
         }))
         .filter(item => item.info.IsNFT === false)
-        .map(token => ({
-          name: truncateToken(getTokenStrictName(token.info) ?? '-'),
-          id: getTokenIdentifierIfExists(token.info) ?? '-',
-          amount: genFormatTokenAmount(getTokenInfo)(token.entry),
-        }));
+        .map(token => {
+          const numberOfDecimals = token.info?.Metadata.numberOfDecimals ?? 0;
+          const shiftedAmount = token.entry.amount.shiftedBy(-numberOfDecimals);
+          const [beforeDecimal, afterDecimal] = splitAmount(
+            shiftedAmount,
+            numberOfDecimals
+          );
+
+          return {
+            name: truncateToken(getTokenStrictName(token.info) ?? '-'),
+            id: getTokenIdentifierIfExists(token.info) ?? '-',
+            amount: [beforeDecimal, afterDecimal].join(''),
+          }
+        });
     })();
 
     const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);

diff --git a/packages/yoroi-extension/app/containers/wallet/WalletAssetsPage.js b/packages/yoroi-extension/app/containers/wallet/WalletAssetsPage.js
@@ -10,8 +10,8 @@ import {
 } from '../../api/common/lib/MultiToken';
 import type { TokenInfoMap } from '../../stores/toplevel/TokenInfoStore';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
-import { genFormatTokenAmount, genLookupOrFail, getTokenIdentifierIfExists, getTokenStrictName } from '../../stores/stateless/tokenHelpers';
-import { truncateToken } from '../../utils/formatters';
+import { genLookupOrFail, getTokenIdentifierIfExists, getTokenStrictName } from '../../stores/stateless/tokenHelpers';
+import { splitAmount, truncateToken } from '../../utils/formatters';
 import AssetsPage from '../../components/wallet/assets/AssetsPage';
 import type { TxRequests } from '../../stores/toplevel/TransactionsStore';
 
@@ -36,11 +36,19 @@ export default class WalletAssetsPage extends Component<InjectedOrGenerated<Gene
         ].map(entry => ({
           entry,
           info: getTokenInfo(entry),
-        })).map(token => ({
-          name: truncateToken(getTokenStrictName(token.info) ?? '-'),
-          id: (getTokenIdentifierIfExists(token.info) ?? '-'),
-          amount: genFormatTokenAmount(getTokenInfo)(token.entry),
-        }));
+        })).map(token => {
+          const numberOfDecimals = token.info?.Metadata.numberOfDecimals ?? 0;
+          const shiftedAmount = token.entry.amount.shiftedBy(-numberOfDecimals);
+          const [beforeDecimal, afterDecimal] = splitAmount(
+            shiftedAmount,
+            numberOfDecimals
+          );
+          return {
+            name: truncateToken(getTokenStrictName(token.info) ?? '-'),
+            id: (getTokenIdentifierIfExists(token.info) ?? '-'),
+            amount: [beforeDecimal, afterDecimal].join(''),
+          }
+        });
       })();
 
     const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);