In this course, you’ll learn how to create your own decentralized exchange application using Move on Sui, the native language of the Sui blockchain. You will begin with setting up the development environment. You will then move to building the DEX from scratch. The app will allow you to swap ETH and USDC tokens with each other. After building the DEX, you will deploy the dApp on Sui testnet. Lastly, you will integrate the frontend, run it, and interact with the dApp.

A hands-on course that equips you with the skill to build an efficient and quality token swap dApp on the Sui blockchain.

Build a Token Dex dApp On the Sui Blockchain

# What Are We Building Today

Gm everyone ☀️, today we are very excited to bring the fourth course of our detailed series about Sui blockchain for developers on Metaschool. Let’s start the fourth course by congratulating you for completing the first three courses on Sui. Woohoo!

So, what are we building today? We will be building a Token Swap Defi application using Move on Sui, which will help users implement the swap feature in a dex. This dApp will help you swap the Ethereum tokens with the USDC tokens. This project will help you learn to build the end-to-end defi application using Move on Sui.

Let’s look at what your Dex dApp will look like.

![frontend-interact-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/1.%20Getting%20Started/assets/frontend-interact-1.png?raw=true)

## Course Overview

We will:

1. Set up Sui wallet and dev environment (if not already set)
2. Set up the Move project
3. Write different smart contracts in Move on Sui
4. Build the Swap dApp from start to finish
5. Write the test for the Move smart contracts
6. Deploy the dApp on the Sui blockchain
7. Connect the dApp with the frontend
8. Run and interact with the frontend

## Who exactly should take this course?

This course is for web3 developers and builders who wish to build on the Sui blockchain and have completed our first three courses on Sui. You should have basic programming knowledge as it will help you have a quick start to this course. 

## What you will be getting out of this course?

As a developer, you will be getting the following outcomes when you complete this course:

1. Build and deploy the token smart contract on Sui
2. Explore opportunities within the Sui ecosystem via SuixMetaschool Discord House
3. Earn up to 1000 XPs
4. Claim your NFT on course completion

## Proof of completion

If you complete this course with me, you will be getting XPs and a special NFT that will unlock many more opportunities for you on the Metaschool platform. Here is what the NFT looks like.

![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_sui_c1/What%20Are%20We%20Learning%20Today%3F/image.gif?raw=true)


Now before we move forward, let’s set some house rules first.

1. Please, do your quick assignments properly. 
2. Join [our discord server](https://discord.gg/vbVMUwXWgc) and ask all relevant questions there.
3. Stay happy and positive!

Alright guys, no need to wait any longer. See you in the next lesson!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/1.%20Getting%20Started/1.%20What%20Are%20We%20Building%20Today.md

What Are We Building Today

# Introduction to DeFi and Dex

We’re so proud of you for deciding to take this course. You have now completed three courses in the Sui learning path and this is going to be your fourth course. 🎊 You are now equipped with all the basic knowledge of the Sui blockchain. In this lesson, we will explore what DeFi is, how Sui helps build DeFi applications, and what features our DeFi application will have.

## Introducing DeFi applications

So, imagine if your money didn't need traditional banks or financial big-shots. That's what DeFi does. Instead of relying on the usual suspects, it lets regular folks like you and me do financial stuff directly with each other. There are no middlemen, just peer-to-peer power.

### How does DeFi work?

Here's the scoop on how DeFi works:

1. DeFi operates on blockchain technology, ensuring secure and immutable transactions through digital blocks.
2. DeFi bypasses traditional intermediaries like banks, offering lower fees and higher interest rates by facilitating direct peer-to-peer transactions.
3. User-friendly applications facilitate DeFi activities such as lending, borrowing, and trading, making financial interactions accessible to all.
4. Leveraging blockchain, DeFi transcends geographical barriers, allowing seamless financial interactions worldwide.

### **Goals of DeFi**

- **Accessibility:** Anyone with an internet connection can interact with a DeFi protocol.
- **Security and Transparency:** Everything's on the blockchain, so it's super secure, and transactions are open for all to see without revealing who you are.
- **Autonomy:** DeFi doesn't need big banks. It's like the rebel leader of finance, doing its thing without the need for central control.

Remember, while DeFi doesn't give you complete anonymity, it's all about changing the financial game for the better.

## DeFi on Sui

Let’s discuss what role Sui plays in DeFi applications and why they are reliable platforms for DeFi creation. 

- Leverages a novel consensus mechanism for efficient and stable transactions, catering to simple and complex DeFi operations.
- Implements parallel execution to execute transactions simultaneously, eliminating delays and ensuring smooth DeFi interactions.
- Introduces storage fund tokenomics, revolutionizing blockchain storage costs and maintaining fair fees, thus creating a well-organized digital ecosystem for DeFi

## What is a decentralized exchange?

A decentralized exchange (often abbreviated as DEX) is a type of cryptocurrency exchange that operates without a central authority or intermediary. Instead of relying on a centralized platform to facilitate trades and hold users' funds, DEXs use smart contracts or other decentralized protocols to enable peer-to-peer trading directly between users.

We all would have used Metamask at a certain point and you would have held some tokens. Now, if you want to swap your token for another token, you will need an exchange who can do that. There are two ways to go about it - Centralized exchange and Decentralized Exchange. 

A traditional or centralized exchange is like a bank: it holds your tokens and manages the trades. But just as a bank can be a target for thieves, centralized exchanges can be vulnerable to hacks or misuse. But with decentralized exchange, you can swap your tokens without any centralized entity but the set of rules governed by smart contracts. 

## Advantages of decentralized exchanges

1. **Security**: Users retain control of their private keys and funds, reducing the risk of centralized exchange hacks or thefts.
2. **Privacy**: Users can trade directly with one another without the need for intermediaries.
3. **Censorship Resistance**: Decentralized exchanges are generally more censorship-resistant since they don't rely on centralized servers or authorities.
4. **Interoperability**: Some decentralized exchanges can facilitate trading between different blockchain platforms or assets.

## That’s a wrap

In a nutshell, Move and Sui Move create the ultimate DeFi HQ. Move's asset-friendly design meets Sui's scalability and low-cost storage, offering a sweet spot for real-time, low-latency trading in the DeFi realm. Next, we will start building and setting up our development environment.

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/1.%20Getting%20Started/2.%20Introduction%20to%20DeFi%20and%20Dex.md

Introduction to DeFi and Dex

victory

deepika

Getting Started

# Set Up Environment

Welcome back! In this lesson, you'll learn how to set up the environment and the Move project for running your code.

**Note:** We assume that you have already installed the Sui and Rust in your system in the first course of the Sui course path. If not, you can go to this [link](https://metaschool.so/courses/build-on-move-on-sui-and-explore-its-applications/lesson/aa506de1-411f-4675-b9bb-36c746ee31ee) and install it. 

## Check your version

Open your favorite terminal. Let’s check your Sui installation version.

```
sui --version
```

**Note:** If you face errors while installing Sui please make sure to follow all the steps in the lesson [Deploy Your First Sui Contract.](https://metaschool.so/courses/build-on-move-on-sui-and-explore-its-applications/lesson/1f15e1bb-7023-4487-ab7d-21233318af91)

## Set up the Move project

Open your favorite terminal because we will be running a few commands to achieve our goal.

The first step is to initialize a workspace environment. This will contain the basic files for running any Move file. You can create the workspace using the following command; I have named mine as `dex`:

```
sui move new dex
```

The command will generate a folder named `dex` and it will contain a file `Move.toml` and a folder `sources`.

- P.S.: I am using Visual Studio IDE as it visualizes the structure of my workspace better.

Time to create files for coding, so follow the steps given below:

- Now create 3 new files in the `sources` folder named:
    - `eth.move`
    - `usdc.move`
    - `dex.move`
    
    We will be writing our code in these files.
    
- Next, create a `test` folder in `sources` and create a file named `test_dex.move` inside it.

This is how your project structure will look like:

![Screen Shot 2024-01-29 at 4.26.19 PM.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/2.%20Setting%20Up%20the%20Development%20Environment/assets/Screen_Shot_2024-01-29_at_4.26.19_PM.png?raw=true)

## Check your wallet

You can view the current active address using the following command:

```
sui client active-address
```

If you do not have an active address, follow the steps given below:

1. Run the following command to create your Sui account:
    
    ```
    sui client new-address ed25519
    ```
    
    It will generate the output something like this:
    
    ![deploy-5.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/2.%20Setting%20Up%20the%20Development%20Environment/assets/deploy-5.png?raw=true)
    
- **Important**: Save the recovery phrase, it is important to have it to import your wallet.
1. Replace `[YOUR_ADDRESS]` in the command below with the address you received after running the last command and run it.
    
    ```
    sui client switch --address [YOUR_ADDRESS]
    ```
    
2. Head over to the [Sui Testnet faucet discord channel](https://discord.com/channels/916379725201563759/1037811694564560966) and paste “!faucet [YOUR_ADDRESS]” to receive 10 SUI tokens.

## Wrap up

In this lesson, we learned how to set up our project for writing code in Move on Sui. By following the provided steps, we are now ready to start writing code for our Move project. Happy coding!

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/2.%20Setting%20Up%20the%20Development%20Environment/1.%20Set%20Up%20Environment.md

Set Up Environment

alpha

Andrey

Setting Up the Development Environment

# Writing the Ethereum Smart Contract

Welcome back! You are all set to start building the dApp. So why wait, let’s dive right into the coding.

## Ethereum smart contract

Navigate to `sources/eth.move`.

The first task is to create a currency for our faucet I am naming it `ETH`, you can name it however you like.

```
use std::option;
use sui::url;
use sui::transfer;
use sui::coin;
use sui::tx_context::{Self, TxContext};

struct ETH has drop {}
```

- The code starts by importing necessary library (`std::option`, `sui::url`, `sui::transfer`, `sui::coin`, `sui::tx_context::{Self, TxContext}`).
- Next, a struct named `ETH` is defined with drop functionality. This struct will be used as a witness for certain operations.

```
fun init(witness: ETH, ctx: &mut TxContext) {
  let (treasury_cap, metadata) = coin::create_currency<ETH>(
    witness,
    9,
    b"ETH",
    b"ETH Coin",
    b"Ethereum Native Coin",
    option::some(url::new_unsafe_from_bytes(b"https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png")),
    ctx
  );

  transfer::public_transfer(treasury_cap, tx_context::sender(ctx));

  transfer::public_share_object(metadata);
}

```

- The module initialization function (`init`) is defined, which takes a witness of type `ETH` and a mutable reference to `TxContext`.
- Inside the `init` function:
    - `coin::create_currency` is called to create a new currency (ETH Coin) with specific parameters such as witness, decimal places, symbol, name, icon URL, and optional metadata.
    - The treasury capability and metadata obtained from `create_currency` are then used to transfer the treasury capability to the deployer (`transfer::public_transfer`) and share the metadata publicly (`transfer::public_share_object`).

```
#[test_only]
public fun init_for_testing(ctx: &mut TxContext) {
	  init(ETH {}, ctx);
}
```

- Finally, test functions are defined. In this case, there's a test-only initialization function (`init_for_testing`) annotated with `#[test_only]`. This function calls the main initialization function (`init`) with a dummy `ETH` witness for testing purposes.

## Complete code

The complete code for `eth.move`  is:

```
module dex::eth {
  use std::option;

  use sui::url;
  use sui::transfer;
  use sui::coin;
  use sui::tx_context::{Self, TxContext};

  struct ETH has drop {}

  fun init(witness: ETH, ctx: &mut TxContext) {
      let (treasury_cap, metadata) = coin::create_currency<ETH>(
            witness, 
            9, 
            b"ETH",
            b"ETH Coin", 
            b"Ethereum Native Coin", 
            option::some(url::new_unsafe_from_bytes(b"https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png")), 
            ctx
        );

      transfer::public_transfer(treasury_cap, tx_context::sender(ctx));
      transfer::public_share_object(metadata);
  }

  #[test_only]
  public fun init_for_testing(ctx: &mut TxContext) {
    init(ETH {}, ctx);
  }
}
```

## Wrap up

In this lesson, we coded for creating a new currency. In the next lesson, we will be writing the contracts for USDC. Let’s go!

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/3.%20Build%20Your%20Swap%20DApp/1.%20Writing%20the%20Ethereum%20Smart%20Contract.md

Writing the Ethereum Smart Contract

# Writing the USDC Smart Contract

Welcome back again! Let’s get started right away to create our USDC smart contract. 

## USDC smart contract

Firstly, navigate to `sources/usdc.move` and start writing the following code:

First of all, we start with defining our contract and importing the essential packages that we will use in our code.

```
module dex::usdc {
  use std::option;

  use sui::url;
  use sui::transfer;
  use sui::coin;
  use sui::tx_context::{Self, TxContext};
```

Next, we will define the struct named `USDC`. It is a one-time witness to create a Current. It has the drop ability so it cannot be transferred or stored.

```jsx
struct USDC has drop {}
```

Then, we create an `init` function that runs once on module creation and accepts a one-time `witness` as the first argument. 

We have created a `witness` struct with 1 ability, `drop`, it guarantees that there is only one in the entire network as you can only get it in the `init` function.

Inside the `init` function, we call the `create_currency`. Creating a currency requires a one-time `witness` to ensure it is a unique coin and only the holder of the `TreasuryCap` is allowed to mint and burn this coin.

```jsx
fun init(witness: USDC, ctx: &mut TxContext) {
      let (treasury_cap, metadata) = coin::create_currency<USDC>(
            witness, // One time witness
            9, // Decimals of the coin
            b"USDC", // Symbol of the coin
            b"USDC Coin", // Name of the coin
            b"A stable coin issued by Circle", // Description of the coin
            option::some(url::new_unsafe_from_bytes(b"https://s3.coinmarketcap.com/static-gravity/image/5a8229787b5e4c809b5914eef709b59a.png")), // An image of the Coin
            ctx
        );

      // We send the treasury capability to the deployer
      transfer::public_transfer(treasury_cap, tx_context::sender(ctx));
      // Objects defined in different modules need to use the public_ transfer functions
      transfer::public_share_object(metadata);
  }
```

Lastly, we are adding the test that we will implement in upcoming lessons. This test will help us verify the code and check if it is working fine

```
// ** Test Functions

  #[test_only]
  public fun init_for_testing(ctx: &mut TxContext) {
    init(USDC {}, ctx);
  }
}
```

## Complete code

Here’s the complete code for your ease.

```
module dex::usdc {
  use std::option;

  use sui::url;
  use sui::transfer;
  use sui::coin;
  use sui::tx_context::{Self, TxContext};

  // ** Structs

  // One Time Witness to create a Current in Sui
  // This struct has the drop ability so it cannot be transferred nor stored. 
  // It allows the Network to know it is a unique type

  struct USDC has drop {}

  // The init function runs once on Module creation and accepts a one-time witness as the first argument
  // Witness is a struct with 1 ability, drop, it guarantees that there is only one in the entire network as you can only get it in the init function
  
fun init(witness: USDC, ctx: &mut TxContext) {
      // We call the create_currency
      // Creating a currency requires a one-time witness to ensure it is a unique coin
      // Only the holder of the TreasuryCap is allowed to mint and burn this coin
      // Metadata holds all the information about the coin, so other applications query it
      
			let (treasury_cap, metadata) = coin::create_currency<USDC>(
            witness, // One time witness
            9, // Decimals of the coin
            b"USDC", // Symbol of the coin
            b"USDC Coin", // Name of the coin
            b"A stable coin issued by Circle", // Description of the coin
            option::some(url::new_unsafe_from_bytes(b"https://s3.coinmarketcap.com/static-gravity/image/5a8229787b5e4c809b5914eef709b59a.png")), // An image of the Coin
            ctx
        );

      // We send the treasury capability to the deployer

      transfer::public_transfer(treasury_cap, tx_context::sender(ctx));

      // Objects defined in different modules need to use the public_ transfer functions
      
			transfer::public_share_object(metadata);
  }

  // ** Test Functions

  #[test_only]
  public fun init_for_testing(ctx: &mut TxContext) {
    init(USDC {}, ctx);
  }
}
```

## That’s a wrap

USDC contract will help us create and fill our balance with USDC coins. So that we can easily convert USDC coins to ETH or ETH to USDC coins. Next, we will implement the Dex smart contract that will help us swap the ETH and USDC coins and keep a record of the balances of our tokens.

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/3.%20Build%20Your%20Swap%20DApp/2.%20Writing%20the%20USDC%20Smart%20Contract.md

Writing the USDC Smart Contract

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/3.%20Build%20Your%20Swap%20DApp/3.%20Writing%20the%20Dex%20Smart%20Contract.md

Writing the Dex Smart Contract

niggamani

captain div

Build Your Swap DApp

# Deploy the Dex DApp

Great work on setting up your development environment for Move on Sui. In this lesson, we will learn to run and deploy a `dex` Move project on the Sui blockchain and explore it in the Explorer.

## Update `Move.toml` file

To successfully deploy your Dex Sui project, it is necessary to update the `Move.toml` file. This update is required to ensure that certain dependencies can be easily installed and used. During the implementation of the contracts, you may have noticed the use of some libraries. To install and use these libraries, please update the `Move.toml` file with the following information.

**Note:** Remember to use same package name as you used while creating the Move on Sui project.

```
[package]
name = "dex"
version = "0.0.1"

[dependencies]
MoveStdlib = { git = "https://github.com/MystenLabs/sui.git", subdir = "crates/sui-framework/packages/move-stdlib", rev = "testnet-v1.14.0" }
Sui = { git = "https://github.com/MystenLabs/sui.git", subdir = "crates/sui-framework/packages/sui-framework", rev = "testnet-v1.14.0" }
DeepBook = { git = "https://github.com/MystenLabs/sui.git", subdir = "crates/sui-framework/packages/deepbook", rev = "testnet-v1.14.0" }

[addresses]
dex = "0x0"
std = "0x1"
sui = "0x2"
deepbook = "0xdee9"
```

## Build and publish on Sui

Now let’s build our Move file using the following command. Remember to move to the `dex` folder using `cd dex` command.

```
sui move build
```

This will generate an output like the following:

![deploy-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/4.%20Deploy%20the%20DApp/assets/deploy-1.png?raw=true)

**Note**: Ignore all the warnings and move forward.

After running the command, your project directory will include a `build` folder and a `Move.lock` file.

![deploy-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/4.%20Deploy%20the%20DApp/assets/deploy-2.png?raw=true)

### Set up the development environment

To deploy on Sui Testnet, please execute the following commands.

```
sui client new-env --alias=testnet --rpc https://fullnode.testnet.sui.io:443
sui client switch --env testnet
```

### Publish the contract

Run the following command to publish the Move project to the testnet finally:

```
sui client publish --skip-dependency-verification --gas-budget 90000000
```
Note: When you are deploying on production, we recommend not to use the `--skip-dependency-verification` flag

We will have a long output but scroll to the start of the output and copy the Transaction Digest:

![deploy-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/4.%20Deploy%20the%20DApp/assets/deploy-3.png?raw=true)

- **Note**: Ignore all the warnings and move forward. But if you encounter an “Insufficient funds” error then you can head over to the [Sui Testnet faucet discord channel](https://discord.com/channels/916379725201563759/1037811694564560966) and paste “!faucet [YOUR_ADDRESS]” to receive 10 SUI tokens.
    
    

Head over to [https://suiexplorer.com/?network=testnet](https://suiexplorer.com/?network=testnet). Paste the Transaction Digest in the search bar to find your transaction on the Sui Explorer:

![deploy-4.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/4.%20Deploy%20the%20DApp/assets/deploy-4.png?raw=true)

Whoo! You did great but wait! Now you need to create the pool. A pool is something that will fill your dex app with tokens. To do this, we need to run the following functions present in `sources/dex.move` file.

1. `create_pool`
2. `create_state`
3. `fill_pool`

Here’s the screenshot of these functions from the `sources/dex.move` file.

![pool-code.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/4.%20Deploy%20the%20DApp/assets/pool-code.png?raw=true)

To run these functions we need 100 SUI tokens in our testnet wallet address. It is almost impossible to get 100 SUI tokens for free even for the testnet account.

So, to solve this problem we have already created a pool for you on the following address. Here is the Package ID of our DEX contract

Note: If you are looking to build a end to end product on Sui, please reach out to the Metaschool team and we will help you with the 100 Sui tokens.

```
0xa1dce324bcf781692a358adb27bd105844231d35863b5c99f94e54801d653788
```

And the following is the DEX Storage ID, which we will use in the next lesson.

```
0x6912d83e2c4868386511fe3f6f18aff9399b9ad5cae2d97943766e2ff160ab25
```

## That’s a wrap

In conclusion, this lesson introduced running smart contracts on Sui. We learned how to create a Move workspace, build and publish Move files, create a Sui account, and deploy a contract on the Sui testnet. Congratulations on completing this lesson!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/4.%20Deploy%20the%20DApp/1.%20Deploy%20the%20Dex%20DApp.md

Deploy the Dex DApp

pdaniel

Gourav Jana

Deploy the DApp

# Set Up the Frontend

Kudos! We have deployed our dApp. We are all set to proceed in setting up our frontend. No more waiting, let’s go!

## Setting up the Dex frontend

Open a new terminal in your `dex` directory or continue using the previous terminal if opened. 

Run the following command to clone the frontend directory:

```
git clone https://github.com/0xmetaschool/sui-dex-frontend
```

The front end will have the following file structure.

![frontend-1.1.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-1.1.png?raw=true)

Let’s install our dependencies:

```
yarn install
```

## Find the dex package ID

Next, we need to find the package ID of our `dex` module, that we implemented while writing the contracts. Follow the following steps to do so.

1. Head over to the Sui Explorer and enter the Transaction Digest that you got in the last lesson in the search bar.
    
    ![frontend-1.gif](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-1.gif?raw=true)
    

1. You can see the sidebar with the “Summary” heading. Please scroll to the end of the sidebar to find the “Publish” field.
    
    ![frontend-2.gif](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-2.gif?raw=true)
    

1. Now, open the “Object” field by clicking on the “>” sign in the “Publish” field and click on the “dex” module.
    
    ![frontend-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-3.png?raw=true)
    

You will see the page something like this:

![frontend-4.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-4.png?raw=true)

1. Copy your package ID, as mentioned in the following screenshot. This will be your dex package ID that we will use in our front end.
    
    ![frontend-5.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-5.png?raw=true)
    
    ## Set Up environment variables
    
    Why do we even need a dex package ID? We need the ID to connect our Move project with the front end. Remember we discussed in the last lesson that to run the dex app we need a pool. So, head over to the `.env` file in your cloned frontend, and use the following package ID as this package ID has already filled the pool with 100 SUI for your ease.
    
    ```
    DEX_PACKAGE_ID=0xa1dce324bcf781692a358adb27bd105844231d35863b5c99f94e54801d653788
    ```
    
    Also, if the .env file is not updated remember to paste the following `DEX_STORAGE_ID` as well.
    
    ```
    DEX_STORAGE_ID=0x6912d83e2c4868386511fe3f6f18aff9399b9ad5cae2d97943766e2ff160ab25
    ```
    
    If you have created your pool then you can use your IDs. We need to fill the pool because without filling the pool the app will give you errors.
    
    ## Run the frontend
    
    To run the frontend, run the following command in your terminal.
    
    ```
    yarn dev
    ```
    
    The command will give you an output like this:
    
    ![frontend-6.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-6.png?raw=true)
    
    Head over to the link, the `local` field is showing to you. You will see something like this in your browser.
    
    ![frontend-7.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-7.png?raw=true)
    
    Here, you can see there is an option to sign in using Google. When you try to click on the “Sign with Google” button it will give the following response.
    
    ![frontend-8.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/frontend-8.png?raw=true)
    
     So, we need Google Cloud credentials that will allow us to sign in using Google and use our application.
    
    ## That’s a wrap
    
    Phew, we’re so proud of you for setting up the front end all by yourself. Next, we will set up the Google Cloud credentials and get our front end up and running.

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/1.%20Set%20Up%20the%20Frontend.md

Set Up the Frontend

# Set Up the Google Credentials

We’re so proud of you for coming this far and setting up the front end for your DeFi app. In this lesson, we will set up the Google credentials.

## Set up the Google credentials

Follow the following steps to set up the Google Cloud account and fetch the client ID that you’re going to use in your front-end application.

1. Head over to the [Google Cloud Dashboard](https://console.cloud.google.com/home/dashboard) and log in with your Google account. You will a page like the following, after logging in.
    
    ![google-setup-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-1.png?raw=true)
    

1. At the sidebar, you can see the “APIs & Services” field. Head over to it and click on “Credentials.”
    
    ![google-setup-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-2.png?raw=true)
    

You’ll see a page like this:

![google-setup-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-3.png?raw=true)

1. Now, click on the “CREATE PROJECT”, fill in the fields with the following data, and click on the “CREATE” button.
    1. Project name: Sui App Login
    2. Location: Leave this field as is

Here’s how we’re filling the fields.

![google-setup-4.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-4.png?raw=true)

You’ll see a page like this, after creating the project.

![google-setup-5.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-5.png?raw=true)

1. To create the credentials, click on “+ CREATE CREDENTIALS” button, and then select “OAuth client ID”.
    
    ![google-setup-6.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-6.png?raw=true)
    
    1. Next, if you see a page like the following, click on the “CONFIGURE CONSENT SCREEN” button.
        
        ![google-setup-7.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-7.png?raw=true)
        
    2. Select the “External” option so that any user can use your application, then click on the “CREATE” button.
        
        ![google-setup-8.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-8.png?raw=true)
        
    
    You’ll see a page like the following after clicking on the “CREATE” button.
    
    ![google-setup-9.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-9.png?raw=true)
    
    1. You need to fill in the App information now. Fill in the following fields, skip any other fields, and click on the “SAVE AND CONTINUE” button after filling in the information.
        1. **App name**: Sui App Login
        2. **User Support Email**: Here, you can fill in your Email ID
        3. **Authorized domains**: Click on the “+ Add Domain” button and enter the following link - `sui.io`
        4. **Developer contact information**: Fill this field with your Email ID
    2. Now, you’ll see the page like the following. Move to the end of the page, click on the “SAVE AND CONTINUE” button, and continue without making any changes here.
        
        ![google-setup-10.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-10.png?raw=true)
        
    3. Next, you’ll see the following page. Again, click on “SAVE AND CONTINUE” button, and move forward.
        
        ![google-setup-11.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-11.png?raw=true)
        
        1. At last, you’ll see the following page. Move to the end of the page and click on the “BACK TO DASHBOARD” button.
            
            ![google-setup-12.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-12.png?raw=true)
            
        2. The following page will appear. Move back to the credentials page by clicking on the “Credentials” page.
            
            ![google-setup-13.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-13.png?raw=true)
            
        3. Now, again select “+ CREATE CREDENTIALS” and then “OAuth client ID”.
            
            ![google-setup-15.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-15.png?raw=true)
            
        4. Select “Web Application” from the “Application type” scroll bar.
            
            ![google-setup-16.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-16.png?raw=true)
            
            1. Fill in the “Name” of your application, “Authorized redirect URIs” with the `http://localhost:3000/` and `http://127.0.0.1:3000/` URI, and click on the “CREATE” button.
                
                ![google-setup-17.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-17.png?raw=true)
                
            
        
        15. After creating the client ID, the following page will appear. Copy the Client ID. We will paste this client ID to our `.env` file in the frontend.
        
        ![google-setup-18.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-18.png?raw=true)
        
        Or you can copy the Client ID from here.
        
        ![google-setup-19.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/google-setup-19.png?raw=true)
        

16. Lastly, we need to make our app public on Google Cloud. So that anyone, including you, can log in without any restrictions. To do this, head over to the “OAuth consent screen” from the side bar and click on the “Publish App” button.

![publish-app.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/assets/publish-app.png?raw=true)

## Paste the Client ID to the .env file

Head back to your front end and find the `.env` file. If not present, please create the file at root directory. Paste the following line to `.env` file and replace `YOUR_GOOGLE_CLIENT_ID` with the Client ID you copied from the Google cloud.

```
NEXT_PUBLIC_CLIENT_ID_GOOGLE=YOUR_GOOGLE_CLIENT_ID
```

## That’s a wrap

Great work on setting up the Google Cloud client ID. In the next lesson, we will set up the ZK login and get our front end running.

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/2.%20Set%20Up%20the%20Google%20Credentials.md

Set Up the Google Credentials

# Interact With the Frontend

You have successfully set up everything for your front end, but there is one final step remaining. In this lesson, we will configure the ZK login credentials, run the front end, explore its features, and learn how to interact with Sui Move contracts through the front end.

## Set up ZK Login

Please navigate to the `.env` file in your frontend directory and add the following line. We have already configured ZK Login for your convenience, so you can simply copy and paste the ZK Prover URL without having to spend hours on its setup.

```
URL_ZK_PROVER=http://175.41.177.22:8001/v1
```

If you want to set up ZK Login on your own, please follow the instructions given in the [Readme.md](http://Readme.md) file provided in this link.

## Interact with the frontend

Let's run our app by entering the following command in your terminal, located in the frontend directory, now that all credentials have been set up.

```
yarn dev
```

This time try again to log in by clicking on the “Sign with Google” button. Verify you Google account and then log in. After logging in wait for a few seconds for ZK to get connected with your app. After the request is completed, you will see a page like this.

![frontend-interact-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/ba2ce8dea0997931621928704f03f1a8483ecc0d/Build%20the%20Token%20Dex%20DApp/1.%20Getting%20Started/assets/frontend-interact-1.png?raw=true)

Let’s play around with different features of our application and see how it works.

1. First, click on the “Mint SUI” button to increase your SUI balance.
2. To fill your USDC and ETH balance, click on the “Mint ETH” and “Mint USDC” buttons separately.
3. Before swapping, it is necessary to increase balances because, without any ETH or USDC, you will not be able to swap the tokens.
4. To swap the tokens, fill in the balance and click on the “Swap” button.
5. If you want to swap ETH to USDC or USDC to ETH, click on the arrow button to switch their places.

## That’s a wrap

We’re so proud of you for completing the course and setting up your own Dex application. In the next lesson, we will wrap up the course and overview what you have learned so far.


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/5.%20Work%20With%20the%20Frontend/3.%20Interact%20With%20the%20Frontend.md

Interact With the Frontend

Spectre

wayne

Ayush

Work With the Frontend

# Let’s Wrap It Up

Congratulations on reaching the end of this comprehensive guide to building a decentralized application (dApp) on the Sui blockchain! Throughout this learning journey, you've gained valuable insights into the Sui network, mastered the Move programming language, and successfully crafted and deployed a smart contract for a dex dApp. Let's reflect on your achievements and outline the key takeaways.

## Key Learnings:

1. **Sui Ecosystem Exploration:**
    - You've familiarized yourself with the Sui network, understanding its capabilities and how it stands out in the blockchain space.
2. **Move Advance Concepts:**
    - You implemented the Move project from start to end and implemented all of the advanced concepts you studied in the second course of this Sui Learning Path.
3. **Development Environment Setup:**
    - Set up the Sui toolchain and ensure your development environment is ready for creating decentralized applications.
4. **Smart Contract Development:**
    - Progressed through the step-by-step process of coding a smart contract for a dex dApp. From data structure setup to deployment, you've seen how Move empowers developers in the Sui ecosystem.
5. **Frontend Integration:**
    - Created a frontend for your dApp, showcasing the seamless interaction between smart contracts and user interfaces.
6. **Interaction:**
    - Learned how to interact with your dApp, ensuring that it performs as expected.

## 🛠 Contribute to this project!

**Fun fact:** All our projects are 100% open-source.

Here’s the GREAT news for you! This is an open-source project, you can find the tutorial markdown files [here](https://github.com/0xmetaschool/Learning-Projects). If you find any issues in the course, please feel free to resolve it.

We, at Metaschool, love love love contributions by our community and we give acknowledgment to contributors in our discord and GitHub profile too. Also, don’t forget to star ⭐️ our repository! we will be very thankful! ♥️

## 🎊 Congratulations

Thank you for joining us on this exciting journey into the world of Fuel and decentralized applications. Your commitment to learning and building in the blockchain space is commendable. Best of luck in all your future endeavors as you continue to shape the future of decentralized technologies!

WAGMI! Peace out! ✌🏻🔮

---

**Assignment Title:** What did you like about this course? Share with your LinkedIn and Twitter fam and share the screenshot with us.

Description**:** Share With Your LinkedIn and Twitter Fam.

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Build%20the%20Token%20Dex%20DApp/6.%20Wrap%20Up%20the%20Course/1.%20Let%E2%80%99s%20Wrap%20It%20Up.md

Let’s Wrap It Up

NIgga

Gina

Wrap Up the Course

Setup your wallet to mint your proof of completion NFT

Connect Metamask

Become a part of our vibrant and supportive community!

Join our Discord

Spread the word about what you are building

Follow us on Twitter

Keep us informed of your progress so we can assist you

Submit your first assignment

Reach half course

Complete the course to earn NFT along with XP

Complete Course

Submit your feedback at course completion and help us improve your learning experience

Getting Started

Setting Up the Development Environment

Build Your Swap DApp

Deploy the DApp

Work With the Frontend

Wrap Up the Course

🎉 Congratulations!!
You've Received a Special NFT

How can we help?

🎉 Congratulations!! You've Received a Special NFT

How can we help?

🎉 Congratulations!!
You've Received a Special NFT