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

Commit

Permalink
Soroban Dapps Challenge: Update Sidebar and Remove Local Deployment (#…
Browse files Browse the repository at this point in the history 
…597)

* remove challenges top level dropdown; remove local deployment

* update Soroban version

* Prevent Popup for Testnet
  • Loading branch information
@Julian-dev28
Julian-dev28 authored Oct 5, 2023
1 parent 61d82b0 commit f60f340
Show file tree
Hide file tree
Showing 9 changed files with 119 additions and 203 deletions.
104 changes: 35 additions & 69 deletions dapps/dapp-challenges/challenge-0-crowdfund.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,14 @@ 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 check out the `challenge` branch:
First, clone the Soroban Dapps Challenge repo and check out the `crowdfund` branch:

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

Then, install soroban-cli alias by running the following command:
Expand All @@ -44,35 +42,14 @@ Then, install soroban-cli alias by running the following command:
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/).
## Checkpoint 1: 🎬 Deploy Smart Contracts

Then, and build the soroban-preview docker image:
Now that you have the Crowdfund branch checked out, it's time to deploy the smart contracts to a Sandbox environment.

```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:
In your terminal, load the contracts and initialize them in the Sandbox environment by running the following commands:

```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
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.

Expand Down Expand Up @@ -100,7 +77,9 @@ Please, save your deployed contract ID, you will need it to complete the challen
Mark smart contracts deployed
</CompleteStepButton>

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

Now that you have the smart contracts deployed, it's time to check out the frontend of your dapp.

First, start the development server:

Expand All @@ -110,28 +89,15 @@ 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.
> 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. If you are using Freighter, be sure that you have properly configured the Freighter Wallet by following the instructions [here](../guides/wallets#connect-a-wallet-freighter).
First, be sure that you have properly configured the Freighter Wallet by following the instructions [here](../guides/wallets#connect-a-wallet-freighter).
Now that you have the frontend running, it's time to connect it with your smart contracts.

Then, add the Standalone network in Freighter:
You will need to add some Futurenet network lumens to your wallet to interact with the dapp. Visit https://laboratory.stellar.org/#account-creator?network=futurenet, and follow the instructions to create and or fund an account on Futurenet.

- Name: `Standalone`
- URL: `http://localhost:8000/soroban/rpc`
- Passphrase: `Standalone Network ; February 2017`
- Allow HTTP connection: `Enabled`
- Switch to this network: `Enabled`
> Note: These are test lumens for use with Futurenet and cannot be used on Mainnet
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
## Checkpoint 3: 🏦 Mint Tokens for the Crowdfunding Campaign

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

Expand All @@ -145,9 +111,9 @@ 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
> Note: These are test tokens for use with Futurenet and cannot be used on Mainnet
## Checkpoint 5: 💰 Fund the Crowdfunding Campaign
## Checkpoint 4: 💰 Fund the Crowdfunding Campaign

Now that you have your wallet set up, let's fund the crowdfunding campaign.

Expand All @@ -169,23 +135,14 @@ You should see an updated balance in the amount you have pledged in the pledge c
Funding completed
</CompleteStepButton>

## Checkpoint 6: 🚢 Ship it! 🚁

Now that your dapp is fully functional locally, next prepare it for deployment on Futurenet.
## Checkpoint 5: 🚢 Ship it! 🚁

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
```
Now that your dapp is fully functional, next prepare it for a new deployment on Futurenet, this time with a hosted frontend.

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

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

Then run the dev server again:
Expand All @@ -198,6 +155,12 @@ 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 need to remove unneccessary files for the the deployment. Run the following command to remove the `target` directory:

```sh
rm -rf target
```

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.
Expand All @@ -207,13 +170,13 @@ Next, you will use the Vercel cli to complete our deployment.
First install the Vercel cli:

```sh
npm i global vercel
npm i --global vercel
```

Then, run the following command to deploy your dapp:

```sh
npx vercel
npx vercel --prod
```

Then, continue through the prompts (you will not need to modify any settings) until you reach the completion prompt similar to the following:
Expand All @@ -235,9 +198,8 @@ 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: 💪 Pass the Challenge!
## Checkpoint 6: 💪 Pass the Challenge!

Submit your public url to the challenge form and proceed to the next step to check your work.

Expand All @@ -251,7 +213,7 @@ Join [our Community in Discord](https://discord.gg/stellardev) in case you have

:::

## Checkpoint 8: ✅ Check your work!
## Checkpoint 7: ✅ Check your work!

In order to successfully complete this challenge, your work needs to be checked.
Please, follow this steps:
Expand All @@ -264,7 +226,7 @@ public key: GBSXUXZSA2VEXN5VGOWE5ODAJLC575JCMWRJ4FFRDWSTRCJ123456789
contract Id: CBKY7UN5VGD4LIQFOBOTSUSQWK67BZZTA23NIEVWSWRR5SAT26JQN2BN
production: https://soroban-example-dapp-rho.vercel.app
```
3. Create a Pull Request to the `stellar/soroban-dapps-challenge/main` branch. When the PR will be created, CI actions will check the `crowdfund/challenge/output.txt` file data and update your progress.
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.
5. Fix errors if present:
- find the error reason in the Crowdfund challenge CI results (you can find a link right in the pull request);
Expand Down Expand Up @@ -317,3 +279,7 @@ Then via the web UI, you should be able to:
- 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

## 🛡️🗡️ Take On More Challenges

View your progress and take on more challenges by visiting your [User Dashboard!](/dashboard)
12 changes: 8 additions & 4 deletions dapps/dapp-challenges/challenge-1-payment.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ Before you begin, ensure you have the following installed on your system:
Clone and set up the Example Soroban Payment Dapp repository:

```bash
git clone https://github.com/stellar/soroban-react-payment.git
cd soroban-react-payment
git clone https://github.com/stellar/soroban-dapps-challenge.git
git checkout payment
yarn
```

Expand Down Expand Up @@ -230,13 +230,13 @@ For this example, we will use the Vercel cli to complete your deployment
First install the Vercel cli:

```bash
npm i global vercel
npm i --global vercel
```

Then run the following command to deploy your app:

```bash
npx vercel
npx vercel --prod
```

Then continue through the prompts until you see the following output:
Expand Down Expand Up @@ -309,3 +309,7 @@ To ensure that you've covered all the key user actions during the challenge, fol
- Send tokens to another account
- Deploy the site with Vercel
- Submit your public key and URL
## 🛡️🗡️ Take On More Challenges
View your progress and take on more challenges by visiting your [User Dashboard!](/dashboard)
Loading

0 comments on commit f60f340

Please sign in to comment.