From de63ead0e3bba3272e14104b37723916260258df Mon Sep 17 00:00:00 2001
From: Julian Martinez <73849597+Julian-dev28@users.noreply.github.com>
Date: Fri, 13 Oct 2023 10:06:08 -0700
Subject: [PATCH] Add tabs to dapps challenge checkpoints (#610)

* Update challenge-0-crowdfund.mdx

* Add tabs to interaction step

* add tabs to checkpoints
---
 .../dapp-challenges/challenge-0-crowdfund.mdx |  93 +++++++++--
 dapps/dapp-challenges/challenge-1-payment.mdx |  83 +++++++---
 .../challenge-2-liquidity-pool.mdx            | 152 ++++++++++++++++--
 3 files changed, 277 insertions(+), 51 deletions(-)

diff --git a/dapps/dapp-challenges/challenge-0-crowdfund.mdx b/dapps/dapp-challenges/challenge-0-crowdfund.mdx
index 8e04ecaa..72baccdc 100644
--- a/dapps/dapp-challenges/challenge-0-crowdfund.mdx
+++ b/dapps/dapp-challenges/challenge-0-crowdfund.mdx
@@ -15,6 +15,8 @@ import { ParentChallengeForm } from "../../src/components/atoms/challenge-form";
 import { ParentChallengeContractForm } from "../../src/components/atoms/challenge-contract-form";
 import CompleteStepButton from "../../src/components/atoms/complete-step-button";
 import StartChallengeButton from "../../src/components/atoms/start-challenge-button";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 <StartChallengeButton id={0} />
 
@@ -98,45 +100,108 @@ You will need to add some Futurenet network lumens to your wallet to interact wi
 
 > Note: These are test lumens for use with Futurenet and cannot be used on Mainnet
 
-## Checkpoint 3: 🏦 Mint Tokens for the Crowdfunding Campaign
+## Checkpoint 3: 🌟 Powering the Campaign
+
+Fuel the vision! In this step, you will learn how to mint tokens and fund the crowdfunding campaign.
+
+<Tabs defaultValue="mint" values={[
+    {label: '🏦 Mint Tokens', value: 'mint'},
+    {label: '💰 Fund the Campaign', value: 'fund'},
+]}>
+
+<TabItem value="mint">
+
+<Tabs defaultValue="openDapp" values={[
+    {label: 'Mint', value: 'openDapp'},
+    {label: 'Approve', value: 'approveTx'},
+    {label: 'Check', value: 'checkBalance'},
+]}>
+
+<TabItem value="openDapp">
+
+#### Open Dapp and Mint
 
 Open the dapp frontend and click on the "Mint 100 ABND" button.
 
 <img src={mintToken} width="40%" />
 
+</TabItem>
+
+<TabItem value="approveTx">
+
+#### Approve Transaction
+
 You should see a popup from Freighter asking you to sign the transaction. Click on "Approve" and wait for the transaction to be confirmed.
 
 <img src={approveTokenMint} width="40%" />
 
+</TabItem>
+
+<TabItem value="checkBalance">
+
+#### Check Updated Balance
+
 You should see an updated balance in the pledge component.
 
 <img src={updatedBalance} width="40%" />
 
-> Note: These are test tokens for use with Futurenet and cannot be used on Mainnet
+</TabItem>
+
+</Tabs>
 
-## Checkpoint 4: 💰 Fund the Crowdfunding Campaign
+</TabItem>
 
-Now that you have your wallet set up, let's fund the crowdfunding campaign.
+<TabItem value="fund">
 
-Open the frontend and click on the "Back this project" button. You should see a popup from Freighter asking you to sign the transaction.
+<Tabs defaultValue="setupWallet" values={[
+    {label: 'Deposit', value: 'setupWallet'},
+    {label: 'Approve', value: 'approveTx'},
+    {label: 'Check', value: 'confirmBalance'},
+]}>
+
+<TabItem value="setupWallet">
+
+#### Fund the Campaign
+
+Now that you have your wallet set up, let's fund the crowdfunding campaign. Open the frontend and click on the "Back this project" button. You should see a popup from Freighter asking you to sign the transaction.
 
 <img src={back100} width="40%" />
 
-Click on "Approve" and wait for the transaction to be confirmed.
+</TabItem>
+
+<TabItem value="approveTx">
 
-Once the transaction is confirmed, you should see a success message.
+#### Approve Transaction
+
+Click on "Approve" and wait for the transaction to be confirmed. Once the transaction is confirmed, you should see a success message.
 
 <img src={success} width="40%" />
 
-You should see an updated balance in the amount you have pledged in the pledge component.
+</TabItem>
+
+<TabItem value="confirmBalance">
+
+#### Check Updated Pledged Amount
+
+You should see an updated balance reflecting the amount you have pledged in the pledge component.
 
 <img src={backedResult} width="40%" />
 
+</TabItem>
+
+</Tabs>
+
+</TabItem>
+
+</Tabs>
+
+> Note: These are test tokens for use with Futurenet and cannot be used on Mainnet.
+
 <CompleteStepButton id={0} progress={2}>
   Funding completed
 </CompleteStepButton>
 
-## Checkpoint 5: 🚢 Ship it! 🚁
+## Checkpoint 4: 🚢 Ship it! 🚁
 
 Now that your dapp is fully functional, next prepare it for a new deployment on Futurenet, this time with a hosted frontend.
 
@@ -200,7 +265,7 @@ You can now visit the preview link to see your deployed dapp! 🎉
 <img src={deployedDApp} width="90%" />
 
 
-## Checkpoint 6: 💪 Pass the Challenge!
+## Checkpoint 5: 💪 Pass the Challenge!
 
 Submit your public url to the challenge form and proceed to the next step to check your work.
 
@@ -214,17 +279,15 @@ Join [our Community in Discord](https://discord.gg/stellardev) in case you have
 
 :::
 
-## Checkpoint 7: ✅ Check your work!
+## Checkpoint 6: ✅ Check your work!
 
 In order to successfully complete this challenge, your work needs to be checked. Please, follow this steps:
 
 1. Fork [the challenge repository](https://github.com/stellar/soroban-dapps-challenge).
-2. Fill `crowdfund/challenge/output.txt` file with your wallet address, contract ID and production url. Filled file should look like:
+2. Fill `crowdfund/challenge/output.txt` file with your wallet address. Filled file should look like:
 
 ```sh
-public key: GBSXUXZSA2VEXN5VGOWE5ODAJLC575JCMWRJ4FFRDWSTRCJ123456789
-contract Id: CBKY7UN5VGD4LIQFOBOTSUSQWK67BZZTA23NIEVWSWRR5SAT26JQN2BN
-production: https://soroban-example-dapp-rho.vercel.app
+Public Key: GBSXUXZSA2VEXN5VGOWE5ODAJLC575JCMWRJ4FFRDWSTRCJ123456789
 ```
 3. Create a Pull Request to the `stellar/soroban-dapps-challenge/crowdfund` branch. When the PR will be created, CI actions will check the `crowdfund/challenge/output.txt` file data and update your progress.
 4. Wait for the CI/CD pipeline results.
diff --git a/dapps/dapp-challenges/challenge-1-payment.mdx b/dapps/dapp-challenges/challenge-1-payment.mdx
index 15d6827d..3ee1149b 100644
--- a/dapps/dapp-challenges/challenge-1-payment.mdx
+++ b/dapps/dapp-challenges/challenge-1-payment.mdx
@@ -24,6 +24,8 @@ import { ParentChallengeForm } from "../../src/components/atoms/challenge-form";
 import { ParentChallengeContractForm } from "../../src/components/atoms/challenge-contract-form";
 import CompleteStepButton from "../../src/components/atoms/complete-step-button";
 import StartChallengeButton from "../../src/components/atoms/start-challenge-button";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem"
 
 <StartChallengeButton id={1} />
 
@@ -135,64 +137,96 @@ Now open your browser and navigate to `http://localhost:9000/`. You should see t
 
 <img src={connect_freighter} alt="connect" />
 
-## Checkpoint 4: 📡 Add the Token to Freighter
+## Checkpoint 4: 🚀 Token Transfer Odyssey
+
+Strap in and get ready to send some tokens! In this step, you will use the Payment Dapp to send Soroban tokens to another account.
+
+<Tabs defaultValue="addToken" values={[
+    {label: '📡 Add Token to Freighter', value: 'addToken'},
+    {label: '🏦 Send Tokens', value: 'sendTokens'},
+]}>
+
+<TabItem value="addToken">
+<Tabs defaultValue="connectWallet" values={[
+    {label: 'Connect', value: 'connectWallet'},
+    {label: 'Add', value: 'addSoroban'},
+    {label: 'Check', value: 'verifyToken'},
+]}>
+
+<TabItem value="connectWallet">
+
+#### 📡 Connect Freighter to Payment Dapp
 
 Follow the steps in the [Connect a Wallet: Freighter](../guides/wallets.mdx) guide to connect Freighter to the Payment Dapp.
+</TabItem>
 
-Add the Soroban token to your Freighter wallet. To do this, open your Freighter wallet and click on the `Manage Assets` button at the bottom of the screen.
+<TabItem value="addSoroban">
 
+#### Add Soroban Token
+Open your Freighter wallet and click on the `Manage Assets` button at the bottom of the screen.
 <img src={manage_assets} alt="manage assets" width="50%" />
 
 Then click on the `Add Soroban token ` button and enter the token ID that was returned when you deployed the smart contracts.
-
 <img src={add_token} alt="add token" width="50%" />
-
 <br />
-
 <img src={new_token} alt="new token" width="50%" />
+</TabItem>
 
-You should now see the Soroban token in your Freighter wallet.
+<TabItem value="verifyToken">
 
+#### Check Token Addition
+You should now see the Soroban token in your Freighter wallet.
 <img src={aucb_balance} alt="added balance" width="50%" />
+</TabItem>
 
-## Checkpoint 5: 🏦 Send Tokens to Another Account
+</Tabs>
+</TabItem>
 
-First, connect Freighter and Select the account that will be used to send Soroban tokens.
+<TabItem value="sendTokens">
+<Tabs defaultValue="connectFreighter" values={[
+    {label: 'Connect', value: 'connectFreighter'},
+    {label: 'Send', value: 'sendDetails'},
+    {label: 'Verify', value: 'verifyTx'},
+]}>
 
-Click "next" to continue.
+<TabItem value="connectFreighter">
 
+#### Connect Freighter and Select Account
+First, connect Freighter and Select the account that will be used to send Soroban tokens.
+Click "next" to continue.
 <img src={next} alt="next" />
+</TabItem>
 
-Provide the public key of the account that will receive the Soroban tokens.
+<TabItem value="sendDetails">
+
+#### Provide Token Transfer Details
 
+Provide the public key of the account that will receive the Soroban tokens.
 <img src={pmt_dest} alt="payment destination" />
 
 Input the Token ID of the Soroban token.
-
 <img src={choose_token} alt="choose token" />
 
 Input the amount of Soroban tokens to send.
-
 <img src={select_token} alt="select token" />
 
 Confirm the payment settings.
-
 <img src={payment_settings} alt="payment settings" />
+</TabItem>
 
-Review the transaction details to ensure accuracy and then click the "Sign with Freighter". Freighter will prompt you to sign the transaction with your wallet's private key.
+<TabItem value="verifyTx">
 
+#### Confirm and Submit Transaction
+Review the transaction details to ensure accuracy and then click the "Sign with Freighter". Freighter will prompt you to sign the transaction with your wallet's private key.
 <img src={confirm_pmt} alt="confirm payment" />
 
 Once signed, click the "Submit Payment" button, and the transaction will be submitted to the network.
-
 <img src={submit_pmt} alt="submit payment" />
 
 The Payment Dapp will show a confirmation message once the transaction has been successfully submitted.
-
 <img src={end} alt="end" />
 
 You can now check the balance of the receiving account to ensure that the transaction was successful.
-
 <img src={balance_rcvr} alt="balance receiver" width="50%" />
 
 You can also check the balance of an account with the soroban-cli by running the following command:
@@ -207,17 +241,24 @@ You can also check the balance of an account with the soroban-cli by running the
     --id <RECIPIENT_PUBLIC_KEY>
 ```
 
+
 Output:
 
 ```bash
 "1000000000"
 ```
 
+</TabItem>
+</Tabs>
+
+</TabItem>
+</Tabs>
+
 <CompleteStepButton id={1} progress={2}>
-  Tokens added
+  Tokens Sent
 </CompleteStepButton>
 
-## Checkpoint 6: 🚢 Ship it! 🚁
+## Checkpoint 5: 🚢 Ship it! 🚁
 
 You can upload your dapp to a hosting platform of your choice. You could use platforms like Netlify, Vercel, or even an AWS S3 bucket.
 
@@ -269,7 +310,7 @@ You can now visit the preview link to see your deployed dapp! 🎉
 
 You will need to add some Futurenet network lumens to your Freighter wallet to interact with the deployed dapp. Visit [https://laboratory.stellar.org/#create-account](https://laboratory.stellar.org/#create-account), and follow the instructions to create your Freighter account on Futurenet.
 
-## Checkpoint 7: ✅ Complete the Challenge!
+## Checkpoint 6: ✅ Complete the Challenge!
 
 Submit your public URL to the challenge form.
 
@@ -283,7 +324,7 @@ Join [our Community in Discord](https://discord.gg/stellardev) in case you have
 
 :::
 
-## Checkpoint 8: 💪 Share Your Accomplishment with the Community
+## Checkpoint 7: 💪 Share Your Accomplishment with the Community
 
 Don't forget to share your work with the community. Let others see what you've accomplished, receive feedback, and inspire others!
 
diff --git a/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx b/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx
index 81a42be8..19a039cd 100644
--- a/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx
+++ b/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx
@@ -41,6 +41,7 @@ git clone https://github.com/stellar/soroban-dapps-challenge
 cd soroban-dapps-challenge
 git checkout liquidity-pool
 ```
+
 Then, install soroban-cli alias by running the following command:
 
 ```sh
@@ -96,69 +97,189 @@ You will need to add some Futurenet network lumens to your wallet to interact wi
 
 > Note: These are test lumens for use on Futurenet and cannot be used on Mainnet
 
-## Checkpoint 3: 🏦 Mint Tokens for the Liquidity Pool
+## Checkpoint 3: 🌊 Dive into the Liquidity Pool
+
+Embark on a tidal journey! In this step you will mint, deposit, swap, and withdraw tokens from the liquidity pool.
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+<Tabs defaultValue="mintTokens" values={[
+    {label: '🏦 Mint Tokens', value: 'mintTokens'},
+    {label: '💰 Add Liquidity', value: 'depositLiquidity'},
+    {label: '🔄 Make a Swap', value: 'makeSwap'},
+    {label: '⤴️ Remove Liquidity', value: 'makeWithdrawal'},
+]}>
+
+<TabItem value="mintTokens">
+
+<Tabs defaultValue="openDappMint" values={[
+    {label: 'Mint', value: 'openDappMint'},
+    {label: 'Approve', value: 'approveTxMint'},
+    {label: 'Check', value: 'checkBalanceMint'},
+]}>
+
+<TabItem value="openDappMint">
+
+#### Mint USDC and BTC
 
 Open the dapp frontend and click the "MINT" button for USDC and BTC.
 
 <img src={mint_tokens} width="40%" />
+</TabItem>
+
+<TabItem value="approveTxMint">
+
+#### Approve Transaction
 
 You should see a popup from Freighter asking you to sign the transactions. Click on "Approve" and wait for the transaction to be confirmed.
 
 <img src={approveTokenMint} width="40%" />
+</TabItem>
+
+<TabItem value="checkBalanceMint">
+
+#### Check Updated Balance
 
 You should see an updated balance in the account balance component.
 
 <img src={updatedBalances} width="40%" />
+</TabItem>
 
-> Note: These are test tokens for use on Futurenet or Mainnet.
+</Tabs>
+
+</TabItem>
 
-## Checkpoint 4: 💰 Deposit into the Liquidity Pool
+<TabItem value="depositLiquidity">
 
-Now that your wallet is set up, let's fund the liquidity pool.
+<Tabs defaultValue="openDappDeposit" values={[
+    {label: 'Deposit', value: 'openDappDeposit'},
+    {label: 'Approve', value: 'approveTxDeposit'},
+    {label: 'Check', value: 'checkBalanceDeposit'},
+]}>
+
+<TabItem value="openDappDeposit">
+
+#### Deposit into the Liquidity Pool
 
 Open the frontend, enter the desired token amounts, and click the "Deposit" button. You should see a popup from Freighter asking you to sign the transaction.
 
 <img src={deposit50} width="75%" />
+</TabItem>
 
-Click on "Approve" and wait for the transaction to be confirmed.
+<TabItem value="approveTxDeposit">
 
-Once the transaction is confirmed, you should see your balances updated.
+#### Approve Transaction
 
-<img src={updatedBalances50} width="40%" />
+Click on "Approve" and wait for the transaction to be confirmed. Once the transaction is confirmed, you should see your balances updated.
+
+</TabItem>
+
+<TabItem value="checkBalanceDeposit">
+
+#### Check Updated Balance
 
 You should see an updated balance in the amounts you have deposited in the account and reserve balance components, respectively. Following the example, you should see 50 USDC, 50 BTC, and 50 POOL.
 
-## Checkpoint 5: 🔄 Make a Swap
+<img src={updatedBalances50} width="40%" />
+
+</TabItem>
+
+</Tabs>
+
+</TabItem>
+
+<TabItem value="makeSwap">
+
+<Tabs defaultValue="openDappSwap" values={[
+    {label: 'Swap', value: 'openDappSwap'},
+    {label: 'Approve', value: 'approveTxSwap'},
+    {label: 'Check', value: 'checkBalanceSwap'},
+]}>
 
-Now that you have funded the liquidity pool, let's make a swap.
+<TabItem value="openDappSwap">
+
+#### Swap Tokens
+
+Now that you have funded the liquidity pool, you can make a swap.
 
 Open the swap tab, input the desired token swap amounts, and click the "Swap" button. You should see a popup from Freighter asking you to sign the transaction.
 
 <img src={swap} width="75%" />
 
+</TabItem>
+
+<TabItem value="approveTxSwap">
+
+#### Approve Transaction
+
 Click on "Approve" and wait for the transaction to be confirmed.
 
+</TabItem>
+
+<TabItem value="checkBalanceSwap">
+
+#### Check Updated Balance
+
 Once the transaction is confirmed, you should see updated balances on the frontend.
 
 <img src={swapComplete} width="75%" />
 
-## Checkpoint 6: ⤴️ Make a Withdrawal
+</TabItem>
+
+</Tabs>
+
+</TabItem>
+
+<TabItem value="makeWithdrawal">
+
+<Tabs defaultValue="openDappWithdraw" values={[
+    {label: 'Withdraw', value: 'openDappWithdraw'},
+    {label: 'Approve', value: 'approveTxWithdraw'},
+    {label: 'Check', value: 'checkBalanceWithdraw'},
+]}>
+
+<TabItem value="openDappWithdraw">
+
+#### Withdraw Tokens from the Liquidity Pool
 
-Now that you have funded the liquidity pool, let's make a withdrawal.
+Now that you have funded the liquidity pool, you can make a withdrawal.
 
 Open the withdraw tab, select how much liquidity you want to remove with the sliding bar, and click the "Withdraw" button. You should see a popup from Freighter asking you to sign the transaction.
 
 <img src={wdraw} width="75%" />
 
+</TabItem>
+
+<TabItem value="approveTxWithdraw">
+
+#### Approve Transaction
+
 Click on "Approve" and wait for the transaction to be confirmed.
 
+</TabItem>
+
+<TabItem value="checkBalanceWithdraw">
+
+#### Check Updated Balance
+
 Once the transaction is confirmed, you should see updated balances on the frontend.
 
+<img src={updatedBalances} width="40%" />
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+</Tabs>
+
+> Note: These are test tokens for use on Futurenet or Mainnet.
+
 <CompleteStepButton id={2} progress={2}>
   Transactions completed
 </CompleteStepButton>
 
-## Checkpoint 7: 🚢 Ship It! 🚁
+## Checkpoint 4: 🚢 Ship It! 🚁
 
 Now that your dapp is fully functional , it's time to prepare it for new deployment on Futurenet using Vercel.
 
@@ -177,6 +298,7 @@ Then, navigate to the `frontend` directory and run the development server:
 cd frontend
 make setup && make start_dev
 ```
+
 Now, open your browser and visit [http://localhost:5173](http://localhost:5173/).
 
 Ensure that Freighter is connected to Futurenet, and you should be able to see the frontend of your dapp!
@@ -271,13 +393,13 @@ You can now visit the preview link to see your deployed dapp! 🎉
 
 You must add Futurenet network lumens to your Freighter wallet to interact with the deployed example dapp. Visit https://laboratory.stellar.org/#account-creator?network=futurenet, and follow the instructions to create your Freighter account on Futurenet.
 
-## Checkpoint 8: ✅ Complete the Challenge!
+## Checkpoint 5: ✅ Complete the Challenge!
 
 Submit your public URL to the challenge form.
 
 <ParentChallengeForm id={2} />
 
-## Checkpoint 9: 💪 Flex!
+## Checkpoint 6: 💪 Flex!
 
 🍴 [Fork the liquidity pool repo] and make your own changes to the dapp.
 
@@ -308,4 +430,4 @@ Then, via the web UI, you should be able to:
 
 ## 🛡️🗡️ Take On More Challenges
 
-View your progress and take on more challenges by visiting your [User Dashboard!](/dashboard)
\ No newline at end of file
+View your progress and take on more challenges by visiting your [User Dashboard!](/dashboard)