make InlinePK show Explorer link, so I can use it elsewhere

Signed-off-by: Sven Dowideit <SvenDowideit@home.org.au>
workbenchapp · May 13, 2022 · 5e558d3 · 5e558d3
1 parent 672085a
commit 5e558d3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 43 deletions.
diff --git a/src/renderer/components/AccountView.tsx b/src/renderer/components/AccountView.tsx
@@ -9,7 +9,6 @@ import * as sol from '@solana/web3.js';
 import * as spltoken from '@solana/spl-token';
 import { useInterval, useAppSelector } from '../hooks';
 
-import analytics from '../common/analytics';
 import { AccountInfo } from '../data/accounts/accountInfo';
 import {
   truncateLamportAmount,
@@ -23,7 +22,6 @@ import {
 import {
   Net,
   NetStatus,
-  netToURL,
   selectValidatorNetworkState,
 } from '../data/ValidatorNetwork/validatorNetworkState';
 import InlinePK from './InlinePK';
@@ -34,19 +32,6 @@ import { TokenMetaView } from './TokenView';
 
 const logger = window.electron.log;
 
-const explorerURL = (net: Net, address: string) => {
-  switch (net) {
-    case Net.Test:
-    case Net.Dev:
-      return `https://explorer.solana.com/address/${address}?cluster=${net}`;
-    case Net.Localhost:
-      return `https://explorer.solana.com/address/${address}/ \
-  ?cluster=custom&customUrl=${encodeURIComponent(netToURL(net))}`;
-    default:
-      return `https://explorer.solana.com/address/${address}`;
-  }
-};
-
 function tryExpandingTokenState(
   net: Net,
   tAccount: {
@@ -177,33 +162,6 @@ function AccountView(props: { pubKey: string | undefined }) {
                       )}
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      <small className="text-muted">Explorer</small>
-                    </td>
-                    <td>
-                      <small>
-                        {account ? (
-                          <a
-                            onClick={() =>
-                              analytics('clickExplorerLink', { net })
-                            }
-                            href={explorerURL(
-                              net,
-                              account.accountId.toString()
-                            )}
-                            target="_blank"
-                            className="sol-link"
-                            rel="noreferrer"
-                          >
-                            Link
-                          </a>
-                        ) : (
-                          'No onchain account'
-                        )}
-                      </small>
-                    </td>
-                  </tr>
                 </tbody>
               </table>
             </div>

diff --git a/src/renderer/components/InlinePK.tsx b/src/renderer/components/InlinePK.tsx
@@ -1,4 +1,15 @@
+import { faExplosion } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
 import { ACCOUNTS_NONE_KEY } from '../data/accounts/accountInfo';
+import analytics from '../common/analytics';
+import { useAppSelector } from '../hooks';
+import {
+  Net,
+  netToURL,
+  selectValidatorNetworkState,
+} from '../data/ValidatorNetwork/validatorNetworkState';
 
 import CopyIcon from './CopyIcon';
 
@@ -12,12 +23,62 @@ const prettifyPubkey = (pk = '') => {
     : '';
 };
 
+const explorerURL = (net: Net, address: string) => {
+  switch (net) {
+    case Net.Test:
+    case Net.Dev:
+      return `https://explorer.solana.com/address/${address}?cluster=${net}`;
+    case Net.Localhost:
+      return `https://explorer.solana.com/address/${address}/ \
+  ?cluster=custom&customUrl=${encodeURIComponent(netToURL(net))}`;
+    default:
+      return `https://explorer.solana.com/address/${address}`;
+  }
+};
+
+const renderCopyTooltip = (id: string, text: string) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any,func-names
+  function (ttProps: any) {
+    return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <Tooltip id={id} {...ttProps}>
+        <div>{text}</div>
+      </Tooltip>
+    );
+  };
+
 function InlinePK(props: { pk: string; className?: string }) {
   const { pk, className } = props;
+  const { net } = useAppSelector(selectValidatorNetworkState);
+
   return (
     <span className={className}>
       <code>{prettifyPubkey(pk)}</code>
       <CopyIcon writeValue={pk} />
+      <small>
+        {pk !== '' ? (
+          <OverlayTrigger
+            placement="bottom"
+            delay={{ show: 250, hide: 0 }}
+            overlay={renderCopyTooltip(pk, 'Solana Explorer')}
+          >
+            <a
+              onClick={() => analytics('clickExplorerLink', { net })}
+              href={explorerURL(net, pk)}
+              target="_blank"
+              className="sol-link"
+              rel="noreferrer"
+            >
+              <FontAwesomeIcon
+                className="border-success rounded p-1 exe-icon"
+                icon={faExplosion}
+              />
+            </a>
+          </OverlayTrigger>
+        ) : (
+          'No onchain account'
+        )}
+      </small>
     </span>
   );
 }

diff --git a/src/renderer/nav/TokenPage.tsx b/src/renderer/nav/TokenPage.tsx
@@ -88,7 +88,7 @@ function TokenPage() {
     const conn = new metaplex.Connection(netToURL(net), 'finalized');
     try {
       const metadata = new metaplex.programs.metadata.MetadataDataData({
-        name: 'Worbench token',
+        name: 'Workbench token',
         symbol: 'WORKBENCH',
         uri: 'https://github.com/workbenchapp/solana-workbench/',
         sellerFeeBasisPoints: 10,