useQuery the tokenpage right pane rewrite so it shows the new token m…

…int (#282) Signed-off-by: Sven Dowideit <[email protected]>
workbenchapp · Jul 20, 2022 · 3857717 · 3857717
1 parent fb902fd
commit 3857717
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 49 deletions.
diff --git a/src/renderer/components/tokens/MintInfoView.tsx b/src/renderer/components/tokens/MintInfoView.tsx
@@ -90,14 +90,15 @@ export function MintInfoView(props: { mintKey: string }) {
   const {
     loadStatus,
     account: mintInfo,
-    // error,
+    error,
   } = useParsedAccount(net, mintKey, {
     retry: 2, // TODO: this is here because sometimes, we get given an accountInfo with no parsed data.
   });
-  // logger.silly(
-  //   `MintInfoView(${mintKey}): ${loadStatus} - ${error}: ${JSON.stringify(
-  //     mintInfo
-  //   )}`
+  logger.debug(
+    `MintInfoView(${mintKey}): ${loadStatus} - ${error}: ${JSON.stringify(
+      mintInfo
+    )}`
+  );
   const mintEventKey = `${mintKey}_mint_info`;
 
   // ("idle" or "error" or "loading" or "success").
@@ -107,15 +108,17 @@ export function MintInfoView(props: { mintKey: string }) {
     !mintInfo.accountInfo ||
     !mintInfo.accountInfo.data?.parsed
   ) {
-    // logger.error(`something not ready: ${loadStatus}`);
+    logger.verbose(
+      `something not ready for ${JSON.stringify(mintInfo)}: ${loadStatus}`
+    );
 
     return (
       <Accordion.Item eventKey={mintEventKey}>
         <ActiveAccordionHeader eventKey={mintEventKey} callback={() => {}}>
-          Loading info
+          Loading Mint info
         </ActiveAccordionHeader>
         <Accordion.Body>
-          <pre className="exe-hexdump p-2 rounded">Loading info </pre>
+          <pre className="exe-hexdump p-2 rounded">Loading Mint info</pre>
         </Accordion.Body>
       </Accordion.Item>
     );
@@ -133,10 +136,10 @@ export function MintInfoView(props: { mintKey: string }) {
     return (
       <Accordion.Item eventKey={mintEventKey}>
         <ActiveAccordionHeader eventKey={mintEventKey} callback={() => {}}>
-          Loading info
+          Loading Mint data
         </ActiveAccordionHeader>
         <Accordion.Body>
-          <pre className="exe-hexdump p-2 rounded">Loading info </pre>
+          <pre className="exe-hexdump p-2 rounded">Loading Mint data </pre>
         </Accordion.Body>
       </Accordion.Item>
     );

diff --git a/src/renderer/nav/TokenPage.tsx b/src/renderer/nav/TokenPage.tsx
@@ -6,21 +6,19 @@ import { Row, Col, Form, Accordion } from 'react-bootstrap';
 
 import * as sol from '@solana/web3.js';
 import * as spltoken from '@solana/spl-token';
-
+import { useQuery } from 'react-query';
 import { useWallet } from '@solana/wallet-adapter-react';
+import { queryTokenAccounts } from '../data/accounts/getAccount';
 
 import { MetaplexMintMetaDataView } from '../components/tokens/MetaplexMintMetaDataView';
 import {
   NetStatus,
   selectValidatorNetworkState,
 } from '../data/ValidatorNetwork/validatorNetworkState';
-import { getTokenAccounts } from '../data/accounts/getAccount';
 import { useAppSelector } from '../hooks';
 import AccountView from '../components/AccountView';
 import { MintInfoView } from '../components/tokens/MintInfoView';
 
-import { logger } from '../common/globals';
-
 function NotAbleToShowBanner({ children }) {
   return (
     <div className="h-full w-full justify-center items-center flex flex-col">
@@ -66,52 +64,73 @@ function TokenPage() {
   // TODO: this will come from main config...
   const [mintList, updateMintList] = useState<sol.PublicKey[]>([]);
   const [mintKey, updateMintKey] = useState<sol.PublicKey>();
+  const {
+    status: loadStatus,
+    // error,
+    data: tokenAccountsData,
+  } = useQuery<sol.AccountInfo<sol.ParsedAccountData>, Error>(
+    ['parsed-token-account', { net, pubKey: fromKey.publicKey?.toString() }],
+    queryTokenAccounts
+  );
+
+  useEffect(() => {
+    updateMintKey(undefined);
+  }, [net, status]);
 
   const setMintPubKey = (pubKey: string | sol.PublicKey) => {
-    const key = new sol.PublicKey(pubKey);
+    if (typeof pubKey === 'string') {
+      const key = new sol.PublicKey(pubKey);
 
-    updateMintKey(key);
+      updateMintKey(key);
+    } else {
+      updateMintKey(pubKey);
+    }
   };
+
   useEffect(() => {
-    if (status !== NetStatus.Running) {
-      updateMintList([]);
-      updateMintKey(undefined);
+    if (!tokenAccountsData) {
       return;
     }
-    if (!fromKey.publicKey) {
-      updateMintList([]);
+    const tokenAccounts = tokenAccountsData.value;
+
+    const mints: sol.PublicKey[] = [];
+    let foundMintKey = false;
+
+    tokenAccounts?.map(
+      (tAccount: {
+        pubkey: sol.PublicKey;
+        account: sol.AccountInfo<sol.ParsedAccountData>;
+      }) => {
+        const accountState = tAccount.account.data.parsed
+          .info as spltoken.Account;
+
+        mints.push(accountState.mint);
+        if (accountState.mint.toString() === mintKey?.toString()) {
+          foundMintKey = true;
+        }
+        return mints;
+      }
+    );
+    if (!foundMintKey && mintKey) {
       updateMintKey(undefined);
-      return;
     }
-    if (mintList.length > 0) {
-      // TODO: need to work out when to refresh
-      return;
+
+    updateMintList(mints);
+  }, [mintKey, tokenAccountsData]);
+
+  useEffect(() => {
+    if (!mintKey && mintList.length > 0) {
+      updateMintKey(mintList[0]);
     }
-    getTokenAccounts(net, fromKey.publicKey.toString())
-      .then((ATAs) => {
-        const mints: sol.PublicKey[] = [];
-        let addMintKey = true;
-        ATAs.value.map((ATA) => {
-          const accountState = ATA.account.data.parsed.info as spltoken.Account;
-
-          mints.push(accountState.mint);
-          if (accountState.mint === mintKey) {
-            addMintKey = false;
-          }
-          return mints;
-        });
-        if (addMintKey && mintKey) {
-          mints.push(mintKey);
-        }
+  }, [mintKey, mintList]);
 
-        updateMintList(mints);
-        if (mints.length > 0) {
-          setMintPubKey(mints[0].toString());
-        }
-        return mints;
-      })
-      .catch(logger.error);
-  }, [fromKey.publicKey, mintKey, mintList.length, net, status]);
+  if (loadStatus !== 'success') {
+    return <div>Loading token mints</div>; // TODO: need some "loading... ()"
+  }
+
+  if (!tokenAccountsData) {
+    return <div>Loading token mints (still)</div>;
+  }
 
   const { publicKey } = fromKey;
   if (!publicKey) {