Refresh mint distribution when account info refreshes (#13064)

explorer/src/components/account/TokenLargestAccountsCard.tsx

@@ -19,14 +19,17 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
   const mintInfo = useMintAccountInfo(mintAddress);
   const largestAccounts = useTokenLargestTokens(mintAddress);
   const fetchLargestAccounts = useFetchTokenLargestAccounts();
-  const refreshLargest = () => fetchLargestAccounts(pubkey);
+  const refreshLargest = React.useCallback(() => fetchLargestAccounts(pubkey), [
+    pubkey,
+    fetchLargestAccounts,
+  ]);
   const { cluster } = useCluster();
   const unit = TokenRegistry.get(mintAddress, cluster)?.symbol;
   const unitLabel = unit ? `(${unit})` : "";
 
   React.useEffect(() => {
-    if (!largestAccounts) refreshLargest();
-  }, [mintAddress]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (mintInfo) refreshLargest();
+  }, [mintInfo, refreshLargest]);
 
   // Largest accounts hasn't started fetching
   if (largestAccounts === undefined) return null;
@@ -45,6 +48,8 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
         text="Failed to fetch largest accounts"
       />
     );
+  } else if (largestAccounts.status === FetchStatus.Fetching) {
+    return <LoadingCard message="Refreshing largest accounts" />;
   }
 
   const accounts = largestAccounts.data.largest;

explorer/src/providers/accounts/index.tsx

@@ -263,19 +263,21 @@ export function useMintAccountInfo(
   address: string | undefined
 ): MintAccountInfo | undefined {
   const accountInfo = useAccountInfo(address);
-  if (address === undefined) return;
+  return React.useMemo(() => {
+    if (address === undefined) return;
 
-  try {
-    const data = accountInfo?.data?.details?.data;
-    if (!data) return;
-    if (data.program !== "spl-token" || data.parsed.type !== "mint") {
-      throw new Error("Expected mint");
+    try {
+      const data = accountInfo?.data?.details?.data;
+      if (!data) return;
+      if (data.program !== "spl-token" || data.parsed.type !== "mint") {
+        throw new Error("Expected mint");
+      }
+
+      return coerce(data.parsed.info, MintAccountInfo);
+    } catch (err) {
+      reportError(err, { address });
     }
-
-    return coerce(data.parsed.info, MintAccountInfo);
-  } catch (err) {
-    reportError(err, { address });
-  }
+  }, [address, accountInfo]);
 }
 
 export function useTokenAccountInfo(