From d89f121f2d71161445532c96a82a3638b161d50d Mon Sep 17 00:00:00 2001 From: fareeha1125 Date: Fri, 20 Dec 2024 16:03:07 +0500 Subject: [PATCH] sui webp --- .../1. What Are We Building Today.md" | 4 +- .../1. Set Up Environment.md | 4 +- .../1. Deploying the Loyalty DApp.md | 6 +- .../1. Set Up the Frontend.md | 20 ++--- .../2. Interact With the Frontend.md | 12 +-- .../1. What Are We Building Today.md | 4 +- .../2. Introduction to DeFi and Dex.md | 2 +- .../1. Set Up Environment.md | 4 +- .../1. Deploy the Dex DApp.md | 10 +-- .../1. Set Up the Frontend.md | 26 +++---- .../2. Set Up the Google Credentials.md | 77 +++++++++---------- .../3. Interact With the Frontend.md | 2 +- 12 files changed, 85 insertions(+), 86 deletions(-) diff --git "a/Build a Loyalty Contract with Move on Sui/1. Let\342\200\231s Get Started/1. What Are We Building Today.md" "b/Build a Loyalty Contract with Move on Sui/1. Let\342\200\231s Get Started/1. What Are We Building Today.md" index 15de4f90..dcb3038f 100644 --- "a/Build a Loyalty Contract with Move on Sui/1. Let\342\200\231s Get Started/1. What Are We Building Today.md" +++ "b/Build a Loyalty Contract with Move on Sui/1. Let\342\200\231s Get Started/1. What Are We Building Today.md" @@ -8,7 +8,7 @@ This loyalty smart contract will allow us to implement the loyalty program for o Let’s look at how you will interact with the contract by the end of the course. -![interact-gif-3.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/What%20Are%20We%20Building%20Today/interact-gif-3.gif?raw=true) +![interact-gif-3.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/What%20Are%20We%20Building%20Today/interact-gif-3.webp?raw=true) ## Course Overview @@ -35,7 +35,7 @@ As a developer, you will be getting the following outcomes when you complete thi If you complete this course with me, you will be getting XPs and a special NFT which will unlock many more opportunities for you on the Metaschool platform. Here is what the NFT looks like. -![course-gif](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) +![course-gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_sui_c1/What%20Are%20We%20Learning%20Today%3F/image.webp?raw=true) Now before we move forward, let’s set some house rules first. diff --git a/Build a Loyalty Contract with Move on Sui/2. Set Up Development Environment/1. Set Up Environment.md b/Build a Loyalty Contract with Move on Sui/2. Set Up Development Environment/1. Set Up Environment.md index 57ce2b39..f280b5fe 100644 --- a/Build a Loyalty Contract with Move on Sui/2. Set Up Development Environment/1. Set Up Environment.md +++ b/Build a Loyalty Contract with Move on Sui/2. Set Up Development Environment/1. Set Up Environment.md @@ -37,7 +37,7 @@ The command will generate a folder named `loyalty` and it will contain a file `M Navigate to the `sources/` directory. Create a new Move file called `loyalty.move`. Here’s what the will look like: -![loyalty-structure.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20Environment/loyalty-structure.png?raw=true) +![loyalty-structure.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20Environment/loyalty-structure.webp?raw=true) ## Check your wallet @@ -57,7 +57,7 @@ If you do not have an active address, follow the steps given below: It will generate the output something like this: -![deploy-5.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20Environment/deploy-5.png?raw=true) + ![deploy-5.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20Environment/deploy-5.webp?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. diff --git a/Build a Loyalty Contract with Move on Sui/4. Deploy the DApp/1. Deploying the Loyalty DApp.md b/Build a Loyalty Contract with Move on Sui/4. Deploy the DApp/1. Deploying the Loyalty DApp.md index aa4c310d..dc87dd9e 100644 --- a/Build a Loyalty Contract with Move on Sui/4. Deploy the DApp/1. Deploying the Loyalty DApp.md +++ b/Build a Loyalty Contract with Move on Sui/4. Deploy the DApp/1. Deploying the Loyalty DApp.md @@ -85,7 +85,7 @@ sui move build Here’s what the output will look like. -![output-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Deploying%20the%20Loyalty%20DApp/output-1.png?raw=true) +![output-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Deploying%20the%20Loyalty%20DApp/output-1.webp?raw=true) ### Step 3 @@ -106,7 +106,7 @@ sui client publish --skip-dependency-verification --gas-budget 90000000 We will have a long output but scroll to the start of the output and copy the Transaction Digest: -![output-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Deploying%20the%20Loyalty%20DApp/output-2.png?raw=true) +![output-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Deploying%20the%20Loyalty%20DApp/output-2.webp?raw=true) - **Note**: 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. @@ -116,7 +116,7 @@ We will have a long output but scroll to the start of the output and copy the Tr 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: -![output-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Deploying%20the%20Loyalty%20DApp/output-3.png?raw=true) +![output-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Deploying%20the%20Loyalty%20DApp/output-3.webp?raw=true) ## Wrap up diff --git a/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/1. Set Up the Frontend.md b/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/1. Set Up the Frontend.md index cd2106a7..4907f57a 100644 --- a/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/1. Set Up the Frontend.md +++ b/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/1. Set Up the Frontend.md @@ -14,7 +14,7 @@ git clone https://github.com/0xmetaschool/sui-loyalty-dapp-frontend.git The front end will have the following file structure. -![frontend-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-1.png?raw=true) +![frontend-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-1.webp?raw=true) Let’s install our dependencies: @@ -28,26 +28,26 @@ Next, we need to find the package ID of our `loyalty` module, that we implemente 1. Head over to the [Sui Explorer](https://suiexplorer.com/?network=testnet) 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/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-1.gif?raw=true) + ![frontend-1.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-1.webp?raw=true) 2. You can see the sidebar with the “Summary” heading. Please scroll to the end of the sidebar to find the “Publish” field. - ![frontend-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-2.png?raw=true) + ![frontend-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-2.webp?raw=true) 3. Now, open the “Object” field by clicking on the “>” sign in the “Publish” field and click on the “loyalty” module. - ![frontend-gif-1.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-gif-1.gif?raw=true) + ![frontend-gif-1.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-gif-1.webp?raw=true) -You will see the page something like this: + You will see the page something like this: -![frontend-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-3.png?raw=true) + ![frontend-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-3.webp?raw=true) -1. Copy your package ID, as mentioned in the following screenshot. This will be your loyalty package ID that we will use in our front end. +4. Copy your package ID, as mentioned in the following screenshot. This will be your loyalty package ID that we will use in our front end. - ![frontend-4.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-4.png?raw=true) + ![frontend-4.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-4.webp?raw=true) ## Set up the environment variables @@ -79,11 +79,11 @@ yarn dev The command will give you an output like this: -![frontend-6.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-6.png?raw=true) +![frontend-6.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-6.webp?raw=true) Head over to the link, the `local` field is showing to you. You will see something like this in your browser. -![frontend-5.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-5.png?raw=true) +![frontend-5.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Set%20Up%20the%20Frontend/frontend-5.webp?raw=true) ## That’s a wrap diff --git a/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/2. Interact With the Frontend.md b/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/2. Interact With the Frontend.md index 83a356f6..80136568 100644 --- a/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/2. Interact With the Frontend.md +++ b/Build a Loyalty Contract with Move on Sui/5. Work With the Frontend/2. Interact With the Frontend.md @@ -12,7 +12,7 @@ yarn dev This time try again to log in by clicking on the “Sign with Google” button. Verify your 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. -![interact-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-1.png?raw=true) +![interact-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-1.webp?raw=true) Initially, you’ll see 0 balance in all or a few fields if you haven’t interacted with your dex dApp before. To use the loyalty dApp we must fill in the “DEX Swaps” and “DEXC Balance” fields. To fill these fields, we need to swap some tokens interchangeably. @@ -28,17 +28,17 @@ Let’s play around with different features of our application and see how it wo Here’s how we’re swapping the ETH tokens to USDC tokens. -![interact-gif-1.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-gif-1.gif?raw=true) +![interact-gif-1.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-gif-1.webp?raw=true) ### Swap USDC to ETH tokens Here’s how we’re swapping the USDC tokens to ETH tokens. -![interact-gif-2.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-gif-2.gif?raw=true) +![interact-gif-2.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-gif-2.webp?raw=true) After swapping the tokens, you’ll see the changes in the balance fields like the following. -![interact-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-2.png?raw=true) +![interact-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-2.webp?raw=true) ## Head over to loyalty dApp @@ -46,11 +46,11 @@ It is time to stake your DEXC tokens to earn rewards for using the Dex app. When Head over to loyalty dApp by clicking on the Loyalty dApp button on the left top corner and stake or unstake your DEXC tokens. -![interact-gif-3.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/What%20Are%20We%20Building%20Today/interact-gif-3.gif?raw=true) +![interact-gif-3.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/What%20Are%20We%20Building%20Today/interact-gif-3.webp?raw=true) After 5 rewards, you will be eligible to collect the reward. Let's see how it works. In our case, the reward will be an NFT. -![interact-gif-4.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-gif-4.gif?raw=true) +![interact-gif-4.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/sui-loyalty-dapp/Interact%20With%20the%20Frontend/interact-gif-4.webp?raw=true) ## That’s a wrap diff --git a/Build the Token Dex DApp/1. Getting Started/1. What Are We Building Today.md b/Build the Token Dex DApp/1. Getting Started/1. What Are We Building Today.md index 41618d73..76f11cc1 100644 --- a/Build the Token Dex DApp/1. Getting Started/1. What Are We Building Today.md +++ b/Build the Token Dex DApp/1. Getting Started/1. What Are We Building Today.md @@ -6,7 +6,7 @@ So, what are we building today? We will be building a Token Swap Defi applicatio 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) +![frontend-interact-1.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/1.%20Getting%20Started/frontend-interact-1.webp) ## Course Overview @@ -38,7 +38,7 @@ As a developer, you will be getting the following outcomes when you complete thi 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) +![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_sui_c1/What%20Are%20We%20Learning%20Today%3F/image.webp?raw=true) Now before we move forward, let’s set some house rules first. diff --git a/Build the Token Dex DApp/1. Getting Started/2. Introduction to DeFi and Dex.md b/Build the Token Dex DApp/1. Getting Started/2. Introduction to DeFi and Dex.md index 4a592f83..cf1eb621 100644 --- a/Build the Token Dex DApp/1. Getting Started/2. Introduction to DeFi and Dex.md +++ b/Build the Token Dex DApp/1. Getting Started/2. Introduction to DeFi and Dex.md @@ -15,7 +15,7 @@ Here's the scoop on how DeFi works: 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** +### 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. diff --git a/Build the Token Dex DApp/2. Setting Up the Development Environment/1. Set Up Environment.md b/Build the Token Dex DApp/2. Setting Up the Development Environment/1. Set Up Environment.md index 28bd4ae2..c08484ae 100644 --- a/Build the Token Dex DApp/2. Setting Up the Development Environment/1. Set Up Environment.md +++ b/Build the Token Dex DApp/2. Setting Up the Development Environment/1. Set Up Environment.md @@ -41,7 +41,7 @@ Time to create files for coding, so follow the steps given below: 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) +![Screen Shot 2024-01-29 at 4.26.19 PM.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/2.%20Setting%20Up%20the%20Development%20Environment/Screen_Shot_2024-01-29_at_4.26.19_PM.webp) ## Check your wallet @@ -61,7 +61,7 @@ If you do not have an active address, follow the steps given below: 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) + ![deploy-5.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/2.%20Setting%20Up%20the%20Development%20Environment/deploy-5.webp) - **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. diff --git a/Build the Token Dex DApp/4. Deploy the DApp/1. Deploy the Dex DApp.md b/Build the Token Dex DApp/4. Deploy the DApp/1. Deploy the Dex DApp.md index 6625d49d..6bc1bab0 100644 --- a/Build the Token Dex DApp/4. Deploy the DApp/1. Deploy the Dex DApp.md +++ b/Build the Token Dex DApp/4. Deploy the DApp/1. Deploy the Dex DApp.md @@ -35,13 +35,13 @@ 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) +![deploy-1.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/4.%20Deploy%20the%20DApp/deploy-1.webp) **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) +![deploy-2.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/4.%20Deploy%20the%20DApp/deploy-2.webp) ### Set up the development environment @@ -63,7 +63,7 @@ Note: When you are deploying on production, we recommend not to use the `--skip- 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) +![deploy-3.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/4.%20Deploy%20the%20DApp/deploy-3.webp) - **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. @@ -71,7 +71,7 @@ We will have a long output but scroll to the start of the output and copy the Tr 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) +![deploy-4.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/4.%20Deploy%20the%20DApp/deploy-4.webp) 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. @@ -81,7 +81,7 @@ Whoo! You did great but wait! Now you need to create the pool. A pool is somethi 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) +![pool-code.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/4.%20Deploy%20the%20DApp/pool-code.webp) 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. diff --git a/Build the Token Dex DApp/5. Work With the Frontend/1. Set Up the Frontend.md b/Build the Token Dex DApp/5. Work With the Frontend/1. Set Up the Frontend.md index 067290d8..0c5847ef 100644 --- a/Build the Token Dex DApp/5. Work With the Frontend/1. Set Up the Frontend.md +++ b/Build the Token Dex DApp/5. Work With the Frontend/1. Set Up the Frontend.md @@ -14,7 +14,7 @@ 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) +![frontend-1.1.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-1.1.webp) Let’s install our dependencies: @@ -28,26 +28,26 @@ Next, we need to find the package ID of our `dex` module, that we implemented wh 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) + ![frontend-1.gif](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-1.webp) -1. You can see the sidebar with the “Summary” heading. Please scroll to the end of the sidebar to find the “Publish” field. +2. 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) + ![frontend-2.gif](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-2.webp) -1. Now, open the “Object” field by clicking on the “>” sign in the “Publish” field and click on the “dex” module. +3. 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) + ![frontend-3.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-3.webp) -You will see the page something like this: + 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) + ![frontend-4.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-4.webp) -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. +4. 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) + ![frontend-5.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-5.webp) ## Set Up environment variables @@ -75,15 +75,15 @@ You will see the page something like this: 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) + ![frontend-6.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-6.webp) 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) + ![frontend-7.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-7.webp) 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) + ![frontend-8.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/frontend-8.webp) So, we need Google Cloud credentials that will allow us to sign in using Google and use our application. diff --git a/Build the Token Dex DApp/5. Work With the Frontend/2. Set Up the Google Credentials.md b/Build the Token Dex DApp/5. Work With the Frontend/2. Set Up the Google Credentials.md index eb71563c..1e1b869a 100644 --- a/Build the Token Dex DApp/5. Work With the Frontend/2. Set Up the Google Credentials.md +++ b/Build the Token Dex DApp/5. Work With the Frontend/2. Set Up the Google Credentials.md @@ -8,94 +8,93 @@ Follow the following steps to set up the Google Cloud account and fetch the clie 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) + ![google-setup-1.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-1.webp) -1. At the sidebar, you can see the “APIs & Services” field. Head over to it and click on “Credentials.” +2. 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) + ![google-setup-2.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-2.webp) -You’ll see a page like this: + 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) + ![google-setup-3.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-3.webp) -1. Now, click on the “CREATE PROJECT”, fill in the fields with the following data, and click on the “CREATE” button. +3. 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. + 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) + ![google-setup-4.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-4.webp) -You’ll see a page like this, after creating the project. + 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) + ![google-setup-5.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-5.webp) -1. To create the credentials, click on “+ CREATE CREDENTIALS” button, and then select “OAuth client ID”. +4. 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) + ![google-setup-6.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-6.webp) 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) + ![google-setup-7.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-7.webp) 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) + ![google-setup-8.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-8.webp) - You’ll see a page like the following after clicking on the “CREATE” button. + 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) + ![google-setup-9.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-9.webp) - 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. + 3. 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. + 4. 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) + ![google-setup-10.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-10.webp) - 3. Next, you’ll see the following page. Again, click on “SAVE AND CONTINUE” button, and move forward. +5. 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) + ![google-setup-11.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/google-setup-11.webp) - 1. At last, you’ll see the following page. Move to the end of the page and click on the “BACK TO DASHBOARD” button. + 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) + ![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. + 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) + ![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”. + 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) + ![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. + 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) + ![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. + 5. 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) + ![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. + +6. 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) + ![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. + 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) + ![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. +7. 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) + ![publish-app.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/5.%20Work%20With%20the%20Frontend/publish-app.webp) ## Paste the Client ID to the .env file diff --git a/Build the Token Dex DApp/5. Work With the Frontend/3. Interact With the Frontend.md b/Build the Token Dex DApp/5. Work With the Frontend/3. Interact With the Frontend.md index fc7509da..b2438bf0 100644 --- a/Build the Token Dex DApp/5. Work With the Frontend/3. Interact With the Frontend.md +++ b/Build the Token Dex DApp/5. Work With the Frontend/3. Interact With the Frontend.md @@ -22,7 +22,7 @@ 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) +![frontend-interact-1.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Build%20the%20Token%20Dex%20DApp%20on%20Sui%20C4/1.%20Getting%20Started/frontend-interact-1.webp) Let’s play around with different features of our application and see how it works.