-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: contract page mobile friendly (#144)
- Loading branch information
Showing
18 changed files
with
302 additions
and
306 deletions.
There are no files selected for viewing
79 changes: 0 additions & 79 deletions
79
services/explorer-ui/src/components/contracts/class-and-instance-tables.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { FC, useMemo } from "react"; | ||
|
|
||
| interface TableBadgeProps { | ||
| title: string; | ||
| isLoading: boolean; | ||
| error: Error | null; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| export const TableBadge: FC<TableBadgeProps> = ({ | ||
| title, | ||
| isLoading, | ||
| error, | ||
| children, | ||
| }) => { | ||
| const text = useMemo(() => { | ||
| if (isLoading) return "Loading"; | ||
| if (error) return error.message; | ||
| return undefined; | ||
| }, [isLoading, error]); | ||
|
|
||
| return ( | ||
| <div className="bg-white w-full rounded-lg shadow-md p-4 md:w-1/2"> | ||
| <h3>{title}</h3> | ||
| {!text ? children : <p className="text-primary-500">{text}</p>} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
services/explorer-ui/src/pages/contract-class-details/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { useParams } from "@tanstack/react-router"; | ||
| import { type FC } from "react"; | ||
| import { KeyValueDisplay } from "~/components/info-display/key-value-display"; | ||
| import { useContractClasses, useContractInstance } from "~/hooks"; | ||
| import { API_URL, aztecExplorer } from "~/service/constants"; | ||
| import { getContractData } from "./util"; | ||
| import { ContractInstancesTable } from "~/components/contracts/instances/table"; | ||
| import { mapContractClasses, mapContractInstances } from "../contract/util"; | ||
| import { TableBadge } from "~/components/table-badge"; | ||
| import { ContractClassesTable } from "~/components/contracts/classes/table"; | ||
|
|
||
| export const ContractClassDetails: FC = () => { | ||
| const { id } = useParams({ | ||
| from: "/contracts/classes/$id", | ||
| }); | ||
| const { | ||
| data: classesData, | ||
| isLoading: isLoadingClasses, | ||
| error: errorClasses, | ||
| } = useContractClasses(id); | ||
| const { | ||
| data: instancesData, | ||
| isLoading: isLoadingInstances, | ||
| error: errorInstances, | ||
| } = useContractInstance(id); | ||
|
|
||
| if (!id) return <div>No classId</div>; | ||
|
|
||
| const apiEndpointUrl = `${API_URL}/${aztecExplorer.getL2ContractClasses(id)}`; | ||
|
|
||
| return ( | ||
| <div className="mx-auto px-[70px] max-w-[1440px]"> | ||
| <div className="flex flex-col gap-4 mt-8"> | ||
| <div> | ||
| <div> | ||
| <h2>Contract class details</h2> | ||
| <a href={apiEndpointUrl} target="_blank" rel="noreferrer"> | ||
| (API Endpoint) | ||
| </a> | ||
| </div> | ||
| <div className="flex flex-col gap-4 mt-8"> | ||
| <div className="bg-white rounded-lg shadow-md p-4"> | ||
| <KeyValueDisplay | ||
| data={classesData ? getContractData(classesData[0]) : []} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col gap-4 md:flex-row "> | ||
| <TableBadge | ||
| title="Total Contract Instances" | ||
| isLoading={isLoadingClasses} | ||
| error={errorClasses} | ||
| > | ||
| {classesData && ( | ||
| <ContractClassesTable | ||
| contracts={mapContractClasses(classesData)} | ||
| /> | ||
| )} | ||
| </TableBadge> | ||
|
|
||
| <TableBadge | ||
| title="Total Contract Instances" | ||
| isLoading={isLoadingInstances} | ||
| error={errorInstances} | ||
| > | ||
| {instancesData && ( | ||
| <ContractInstancesTable | ||
| contracts={mapContractInstances([instancesData])} | ||
| /> | ||
| )} | ||
| </TableBadge> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { FC } from "react"; | ||
| import { InfoBadge } from "~/components/info-badge"; | ||
| import { useLatestContractClasses, useLatestContractInstances } from "~/hooks"; | ||
| import { useTotalContracts, useTotalContractsLast24h } from "~/hooks/stats"; | ||
| import { mapContractClasses, mapContractInstances } from "./util"; | ||
| import { ContractInstancesTable } from "~/components/contracts/instances/table"; | ||
| import { ContractClassesTable } from "~/components/contracts/classes/table"; | ||
| import { TableBadge } from "~/components/table-badge"; | ||
|
|
||
| export const Contracts: FC = () => { | ||
| const { | ||
| data: classesData, | ||
| isLoading: isLoadingClasses, | ||
| error: errorClasses, | ||
| } = useLatestContractClasses(); | ||
| const { | ||
| data: instancesData, | ||
| isLoading: isLoadingInstances, | ||
| error: errorInstances, | ||
| } = useLatestContractInstances(); | ||
| const { | ||
| data: totalAmountOfContracts, | ||
| isLoading: loadingAmountContracts, | ||
| error: errorAmountContracts, | ||
| } = useTotalContracts(); | ||
| const { | ||
| data: totalAmountOfContracts24h, | ||
| isLoading: loadingAmountContracts24h, | ||
| error: errorAmountContracts24h, | ||
| } = useTotalContractsLast24h(); | ||
|
|
||
| return ( | ||
| <div className="mx-auto px-7 max-w-[1440px] md:px-[70px]"> | ||
| <div className="flex flex-wrap justify-center gap-3 m-5 "> | ||
| <h2 className="mt-2 text-primary md:hidden">All contracts</h2> | ||
| <h1 className="hidden md:block md:mt-16">All contracts</h1> | ||
| </div> | ||
| <div className="flex flex-row justify-center gap-4 m-8"> | ||
| <InfoBadge | ||
| title="Total Contract Classes" | ||
| isLoading={loadingAmountContracts} | ||
| error={errorAmountContracts} | ||
| data={totalAmountOfContracts} | ||
| /> | ||
| <InfoBadge | ||
| title="Total Contract Classes last 24h" | ||
| isLoading={loadingAmountContracts24h} | ||
| error={errorAmountContracts24h} | ||
| data={totalAmountOfContracts24h} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-4 md:flex-row "> | ||
| <TableBadge | ||
| title="Total Contract Instances" | ||
| isLoading={isLoadingClasses} | ||
| error={errorClasses} | ||
| > | ||
| {classesData && ( | ||
| <ContractClassesTable contracts={mapContractClasses(classesData)} /> | ||
| )} | ||
| </TableBadge> | ||
|
|
||
| <TableBadge | ||
| title="Total Contract Instances" | ||
| isLoading={isLoadingInstances} | ||
| error={errorInstances} | ||
| > | ||
| {instancesData && ( | ||
| <ContractInstancesTable | ||
| contracts={mapContractInstances(instancesData)} | ||
| /> | ||
| )} | ||
| </TableBadge> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { | ||
| ChicmozL2ContractClassRegisteredEvent, | ||
| ChicmozL2ContractInstanceDeluxe, | ||
| } from "@chicmoz-pkg/types"; | ||
| import { contractClassSchema } from "~/components/contracts/classes/schema"; | ||
| import { contractInstanceSchema } from "~/components/contracts/instances/schema"; | ||
|
|
||
| export const mapContractClasses = ( | ||
| classesData: ChicmozL2ContractClassRegisteredEvent[], | ||
| ) => { | ||
| return classesData.map((contractClass) => | ||
| contractClassSchema.parse({ | ||
| blockHash: contractClass.blockHash, | ||
| contractClassId: contractClass.contractClassId, | ||
| version: contractClass.version, | ||
| artifactHash: contractClass.artifactHash, | ||
| privateFunctionsRoot: contractClass.privateFunctionsRoot, | ||
| }), | ||
| ); | ||
| }; | ||
|
|
||
| export const mapContractInstances = ( | ||
| instancesData: ChicmozL2ContractInstanceDeluxe[], | ||
| ) => { | ||
| return instancesData.map((contractInstance) => | ||
| contractInstanceSchema.parse({ | ||
| address: contractInstance.address, | ||
| blockHash: contractInstance.blockHash, | ||
| blockHeight: contractInstance.blockHeight, | ||
| version: contractInstance.version, | ||
| contractClassId: contractInstance.contractClassId, | ||
| publicKeysHash: contractInstance.publicKeysHash, | ||
| deployer: contractInstance.deployer, | ||
| }), | ||
| ); | ||
| }; |
Oops, something went wrong.