Hide trade offers for spot trading mode (#336)

* hide trade offers on spot unify trading mode * refactor type to tradingMode * use TradingMode type on backend * add typecheck for StarkexConfig tradingMode
l2beat · Mar 8, 2023 · 710dcf2 · 710dcf2
1 parent 2c8fa86
commit 710dcf2
Show file tree

Hide file tree

Showing 24 changed files with 98 additions and 85 deletions.
diff --git a/packages/backend/src/Application.ts b/packages/backend/src/Application.ts
@@ -444,6 +444,7 @@ export class Application {
       userService,
       userTransactionRepository,
       preprocessedStateDetailsRepository,
+      config.starkex.tradingMode,
       config.starkex.tradingMode === 'perpetual'
         ? config.starkex.collateralAsset
         : undefined

diff --git a/packages/backend/src/api/controllers/HomeController.ts b/packages/backend/src/api/controllers/HomeController.ts
@@ -3,7 +3,7 @@ import {
   renderHomeStateUpdatesPage,
   renderHomeTransactionsPage,
 } from '@explorer/frontend'
-import { UserDetails } from '@explorer/shared'
+import { TradingMode, UserDetails } from '@explorer/shared'
 
 import { CollateralAsset } from '../../config/starkex/StarkexConfig'
 import { UserService } from '../../core/UserService'
@@ -25,6 +25,7 @@ export class HomeController {
     private readonly userService: UserService,
     private readonly userTransactionRepository: UserTransactionRepository,
     private readonly preprocessedStateDetailsRepository: PreprocessedStateDetailsRepository,
+    private readonly tradingMode: TradingMode,
     private readonly collateralAsset?: CollateralAsset
   ) {}
 
@@ -71,6 +72,7 @@ export class HomeController {
       totalForcedTransactions: forcedUserTransactionsCount,
       offers: [],
       totalOffers: 0,
+      tradingMode: this.tradingMode,
     })
     return { type: 'success', content }
   }

diff --git a/packages/backend/src/api/controllers/MerkleProofController.ts b/packages/backend/src/api/controllers/MerkleProofController.ts
@@ -1,5 +1,5 @@
 import { renderMerkleProofPage } from '@explorer/frontend'
-import { UserDetails } from '@explorer/shared'
+import { TradingMode, UserDetails } from '@explorer/shared'
 import { PositionLeaf, VaultLeaf } from '@explorer/state'
 
 import { StateUpdater } from '../../core/StateUpdater'
@@ -10,7 +10,7 @@ export class MerkleProofController {
   constructor(
     private readonly userService: UserService,
     private readonly stateUpdater: StateUpdater<PositionLeaf | VaultLeaf>,
-    private readonly tradingMode: 'perpetual' | 'spot'
+    private readonly tradingMode: TradingMode
   ) {}
 
   async getMerkleProofPage(
@@ -24,7 +24,7 @@ export class MerkleProofController {
     const content = renderMerkleProofPage({
       positionOrVaultId,
       user,
-      type: this.tradingMode === 'perpetual' ? 'PERPETUAL' : 'SPOT',
+      tradingMode: this.tradingMode,
       merkleProof: {
         rootHash: merkleProof.root,
         path: merkleProof.path,

diff --git a/packages/backend/src/api/controllers/StateUpdateController.ts b/packages/backend/src/api/controllers/StateUpdateController.ts
@@ -3,7 +3,7 @@ import {
   renderStateUpdatePage,
   renderStateUpdateTransactionsPage,
 } from '@explorer/frontend'
-import { UserDetails } from '@explorer/shared'
+import { TradingMode, UserDetails } from '@explorer/shared'
 import { AssetHash, AssetId } from '@explorer/types'
 
 import { CollateralAsset } from '../../config/starkex/StarkexConfig'
@@ -34,7 +34,7 @@ export class StateUpdateController {
     private readonly preprocessedAssetHistoryRepository: PreprocessedAssetHistoryRepository<
       AssetHash | AssetId
     >,
-    private readonly tradingMode: 'perpetual' | 'spot',
+    private readonly tradingMode: TradingMode,
     private readonly collateralAsset?: CollateralAsset
   ) {}
 
@@ -89,7 +89,7 @@ export class StateUpdateController {
 
     const content = renderStateUpdatePage({
       user,
-      type: this.tradingMode === 'perpetual' ? 'PERPETUAL' : 'SPOT',
+      tradingMode: this.tradingMode,
       id: stateUpdateId.toString(),
       hashes: {
         factHash: stateUpdate.stateTransitionHash,
@@ -134,7 +134,7 @@ export class StateUpdateController {
 
     const content = renderStateUpdateBalanceChangesPage({
       user,
-      type: this.tradingMode === 'perpetual' ? 'PERPETUAL' : 'SPOT',
+      tradingMode: this.tradingMode,
       id: stateUpdateId.toString(),
       balanceChanges: balanceChangeEntries,
       ...pagination,

diff --git a/packages/backend/src/api/controllers/UserController.ts b/packages/backend/src/api/controllers/UserController.ts
@@ -7,7 +7,7 @@ import {
   UserAssetEntry,
 } from '@explorer/frontend'
 import { UserBalanceChangeEntry } from '@explorer/frontend/src/view/pages/user/components/UserBalanceChangesTable'
-import { AssetDetails, UserDetails } from '@explorer/shared'
+import { AssetDetails, TradingMode, UserDetails } from '@explorer/shared'
 import { AssetHash, AssetId, EthereumAddress, StarkKey } from '@explorer/types'
 
 import { CollateralAsset } from '../../config/starkex/StarkexConfig'
@@ -43,7 +43,7 @@ export class UserController {
     private readonly userTransactionRepository: UserTransactionRepository,
     private readonly userRegistrationEventRepository: UserRegistrationEventRepository,
     private readonly assetRepository: AssetRepository,
-    private readonly tradingMode: 'perpetual' | 'spot',
+    private readonly tradingMode: TradingMode,
     private readonly collateralAsset?: CollateralAsset
   ) {}
 
@@ -119,7 +119,7 @@ export class UserController {
 
     const content = renderUserPage({
       user,
-      type: this.tradingMode === 'perpetual' ? 'PERPETUAL' : 'SPOT',
+      tradingMode: this.tradingMode,
       starkKey,
       ethereumAddress: registeredUser?.ethAddress ?? EthereumAddress.ZERO,
       withdrawableAssets: [],
@@ -173,7 +173,7 @@ export class UserController {
 
     const content = renderUserAssetsPage({
       user,
-      type: this.tradingMode === 'perpetual' ? 'PERPETUAL' : 'SPOT',
+      tradingMode: this.tradingMode,
       starkKey,
       assets,
       ...pagination,
@@ -209,7 +209,7 @@ export class UserController {
 
     const content = renderUserBalanceChangesPage({
       user,
-      type: this.tradingMode === 'perpetual' ? 'PERPETUAL' : 'SPOT',
+      tradingMode: this.tradingMode,
       starkKey,
       balanceChanges,
       ...pagination,
@@ -270,7 +270,7 @@ export class UserController {
 
 function toUserAssetEntry(
   asset: PreprocessedAssetHistoryRecord<AssetHash | AssetId>,
-  tradingMode: 'perpetual' | 'spot',
+  tradingMode: TradingMode,
   collateralAssetId?: AssetId,
   assetDetailsMap?: Record<string, AssetDetails>
 ): UserAssetEntry {

diff --git a/packages/backend/src/config/starkex/StarkexConfig.ts b/packages/backend/src/config/starkex/StarkexConfig.ts
@@ -1,9 +1,16 @@
+import { TradingMode } from '@explorer/shared'
 import { AssetId, EthereumAddress } from '@explorer/types'
 
-export type StarkexConfig =
-  | PerpetualRollupConfig
-  | PerpetualValidiumConfig
-  | SpotValidiumConfig
+type CheckTradingMode<T extends { tradingMode: TradingMode }> = Exclude<
+  T['tradingMode'],
+  TradingMode
+> extends never
+  ? T
+  : never
+
+export type StarkexConfig = CheckTradingMode<
+  PerpetualRollupConfig | PerpetualValidiumConfig | SpotValidiumConfig
+>
 
 export interface PerpetualRollupConfig {
   dataAvailabilityMode: 'rollup'

diff --git a/packages/frontend/src/preview/routes.ts b/packages/frontend/src/preview/routes.ts
@@ -103,6 +103,7 @@ const routes: Route[] = [
         totalForcedTransactions: 68,
         offers: repeat(6, randomHomeOfferEntry),
         totalOffers: 7,
+        tradingMode: 'perpetual',
       })
     },
   },
@@ -120,6 +121,7 @@ const routes: Route[] = [
         totalForcedTransactions: 68,
         offers: repeat(6, randomHomeOfferEntry),
         totalOffers: 7,
+        tradingMode: 'perpetual',
       })
     },
   },
@@ -183,7 +185,7 @@ const routes: Route[] = [
       ctx.body = renderMerkleProofPage({
         user,
         positionOrVaultId: BigInt(randomId()),
-        type: 'SPOT',
+        tradingMode: 'spot',
         merkleProof: {
           rootHash: PedersenHash.fake(),
           path: repeat(9, () => ({
@@ -211,7 +213,7 @@ const routes: Route[] = [
       const user = getUser(ctx)
       ctx.body = renderStateUpdatePage({
         user,
-        type: 'PERPETUAL',
+        tradingMode: 'perpetual',
         id: randomId(),
         hashes: {
           factHash: Hash256.fake(),
@@ -246,7 +248,7 @@ const routes: Route[] = [
       const { limit, offset, visible } = getPagination(ctx, total)
       ctx.body = renderStateUpdateBalanceChangesPage({
         user,
-        type: 'PERPETUAL',
+        tradingMode: 'perpetual',
         id: '1534',
         balanceChanges: repeat(visible, randomStateUpdateBalanceChangeEntry),
         limit,
@@ -285,7 +287,7 @@ const routes: Route[] = [
       const user = getUser(ctx)
       ctx.body = renderUserPage({
         user,
-        type: 'PERPETUAL',
+        tradingMode: 'perpetual',
         starkKey: StarkKey.fake(),
         ethereumAddress: EthereumAddress.fake(),
         withdrawableAssets: repeat(3, randomWithdrawableAssetEntry),
@@ -319,7 +321,7 @@ const routes: Route[] = [
       const user = getUser(ctx)
       ctx.body = renderUserPage({
         user,
-        type: 'PERPETUAL',
+        tradingMode: 'perpetual',
         starkKey: user?.starkKey ?? StarkKey.fake(),
         ethereumAddress: EthereumAddress.fake(),
         withdrawableAssets: repeat(3, randomWithdrawableAssetEntry),
@@ -348,7 +350,7 @@ const routes: Route[] = [
       const { limit, offset, visible } = getPagination(ctx, total)
       ctx.body = renderUserAssetsPage({
         user,
-        type: 'PERPETUAL',
+        tradingMode: 'perpetual',
         starkKey: StarkKey.fake(),
         assets: repeat(visible, randomUserAssetEntry),
         limit,
@@ -368,7 +370,7 @@ const routes: Route[] = [
       const { limit, offset, visible } = getPagination(ctx, total)
       ctx.body = renderUserAssetsPage({
         user,
-        type: 'PERPETUAL',
+        tradingMode: 'perpetual',
         starkKey: StarkKey.fake(),
         assets: repeat(visible, randomUserAssetEntry),
         limit,
@@ -388,7 +390,7 @@ const routes: Route[] = [
       const { limit, offset, visible } = getPagination(ctx, total)
       ctx.body = renderUserBalanceChangesPage({
         user,
-        type: 'PERPETUAL',
+        tradingMode: 'perpetual',
         starkKey: StarkKey.fake(),
         balanceChanges: repeat(visible, randomUserBalanceChangeEntry),
         limit,

diff --git a/packages/frontend/src/view/components/tables/OffersTable.tsx b/packages/frontend/src/view/components/tables/OffersTable.tsx
@@ -30,43 +30,37 @@ export interface OfferEntry {
 }
 
 export function OffersTable(props: OffersTableProps) {
-  const columns: Column[] = []
-  columns.push(
+  const columns: Column[] = [
     { header: 'Time' },
     { header: 'Id' },
     { header: 'Asset' },
     { header: 'Amount', numeric: true },
     { header: 'Price', numeric: true },
-    { header: 'Total price', numeric: true }
-  )
-  if (!props.hideStatus) {
-    columns.push({ header: 'Status' })
-  }
-  columns.push({ header: 'Type' })
+    { header: 'Total price', numeric: true },
+    ...(!props.hideStatus ? [{ header: 'Status' }] : []),
+    { header: 'Type' },
+  ]
 
   return (
     <Table
       columns={columns}
       rows={props.offers.map((offer) => {
-        const cells: ReactNode[] = []
-        cells.push(
+        const cells: ReactNode[] = [
           <TimeCell timestamp={offer.timestamp} />,
           <Link>#{offer.id}</Link>,
           <AssetWithLogo type="small" assetInfo={assetToInfo(offer.asset)} />,
           formatAmount(offer.asset, offer.amount),
           formatWithDecimals(offer.price, 6, { prefix: '$' }),
-          formatWithDecimals(offer.totalPrice, 6, { prefix: '$' })
-        )
-        if (!props.hideStatus) {
-          cells.push(
-            <StatusBadge type={toStatusType(offer.status)}>
-              {toStatusText(offer.status)}
-            </StatusBadge>
-          )
-        }
-        cells.push(
-          <span className="capitalize">{offer.type.toLowerCase()}</span>
-        )
+          formatWithDecimals(offer.totalPrice, 6, { prefix: '$' }),
+          ...(!props.hideStatus
+            ? [
+                <StatusBadge type={toStatusType(offer.status)}>
+                  {toStatusText(offer.status)}
+                </StatusBadge>,
+              ]
+            : []),
+          <span className="capitalize">{offer.type.toLowerCase()}</span>,
+        ]
 
         return {
           link: `/offers/${offer.id}`,

diff --git a/packages/frontend/src/view/pages/MerkleProofPage.tsx b/packages/frontend/src/view/pages/MerkleProofPage.tsx
@@ -1,4 +1,4 @@
-import { UserDetails } from '@explorer/shared'
+import { TradingMode, UserDetails } from '@explorer/shared'
 import { PedersenHash } from '@explorer/types'
 import React from 'react'
 
@@ -12,7 +12,7 @@ import { reactToHtml } from '../reactToHtml'
 export interface MerkleProofPageProps {
   positionOrVaultId: bigint
   user: UserDetails | undefined
-  type: 'PERPETUAL' | 'SPOT'
+  tradingMode: TradingMode
   merkleProof: MerkleProof
 }
 
@@ -28,7 +28,7 @@ export interface MerkleProofPath {
 }
 
 function MerkleProofPage(props: MerkleProofPageProps) {
-  const idLabel = props.type === 'SPOT' ? 'Vault' : 'Position'
+  const idLabel = props.tradingMode === 'perpetual' ? 'Position' : 'Vault'
   const formattedLeaf = JSON.stringify(
     JSON.parse(props.merkleProof.leaf),
     null,

diff --git a/packages/frontend/src/view/pages/home/HomePage.tsx b/packages/frontend/src/view/pages/home/HomePage.tsx
@@ -1,4 +1,4 @@
-import { UserDetails } from '@explorer/shared'
+import { TradingMode, UserDetails } from '@explorer/shared'
 import cx from 'classnames'
 import React from 'react'
 
@@ -36,6 +36,7 @@ export interface HomePageProps {
   totalForcedTransactions: number
   offers?: OfferEntry[]
   totalOffers: number
+  tradingMode: TradingMode
 }
 
 export function renderHomePage(props: HomePageProps) {
@@ -75,7 +76,7 @@ function HomePage(props: HomePageProps) {
           >
             <TransactionsTable transactions={props.transactions} />
           </TablePreview>
-          {props.offers && (
+          {props.offers && props.tradingMode === 'perpetual' && (
             <TablePreview
               {...OFFER_TABLE_PROPS}
               visible={props.offers.length}

diff --git a/packages/frontend/src/view/pages/state-update/StateUpdateBalanceChangesPage.tsx b/packages/frontend/src/view/pages/state-update/StateUpdateBalanceChangesPage.tsx
@@ -1,4 +1,4 @@
-import { UserDetails } from '@explorer/shared'
+import { TradingMode, UserDetails } from '@explorer/shared'
 import React from 'react'
 
 import { ContentWrapper } from '../../components/page/ContentWrapper'
@@ -15,7 +15,7 @@ import { StateUpdatePageTitle } from './components/StateUpdatePageTitle'
 export interface StateUpdateBalanceChangesPageProps {
   user: UserDetails | undefined
   id: string
-  type: 'SPOT' | 'PERPETUAL'
+  tradingMode: TradingMode
   balanceChanges: StateUpdateBalanceChangeEntry[]
   limit: number
   offset: number
@@ -46,7 +46,7 @@ function StateUpdateBalanceChangesPage(
           total={props.total}
         >
           <StateUpdateBalanceChangesTable
-            type={props.type}
+            tradingMode={props.tradingMode}
             balanceChanges={props.balanceChanges}
           />
         </TableWithPagination>