Add token prices

packages/nextjs/app/cow/_components/ManagePoolCreation.tsx

@@ -19,6 +19,7 @@ interface ManagePoolCreationProps {
   hasAgreedToWarning: boolean;
   existingPool: ExistingPool | undefined;
   setIsFormDisabled: (isDisabled: boolean) => void;
+  resetForm: () => void;
 }
 
 export const ManagePoolCreation = ({
@@ -29,6 +30,7 @@ export const ManagePoolCreation = ({
   hasAgreedToWarning,
   existingPool,
   setIsFormDisabled,
+  resetForm,
 }: ManagePoolCreationProps) => {
   const [currentStep, setCurrentStep] = useState(1);
   const [userPoolAddress, setUserPoolAddress] = useState<Address>();
@@ -110,6 +112,7 @@ export const ManagePoolCreation = ({
       setIsFinalizing(true);
       await finalize();
       refetchPool();
+      resetForm();
     } catch (e) {
       console.error("Error finalizing pool", e);
     } finally {
@@ -164,7 +167,7 @@ export const ManagePoolCreation = ({
     <>
       <StepsDisplay currentStep={currentStep} />
 
-      <div className="min-w-96">
+      <div className="min-w-96 px-5">
         {(() => {
           switch (currentStep) {
             case 1:

packages/nextjs/app/cow/_components/StepsDisplay.tsx

@@ -3,12 +3,12 @@
  */
 export const StepsDisplay = ({ currentStep }: { currentStep: number }) => {
   return (
-    <ul className="steps steps-vertical md:steps-horizontal  w-full sm:w-[555px] bg-base-200 py-4 rounded-xl">
-      <li className="step step-accent">Create </li>
-      <li className={`step ${currentStep > 1 && "step-accent"}`}>Approve </li>
-      <li className={`step ${currentStep > 2 && "step-accent"}`}>Bind</li>
-      <li className={`step ${currentStep > 3 && "step-accent"}`}>Set Fee</li>
-      <li className={`step ${currentStep > 4 && "step-accent"}`}>Finalize</li>
+    <ul className="steps steps-vertical sm:steps-horizontal sm:w-[555px] bg-base-200 py-4 rounded-xl">
+      <li className="px-5 sm:px-0 step step-accent">Create </li>
+      <li className={`px-5 sm:px-0 step ${currentStep > 1 && "step-accent"}`}>Approve </li>
+      <li className={`px-5 sm:px-0 step ${currentStep > 2 && "step-accent"}`}>Bind</li>
+      <li className={`px-5 sm:px-0 step ${currentStep > 3 && "step-accent"}`}>Set Fee</li>
+      <li className={`px-5 sm:px-0 step ${currentStep > 4 && "step-accent"}`}>Finalize</li>
     </ul>
   );
 };

packages/nextjs/app/cow/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import Link from "next/link";
 import { ManagePoolCreation } from "./_components";
 import type { NextPage } from "next";
@@ -8,9 +9,9 @@ import { Alert } from "~~/components/common";
 import { TextField, TokenField } from "~~/components/common/";
 import { useLocalStorage } from "~~/hooks/common";
 import { useCheckIfPoolExists } from "~~/hooks/cow";
-import { type Token, useFetchTokenList, useReadToken } from "~~/hooks/token";
+import { type Token, useFetchTokenList } from "~~/hooks/token";
 
-const CoW: NextPage = () => {
+const CowAmm: NextPage = () => {
   const [token1, setToken1] = useLocalStorage<Token | undefined>("token1", undefined);
   const [token2, setToken2] = useLocalStorage<Token | undefined>("token2", undefined);
   const [amountToken1, setAmountToken1] = useLocalStorage<string>("amountToken1", "");
@@ -23,11 +24,27 @@ const CoW: NextPage = () => {
   const rawAmount1 = parseUnits(amountToken1, token1?.decimals ?? 0);
   const rawAmount2 = parseUnits(amountToken2, token2?.decimals ?? 0);
 
-  const { balance: balance1 } = useReadToken(token1?.address);
-  const { balance: balance2 } = useReadToken(token2?.address);
   const { data: tokenList } = useFetchTokenList();
   const { existingPool } = useCheckIfPoolExists(token1?.address, token2?.address);
 
+  const resetForm = () => {
+    setToken1(undefined);
+    setToken2(undefined);
+    setAmountToken1("");
+    setAmountToken2("");
+    setPoolName("");
+    setPoolSymbol("");
+    setHasAgreedToWarning(false);
+    setIsFormDisabled(false);
+  };
+
+  useEffect(() => {
+    if (token1 && token2) {
+      setPoolName(`Balancer CoW AMM 50 ${token1?.symbol} 50 ${token2?.symbol}`);
+      setPoolSymbol(`BCoW-50${token1?.symbol}-50${token2?.symbol}`);
+    }
+  }, [token1, token2, setPoolName, setPoolSymbol]);
+
   // Filter out tokens that have already been chosen
   const selectableTokens = tokenList?.filter(token => token !== token1 && token !== token2);
 
@@ -46,19 +63,19 @@ const CoW: NextPage = () => {
                 <div className="w-full flex flex-col gap-3">
                   <TokenField
                     value={amountToken1}
-                    balance={balance1}
                     selectedToken={token1}
                     setToken={setToken1}
                     tokenOptions={selectableTokens}
                     handleAmountChange={e => setAmountToken1(e.target.value)}
+                    isDisabled={isFormDisabled}
                   />
                   <TokenField
                     value={amountToken2}
-                    balance={balance2}
                     selectedToken={token2}
                     setToken={setToken2}
                     tokenOptions={selectableTokens}
                     handleAmountChange={e => setAmountToken2(e.target.value)}
+                    isDisabled={isFormDisabled}
                   />
                 </div>
               </div>
@@ -118,11 +135,12 @@ const CoW: NextPage = () => {
             hasAgreedToWarning={hasAgreedToWarning}
             existingPool={existingPool}
             setIsFormDisabled={setIsFormDisabled}
+            resetForm={resetForm}
           />
         </div>
       </div>
     </div>
   );
 };
 
-export default CoW;
+export default CowAmm;

packages/nextjs/components/Footer.tsx

@@ -19,7 +19,7 @@ export const Footer = () => {
   // const isLocalNetwork = targetNetwork.id === hardhat.id;
 
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-base-300 border-t-2 border-base-200">
+    <div className="min-h-0 py-5 px-1 lg:mb-0 bg-base-300 border-t-2 border-base-200">
       {/* <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">

packages/nextjs/components/common/TokenField.tsx

@@ -4,55 +4,72 @@ import { Dispatch, SetStateAction, useState } from "react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { TokenSelectModal } from "~~/components/common";
 import { type Token } from "~~/hooks/token";
+import { useFetchTokenPrices, useReadToken } from "~~/hooks/token";
 import { formatToHuman } from "~~/utils/formatToHuman";
 
 export const TokenField = ({
   value,
   tokenOptions,
   setToken,
   selectedToken,
-  balance,
-  allowance,
   handleAmountChange,
+  isDisabled,
 }: {
+  isDisabled?: boolean;
   value: string;
-  balance: bigint;
-  allowance?: bigint;
   tokenOptions?: Token[] | undefined;
   setToken: Dispatch<SetStateAction<Token | undefined>>;
   selectedToken: Token | undefined;
   handleAmountChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const { balance } = useReadToken(selectedToken?.address);
+  const { data: tokenPrices, isLoading, isError } = useFetchTokenPrices();
+
+  let price;
+  if (tokenPrices && selectedToken) {
+    price = tokenPrices.find(token => token?.address.toLowerCase() === selectedToken?.address.toLowerCase())?.price;
+  }
+  if (price && price > 0) {
+    price = (price * Number(value)).toFixed(2);
+  } else {
+    price = 0;
+  }
+
   return (
     <>
       <div className="relative w-full">
         <input
+          disabled={isDisabled}
           type="number"
           onChange={handleAmountChange}
           min="0"
           placeholder="0.0"
           value={value}
-          className={`text-right text-2xl w-full input input-bordered rounded-xl bg-base-200 p-5 h-[74px]`}
+          className={`pb-4 text-right text-2xl w-full input input-bordered rounded-xl bg-base-200 disabled:bg-base-300 h-[74px]`}
         />
         <div className="absolute top-0 left-0 ">
           <div className="p-2.5">
             <button
+              disabled={isDisabled}
               onClick={() => setIsModalOpen(true)}
-              className="py-1.5 px-2 font-bold bg-base-100 rounded-lg flex justify-between items-center gap-3 mb-[2.5px]"
+              className="min-w-24 py-1.5 px-3 text-lg font-bold bg-base-100 disabled:bg-base-200 rounded-lg flex justify-between  items-center gap-2 mb-[1.5px]"
             >
-              {selectedToken ? selectedToken.symbol : "Select Token"} <ChevronDownIcon className="w-4 h-4 mt-0.5" />
+              {selectedToken ? selectedToken.symbol : "Select Token"}{" "}
+              {!isDisabled && <ChevronDownIcon className="w-4 h-4 mt-0.5" />}
             </button>
 
             {selectedToken && (
               <div className="ml-1 text-neutral-400 text-sm flex gap-5">
                 <div>Balance: {formatToHuman(balance, selectedToken?.decimals || 0)}</div>
-                {allowance ? <div>Allowance: {formatToHuman(allowance, selectedToken?.decimals || 0)}</div> : null}
               </div>
             )}
           </div>
         </div>
+        <div className="absolute bottom-1.5 right-5 text-neutral-400">
+          {isLoading ? <div>...</div> : isError ? <div>pricing error</div> : <div>${price}</div>}
+        </div>
       </div>
       {isModalOpen && tokenOptions && (
         <TokenSelectModal tokenOptions={tokenOptions} setToken={setToken} setIsModalOpen={setIsModalOpen} />

packages/nextjs/hooks/token/types.ts

@@ -9,7 +9,7 @@ export type Token = {
 
 export type TokenPrice = {
   chain: string;
-  adddress: string;
+  address: string;
   price: number;
   updatedAt: number;
 };