Pool inventory page UI development

Author of this section: @Fish

in this talk, we will implement the UI page development of Wtfswap's trading pool list.

Framework building

first, let's look at the design draft:

this page is mainly used to display a list showing all the current trading pools. There are also two buttons, which are the entrance to add a trading pool and view the liquidity list.

We will mainly use Ant Design Table component to show the list. First, we build the overall structure based on the Table component and some other layout components of Ant Design:

import React from "react";
import { Flex, Table, Space, Typography, Button } from "antd";
import WtfLayout from "@/components/WtfLayout";
import Link from "next/link";

const PoolListTable: React.FC = () => {
  return (
    <Table
      title={() => (
        <Flex justify="space-between">
          <div>Pool List</div>
          <Space>
            <Link href="/wtfswap/positions">
              <Button>My Positions</Button>
            </Link>
            <Button type="primary">Add Pool</Button>
          </Space>
        </Flex>
      )}
    />
  );
};

export default function WtfswapPool() {
  return (
    <WtfLayout>
      <Typography.Title level={2}>Pool</Typography.Title>
      <PoolListTable />
    </WtfLayout>
  );
}

we 've added a new one to the page PoolListTable component, which ensures that our form-related code is WtfLayout package, otherwise the subsequent course will report an error when calling wagmi's Hooks in the code.

You will get the following effect:

then we build a new one pool.module.css file, add margins to the outermost layer, optimize the style:

.container {
  margin: 24px 148px;
}

then introduce this style in the page:

import React from "react";
import { Flex, Table, Space, Typography, Button } from "antd";
import WtfLayout from "@/components/WtfLayout";
import Link from "next/link";
+ import styles from "./pool.module.css";

const PoolListTable: React.FC = () => {
  return (
    <Table
      title={() => (
        <Flex justify="space-between">
          <div>Pool List</div>
          <Space>
            <Link href="/wtfswap/positions">
              <Button>My Positions</Button>
            </Link>
            <Button type="primary">Add Pool</Button>
          </Space>
        </Flex>
      )}
    />
  );
};

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

the final overall structure effect is as follows:

add Mock data

Next, let's add some Mock data to populate the table. First of all, we need to define the columns of the table, and we display all the trading pool information (this may not be consistent with the design draft, which is more of a UI-style reference, please ignore it).

import type { TableProps } from "antd";

const columns: TableProps["columns"] = [
  {
    title: "Token 0",
    dataIndex: "token0",
    key: "token0",
  },
  {
    title: "Token 1",
    dataIndex: "token1",
    key: "token1",
  },
  {
    title: "Index",
    dataIndex: "index",
    key: "index",
  },
  {
    title: "Fee",
    dataIndex: "fee",
    key: "fee",
  },
  {
    title: "Fee Protocol",
    dataIndex: "feeProtocol",
    key: "feeProtocol",
  },
  {
    title: "Tick Lower",
    dataIndex: "tickLower",
    key: "tickLower",
  },
  {
    title: "Tick Upper",
    dataIndex: "tickUpper",
    key: "tickUpper",
  },
  {
    title: "Tick",
    dataIndex: "tick",
    key: "tick",
  },
  {
    title: "Price",
    dataIndex: "sqrtPriceX96",
    key: "sqrtPriceX96",
    render: (value: bigint) => {
      return value.toString();
    },
  },
];

For the specific fields in the above code, you can refer to our previous contract. IPoolManager.sol the definition.

Give Table component Add dataSource and columns properties:

const PoolListTable: React.FC = () => {
  const data = [
    {
      token0: "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984",
      token1: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
      index: 0,
      fee: 3000,
      feeProtocol: 0,
      tickLower: -100000,
      tickUpper: 100000,
      tick: 1000,
      sqrtPriceX96: BigInt("7922737261735934252089901697281"),
    },
  ];
  return (
    <Table
      title={() => (
        <Flex justify="space-between">
          <div>Pool List</div>
          <Space>
            <Link href="/wtfswap/positions">
              <Button>My Positions</Button>
            </Link>
            <Button type="primary">Add Pool</Button>
          </Space>
        </Flex>
      )}
      columns={columns}
      dataSource={data}
    />
  );
};

in this way, our UI part is completed, and the final effect is:

please refer to the complete code: pool.tsx

we'll refine the code in a later lesson, adding the logic to call the contract interface to get the list of actual trading pools.