From abd5e712f990b487bc90ceaab86975cde147f40f Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Mon, 17 Jan 2022 00:07:12 +0100
Subject: [PATCH] Make explorer link for transaction configurable

---
 .env.sample                                  |  1 +
 components/dataViews/CompletedTransaction.js | 72 ++++++++++----------
 lib/displayHelpers.js                        | 12 ++++
 3 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/.env.sample b/.env.sample
index b1a4ded..bf502c9 100644
--- a/.env.sample
+++ b/.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
diff --git a/components/dataViews/CompletedTransaction.js b/components/dataViews/CompletedTransaction.js
index f2a3334..9ca337e 100644
--- a/components/dataViews/CompletedTransaction.js
+++ b/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;
diff --git a/lib/displayHelpers.js b/lib/displayHelpers.js
index 5b0976e..32a537c 100644
--- a/lib/displayHelpers.js
+++ b/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,
 };