Merge pull request #2233 from webb-tools/linh/handle-explorer

Update Explorer links on Tangle Dapp + getUrlExplorer + Chains Config
tangle-network · Apr 15, 2024 · e6b5ae8 · e6b5ae8
2 parents 762b53e + 6912a65
commit e6b5ae8
Show file tree

Hide file tree

Showing 21 changed files with 225 additions and 136 deletions.
diff --git a/apps/bridge-dapp/src/components/Header/Header.tsx b/apps/bridge-dapp/src/components/Header/Header.tsx
@@ -2,6 +2,7 @@ import {
   useWebContext,
   useConnectWallet,
 } from '@webb-tools/api-provider-environment';
+import { TANGLE_TESTNET_NATIVE_EXPLORER_URL } from '@webb-tools/dapp-config/constants/tangle';
 import { WebbLogoIcon } from '@webb-tools/icons';
 import {
   Breadcrumbs,
@@ -20,7 +21,6 @@ import {
 import {
   GITHUB_REQUEST_FEATURE_URL,
   SOCIAL_URLS_RECORD,
-  TANGLE_TESTNET_NATIVE_EXPLORER_URL,
   WEBB_DOCS_URL,
   WEBB_FAUCET_URL,
   WEBB_MKT_URL,

diff --git a/apps/faucet/src/components/Header.tsx b/apps/faucet/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import { TANGLE_TESTNET_NATIVE_EXPLORER_URL } from '@webb-tools/dapp-config/constants/tangle';
 import { FaucetIcon, TangleIcon } from '@webb-tools/icons';
 import {
   Breadcrumbs,
@@ -14,7 +15,6 @@ import {
   GITHUB_REQUEST_FEATURE_URL,
   SOCIAL_URLS_RECORD,
   TANGLE_MKT_URL,
-  TANGLE_TESTNET_NATIVE_EXPLORER_URL,
 } from '@webb-tools/webb-ui-components/constants';
 import Link from 'next/link';
 import { type FC } from 'react';

diff --git a/apps/faucet/src/constants/sidebar.ts b/apps/faucet/src/constants/sidebar.ts
@@ -1,3 +1,7 @@
+import {
+  TANGLE_TESTNET_EVM_EXPLORER_URL,
+  TANGLE_TESTNET_NATIVE_EXPLORER_URL,
+} from '@webb-tools/dapp-config/constants/tangle';
 import {
   AppsLine,
   DocumentationIcon,
@@ -18,8 +22,6 @@ import {
   DKG_STATS_PROPOSALS_URL,
   TANGLE_DOCS_URL,
   TANGLE_MKT_URL,
-  TANGLE_TESTNET_EVM_EXPLORER_URL,
-  TANGLE_TESTNET_NATIVE_EXPLORER_URL,
 } from '@webb-tools/webb-ui-components/constants';
 
 const items: SideBarItemProps[] = [

diff --git a/apps/hubble-stats/containers/Layout/Header.tsx b/apps/hubble-stats/containers/Layout/Header.tsx
@@ -8,6 +8,7 @@ import {
   NavigationMenuTrigger,
   Logo,
 } from '@webb-tools/webb-ui-components';
+import { TANGLE_TESTNET_NATIVE_EXPLORER_URL } from '@webb-tools/dapp-config/constants/tangle';
 import { WebbLogoIcon } from '@webb-tools/icons';
 import { Breadcrumbs, SideBarMenu } from '../../components';
 import {
@@ -16,7 +17,6 @@ import {
   GITHUB_REQUEST_FEATURE_URL,
   SOCIAL_URLS_RECORD,
   TANGLE_MKT_URL,
-  TANGLE_TESTNET_NATIVE_EXPLORER_URL,
 } from '@webb-tools/webb-ui-components/constants';
 
 const Header: FC = () => {

diff --git a/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx b/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx
@@ -28,7 +28,7 @@ import {
   TitleWithInfo,
 } from '@webb-tools/webb-ui-components/components';
 import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils';
-import { POLKADOT_EXPLORER_URL } from '@webb-tools/webb-ui-components/constants';
+import { POLKADOT_JS_EXPLORER_URL } from '@webb-tools/webb-ui-components/constants';
 import { Typography } from '@webb-tools/webb-ui-components/typography';
 import cx from 'classnames';
 import getUnicodeFlagIcon from 'country-flag-icons/unicode';
@@ -250,7 +250,7 @@ export const KeyDetail = forwardRef<HTMLDivElement, KeyDetailProps>(
                       title={status}
                       time={at}
                       blockHash={hash}
-                      externalUrl={POLKADOT_EXPLORER_URL + hash}
+                      externalUrl={POLKADOT_JS_EXPLORER_URL + hash}
                     />
                   );
                 }
@@ -262,7 +262,7 @@ export const KeyDetail = forwardRef<HTMLDivElement, KeyDetailProps>(
                       title={status}
                       time={at}
                       blockHash={hash}
-                      externalUrl={POLKADOT_EXPLORER_URL + hash}
+                      externalUrl={POLKADOT_JS_EXPLORER_URL + hash}
                     />
                   );
                 }
@@ -274,7 +274,7 @@ export const KeyDetail = forwardRef<HTMLDivElement, KeyDetailProps>(
                       title={status}
                       time={at}
                       blockHash={hash}
-                      externalUrl={POLKADOT_EXPLORER_URL + hash}
+                      externalUrl={POLKADOT_JS_EXPLORER_URL + hash}
                     />
                   );
                 }

diff --git a/apps/tangle-dapp/app/claim/success/SuccessClient.tsx b/apps/tangle-dapp/app/claim/success/SuccessClient.tsx
@@ -8,11 +8,12 @@ import { AppTemplate } from '@webb-tools/webb-ui-components/containers/AppTempla
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { type FC } from 'react';
 
-import useExplorerUrl, { ExplorerType } from '../../../hooks/useExplorerUrl';
+import useTxExplorerUrl from '../../../hooks/useTxExplorerUrl';
+import { ExplorerType } from '../../../types';
 
 const SuccessClient: FC<{ blockHash: HexString }> = ({ blockHash }) => {
-  const getExplorerUrl = useExplorerUrl();
-  const txExplorerUrl = getExplorerUrl(blockHash, ExplorerType.Substrate);
+  const getTxExplorerUrl = useTxExplorerUrl();
+  const txExplorerUrl = getTxExplorerUrl(blockHash, ExplorerType.Substrate);
 
   return (
     <AppTemplate.Content>

diff --git a/apps/tangle-dapp/app/services/[serviceId]/JobsListTable.tsx b/apps/tangle-dapp/app/services/[serviceId]/JobsListTable.tsx
@@ -16,11 +16,12 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { SkeletonRow } from '../../../components/skeleton';
 import { HeaderCell, StringCell } from '../../../components/tableCells';
+import useNetworkStore from '../../../context/useNetworkStore';
 import { useServiceJobs } from '../../../data/ServiceDetails';
 import type { ServiceJob } from '../../../types';
 
@@ -36,48 +37,59 @@ const TANGLE_BLOCK_EXPLORER =
 
 const columnHelper = createColumnHelper<ServiceJob>();
 
-const columns = [
-  columnHelper.accessor('id', {
-    header: () => <HeaderCell title="Job ID" className="justify-start" />,
-    cell: (props) => <StringCell value={props.getValue()} />,
-  }),
-  columnHelper.accessor('txHash', {
-    header: () => <HeaderCell title="Tx Hash" className="justify-start" />,
-    cell: (props) => {
-      const txHash = props.getValue();
-
-      // TODO: This should be based off the active network, cannot assume it is always the testnet!
-      const txExplorerURI = TANGLE_BLOCK_EXPLORER
-        ? getExplorerURI(
-            TANGLE_BLOCK_EXPLORER,
-            txHash,
-            'tx',
-            'polkadot'
-          ).toString()
-        : null;
-      return (
-        <div className="flex gap-1 items-center">
-          <StringCell value={shortenHex(txHash, 5)} />
-          {txExplorerURI && (
-            <a href={txExplorerURI} target="_blank" rel="noopener noreferrer">
-              <ExternalLinkLine />
-            </a>
-          )}
-        </div>
-      );
-    },
-  }),
-  columnHelper.accessor('timestamp', {
-    header: () => <HeaderCell title="Timestamp" className="justify-start" />,
-    cell: (props) => (
-      <StringCell value={formatDate(new Date(props.getValue()))} />
-    ),
-  }),
-];
+const idColumn = columnHelper.accessor('id', {
+  header: () => <HeaderCell title="Job ID" className="justify-start" />,
+  cell: (props) => <StringCell value={props.getValue()} />,
+});
+
+const timestampColumn = columnHelper.accessor('timestamp', {
+  header: () => <HeaderCell title="Timestamp" className="justify-start" />,
+  cell: (props) => (
+    <StringCell value={formatDate(new Date(props.getValue()))} />
+  ),
+});
 
 const JobsListTable: FC<JobsListTableProps> = ({ serviceId, className }) => {
+  const { network } = useNetworkStore();
   const { data, isLoading, error } = useServiceJobs(serviceId);
 
+  const columns = useMemo(
+    () => [
+      idColumn,
+      columnHelper.accessor('txHash', {
+        header: () => <HeaderCell title="Tx Hash" className="justify-start" />,
+        cell: (props) => {
+          const txHash = props.getValue();
+
+          const txExplorerURI = TANGLE_BLOCK_EXPLORER
+            ? getExplorerURI(
+                network.polkadotExplorerUrl,
+                txHash,
+                'tx',
+                'polkadot'
+              ).toString()
+            : null;
+          return (
+            <div className="flex gap-1 items-center">
+              <StringCell value={shortenHex(txHash, 5)} />
+              {txExplorerURI && (
+                <a
+                  href={txExplorerURI}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <ExternalLinkLine />
+                </a>
+              )}
+            </div>
+          );
+        },
+      }),
+      timestampColumn,
+    ],
+    [network.polkadotExplorerUrl]
+  );
+
   const table = useReactTable({
     data: data ?? [],
     columns,

diff --git a/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx b/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx
@@ -59,7 +59,7 @@ const KeyStatsItem: FC<KeyStatsItemProps> = ({
       <div className="flex items-center gap-0.5">
         <Typography
           variant="body1"
-          className="text-mono-140 dark:text-mono-40 break-all"
+          className="text-mono-140 dark:text-mono-40 break-all xl:whitespace-nowrap"
         >
           {title}
         </Typography>

diff --git a/apps/tangle-dapp/components/TxConfirmationModal/TxConfirmationModal.tsx b/apps/tangle-dapp/components/TxConfirmationModal/TxConfirmationModal.tsx
@@ -16,7 +16,8 @@ import {
 import { KeyValueWithButton } from '@webb-tools/webb-ui-components/components/KeyValueWithButton';
 import { FC, useCallback } from 'react';
 
-import useExplorerUrl, { ExplorerType } from '../../hooks/useExplorerUrl';
+import useTxExplorerUrl from '../../hooks/useTxExplorerUrl';
+import { ExplorerType } from '../../types';
 import { TxConfirmationModalProps } from './types';
 
 export const TxConfirmationModal: FC<TxConfirmationModalProps> = ({
@@ -26,9 +27,9 @@ export const TxConfirmationModal: FC<TxConfirmationModalProps> = ({
   txHash,
   txType,
 }) => {
-  const getExplorerUrl = useExplorerUrl();
+  const getTxExplorerUrl = useTxExplorerUrl();
 
-  const txExplorerUrl = getExplorerUrl(
+  const txExplorerUrl = getTxExplorerUrl(
     txHash,
     txType === 'evm' ? ExplorerType.EVM : ExplorerType.Substrate
   );

diff --git a/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx b/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx
@@ -1,17 +1,34 @@
 'use client';
 
+import { isEthereumAddress } from '@polkadot/util-crypto';
+import { getExplorerURI } from '@webb-tools/api-provider-environment/transaction/utils';
 import { Button, Typography } from '@webb-tools/webb-ui-components';
 import { TANGLE_DOCS_URL } from '@webb-tools/webb-ui-components/constants';
 import Link from 'next/link';
 import { FC } from 'react';
 
 import GlassCard from '../../components/GlassCard/GlassCard';
 import useNetworkStore from '../../context/useNetworkStore';
-import useAgnosticAccountInfo from '../../hooks/useAgnosticAccountInfo';
+import useActiveAccountAddress from '../../hooks/useActiveAccountAddress';
+import { ExplorerType } from '../../types';
 
 const RecentTxContainer: FC = () => {
   const { network } = useNetworkStore();
-  const { isEvm } = useAgnosticAccountInfo();
+  const activeAccountAddress = useActiveAccountAddress();
+
+  const isEvm =
+    activeAccountAddress === null
+      ? null
+      : isEthereumAddress(activeAccountAddress);
+
+  const accountExplorerUrl = activeAccountAddress
+    ? getExplorerURI(
+        isEvm ? network.evmExplorerUrl : network.polkadotExplorerUrl,
+        activeAccountAddress,
+        'address',
+        isEvm ? ExplorerType.EVM : ExplorerType.Substrate
+      ).toString()
+    : undefined;
 
   return (
     <GlassCard className="flex flex-col gap-3 sm:gap-0">
@@ -22,7 +39,8 @@ const RecentTxContainer: FC = () => {
           color="primary"
           className="uppercase"
           target="_blank"
-          href={isEvm ? network.evmExplorerUrl : network.polkadotExplorerUrl}
+          href={accountExplorerUrl}
+          isDisabled={!accountExplorerUrl}
         >
           Open Explorer
         </Button>

diff --git a/apps/tangle-dapp/hooks/useExecuteTxWithNotification.tsx b/apps/tangle-dapp/hooks/useExecuteTxWithNotification.tsx
@@ -4,13 +4,14 @@ import { Button, Typography } from '@webb-tools/webb-ui-components';
 import { useSnackbar } from 'notistack';
 import { useCallback } from 'react';
 
+import { ExplorerType } from '../types';
 import ensureError from '../utils/ensureError';
 import { evmPublicClient } from '../utils/evm';
-import useExplorerUrl, { ExplorerType } from './useExplorerUrl';
+import useTxExplorerUrl from './useTxExplorerUrl';
 
 const useExecuteTxWithNotification = () => {
   const { activeWallet } = useWebContext();
-  const getExplorerUrl = useExplorerUrl();
+  const getTxExplorerUrl = useTxExplorerUrl();
   const { enqueueSnackbar: enqueueNotifications } = useSnackbar();
 
   /**
@@ -51,8 +52,7 @@ const useExecuteTxWithNotification = () => {
           throw new Error(errorMessage);
         }
 
-        // TODO: tx explorer url is incorrect
-        const txExplorerUrl = getExplorerUrl(
+        const txExplorerUrl = getTxExplorerUrl(
           txHash,
           activeWallet?.platform === 'EVM'
             ? ExplorerType.EVM
@@ -104,7 +104,7 @@ const useExecuteTxWithNotification = () => {
         throw error;
       }
     },
-    [activeWallet?.platform, getExplorerUrl, enqueueNotifications]
+    [activeWallet?.platform, getTxExplorerUrl, enqueueNotifications]
   );
 
   return executeTx;

diff --git a/apps/tangle-dapp/hooks/useExplorerUrl.ts → apps/tangle-dapp/hooks/useTxExplorerUrl.ts b/apps/tangle-dapp/hooks/useExplorerUrl.ts → apps/tangle-dapp/hooks/useTxExplorerUrl.ts
@@ -2,17 +2,13 @@ import { getExplorerURI } from '@webb-tools/api-provider-environment/transaction
 import { useCallback } from 'react';
 
 import useNetworkStore from '../context/useNetworkStore';
+import { ExplorerType } from '../types';
 
-export enum ExplorerType {
-  Substrate = 'polkadot',
-  EVM = 'web3',
-}
-
-const useExplorerUrl = () => {
+const useTxExplorerUrl = () => {
   const { network } = useNetworkStore();
 
   return useCallback(
-    (transactionOrBlockHash: string, type: ExplorerType): URL | null => {
+    (txHash: string, type: ExplorerType): URL | null => {
       const explorerUrl =
         type === ExplorerType.Substrate
           ? network.polkadotExplorerUrl
@@ -22,10 +18,10 @@ const useExplorerUrl = () => {
         return null;
       }
 
-      return getExplorerURI(explorerUrl, transactionOrBlockHash, 'tx', type);
+      return getExplorerURI(explorerUrl, txHash, 'tx', type);
     },
     [network.evmExplorerUrl, network.polkadotExplorerUrl]
   );
 };
 
-export default useExplorerUrl;
+export default useTxExplorerUrl;
diff --git a/apps/tangle-dapp/types/index.ts b/apps/tangle-dapp/types/index.ts
@@ -197,3 +197,8 @@ export type ServiceParticipant = {
 export enum NetworkFeature {
   Faucet,
 }
+
+export enum ExplorerType {
+  Substrate = 'polkadot',
+  EVM = 'web3',
+}
diff --git a/apps/testnet-leaderboard/components/Navbar.tsx b/apps/testnet-leaderboard/components/Navbar.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { AccordionTrigger } from '@radix-ui/react-accordion';
+import { TANGLE_TESTNET_NATIVE_EXPLORER_URL } from '@webb-tools/dapp-config/constants/tangle';
 import { ArrowRight, ChevronDown, Menu } from '@webb-tools/icons';
 import {
   Accordion,
@@ -16,7 +17,6 @@ import {
 import { MenuItem } from '@webb-tools/webb-ui-components/components/MenuItem';
 import {
   TANGLE_MKT_URL,
-  TANGLE_TESTNET_NATIVE_EXPLORER_URL,
   WEBB_BLOG_URL,
 } from '@webb-tools/webb-ui-components/constants';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';