From 6290b852cbfa7f972bcbbea5733d7046facb30ca Mon Sep 17 00:00:00 2001
From: Matthew Pereira <matthewdavidpereira@gmail.com>
Date: Fri, 22 Mar 2024 10:39:29 -0700
Subject: [PATCH] fix styles

---
 .../hardhat/contracts/ConstantPricePool.sol   | 19 +++++-------
 .../{PoolDetails.tsx => PoolAttributes.tsx}   | 30 +++++++------------
 .../nextjs/app/pools/_components/index.tsx    |  2 +-
 packages/nextjs/app/pools/page.tsx            |  6 ++--
 4 files changed, 23 insertions(+), 34 deletions(-)
 rename packages/nextjs/app/pools/_components/{PoolDetails.tsx => PoolAttributes.tsx} (65%)

diff --git a/packages/hardhat/contracts/ConstantPricePool.sol b/packages/hardhat/contracts/ConstantPricePool.sol
index 9c744e2b..fe925d8c 100644
--- a/packages/hardhat/contracts/ConstantPricePool.sol
+++ b/packages/hardhat/contracts/ConstantPricePool.sol
@@ -11,12 +11,11 @@ import "./vault/BalancerPoolToken.sol";
  * @notice CURRENTLY A WIP. This is an example custom pool implementation used.
  */
 contract ConstantPricePool is IBasePool, BalancerPoolToken {
-
 	constructor(
 		IVault vault,
 		string memory name,
 		string memory symbol
-	) BalancerPoolToken(vault, name, symbol)  {}
+	) BalancerPoolToken(vault, name, symbol) {}
 
 	/**
 	 * @notice Execute a swap in the pool.
@@ -58,18 +57,16 @@ contract ConstantPricePool is IBasePool, BalancerPoolToken {
 
 		newBalance =
 			(balancesLiveScaled18[tokenInIndex] +
-				invariant * (invariantRatio)) -
+				invariant *
+				(invariantRatio)) -
 			invariant;
 	}
 
 	/**
-     * @notice Gets the tokens registered to a pool.
-     * @dev Delegated to the Vault; added here as a convenience, mainly for off-chain processes.
+	 * @notice Gets the tokens registered to a pool.
+	 * @dev Delegated to the Vault; added here as a convenience, mainly for off-chain processes.
 	 * @dev TODO - left blank for now, but for finished example w/ scaffoldBalancer we need to implement this correctly.
-     * @return tokens List of tokens in the pool
-     */
-	function getPoolTokens() external view returns (IERC20[] memory tokens) {
-		
-	}
-
+	 * @return tokens List of tokens in the pool
+	 */
+	function getPoolTokens() external view returns (IERC20[] memory tokens) {}
 }
diff --git a/packages/nextjs/app/pools/_components/PoolDetails.tsx b/packages/nextjs/app/pools/_components/PoolAttributes.tsx
similarity index 65%
rename from packages/nextjs/app/pools/_components/PoolDetails.tsx
rename to packages/nextjs/app/pools/_components/PoolAttributes.tsx
index 91203977..f9c11a9e 100644
--- a/packages/nextjs/app/pools/_components/PoolDetails.tsx
+++ b/packages/nextjs/app/pools/_components/PoolAttributes.tsx
@@ -5,7 +5,7 @@ import { Address } from "~~/components/scaffold-eth";
 import { usePoolContract } from "~~/hooks/balancer";
 
 /**
- * Display a pool's contract details
+ * Display a pool's attritubes 
  * @dev do we want to display any of the pool config details? -> https://docs-v3.balancer.fi/concepts/vault/onchain-api.html#getpoolconfig
  * 
  * struct PoolConfig {
@@ -21,7 +21,7 @@ import { usePoolContract } from "~~/hooks/balancer";
     LiquidityManagement liquidityManagement;
     }
  */
-export const PoolDetails = ({ poolAddress }: { poolAddress: string }) => {
+export const PoolAttributes = ({ poolAddress }: { poolAddress: string }) => {
   const { data: pool } = usePoolContract(poolAddress);
 
   const detailsRows = [
@@ -35,24 +35,16 @@ export const PoolDetails = ({ poolAddress }: { poolAddress: string }) => {
     <div className="w-full">
       <div className="overflow-x-auto rounded-lg bg-base-200 p-5">
         <h5 className="text-xl font-bold mb-3">Pool Attributes</h5>
-
         <div className="border border-base-100 rounded-lg">
-          <table className="table text-lg">
-            {/* <thead>
-              <tr className="text-lg border-b border-base-100 text-base-content">
-                <th className="border-r border-base-100">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-base-100" : ""}`}>
-                  <td>{attribute}</td>
-                  <td>{detail}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          {detailsRows.map(({ attribute, detail }, index) => (
+            <div
+              key={attribute}
+              className={`p-3 grid grid-cols-2 ${index == detailsRows.length - 1 ? "" : "border-b border-base-100"}`}
+            >
+              <div>{attribute}</div>
+              <div>{detail}</div>
+            </div>
+          ))}
         </div>
       </div>
     </div>
diff --git a/packages/nextjs/app/pools/_components/index.tsx b/packages/nextjs/app/pools/_components/index.tsx
index 10210ead..7d4c6bd3 100644
--- a/packages/nextjs/app/pools/_components/index.tsx
+++ b/packages/nextjs/app/pools/_components/index.tsx
@@ -1,4 +1,4 @@
 export * from "./PoolActions";
 export * from "./PoolComposition";
-export * from "./PoolDetails";
+export * from "./PoolAttributes";
 export * from "./UserLiquidity";
diff --git a/packages/nextjs/app/pools/page.tsx b/packages/nextjs/app/pools/page.tsx
index 3cc594d0..8a35df34 100644
--- a/packages/nextjs/app/pools/page.tsx
+++ b/packages/nextjs/app/pools/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { PoolActions, PoolComposition, PoolDetails, UserLiquidity } from "./_components/";
+import { PoolActions, PoolAttributes, PoolComposition, UserLiquidity } from "./_components/";
 import type { NextPage } from "next";
 import { type Address, isAddress } from "viem";
 import { ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@@ -98,7 +98,7 @@ const Pools: NextPage = () => {
               </div>
             </form>
           </section>
-          <div className="text-center py-5 border-b border-t border-base-100">
+          <div className="text-center mb-5 border-base-100">
             <h3 className="font-extrabold text-transparent text-3xl bg-clip-text bg-gradient-to-r from-pink-500 to-yellow-500 mb-0">
               {pool?.name}
             </h3>
@@ -113,7 +113,7 @@ const Pools: NextPage = () => {
                   <PoolComposition />
                 </div>
                 <PoolActions />
-                <PoolDetails poolAddress={selectedPool} />
+                <PoolAttributes poolAddress={selectedPool} />
               </div>
             </div>
           )}