From a43a783aa4ea149c379ec4f4909efe37c87c3d78 Mon Sep 17 00:00:00 2001
From: Josh <josh.hundley@gmail.com>
Date: Fri, 5 Mar 2021 12:20:30 -0800
Subject: [PATCH] Explorer: update TokenLargestAccounts to use uiAmountString. 
 (#15743)

* feat: bump web3 to 0.94.2

* fix: update token largest accounts component to support uiAmountString

* fix: format code
---
 explorer/package-lock.json                    |  6 ++--
 explorer/package.json                         |  2 +-
 .../account/TokenLargestAccountsCard.tsx      | 30 +++++++++----------
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/explorer/package-lock.json b/explorer/package-lock.json
index f4da14d99..c3c21defe 100644
--- a/explorer/package-lock.json
+++ b/explorer/package-lock.json
@@ -2607,9 +2607,9 @@
       }
     },
     "@solana/web3.js": {
-      "version": "0.94.1",
-      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.94.1.tgz",
-      "integrity": "sha512-ikITz8a5JYpJwup5NESJtZYYJ+86SHqmglhlREVhlPkMfYyOsuWhnW3fd8vKCTze1AhUKMjo35BrYTbi6p2ImQ==",
+      "version": "0.94.2",
+      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.94.2.tgz",
+      "integrity": "sha512-enJZ9eVJMvNtpuXdygAZHBlPC+2Q3paLY+KforFhVUpi/bkBADDKJWd90RICyu3sPKiVt8YLAs9cIxriQpQqng==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "bn.js": "^5.0.0",
diff --git a/explorer/package.json b/explorer/package.json
index 2d0e5cd49..02d4ae63d 100644
--- a/explorer/package.json
+++ b/explorer/package.json
@@ -7,7 +7,7 @@
     "@react-hook/debounce": "^3.0.0",
     "@sentry/react": "^6.2.0",
     "@solana/spl-token-registry": "^0.1.9",
-    "@solana/web3.js": "^0.94.1",
+    "@solana/web3.js": "^0.94.2",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.0",
diff --git a/explorer/src/components/account/TokenLargestAccountsCard.tsx b/explorer/src/components/account/TokenLargestAccountsCard.tsx
index 236e0fee7..8779d355d 100644
--- a/explorer/src/components/account/TokenLargestAccountsCard.tsx
+++ b/explorer/src/components/account/TokenLargestAccountsCard.tsx
@@ -12,6 +12,7 @@ import { FetchStatus } from "providers/cache";
 import { useMintAccountInfo } from "providers/accounts";
 import { normalizeTokenAmount } from "utils";
 import { useTokenRegistry } from "providers/mints/token-registry";
+import BigNumber from "bignumber.js";
 
 export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
   const mintAddress = pubkey.toBase58();
@@ -59,7 +60,7 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
   // Find largest fixed point in accounts array
   const balanceFixedPoint = accounts.reduce(
     (prev: number, current: TokenAccountBalancePairWithOwner) => {
-      const amount = `${current.uiAmount}`;
+      const amount = `${current.uiAmountString}`;
       const length = amount.length;
       const decimalIndex = amount.indexOf(".");
       if (decimalIndex >= 0 && length - decimalIndex - 1 > prev) {
@@ -113,10 +114,17 @@ const renderAccountRow = (
   supply: number
 ) => {
   let percent = "-";
-  if (supply > 0) {
-    percent = `${((100 * account.uiAmount) / supply).toFixed(3)}%`;
+  if (supply > 0 && account.uiAmountString) {
+    let uiAmountPercent = new BigNumber(account.uiAmountString)
+      .times(100)
+      .dividedBy(supply);
 
-    if (parseFloat(percent) === 0 && account.uiAmount > 0) {
+    percent = `${uiAmountPercent.toFormat(3)}%`;
+
+    if (
+      parseFloat(percent) === 0 &&
+      new BigNumber(account.uiAmountString).gt(0)
+    ) {
       percent = `~${percent}`;
     }
   }
@@ -132,20 +140,10 @@ const renderAccountRow = (
         {account.owner && <Address pubkey={account.owner} link truncate />}
       </td>
       <td className="text-right text-monospace">
-        {fixedLocaleNumber(account.uiAmount, balanceFixedPoint)}
+        {account.uiAmountString &&
+          new BigNumber(account.uiAmountString).toFormat(balanceFixedPoint)}
       </td>
       <td className="text-right text-monospace">{percent}</td>
     </tr>
   );
 };
-
-function fixedLocaleNumber(value: number, fixedPoint: number) {
-  const fixed = value.toFixed(fixedPoint);
-  const split = fixed.split(".");
-
-  if (fixedPoint < 1) {
-    return parseInt(split[0], 10).toLocaleString("en");
-  }
-
-  return [parseInt(split[0], 10).toLocaleString("en"), split[1]].join(".");
-}