Merge pull request #224 from alleslabs/feat/tx-link

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
 - [#226](https://github.com/alleslabs/celatone-frontend/pull/226) Add fully functional transaction details page
 - [#79](https://github.com/alleslabs/celatone-frontend/pull/79) Add dropdown menu and wireup up json attach funds
 - [#225](https://github.com/alleslabs/celatone-frontend/pull/225) Add assets section in account details page

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

@@ -4,7 +4,6 @@ import { useWallet } from "@cosmos-kit/react";
 
 import {
   getExplorerBlockUrl,
-  getExplorerTxUrl,
   getProposalUrl,
   getExplorerValidatorUrl,
 } from "lib/app-fns/explorer";
@@ -41,7 +40,7 @@ const getNavigationUrl = (
   let url = "";
   switch (type) {
     case "tx_hash":
-      url = getExplorerTxUrl(currentChainName);
+      url = "/tx";
       break;
     case "contract_address":
       url = "/contract";
@@ -146,7 +145,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

@@ -4,9 +4,8 @@ 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 { getNetworkByChainName } from "lib/data";
 import type { ActionVariant, TxReceipt } from "lib/types";
 
 // TODO: refactor props to pass param in txResultRendering instead of receipt
@@ -26,15 +25,14 @@ export const ButtonSection = ({
   const { currentChainName } = useWallet();
 
   const openExplorer = useCallback(() => {
-    AmpTrackMintscan("tx_hash");
     const txHash = receipts.find((r) => r.title === "Tx Hash")?.value;
     window.open(
-      `${getExplorerTxUrl(currentChainName)}/${txHash}`,
+      `/${getNetworkByChainName(currentChainName)}/tx/${txHash}`,
       "_blank",
       "noopener,noreferrer"
     );
     onClose?.();
-  }, [receipts, onClose, currentChainName]);
+  }, [receipts, currentChainName, 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}