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

@@ -2607,9 +2607,9 @@
       }
     },
     "@solana/web3.js": {
-      "version": "0.94.1",
+      "version": "0.94.2",
-      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.94.1.tgz",
+      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.94.2.tgz",
-      "integrity": "sha512-ikITz8a5JYpJwup5NESJtZYYJ+86SHqmglhlREVhlPkMfYyOsuWhnW3fd8vKCTze1AhUKMjo35BrYTbi6p2ImQ==",
+      "integrity": "sha512-enJZ9eVJMvNtpuXdygAZHBlPC+2Q3paLY+KforFhVUpi/bkBADDKJWd90RICyu3sPKiVt8YLAs9cIxriQpQqng==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "bn.js": "^5.0.0",

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",

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) {
+  if (supply > 0 && account.uiAmountString) {
-    percent = `${((100 * account.uiAmount) / supply).toFixed(3)}%`;
+    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(".");
-}