Refactor merkle proof page

packages/backend/src/api/controllers/MerkleProofController.ts

@@ -1,4 +1,4 @@
-import { renderStateUpdateMerkleProofPage } from '@explorer/frontend'
+import { renderMerkleProofPage } from '@explorer/frontend'
 import { UserDetails } from '@explorer/shared'
 import { PositionLeaf, VaultLeaf } from '@explorer/state'
 
@@ -21,8 +21,8 @@ export class MerkleProofController {
     const merkleProof = await this.stateUpdater.generateMerkleProof(
       positionOrVaultId
     )
-    const content = renderStateUpdateMerkleProofPage({
-      id: positionOrVaultId.toString(),
+    const content = renderMerkleProofPage({
+      positionOrVaultId,
       user,
       type: this.tradingMode === 'perpetual' ? 'PERPETUAL' : 'SPOT',
       merkleProof: {

packages/frontend/src/preview/data/stateUpdate.ts

@@ -1,11 +1,10 @@
-import { Hash256, PedersenHash, StarkKey } from '@explorer/types'
+import { Hash256, StarkKey } from '@explorer/types'
 
 import {
   StateUpdateBalanceChangeEntry,
   StateUpdatePriceEntry,
   TransactionEntry,
 } from '../../view'
-import { MerkleProofPath } from '../../view/pages/state-update/StateUpdateMerkleProofPage'
 import { Bucket } from './bucket'
 import { amountBucket, assetBucket, changeBucket } from './buckets'
 import { randomId, randomTimestamp } from './utils'
@@ -43,10 +42,3 @@ export function randomStateUpdateTransactionEntry(): TransactionEntry {
     type: transactionTypeBucket.pick(),
   }
 }
-
-export function randomStateUpdateMerkleProofPath(): MerkleProofPath {
-  return {
-    left: PedersenHash.fake(),
-    right: PedersenHash.fake(),
-  }
-}

packages/frontend/src/preview/routes.ts

@@ -35,7 +35,7 @@ import {
 } from '../view'
 import { renderDevPage } from '../view/pages/DevPage'
 import { renderNewSpotForcedWithdrawPage } from '../view/pages/forced-actions/NewSpotForcedWithdrawalPage'
-import { renderStateUpdateMerkleProofPage } from '../view/pages/state-update/StateUpdateMerkleProofPage'
+import { renderMerkleProofPage } from '../view/pages/MerkleProofPage'
 import * as DATA from './data'
 import { amountBucket, assetBucket } from './data/buckets'
 import {
@@ -45,7 +45,6 @@ import {
 } from './data/home'
 import {
   randomStateUpdateBalanceChangeEntry,
-  randomStateUpdateMerkleProofPath,
   randomStateUpdatePriceEntry,
   randomStateUpdateTransactionEntry,
 } from './data/stateUpdate'
@@ -161,7 +160,6 @@ const routes: Route[] = [
   {
     path: '/offers',
     description: 'Offer list accessible from home page. Supports pagination.',
-    breakAfter: true,
     render: (ctx) => {
       const user = getUser(ctx)
       const total = 68
@@ -175,6 +173,33 @@ const routes: Route[] = [
       })
     },
   },
+  {
+    path: '/proof/:positionOrVaultId',
+    link: '/proof/xyz',
+    description:
+      'Merkle proof for a vault or position id made from the latest state update',
+    render: (ctx) => {
+      const user = getUser(ctx)
+      ctx.body = renderMerkleProofPage({
+        user,
+        positionOrVaultId: BigInt(randomId()),
+        type: 'SPOT',
+        merkleProof: {
+          rootHash: PedersenHash.fake(),
+          path: repeat(9, () => ({
+            left: PedersenHash.fake(),
+            right: PedersenHash.fake(),
+          })),
+          leaf: JSON.stringify({
+            starkKey: StarkKey.fake(),
+            balance: 123456789,
+            token: AssetHash.fake(),
+          }),
+        },
+      })
+    },
+    breakAfter: true,
+  },
   // #endregion
   // #region State update
   {
@@ -210,28 +235,6 @@ const routes: Route[] = [
       })
     },
   },
-  {
-    path: '/state-updates/:id/merkle-proof',
-    link: '/state-updates/xyz/merkle-proof',
-    description: 'Merkle proof for a state update.',
-    render: (ctx) => {
-      const user = getUser(ctx)
-      ctx.body = renderStateUpdateMerkleProofPage({
-        user,
-        id: randomId(),
-        type: 'SPOT',
-        merkleProof: {
-          rootHash: PedersenHash.fake(),
-          path: repeat(9, randomStateUpdateMerkleProofPath),
-          leaf: JSON.stringify({
-            starkKey: StarkKey.fake(),
-            balance: 123456789,
-            token: AssetHash.fake(),
-          }),
-        },
-      })
-    },
-  },
   {
     path: '/state-updates/:id/balance-changes',
     link: '/state-updates/xyz/balance-changes',

packages/frontend/src/view/index.ts

@@ -18,11 +18,11 @@ export * from './pages/home/HomeOffersPage'
 export * from './pages/home/HomePage'
 export * from './pages/home/HomeStateUpdatesPage'
 export * from './pages/home/HomeTransactionsPage'
+export * from './pages/MerkleProofPage'
 export * from './pages/NotFoundPage'
 export type { StateUpdateBalanceChangeEntry } from './pages/state-update/components/StateUpdateBalanceChangesTable'
 export type { StateUpdatePriceEntry } from './pages/state-update/components/StateUpdatePricesTable'
 export * from './pages/state-update/StateUpdateBalanceChangesPage'
-export * from './pages/state-update/StateUpdateMerkleProofPage'
 export * from './pages/state-update/StateUpdatePage'
 export * from './pages/state-update/StateUpdateTransactionsPage'
 export * from './pages/transaction/OfferAndForcedTradePage'

packages/frontend/src/view/pages/state-update/StateUpdateMerkleProofPage.tsx → packages/frontend/src/view/pages/MerkleProofPage.tsx

@@ -2,15 +2,15 @@ import { UserDetails } from '@explorer/shared'
 import { PedersenHash } from '@explorer/types'
 import React from 'react'
 
-import { Card } from '../../components/Card'
-import { OrderedList } from '../../components/OrderedList'
-import { ContentWrapper } from '../../components/page/ContentWrapper'
-import { Page } from '../../components/page/Page'
-import { PageTitle } from '../../components/PageTitle'
-import { reactToHtml } from '../../reactToHtml'
+import { Card } from '../components/Card'
+import { OrderedList } from '../components/OrderedList'
+import { ContentWrapper } from '../components/page/ContentWrapper'
+import { Page } from '../components/page/Page'
+import { PageTitle } from '../components/PageTitle'
+import { reactToHtml } from '../reactToHtml'
 
-export interface StateUpdateMerkleProofPageProps {
-  id: string
+export interface MerkleProofPageProps {
+  positionOrVaultId: bigint
   user: UserDetails | undefined
   type: 'PERPETUAL' | 'SPOT'
   merkleProof: MerkleProof
@@ -27,23 +27,23 @@ export interface MerkleProofPath {
   right: PedersenHash
 }
 
-function StateUpdateMerkleProofPage(props: StateUpdateMerkleProofPageProps) {
+function MerkleProofPage(props: MerkleProofPageProps) {
   const idLabel = props.type === 'SPOT' ? 'Vault' : 'Position'
-  const formattedJson = JSON.stringify(
+  const formattedLeaf = JSON.stringify(
     JSON.parse(props.merkleProof.leaf),
     null,
     2
   )
   return (
     <Page
       title="Merkle Proof"
-      description="TODO: description"
-      path="/lol"
+      description="Page showing merkle proof for a vault or position id made from the latest state update"
+      path={`/proof/${props.positionOrVaultId.toString()}`}
       user={props.user}
     >
       <ContentWrapper className="flex flex-col gap-6">
         <PageTitle>
-          Merkle Proof for {idLabel} #{props.id}
+          Merkle Proof for {idLabel} #{props.positionOrVaultId.toString()}
         </PageTitle>
         <div>
           <span className="text-xl font-semibold">Root Hash</span>
@@ -67,16 +67,14 @@ function StateUpdateMerkleProofPage(props: StateUpdateMerkleProofPageProps) {
         <div>
           <span className="text-xl font-semibold">Leaf</span>
           <Card className="mt-2">
-            <pre>{formattedJson}</pre>
+            <pre>{formattedLeaf}</pre>
           </Card>
         </div>
       </ContentWrapper>
     </Page>
   )
 }
 
-export function renderStateUpdateMerkleProofPage(
-  props: StateUpdateMerkleProofPageProps
-) {
-  return reactToHtml(<StateUpdateMerkleProofPage {...props} />)
+export function renderMerkleProofPage(props: MerkleProofPageProps) {
+  return reactToHtml(<MerkleProofPage {...props} />)
 }