From 02bf9ca83453b63a4a6b4895d465d5001aee0df3 Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Wed, 21 Oct 2020 18:47:02 +0800
Subject: [PATCH] Refresh mint distribution when account info refreshes
 (#13064)

---
 .../account/TokenLargestAccountsCard.tsx      | 11 ++++++---
 explorer/src/providers/accounts/index.tsx     | 24 ++++++++++---------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/explorer/src/components/account/TokenLargestAccountsCard.tsx b/explorer/src/components/account/TokenLargestAccountsCard.tsx
index 964bbae430..83081854fb 100644
--- a/explorer/src/components/account/TokenLargestAccountsCard.tsx
+++ b/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;
diff --git a/explorer/src/providers/accounts/index.tsx b/explorer/src/providers/accounts/index.tsx
index b8430207ad..e15af3a24d 100644
--- a/explorer/src/providers/accounts/index.tsx
+++ b/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(