Explorer: support uiAmountString api updates (#15742)

* fix: support uiAmountString api updates

* fix: remove this uiAmount

* fix: change owned account section and token account section to support BigNumber uiAmountString

* fix: update web3 to latest

explorer/package-lock.json

@@ -2607,9 +2607,9 @@
       }
     },
     "@solana/web3.js": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.94.0.tgz",
-      "integrity": "sha512-uyRbhugCbRg3nBdQQo40Fv2prK7CMzCYTxiKkEBkYxl2hRbj1kmC2itXVTUICiXjgE7DS4KY5y9X+xRuYDMCxw==",
+      "version": "0.94.1",
+      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.94.1.tgz",
+      "integrity": "sha512-ikITz8a5JYpJwup5NESJtZYYJ+86SHqmglhlREVhlPkMfYyOsuWhnW3fd8vKCTze1AhUKMjo35BrYTbi6p2ImQ==",
       "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.0",
+    "@solana/web3.js": "^0.94.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.0",

explorer/src/components/account/OwnedTokensCard.tsx

@@ -13,6 +13,7 @@ import { useQuery } from "utils/url";
 import { Link } from "react-router-dom";
 import { Location } from "history";
 import { useTokenRegistry } from "providers/mints/token-registry";
+import { BigNumber } from "bignumber.js";
 
 type Display = "summary" | "detail" | null;
 
@@ -117,7 +118,7 @@ function HoldingsDetailTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
           <Address pubkey={tokenAccount.info.mint} link truncate />
         </td>
         <td>
-          {tokenAccount.info.tokenAmount.uiAmount}{" "}
+          {tokenAccount.info.tokenAmount.uiAmountString}{" "}
           {tokenDetails && tokenDetails.tokenSymbol}
         </td>
       </tr>
@@ -145,17 +146,17 @@ function HoldingsDetailTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
 
 function HoldingsSummaryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
   const { tokenRegistry } = useTokenRegistry();
-  const mappedTokens = new Map<string, number>();
+  const mappedTokens = new Map<string, string>();
   for (const { info: token } of tokens) {
     const mintAddress = token.mint.toBase58();
     const totalByMint = mappedTokens.get(mintAddress);
 
-    let amount = token.tokenAmount.uiAmount;
+    let amount = new BigNumber(token.tokenAmount.uiAmountString);
     if (totalByMint !== undefined) {
-      amount += totalByMint;
+      amount.plus(totalByMint);
     }
 
-    mappedTokens.set(mintAddress, amount);
+    mappedTokens.set(mintAddress, amount.toString());
   }
 
   const detailsList: React.ReactNode[] = [];

explorer/src/components/account/TokenAccountSection.tsx

@@ -15,6 +15,7 @@ import { normalizeTokenAmount } from "utils";
 import { addressLabel } from "utils/tx";
 import { reportError } from "utils/sentry";
 import { useTokenRegistry } from "providers/mints/token-registry";
+import { BigNumber } from "bignumber.js";
 
 export function TokenAccountSection({
   account,
@@ -153,14 +154,12 @@ function TokenAccountCard({
       <>
         ◎
         <span className="text-monospace">
-          {new Intl.NumberFormat("en-US", { maximumFractionDigits: 9 }).format(
-            info.tokenAmount.uiAmount
-          )}
+          {new BigNumber(info.tokenAmount.uiAmountString).toFormat(9)}
         </span>
       </>
     );
   } else {
-    balance = <>{info.tokenAmount.uiAmount}</>;
+    balance = <>{info.tokenAmount.uiAmountString}</>;
     unit = tokenRegistry.get(info.mint.toBase58())?.tokenSymbol || "tokens";
   }
 
@@ -221,9 +220,9 @@ function TokenAccountCard({
               <>
                 ◎
                 <span className="text-monospace">
-                  {new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 9,
-                  }).format(info.rentExemptReserve.uiAmount)}
+                  {new BigNumber(
+                    info.rentExemptReserve.uiAmountString
+                  ).toFormat(9)}
                 </span>
               </>
             </td>

explorer/src/components/transaction/TokenBalancesCard.tsx

@@ -109,8 +109,18 @@ function generateTokenBalanceRows(
     const preBalance = preBalanceMap[accountIndex];
     const account = accounts[accountIndex].pubkey;
 
+    if (!uiTokenAmount.uiAmountString) {
+      // uiAmount deprecation
+      return;
+    }
+
     // case where mint changes
     if (preBalance && preBalance.mint !== mint) {
+      if (!preBalance.uiTokenAmount.uiAmountString) {
+        // uiAmount deprecation
+        return;
+      }
+
       rows.push({
         account: accounts[accountIndex].pubkey,
         accountIndex,
@@ -119,7 +129,7 @@ function generateTokenBalanceRows(
           amount: "0",
           uiAmount: 0,
         },
-        delta: new BigNumber(-preBalance.uiTokenAmount.uiAmount),
+        delta: new BigNumber(-preBalance.uiTokenAmount.uiAmountString),
         mint: preBalance.mint,
       });
 
@@ -127,7 +137,7 @@ function generateTokenBalanceRows(
         account: accounts[accountIndex].pubkey,
         accountIndex,
         balance: uiTokenAmount,
-        delta: new BigNumber(uiTokenAmount.uiAmount),
+        delta: new BigNumber(uiTokenAmount.uiAmountString),
         mint: mint,
       });
       return;
@@ -136,11 +146,16 @@ function generateTokenBalanceRows(
     let delta;
 
     if (preBalance) {
-      delta = new BigNumber(uiTokenAmount.uiAmount).minus(
-        preBalance.uiTokenAmount.uiAmount
+      if (!preBalance.uiTokenAmount.uiAmountString) {
+        // uiAmount deprecation
+        return;
+      }
+
+      delta = new BigNumber(uiTokenAmount.uiAmountString).minus(
+        preBalance.uiTokenAmount.uiAmountString
       );
     } else {
-      delta = new BigNumber(uiTokenAmount.uiAmount);
+      delta = new BigNumber(uiTokenAmount.uiAmountString);
     }
 
     rows.push({

explorer/src/validators/accounts/token.ts

@@ -22,7 +22,7 @@ const AccountState = enums(["initialized", "uninitialized", "frozen"]);
 
 const TokenAmount = pick({
   decimals: number(),
-  uiAmount: number(),
+  uiAmountString: string(),
   amount: string(),
 });