Build an Uniswap Clone on TAC
Learn how to build an Uniswap Clone on TAC
In this guide, we will build an Uniswap V2 clone on TAC. We will be using the TAC EVM and the TAC SDK.
You can find the full code for this guide on GitHub.
Prerequisites
- Node.js
- NPM / Yarn
- Medium familiarity with Solidity
- An Ethereum wallet
Set up your environment
The first thing we need to do is set up our environment. In this guide, we will use Next.js to build our frontend.
Create a new Next.js project
To create a new Next.js project, run the following command:
We will also be using
shadcn/uiandtailwindcssfor styling. If you don’t have them installed, you can add them by runningnpm install shadcn-ui@latestand follow the instructions on the shadcn/ui website.
Install the dependencies
For this app, we will need many other dependencies like TAC SDK, TON connect, so go ahead and install them:
Start the development server
Next, start the development server:
You should see the next.js app running on http://localhost:3000.
Build the frontend
For the Uniswap V2, we have already deployed its smart contracts on TAC EVM. So, we will use the deployed contracts to build the frontend. But you can also deploy your own smart contracts and use them instead.
Set up the TON Connect
The TON Connect is a library that allows us to connect to the TON network using a wallet. We will use it to connect to the TAC EVM.
Inside the lib folder, which will be automatically generated by shadcn/ui, create a new file called ton.ts and add the following code to it:
Replace <manifestUrl> with the manifest URL of your app. You can learn more about manifest URL here.
And then wrap your App component with the TonProvider component:
Add a connect button
Once you have set up the TON Connect, you can add a connect button to your app. Inside components folder, create a new file called connect-button.tsx and add the following code to it:
In the above code, we have a ConnectWallet component that renders a button to connect to the wallet. It will show the connected wallet address and a button to disconnect.
Add a navigation bar
Next, create a new folder inside components called layout and add a new file called header.tsx to it. This will be our navigation bar.
In the above code, we have a Header component that renders the navigation bar. It includes a logo, a list of navigation items, and a connect wallet button.
Create the home page
Next, create a new file called home.tsx inside layout folder and add the following code to it:
In the above code, we have a Home component that renders the home page. It includes a header, a title, a token swap component, and a description.
We will use this component as the home page of our application.
Create the swap component
This is the most important component of our application. It allows users to swap tokens. And it is very complicated so, we’ve commented it thoroughly to make it easier to understand.
Create a new file called swap.tsx inside components folder and add the following code to it:
In the above code:
- We have a
TokenSwapcomponent that renders the token swap section. It includes a sell section, a buy section, and a get started button. - The sell section allows users to enter the amount of tokens they want to sell.
- The buy section shows the amount of tokens the user will receive.
- The get started button allows users to connect their wallet and swap tokens.
- Once the user swap a token:
- we are creating a
JettonTransferDataobject that contains the token address, the amount of tokens to sell, and the amount of TON to send to the user. - then we are creating an
EVMProxyMsgobject that contains the address of the Uniswap V2 router, the method name, and the encoded parameters. - then we are creating a
RawSenderobject that contains the mnemonic of the user’s wallet. - finally we are sending the transaction to the TAC network using the
TacSdkobject.
- we are creating a
And that is it! You have now a working Uniswap V2 clone on TAC.
You can try connecting your TON wallet and swap tokens.