Merge pull request #110 from cosmos/feat/multisig-explorer

Add multisig explorer link

.env.sample

@@ -9,5 +9,6 @@ NEXT_PUBLIC_CHAIN_ID=cosmoshub-4
 NEXT_PUBLIC_ADDRESS_PREFIX=cosmos
 NEXT_PUBLIC_REGISTRY_NAME=cosmoshub
 NEXT_PUBLIC_EXPLORER_LINK_TX="https://www.mintscan.io/cosmos/txs/\${txHash}"
+NEXT_PUBLIC_EXPLORER_LINK_ACCOUNT="https://www.mintscan.io/cosmos/account/\${address}"
 NEXT_PUBLIC_CHAIN_DISPLAY_NAME="Cosmos Hub"
 NEXT_PUBLIC_MULTICHAIN=true

.env.test.sample

@@ -9,5 +9,6 @@ NEXT_PUBLIC_CHAIN_ID=uni-6
 NEXT_PUBLIC_ADDRESS_PREFIX=juno
 NEXT_PUBLIC_REGISTRY_NAME=junotestnet
 NEXT_PUBLIC_EXPLORER_LINK_TX="https://testnet.mintscan.io/juno-testnet/txs/\${txHash}"
+NEXT_PUBLIC_EXPLORER_LINK_ACCOUNT="https://testnet.mintscan.io/juno-testnet/account/\${address}"
 NEXT_PUBLIC_CHAIN_DISPLAY_NAME="Juno Testnet"
 NEXT_PUBLIC_MULTICHAIN=true

lib/displayHelpers.ts

@@ -152,6 +152,17 @@ const explorerLinkTx = (link: string, hash: string) => {
   return null;
 };
 
+/**
+ * Returns a link to an account in an explorer if an explorer is configured
+ * for accounts. Returns null otherwise.
+ */
+const explorerLinkAccount = (link: string, address: string) => {
+  if (link && link.includes("${address}")) {
+    return link.replace("${address}", address);
+  }
+  return null;
+};
+
 export {
   ellideMiddle,
   printableCoin,
@@ -161,4 +172,5 @@ export {
   examplePubkey,
   checkAddress,
   explorerLinkTx,
+  explorerLinkAccount,
 };

pages/multi/[address]/index.tsx

@@ -16,6 +16,7 @@ import Button from "../../../components/inputs/Button";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
 import { useAppContext } from "../../../context/AppContext";
+import { explorerLinkAccount } from "../../../lib/displayHelpers";
 import { getMultisigAccount } from "../../../lib/multisigHelpers";
 
 type TxView = null | "send" | "delegate" | "undelegate" | "redelegate" | "claimRewards";
@@ -76,18 +77,18 @@ const Multipage = () => {
 
   assert(state.chain.addressPrefix, "address prefix missing");
 
+  const explorerHref = explorerLinkAccount(
+    process.env.NEXT_PUBLIC_EXPLORER_LINK_ACCOUNT || "",
+    multisigAddress,
+  );
+
   return (
     <Page>
       <StackableContainer base>
         <StackableContainer>
           <label>Multisig Address</label>
-          <h1>
-            {router.query.address ? (
-              <HashView hash={router.query.address?.toString()} />
-            ) : (
-              "No Address"
-            )}
-          </h1>
+          <h1>{multisigAddress ? <HashView hash={multisigAddress} /> : "No Address"}</h1>
+          {explorerHref ? <Button href={explorerHref} label="View in Explorer"></Button> : null}
         </StackableContainer>
         {pubkey && (
           <MultisigMembers