Make explorer link for transaction configurable

.env.sample

@@ -6,3 +6,4 @@ NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT=6
 NEXT_PUBLIC_GAS_PRICE=0.03uatom
 NEXT_PUBLIC_CHAIN_ID=cosmoshub-4
 NEXT_PUBLIC_ADDRESS_PREFIX=cosmos
+NEXT_PUBLIC_EXPLORER_LINK_TX=https://www.mintscan.io/cosmos/txs/%s

components/dataViews/CompletedTransaction.js

@@ -3,43 +3,41 @@ import React from "react";
 import StackableContainer from "../layout/StackableContainer";
 import HashView from "./HashView";
 import Button from "../inputs/Button";
+import { explorerLinkTx } from "../../lib/displayHelpers";
 
-const CompletedTransaction = ({ transactionHash }) => (
-  <StackableContainer lessPadding lessMargin>
-    <StackableContainer lessPadding lessMargin lessRadius>
-      <div className="confirmation">
-        <svg viewBox="0 0 77 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M5 30L26 51L72 5" stroke="white" strokeWidth="12" />
-        </svg>
-        <p>This transaction has been broadcast.</p>
-      </div>
+const CompletedTransaction = ({ transactionHash }) => {
+  const explorerLink = explorerLinkTx(transactionHash);
+  return (
+    <StackableContainer lessPadding lessMargin>
+      <StackableContainer lessPadding lessMargin lessRadius>
+        <div className="confirmation">
+          <svg viewBox="0 0 77 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5 30L26 51L72 5" stroke="white" strokeWidth="12" />
+          </svg>
+          <p>This transaction has been broadcast.</p>
+        </div>
+      </StackableContainer>
+      <StackableContainer lessPadding lessMargin lessRadius>
+        <label>Transaction Hash</label>
+        <HashView hash={transactionHash} />
+      </StackableContainer>
+      {explorerLink && <Button href={explorerLink} label="View in Explorer"></Button>}
+      <style jsx>{`
+        .confirmation {
+          display: flex;
+          justify-content: center;
+        }
+        label {
+          font-size: 12px;
+          font-style: italic;
+          margin-bottom: 0.5em;
+        }
+        .confirmation svg {
+          height: 0.8em;
+          margin-right: 0.5em;
+        }
+      `}</style>
     </StackableContainer>
-    <StackableContainer lessPadding lessMargin lessRadius>
-      <label>Transaction Hash</label>
-      <HashView hash={transactionHash} />
-    </StackableContainer>
-    {process.env.NEXT_PUBLIC_CHAIN_ID === "cosmoshub-4" && (
-      <Button
-        href={`https://www.mintscan.io/cosmos/txs/${transactionHash}`}
-        label=" View on Mintscan"
-      ></Button>
-    )}
-    <style jsx>{`
-      .confirmation {
-        display: flex;
-        justify-content: center;
-      }
-      label {
-        font-size: 12px;
-        font-style: italic;
-        margin-bottom: 0.5em;
-      }
-      .confirmation svg {
-        height: 0.8em;
-        margin-right: 0.5em;
-      }
-    `}</style>
-  </StackableContainer>
-);
-
+  );
+};
 export default CompletedTransaction;

lib/displayHelpers.js

@@ -118,6 +118,17 @@ const checkAddress = (input) => {
   return null;
 };
 
+/**
+ * Returns a link to a transaction in an explorer if an explorer is configured
+ * for transactions. Returns null otherwise.
+ */
+const explorerLinkTx = (hash) => {
+  if (process.env.NEXT_PUBLIC_EXPLORER_LINK_TX) {
+    return process.env.NEXT_PUBLIC_EXPLORER_LINK_TX.replace("%s", hash);
+  }
+  return null;
+};
+
 export {
   abbreviateLongString,
   printableCoin,
@@ -125,4 +136,5 @@ export {
   exampleAddress,
   examplePubkey,
   checkAddress,
+  explorerLinkTx,
 };