Compact and nest token related accounts

src/renderer/App.scss

@@ -33,9 +33,13 @@
     color: black;
 }
 
-div.pre {
+.pre {
     font-family: "Space Mono", monospace;
 }
 
+.accordion-flush .accordion-item .accordion-button {
+    padding: 2px 15px;
+}
+
 // Import all of bootstrap, this isn't an exercise in minimisation
 // @import "bootstrap/scss/bootstrap";

src/renderer/components/InlinePK.tsx

@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import { faExplosion } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
@@ -48,15 +47,15 @@ const InlinePK: React.FC<{
 
   if (!pk) {
     return (
-      <span className={classnames('flex items-center', className)}>
+      <span>
         <small>No onchain account</small>
       </span>
     );
   }
 
   return (
-    <span className={classnames('flex items-center', className)}>
-      <div className="pre">{prettifyPubkey(pk, formatLength)}</div>
+    <span className={`${className}`}>
+      <span className="pre">{prettifyPubkey(pk, formatLength)}</span>
       <CopyIcon writeValue={pk} />
       <small>
         {pk !== '' ? (

src/renderer/components/tokens/MetaplexMintMetaDataView.tsx

@@ -52,7 +52,7 @@ export function MetaplexMintMetaDataView(props: { mintKey: string }) {
 
   if (!mintKey) {
     return (
-      <Accordion.Item eventKey={mintEventKey}>
+      <Accordion.Item className="pl-4" eventKey={mintEventKey}>
         <ActiveAccordionHeader eventKey={mintEventKey} callback={() => {}}>
           No Mint selected
         </ActiveAccordionHeader>
@@ -67,7 +67,7 @@ export function MetaplexMintMetaDataView(props: { mintKey: string }) {
   // ("idle" or "error" or "loading" or "success").
   if (loadStatus === 'loading') {
     return (
-      <Accordion.Item eventKey={mintEventKey}>
+      <Accordion.Item className="pl-4" eventKey={mintEventKey}>
         <ActiveAccordionHeader eventKey={mintEventKey} callback={() => {}}>
           Loading Metaplex token info{' '}
           <MetaplexTokenDataButton mintPubKey={mintPubKey} disabled />
@@ -83,9 +83,12 @@ export function MetaplexMintMetaDataView(props: { mintKey: string }) {
 
   if (!metaInfo || !metaInfo.data) {
     return (
-      <Accordion.Item eventKey={mintEventKey}>
+      <Accordion.Item className="pl-4" eventKey={mintEventKey}>
         <ActiveAccordionHeader eventKey={mintEventKey} callback={() => {}}>
-          <div className="col flex-1">No Metaplex token info </div>
+          <div className="col flex-1">
+            <b>Metaplex Info</b>
+            <span className="ml-2 text-slate-400">None</span>
+          </div>
           <div className="col shrink">
             <MetaplexTokenDataButton
               mintPubKey={mintPubKey}
@@ -103,10 +106,10 @@ export function MetaplexMintMetaDataView(props: { mintKey: string }) {
     metaInfo.data.isMutable;
 
   return (
-    <Accordion.Item eventKey={mintEventKey}>
+    <Accordion.Item className="pl-4" eventKey={mintEventKey}>
       <ActiveAccordionHeader eventKey={mintEventKey} callback={() => {}}>
-        <div className="col basis-48">
-          <b>Metaplex Metadata</b>
+        <div className="col">
+          <b className="mr-2">Metadata</b>
           <InlinePK pk={metaInfo.pubkey?.toString()} formatLength={9} />
         </div>
         <div className="col flex-1">

src/renderer/components/tokens/MetaplexTokenData.tsx

@@ -229,7 +229,7 @@ function MetaplexTokenDataButton(props: {
         }
         variant="success"
       >
-        Edit Metaplex Data
+        Edit
       </Button>
     </OverlayTrigger>
   );

src/renderer/components/tokens/MintInfoView.tsx

@@ -12,10 +12,7 @@ import { useState } from 'react';
 import * as walletWeb3 from '../../wallet-adapter/web3';
 import { useAppSelector } from '../../hooks';
 
-import {
-  truncateSolAmount,
-  useParsedAccount,
-} from '../../data/accounts/getAccount';
+import { useParsedAccount } from '../../data/accounts/getAccount';
 import { selectValidatorNetworkState } from '../../data/ValidatorNetwork/validatorNetworkState';
 
 import { logger } from '../../common/globals';
@@ -145,19 +142,17 @@ export function MintInfoView(props: { mintKey: string }) {
     );
   }
 
+  const supply = mintInfo?.accountInfo.data?.parsed.info.supply;
+
   return (
-    <Accordion.Item eventKey={mintEventKey}>
+    <Accordion.Item className="pl-2" eventKey={mintEventKey}>
       <ActiveAccordionHeader eventKey={mintEventKey} callback={() => {}}>
         <div className=" basis-48">
-          <b>Mint</b>
+          <b className="mr-2">Mint</b>
           <InlinePK pk={mintKey} formatLength={9} />
         </div>
         <div className="flex-1">
-          holds {mintInfo?.accountInfo.data?.parsed.info.supply} tokens (
-          {truncateSolAmount(
-            mintInfo?.accountInfo?.lamports / sol.LAMPORTS_PER_SOL
-          )}{' '}
-          SOL)
+          {supply} token{supply > 1 && 's'}
         </div>
         <div className="shrink">
           <ButtonWithConfirmation

src/renderer/components/tokens/TokensListView.tsx

@@ -2,10 +2,7 @@ import { Card, Accordion, Container } from 'react-bootstrap';
 import * as sol from '@solana/web3.js';
 import { useConnection, useWallet } from '@solana/wallet-adapter-react';
 import { useQuery } from 'react-query';
-import {
-  truncateSolAmount,
-  queryTokenAccounts,
-} from '../../data/accounts/getAccount';
+import { queryTokenAccounts } from '../../data/accounts/getAccount';
 import { selectValidatorNetworkState } from '../../data/ValidatorNetwork/validatorNetworkState';
 
 import { useAppSelector } from '../../hooks';
@@ -74,6 +71,8 @@ export function TokensListView(props: { pubKey: string | undefined }) {
           pubkey: sol.PublicKey;
           account: sol.AccountInfo<sol.ParsedAccountData>;
         }) => {
+          const { amount } = tAccount.account.data.parsed.info.tokenAmount;
+
           // TODO: extract to its own component
           return (
             <Card key={tAccount.pubkey.toString()}>
@@ -86,21 +85,15 @@ export function TokensListView(props: { pubKey: string | undefined }) {
                         eventKey={ataEventKey}
                         callback={() => {}}
                       >
-                        <div className=" basis-48">
-                          <b>ATA</b>
+                        <div>
+                          <b className="mr-2">ATA</b>
                           <InlinePK
                             pk={tAccount.pubkey.toString()}
                             formatLength={9}
                           />{' '}
                         </div>
                         <div className="flex-1">
-                          holds{' '}
-                          {tAccount.account.data.parsed.info.tokenAmount.amount}{' '}
-                          tokens (
-                          {truncateSolAmount(
-                            tAccount.account.lamports / sol.LAMPORTS_PER_SOL
-                          )}{' '}
-                          SOL)
+                          {amount} token{amount > 1 && 's'}
                         </div>
                         <div className="shrink">
                           <MintTokenToButton

src/renderer/nav/TokenPage.tsx

@@ -145,22 +145,26 @@ function TokenPage() {
             <AccountView pubKey={myWallet?.toString()} />
           </Col>
           <Col className="col-md-6 almost-vh-100 vscroll">
-            Token Mint :{' '}
-            <Form.Select
-              hidden={mintList.length <= 0}
-              aria-label="Default select example"
-              onChange={(value) => setMintPubKey(value.target.value)}
-              defaultValue={mintKey?.toString()}
-            >
-              {mintList.map((key) => {
-                return (
-                  <option key={key.toString()} value={key.toString()}>
-                    {key.toString()}
-                  </option>
-                );
-              })}
-            </Form.Select>
-            <MintAccordians mintKey={mintKey} />
+            {mintList.length > 0 && (
+              <div>
+                Token Mint :{' '}
+                <Form.Select
+                  hidden={mintList.length <= 0}
+                  aria-label="Default select example"
+                  onChange={(value) => setMintPubKey(value.target.value)}
+                  defaultValue={mintKey?.toString()}
+                >
+                  {mintList.map((key) => {
+                    return (
+                      <option key={key.toString()} value={key.toString()}>
+                        {key.toString()}
+                      </option>
+                    );
+                  })}
+                </Form.Select>
+                <MintAccordians mintKey={mintKey} />
+              </div>
+            )}
           </Col>
         </Split>
       </Row>