refactor pool action results

packages/nextjs/app/page.tsx

@@ -14,18 +14,6 @@ const TOOLS = [
     href: "/hooks",
     description: "Extend liquidity pool functionality with hooks",
   },
-  // {
-  //   emoji: "🧭",
-  //   title: "Smart Order Router",
-  //   href: "/router",
-  //   description: "Integrate pools with the smart order router",
-  // },
-  // {
-  //   emoji: "📡",
-  //   title: "Subgraph",
-  //   href: "/subgraph",
-  //   description: "Integrate pools with the Balancer subgraph",
-  // },
 ];
 
 const Home: NextPage = () => {

packages/nextjs/app/pools/_components/PoolActions.tsx

@@ -3,19 +3,11 @@ import { AddLiquidityForm, RemoveLiquidityForm, SwapForm } from "./actions";
 import { useAccount } from "wagmi";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { useReadTokens } from "~~/hooks/balancer";
-import { type Pool, type TokenBalances } from "~~/hooks/balancer/types";
-import { type RefetchPool } from "~~/hooks/balancer/useReadPool";
+import { type Pool, RefetchPool } from "~~/hooks/balancer";
 import { useAccountBalance, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 
 type Action = "Swap" | "AddLiquidity" | "RemoveLiquidity";
 
-export interface PoolActionsProps {
-  pool: Pool;
-  refetchPool: RefetchPool;
-  tokenBalances: TokenBalances;
-  refetchTokenBalances: () => void;
-}
-
 /**
  * Allow user to swap, add liquidity, and remove liquidity from a pool
  */

packages/nextjs/app/pools/_components/PoolComposition.tsx

@@ -1,5 +1,5 @@
+import { TokenAmountDisplay } from "~~/components/common";
 import { type Pool } from "~~/hooks/balancer/types";
-import { formatToHuman } from "~~/utils/";
 
 /**
  * Display a pool's token composition including the tokens' symbols, names, and balances
@@ -16,17 +16,14 @@ export const PoolComposition = ({ pool }: { pool: Pool }) => {
 
         <div className="bg-neutral rounded-lg">
           <div className="p-4 flex flex-col gap-4">
-            {pool.poolTokens.map(token => (
-              <div key={token.address} className="flex justify-between items-center">
-                <div>
-                  <div className="font-bold">{token.symbol}</div>
-                  <div className="text-sm">{token.name}</div>
-                </div>
-                <div className="text-end">
-                  <div className="font-bold text-end">{formatToHuman(token.balance, token.decimals)}</div>
-                  <div className="text-sm">{token.balance.toString()}</div>
-                </div>
-              </div>
+            {pool.poolTokens.map((token, idx) => (
+              <TokenAmountDisplay
+                key={idx}
+                symbol={token.symbol}
+                name={token.name}
+                decimals={token.decimals}
+                rawAmount={token.balance}
+              />
             ))}
           </div>
         </div>

packages/nextjs/app/pools/_components/UserLiquidity.tsx

@@ -1,8 +1,7 @@
 import { useEffect } from "react";
 import { useAccount } from "wagmi";
-import { useQueryRemoveLiquidity } from "~~/hooks/balancer/";
-import { type Pool } from "~~/hooks/balancer/types";
-import { formatToHuman } from "~~/utils/";
+import { TokenAmountDisplay } from "~~/components/common/";
+import { type Pool, useQueryRemoveLiquidity } from "~~/hooks/balancer/";
 
 /**
  * If there is a connected user, display their liquidity within the pool
@@ -31,33 +30,23 @@ export const UserLiquidity = ({ pool }: { pool: Pool }) => {
         <h5 className="text-xl font-bold mb-3">My Liquidity</h5>
 
         <div className="bg-neutral rounded-lg">
-          <div className="flex justify-between border-base-300 border-b p-4 items-center">
-            <div>
-              <div className="font-bold">{pool.symbol}</div>
-              <div className="text-sm">{pool.name}</div>
-            </div>
-            <div className="text-end">
-              <div className="font-bold">{formatToHuman(pool.userBalance ?? 0n, pool.decimals)}</div>
-              <div className="text-sm">{pool.userBalance?.toString()}</div>
-            </div>
+          <div className="border-base-300 border-b p-4">
+            <TokenAmountDisplay
+              symbol={pool.symbol}
+              name={pool.name}
+              decimals={pool.decimals}
+              rawAmount={pool.userBalance}
+            />
           </div>
           <div className="p-4 flex flex-col gap-4">
             {pool.poolTokens.map((token, index) => (
-              <div key={token.address} className="flex justify-between items-center">
-                <div>
-                  <div className="font-bold">{token.symbol}</div>
-                  <div className="text-sm">{token.name}</div>
-                </div>
-
-                <div className="text-end">
-                  <div className="font-bold text-end">
-                    {queryResponse ? formatToHuman(queryResponse.amountsOut[index].amount, token.decimals) : "0.0000"}
-                  </div>
-                  <div className="text-sm">
-                    {queryResponse ? queryResponse.amountsOut[index].amount.toString() : "0"}
-                  </div>
-                </div>
-              </div>
+              <TokenAmountDisplay
+                key={index}
+                symbol={token.symbol}
+                name={token.name}
+                decimals={token.decimals}
+                rawAmount={queryResponse?.amountsOut[index].amount ?? 0n}
+              />
             ))}
           </div>
         </div>

packages/nextjs/app/pools/_components/actions/AddLiquidityForm.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
-import { PoolActionButton, QueryErrorAlert, QueryResponseAlert, TokenField, TransactionReceiptAlert } from ".";
-import { PoolActionsProps } from "../PoolActions";
+import { PoolActionButton, ResultsDisplay, TokenField } from ".";
 import { InputAmount, calculateProportionalAmounts } from "@balancer/sdk";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatUnits, parseUnits } from "viem";
 import { useContractEvent } from "wagmi";
+import { Alert } from "~~/components/common/";
 import abis from "~~/contracts/abis";
 import { useAddLiquidity, useApproveTokens, useQueryAddLiquidity, useReadTokens } from "~~/hooks/balancer/";
-import { PoolActionReceipt, TokenInfo } from "~~/hooks/balancer/types";
+import { PoolActionsProps, PoolOperationReceipt, TokenAmountDetails } from "~~/hooks/balancer/types";
 
 /**
  * 1. Query adding some amount of liquidity to the pool
@@ -27,7 +27,7 @@ export const AddLiquidityForm: React.FC<PoolActionsProps> = ({
     rawAmount: 0n,
   }));
   const [tokenInputs, setTokenInputs] = useState<InputAmount[]>(initialTokenInputs);
-  const [addLiquidityReceipt, setAddLiquidityReceipt] = useState<PoolActionReceipt>(null);
+  const [addLiquidityReceipt, setAddLiquidityReceipt] = useState<PoolOperationReceipt>(null);
   const [bptOut, setBptOut] = useState<InputAmount>(); // only for the proportional add liquidity case
 
   const {
@@ -93,7 +93,7 @@ export const AddLiquidityForm: React.FC<PoolActionsProps> = ({
     abi: abis.balancer.Pool,
     eventName: "Transfer",
     listener(log: any[]) {
-      const data: TokenInfo = {
+      const data: TokenAmountDetails = {
         symbol: pool.symbol,
         name: pool.name,
         decimals: pool.decimals,
@@ -107,22 +107,20 @@ export const AddLiquidityForm: React.FC<PoolActionsProps> = ({
   const isFormEmpty = tokenInputs.every(token => token.rawAmount === 0n);
 
   return (
-    <section>
-      <div className="mb-5">
-        {tokenInputs.map((token, index) => {
-          const humanInputAmount = formatUnits(token.rawAmount, token.decimals);
-          return (
-            <TokenField
-              key={token.address}
-              label={index === 0 ? "Tokens In" : undefined}
-              token={pool.poolTokens[index]}
-              userBalance={tokenBalances[token.address]}
-              value={humanInputAmount != "0" ? humanInputAmount : ""}
-              onAmountChange={value => handleInputChange(index, value)}
-            />
-          );
-        })}
-      </div>
+    <section className="flex flex-col gap-5">
+      {tokenInputs.map((token, index) => {
+        const humanInputAmount = formatUnits(token.rawAmount, token.decimals);
+        return (
+          <TokenField
+            key={token.address}
+            label={index === 0 ? "Tokens In" : undefined}
+            token={pool.poolTokens[index]}
+            userBalance={tokenBalances[token.address]}
+            value={humanInputAmount != "0" ? humanInputAmount : ""}
+            onAmountChange={value => handleInputChange(index, value)}
+          />
+        );
+      })}
 
       {!queryResponse || addLiquidityReceipt || isFormEmpty ? (
         <PoolActionButton
@@ -138,12 +136,12 @@ export const AddLiquidityForm: React.FC<PoolActionsProps> = ({
       )}
 
       {queryResponse && (
-        <QueryResponseAlert
-          title="Expected BPT Out"
+        <ResultsDisplay
+          label="Expected BPT Out"
           data={[
             {
-              type: pool.symbol,
-              description: pool.name,
+              symbol: pool.symbol,
+              name: pool.name,
               rawAmount: queryResponse.bptOut.amount,
               decimals: pool.decimals,
             },
@@ -152,14 +150,14 @@ export const AddLiquidityForm: React.FC<PoolActionsProps> = ({
       )}
 
       {addLiquidityReceipt && (
-        <TransactionReceiptAlert
-          title="Actual BPT Out"
+        <ResultsDisplay
+          label="Actual BPT Out"
           transactionHash={addLiquidityReceipt.transactionHash}
           data={addLiquidityReceipt.data}
         />
       )}
 
-      {(error as Error) && <QueryErrorAlert message={(error as Error).message} />}
+      {(error as Error) && <Alert type="error">{(error as Error).message}</Alert>}
     </section>
   );
 };