Support for managing liquidity

Author of this section: @Fish

this lecture will complete the logic of obtaining liquidity lists, adding liquidity, removing liquidity, and extracting liquidity related to front-end and chain interactions.

Get Liquidity List

we were in the previous PositionManager contract development has been implemented in getAllPositions method, similar to the previous lecture, we go directly through useReadPositionManagerGetAllPositions Hook to get all the liquidity lists.

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

const PoolListTable: React.FC = () => {
+ const { data = [], refetch } = useReadPositionManagerGetAllPositions({
+   address: getContractAddress("PositionManager"),
+ });

  return (
    <>
      <Table
        rowKey="id"
        scroll={{ x: "max-content" }}
        title={() => (
// ...
        )}
        columns={columns}
+        dataSource={data}
      />
    </>
  );
};

Add liquidity

adding liquidity is more troublesome than adding a trading pool, because adding liquidity involves the transfer of Token and requires LP authorization. That is, you need to call before adding liquidity. ERC20 of the contract approve method, authorizing PositionManager contract to manage the user's Token.

We can use useWriteErc20Approve Hook to authorize, use useWritePositionManagerMint Hook to add liquidity.

关键代码如下：

```diff
import {
  useReadPositionManagerGetAllPositions,
+  useWriteErc20Approve
+  useWritePositionManagerMint,
} from "@/utils/contracts";

const PoolListTable: React.FC = () => {
+  const [loading, setLoading] = React.useState(false);
  const [openAddPositionModal, setOpenAddPositionModal] = React.useState(false);
  const { account } = useAccount();
  const { data = [], refetch } = useReadPositionManagerGetAllPositions({
    address: getContractAddress("PositionManager"),
  });

  const { writeContractAsync } = useWritePositionManagerMint();
  const { writeContractAsync: writeErc20Approve } = useWriteErc20Approve();

  return (
    <>
      <Table
        rowKey="id"
        scroll={{ x: "max-content" }}
        title={() => (
          <Flex justify="space-between">
            <div>Positions</div>
            <Space>
              <Button
                type="primary"
+                loading={loading}
                onClick={() => {
                  setOpenAddPositionModal(true);
                }}
              >
                Add
              </Button>
            </Space>
          </Flex>
        )}
        columns={columns}
        dataSource={data}
      />
      <AddPositionModal
        open={openAddPositionModal}
        onCancel={() => {
          setOpenAddPositionModal(false);
        }}
        onCreatePosition={async (createParams) => {
+          console.log("get createParams", createParams);
+          if (account?.address === undefined) {
+            message.error("Please connect wallet first");
+            return;
+          }
+          setOpenAddPositionModal(false);
+          setLoading(true);
+          try {
+            await writeErc20Approve({
+              address: createParams.token0,
+              args: [
+                getContractAddress("PositionManager"),
+                createParams.amount0Desired,
+              ],
+            });
+            await writeErc20Approve({
+              address: createParams.token1,
+              args: [
+                getContractAddress("PositionManager"),
+                createParams.amount1Desired,
+              ],
+            });
+            await writeContractAsync({
+              address: getContractAddress("PositionManager"),
+              args: [
+                {
+                  token0: createParams.token0,
+                  token1: createParams.token1,
+                  index: createParams.index,
+                  amount0Desired: createParams.amount0Desired,
+                  amount1Desired: createParams.amount1Desired,
+                  recipient: account?.address as `0x${string}`,
+                  deadline: createParams.deadline,
+                },
+              ],
+            });
+            refetch();
+          } catch (error: any) {
+            message.error(error.message);
+          } finally {
+            setLoading(false);
+          }
        }}
      />
    </>
  );
};

The core logic is perfected onCreatePosition method, which calls the authorization and Mint's writeContractAsync method, a total of three times will evoke the wallet signature, inject liquidity.

Remove and extract liquidity

we add two action buttons at the end of each column Remove and Coolect , respectively, calling the contract's burn and collect method, provided to LP to remove liquidity and withdraw its Token.

const { writeContractAsync: writePositionManagerBurn } =
  useWritePositionManagerBurn();
const { writeContractAsync: writePositionManagerCollect } =
  useWritePositionManagerCollect();

const columns: TableProps["columns"] = [
  // ...
  {
    title: "Actions",
    key: "actions",
    fixed: "right",
    render: (_, item) => {
      if (item.owner !== account?.address) {
        return "-";
      }
      return (
        <Space className={styles.actions}>
          {item.liquidity > 0 && (
            <a
              onClick={async () => {
                try {
                  await writePositionManagerBurn({
                    address: getContractAddress("PositionManager"),
                    args: [item.id],
                  });
                  refetch();
                } catch (error: any) {
                  message.error(error.message);
                }
              }}
            >
              Remove
            </a>
          )}
          {(item.tokensOwed0 > 0 || item.tokensOwed1 > 0) && (
            <a
              onClick={async () => {
                try {
                  await writePositionManagerCollect({
                    address: getContractAddress("PositionManager"),
                    args: [item.id, account?.address as `0x${string}`],
                  });
                  refetch();
                } catch (error: any) {
                  message.error(error.message);
                }
              }}
            >
              Collect
            </a>
          )}
        </Space>
      );
    },
  },
];

The above is the code of the core logic, it should be noted that because we are in Actions Hooks needs to be called in the operation of this column, so we need columns the whole moves inside the component.

In addition, we also need to make a simple judgment, only allow the current user to operate their own liquidity, and only liquidity Remove positions greater than 0 tokensOwed0 or tokensOwed1 the position is withdrawn.

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

The final effect is as follows: