Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

Add tabs to dapps challenge checkpoints #610

Merged
merged 3 commits into from
Oct 13, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
add tabs to checkpoints
  • Loading branch information
Julian-dev28 committed Oct 11, 2023
commit 292ae77e9fcb3569100d6f2550cac6e169a8ca8e
14 changes: 8 additions & 6 deletions dapps/dapp-challenges/challenge-0-crowdfund.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,13 @@ 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: 🏦 Fund the 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 for the Crowdfunding Campaign', value: 'mint'},
{label: '💰 Fund the Crowdfunding Campaign', value: 'fund'},
{label: '🏦 Mint Tokens', value: 'mint'},
{label: '💰 Fund the Campaign', value: 'fund'},
]}>

<TabItem value="mint">
Expand Down Expand Up @@ -199,7 +201,7 @@ You should see an updated balance reflecting the amount you have pledged in the
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.

Expand Down Expand Up @@ -263,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.

Expand All @@ -277,7 +279,7 @@ 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:

Expand Down
83 changes: 62 additions & 21 deletions dapps/dapp-challenges/challenge-1-payment.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

Expand Down Expand Up @@ -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:
Expand All @@ -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.

Expand Down Expand Up @@ -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.

Expand All @@ -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!

Expand Down
Loading