Add liquidity pop-up UI development

Author of this section: @Fish

in this talk, we will implement the UI of Wtfswap adding liquidity (position) pop-up window.

Add pop-up window

we refer to the following design draft:

the design draft is only for visual reference, we will not fully realize the effect of the design draft, only through the necessary code to achieve the necessary functions.

And add a course for trading pool pop-up UI similarly, we first create a component WtfAddPositionModal defining its component properties. This component collects information about the trading pool entered by LP through a pop-up window form and passes the field that creates the trading pool to the page through the callback function provided in the parameter.

We directly copy WtfAddPositionModal/index.tsx the code, make changes:

import { Modal, Form, Input, InputNumber } from "antd";

interface CreatePositionParams {
  token0: string;
  token1: string;
  index: number;
  amount0Desired: BigInt;
  amount1Desired: BigInt;
  recipient: string;
  deadline: BigInt;
}

interface AddPositionModalProps {
  open: boolean;
  onCancel: () => void;
  onCreatePosition: (params: CreatePositionParams) => void;
}

export default function AddPositionModal(props: AddPositionModalProps) {
  const { open, onCancel, onCreatePosition } = props;
  const [form] = Form.useForm();

  return (
    <Modal
      title="Add Position"
      open={open}
      onCancel={onCancel}
      okText="Create"
      onOk={() => {
        form.validateFields().then((values) => {
          onCreatePosition({
            ...values,
            amount0Desired: BigInt(values.amount0Desired),
            amount1Desired: BigInt(values.amount1Desired),
            deadline: BigInt(Date.now() + 100000),
          });
        });
      }}
    >
      <Form layout="vertical" form={form}>
        <Form.Item required label="Token 0" name="token0">
          <Input />
        </Form.Item>
        <Form.Item required label="Token 1" name="token1">
          <Input />
        </Form.Item>
        <Form.Item required label="Index" name="index">
          <InputNumber />
        </Form.Item>
        <Form.Item required label="Amount0 Desired" name="amount0Desired">
          <Input />
        </Form.Item>
        <Form.Item required label="Amount1 Desired" name="amount1Desired">
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
}

because and add a course for trading pool pop-up UI similar, so the specific will not be expanded, compared AddPoolModal to say, AddPositionModal the main form fields are different. For specific form fields, please refer to the contract code. In MintParams Definition:

struct MintParams {
    address token0;
    address token1;
    uint32 index;
    uint256 amount0Desired;
    uint256 amount1Desired;
    address recipient;
    uint256 deadline;
}

introducing AddPositionModal

we then introduce in the liquidity list UI implemented in the previous talk. AddPositionModal :

import React from "react";
import { Flex, Table, Space, Typography, Button } from "antd";
import type { TableProps } from "antd";
import WtfLayout from "@/components/WtfLayout";
+ import AddPositionModal from "@/components/AddPositionModal";
import styles from "./positions.module.css";

const columns: TableProps["columns"] = [
  // ...
];

const PoolListTable: React.FC = () => {
  const [openAddPositionModal, setOpenAddPositionModal] = React.useState(false);
  const data = [
    // ...
  ];
  return (
+    <>
      <Table
        title={() => (
          <Flex justify="space-between">
            <div>My Positions</div>
            <Space>
              <Button
                type="primary"
                onClick={() => {
+                  setOpenAddPositionModal(true);
                }}
              >
                Add
              </Button>
            </Space>
          </Flex>
        )}
        columns={columns}
        dataSource={data}
      />
+      <AddPositionModal
+        open={openAddPositionModal}
+        onCancel={() => {
+          setOpenAddPositionModal(false);
+        }}
+        onCreatePosition={(createPram) => {
+          console.log("get createPram", createPram);
+          setOpenAddPositionModal(false);
+        }}
+      />
+    </>
  );
};

export default function WtfswapPool() {
  return (
    <WtfLayout>
      <div className={styles.container}>
        <Typography.Title level={2}>Postions</Typography.Title>
        <PoolListTable />
      </div>
    </WtfLayout>
  );
}

we pass the state in the component openAddPositionModal to control the opening and closing of the pop-up window, in addition onCreatePosition the creation of transaction pools is handled in, and the logic of the creation will be supplemented in subsequent and chain interaction courses.

In this way, our part of adding liquidity UI is completed, and the final effect is:

please refer to the complete code: AddPositionModal/index.tsx

we'll refine the code in a later lesson, adding logic to call the contract interface to add liquidity.