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

Commit

Permalink
Add tabs to dapps challenge checkpoints (#610)
Browse files Browse the repository at this point in the history 
* Update challenge-0-crowdfund.mdx

* Add tabs to interaction step

* add tabs to checkpoints
  • Loading branch information
@Julian-dev28
Julian-dev28 authored Oct 13, 2023
1 parent f71bded commit de63ead
Show file tree
Hide file tree
Showing 3 changed files with 277 additions and 51 deletions.
93 changes: 78 additions & 15 deletions dapps/dapp-challenges/challenge-0-crowdfund.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

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

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

Expand All @@ -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.
Expand Down
83 changes: 62 additions & 21 deletions dapps/dapp-challenges/challenge-1-payment.mdx
View file
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

0 comments on commit de63ead

Please sign in to comment.