chore: explorer urls for prod and formating links for source and dest…

…ination tx hash (#102) * chore: explorer urls for cronos and base * formating links for source and destination tx hash * debug: some logs * debug: removing logs * debug: explorer page debug log * chore: removing all the logs * feat: opening links on new tab
sygmaprotocol · Oct 17, 2023 · aa8da17 · aa8da17
1 parent 6ed995e
commit aa8da17
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 19 deletions.
diff --git a/.github/workflows/cf-deploy-prod.yml b/.github/workflows/cf-deploy-prod.yml
@@ -21,7 +21,7 @@ jobs:
         env:
           VITE_INDEXER_URL: "https://api.buildwithsygma.com"
           VITE_SHARED_CONFIG_URL: "https://sygma-assets-mainnet.s3.us-east-2.amazonaws.com/shared-config-mainnet.json"
-          VITE_EXPLORER_URLS: '[{ "id": 1, "url": "https://etherscan.io" }, { "id": 2, "url": "https://khala.subscan.io" }, {"id": 3, "url": "https://phala.subscan.io" }]'
+          VITE_EXPLORER_URLS: '[{ "id": 1, "url": "https://etherscan.io" }, { "id": 2, "url": "https://khala.subscan.io" }, {"id": 3, "url": "https://phala.subscan.io" }, { "id": 4, "url": "https://cronoscan.com" }, { "id": 5, "url": "https://basescan.org" }]'
       - name: Publish to Cloudflare Pages
         uses: cloudflare/pages-action@1
         with:

diff --git a/src/pages/DetailView/DetailView.tsx b/src/pages/DetailView/DetailView.tsx
@@ -10,6 +10,7 @@ import clsx from "clsx"
 import { useExplorer } from "../../context"
 import { ResourceTypes, Transfer } from "../../types"
 import {
+  accountLinks,
   formatDistanceDate,
   getDisplayedStatuses,
   getDomainData,
@@ -19,6 +20,7 @@ import {
   renderFormatedConvertedAmount,
   renderNetworkIcon,
   renderStatusIcon,
+  txHashLinks,
 } from "../../utils/Helpers"
 import { useStyles } from "./styles"
 import useClipboard from "./hooks/useClipboard"
@@ -35,7 +37,7 @@ export default function DetailView() {
 
   const { classes } = useStyles()
 
-  const { state: transferId } = useLocation()
+  const { state: transferId } = useLocation() as { state: { id: string } }
 
   const initState: DetailViewState = {
     transferDetails: null,
@@ -54,6 +56,7 @@ export default function DetailView() {
 
   useUpdateInterval(state, dispatcher, transferId, routes)
 
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   const renderTransferDetails = (transfer: Transfer | null) => {
     const fromDomainInfo = getDomainData(transfer?.fromDomainId!, sharedConfig)
     const toDomainInfo = getDomainData(transfer?.toDomainId!, sharedConfig)
@@ -96,11 +99,17 @@ export default function DetailView() {
         <div className={classes.detailsContainer}>
           <span className={classes.detailsInnerContentTitle}>Source transaction hash:</span>
           <span className={classes.detailsInnerContent}>
-            <span className={classes.txHashText}>{transfer?.deposit && transfer?.deposit?.txHash}</span>
+            <Link
+              to={txHashLinks(fromDomainInfo!.type, transfer?.deposit?.txHash!, fromDomainExplorerUrl!.url)}
+              style={{ color: "black" }}
+              target="_blank"
+            >
+              {transfer?.deposit && transfer?.deposit?.txHash}
+            </Link>
             <span
               className={classes.copyIcon}
               onClick={() => {
-                navigator.clipboard?.writeText(transfer?.deposit?.txHash!)
+                void navigator.clipboard?.writeText(transfer?.deposit?.txHash!)
                 dispatcher({
                   type: "set_clipboard_message_t1",
                   payload: "Copied to clipboard!",
@@ -116,13 +125,17 @@ export default function DetailView() {
         <div className={classes.detailsContainer}>
           <span className={classes.detailsInnerContentTitle}>Destination transaction hash:</span>
           <span className={classes.detailsInnerContent}>
-            <span className={toDomainInfo?.type !== "evm" ? classes.txHashText : clsx(classes.txHashText, classes.txHashTextEvm)}>
+            <Link
+              to={txHashLinks(fromDomainInfo!.type, transfer?.execution?.txHash!, toDomainExplorerUrl!.url)}
+              style={{ color: "black" }}
+              target="_blank"
+            >
               {transfer?.execution && transfer?.execution?.txHash}
-            </span>
+            </Link>
             <span
               className={classes.copyIcon}
               onClick={() => {
-                navigator.clipboard?.writeText(transfer?.execution?.txHash!)
+                void navigator.clipboard?.writeText(transfer?.execution?.txHash!)
                 dispatcher({
                   type: "set_clipboard_message_t2",
                   payload: "Copied to clipboard!",
@@ -153,11 +166,8 @@ export default function DetailView() {
                 style={{
                   color: "black",
                 }}
-                to={
-                  fromDomainInfo!.type !== "evm"
-                    ? `${fromDomainExplorerUrl?.url}/account/${transfer?.accountId}`
-                    : `${fromDomainExplorerUrl?.url}/address/${transfer?.accountId}`
-                }
+                to={accountLinks(fromDomainInfo!.type, transfer?.accountId!, fromDomainExplorerUrl.url)}
+                target="_blank"
               >
                 {transfer?.accountId}
               </Link>
@@ -174,11 +184,8 @@ export default function DetailView() {
                 style={{
                   color: "black",
                 }}
-                to={
-                  toDomainInfo!.type !== "evm"
-                    ? `${toDomainExplorerUrl?.url}/account/${transfer?.destination}`
-                    : `${toDomainExplorerUrl?.url}/address/${transfer?.destination}`
-                }
+                to={accountLinks(toDomainInfo!.type, transfer?.destination!, toDomainExplorerUrl.url)}
+                target="_blank"
               >
                 {transfer?.destination}
               </Link>

diff --git a/src/pages/ExplorerPage/ExplorerPage.tsx b/src/pages/ExplorerPage/ExplorerPage.tsx
@@ -18,7 +18,7 @@ const initState: ExplorerPageState = {
 
 const ExplorerPage = (): JSX.Element => {
   const explorerContext = useExplorer()
-  const { explorerContextDispatcher, explorerContextState, routes, sharedConfig } = explorerContext
+  const { explorerContextDispatcher, explorerContextState, routes, sharedConfig, explorerUrls } = explorerContext
 
   const { chains } = explorerContextState
 

diff --git a/src/utils/Helpers.tsx b/src/utils/Helpers.tsx
@@ -2,7 +2,7 @@ import dayjs from "dayjs"
 import { intervalToDuration } from "date-fns"
 
 import { BigNumberish, ethers } from "ethers"
-import { ResourceTypes, SharedConfigDomain, Transfer } from "../types"
+import { DomainTypes, ResourceTypes, SharedConfigDomain, Transfer } from "../types"
 
 export const shortenAddress = (address: string): string => {
   return `${address.substring(0, 6)}...${address.substring(address.length - 6, address.length)}`
@@ -265,3 +265,25 @@ export const renderFormatedConvertedAmount = (type: ResourceTypes, usdValue: num
   }
   return ""
 }
+
+export const txHashLinks = (type: DomainTypes, txHash: string, domainExplorerUrl: string): string => {
+  switch (type) {
+    case DomainTypes.EVM:
+      return `${domainExplorerUrl}/tx/${txHash}`
+    case DomainTypes.SUBSTRATE:
+      return `${domainExplorerUrl}/extrinsic/${txHash}`
+    default:
+      return ""
+  }
+}
+
+export const accountLinks = (type: DomainTypes, accountId: string, domainExplorerUrl: string): string => {
+  switch (type) {
+    case DomainTypes.EVM:
+      return `${domainExplorerUrl}/address/${accountId}`
+    case DomainTypes.SUBSTRATE:
+      return `${domainExplorerUrl}/account/${accountId}`
+    default:
+      return ""
+  }
+}