read some deployed contract info

packages/nextjs/app/pools/page.tsx

@@ -1,17 +1,25 @@
+"use client";
+
 import type { NextPage } from "next";
+import { PoolDetails } from "~~/components/balancer/PoolDetails";
 
 const Pools: NextPage = () => {
   return (
     <>
       <div className="flex items-center flex-col flex-grow py-10 px-5 md:px-10 xl:px-20">
-        <div className="mb-10">
+        <div className="pb-10 border-b border-white">
           <h1 className="text-3xl md:text-5xl font-bold my-10">🌊 Pools</h1>
-          <p className="text-xl">
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet nemo praesentium molestias impedit
-            mollitia quisquam fugit nobis possimus quis enim omnis similique repudiandae odit nihil deleniti harum
-            tempora, quod exercitationem?
+          <p className="text-xl my-0">
+            Balancer is infinitely extensible to allow for any conceivable pool type with custom curves, logic,
+            parameters, and more. Each pool deployed to balancer is its own smart contract. This tool allows you to
+            interact with any pool currently deployed (custom or existing). To get started, enter the contract address
+            of the desired pool below.
           </p>
         </div>
+
+        <div className="p-10 w-full">
+          <PoolDetails />
+        </div>
       </div>
     </>
   );

packages/nextjs/components/balancer/PoolDetails.tsx

@@ -0,0 +1,42 @@
+import { formatUnits } from "viem";
+import { Address } from "~~/components/scaffold-eth";
+import { usePoolContract } from "~~/hooks/balancer";
+
+/**
+ * Display all the contract details for a balancer pool
+ */
+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>
+      </div>
+    </div>
+  );
+};

packages/nextjs/components/balancer/index.tsx

@@ -0,0 +1 @@
+export * from "./PoolDetails";

packages/nextjs/hooks/balancer/index.ts

@@ -0,0 +1 @@
+export * from "./usePoolContract";

packages/nextjs/hooks/balancer/usePoolContract.ts

@@ -0,0 +1,50 @@
+import { useDeployedContractInfo, useScaffoldContractRead } from "~~/hooks/scaffold-eth";
+
+export interface PoolDetails {
+  name: string | undefined;
+  address: string | undefined;
+  symbol: string | undefined;
+  decimals: number | undefined;
+  totalSupply: bigint | undefined;
+  vaultAddress: string | undefined;
+}
+
+type DeployedPoolNames = "ConstantPricePool";
+
+export const usePoolContract = (contractName: DeployedPoolNames): PoolDetails => {
+  const { data: deployedContractData } = useDeployedContractInfo(contractName);
+
+  const { data: name } = useScaffoldContractRead({
+    contractName,
+    functionName: "name",
+  });
+
+  const { data: symbol } = useScaffoldContractRead({
+    contractName,
+    functionName: "symbol",
+  });
+
+  const { data: totalSupply } = useScaffoldContractRead({
+    contractName,
+    functionName: "totalSupply",
+  });
+
+  const { data: decimals } = useScaffoldContractRead({
+    contractName,
+    functionName: "decimals",
+  });
+
+  const { data: vaultAddress } = useScaffoldContractRead({
+    contractName,
+    functionName: "getVault",
+  });
+
+  return {
+    name,
+    address: deployedContractData?.address,
+    symbol,
+    totalSupply: totalSupply,
+    decimals,
+    vaultAddress,
+  };
+};