UX improvements

2020-05-02 12:55:12 +08:00
parent 484a4db626
commit 42225446c4
13 changed files with 430 additions and 281 deletions
--- a/explorer/package-lock.json
+++ b/explorer/package-lock.json
@ -9657,6 +9657,22 @@
        "prepend-http": "^1.0.0",
        "query-string": "^4.1.0",
        "sort-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+        }
      }
    },
    "npm-run-all": {
@ -11446,15 +11462,6 @@
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
    },
-    "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-      "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
-      }
-    },
    "querystring": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@ -13175,11 +13182,6 @@
      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
    },
-    "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-    },
    "string-length": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
--- a/explorer/src/App.tsx
+++ b/explorer/src/App.tsx
@ -21,7 +21,7 @@ function App() {
          <div className="container">
            <div className="row align-items-end">
              <div className="col">
-                <Link to="/">
+                <Link to={location => ({ ...location, pathname: "/" })}>
                  <img src={Logo} width="250" alt="Solana Explorer" />
                </Link>
              </div>
--- a/explorer/src/components/AccountsCard.tsx
+++ b/explorer/src/components/AccountsCard.tsx
@ -125,8 +125,8 @@ const renderAccountRow = (
      break;
    case Status.CheckFailed:
    case Status.HistoryFailed:
-      statusClass = "danger";
-      statusText = "Error";
+      statusClass = "dark";
+      statusText = "Cluster Error";
      break;
    case Status.Checking:
    case Status.FetchingHistory:
--- a/explorer/src/components/ClusterModal.tsx
+++ b/explorer/src/components/ClusterModal.tsx
@ -1,11 +1,12 @@
 import React from "react";
+import { Link, useLocation, useHistory } from "react-router-dom";
+import { Location } from "history";
 import {
  useCluster,
-  useClusterDispatch,
-  updateCluster,
  ClusterStatus,
  clusterUrl,
  clusterName,
+  clusterSlug,
  CLUSTERS,
  Cluster,
  useClusterModal
@ -45,19 +46,35 @@ function ClusterModal() {
 type InputProps = { activeSuffix: string; active: boolean };
 function CustomClusterInput({ activeSuffix, active }: InputProps) {
  const { customUrl } = useCluster();
-  const dispatch = useClusterDispatch();
  const [editing, setEditing] = React.useState(false);
+  const history = useHistory();
+  const location = useLocation();

  const customClass = (prefix: string) =>
    active ? `${prefix}-${activeSuffix}` : "";

+  const clusterLocation = (location: Location, url: string) => {
+    const params = new URLSearchParams(location.search);
+    params.set("clusterUrl", url);
+    params.delete("cluster");
+    return {
+      ...location,
+      search: params.toString()
+    };
+  };
+
+  const updateCustomUrl = React.useCallback(
+    (url: string) => {
+      history.push(clusterLocation(location, url));
+    },
+    [history, location]
+  );
+
  const inputTextClass = editing ? "" : "text-muted";
  return (
-    <div
+    <Link
+      to={location => clusterLocation(location, customUrl)}
      className="btn input-group input-group-merge p-0"
-      onClick={() =>
-        !active && updateCluster(dispatch, Cluster.Custom, customUrl)
-      }
    >
      <input
        type="text"
@ -67,22 +84,19 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
        )}`}
        onFocus={() => setEditing(true)}
        onBlur={() => setEditing(false)}
-        onInput={e =>
-          updateCluster(dispatch, Cluster.Custom, e.currentTarget.value)
-        }
+        onInput={e => updateCustomUrl(e.currentTarget.value)}
      />
      <div className="input-group-prepend">
        <div className={`input-group-text pr-0 ${customClass("border")}`}>
          <span className={customClass("text") || "text-dark"}>Custom:</span>
        </div>
      </div>
-    </div>
+    </Link>
  );
 }

 function ClusterToggle() {
  const { status, cluster, customUrl } = useCluster();
-  const dispatch = useClusterDispatch();

  let activeSuffix = "";
  switch (status) {
@ -116,21 +130,35 @@ function ClusterToggle() {
          ? `border-${activeSuffix} text-${activeSuffix}`
          : "btn-white text-dark";

+        const clusterLocation = (location: Location) => {
+          const params = new URLSearchParams(location.search);
+          const slug = clusterSlug(net);
+          if (slug && slug !== "mainnet-beta") {
+            params.set("cluster", slug);
+            params.delete("clusterUrl");
+          } else {
+            params.delete("cluster");
+            if (slug === "mainnet-beta") {
+              params.delete("clusterUrl");
+            }
+          }
+          return {
+            ...location,
+            search: params.toString()
+          };
+        };
+
        return (
-          <label
+          <Link
            key={index}
            className={`btn text-left col-12 mb-3 ${btnClass}`}
+            to={clusterLocation}
          >
-            <input
-              type="radio"
-              checked={active}
-              onChange={() => updateCluster(dispatch, net, customUrl)}
-            />
            {`${clusterName(net)}: `}
            <span className="text-muted d-inline-block">
              {clusterUrl(net, customUrl)}
            </span>
-          </label>
+          </Link>
        );
      })}
    </div>
--- a/explorer/src/components/Copyable.tsx
+++ b/explorer/src/components/Copyable.tsx
@ -3,22 +3,23 @@ import React, { useState, ReactNode } from "react";
 type CopyableProps = {
  text: string;
  children: ReactNode;
+  bottom?: boolean;
 };

 type State = "hide" | "copy" | "copied";

-function Popover({ state }: { state: State }) {
+function Popover({ state, bottom }: { state: State; bottom?: boolean }) {
  if (state === "hide") return null;
  const text = state === "copy" ? "Copy" : "Copied!";
  return (
-    <div className="popover bs-popover-top show">
+    <div className={`popover bs-popover-${bottom ? "bottom" : "top"} show`}>
      <div className="arrow" />
      <div className="popover-body">{text}</div>
    </div>
  );
 }

-function Copyable({ text, children }: CopyableProps) {
+function Copyable({ bottom, text, children }: CopyableProps) {
  const [state, setState] = useState<State>("hide");

  const copyToClipboard = () => navigator.clipboard.writeText(text);
@ -29,15 +30,14 @@ function Copyable({ text, children }: CopyableProps) {
    });

  return (
-    <div className="copyable">
-      <div
-        onClick={handleClick}
-        onMouseOver={() => setState("copy")}
-        onMouseOut={() => state === "copy" && setState("hide")}
-      >
-        {children}
-      </div>
-      <Popover state={state} />
+    <div
+      className="copyable"
+      onClick={handleClick}
+      onMouseOver={() => setState("copy")}
+      onMouseOut={() => state === "copy" && setState("hide")}
+    >
+      {children}
+      <Popover bottom={bottom} state={state} />
    </div>
  );
 }
--- a/explorer/src/components/TabbedPage.tsx
+++ b/explorer/src/components/TabbedPage.tsx
@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useClusterModal } from "providers/cluster";
 import ClusterStatusButton from "components/ClusterStatusButton";

@ -54,14 +54,16 @@ function NavLink({
  tab: Tab;
  current: Tab;
 }) {
-  const location = useLocation();
  let classes = "nav-link";
  if (tab === current) {
    classes += " active";
  }

  return (
-    <Link to={{ ...location, pathname: href }} className={classes}>
+    <Link
+      to={location => ({ ...location, pathname: href })}
+      className={classes}
+    >
      {tab}
    </Link>
  );
--- a/explorer/src/components/TransactionDetails.tsx
+++ b/explorer/src/components/TransactionDetails.tsx
@ -1,4 +1,5 @@
 import React from "react";
+import bs58 from "bs58";
 import {
  Source,
  useTransactionStatus,
@ -16,7 +17,8 @@ import {
  TransactionInstruction,
  TransferParams,
  CreateAccountParams,
-  SystemProgram
+  SystemProgram,
+  SignatureResult
 } from "@solana/web3.js";
 import ClusterStatusButton from "components/ClusterStatusButton";
 import { lamportsToSolString } from "utils";
@ -123,73 +125,51 @@ function TransactionStatusCard({ signature }: Props) {
    let statusClass = "success";
    let statusText = "Success";
    if (info.result.err) {
-      statusClass = "danger";
+      statusClass = "warning";
      statusText = "Error";
    }

    return (
-      <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
+      <h3 className="mb-0">
+        <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
+      </h3>
    );
  };

  const fee = details?.transaction?.meta?.fee;
  return (
    <div className="card">
-      <div className="card-header">
-        <div className="row align-items-center">
-          <div className="col">
-            <div className="card-header-title">Status</div>
-          </div>
-          <div className="col-auto">
-            <button className="btn btn-white btn-sm" onClick={refreshStatus}>
-              <span className="fe fe-refresh-cw mr-2"></span>
-              Refresh
-            </button>
-          </div>
-        </div>
+      <div className="card-header align-items-center">
+        <h3 className="card-header-title">Transaction Status</h3>
+        <button className="btn btn-white btn-sm" onClick={refreshStatus}>
+          <span className="fe fe-refresh-cw mr-2"></span>
+          Refresh
+        </button>
      </div>
-      <div className="card-body">
-        <div className="list-group list-group-flush my-n3">
-          <div className="list-group-item">
-            <div className="row align-items-center">
-              <div className="col">
-                <h5 className="mb-0">Result</h5>
-              </div>
-              <div className="col-auto">{renderResult()}</div>
-            </div>
-          </div>

-          <div className="list-group-item">
-            <div className="row align-items-center">
-              <div className="col">
-                <h5 className="mb-0">Block</h5>
-              </div>
-              <div className="col-auto">{info.slot}</div>
-            </div>
-          </div>
+      <TableCardBody>
+        <tr>
+          <td>Result</td>
+          <td className="text-right">{renderResult()}</td>
+        </tr>

-          <div className="list-group-item">
-            <div className="row align-items-center">
-              <div className="col">
-                <h5 className="mb-0">Confirmations</h5>
-              </div>
-              <div className="col-auto text-uppercase">
-                {info.confirmations}
-              </div>
-            </div>
-          </div>
-          {fee && (
-            <div className="list-group-item">
-              <div className="row align-items-center">
-                <div className="col">
-                  <h5 className="mb-0">Fee (SOL)</h5>
-                </div>
-                <div className="col-auto">{lamportsToSolString(fee)}</div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
+        <tr>
+          <td>Block</td>
+          <td className="text-right">{info.slot}</td>
+        </tr>
+
+        <tr>
+          <td>Confirmations</td>
+          <td className="text-right text-uppercase">{info.confirmations}</td>
+        </tr>
+
+        {fee && (
+          <tr>
+            <td>Fee (SOL)</td>
+            <td className="text-right">{lamportsToSolString(fee)}</td>
+          </tr>
+        )}
+      </TableCardBody>
    </div>
  );
 }
@ -265,7 +245,7 @@ function TransactionAccountsCard({ signature }: Props) {
  return (
    <div className="card">
      <div className="card-header">
-        <h4 className="card-header-title">Accounts</h4>
+        <h3 className="card-header-title">Transaction Accounts</h3>
      </div>
      <div className="table-responsive mb-0">
        <table className="table table-sm table-nowrap card-table">
@ -284,34 +264,108 @@ function TransactionAccountsCard({ signature }: Props) {
  );
 }

+function ixResult(result: SignatureResult, index: number) {
+  if (result.err) {
+    const err = result.err as any;
+    const ixError = err["InstructionError"];
+    if (ixError && Array.isArray(ixError)) {
+      const [errorIndex, error] = ixError;
+      if (Number.isInteger(errorIndex) && errorIndex === index) {
+        return ["warning", `"${JSON.stringify(error)}"`];
+      }
+    }
+    return ["dark"];
+  }
+  return ["success"];
+}
+
+type InstructionProps = {
+  title: string;
+  children: React.ReactNode;
+  result: SignatureResult;
+  index: number;
+};
+
+function InstructionCard({ title, children, result, index }: InstructionProps) {
+  const [resultClass, errorString] = ixResult(result, index);
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h3 className="card-header-title mb-0 d-flex align-items-center">
+          <span className={`badge badge-soft-${resultClass} mr-2`}>
+            #{index + 1}
+          </span>
+          {title} Instruction
+        </h3>
+        <h3 className="mb-0">
+          <span className="badge badge-soft-warning text-monospace">
+            {errorString}
+          </span>
+        </h3>
+      </div>
+      <TableCardBody>{children}</TableCardBody>
+    </div>
+  );
+}
+
 function TransactionInstructionsCard({ signature }: Props) {
+  const status = useTransactionStatus(signature);
  const details = useTransactionDetails(signature);
  const dispatch = useDetailsDispatch();
  const { url } = useCluster();
  const refreshDetails = () => fetchDetails(dispatch, signature, url);

-  if (!details || !details.transaction) return null;
+  if (!status || !status.info || !details || !details.transaction) return null;

  const { transaction } = details.transaction;
  if (transaction.instructions.length === 0) {
    return <RetryCard retry={refreshDetails} text="No instructions found" />;
  }

+  const result = status.info.result;
  const instructionDetails = transaction.instructions.map((ix, index) => {
    const transfer = decodeTransfer(ix);
-    if (transfer)
-      return <TransferDetails key={index} transfer={transfer} index={index} />;
+    if (transfer) {
+      return (
+        <InstructionCard
+          key={index}
+          title="Transfer"
+          result={result}
+          index={index}
+        >
+          <TransferDetails ix={ix} transfer={transfer} />
+        </InstructionCard>
+      );
+    }
+
    const create = decodeCreate(ix);
-    if (create)
-      return <CreateDetails key={index} create={create} index={index} />;
-    return <InstructionDetails key={index} ix={ix} index={index} />;
+    if (create) {
+      return (
+        <InstructionCard
+          key={index}
+          title="Create Account"
+          result={result}
+          index={index}
+        >
+          <CreateDetails ix={ix} create={create} />
+        </InstructionCard>
+      );
+    }
+
+    return (
+      <InstructionCard key={index} title="Raw" result={result} index={index}>
+        <InstructionDetails ix={ix} />
+      </InstructionCard>
+    );
  });

  return (
    <>
      <div className="container">
        <div className="header">
-          <div className="header-body">Transaction Instruction(s)</div>
+          <div className="header-body">
+            <h3 className="mb-0">Transaction Instruction(s)</h3>
+          </div>
        </div>
      </div>
      {instructionDetails}
@ -320,140 +374,186 @@ function TransactionInstructionsCard({ signature }: Props) {
 }

 function TransferDetails({
-  transfer,
-  index
+  ix,
+  transfer
 }: {
+  ix: TransactionInstruction;
  transfer: TransferParams;
-  index: number;
 }) {
  const from = transfer.fromPubkey.toBase58();
  const to = transfer.toPubkey.toBase58();
+  const [fromMeta, toMeta] = ix.keys;
  return (
-    <div className="card">
-      <div className="card-header">
-        <h3 className="card-header-title mb-0 d-flex align-items-center">
-          <span className="badge badge-soft-dark mr-2">#{index + 1}</span>
-          Transfer
-        </h3>
-      </div>
-      <div className="card-body">
-        <div className="list-group list-group-flush my-n3">
-          <ListGroupItem label="Program">
+    <>
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={SystemProgram.programId.toBase58()}>
            <code>{displayAddress(SystemProgram.programId)}</code>
-          </ListGroupItem>
-          <ListGroupItem label="From">
-            <Copyable text={from}>
-              <code>{from}</code>
-            </Copyable>
-          </ListGroupItem>
-          <ListGroupItem label="To">
-            <Copyable text={to}>
-              <code>{to}</code>
-            </Copyable>
-          </ListGroupItem>
-          <ListGroupItem label="Amount (SOL)">
-            {lamportsToSolString(transfer.lamports)}
-          </ListGroupItem>
-        </div>
-      </div>
-    </div>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <div className="mr-2 d-md-inline">From Account</div>
+          {!fromMeta.isWritable && (
+            <span className="badge badge-soft-dark mr-1">Readonly</span>
+          )}
+          {fromMeta.isSigner && (
+            <span className="badge badge-soft-dark mr-1">Signer</span>
+          )}
+        </td>
+        <td className="text-right">
+          <Copyable text={from}>
+            <code>{from}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <div className="mr-2 d-md-inline">To Account</div>
+          {!toMeta.isWritable && (
+            <span className="badge badge-soft-dark mr-1">Readonly</span>
+          )}
+          {toMeta.isSigner && (
+            <span className="badge badge-soft-dark mr-1">Signer</span>
+          )}
+        </td>
+        <td className="text-right">
+          <Copyable text={to}>
+            <code>{to}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Transfer Amount (SOL)</td>
+        <td className="text-right">{lamportsToSolString(transfer.lamports)}</td>
+      </tr>
+    </>
  );
 }

 function CreateDetails({
-  create,
-  index
+  ix,
+  create
 }: {
+  ix: TransactionInstruction;
  create: CreateAccountParams;
-  index: number;
 }) {
  const from = create.fromPubkey.toBase58();
  const newKey = create.newAccountPubkey.toBase58();
+  const [fromMeta, newMeta] = ix.keys;
+
  return (
-    <div className="card">
-      <div className="card-header">
-        <h3 className="card-header-title mb-0 d-flex align-items-center">
-          <span className="badge badge-soft-dark mr-2">#{index + 1}</span>
-          Create Account
-        </h3>
-      </div>
-      <div className="card-body">
-        <div className="list-group list-group-flush my-n3">
-          <ListGroupItem label="Program">
+    <>
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={SystemProgram.programId.toBase58()}>
            <code>{displayAddress(SystemProgram.programId)}</code>
-          </ListGroupItem>
-          <ListGroupItem label="From">
-            <Copyable text={from}>
-              <code>{from}</code>
-            </Copyable>
-          </ListGroupItem>
-          <ListGroupItem label="New Account">
-            <Copyable text={newKey}>
-              <code>{newKey}</code>
-            </Copyable>
-          </ListGroupItem>
-          <ListGroupItem label="Amount (SOL)">
-            {lamportsToSolString(create.lamports)}
-          </ListGroupItem>
-          <ListGroupItem label="Data (Bytes)">{create.space}</ListGroupItem>
-          <ListGroupItem label="Owner">
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <div className="mr-2 d-md-inline">From Account</div>
+          {!fromMeta.isWritable && (
+            <span className="badge badge-soft-dark mr-1">Readonly</span>
+          )}
+          {fromMeta.isSigner && (
+            <span className="badge badge-soft-dark mr-1">Signer</span>
+          )}
+        </td>
+        <td className="text-right">
+          <Copyable text={from}>
+            <code>{from}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <div className="mr-2 d-md-inline">New Account</div>
+          {!newMeta.isWritable && (
+            <span className="badge badge-soft-dark mr-1">Readonly</span>
+          )}
+          {newMeta.isSigner && (
+            <span className="badge badge-soft-dark mr-1">Signer</span>
+          )}
+        </td>
+        <td className="text-right">
+          <Copyable text={newKey}>
+            <code>{newKey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Transfer Amount (SOL)</td>
+        <td className="text-right">{lamportsToSolString(create.lamports)}</td>
+      </tr>
+
+      <tr>
+        <td>Allocated Space (Bytes)</td>
+        <td className="text-right">{create.space}</td>
+      </tr>
+
+      <tr>
+        <td>Assigned Owner</td>
+        <td className="text-right">
+          <Copyable text={create.programId.toBase58()}>
            <code>{displayAddress(create.programId)}</code>
-          </ListGroupItem>
-        </div>
-      </div>
-    </div>
+          </Copyable>
+        </td>
+      </tr>
+    </>
  );
 }

-function InstructionDetails({
-  ix,
-  index
-}: {
-  ix: TransactionInstruction;
-  index: number;
-}) {
+function InstructionDetails({ ix }: { ix: TransactionInstruction }) {
  return (
-    <div className="card">
-      <div className="card-header">
-        <h3 className="card-header-title mb-0 d-flex align-items-center">
-          <span className="badge badge-soft-dark mr-2">#{index + 1}</span>
-        </h3>
-      </div>
-      <div className="card-body">
-        <div className="list-group list-group-flush my-n3">
-          <ListGroupItem label="Program">
+    <>
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={ix.programId.toBase58()}>
            <code>{displayAddress(ix.programId)}</code>
-          </ListGroupItem>
-          {ix.keys.map(({ pubkey }, keyIndex) => (
-            <ListGroupItem key={keyIndex} label={`Address #${keyIndex + 1}`}>
-              <Copyable text={pubkey.toBase58()}>
-                <code>{pubkey.toBase58()}</code>
-              </Copyable>
-            </ListGroupItem>
-          ))}
-          <ListGroupItem label="Data (Bytes)">{ix.data.length}</ListGroupItem>
-        </div>
-      </div>
-    </div>
-  );
-}
+          </Copyable>
+        </td>
+      </tr>

-function ListGroupItem({
-  label,
-  children
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="list-group-item">
-      <div className="row align-items-center">
-        <div className="col">
-          <h5 className="mb-0">{label}</h5>
-        </div>
-        <div className="col-auto">{children}</div>
-      </div>
-    </div>
+      {ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => (
+        <tr key={keyIndex}>
+          <td>
+            <div className="mr-2 d-md-inline">Account #{keyIndex + 1}</div>
+            {!isWritable && (
+              <span className="badge badge-soft-dark mr-1">Readonly</span>
+            )}
+            {isSigner && (
+              <span className="badge badge-soft-dark mr-1">Signer</span>
+            )}
+          </td>
+          <td className="text-right">
+            <Copyable text={pubkey.toBase58()}>
+              <code>{pubkey.toBase58()}</code>
+            </Copyable>
+          </td>
+        </tr>
+      ))}
+
+      <tr>
+        <td>Raw Data (Base58)</td>
+        <td className="text-right">
+          <Copyable text={bs58.encode(ix.data)}>
+            <code>{bs58.encode(ix.data)}</code>
+          </Copyable>
+        </td>
+      </tr>
+    </>
  );
 }

@ -480,3 +580,13 @@ function RetryCard({ retry, text }: { retry: () => void; text: string }) {
    </div>
  );
 }
+
+function TableCardBody({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="table-responsive mb-0">
+      <table className="table table-sm table-nowrap card-table">
+        <tbody className="list">{children}</tbody>
+      </table>
+    </div>
+  );
+}
--- a/explorer/src/components/TransactionsCard.tsx
+++ b/explorer/src/components/TransactionsCard.tsx
@ -13,7 +13,6 @@ import bs58 from "bs58";
 import { assertUnreachable } from "../utils";
 import { useCluster } from "../providers/cluster";
 import Copyable from "./Copyable";
-import { useHistory, useLocation } from "react-router-dom";

 function TransactionsCard() {
  const { transactions, idCounter } = useTransactions();
@ -21,7 +20,6 @@ function TransactionsCard() {
  const signatureInput = React.useRef<HTMLInputElement>(null);
  const [error, setError] = React.useState("");
  const { url } = useCluster();
-  const location = useLocation();

  const onNew = (signature: string) => {
    if (signature.length === 0) return;
@ -101,7 +99,7 @@ function TransactionsCard() {
              <td></td>
            </tr>
            {transactions.map(transaction =>
-              renderTransactionRow(transaction, dispatch, location, url)
+              renderTransactionRow(transaction, dispatch, url)
            )}
          </tbody>
        </table>
@ -125,7 +123,6 @@ const renderHeader = () => {
 const renderTransactionRow = (
  transactionStatus: TransactionStatus,
  dispatch: any,
-  location: any,
  url: string
 ) => {
  const { fetchStatus, info, signature, id } = transactionStatus;
@ -169,7 +166,7 @@ const renderTransactionRow = (
    if (info?.confirmations === "max") {
      return (
        <Link
-          to={{ ...location, pathname: "/tx/" + signature }}
+          to={location => ({ ...location, pathname: "/tx/" + signature })}
          className="btn btn-rounded-circle btn-white btn-sm"
        >
          <span className="fe fe-arrow-right"></span>
--- a/explorer/src/providers/cluster.tsx
+++ b/explorer/src/providers/cluster.tsx
@ -1,6 +1,6 @@
 import React from "react";
 import { clusterApiUrl, Connection } from "@solana/web3.js";
-import { findGetParameter } from "../utils/url";
+import { useQuery } from "../utils/url";

 export enum ClusterStatus {
  Connected,
@ -22,6 +22,19 @@ export const CLUSTERS = [
  Cluster.Custom
 ];

+export function clusterSlug(cluster: Cluster): string | undefined {
+  switch (cluster) {
+    case Cluster.MainnetBeta:
+      return "mainnet-beta";
+    case Cluster.Testnet:
+      return "testnet";
+    case Cluster.Devnet:
+      return "devnet";
+    case Cluster.Custom:
+      return undefined;
+  }
+}
+
 export function clusterName(cluster: Cluster): string {
  switch (cluster) {
    case Cluster.MainnetBeta:
@ -77,11 +90,11 @@ function clusterReducer(state: State, action: Action): State {
  }
 }

-function initState(): State {
-  const clusterParam =
-    findGetParameter("cluster") || findGetParameter("network");
-  const clusterUrlParam =
-    findGetParameter("clusterUrl") || findGetParameter("networkUrl");
+function parseQuery(
+  query: URLSearchParams
+): { cluster: Cluster; customUrl: string } {
+  const clusterParam = query.get("cluster");
+  const clusterUrlParam = query.get("clusterUrl");

  let cluster;
  let customUrl = DEFAULT_CUSTOM_URL;
@ -120,8 +133,7 @@ function initState(): State {

  return {
    cluster,
-    customUrl,
-    status: ClusterStatus.Connecting
+    customUrl
  };
 }

@ -134,17 +146,18 @@ const DispatchContext = React.createContext<Dispatch | undefined>(undefined);

 type ClusterProviderProps = { children: React.ReactNode };
 export function ClusterProvider({ children }: ClusterProviderProps) {
-  const [state, dispatch] = React.useReducer(
-    clusterReducer,
-    undefined,
-    initState
-  );
+  const [state, dispatch] = React.useReducer(clusterReducer, {
+    cluster: DEFAULT_CLUSTER,
+    customUrl: DEFAULT_CUSTOM_URL,
+    status: ClusterStatus.Connecting
+  });
  const [showModal, setShowModal] = React.useState(false);
+  const { cluster, customUrl } = parseQuery(useQuery());

+  // Reconnect to cluster when it changes
  React.useEffect(() => {
-    // Connect to cluster immediately
-    updateCluster(dispatch, state.cluster, state.customUrl);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    updateCluster(dispatch, cluster, customUrl);
+  }, [cluster, customUrl]);

  return (
    <StateContext.Provider value={state}>
@ -170,7 +183,7 @@ export function clusterUrl(cluster: Cluster, customUrl: string): string {
  }
 }

-export async function updateCluster(
+async function updateCluster(
  dispatch: Dispatch,
  cluster: Cluster,
  customUrl: string
@ -203,14 +216,6 @@ export function useCluster() {
  };
 }

-export function useClusterDispatch() {
-  const context = React.useContext(DispatchContext);
-  if (!context) {
-    throw new Error(`useClusterDispatch must be used within a ClusterProvider`);
-  }
-  return context;
-}
-
 export function useClusterModal() {
  const context = React.useContext(ModalContext);
  if (!context) {
--- a/explorer/src/providers/transactions/details.tsx
+++ b/explorer/src/providers/transactions/details.tsx
@ -4,7 +4,7 @@ import {
  TransactionSignature,
  ConfirmedTransaction
 } from "@solana/web3.js";
-import { useCluster, ClusterStatus } from "../cluster";
+import { useCluster } from "../cluster";
 import { useTransactions, FetchStatus } from "./index";

 export interface Details {
@ -94,7 +94,7 @@ export function DetailsProvider({ children }: DetailsProviderProps) {
  const [state, dispatch] = React.useReducer(reducer, {});

  const { transactions } = useTransactions();
-  const { status, url } = useCluster();
+  const { url } = useCluster();

  // Filter blocks for current transaction slots
  React.useEffect(() => {
@ -111,15 +111,13 @@ export function DetailsProvider({ children }: DetailsProviderProps) {
    removeSignatures.forEach(s => removeList.push(s));
    dispatch({ type: ActionType.Remove, signatures: removeList });

-    if (status !== ClusterStatus.Connected) return;
-
    const fetchList: string[] = [];
    fetchSignatures.forEach(s => fetchList.push(s));
    dispatch({ type: ActionType.Add, signatures: fetchList });
    fetchSignatures.forEach(signature => {
      fetchDetails(dispatch, signature, url);
    });
-  }, [status, transactions]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [transactions]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <StateContext.Provider value={state}>
--- a/explorer/src/providers/transactions/index.tsx
+++ b/explorer/src/providers/transactions/index.tsx
@ -6,8 +6,8 @@ import {
  Account,
  SignatureResult
 } from "@solana/web3.js";
-import { findGetParameter } from "../../utils/url";
-import { useCluster, ClusterStatus } from "../cluster";
+import { useQuery } from "../../utils/url";
+import { useCluster, Cluster } from "../cluster";
 import {
  DetailsProvider,
  StateContext as DetailsStateContext,
@ -20,7 +20,6 @@ import {
  Dispatch as AccountsDispatch,
  ActionType as AccountsActionType
 } from "../accounts";
-import { useLocation } from "react-router-dom";

 export enum FetchStatus {
  Fetching,
@ -128,14 +127,12 @@ export function TransactionsProvider({ children }: TransactionsProviderProps) {
    transactions: {}
  });

-  const { status, url } = useCluster();
+  const { cluster, url } = useCluster();
  const accountsDispatch = useAccountsDispatch();
-  const search = useLocation().search;
+  const query = useQuery();

  // Check transaction statuses whenever cluster updates
  React.useEffect(() => {
-    if (status !== ClusterStatus.Connected) return;
-
    Object.keys(state.transactions).forEach(signature => {
      dispatch({
        type: ActionType.FetchSignature,
@ -146,19 +143,18 @@ export function TransactionsProvider({ children }: TransactionsProviderProps) {
    });

    // Create a test transaction
-    if (findGetParameter("test") !== null) {
+    if (cluster === Cluster.Devnet && query.get("test") !== null) {
      createTestTransaction(dispatch, accountsDispatch, url);
    }
-  }, [status, url]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [query, cluster, url]); // eslint-disable-line react-hooks/exhaustive-deps

  // Check for transactions in the url params
  React.useEffect(() => {
-    TX_ALIASES.flatMap(key =>
-      (findGetParameter(key)?.split(",") || []).concat(
-        findGetParameter(key + "s")?.split(",") || []
-      )
-    )
-      .flatMap(paramValue => paramValue?.split(",") || [])
+    TX_ALIASES.flatMap(key => [query.get(key), query.get(key + "s")])
+      .filter((value): value is string => value !== null)
+      .flatMap(value => value.split(","))
+      // Remove duplicates
+      .filter((item, pos, self) => self.indexOf(item) === pos)
      .filter(signature => !state.transactions[signature])
      .forEach(signature => {
        dispatch({
@ -168,7 +164,7 @@ export function TransactionsProvider({ children }: TransactionsProviderProps) {
        });
        checkTransactionStatus(dispatch, signature, url);
      });
-  }, [search]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [query]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <StateContext.Provider value={state}>
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@ -12,15 +12,19 @@ code {

 .copyable {
  position: relative;
-  width: fit-content;
+  display: inline;
+  cursor: pointer;

-  & > div:hover {
-    cursor: pointer;
-  }
+  .popover {
+    &.bs-popover-top {
+      background-color: $dark;
+      top: -4rem;
+    }

-  .popover.bs-popover-top {
-    background-color: $dark;
-    top: -4rem;
+    &.bs-popover-bottom {
+      background-color: $dark;
+      top: 1.5rem;
+    }

    .popover-body {
      color: white;
@ -28,6 +32,7 @@ code {

    .arrow::after {
      border-top-color: $dark;
+      border-bottom-color: $dark;
    }
  }
 }
--- a/explorer/src/utils/url.ts
+++ b/explorer/src/utils/url.ts
@ -1,3 +1,9 @@
+import { useLocation } from "react-router-dom";
+
+export function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
 export function findGetParameter(parameterName: string): string | null {
  let result = null,
    tmp = [];