improve price tables

l2beat · Apr 11, 2023 · 67feb92 · 67feb92
1 parent 3863f71
commit 67feb92
Showing 1 changed file with 31 additions and 14 deletions.
diff --git a/packages/frontend/src/view/pages/state-update/components/StateUpdatePricesTable.tsx b/packages/frontend/src/view/pages/state-update/components/StateUpdatePricesTable.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import React from 'react'
 
 import { Asset, assetToInfo } from '../../../../utils/assets'
@@ -16,20 +17,36 @@ export interface StateUpdatePriceEntry {
 }
 
 export function StateUpdatePricesTable(props: StateUpdatePricesTableProps) {
+  const tableCount =
+    props.priceChanges.length > 20 ? 3 : props.priceChanges.length > 10 ? 2 : 1
+
   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' : 'gap-6')}>
+      {Array(tableCount)
+        .fill(0)
+        .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>
   )
 }