Merge pull request #61 from diem/fix-tx-redirect-to-correct-explorer

fix tx link to correct diem explorer

frontend/src/components/ExplorerLink.tsx

@@ -1,22 +1,40 @@
 // Copyright (c) The Diem Core Contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BlockchainTransaction } from "../interfaces/blockchain";
+import BackendClient from "../services/backendClient";
 
-// FIXME: DIEM
 const EXPLORER_URL_FORMAT =
-  process.env.REACT_APP_EXPLORER_URL || "https://diemexplorer.com/testnet/version/{version}";
+  process.env.REACT_APP_EXPLORER_URL ||
+  "https://diemexplorer.com/{chainDisplayName}/version/{version}";
 
 interface ExplorerLinkProps {
   blockchainTx: BlockchainTransaction;
 }
 
 function ExplorerLink({ blockchainTx }: ExplorerLinkProps) {
+  const [chainDisplayName, setChainDisplayName] = useState<string>("testnet");
+
+  useEffect(() => {
+    async function getChainDisplayName() {
+      try {
+        const backendClient = new BackendClient();
+        const chain = await backendClient.getChain();
+        setChainDisplayName(chain.display_name);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    // noinspection JSIgnoredPromiseFromCall
+    getChainDisplayName();
+  }, []);
+
   const blockExplorerUrl = EXPLORER_URL_FORMAT.replace(
     "{version}",
     blockchainTx.version.toString()
-  );
+  ).replace("{chainDisplayName}", chainDisplayName);
 
   return (
     <a href={blockExplorerUrl} target="_blank" rel="noopener noreferrer" className="hover">