forked from MystenLabs/sui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[explorer] - checkpoint details page (MystenLabs#8631)
## Description <img width="1438" alt="image" src="https://user-images.githubusercontent.com/122397493/221307336-4055fea3-0a46-4141-8de2-48e295ba0cd1.png"> Adds detail page for viewing details for a specific checkpoint. - adds route `/checkpoint/:digest` - includes feature flag `explorer-epochs-checkpoints`. added this before we paused mainnet release, but left it in since most of the other epochs/checkpoints pages contain mocks - another callout is right now we're doing a batch request to display transactions within a checkpoint, ideally we could query for transactions by a specific checkpoint - adds ability to search by checkpoint digest - created [APPS-543](https://mysten.atlassian.net/browse/APPS-543) as a follow-up to clean-up / enable re-use of the transactions table / logic ## Test Plan manual testing --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process.
- Loading branch information
1 parent
24f6675
commit 623dcbe
Showing
14 changed files
with
751 additions
and
1,966 deletions.
There are no files selected for viewing
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
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
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
163 changes: 163 additions & 0 deletions
163
apps/explorer/src/pages/checkpoints/CheckpointDetail.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,163 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { useFeature, useGrowthBook } from '@growthbook/growthbook-react'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import { Navigate, useParams } from 'react-router-dom'; | ||
|
|
||
| import { CheckpointTransactions } from './Transactions'; | ||
|
|
||
| import { useRpc } from '~/hooks/useRpc'; | ||
| import { Banner } from '~/ui/Banner'; | ||
| import { DescriptionList, DescriptionItem } from '~/ui/DescriptionList'; | ||
| import { LoadingSpinner } from '~/ui/LoadingSpinner'; | ||
| import { PageHeader } from '~/ui/PageHeader'; | ||
| import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '~/ui/Tabs'; | ||
| import { Text } from '~/ui/Text'; | ||
| import { GROWTHBOOK_FEATURES } from '~/utils/growthbook'; | ||
| import { convertNumberToDate } from '~/utils/timeUtils'; | ||
|
|
||
| function CheckpointDetail() { | ||
| const { digest } = useParams<{ digest: string }>(); | ||
| const rpc = useRpc(); | ||
|
|
||
| const checkpointQuery = useQuery(['checkpoints', digest], () => | ||
| rpc.getCheckpoint(digest!) | ||
| ); | ||
|
|
||
| // todo: add user_signatures to combined `getCheckpoint` endpoint | ||
| const contentsQuery = useQuery( | ||
| ['checkpoints', digest, 'contents'], | ||
| () => rpc.getCheckpointContents(checkpoint.sequenceNumber), | ||
| { enabled: !!checkpointQuery.data } | ||
| ); | ||
|
|
||
| if (checkpointQuery.isError) | ||
| return ( | ||
| <Banner variant="error" fullWidth> | ||
| There was an issue retrieving data for checkpoint: {digest} | ||
| </Banner> | ||
| ); | ||
|
|
||
| if (checkpointQuery.isLoading) return <LoadingSpinner />; | ||
|
|
||
| const { | ||
| data: { epochRollingGasCostSummary, ...checkpoint }, | ||
| } = checkpointQuery; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col space-y-12"> | ||
| <PageHeader title={checkpoint.digest} type="Checkpoint" /> | ||
| <div className="space-y-8"> | ||
| <TabGroup as="div" size="lg"> | ||
| <TabList> | ||
| <Tab>Details</Tab> | ||
| <Tab>Signatures</Tab> | ||
| </TabList> | ||
| <TabPanels> | ||
| <TabPanel> | ||
| <DescriptionList> | ||
| <DescriptionItem title="Checkpoint Sequence No."> | ||
| <Text | ||
| variant="p1/medium" | ||
| color="steel-darker" | ||
| > | ||
| {checkpoint.sequenceNumber} | ||
| </Text> | ||
| </DescriptionItem> | ||
| <DescriptionItem title="Epoch"> | ||
| <Text | ||
| variant="p1/medium" | ||
| color="steel-darker" | ||
| > | ||
| {checkpoint.epoch} | ||
| </Text> | ||
| </DescriptionItem> | ||
| <DescriptionItem title="Checkpoint Timestamp"> | ||
| <Text | ||
| variant="p1/medium" | ||
| color="steel-darker" | ||
| > | ||
| {checkpoint.timestampMs | ||
| ? convertNumberToDate( | ||
| checkpoint.timestampMs | ||
| ) | ||
| : '--'} | ||
| </Text> | ||
| </DescriptionItem> | ||
| </DescriptionList> | ||
| </TabPanel> | ||
| <TabPanel> | ||
| <DescriptionList> | ||
| {contentsQuery.data?.user_signatures.map( | ||
| ([signature]) => ( | ||
| <DescriptionItem | ||
| key={signature} | ||
| title="Signature" | ||
| > | ||
| <Text | ||
| variant="p1/medium" | ||
| color="steel-darker" | ||
| > | ||
| {signature} | ||
| </Text> | ||
| </DescriptionItem> | ||
| ) | ||
| )} | ||
| </DescriptionList> | ||
| </TabPanel> | ||
| </TabPanels> | ||
| </TabGroup> | ||
| <TabGroup as="div" size="lg"> | ||
| <TabList> | ||
| <Tab>Gas & Storage Fee</Tab> | ||
| </TabList> | ||
| <TabPanels> | ||
| <DescriptionList> | ||
| <DescriptionItem title="Computation Fee"> | ||
| <Text variant="p1/medium" color="steel-darker"> | ||
| { | ||
| epochRollingGasCostSummary.computation_cost | ||
| } | ||
| </Text> | ||
| </DescriptionItem> | ||
| <DescriptionItem title="Storage Fee"> | ||
| <Text variant="p1/medium" color="steel-darker"> | ||
| {epochRollingGasCostSummary.storage_cost} | ||
| </Text> | ||
| </DescriptionItem> | ||
| <DescriptionItem title="Storage Rebate"> | ||
| <Text variant="p1/medium" color="steel-darker"> | ||
| {epochRollingGasCostSummary.storage_rebate} | ||
| </Text> | ||
| </DescriptionItem> | ||
| </DescriptionList> | ||
| </TabPanels> | ||
| </TabGroup> | ||
|
|
||
| <TabGroup as="div" size="lg"> | ||
| <TabList> | ||
| <Tab>Checkpoint Transactions</Tab> | ||
| </TabList> | ||
| <TabPanels> | ||
| <div className="mt-4"> | ||
| <CheckpointTransactions | ||
| digest={checkpoint.digest} | ||
| transactions={checkpoint.transactions || []} | ||
| /> | ||
| </div> | ||
| </TabPanels> | ||
| </TabGroup> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function CheckpointDetailFeatureFlagged() { | ||
| const gb = useGrowthBook(); | ||
| const enabled = useFeature(GROWTHBOOK_FEATURES.EPOCHS_CHECKPOINTS).on; | ||
| if (gb?.ready) { | ||
| return enabled ? <CheckpointDetail /> : <Navigate to="/" />; | ||
| } | ||
| return <LoadingSpinner />; | ||
| } |
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,37 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { useQuery } from '@tanstack/react-query'; | ||
|
|
||
| import { | ||
| genTableDataFromTxData, | ||
| getDataOnTxDigests, | ||
| type TxnData, | ||
| } from '~/components/transaction-card/TxCardUtils'; | ||
| import { useRpc } from '~/hooks/useRpc'; | ||
| import { TableCard } from '~/ui/TableCard'; | ||
|
|
||
| export function CheckpointTransactions({ | ||
| digest, | ||
| transactions, | ||
| }: { | ||
| digest: string; | ||
| transactions: string[]; | ||
| }) { | ||
| const rpc = useRpc(); | ||
| const { data: txData, isLoading } = useQuery( | ||
| ['checkpoint-transactions', digest], | ||
| async () => { | ||
| // todo: replace this with `sui_getTransactions` call when we are | ||
| // able to query by checkpoint digest | ||
| const txData = await getDataOnTxDigests(rpc, transactions!); | ||
| return genTableDataFromTxData(txData as TxnData[]); | ||
| }, | ||
| { enabled: !!transactions.length } | ||
| ); | ||
| if (isLoading) return null; | ||
|
|
||
| return txData ? ( | ||
| <TableCard data={txData?.data} columns={txData?.columns} /> | ||
| ) : null; | ||
| } |
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
Oops, something went wrong.