EN

Initialize front-end code and technical analysis

Author of this section: @Fish

this lecture will initialize the front-end code, build the basic UI framework, and do a preliminary technical analysis.

Initialize front-end code

we will continue to base React + Next.js + TypeScript to initialize our project and directly follow the project code created in the previous lesson.

If you haven't created a project yet, you can refer 01_QuickStart the contents of the completed initialization. In Wtfswap's development course, we will not overwrite the original code, but create a new one. pages/wtfswap/index.tsx file as the entry file for Wtfswap.

Create a new file and initialize the following: 

export default function Wtfswap() {
  return <div>Wtfswap</div>;
}

execution npm run dev rear Open http://localhost:3000/wtfswap confirm whether the page is displayed normally, if you can see Wtfswap The word indicates that the initialization was successful. A journey of a thousand miles begins with a single step. You have completed the first step and are one step closer to the implementation of Wtfswap.

Front-end frame construction

we are based on overall design of Wtfswap to build the front-end framework. First of all, we need to confirm the key pages and components: 

- pages
  - components
    - WtfLayout/index.tsx # Wtfswap 的整体布局
    - WtfLayout/Header.tsx # Wtfswap 整体布局的头部
    - WtfAddPositionModal/index.tsx # 创建流动性的弹窗
  - wtfswap
    - index.tsx # Wtfswap 首页，也就是 Swap 页面
    - pool.tsx # Pool 页面
    - positions.tsx # Positions 页面

let's create first. WtfLayout component, this component is the overall layout of Wtfswap, including the header. In pages/components new under directory WtfLayout/Header.tsx file and initialize the following: 

export default function WtfHeader() {
  return <div>WtfHeader</div>;
}

new WtfLayout/index.tsx file and initialize the following: 

import React from "react";
import Header from "./Header";

interface WtfLayoutProps {
  children: React.ReactNode;
}

const WtfLayout: React.FC<WtfLayoutProps> = ({ children }) => {
  return (
    <div>
      <Header />
      {children}
    </div>
  );
};

export default WtfLayout;

next we're in pages/wtfswap/index.tsx introduced in WtfLayout components: 

+ import WtfLayout from "@/components/WtfLayout";

export default function Wtfswap() {
-   return <div>Wtfswap</div>;
+   return <WtfLayout>Wtfswap</WtfLayout>;
}

Wtfswap the content of the component is nested in WtfLayout will be used WtfLayout Of children property is passed in and WtfHeader the components are rendered together, so that in http://localhost:3000/wtfswap on you can see WtfHeader and Wtfswap the words:

similarly, we continue to create wtfswap/positions.tsx and wtfswap/pool.tsx file and initialize the following so that you can jump from the Pool page to the Positions page: 

// wtfswap/positions.tsx
import WtfLayout from "@/components/WtfLayout";

export default function WtfswapPositions() {
  return <WtfLayout>WtfswapPositions</WtfLayout>;
}
// wtfswap/pool.tsx
import WtfLayout from "@/components/WtfLayout";
import Link from "next/link";

export default function WtfswapPool() {
  return (
    <WtfLayout>
      WtfswapPool <Link href="/wtfswap/positions">My Positions</Link>
    </WtfLayout>
  );
}

visit http://localhost:3000/wtfswap/pool and http://localhost:3000/wtfswap/positions you can see the results.

Technical analysis and follow-up R &amp; D plan

after the basic framework is built, we will carry out follow-up research and development. Before research and development, we will do a brief technical analysis and initially determine the follow-up research and development plan.

In addition to UI development, we also need to consider the business logic of Wtfswap, here we briefly list some key business logic and do a simple technical analysis:

  1. connect Wallet : Users need to connect wallets to make transactions, in the course we use ethereum adapter for Ant Design Web3 to connect wallets and chains. We need to be in WtfLayout introduced in WagmiWeb3ConfigProvider provide all components with the ability to connect wallets and chains. In addition, it needs to be WtfHeader used in ConnectorModal and other components to implement the UI of the connected wallet, supporting various forms of connected wallets and switching chains.
  2. The Swap page the: Swap page is the core page of Wtfswap, which will be based on Ant Design and Ant Design Web3 the basic components are built and used. wagmi of Hooks to interact with the chain.
  3. The Pool pageThe: Pool page needs to display the existing trading pools. UI is mainly based on Ant Design Table component development. The data is also used. wagmi get it directly from the chain.
  4. Positions page : the Positions page needs to display the information of the LP fund pool and support the operation of withdrawing the fund pool. The UI is mainly based on Ant Design Table component development. The data is also used. wagmi get it directly from the chain.
  5. Add liquidity (Position) : Adding liquidity is one of the core functions of Wtfswap, we need WtfAddPositionModal the component implements the UI that creates the fund pool and uses wagmi's Hooks to interact with the chain. WtfAddPositionModal components will be pages/wtfswap/positions.tsx reference, Ant Design based Modal component implementation.

Next, let's enter the back of the research and development link, and gradually realize the function of Wtfswap.