From 67feb92163e5beb57f8e1f57f8b402efd1dc3884 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20T=C3=B3rz?= <tomasz.torz@l2beat.com>
Date: Tue, 11 Apr 2023 12:13:58 +0200
Subject: [PATCH] improve price tables

---
 .../components/StateUpdatePricesTable.tsx     | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 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
index 49792e720..e39ed7788 100644
--- 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>
   )
 }