Skip to content

Commit

Permalink
Add dapps challenge (#487)
Browse files Browse the repository at this point in the history 
* Add Dapps Challenge to Docs

Todo: user dashboard visibility

* add hide unless dapps

* update user card

* update checkpoints

* add user dashboard to dapps challenges

* Update Dapp Challenge Description

* Update tsconfig.json

* fix tsconfig.json

* small grammar fixes

* small grammar fixes

* small grammar fixes

* small grammar fixes

* small grammar fixes

* update challenge 0 and 1 ; add images for challenge 2

* Capitalize Futurenet; lowercase Dapp when needed

* disclaimer; nit crowdfunding -> crowdfund

* Update challenge-0-crowdfund.mdx

* update layout and guides

* Update smart-contracts.mdx

* update content

* add links

* nit update soroban quickstart

* Update react.mdx

* Update challenge-0-crowdfund.mdx

* update start course redirect

* we -> you

* update wrangler endpoint to stellar cloudflare

* update wrangler endpoint

* add module resolution and jsx

* add wrong network page; remove unused code; add vercel.app checking

* update wallets conclusion

* nit Update wallets.mdx

* nit update broken link

* Freighter -> WalletData Component

* update crowdfund dapps challenge for P10

* Fix Setup

* update docker workflow; add better notes

* nit standalone docker requirement

* re-enable .vercel.app check; move ParentChallengeForm

* move Login function

* fixed automatic log in problem

* comment out connection check

* comment out auto connect hook; nit Login -> Connect

* removed unused setLoading() changed order of operations

* update to checkout challenge branch

* completed challenge message = clickable url

* remember user is logged in

* setup `BrowserOnly`

* Update yarn.lock

* Update yarn.lock

* merge main into dapps challenge

* Update yarn.lock

* nit: refresh message

* add disconnect button comment; better connection insight

* update contract initialization to use strings

* auto populate url; add resubmit; fix broken invoke

* add setSavedUrl; improve url auto populate

* improve local storage for pubkey

---------

Co-authored-by: Bri <[email protected]>
  • Loading branch information
@Julian-dev28 @briwylde08
Julian-dev28 and briwylde08 authored Jul 26, 2023
0 parents commit 3463f57
Show file tree
Hide file tree
Showing 39 changed files with 3,072 additions and 0 deletions.
7 changes: 7 additions & 0 deletions dapps/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"position": 1,
"label": "Dapps",
"link": {
"type": "generated-index"
}
}
7 changes: 7 additions & 0 deletions dapps/dapp-challenges/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"position": 2,
"label": "Challenges",
"link": {
"type": "generated-index"
}
}
280 changes: 280 additions & 0 deletions dapps/dapp-challenges/challenge-0-crowdfund.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
---
sidebar_position: 0
title: Crowdfund Dapp Challenge
description: Build and ship a Crowdfund Dapp! Beat the Challenge!
---

import mintToken from "../../static/img/mintToken.png";
import approveTokenMint from "../../static/img/approveTokenMint.png";
import updatedBalance from "../../static/img/updatedBalance.png";
import back100 from "../../static/img/back100.png";
import success from "../../static/img/success.png";
import backedResult from "../../static/img/backedResult.png";
import deployedDApp from "../../static/img/deployedDApp.png";
import { ParentChallengeForm } from "../../src/components/atoms/challenge-form";

# Crowdfund Dapp Challenge

This challenge will guide you through the process of building and shipping a crowdfunding dapp on Stellar using Soroban. You will learn how to deploy smart contracts to futurenet, and how to interact with them through a web frontend. In this context, the term "ship" refers to finalizing the development process of your dapp, ensuring that it functions as expected, and is accessible for user interaction and testing through a hosted frontend. However, it's crucial to clarify that despite its functionality, the dapp is not promoted nor intended for deployment in a production-level setting on futurenet. The challenge is designed for educational purposes, helping you understand how a dapp can be built and interacted with, with further customization and development, it has the potential to evolve into a full-fledged, ready-to-use crowdfunding solution.

## Checkpoint 0: 📦 Install 📚

Start by installing the required dependencies.

Required:

- `soroban-cli alias`: [Download Soroban Alias](https://github.com/stellar/soroban-example-dapp#install-dependencies)
- `docker` (Standalone backend requires it): [Download Docker](https://www.docker.com/products/docker-desktop)
- `Node` v18: [Download Node](https://nodejs.org/en/download/)
- `Freighter Wallet`: [Freighter Wallet](https://freighter.app/)

First, Clone the soroban example dapp repo and checkout the `challenge` branch:

```sh
git clone https://github.com/stellar/soroban-example-dapp
cd soroban-example-dapp
git checkout challenge
```

Then, install Soroban-cli alias installed by running the following command:

```sh
cargo install_soroban
```

Next, make sure that your Docker daemon is running by either opening [Docker Desktop](https://www.docker.com/products/docker-desktop)(recommended) or following the instructions provided [here](https://docs.docker.com/config/daemon/start/).

Then, and build the soroban-preview docker image:

```sh
make build-docker
```

Building the docker image lets you avoid installing the specific version of soroban-cli if desired.

## Checkpoint 1: 🚀 Launch Backend 🌐

Open your Docker Desktop app and make sure it is running. Then run the following command to start the backend:

```sh
./quickstart.sh standalone
```

and wait for it to start.

## Checkpoint 2: 🎬 Deploy Smart Contracts

Now that the backend environment is set up, we need to deploy our smart contracts to in a sandbox environment.

In another terminal, load the contracts and initialize them on the Standalone network by running the following commands:

```sh
npm run clean
NETWORK=standalone npm run setup
```
If the command runs successfully, your terminal will return a series of messages notifying you about the successful initialization of the contracts and the post-installation sequence.

```sh
Contract deployed succesfully with ID: CBXHU5BWWTOCZRYX3DMSSKCFG7B3K2YG2I5F75ALPQ6GCY6ZES2XKLTI
Deploy the crowdfund contract
Contract deployed succesfully with ID: CBKY7UN5VGD4LIQFOBOTSUSQWK67BZZTA23NIEVWSWRR5SAT26JQN2BN
Initialize the abundance token contract

Initialize the crowdfund contract

Done

> [email protected] build-contracts
...
```


## Checkpoint 3: 🤝 Connect the Frontend to the Backend

First, start the development server:

```sh
npm run dev
```

Now open your browser and visit [http://localhost:3000](http://localhost:3000). You should be able to see the frontend of your dapp.

> Note: Follow the instructions below and ensure that you have funded your wallet address that you intend to use from browser, otherwise the dapp display will be blank and a 'Account not found' will be printed on browser's console only.
Now that we have the frontend running, it's time to connect it with our smart contracts.

First, be sure that you have properly configured Freighter Wallet by following the instructions [here](../guides/wallets#connect-a-wallet-freighter).

Then, add the Standalone network in Freighter:

- Name: `Standalone`
- URL: `http://localhost:8000/soroban/rpc`
- Passphrase: `Standalone Network ; February 2017`
- Allow HTTP connection: `Enabled`
- Switch to this network: `Enabled`

Next, add some Standalone network lumens to your Freighter wallet by doing the following:

- Copy the address for your freighter wallet.
- Visit `http://localhost:8000/friendbot?addr=<your_address>`

> Note: These are test lumens for use with your local network and cannot be used on Futurenet or Mainnet
## Checkpoint 4: 🏦 Mint Tokens for the Crowdfunding Campaign

Open the dapp frontend and click on the "Mint 100 ABND" button.

<img src={mintToken} width="40%" />

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%" />

You should see an updated balance in the pledge component.

<img src={updatedBalance} width="40%" />

> Note: These are test tokens for use with your local network and cannot be used on Futurenet or Mainnet
## Checkpoint 5: 💰 Fund the Crowdfunding 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.

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.

<img src={backedResult} width="40%" />

## Checkpoint 6: 🚢 Ship it! 🚁

Now that your dapp is fully functional locally, next prepare it for deployment on Futurenet.

Stop the development server by pressing `ctrl+c` in the terminal where it is running.

If you are running docker, now is a good time to stop the stellar and soroban preview containers.

```sh
docker stop stellar soroban-preview
```

Then, run the following commands to initialize the contracts on Futurenet:

```sh
npm run clean
npm run setup
```

Then run the dev server again:

```sh
npm run dev
```

Now, open your browser and visit [http://localhost:3000](http://localhost:3000).

Ensure that you are connected to Futurenet and you should be able to see the frontend of your dapp!

Next, you will use the Vercel cli to complete our deployment.

> Note: If you don’t already have a [Vercel account], you will need to create one and link it to your github account.
[Vercel account]: https://vercel.com/login

First install the Vercel cli:

```sh
npm i global vercel
```

Then, run the following command to deploy your dapp:

```sh
npx vercel
```

Then, continue through the prompts(you will not need to modify any settings) until you reach the completion prompt similar to the following:

```sh
Vercel CLI 30.1.1
🔗 Linked to julian-dev28/soroban-example-dapp (created .vercel)
🔍 Inspect: https://vercel.com/julian-dev28/soroban-example-dapp/C1YZVQSqh6WcyR1uvxz8q2tW1tjD [2s]
✅ Production: https://soroban-example-dapp-rho.vercel.app [42s]
```

You can now visit the preview link to see your deployed dapp! 🎉

<img src={deployedDApp} width="90%" />

You will need to add some Futurenet network lumens to your Freighter wallet to interact with the deployed dapp. Visit [https://laboratory.stellar.org/#account-creator?network=futurenet](https://laboratory.stellar.org/#account-creator?network=futurenet), and follow the instructions to create your freighter account on Futurenet.

## Checkpoint 7: ✅ Complete the Challenge!

Submit your public url to the challenge form.

<ParentChallengeForm courseId={0} />

## Checkpoint 8: 💪 Flex!

Invite a friend to try out your dapp and ask them to provide feedback!

## ⚔️ Side Quests

🌐 Explore [Stellar Laboratory] to inspect your account assets on Futurenet.

You should see something like this:

```json
"balances": [
{
"balance": "100.0000000",
"limit": "922337203685.4775807",
"buying_liabilities": "0.0000000",
"selling_liabilities": "0.0000000",
"last_modified_ledger": 148108,
"is_authorized": true,
"is_authorized_to_maintain_liabilities": true,
"asset_type": "credit_alphanum4",
"asset_code": "ABND",
"asset_issuer": "GBUGENT4FK4Y6FZNZEEGVZJLCHKNES23FRVOPPOI62RUF4WRSNOTSZV4"
},
]
```

<br />

🍴 [Fork the Crowdfund repo] and make your own changes to the dapp.

Customize the code and submit a pull request for the Crowdfund Dapp challenge. You can experiment with new fundraising strategies, improve the user interface, or integrate additional payment options.

Take this opportunity to showcase your skills and make your mark on the Crowdfund Dapp. Good luck!

[Stellar Laboratory]: https://laboratory.stellar.org/#explorer?network=futurenet
[Fork the Crowdfund repo]: https://github.com/stellar/soroban-example-dapp/fork

## 📚 User Workflows Checklist

During this exercise you should be able to:

- Clone the example repo (Crowdfund Dapp)
- Choose your target amount and deadline
- Deploy your contract to Futurenet
- Deploy the example web ui somewhere (e.g. netlify, vercel, surge, etc.)

Then via the web UI, you should be able to:

- Connect your wallet
- See your current balance(s)
- See the current fundraising status (total amount & time remaining)
- See allowed assets
- Deposit an allowed asset
- See your deposit(s) appear on the page as the transactions are confirmed.
- "Live"-Update the page with the total amount with the new amount
Loading

0 comments on commit 3463f57

Please sign in to comment.