Improve price tables

.eslintrc.json

@@ -38,7 +38,19 @@
     "no-only-tests/no-only-tests": "error",
     "no-restricted-imports": [
       "error",
-      { "paths": [".", "..", "../..", "../../.."], "patterns": ["**/old/**"] }
+      {
+        "paths": [
+          ".",
+          "..",
+          "../..",
+          "../../..",
+          {
+            "name": "lodash",
+            "message": "Import [module] from lodash/[module] instead"
+          }
+        ],
+        "patterns": ["**/old/**"]
+      }
     ],
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",

packages/backend/src/core/AssetDetailsService.ts

@@ -1,6 +1,6 @@
 import { assertUnreachable, TradingMode } from '@explorer/shared'
 import { AssetHash } from '@explorer/types'
-import { uniqBy } from 'lodash'
+import uniqBy from 'lodash/uniqBy'
 
 import { AssetRepository } from '../peripherals/database/AssetRepository'
 import { PreprocessedAssetHistoryRecord } from '../peripherals/database/PreprocessedAssetHistoryRepository'

packages/backend/src/core/collectors/UserTransactionCollector.test.ts

@@ -9,6 +9,7 @@ import {
 } from '@explorer/types'
 import { expect, mockObject } from 'earl'
 import { BigNumber, providers } from 'ethers'
+import range from 'lodash/range'
 
 import { BlockRange } from '../../model'
 import {
@@ -482,7 +483,7 @@ describe(UserTransactionCollector.name, () => {
   it('can process multiple events', async () => {
     const ethereumClient = mockObject<EthereumClient>({
       async getLogsInRange() {
-        return Array.from({ length: 3 }).map((_, i) => {
+        return range(3).map((i) => {
           const log = LogForcedWithdrawalRequest.encodeLog([
             BigNumber.from(i),
             BigNumber.from(i),

packages/backend/src/core/collectors/VerifierCollector.ts

@@ -1,6 +1,6 @@
 import { EthereumAddress } from '@explorer/types'
 import { AbiCoder } from 'ethers/lib/utils'
-import { partition } from 'lodash'
+import partition from 'lodash/partition'
 
 import { BlockRange } from '../../model/BlockRange'
 import {

packages/backend/src/model/BlockRange.ts

@@ -1,6 +1,6 @@
 import { Hash256 } from '@explorer/types'
 import assert from 'assert'
-import { partition } from 'lodash'
+import partition from 'lodash/partition'
 
 import { BlockNumber } from '../peripherals/ethereum/types'
 

packages/backend/src/peripherals/database/BlockRepository.test.ts

@@ -1,6 +1,6 @@
 import { Hash256 } from '@explorer/types'
 import { expect } from 'earl'
-import { range } from 'lodash'
+import range from 'lodash/range'
 
 import { setupDatabaseTestSuite } from '../../test/database'
 import { Logger } from '../../tools/Logger'
@@ -54,7 +54,7 @@ describe(BlockRepository.name, () => {
   })
 
   it('deletes all records after a block number', async () => {
-    const records: BlockRecord[] = Array.from({ length: 10 }).map((_, i) => ({
+    const records: BlockRecord[] = range(10).map((_, i) => ({
       hash: Hash256.fake(),
       number: i,
     }))

packages/backend/src/peripherals/database/MerkleTreeRepository.ts

@@ -5,7 +5,7 @@ import {
   NodeOrLeaf,
 } from '@explorer/state'
 import { json, PedersenHash } from '@explorer/types'
-import { partition } from 'lodash'
+import partition from 'lodash/partition'
 
 import { Logger } from '../../tools/Logger'
 import { BaseRepository } from './shared/BaseRepository'

packages/backend/src/peripherals/database/PageMappingRepository.test.ts

@@ -1,5 +1,6 @@
 import { Hash256 } from '@explorer/types'
 import { expect } from 'earl'
+import range from 'lodash/range'
 
 import { setupDatabaseTestSuite } from '../../test/database'
 import { Logger } from '../../tools/Logger'
@@ -65,7 +66,7 @@ describe(PageMappingRepository.name, () => {
   })
 
   it('deletes all records after a block number', async () => {
-    const records = Array.from({ length: 10 }).map((_, i) =>
+    const records = range(10).map((_, i) =>
       dummyPageMappingRecord({ blockNumber: i })
     )
     await repository.addMany(records)

packages/backend/src/peripherals/database/PageRepository.test.ts

@@ -1,5 +1,6 @@
 import { Hash256 } from '@explorer/types'
 import { expect } from 'earl'
+import range from 'lodash/range'
 
 import { setupDatabaseTestSuite } from '../../test/database'
 import { Logger } from '../../tools/Logger'
@@ -53,7 +54,7 @@ describe(PageRepository.name, () => {
   })
 
   it('deletes all records after a block number', async () => {
-    const records = Array.from({ length: 10 }).map((_, i) => dummyPage(i))
+    const records = range(10).map((i) => dummyPage(i))
     await repository.addMany(records)
 
     await repository.deleteAfter(5)

packages/backend/src/peripherals/database/StateUpdateRepository.test.ts

@@ -6,6 +6,7 @@ import {
   Timestamp,
 } from '@explorer/types'
 import { expect } from 'earl'
+import range from 'lodash/range'
 
 import { setupDatabaseTestSuite } from '../../test/database'
 import { fakeInt, fakeTimestamp, fakeWithdrawal } from '../../test/fakes'
@@ -347,7 +348,7 @@ describe(StateUpdateRepository.name, () => {
           stateTransitionHash: Hash256.fake(),
           timestamp: Timestamp(blockNumber),
         },
-        positions: Array.from({ length: blockNumber - 20_000 }).map((_, i) => ({
+        positions: range(blockNumber - 20_000).map((_, i) => ({
           starkKey: StarkKey.fake(),
           positionId: BigInt(blockNumber * 10 + i),
           collateralBalance: 0n,
@@ -449,14 +450,12 @@ describe(StateUpdateRepository.name, () => {
             stateTransitionHash: Hash256.fake(),
             timestamp: Timestamp(blockNumber),
           },
-          positions: Array.from({ length: blockNumber - 20_000 }).map(
-            (_, i) => ({
-              starkKey: StarkKey.fake(),
-              positionId: BigInt(blockNumber * 10 + i),
-              collateralBalance: 0n,
-              balances: [],
-            })
-          ),
+          positions: range(blockNumber - 20_000).map((i) => ({
+            starkKey: StarkKey.fake(),
+            positionId: BigInt(blockNumber * 10 + i),
+            collateralBalance: 0n,
+            balances: [],
+          })),
           prices: [],
           transactionHashes: [],
         })
@@ -522,7 +521,7 @@ describe(StateUpdateRepository.name, () => {
         stateTransitionHash,
         timestamp,
       },
-      positions: Array.from({ length: 4 }).map((_, i) => ({
+      positions: range(4).map((i) => ({
         starkKey: StarkKey.fake(`${blockNumber}${i}`),
         positionId: BigInt(blockNumber * 10 + i),
         collateralBalance: collateralBalance,
@@ -539,7 +538,7 @@ describe(StateUpdateRepository.name, () => {
       blockNumber,
       rootHash,
       timestamp,
-      positions: Array.from({ length: 4 }).map((_, i) =>
+      positions: range(4).map((i) =>
         expect.subset({
           starkKey: StarkKey.fake(`${blockNumber}${i}`),
           positionId: BigInt(blockNumber * 10 + i),
@@ -561,7 +560,7 @@ describe(StateUpdateRepository.name, () => {
           stateTransitionHash: Hash256.fake(),
           timestamp: Timestamp(blockNumber),
         },
-        positions: Array.from({ length: blockNumber - 40_000 }).map((_, i) => ({
+        positions: range(blockNumber - 40_000).map((_, i) => ({
           starkKey: StarkKey.fake(),
           positionId: BigInt(blockNumber * 10 + i),
           collateralBalance: 0n,

packages/backend/src/peripherals/ethereum/EthereumClient.test.ts

@@ -1,6 +1,7 @@
 import { EthereumAddress, Hash256 } from '@explorer/types'
 import { expect, mockFn, mockObject } from 'earl'
 import { providers } from 'ethers'
+import range from 'lodash/range'
 
 import { BlockRange } from '../../model'
 import { EthereumClient } from './EthereumClient'
@@ -81,7 +82,7 @@ describe(EthereumClient.name, () => {
 
     it('works for a lot of hashes', async () => {
       const blockRange = new BlockRange(
-        Array.from({ length: 500 }).map((v, i) => ({
+        range(500).map((i) => ({
           number: 1000 + i,
           hash: Hash256.fake(`${1000 + i}`),
         }))

packages/frontend/package.json

@@ -37,6 +37,7 @@
     "elliptic": "^6.5.4",
     "hash.js": "^1.1.7",
     "js-cookie": "^3.0.1",
+    "lodash": "^4.17.21",
     "mersenne-twister": "^1.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

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

@@ -1,7 +1,8 @@
 import { Timestamp } from '@explorer/types'
+import range from 'lodash/range'
 
 export function repeat<T>(n: number, create: () => T) {
-  return Array.from({ length: n }).map(create)
+  return range(n).map(create)
 }
 
 export function randomTimestamp(): Timestamp {

packages/frontend/src/preview/oldData.ts

@@ -7,6 +7,7 @@ import {
   StarkKey,
   Timestamp,
 } from '@explorer/types'
+import range from 'lodash/range'
 
 import {
   ForcedTradeOfferDetailsProps,
@@ -27,7 +28,7 @@ import { TransactionFormProps } from '../view/old/transaction-form'
 const ONE_HOUR = 60 * 60 * 1000
 
 const createFakeTransactions = (count: number): ForcedTransactionEntry[] =>
-  Array.from({ length: count }).map((_, i) => {
+  range(count).map((_, i) => {
     const assetId = randomChoice([
       AssetId('LINK-7'),
       AssetId('MKR-9'),
@@ -39,7 +40,7 @@ const createFakeTransactions = (count: number): ForcedTransactionEntry[] =>
     const decimals = AssetId.decimals(assetId)
     const digits = Math.floor(Math.random() * decimals + 6)
     const randomDigit = () => randomChoice('0123456789'.split(''))
-    const amount = Array.from({ length: digits }).map(randomDigit).join('')
+    const amount = range(digits).map(randomDigit).join('')
 
     return {
       type,
@@ -61,7 +62,7 @@ function randomChoice<T>(items: readonly T[]) {
 }
 
 const createFakeOffers = (count: number): ForcedTradeOfferEntry[] =>
-  Array.from({ length: count }).map((_, i) => {
+  range(count).map((_, i) => {
     const collateralAmount = BigInt(
       Math.floor(Math.random() * 1000000 * (i + 1))
     )
@@ -89,7 +90,7 @@ const createFakeOffers = (count: number): ForcedTradeOfferEntry[] =>
 
 export const HOME_PROPS: HomeProps = {
   account: undefined,
-  stateUpdates: Array.from({ length: 6 }).map((_, i) => ({
+  stateUpdates: range(6).map((_, i) => ({
     id: i,
     hash: PedersenHash.fake(),
     forcedTransactionsCount: Math.floor(Math.random() * 3),
@@ -111,7 +112,7 @@ export const STATE_CHANGE_DETAILS_PROPS: StateUpdateDetailsProps = {
   rootHash: PedersenHash.fake(),
   blockNumber: Math.floor(Math.random() * 100),
   timestamp: Timestamp.now(),
-  positions: Array.from({ length: 57 }).map((_, i) => ({
+  positions: range(57).map((_, i) => ({
     starkKey: StarkKey.fake(),
     positionId: BigInt(i + 1),
     totalUSDCents: BigInt(Math.floor(Math.random() * 500_000_00)),
@@ -247,7 +248,7 @@ export const POSITION_AT_UPDATE_PROPS: PositionAtUpdateProps = {
 
 export const STATE_CHANGES_INDEX_PROPS: StateUpdatesIndexProps = {
   account: undefined,
-  stateUpdates: Array.from({ length: 10 }).map((_, i) => ({
+  stateUpdates: range(10).map((_, i) => ({
     id: i,
     hash: PedersenHash.fake(),
     forcedTransactionsCount: Math.floor(Math.random() * 3),

packages/frontend/src/view/pages/state-update/components/StateUpdatePricesTable.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+import range from 'lodash/range'
 import React from 'react'
 
 import { Asset, assetToInfo } from '../../../../utils/assets'
@@ -16,20 +18,30 @@ export interface StateUpdatePriceEntry {
 }
 
 export function StateUpdatePricesTable(props: StateUpdatePricesTableProps) {
+  const tableCount = props.priceChanges.length == 1 ? 1 : 2
+
   return (
-    <Table
-      columns={[{ header: 'Asset' }, { header: 'Price', numeric: true }]}
-      rows={props.priceChanges.map((transaction) => {
-        return {
-          cells: [
-            <AssetWithLogo
-              type="small"
-              assetInfo={assetToInfo(transaction.asset)}
-            />,
-            formatWithDecimals(transaction.price, 2, { prefix: '$' }),
-          ],
-        }
+    <div className={classNames('flex', tableCount === 2 && 'gap-12')}>
+      {range(tableCount).map((index) => {
+        return (
+          <Table
+            columns={[{ header: 'Asset' }, { header: 'Price', numeric: true }]}
+            rows={props.priceChanges
+              .filter((_, txIndex) => txIndex % tableCount === index)
+              .map((transaction) => {
+                return {
+                  cells: [
+                    <AssetWithLogo
+                      type="small"
+                      assetInfo={assetToInfo(transaction.asset)}
+                    />,
+                    formatWithDecimals(transaction.price, 2, { prefix: '$' }),
+                  ],
+                }
+              })}
+          />
+        )
       })}
-    />
+    </div>
   )
 }

packages/state/src/MerkleNode.ts

@@ -1,6 +1,6 @@
 import { pedersen } from '@explorer/crypto'
 import { PedersenHash } from '@explorer/types'
-import { partition } from 'lodash'
+import partition from 'lodash/partition'
 
 import { MerkleValue } from './MerkleValue'
 

packages/state/src/calculateUpdatedPositions.ts

@@ -1,6 +1,6 @@
 import { OnChainData } from '@explorer/encoding'
 import { AssetId, Timestamp } from '@explorer/types'
-import { zip } from 'lodash'
+import zip from 'lodash/zip'
 
 import { MerkleTree } from './MerkleTree'
 import { PositionLeaf } from './PositionLeaf'

packages/types/package.json

@@ -21,7 +21,8 @@
   },
   "dependencies": {
     "@ethersproject/address": "^5.6.1",
-    "@ethersproject/bignumber": "^5.6.2"
+    "@ethersproject/bignumber": "^5.6.2",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {}
 }

packages/types/src/fake.ts

@@ -1,9 +1,11 @@
+import range from 'lodash/range'
+
 const HEX_DIGITS = '0123456789abcdef'
 
 export function fakeHexDigit() {
   return HEX_DIGITS[Math.floor(Math.random() * HEX_DIGITS.length)]
 }
 
 export function fakeHexString(length: number) {
-  return Array.from({ length }).map(fakeHexDigit).join('')
+  return range(length).map(fakeHexDigit).join('')
 }