From 5ad204ef4db4455964f8dea7e90212a690db6986 Mon Sep 17 00:00:00 2001 From: Solniechniy Date: Mon, 19 Aug 2024 15:49:01 +0300 Subject: [PATCH] fix(explorer): Block explorer links (#674) Co-authored-by: Alain Nicolas --- explorer/src/constants/columns/attestation.tsx | 13 +++++++------ explorer/src/constants/columns/module.tsx | 10 ++++++---- explorer/src/constants/columns/portal.tsx | 8 ++++---- explorer/src/constants/index.ts | 2 +- .../components/AttestationInfo/index.tsx | 9 ++++++--- explorer/src/pages/Attestations/index.tsx | 4 ++-- explorer/src/pages/Module/index.tsx | 5 +++-- explorer/src/pages/Modules/index.tsx | 2 +- explorer/src/pages/MyAttestations/index.tsx | 6 +----- .../pages/Portal/components/PortalModules/index.tsx | 2 +- .../Schema/components/RecentAttestations/index.tsx | 2 +- explorer/src/pages/Schemas/index.tsx | 2 -- .../components/SearchAttestationsReceived/index.tsx | 2 +- .../pages/Search/components/SearchModules/index.tsx | 2 +- .../pages/Search/components/SearchPortals/index.tsx | 2 +- explorer/src/providers/network-provider/index.tsx | 9 +++++---- explorer/src/utils/index.ts | 11 +++++++++++ 17 files changed, 52 insertions(+), 39 deletions(-) diff --git a/explorer/src/constants/columns/attestation.tsx b/explorer/src/constants/columns/attestation.tsx index 48190a22..5d1d5c03 100644 --- a/explorer/src/constants/columns/attestation.tsx +++ b/explorer/src/constants/columns/attestation.tsx @@ -2,7 +2,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Attestation, VeraxSdk } from "@verax-attestation-registry/verax-sdk"; import { t } from "i18next"; import moment from "moment"; -import { Hex } from "viem"; +import { Chain, Hex } from "viem"; import { hexToNumber } from "viem/utils"; import { TdHandler } from "@/components/DataTable/components/TdHandler"; @@ -13,18 +13,19 @@ import { ColumnsOptions } from "@/interfaces/components"; import { SWRKeys } from "@/interfaces/swr/enum"; import { SWRCell } from "@/pages/Attestations/components/SWRCell"; import { toAttestationById, toPortalById, toSchemaById } from "@/routes/constants"; +import { getBlockExplorerLink } from "@/utils"; import { displayAmountWithComma } from "@/utils/amountUtils"; import { cropString } from "@/utils/stringUtils"; -import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index"; +import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT } from "../index"; interface ColumnsProps { sortByDate: boolean; sdk: VeraxSdk; - chainId: number; + chain: Chain; } -export const columns = ({ sortByDate = true, sdk, chainId }: Partial = {}): ColumnDef[] => [ +export const columns = ({ sortByDate = true, sdk, chain }: Partial = {}): ColumnDef[] => [ { accessorKey: "id", header: () => ( @@ -85,11 +86,11 @@ export const columns = ({ sortByDate = true, sdk, chainId }: Partial

{t("attestation.list.columns.subject")}

, cell: ({ row }) => { const subject = row.getValue("subject") as string; - if (!chainId) return cropString(subject); + if (!chain) return cropString(subject); return ( e.stopPropagation()} target="_blank" className="hover:underline" diff --git a/explorer/src/constants/columns/module.tsx b/explorer/src/constants/columns/module.tsx index 2f158ed2..9919126f 100644 --- a/explorer/src/constants/columns/module.tsx +++ b/explorer/src/constants/columns/module.tsx @@ -1,21 +1,23 @@ import { ColumnDef } from "@tanstack/react-table"; import { Module } from "@verax-attestation-registry/verax-sdk"; import { t } from "i18next"; +import { Chain } from "viem"; import { TdHandler } from "@/components/DataTable/components/TdHandler"; import { HelperIndicator } from "@/components/HelperIndicator"; import { Link } from "@/components/Link"; import { ColumnsOptions } from "@/interfaces/components"; import { toModuleById } from "@/routes/constants"; +import { getBlockExplorerLink } from "@/utils"; import { cropString } from "@/utils/stringUtils"; -import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index"; +import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT } from "../index"; interface ColumnsProps { - chainId: number; + chain: Chain; } -export const columns = ({ chainId }: Partial = {}): ColumnDef[] => [ +export const columns = ({ chain }: Partial = {}): ColumnDef[] => [ { accessorKey: "name", header: () => ( @@ -47,7 +49,7 @@ export const columns = ({ chainId }: Partial = {}): ColumnDef diff --git a/explorer/src/constants/columns/portal.tsx b/explorer/src/constants/columns/portal.tsx index 305ee2d1..980da05c 100644 --- a/explorer/src/constants/columns/portal.tsx +++ b/explorer/src/constants/columns/portal.tsx @@ -1,16 +1,16 @@ import { ColumnDef } from "@tanstack/react-table"; import { Portal } from "@verax-attestation-registry/verax-sdk"; import { t } from "i18next"; +import { Chain } from "viem"; import { TdHandler } from "@/components/DataTable/components/TdHandler"; import { HelperIndicator } from "@/components/HelperIndicator"; import { Link } from "@/components/Link"; import { toPortalById } from "@/routes/constants"; +import { getBlockExplorerLink } from "@/utils"; import { cropString } from "@/utils/stringUtils"; -import { links } from "../index"; - -export const columns = ({ chainId }: { chainId: number }): ColumnDef[] => [ +export const columns = ({ chain }: { chain: Chain }): ColumnDef[] => [ { accessorKey: "name", header: () => ( @@ -47,7 +47,7 @@ export const columns = ({ chainId }: { chainId: number }): ColumnDef[] = return ( diff --git a/explorer/src/constants/index.ts b/explorer/src/constants/index.ts index 645f904d..849f01c8 100644 --- a/explorer/src/constants/index.ts +++ b/explorer/src/constants/index.ts @@ -41,7 +41,7 @@ export const links: Record = { address: "https://bscscan.com/address", }, [bscTestnet.id]: { - address: "https://testnet.bscscan.com/", + address: "https://testnet.bscscan.com/address", }, }; diff --git a/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx b/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx index 190dca3b..62d28ff2 100644 --- a/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx +++ b/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx @@ -4,9 +4,9 @@ import { ArrowUpRight } from "lucide-react"; import { Hex, hexToNumber } from "viem"; import { Link } from "@/components/Link"; -import { links } from "@/constants"; import { useNetworkContext } from "@/providers/network-provider/context"; import { toPortalById } from "@/routes/constants"; +import { getBlockExplorerLink } from "@/utils"; import { displayAmountWithComma } from "@/utils/amountUtils"; import { cropString } from "@/utils/stringUtils"; @@ -18,6 +18,9 @@ export const AttestationInfo: React.FC = ({ ...attestation }) => { } = useNetworkContext(); const { attestedDate, expirationDate, revocationDate, id, revoked, attester, portal, subject } = attestation; + + const blockExplorerLink = getBlockExplorerLink(chain); + const list: Array<{ title: string; value: string; to?: string; link?: string }> = [ createDateListItem(t("attestation.info.attested"), attestedDate.toString()), createDateListItem(t("attestation.info.expirationDate"), expirationDate.toString()), @@ -29,7 +32,7 @@ export const AttestationInfo: React.FC = ({ ...attestation }) => { { title: t("attestation.info.issuedBy"), value: cropString(attester), - link: `${links[chain.id].address}/${attester}`, + link: `${blockExplorerLink}/${attester}`, }, { title: t("attestation.info.portal"), @@ -39,7 +42,7 @@ export const AttestationInfo: React.FC = ({ ...attestation }) => { { title: t("attestation.info.subject"), value: cropString(subject), - link: `${links[chain.id].address}/${subject}`, + link: `${blockExplorerLink}/${subject}`, }, ]; diff --git a/explorer/src/pages/Attestations/index.tsx b/explorer/src/pages/Attestations/index.tsx index ac775987..d6fe4dcf 100644 --- a/explorer/src/pages/Attestations/index.tsx +++ b/explorer/src/pages/Attestations/index.tsx @@ -57,12 +57,12 @@ export const Attestations: React.FC = () => { const data = isLoading ? { columns: columnsSkeletonRef.current, list: skeletonAttestations(itemsPerPage) } - : { columns: columns({ sdk, chainId: chain.id }), list: attestationsList || [] }; + : { columns: columns({ sdk, chain }), list: attestationsList || [] }; return ( - {attestationsCount && } + {attestationsCount ? : null} ); }; diff --git a/explorer/src/pages/Module/index.tsx b/explorer/src/pages/Module/index.tsx index e49c47a9..eed87040 100644 --- a/explorer/src/pages/Module/index.tsx +++ b/explorer/src/pages/Module/index.tsx @@ -4,10 +4,10 @@ import useSWR from "swr"; import { Back } from "@/components/Back"; import { NotFoundPage } from "@/components/NotFoundPage"; -import { links } from "@/constants"; import { regexEthAddress } from "@/constants/regex"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { getBlockExplorerLink } from "@/utils"; import { ModuleLoadingSkeleton } from "./components/ModuleLoadingSkeleton"; @@ -35,6 +35,7 @@ export const Module = () => { if (isLoading || isValidating) return ; if (!module) return ; + const blockExplorerLink = getBlockExplorerLink(chain); return (
@@ -51,7 +52,7 @@ export const Module = () => {

CONTEXT

 diff --git a/explorer/src/pages/Modules/index.tsx b/explorer/src/pages/Modules/index.tsx index 5fdc4019..2da458f8 100644 --- a/explorer/src/pages/Modules/index.tsx +++ b/explorer/src/pages/Modules/index.tsx @@ -42,7 +42,7 @@ export const Modules: React.FC = () => { const columnsSkeletonRef = useRef(columnsSkeleton(columns(), moduleColumnsOption)); const data = isLoading ? { columns: columnsSkeletonRef.current, list: skeletonModules(itemsPerPage) } - : { columns: columns({ chainId: chain.id }), list: modulesList || [] }; + : { columns: columns({ chain }), list: modulesList || [] }; return (
diff --git a/explorer/src/pages/MyAttestations/index.tsx b/explorer/src/pages/MyAttestations/index.tsx index 7858de47..a50eb7f4 100644 --- a/explorer/src/pages/MyAttestations/index.tsx +++ b/explorer/src/pages/MyAttestations/index.tsx @@ -91,11 +91,7 @@ export const MyAttestations: React.FC = () => { ) : !attestationsList || !attestationsList.length ? ( } message={t("attestation.messages.emptyList")} /> ) : ( - + )} ); diff --git a/explorer/src/pages/Portal/components/PortalModules/index.tsx b/explorer/src/pages/Portal/components/PortalModules/index.tsx index d69e5e72..e9d0f2ba 100644 --- a/explorer/src/pages/Portal/components/PortalModules/index.tsx +++ b/explorer/src/pages/Portal/components/PortalModules/index.tsx @@ -29,7 +29,7 @@ export const PortalModules: React.FC<{ portalModules: Array
}> = ({ por const columnsSkeletonRef = useRef(columnsSkeleton(columns(), moduleColumnsOption)); const data = isLoading ? { columns: columnsSkeletonRef.current, list: skeletonModules(5) } - : { columns: columns({ chainId: chain.id }), list: modulesList?.slice(-5).reverse() || [] }; + : { columns: columns({ chain }), list: modulesList?.slice(-5).reverse() || [] }; return (
diff --git a/explorer/src/pages/Schema/components/RecentAttestations/index.tsx b/explorer/src/pages/Schema/components/RecentAttestations/index.tsx index 2093113c..ac5cf715 100644 --- a/explorer/src/pages/Schema/components/RecentAttestations/index.tsx +++ b/explorer/src/pages/Schema/components/RecentAttestations/index.tsx @@ -27,7 +27,7 @@ export const RecentAttestations: React.FC<{ schemaId: string }> = ({ schemaId }) const data = isLoading ? { columns: columnsSkeletonRef.current, list: skeletonAttestations(5) } : { - columns: columns({ sortByDate: false, sdk, chainId: chain.id }), + columns: columns({ sortByDate: false, sdk, chain }), list: attestations?.slice(-5).reverse() || [], }; diff --git a/explorer/src/pages/Schemas/index.tsx b/explorer/src/pages/Schemas/index.tsx index 93bdbd07..f6dd013f 100644 --- a/explorer/src/pages/Schemas/index.tsx +++ b/explorer/src/pages/Schemas/index.tsx @@ -45,8 +45,6 @@ export const Schemas: React.FC = () => { ? { columns: columnsSkeletonRef.current, list: skeletonSchemas(itemsPerPage) } : { columns: columns(), list: schemasList || [] }; - console.log("skip: ", skip, page); - return (
diff --git a/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx b/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx index 3cba8a12..55f4681d 100644 --- a/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx +++ b/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx @@ -31,7 +31,7 @@ export const SearchAttestationsReceived: React.FC = ({ get if (!data || !data.length) return null; return ( - + ); }; diff --git a/explorer/src/pages/Search/components/SearchModules/index.tsx b/explorer/src/pages/Search/components/SearchModules/index.tsx index da258626..5e251cb3 100644 --- a/explorer/src/pages/Search/components/SearchModules/index.tsx +++ b/explorer/src/pages/Search/components/SearchModules/index.tsx @@ -31,7 +31,7 @@ export const SearchModules: React.FC = ({ getSearchData, p if (!data || !data.length) return null; return ( - + ); }; diff --git a/explorer/src/pages/Search/components/SearchPortals/index.tsx b/explorer/src/pages/Search/components/SearchPortals/index.tsx index e6ccb4b3..7d77d50d 100644 --- a/explorer/src/pages/Search/components/SearchPortals/index.tsx +++ b/explorer/src/pages/Search/components/SearchPortals/index.tsx @@ -31,7 +31,7 @@ export const SearchPortals: React.FC = ({ getSearchData, p if (!data || !data.length) return null; return ( - + ); }; diff --git a/explorer/src/providers/network-provider/index.tsx b/explorer/src/providers/network-provider/index.tsx index 045bf0e0..18cd7b92 100644 --- a/explorer/src/providers/network-provider/index.tsx +++ b/explorer/src/providers/network-provider/index.tsx @@ -1,8 +1,8 @@ import { VeraxSdk } from "@verax-attestation-registry/verax-sdk"; -import { Chain, switchNetwork } from "@wagmi/core"; +import { Chain } from "@wagmi/core"; import { FC, PropsWithChildren, useCallback, useState } from "react"; import { useLoaderData, useLocation, useNavigate } from "react-router-dom"; -import { useAccount, useNetwork } from "wagmi"; +import { useAccount, useNetwork, useSwitchNetwork } from "wagmi"; import { INetwork } from "@/interfaces/config"; @@ -14,6 +14,7 @@ export const NetworkContextProvider: FC = ({ children }): JSX const { isConnected } = useAccount(); const { chain: currentChain } = useNetwork(); + const { switchNetworkAsync } = useSwitchNetwork(); const retrievedNetwork = useLoaderData() as INetwork; const [network, setNetwork] = useState(retrievedNetwork); @@ -26,14 +27,14 @@ export const NetworkContextProvider: FC = ({ children }): JSX } try { - await switchNetwork({ chainId: pendingChain.id }); + await switchNetworkAsync?.(pendingChain.id); return true; } catch (error) { console.error(`Error: while switching network: ${pendingChain.name} \n\n`, error); return false; } }, - [isConnected], + [isConnected, switchNetworkAsync], ); const setNetworkHandler = async (params: INetwork) => { diff --git a/explorer/src/utils/index.ts b/explorer/src/utils/index.ts index e117bdaa..a0049275 100644 --- a/explorer/src/utils/index.ts +++ b/explorer/src/utils/index.ts @@ -1,5 +1,8 @@ import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; +import { Chain } from "viem"; + +import { links } from "@/constants"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); @@ -10,3 +13,11 @@ export default cn; export function isNotNullOrUndefined(input: null | undefined | T): input is T { return input !== null && input !== undefined; } + +export function getBlockExplorerLink(chain: Chain) { + if (chain.blockExplorers) { + return `${chain.blockExplorers.default.url}/address`; + } else { + return `${links[chain.id].address}`; + } +}