Merge pull request #185 from cosmos/explorer-links

Rename explorerLink -> explorerLinks and use NEXT_PUBLIC_EXPLORER_LINKS

components/ChainConnect/CustomChainForm.tsx

@@ -57,8 +57,8 @@ export default function CustomChainForm() {
       bech32Prefix: defaultChain.addressPrefix,
       gasPrice: defaultChain.gasPrice,
       rpcNodes: defaultChain.nodeAddresses.join(", "),
-      explorerTxLink: defaultChain.explorerLink.tx,
-      explorerAccountLink: defaultChain.explorerLink.account,
+      explorerTxLink: defaultChain.explorerLinks.tx,
+      explorerAccountLink: defaultChain.explorerLinks.account,
       logo: defaultChain.logo,
       assets: JSON.stringify(defaultChain.assets),
     },
@@ -82,7 +82,7 @@ export default function CustomChainForm() {
         assets: JSON.parse(chainFromForm.assets) as RegistryAsset[],
         gasPrice: chainFromForm.gasPrice,
         addressPrefix: chainFromForm.bech32Prefix,
-        explorerLink: {
+        explorerLinks: {
           tx: chainFromForm.explorerTxLink,
           account: chainFromForm.explorerAccountLink,
         },

components/dataViews/AccountView/index.tsx

@@ -19,7 +19,7 @@ export default function AccountView() {
   const [error, setError] = useState("");
 
   const explorerLink =
-    explorerLinkAccount(chain.explorerLink.account, walletInfo?.address || "") || "";
+    explorerLinkAccount(chain.explorerLinks.account, walletInfo?.address || "") || "";
 
   return (
     <div className="mt-6 flex flex-col gap-4">

components/dataViews/CompletedTransaction.tsx

@@ -10,7 +10,7 @@ interface CompletedTransactionProps {
 
 const CompletedTransaction = ({ transactionHash }: CompletedTransactionProps) => {
   const { chain } = useChains();
-  const explorerLink = explorerLinkTx(chain.explorerLink.tx, transactionHash);
+  const explorerLink = explorerLinkTx(chain.explorerLinks.tx, transactionHash);
 
   return (
     <StackableContainer lessPadding lessMargin>

context/ChainsContext/helpers.tsx

@@ -13,7 +13,7 @@ export const emptyChain: ChainInfo = {
   assets: [],
   gasPrice: "",
   addressPrefix: "",
-  explorerLink: { tx: "", account: "" },
+  explorerLinks: { tx: "", account: "" },
 };
 
 export const isChainInfoFilled = (chain: Partial<ChainInfo>): chain is ChainInfo =>

context/ChainsContext/storage.tsx

@@ -1,6 +1,6 @@
 import { RegistryAsset } from "@/types/chainRegistry";
 import { emptyChain } from "./helpers";
-import { ChainInfo, ChainItems, ExplorerLink } from "./types";
+import { ChainInfo, ChainItems, ExplorerLinks } from "./types";
 
 const registryShaStorageKey = "context-registry-sha";
 export const getShaFromStorage = () => localStorage.getItem(registryShaStorageKey);
@@ -114,11 +114,11 @@ export const getChainFromUrl = (chainName: string) => {
   const assets = params.get("assets");
   const gasPrice = params.get("gasPrice");
   const addressPrefix = params.get("addressPrefix");
-  const explorerLink = params.get("explorerLink");
+  const explorerLinks = params.get("explorerLinks");
 
   const nodeAddressesValue: readonly string[] = JSON.parse(nodeAddresses || "[]");
   const assetsValue: readonly RegistryAsset[] = JSON.parse(assets || "[]");
-  const explorerLinkValue: Partial<ExplorerLink> = JSON.parse(explorerLink || "{}");
+  const explorerLinkValue: Partial<ExplorerLinks> = JSON.parse(explorerLinks || "{}");
 
   const urlChain: Partial<ChainInfo> = {
     registryName: chainName,
@@ -133,8 +133,8 @@ export const getChainFromUrl = (chainName: string) => {
     ...(assetsValue.length && { assets: assetsValue }),
     ...(gasPrice && { gasPrice }),
     ...(addressPrefix && { addressPrefix }),
-    ...(explorerLink && {
-      explorerLink: { tx: explorerLinkValue.tx || "", account: explorerLinkValue.account || "" },
+    ...(explorerLinks && {
+      explorerLinks: { tx: explorerLinkValue.tx || "", account: explorerLinkValue.account || "" },
     }),
   };
 
@@ -157,11 +157,12 @@ export const getChainFromEnvfile = (chainName: string) => {
   const assets = process.env.NEXT_PUBLIC_ASSETS;
   const gasPrice = process.env.NEXT_PUBLIC_GAS_PRICE;
   const addressPrefix = process.env.NEXT_PUBLIC_ADDRESS_PREFIX;
-  const explorerLink = process.env.NEXT_PUBLIC_EXPLORER_LINK_TX;
+  // An object containing link templates for txs and accounts
+  const explorerLinks = process.env.NEXT_PUBLIC_EXPLORER_LINKS;
 
   const nodeAddressesValue: readonly string[] = JSON.parse(nodeAddresses || "[]");
   const assetsValue: readonly RegistryAsset[] = JSON.parse(assets || "[]");
-  const explorerLinkValue: Partial<ExplorerLink> = JSON.parse(explorerLink || "{}");
+  const explorerLinksValue: Partial<ExplorerLinks> = JSON.parse(explorerLinks || "{}");
 
   const envfileChain: Partial<ChainInfo> = {
     registryName: chainName,
@@ -176,8 +177,8 @@ export const getChainFromEnvfile = (chainName: string) => {
     ...(assetsValue.length && { assets: assetsValue }),
     ...(gasPrice && { gasPrice }),
     ...(addressPrefix && { addressPrefix }),
-    ...(explorerLinkValue && {
-      explorerLink: { tx: explorerLinkValue.tx || "", account: explorerLinkValue.account || "" },
+    ...(explorerLinksValue && {
+      explorerLinks: { tx: explorerLinksValue.tx || "", account: explorerLinksValue.account || "" },
     }),
   };
 

context/ChainsContext/types.tsx

@@ -33,10 +33,10 @@ export interface ChainInfo {
   readonly assets: readonly RegistryAsset[];
   readonly gasPrice: string;
   readonly addressPrefix: string;
-  readonly explorerLink: ExplorerLink;
+  readonly explorerLinks: ExplorerLinks;
 }
 
-export type ExplorerLink = {
+export type ExplorerLinks = {
   readonly tx: string;
   readonly account: string;
 };

lib/chainRegistry.ts

@@ -1,5 +1,5 @@
 import { isChainInfoFilled } from "@/context/ChainsContext/helpers";
-import { ChainInfo, ChainItems, ExplorerLink } from "@/context/ChainsContext/types";
+import { ChainInfo, ChainItems, ExplorerLinks } from "@/context/ChainsContext/types";
 import { GithubChainRegistryItem, RegistryAsset, RegistryChain } from "@/types/chainRegistry";
 import { preventUnhandledRejections } from "./promises";
 import { requestGhJson } from "./request";
@@ -137,21 +137,21 @@ const getChainInfoFromJsons = (
   const logo = getLogoUri(registryChain, firstAsset);
   const nodeAddresses = registryChain.apis?.rpc.map(({ address }) => address) ?? [];
 
-  let explorerLink: ExplorerLink = { tx: "", account: "" };
+  let explorerLinks: ExplorerLinks = { tx: "", account: "" };
 
   // Prefer same explorer for both tx and account links
   for (const explorer of registryChain.explorers ?? []) {
     if (explorer.tx_page && explorer.account_page) {
-      explorerLink = { tx: explorer.tx_page, account: explorer.account_page };
+      explorerLinks = { tx: explorer.tx_page, account: explorer.account_page };
       break;
     }
 
-    if (!explorerLink.tx && explorer.tx_page) {
-      explorerLink = { ...explorerLink, tx: explorer.tx_page };
+    if (!explorerLinks.tx && explorer.tx_page) {
+      explorerLinks = { ...explorerLinks, tx: explorer.tx_page };
     }
 
-    if (!explorerLink.account && explorer.account_page) {
-      explorerLink = { ...explorerLink, account: explorer.account_page };
+    if (!explorerLinks.account && explorer.account_page) {
+      explorerLinks = { ...explorerLinks, account: explorer.account_page };
     }
   }
 
@@ -183,7 +183,7 @@ const getChainInfoFromJsons = (
     chainDisplayName: registryChain.pretty_name,
     nodeAddresses,
     nodeAddress: "",
-    explorerLink,
+    explorerLinks: explorerLinks,
     denom: firstAssetDenom,
     displayDenom,
     displayDenomExponent,

lib/displayHelpers.spec.ts

@@ -10,7 +10,7 @@ const testChainInfo: ChainInfo = {
   logo: "https://raw.githubusercontent.com/cosmos/chain-registry/master/testnets/junotestnet/images/juno.svg",
   nodeAddress: "https://rpc.uni.junonetwork.io",
   nodeAddresses: ["https://rpc.uni.junonetwork.io"],
-  explorerLink: {
+  explorerLinks: {
     tx: "https://testnet.ezstaking.tools/juno-testnet/txs/${txHash}",
     account: "https://testnet.app.ezstaking.io/juno-testnet/account/${accountAddress}",
   },

pages/[chainName]/[address]/index.tsx

@@ -29,7 +29,7 @@ const Multipage = () => {
   const [accountError, setAccountError] = useState(null);
 
   const multisigAddress = router.query.address?.toString();
-  const explorerLink = explorerLinkAccount(chain.explorerLink.account, multisigAddress || "");
+  const explorerLink = explorerLinkAccount(chain.explorerLinks.account, multisigAddress || "");
 
   const fetchMultisig = useCallback(
     async (address: string) => {