pool details table

balancer · Mar 14, 2024 · c63193f · c63193f
1 parent 5d8a7b6
commit c63193f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/packages/nextjs/app/pools/page.tsx b/packages/nextjs/app/pools/page.tsx
@@ -5,7 +5,7 @@ import { PoolDetails } from "~~/components/balancer/PoolDetails";
 
 const Pools: NextPage = () => {
   return (
-    <>
+    <div className="bg-base-300 flex-grow">
       <div className="flex items-center flex-col flex-grow py-10 px-5 md:px-10 xl:px-20">
         <div className="pb-10 border-b border-white">
           <h1 className="text-3xl md:text-5xl font-bold my-10">🌊 Pools</h1>
@@ -21,7 +21,7 @@ const Pools: NextPage = () => {
           <PoolDetails />
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/packages/nextjs/components/balancer/PoolDetails.tsx b/packages/nextjs/components/balancer/PoolDetails.tsx
@@ -3,39 +3,38 @@ import { Address } from "~~/components/scaffold-eth";
 import { usePoolContract } from "~~/hooks/balancer";
 
 /**
- * Display all the contract details for a balancer pool
+ * Display a pool's contract details
  */
 export const PoolDetails = () => {
   const pool = usePoolContract("ConstantPricePool");
-  return (
-    <div className="flex flex-col gap-5 text-xl">
-      <div className="flex gap-5">
-        <div>Name:</div>
-        <div>{pool.name}</div>
-      </div>
 
-      <div className="flex gap-5">
-        <div>Symbol:</div>
-        <div>({pool.symbol})</div>
-      </div>
-
-      <div className="flex gap-5">
-        <div>Pool Address:</div>
-        <div>
-          <Address address={pool.address} size="xl" />
-        </div>
-      </div>
-
-      <div className="flex gap-5">
-        <div>Vault Address:</div>
-        <div>
-          <Address address={pool.vaultAddress} size="xl" />
-        </div>
-      </div>
-
-      <div className="flex gap-5">
-        <div>Total Supply:</div>
-        <div>{formatUnits(pool.totalSupply || 0n, pool.decimals || 18)}</div>
+  const detailsRows = [
+    { attribute: "Name", detail: pool.name },
+    { attribute: "Symbol", detail: pool.symbol },
+    { attribute: "Contract Address", detail: <Address address={pool.address} size="lg" /> },
+    { attribute: "Vault Address", detail: <Address address={pool.vaultAddress} size="lg" /> },
+    { attribute: "Total Supply", detail: formatUnits(pool.totalSupply || 0n, pool.decimals || 18) },
+  ];
+  return (
+    <div>
+      <h5 className="text-2xl font-bold mb-3">Pool Details</h5>
+      <div className="overflow-x-auto rounded-lg">
+        <table className="table text-lg">
+          <thead>
+            <tr className="text-lg bg-base-100 border-b border-accent">
+              <th className="border-r border-accent">Attribute</th>
+              <th>Details</th>
+            </tr>
+          </thead>
+          <tbody className="bg-base-200">
+            {detailsRows.map(({ attribute, detail }, index) => (
+              <tr key={attribute} className={`${index < detailsRows.length - 1 ? "border-b border-accent" : ""}`}>
+                <td className="border-r border-accent">{attribute}</td>
+                <td>{detail}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
   );