refactor: update osmosis testnet 5 config and use explorer url from c…

…onfig instead

CHANGELOG.md

@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#366](https://github.com/alleslabs/celatone-frontend/pull/366) Update osmosis testnet 5 config and use explorer url from config instead
 - [#336](https://github.com/alleslabs/celatone-frontend/pull/336) Get address type length from example addresses instead of hardcode
 - [#354](https://github.com/alleslabs/celatone-frontend/pull/354) Remove useChainId and use currentChainId from config
 - [#338](https://github.com/alleslabs/celatone-frontend/pull/338) Use gas from chain config

src/config/index.ts

@@ -78,12 +78,12 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       proposal: "https://www.mintscan.io/osmosis/proposals",
     },
   },
-  "osmo-test-4": {
+  "osmo-test-5": {
     chain: "osmosis",
     registryChainName: "osmosistestnet",
-    lcd: "https://lcd-test.osmosis.zone",
-    rpc: "https://rpc-test.osmosis.zone",
-    indexer: "https://osmosis-testnet-graphql.alleslabs.dev/v1/graphql",
+    lcd: "https://lcd.osmotest5.osmosis.zone",
+    rpc: "https://rpc.osmotest5.osmosis.zone",
+    indexer: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
     api: "https://celatone-api.alleslabs.dev",
     features: {
       faucet: {
@@ -116,8 +116,8 @@ export const CHAIN_CONFIGS: ChainConfigs = {
         "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
     },
     explorerLink: {
-      validator: "https://www.mintscan.io/osmosis/validators",
-      proposal: "https://www.mintscan.io/osmosis/proposals",
+      validator: "https://testnet.mintscan.io/osmosis-testnet/validators",
+      proposal: "https://testnet.mintscan.io/osmosis-testnet/proposals",
     },
   },
 };

src/config/types.ts

@@ -27,6 +27,11 @@ type PoolConfig =
       enabled: false;
     };
 
+export interface ExplorerConfig {
+  validator: string;
+  proposal: string;
+}
+
 export interface ChainConfig {
   chain: string;
   registryChainName: string;
@@ -51,10 +56,7 @@ export interface ChainConfig {
     validator: ValidatorAddr;
     contract: ContractAddr;
   };
-  explorerLink: {
-    validator: string;
-    proposal: string;
-  };
+  explorerLink: ExplorerConfig;
 }
 
 export interface ChainConfigs {

src/lib/components/ExplorerLink.tsx

@@ -2,10 +2,7 @@ import type { BoxProps, TextProps } from "@chakra-ui/react";
 import { Box, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
-import {
-  getExplorerProposalUrl,
-  getExplorerValidatorUrl,
-} from "lib/app-fns/explorer";
+import type { ExplorerConfig } from "config/types";
 import type { AddressReturnType } from "lib/app-provider";
 import { useCelatoneApp } from "lib/app-provider/contexts";
 import { AmpTrackMintscan } from "lib/services/amplitude";
@@ -37,7 +34,7 @@ interface ExplorerLinkProps extends BoxProps {
 
 const getNavigationUrl = (
   type: ExplorerLinkProps["type"],
-  currentChainName: string,
+  explorerConfig: ExplorerConfig,
   value: string
 ) => {
   let url = "";
@@ -52,7 +49,7 @@ const getNavigationUrl = (
       url = "/account";
       break;
     case "validator_address":
-      url = getExplorerValidatorUrl(currentChainName);
+      url = explorerConfig.validator;
       break;
     case "code_id":
       url = "/code";
@@ -61,7 +58,7 @@ const getNavigationUrl = (
       url = "/block";
       break;
     case "proposal_id":
-      url = getExplorerProposalUrl(currentChainName);
+      url = explorerConfig.proposal;
       break;
     case "invalid_address":
       return "";
@@ -155,7 +152,11 @@ export const ExplorerLink = ({
   openNewTab,
   ...componentProps
 }: ExplorerLinkProps) => {
-  const { address, currentChainName } = useWallet();
+  const { address } = useWallet();
+  const {
+    chainConfig: { explorerLink: explorerConfig },
+  } = useCelatoneApp();
+
   const isInternal =
     type === "code_id" ||
     type === "contract_address" ||
@@ -164,7 +165,7 @@ export const ExplorerLink = ({
     type === "block_height";
 
   const [hrefLink, textValue] = [
-    getNavigationUrl(type, currentChainName, copyValue || value),
+    getNavigationUrl(type, explorerConfig, copyValue || value),
     getValueText(value === address, textFormat === "truncate", value),
   ];
 

src/lib/components/tx/modal/ButtonSection.tsx

@@ -1,9 +1,7 @@
 import { Button } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 
-import { getExplorerProposalUrl } from "lib/app-fns/explorer";
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useCelatoneApp } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab, useOpenTxTab } from "lib/hooks";
 import type { ActionVariant, TxReceipt } from "lib/types";
@@ -23,7 +21,11 @@ export const ButtonSection = ({
   const router = useRouter();
   const navigate = useInternalNavigate();
   const openTxTab = useOpenTxTab("tx-page");
-  const { currentChainName } = useWallet();
+  const {
+    chainConfig: {
+      explorerLink: { proposal: explorerProposal },
+    },
+  } = useCelatoneApp();
 
   const openTxExplorer = () => {
     const txHash = receipts
@@ -37,7 +39,7 @@ export const ButtonSection = ({
     const proposalId = receipts
       .find((r) => r.title === "Proposal ID")
       ?.value?.toString();
-    openNewTab(`${getExplorerProposalUrl(currentChainName)}/${proposalId}`);
+    openNewTab(`${explorerProposal}/${proposalId}`);
     onClose?.();
   };
 

src/lib/pages/proposals/table/ProposalTableRow.tsx

@@ -1,15 +1,15 @@
 import type { DividerProps, GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { ProposalTextCell } from "../components/ProposalTextCell";
-import { getExplorerProposalUrl } from "lib/app-fns/explorer";
+import { useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TableRow, TableRowFreeze } from "lib/components/table";
 import { Proposer } from "lib/components/table/proposals/Proposer";
 import { ResolvedHeight } from "lib/components/table/proposals/ResolvedHeight";
 import { StatusChip } from "lib/components/table/proposals/StatusChip";
 import { VotingEndTime } from "lib/components/table/proposals/VotingEndTime";
+import { openNewTab } from "lib/hooks";
 import type { Proposal, Option } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
@@ -24,7 +24,11 @@ export const ProposalTableRow = ({
   templateColumns,
   boxShadow,
 }: ProposalRowProps) => {
-  const { currentChainName } = useWallet();
+  const {
+    chainConfig: {
+      explorerLink: { proposal: explorerProposal },
+    },
+  } = useCelatoneApp();
 
   // TODO - Revisit split columnsWidth
   const columnsWidth = templateColumns?.toString().split(" ");
@@ -46,13 +50,7 @@ export const ProposalTableRow = ({
       _hover={{ "> div": { bgColor: hoverBg } }}
       onClick={() =>
         !isDepositFailed &&
-        window.open(
-          `${getExplorerProposalUrl(
-            currentChainName
-          )}/${proposal.proposalId.toString()}`,
-          "_blank",
-          "noopener,noreferrer"
-        )
+        openNewTab(`${explorerProposal}/${proposal.proposalId.toString()}`)
       }
     >
       <TableRowFreeze left="0">