From ca30e5d764b7f4bbef6d0b2a7f8e431ebd5052fc Mon Sep 17 00:00:00 2001 From: Taras Oliynyk <49455800+OliynykPro@users.noreply.github.com> Date: Thu, 28 Dec 2023 10:56:07 +0200 Subject: [PATCH] fix: updated UI according to design fixes (#492) Co-authored-by: Taras Oliynyk --- explorer/src/assets/locales/en/en.json | 9 ++++- .../src/assets/networks/arbitrum-dark.svg | 36 +++++++++++++++++++ .../src/assets/networks/arbitrum-goerli.svg | 36 +++++++++++++++++++ explorer/src/assets/networks/arbitrum.svg | 36 +++++++++++++++++++ .../DataTable/components/TdHandler/index.tsx | 3 +- explorer/src/components/DataTable/index.tsx | 25 +++++++++++-- .../src/components/DataTable/interfaces.ts | 1 + .../LightDarkModeSwitcher/index.tsx | 9 ++--- explorer/src/config/index.tsx | 20 ++++++++++- .../src/constants/columns/attestation.tsx | 14 ++++++-- explorer/src/constants/columns/module.tsx | 10 ++++-- explorer/src/constants/columns/schema.tsx | 2 +- explorer/src/constants/index.ts | 15 ++++++-- .../components/AttestationInfo/index.tsx | 13 +++++-- .../components/ListSwitcher/index.tsx | 1 + .../Attestations/components/SWRCell/index.tsx | 2 +- explorer/src/pages/Attestations/index.tsx | 5 +-- .../src/pages/Home/components/Info/index.tsx | 2 +- .../pages/Home/components/Issuers/index.tsx | 11 ++++-- explorer/src/pages/Home/index.tsx | 2 +- explorer/src/pages/Issuer/index.tsx | 2 +- explorer/src/pages/Module/index.tsx | 6 ++-- explorer/src/pages/Modules/index.tsx | 5 +-- explorer/src/pages/MyAttestations/index.tsx | 7 +++- .../Portal/components/PortalModules/index.tsx | 5 +-- .../components/RecentAttestations/index.tsx | 8 +++-- explorer/src/pages/Schemas/index.tsx | 3 +- .../components/SearchAttestations/index.tsx | 3 +- .../Search/components/SearchModules/index.tsx | 3 +- .../Search/components/SearchSchemas/index.tsx | 3 +- website/src/main.tsx | 4 +-- 31 files changed, 256 insertions(+), 45 deletions(-) create mode 100644 explorer/src/assets/networks/arbitrum-dark.svg create mode 100644 explorer/src/assets/networks/arbitrum-goerli.svg create mode 100644 explorer/src/assets/networks/arbitrum.svg diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json index bc5abd8d..47ca882d 100644 --- a/explorer/src/assets/locales/en/en.json +++ b/explorer/src/assets/locales/en/en.json @@ -43,10 +43,17 @@ "search": "Search by ID, name, description" } }, + "theme": { + "switch": "Switch to {{mode}} Mode", + "dark": "Dark", + "light": "Light", + "system": "System" + }, "home": { "title": "Verax is an open source, public registry for storing attestations", "issuers": { - "title": "Explore the Verax Ecosystem" + "title": "Explore the ways of getting the attestation", + "description": "Find out how you can get attestations from the following providers that you can use across the ecosystem" }, "info": { "issueYourAttestation": "Want to issue your own attestation?", diff --git a/explorer/src/assets/networks/arbitrum-dark.svg b/explorer/src/assets/networks/arbitrum-dark.svg new file mode 100644 index 00000000..ae766afc --- /dev/null +++ b/explorer/src/assets/networks/arbitrum-dark.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + diff --git a/explorer/src/assets/networks/arbitrum-goerli.svg b/explorer/src/assets/networks/arbitrum-goerli.svg new file mode 100644 index 00000000..ea09a8cc --- /dev/null +++ b/explorer/src/assets/networks/arbitrum-goerli.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + diff --git a/explorer/src/assets/networks/arbitrum.svg b/explorer/src/assets/networks/arbitrum.svg new file mode 100644 index 00000000..93c9580c --- /dev/null +++ b/explorer/src/assets/networks/arbitrum.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + diff --git a/explorer/src/components/DataTable/components/TdHandler/index.tsx b/explorer/src/components/DataTable/components/TdHandler/index.tsx index 170a76e7..96007062 100644 --- a/explorer/src/components/DataTable/components/TdHandler/index.tsx +++ b/explorer/src/components/DataTable/components/TdHandler/index.tsx @@ -11,6 +11,7 @@ export const TdHandler: React.FC = ({ value, valueUrl, to, isTextLef e.stopPropagation()} className={`hover:underline ${isTextLeft ? "translate-x-0" : "translate-x-5"} ${ isTextLeft ? "group-hover:translate-x-5" : "group-hover:translate-x-0" } transition max-w-[300px] overflow-hidden text-ellipsis`} @@ -26,7 +27,7 @@ export const TdHandler: React.FC = ({ value, valueUrl, to, isTextLef {value}

)} - + e.stopPropagation()}> diff --git a/explorer/src/components/DataTable/index.tsx b/explorer/src/components/DataTable/index.tsx index d086c51d..75fae995 100644 --- a/explorer/src/components/DataTable/index.tsx +++ b/explorer/src/components/DataTable/index.tsx @@ -1,17 +1,37 @@ import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import { Attestation, Module, Schema } from "@verax-attestation-registry/verax-sdk"; import { t } from "i18next"; +import { generatePath, useNavigate } from "react-router-dom"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; +import { useNetworkContext } from "@/providers/network-provider/context"; import { DataTableProps } from "./interfaces"; -export function DataTable({ columns, data }: DataTableProps) { +type TRowOriginal = Schema | Attestation | Module; + +export function DataTable({ columns, data, link }: DataTableProps) { + const navigate = useNavigate(); + + const { + network: { network }, + } = useNetworkContext(); + const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), }); + const trClickHandler = (original: TRowOriginal) => { + const id = original.id; + if (!link || !id) return; + + navigate(generatePath(link, { chainId: network, id }), { + state: { from: location.pathname }, + }); + }; + return (
@@ -36,8 +56,9 @@ export function DataTable({ columns, data }: DataTableProps ( trClickHandler(row.original as TRowOriginal)} data-state={row.getIsSelected() && "selected"} - className="table-row-transition hover:bg-jumbotronLight dark:hover:bg-jumbotronDark" + className="table-row-transition hover:bg-jumbotronLight dark:hover:bg-jumbotronDark cursor-pointer" > {row.getVisibleCells().map((cell) => ( diff --git a/explorer/src/components/DataTable/interfaces.ts b/explorer/src/components/DataTable/interfaces.ts index 8430082d..fa215297 100644 --- a/explorer/src/components/DataTable/interfaces.ts +++ b/explorer/src/components/DataTable/interfaces.ts @@ -3,4 +3,5 @@ import { ColumnDef } from "@tanstack/react-table"; export interface DataTableProps { columns: ColumnDef[]; data: TData[]; + link?: string; } diff --git a/explorer/src/components/LightDarkModeSwitcher/index.tsx b/explorer/src/components/LightDarkModeSwitcher/index.tsx index 836585ea..7de3ea0a 100644 --- a/explorer/src/components/LightDarkModeSwitcher/index.tsx +++ b/explorer/src/components/LightDarkModeSwitcher/index.tsx @@ -1,3 +1,4 @@ +import { t } from "i18next"; import { Moon, Sun, SunMoon } from "lucide-react"; import { useEffect } from "react"; import { useTernaryDarkMode } from "usehooks-ts"; @@ -29,11 +30,11 @@ export const LightDarkModeSwitcher: React.FC = ({ isMobi const getPredictedThemeDetails = (mode: typeof ternaryDarkMode) => { switch (mode) { case "light": - return { label: "System", icon: }; + return { label: t("theme.system"), icon: }; case "system": - return { label: "Dark", icon: }; + return { label: t("theme.dark"), icon: }; case "dark": - return { label: "Light", icon: }; + return { label: t("theme.light"), icon: }; } }; @@ -49,7 +50,7 @@ export const LightDarkModeSwitcher: React.FC = ({ isMobi onClick={toggleTernaryDarkMode} className="flex items-center gap-2 text-base font-semibold text-text-darkGrey cursor-pointer" > - Switch to {label} Mode + {t("theme.switch", { mode: label })} {icon} ); diff --git a/explorer/src/config/index.tsx b/explorer/src/config/index.tsx index c66eb20f..05c541d9 100644 --- a/explorer/src/config/index.tsx +++ b/explorer/src/config/index.tsx @@ -1,8 +1,11 @@ import { VeraxSdk } from "@verax-attestation-registry/verax-sdk"; import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react"; -import { linea, lineaTestnet } from "wagmi/chains"; +import { arbitrum, arbitrumGoerli, linea, lineaTestnet } from "wagmi/chains"; import veraxColoredIcon from "@/assets/logo/verax-colored-icon.svg"; +import ArbitrumIconDark from "@/assets/networks/arbitrum-dark.svg?react"; +import ArbitrumGoerliIcon from "@/assets/networks/arbitrum-goerli.svg?react"; +import ArbitrumIcon from "@/assets/networks/arbitrum.svg?react"; import LineaMainnetIconDark from "@/assets/networks/linea-mainnet-dark.svg?react"; import LineaMainnetIcon from "@/assets/networks/linea-mainnet.svg?react"; import LineaTestnetIcon from "@/assets/networks/linea-testnet.svg?react"; @@ -24,6 +27,21 @@ const chains: INetwork[] = [ img: , network: "linea-testnet", }, + { + name: "Arbitrum", + chain: arbitrum, + veraxEnv: VeraxSdk.DEFAULT_ARBITRUM_FRONTEND, + img: , + imgDark: , + network: "arbitrum", + }, + { + name: "Arbitrum Goerli", + chain: arbitrumGoerli, + veraxEnv: VeraxSdk.DEFAULT_ARBITRUM_TESTNET_FRONTEND, + img: , + network: "arbitrum-goerli", + }, ]; const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID; diff --git a/explorer/src/constants/columns/attestation.tsx b/explorer/src/constants/columns/attestation.tsx index 801d7142..7ade02d0 100644 --- a/explorer/src/constants/columns/attestation.tsx +++ b/explorer/src/constants/columns/attestation.tsx @@ -21,9 +21,10 @@ import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index"; interface ColumnsProps { sortByDate: boolean; sdk: VeraxSdk; + chainId: number; } -export const columns = ({ sortByDate = true, sdk }: Partial = {}): ColumnDef[] => [ +export const columns = ({ sortByDate = true, sdk, chainId }: Partial = {}): ColumnDef[] => [ { accessorKey: "id", header: () => ( @@ -35,7 +36,7 @@ export const columns = ({ sortByDate = true, sdk }: Partial = {}): cell: ({ row }) => { const id = row.getValue("id"); return ( - + e.stopPropagation()}> {displayAmountWithComma(hexToNumber(id as Address))} ); @@ -84,8 +85,15 @@ export const columns = ({ sortByDate = true, sdk }: Partial = {}): header: () =>

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

, cell: ({ row }) => { const subject = row.getValue("subject") as string; + if (!chainId) return cropString(subject); + return ( - + e.stopPropagation()} + target="_blank" + className="hover:underline" + > {cropString(subject)} ); diff --git a/explorer/src/constants/columns/module.tsx b/explorer/src/constants/columns/module.tsx index 1d0da9e7..2f158ed2 100644 --- a/explorer/src/constants/columns/module.tsx +++ b/explorer/src/constants/columns/module.tsx @@ -11,7 +11,11 @@ import { cropString } from "@/utils/stringUtils"; import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index"; -export const columns = (): ColumnDef[] => [ +interface ColumnsProps { + chainId: number; +} + +export const columns = ({ chainId }: Partial = {}): ColumnDef[] => [ { accessorKey: "name", header: () => ( @@ -23,7 +27,7 @@ export const columns = (): ColumnDef[] => [ cell: ({ row }) => { const { name, id } = row.original; return ( - + e.stopPropagation()}> {name} ); @@ -43,7 +47,7 @@ export const columns = (): ColumnDef[] => [ return ( diff --git a/explorer/src/constants/columns/schema.tsx b/explorer/src/constants/columns/schema.tsx index 3a183bdc..c5930bf2 100644 --- a/explorer/src/constants/columns/schema.tsx +++ b/explorer/src/constants/columns/schema.tsx @@ -24,7 +24,7 @@ export const columns = (): ColumnDef[] => [ const id = row.original.id; return ( - + e.stopPropagation()}> {name} ); diff --git a/explorer/src/constants/index.ts b/explorer/src/constants/index.ts index 6c0b72da..70572505 100644 --- a/explorer/src/constants/index.ts +++ b/explorer/src/constants/index.ts @@ -1,3 +1,5 @@ +import { arbitrum, arbitrumGoerli, linea, lineaTestnet } from "wagmi/chains"; + export const EMPTY_STRING = ""; export const SPACE_STRING = " "; export const COMMA_STRING = ","; @@ -10,9 +12,18 @@ export const CURRENT_PAGE_DEFAULT = 1; export const THOUSAND = 1e3; export const BILLION = 1e9; -export const links = { - lineascan: { +export const links: { [key: number]: { trx?: string; address: string } } = { + [linea.id]: { trx: "https://lineascan.build/trx", address: "https://lineascan.build/address", }, + [lineaTestnet.id]: { + address: "https://goerli.lineascan.build/address", + }, + [arbitrum.id]: { + address: "https://arbiscan.io/address", + }, + [arbitrumGoerli.id]: { + address: "https://testnet.arbiscan.io/address", + }, }; diff --git a/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx b/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx index d406955d..0251cf80 100644 --- a/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx +++ b/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx @@ -1,9 +1,11 @@ import { Attestation } from "@verax-attestation-registry/verax-sdk"; import { t } from "i18next"; +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 { displayAmountWithComma } from "@/utils/amountUtils"; import { cropString } from "@/utils/stringUtils"; @@ -11,6 +13,10 @@ import { cropString } from "@/utils/stringUtils"; import { createDateListItem } from "./utils"; export const AttestationInfo: React.FC = ({ ...attestation }) => { + const { + network: { chain }, + } = useNetworkContext(); + const { attestedDate, expirationDate, revocationDate, id, revoked, attester, portal, subject } = attestation; const list: Array<{ title: string; value: string; to?: string; link?: string }> = [ createDateListItem(t("attestation.info.attested"), attestedDate.toString()), @@ -23,7 +29,7 @@ export const AttestationInfo: React.FC = ({ ...attestation }) => { { title: t("attestation.info.issuedBy"), value: cropString(attester), - link: `${links.lineascan.address}/${attester}`, + link: `${links[chain.id].address}/${attester}`, }, { title: t("attestation.info.portal"), @@ -33,7 +39,7 @@ export const AttestationInfo: React.FC = ({ ...attestation }) => { { title: t("attestation.info.subject"), value: cropString(subject), - link: `${links.lineascan.address}/${subject}`, + link: `${links[chain.id].address}/${subject}`, }, ]; @@ -59,9 +65,10 @@ export const AttestationInfo: React.FC = ({ ...attestation }) => { {item.value} + )} diff --git a/explorer/src/pages/Attestations/components/ListSwitcher/index.tsx b/explorer/src/pages/Attestations/components/ListSwitcher/index.tsx index 5fa07b4f..b87c2ac4 100644 --- a/explorer/src/pages/Attestations/components/ListSwitcher/index.tsx +++ b/explorer/src/pages/Attestations/components/ListSwitcher/index.tsx @@ -8,6 +8,7 @@ export const ListSwitcher: React.FC = () => { {options.map((option) => ( `flex items-center h-[2.1875rem] px-3 rounded text-base font-medium ${ diff --git a/explorer/src/pages/Attestations/components/SWRCell/index.tsx b/explorer/src/pages/Attestations/components/SWRCell/index.tsx index d52afa83..c7d799e3 100644 --- a/explorer/src/pages/Attestations/components/SWRCell/index.tsx +++ b/explorer/src/pages/Attestations/components/SWRCell/index.tsx @@ -12,7 +12,7 @@ export const SWRCell: React.FC<{ swrKey: string; fetcher: () => Promise + e.stopPropagation()}> {data?.name || EMPTY_STRING} ); diff --git a/explorer/src/pages/Attestations/index.tsx b/explorer/src/pages/Attestations/index.tsx index 561c5b54..aac0194e 100644 --- a/explorer/src/pages/Attestations/index.tsx +++ b/explorer/src/pages/Attestations/index.tsx @@ -12,6 +12,7 @@ import { EQueryParams } from "@/enums/queryParams"; import { ETableSorting } from "@/enums/tableSorting"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { getItemsByPage, pageBySearchParams } from "@/utils/paginationUtils"; import { TitleAndSwitcher } from "./components/TitleAndSwitcher"; @@ -55,11 +56,11 @@ export const Attestations: React.FC = () => { const data = isLoading ? { columns: columnsSkeletonRef.current, list: skeletonAttestations() } - : { columns: columns({ sdk }), list: attestationsList || [] }; + : { columns: columns({ sdk, chainId: chain.id }), list: attestationsList || [] }; return ( - + {attestationsCount && } ); diff --git a/explorer/src/pages/Home/components/Info/index.tsx b/explorer/src/pages/Home/components/Info/index.tsx index 58f1e321..709408e8 100644 --- a/explorer/src/pages/Home/components/Info/index.tsx +++ b/explorer/src/pages/Home/components/Info/index.tsx @@ -11,7 +11,7 @@ export const Info: React.FC = () => { {infoData.map((info) => (
{info.icon}
{info.title}
diff --git a/explorer/src/pages/Home/components/Issuers/index.tsx b/explorer/src/pages/Home/components/Issuers/index.tsx index b4725d75..f44e4648 100644 --- a/explorer/src/pages/Home/components/Issuers/index.tsx +++ b/explorer/src/pages/Home/components/Issuers/index.tsx @@ -6,9 +6,14 @@ import { Issuer } from "../Issuer"; export const Issuers: React.FC = () => { return (
-

- {t("home.issuers.title")} -

+
+

+ {t("home.issuers.title")} +

+

+ {t("home.issuers.description")} +

+
{issuersData.map((issuer) => ( diff --git a/explorer/src/pages/Home/index.tsx b/explorer/src/pages/Home/index.tsx index edec47f6..4c1739b6 100644 --- a/explorer/src/pages/Home/index.tsx +++ b/explorer/src/pages/Home/index.tsx @@ -4,7 +4,7 @@ import { TitleSearch } from "./components/TitleSearch"; export const Home = () => { return ( -
+
diff --git a/explorer/src/pages/Issuer/index.tsx b/explorer/src/pages/Issuer/index.tsx index eaad93ab..5e9b95e8 100644 --- a/explorer/src/pages/Issuer/index.tsx +++ b/explorer/src/pages/Issuer/index.tsx @@ -21,7 +21,7 @@ export const Issuer: React.FC = () => { } return ( -
+
diff --git a/explorer/src/pages/Module/index.tsx b/explorer/src/pages/Module/index.tsx index 8422d1ce..71382ad3 100644 --- a/explorer/src/pages/Module/index.tsx +++ b/explorer/src/pages/Module/index.tsx @@ -1,3 +1,4 @@ +import { ArrowUpRight } from "lucide-react"; import { useParams } from "react-router-dom"; import useSWR from "swr"; @@ -50,11 +51,12 @@ export const Module = () => { diff --git a/explorer/src/pages/Modules/index.tsx b/explorer/src/pages/Modules/index.tsx index 80fbe613..f153e366 100644 --- a/explorer/src/pages/Modules/index.tsx +++ b/explorer/src/pages/Modules/index.tsx @@ -9,6 +9,7 @@ import { columns, moduleColumnsOption, skeletonModules } from "@/constants/colum import { columnsSkeleton } from "@/constants/columns/skeleton"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { getItemsByPage, pageBySearchParams } from "@/utils/paginationUtils"; export const Modules: React.FC = () => { @@ -38,7 +39,7 @@ export const Modules: React.FC = () => { const columnsSkeletonRef = useRef(columnsSkeleton(columns(), moduleColumnsOption)); const data = isLoading ? { columns: columnsSkeletonRef.current, list: skeletonModules() } - : { columns: columns(), list: modulesList || [] }; + : { columns: columns({ chainId: chain.id }), list: modulesList || [] }; return (
@@ -48,7 +49,7 @@ export const Modules: React.FC = () => {
- + {Boolean(modulesCount) && }
diff --git a/explorer/src/pages/MyAttestations/index.tsx b/explorer/src/pages/MyAttestations/index.tsx index 1ee6513f..5c3c2869 100644 --- a/explorer/src/pages/MyAttestations/index.tsx +++ b/explorer/src/pages/MyAttestations/index.tsx @@ -17,6 +17,7 @@ import { EQueryParams } from "@/enums/queryParams"; import useWindowDimensions from "@/hooks/useWindowDimensions"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { cropString } from "@/utils/stringUtils"; import { TitleAndSwitcher } from "../Attestations/components/TitleAndSwitcher"; @@ -85,7 +86,11 @@ 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 0433d081..d69e5e72 100644 --- a/explorer/src/pages/Portal/components/PortalModules/index.tsx +++ b/explorer/src/pages/Portal/components/PortalModules/index.tsx @@ -8,6 +8,7 @@ import { columns, moduleColumnsOption, skeletonModules } from "@/constants/colum import { columnsSkeleton } from "@/constants/columns/skeleton"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { isNotNullOrUndefined } from "@/utils"; export const PortalModules: React.FC<{ portalModules: Array
}> = ({ portalModules }) => { @@ -28,12 +29,12 @@ 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(), list: modulesList?.slice(-5).reverse() || [] }; + : { columns: columns({ chainId: chain.id }), list: modulesList?.slice(-5).reverse() || [] }; return (

{t("module.title")}

- +
); }; diff --git a/explorer/src/pages/Schema/components/RecentAttestations/index.tsx b/explorer/src/pages/Schema/components/RecentAttestations/index.tsx index 3e5770b9..2c5fcde7 100644 --- a/explorer/src/pages/Schema/components/RecentAttestations/index.tsx +++ b/explorer/src/pages/Schema/components/RecentAttestations/index.tsx @@ -7,6 +7,7 @@ import { attestationColumnsOption, columns, skeletonAttestations } from "@/const import { columnsSkeleton } from "@/constants/columns/skeleton"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; export const RecentAttestations: React.FC<{ schemaId: string }> = ({ schemaId }) => { const { @@ -25,14 +26,17 @@ export const RecentAttestations: React.FC<{ schemaId: string }> = ({ schemaId }) const columnsSkeletonRef = useRef(columnsSkeleton(columns({ sortByDate: false }), attestationColumnsOption)); const data = isLoading ? { columns: columnsSkeletonRef.current, list: skeletonAttestations(5) } - : { columns: columns({ sortByDate: false, sdk }), list: attestations?.slice(-5).reverse() || [] }; + : { + columns: columns({ sortByDate: false, sdk, chainId: chain.id }), + list: attestations?.slice(-5).reverse() || [], + }; return (

{t("attestation.recent")}

- +
); }; diff --git a/explorer/src/pages/Schemas/index.tsx b/explorer/src/pages/Schemas/index.tsx index 10a951f5..3acf1d76 100644 --- a/explorer/src/pages/Schemas/index.tsx +++ b/explorer/src/pages/Schemas/index.tsx @@ -9,6 +9,7 @@ import { columns, schemaColumnsOption, skeletonSchemas } from "@/constants/colum import { columnsSkeleton } from "@/constants/columns/skeleton"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { getItemsByPage, pageBySearchParams } from "@/utils/paginationUtils"; export const Schemas: React.FC = () => { @@ -49,7 +50,7 @@ export const Schemas: React.FC = () => {
- + {Boolean(schemasCount) && }
diff --git a/explorer/src/pages/Search/components/SearchAttestations/index.tsx b/explorer/src/pages/Search/components/SearchAttestations/index.tsx index 642a0b26..81446406 100644 --- a/explorer/src/pages/Search/components/SearchAttestations/index.tsx +++ b/explorer/src/pages/Search/components/SearchAttestations/index.tsx @@ -5,6 +5,7 @@ import { DataTable } from "@/components/DataTable"; import { columns } from "@/constants/columns/attestation"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { loadAttestationList } from "./loadAttestationList"; import { SearchComponentProps } from "../interfaces"; @@ -30,7 +31,7 @@ export const SearchAttestations: React.FC = ({ getSearchDa 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 39913ab7..da258626 100644 --- a/explorer/src/pages/Search/components/SearchModules/index.tsx +++ b/explorer/src/pages/Search/components/SearchModules/index.tsx @@ -5,6 +5,7 @@ import { DataTable } from "@/components/DataTable"; import { columns } from "@/constants/columns/module"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { loadModuleList } from "./loadModuleList"; import { SearchComponentProps } from "../interfaces"; @@ -30,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/SearchSchemas/index.tsx b/explorer/src/pages/Search/components/SearchSchemas/index.tsx index 98f7a589..3334cd69 100644 --- a/explorer/src/pages/Search/components/SearchSchemas/index.tsx +++ b/explorer/src/pages/Search/components/SearchSchemas/index.tsx @@ -5,6 +5,7 @@ import { DataTable } from "@/components/DataTable"; import { columns } from "@/constants/columns/schema"; import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; +import { APP_ROUTES } from "@/routes/constants"; import { loadSchemaList } from "./loadSchemaList"; import { SearchComponentProps } from "../interfaces"; @@ -30,7 +31,7 @@ export const SearchSchemas: React.FC = ({ getSearchData, p if (!data || !data.length) return null; return ( - + ); }; diff --git a/website/src/main.tsx b/website/src/main.tsx index d4c808bf..e68e7409 100644 --- a/website/src/main.tsx +++ b/website/src/main.tsx @@ -4,14 +4,14 @@ import App from "./App.tsx"; import "./index.css"; import { createConfig, WagmiConfig } from "wagmi"; import { ConnectKitProvider, getDefaultConfig } from "connectkit"; -import { linea, lineaTestnet } from "wagmi/chains"; +import { linea, lineaTestnet, arbitrum, arbitrumGoerli } from "wagmi/chains"; const config = createConfig( getDefaultConfig({ infuraId: import.meta.env.VITE_INFURA_API_KEY, walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "", appName: "Verax Website", - chains: [linea, lineaTestnet], + chains: [linea, lineaTestnet, arbitrum, arbitrumGoerli], }), );