Support viewing and creating transaction pools

Author of this section: @Fish

at the beginning of this talk, we will develop the logic related to the front-end call contract, starting with support for adding trading pairs.

Get transaction pool list

we were in the previous PoolManager contract development has been implemented in getAllPools method, this method can get a list of all the trading pools. We call this method on the front end to get a list of all the trading pools.

It should be noted that in actual DApp development, this method is more appropriate to be maintained and returned by the server instead of being implemented in the contract. We only do this to optimize the course content.

We passed in The Last Lecture. npx wagmi generate updated utils/coontract.ts file, which contains a series of React Hooks, we can easily call the contract method.

We just need to use useReadPoolManagerGetAllPools you can get a list of all the trading pools, as shown below, and a few key lines of code can be completed:

+ import { useReadPoolManagerGetAllPools } from "@/utils/contracts";

const PoolListTable: React.FC = () => {
+  const { data = [] } = useReadPoolManagerGetAllPools({
+    address: getContractAddress("PoolManager"),
+  });
  return (
    <>
      <Table
        rowKey="pool"
        scroll={{ x: "max-content" }}
        title={() => (
          <Flex justify="space-between">
// ...
          </Flex>
        )}
        columns={columns}
+        dataSource={data}
      />
    </>
  );
};

for similar getAllPools For this reading method, because it does not involve changes in the state of the chain, we can call it directly without initiating a transaction or consuming GAS.

Create a transaction pool

to create a trading pool, you need to call createAndInitializePoolIfNecessary method, which is a write method that needs to initiate a transaction and evoke the user's wallet signature.

The key code is as follows:

import {
  useReadPoolManagerGetAllPools,
+  useWritePoolManagerCreateAndInitializePoolIfNecessary,
} from "@/utils/contracts";


const PoolListTable: React.FC = () => {
  const [openAddPoolModal, setOpenAddPoolModal] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
-  const { data = [] } = useReadPoolManagerGetAllPools({
+  const { data = [], refetch } = useReadPoolManagerGetAllPools({
    address: getContractAddress("PoolManager"),
  });
+  const { writeContractAsync } =
+    useWritePoolManagerCreateAndInitializePoolIfNecessary();
  return (
    <>
      <Table
        rowKey="pool"
        scroll={{ x: "max-content" }}
        title={() => (
          <Flex justify="space-between">
            <div>Pool List</div>
            <Space>
              <Link href="/wtfswap/positions">
                <Button>My Positions</Button>
              </Link>
              <Button
                type="primary"
+               loading={loading}
                onClick={() => {
                  setOpenAddPoolModal(true);
                }}
              >
                Add Pool
              </Button>
            </Space>
          </Flex>
        )}
        columns={columns}
        dataSource={data}
      />
      <AddPoolModal
         open={openAddPoolModal}
        onCancel={() => {
          setOpenAddPoolModal(false);
        }}
        onCreatePool={async (createParams) => {
           console.log("get createParams", createParams);
+          setLoading(true);
+          setOpenAddPoolModal(false);
+          try {
+            await writeContractAsync({
+              address: getContractAddress("PoolManager"),
+              args: [
+                {
+                  token0: createParams.token0,
+                  token1: createParams.token1,
+                  fee: createParams.fee,
+                  tickLower: createParams.tickLower,
+                  tickUpper: createParams.tickUpper,
+                  sqrtPriceX96: createParams.sqrtPriceX96,
+                },
+              ],
+            });
+            message.success("Create Pool Success If Necessary");
+            refetch();
+          } catch (error: any) {
+            message.error(error.message);
+          } finally {
+            setLoading(false);
+          }
         }}
      />
    </>
  );
};

the core logic is perfected onCreatePool method, it calls writeContractAsync create a transaction pool, a process that evokes the user wallet and asks for the user's signature. In addition, update the trading pool list after successful creation. It should be noted that we are using writeContractAsync instead writeContract , the former will wait until the real creation is successful before returning, the latter will return immediately.

Complete the code you can in demo/pages/wtfswap/pool.tsx view.

The final effect is as follows: