Fix token instruction parsing (#12065)

explorer/src/components/instruction/token/TokenDetailsCard.tsx

@@ -104,23 +104,30 @@ function TokenInstruction(props: InfoProps) {
     if (value === undefined) continue;
 
     let tag;
+    let labelSuffix = "";
     if (value instanceof PublicKey) {
       tag = <Address pubkey={value} alignRight link />;
     } else if (key === "amount") {
+      let amount;
       if (decimals === undefined) {
-        tag = <>(raw) {value}</>;
+        labelSuffix = " (raw)";
+        amount = new Intl.NumberFormat("en-US").format(value);
       } else {
-        tag = <>{normalizeTokenAmount(value, decimals).toFixed(decimals)}</>;
+        amount = new Intl.NumberFormat("en-US", {
+          minimumFractionDigits: decimals,
+          maximumFractionDigits: decimals,
+        }).format(normalizeTokenAmount(value, decimals));
       }
+      tag = <>{amount}</>;
     } else {
       tag = <>{value}</>;
     }
 
-    key = key.charAt(0).toUpperCase() + key.slice(1);
+    let label = key.charAt(0).toUpperCase() + key.slice(1) + labelSuffix;
 
     attributes.push(
       <tr key={key}>
-        <td>{key}</td>
+        <td>{label}</td>
         <td className="text-lg-right">{tag}</td>
       </tr>
     );

explorer/src/components/instruction/token/types.ts

@@ -3,10 +3,12 @@ import {
   object,
   StructType,
   number,
+  string,
   optional,
   array,
   pick,
   nullable,
+  union,
 } from "superstruct";
 import { Pubkey } from "validators/pubkey";
 
@@ -35,7 +37,7 @@ const InitializeMultisig = pick({
 const Transfer = object({
   source: Pubkey,
   destination: Pubkey,
-  amount: number(),
+  amount: union([string(), number()]),
   authority: optional(Pubkey),
   multisigAuthority: optional(Pubkey),
   signers: optional(array(Pubkey)),
@@ -44,7 +46,7 @@ const Transfer = object({
 const Approve = object({
   source: Pubkey,
   delegate: Pubkey,
-  amount: number(),
+  amount: union([string(), number()]),
   owner: optional(Pubkey),
   multisigOwner: optional(Pubkey),
   signers: optional(array(Pubkey)),
@@ -77,7 +79,7 @@ const SetAuthority = object({
 const MintTo = object({
   mint: Pubkey,
   account: Pubkey,
-  amount: number(),
+  amount: union([string(), number()]),
   mintAuthority: optional(Pubkey),
   multisigMintAuthority: optional(Pubkey),
   signers: optional(array(Pubkey)),
@@ -86,7 +88,7 @@ const MintTo = object({
 const Burn = object({
   account: Pubkey,
   mint: Pubkey,
-  amount: number(),
+  amount: union([string(), number()]),
   authority: optional(Pubkey),
   multisigAuthority: optional(Pubkey),
   signers: optional(array(Pubkey)),