feat: internal tx

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#224](https://github.com/alleslabs/celatone-frontend/pull/224) Support search by tx and internal tx link
 - [#214](https://github.com/alleslabs/celatone-frontend/pull/214) Show code permission helper text in save new code modal
 - [#218](https://github.com/alleslabs/celatone-frontend/pull/218) Add instantiated and admin contracts of an account
 - [#192](https://github.com/alleslabs/celatone-frontend/pull/192) Add alternative sidebar with only icons

src/lib/app-fns/explorer/index.ts

@@ -5,23 +5,6 @@ export const explorerMap: Record<string, string> = {
   osmosistestnet: "https://testnet.mintscan.io/osmosis-testnet",
 };
 
-export const getExplorerTxUrl = (chainName: string) => {
-  let pathSuffix = "";
-  switch (chainName) {
-    case "osmosis":
-    case "osmosistestnet":
-      pathSuffix = "txs";
-      break;
-    case "terra2":
-    case "terra2testnet":
-      pathSuffix = "tx";
-      break;
-    default:
-      break;
-  }
-  return `${explorerMap[chainName]}/${pathSuffix}`;
-};
-
 export const getExplorerBlockUrl = (chainName: string) => {
   let pathSuffix = "";
   switch (chainName) {

src/lib/components/ExplorerLink.tsx

@@ -2,11 +2,7 @@ import type { BoxProps } from "@chakra-ui/react";
 import { Box, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
-import {
-  getExplorerBlockUrl,
-  getExplorerTxUrl,
-  getProposalUrl,
-} from "lib/app-fns/explorer";
+import { getExplorerBlockUrl, getProposalUrl } from "lib/app-fns/explorer";
 import type { AddressReturnType } from "lib/hooks";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import { truncate } from "lib/utils";
@@ -39,7 +35,7 @@ const getNavigationUrl = (
   let url = "";
   switch (type) {
     case "tx_hash":
-      url = getExplorerTxUrl(currentChainName);
+      url = "/tx";
       break;
     case "contract_address":
       url = "/contract";
@@ -138,7 +134,8 @@ export const ExplorerLink = ({
   const isInternal =
     type === "code_id" ||
     type === "contract_address" ||
-    type === "user_address";
+    type === "user_address" ||
+    type === "tx_hash";
 
   const [hrefLink, textValue] = [
     getNavigationUrl(type, currentChainName, copyValue || value),

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

@@ -1,12 +1,9 @@
 import { Button, Icon } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useCallback } from "react";
 import { FiChevronRight } from "react-icons/fi";
 
-import { getExplorerTxUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
-import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { ActionVariant, TxReceipt } from "lib/types";
 
 // TODO: refactor props to pass param in txResultRendering instead of receipt
@@ -23,18 +20,16 @@ export const ButtonSection = ({
 }: ButtonSectionProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { currentChainName } = useWallet();
 
   const openExplorer = useCallback(() => {
-    AmpTrackMintscan("tx_hash");
     const txHash = receipts.find((r) => r.title === "Tx Hash")?.value;
     window.open(
-      `${getExplorerTxUrl(currentChainName)}/${txHash}`,
+      `/${router.query.network}/tx/${txHash}`,
       "_blank",
       "noopener,noreferrer"
     );
     onClose?.();
-  }, [receipts, onClose, currentChainName]);
+  }, [receipts, router.query.network, onClose]);
 
   switch (actionVariant) {
     case "sending":

src/lib/layout/Searchbar.tsx

@@ -44,6 +44,8 @@ const getRoute = (type: SearchResultType) => {
       return "/contract";
     case "Wallet Address":
       return "/account";
+    case "Transaction Hash":
+      return "/tx";
     default:
       return null;
   }
@@ -124,7 +126,7 @@ const Searchbar = () => {
           value={keyword}
           h="36px"
           onChange={handleSearchChange}
-          placeholder="Search by Wallet Address / Contract Address / Code ID"
+          placeholder="Search by Wallet Address / Contract Address / Code ID / Tx Hash"
           focusBorderColor="lilac.main"
           onFocus={() => setDisplayResults(keyword.length > 0)}
           onKeyDown={handleOnKeyEnter}