Mint tokens directly on pools page

balancer · Jul 11, 2024 · ef3f361 · ef3f361
1 parent b702c4f
commit ef3f361
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 78 deletions.
diff --git a/packages/foundry/contracts/mocks/MockToken1.sol b/packages/foundry/contracts/mocks/MockToken1.sol
@@ -17,15 +17,7 @@ contract MockToken1 is ERC20 {
      * Allow any user to mint any amount of tokens to their wallet
      * This function is accessible on the frontend's "Debug" page
      */
-    function mintFive() external {
-        _mint(msg.sender, 5e18);
-    }
-
-    /**
-     * Allow any user to mint any amount of tokens to their wallet
-     * This function is accessible on the frontend's "Debug" page
-     */
-    function mintAnyAmount(uint256 amount) external {
+    function mint(uint256 amount) external {
         _mint(msg.sender, amount);
     }
 }
diff --git a/packages/foundry/contracts/mocks/MockToken2.sol b/packages/foundry/contracts/mocks/MockToken2.sol
@@ -17,15 +17,7 @@ contract MockToken2 is ERC20 {
      * Allow any user to mint any amount of tokens to their wallet
      * This function is accessible on the frontend's "Debug" page
      */
-    function mintFive() external {
-        _mint(msg.sender, 5e18);
-    }
-
-    /**
-     * Allow any user to mint any amount of tokens to their wallet
-     * This function is accessible on the frontend's "Debug" page
-     */
-    function mintAnyAmount(uint256 amount) external {
+    function mint(uint256 amount) external {
         _mint(msg.sender, amount);
     }
 }
diff --git a/packages/nextjs/app/hooks/page.tsx b/packages/nextjs/app/hooks/page.tsx
@@ -38,8 +38,8 @@ const Hooks: NextPage = () => {
 
   return (
     <div className="flex items-center flex-col flex-grow py-7 px-5 md:px-10 xl:px-20 bg-base-300">
-      <div className="mb-7 w-full">
-        <h1 className="text-3xl md:text-5xl font-bold my-10">🪝 Pool Hooks</h1>
+      <div className="mb-7 w-full text-center">
+        <h1 className="text-3xl md:text-5xl font-bold my-10 text-center">Pool Hooks</h1>
         <p className="text-xl">
           Extend the functionality of liquidity pools with hooks contracts. Consider utilizing one of the examples below
           or{" "}
@@ -74,8 +74,7 @@ const Hooks: NextPage = () => {
                     <GithubIcon />
                   </Link>
                 </div>
-
-                <div className="">Created By {hook.created_by}</div>
+                {/* <div className="">Created By {hook.created_by}</div> */}
               </div>
               <div className="text-lg card-description">{hook.description}</div>
             </div>

diff --git a/packages/nextjs/app/pools/_components/PoolActions.tsx b/packages/nextjs/app/pools/_components/PoolActions.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { AddLiquidityForm, RemoveLiquidityForm, SwapForm } from "./actions";
-import { erc20Abi } from "@balancer/sdk";
-import { useAccount, useContractReads, useWalletClient } from "wagmi";
+import { useAccount } from "wagmi";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { useTokens } from "~~/hooks/balancer";
 import { type Pool } from "~~/hooks/balancer/types";
 import { type RefetchPool } from "~~/hooks/balancer/usePoolContract";
-import { useAccountBalance } from "~~/hooks/scaffold-eth";
+import { useAccountBalance, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 
 type Action = "Swap" | "AddLiquidity" | "RemoveLiquidity";
 
@@ -22,17 +22,28 @@ export const PoolActions: React.FC<PoolActionsProps> = ({ pool, refetchPool }) =
 
   const { address } = useAccount();
   const { balance } = useAccountBalance(address);
-  const { data: walletClient } = useWalletClient();
-  const { data: tokenBalances } = useContractReads({
-    contracts: pool.poolTokens.map(token => ({
-      address: token.address,
-      abi: erc20Abi,
-      functionName: "balanceOf",
-      args: [walletClient?.account.address as string],
-    })),
+
+  const tokens = pool.poolTokens.map(token => ({
+    address: token.address as `0x${string}`,
+    decimals: token.decimals,
+    rawAmount: 0n,
+  }));
+
+  const { tokenBalances, refetchTokenBalances } = useTokens(tokens);
+
+  const userHasNoTokens = tokenBalances?.every(balance => balance === 0n);
+
+  const { writeAsync: mintToken1 } = useScaffoldContractWrite({
+    contractName: "MockToken1",
+    functionName: "mint",
+    args: [5000000000000000000n],
   });
 
-  const userHasNoTokens = tokenBalances?.every(balance => balance.result === 0n);
+  const { writeAsync: mintToken2 } = useScaffoldContractWrite({
+    contractName: "MockToken2",
+    functionName: "mint",
+    args: [5000000000000000000n],
+  });
 
   const tabs = {
     Swap: <SwapForm pool={pool} refetchPool={refetchPool} />,
@@ -49,7 +60,14 @@ export const PoolActions: React.FC<PoolActionsProps> = ({ pool, refetchPool }) =
           {balance !== 0 && userHasNoTokens && (
             <Alert>
               Zero balance. To mint mock tokens{" "}
-              <span className="link" onClick={() => console.log("mint")}>
+              <span
+                className="link"
+                onClick={async () => {
+                  await mintToken1();
+                  await mintToken2();
+                  refetchTokenBalances();
+                }}
+              >
                 click here
               </span>
             </Alert>

diff --git a/packages/nextjs/app/pools/_components/PoolSelector.tsx b/packages/nextjs/app/pools/_components/PoolSelector.tsx
@@ -78,8 +78,8 @@ export const PoolSelector = ({
   }, [sumPoolHistory, productPoolHistory, isLoadingSumPoolHistory, isLoadingProductPoolHistory]);
 
   return (
-    <section className="my-7">
-      <div className="mb-4 flex justify-center gap-3">
+    <section className="mt-5 mb-7">
+      <div className="mb-4 flex flex-wrap justify-center gap-3 border border-base-100 p-1.5 rounded-full min-h-[45px]">
         {createdPools.length > 0 &&
           createdPools.map(pool => (
             <button
@@ -121,21 +121,21 @@ export const PoolSelector = ({
                 alt=""
                 className="!rounded-full absolute top-1 left-1"
                 src={blo(inputValue as `0x${string}`)}
-                width="45"
-                height="45"
+                width="37"
+                height="37"
               />
             )}
             <input
               value={inputValue}
               onChange={e => setInputValue(e.target.value)}
-              className={`input input-bordered bg-base-200 text-center h-[52px] w-[355px] sm:w-[550px] ${
+              className={`input input-bordered bg-base-200 text-center h-[44px] w-[355px] sm:w-[550px] ${
                 inputValue && "pl-10 pr-14"
               }`}
               placeholder="Search by pool addresss"
             />
             <button
-              className={`btn w-16 absolute top-0.5 right-0.5 ${
-                isValidAddress ? "bg-violet-300 hover:bg-violet-400" : ""
+              className={`btn btn-sm w-12 absolute top-1.5 right-1.5 border-none ${
+                isValidAddress ? "bg-violet-400 hover:bg-violet-400" : ""
               }`}
               type="submit"
               disabled={!isValidAddress}

diff --git a/packages/nextjs/app/pools/page.tsx b/packages/nextjs/app/pools/page.tsx
@@ -39,23 +39,15 @@ const Pools: NextPage = () => {
 
   return (
     <div className="flex items-center flex-col flex-grow py-10 px-5 md:px-10 xl:px-20">
-      <div>
-        <h1 className="text-3xl md:text-5xl font-semibold my-7">🌊 Custom Pools</h1>
-        <p className="text-xl my-0">
-          Balancer protocol is immensely flexible and extensible, allowing for the creation of any conceivable pool type
-          with custom curves, logic, parameters, and more. This tool is a playground for interacting with custom pools
-          that are compatible with Balancer v3 contracts.
-        </p>
+      <div className="">
+        <h1 className="text-3xl md:text-5xl font-semibold my-7 text-center">Custom Pools</h1>
+        <div className="text-xl">
+          Select one of the pools deployed to your local fork or search by pool contract address
+        </div>
       </div>
 
       <PoolSelector selectedPoolAddress={selectedPoolAddress} setSelectedPoolAddress={setSelectedPoolAddress} />
 
-      {!poolAddress && (
-        <div className="text-xl">
-          To get started, search by pool contract address or select one of the pools deployed to your local fork
-        </div>
-      )}
-
       {isLoading ? (
         <PoolPageSkeleton />
       ) : isError ? (

diff --git a/packages/nextjs/contracts/deployedContracts.ts b/packages/nextjs/contracts/deployedContracts.ts
@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     ConstantSumFactory: {
-      address: "0x579bB3a775c831526D5E94EF9ccd6601F62790Bc",
+      address: "0xe91cEDac266d3A331D307CA1834A29B1156126C4",
       abi: [
         {
           type: "constructor",
@@ -387,7 +387,7 @@ const deployedContracts = {
       },
     },
     ConstantProductFactory: {
-      address: "0x3626DEff4AFB3Acd8f217288cd33FBE3a337Ce0B",
+      address: "0x4655Ed483C8aE255e2098A171624bd012aBC6b40",
       abi: [
         {
           type: "constructor",
@@ -767,7 +767,7 @@ const deployedContracts = {
       },
     },
     MockToken1: {
-      address: "0x69221a99e5Bc30E0cf891992e958E3Ba3815bfc6",
+      address: "0xC17a00DfCb10af9cB41645186e89969C96D1a3B6",
       abi: [
         {
           type: "constructor",
@@ -872,7 +872,7 @@ const deployedContracts = {
         },
         {
           type: "function",
-          name: "mintAnyAmount",
+          name: "mint",
           inputs: [
             {
               name: "amount",
@@ -883,13 +883,6 @@ const deployedContracts = {
           outputs: [],
           stateMutability: "nonpayable",
         },
-        {
-          type: "function",
-          name: "mintFive",
-          inputs: [],
-          outputs: [],
-          stateMutability: "nonpayable",
-        },
         {
           type: "function",
           name: "name",
@@ -1132,7 +1125,7 @@ const deployedContracts = {
       },
     },
     MockToken2: {
-      address: "0x66B4cF3Be49431371E4241C462B4A75ae3a6E986",
+      address: "0xe093601b7740105Ce4f3A3740f387c9B7EBb683b",
       abi: [
         {
           type: "constructor",
@@ -1237,7 +1230,7 @@ const deployedContracts = {
         },
         {
           type: "function",
-          name: "mintAnyAmount",
+          name: "mint",
           inputs: [
             {
               name: "amount",
@@ -1248,13 +1241,6 @@ const deployedContracts = {
           outputs: [],
           stateMutability: "nonpayable",
         },
-        {
-          type: "function",
-          name: "mintFive",
-          inputs: [],
-          outputs: [],
-          stateMutability: "nonpayable",
-        },
         {
           type: "function",
           name: "name",
@@ -1497,7 +1483,7 @@ const deployedContracts = {
       },
     },
     MockVeBAL: {
-      address: "0x01eE8e2C72a2Cd4C5206823ce393520758F5Bc79",
+      address: "0x4d75F68A6b570d2FE0C84666e3Aec200e654D506",
       abi: [
         {
           type: "constructor",
@@ -1855,7 +1841,7 @@ const deployedContracts = {
       },
     },
     VeBALFeeDiscountHook: {
-      address: "0xB93eD7BbBFfcedfA8125f0653Bc07E7D229ffE21",
+      address: "0xF81277cEC0240B78aaCB542Eb0f0A1B9f6D7b5fC",
       abi: [
         {
           type: "constructor",

diff --git a/packages/nextjs/hooks/balancer/types.ts b/packages/nextjs/hooks/balancer/types.ts
@@ -143,6 +143,7 @@ export type UseTokens = {
   tokenAllowances: (bigint | undefined)[] | undefined;
   refetchTokenAllowances: () => void;
   tokenBalances?: (bigint | undefined)[];
+  refetchTokenBalances: () => void;
 };
 
 export type UseApprove = {

diff --git a/packages/nextjs/hooks/balancer/useTokens.ts b/packages/nextjs/hooks/balancer/useTokens.ts
@@ -13,7 +13,7 @@ export const useTokens = (amountsIn: InputAmount[]): UseTokens => {
   const connectedAddress = walletClient?.account.address || zeroAddress;
   const { chainId } = useTargetFork();
 
-  const { data: balances } = useContractReads({
+  const { data: balances, refetch: refetchTokenBalances } = useContractReads({
     contracts: amountsIn.map(token => ({
       address: token.address,
       abi: erc20Abi,
@@ -54,5 +54,6 @@ export const useTokens = (amountsIn: InputAmount[]): UseTokens => {
     tokenAllowances,
     refetchTokenAllowances,
     tokenBalances,
+    refetchTokenBalances,
   };
 };