diff --git a/dapps/dapp-challenges/challenge-0-crowdfund.mdx b/dapps/dapp-challenges/challenge-0-crowdfund.mdx index b9342f3ca..0c54fb91f 100644 --- a/dapps/dapp-challenges/challenge-0-crowdfund.mdx +++ b/dapps/dapp-challenges/challenge-0-crowdfund.mdx @@ -17,22 +17,42 @@ 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"; +import "./styles.css"; + + + 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. +This challenge will guide you through the process of building and shipping a crowdfunding dapp on Stellar using Soroban. Unlike traditional crowdfunding applications, crowdfunding dapps (decentralized applications) provide the means for users to pledge funds to a crowdfund campaign directly from their digital wallets, without the need for intermediaries. + +In this challenge, 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. +Start by installing the required dependencies. You'll also want to be sure you have the most updated version of Rust installed. Required: -- `soroban-cli alias`: [Download Soroban Alias](https://github.com/stellar/soroban-example-dapp#install-dependencies) +- `soroban-cli alias` (installed in the next step) - `Node` v18: [Download Node](https://nodejs.org/en/download/) - `Freighter Wallet`: [Freighter Wallet](https://freighter.app/) -First, clone the Soroban Dapps Challenge repo and check out the `crowdfund` branch: +First, clone the Soroban Dapps Challenge repo and check out the `crowdfund` branch, which contains the code for the crowdfund smart contract that powers this dapp: ```sh git clone https://github.com/stellar/soroban-dapps-challenge.git @@ -46,9 +66,11 @@ Then, install soroban-cli alias by running the following command: cargo install_soroban ``` +Soroban CLI is the command line interface to Soroban. It allows you to build, deploy, and interact with smart contracts, configure identities, generate key pairs, manage networks, and more. The soroban-cli (alias) that is used in this challenge is a pinned version of the soroban-cli that is used in the Soroban Dapps Challenge. This ensures that the challenge is reproducible and that all participants are using the same version of Soroban. + ## Checkpoint 1: 🎬 Deploy Smart Contracts -Now that you have the Crowdfund branch checked out, it's time to deploy the smart contracts to a Sandbox environment. +Now that you have the Crowdfund branch checked out, it's time to deploy the smart contracts to a Sandbox environment. Deploying a smart contract in a production setting involves submitting the contract code to the blockchain's main network ( Mainnet ), where it becomes part of the chain's immutable ledger. Deploying smart contracts to a Sandbox environment simulates that process without actually affecting Mainnet. When you deploy the smart contracts, you'll instead deploy to Futurenet, a test network with more cutting-edge features that have not yet been implemented in the Mainnet. In your terminal, load the contracts and initialize them in the Sandbox environment by running the following commands: @@ -72,9 +94,11 @@ Done ... ``` -:::caution +The contract ID is a unique identifier for a smart contract deployed on a blockchain. This contract ID is used to interact with and reference the smart contract, allowing users to invoke functions from the smart contract, send transactions, or otherwise interact with the smart contract's functionalities and data stored on the blockchain. + +:::tip -Please, save your deployed contract ID, you will need it to complete the challenge. +Please, save your deployed contract ID. You will need it to complete the challenge. ::: @@ -82,7 +106,7 @@ Please, save your deployed contract ID, you will need it to complete the challen ## 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. +Now that you have deployed the smart contract, it's time to check out the frontend of your dapp. The frontend is the browser interface where contributors to your crowdfund campaign will connect their digital wallets and pledge assets to the campaign's cause. First, start the development server: @@ -94,15 +118,13 @@ Now open your browser and visit [http://localhost:3000](http://localhost:3000). > 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). -Now that you have the frontend running, it's time to connect it with your smart contracts. +Now that you have the frontend running, it's time to connect it with the backend, your smart contract, that defines the rules and logic of the crowdfund campaign, including the function for accepting contributions. If you want to dig into the specifics of the contract, take a look at the video walkthrough of the contract code [here](https://youtu.be/vTz0CQYnMRQ?t=260&feature=shared). -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. - -> Note: These are test lumens for use with Futurenet and cannot be used on Mainnet +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. Remember, these are test lumens for use on Futurenet and cannot be used on Mainnet. ## Checkpoint 3: 🌟 Powering the Campaign -Fuel the vision! In this step, you will learn how to mint tokens and fund the crowdfunding campaign. +Fuel the vision! In this step, you will learn how to mint tokens and fund the crowdfunding campaign. Minting tokens in a crowdfund dapp, while not always required, serves as a bootstrapping mechanism for the campaign, allowing the campaign to be funded with the minted tokens. + @@ -133,7 +155,7 @@ Open the dapp frontend and click on the "Mint 100 ABND" button. You should see a popup from Freighter asking you to sign the transaction. Click on "Approve" and wait for the transaction to be confirmed. - + @@ -143,7 +165,7 @@ You should see a popup from Freighter asking you to sign the transaction. Click You should see an updated balance in the pledge component. - + @@ -165,7 +187,7 @@ You should see an updated balance in the pledge component. 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. - + @@ -175,7 +197,7 @@ Now that you have your wallet set up, let's fund the crowdfunding campaign. Open Click on "Approve" and wait for the transaction to be confirmed. Once the transaction is confirmed, you should see a success message. - + @@ -185,7 +207,7 @@ Click on "Approve" and wait for the transaction to be confirmed. Once the transa You should see an updated balance reflecting the amount you have pledged in the pledge component. - + @@ -221,24 +243,38 @@ rm -rf target >Note: You can build this directory again by running `soroban contract build` in the `contracts/abundance` directory. -Next, you will use the Vercel cli to complete your deployment. +Then, remove any existing `.vercel` directory in your project to ensure that you are starting with a clean slate: -Run the following command to deploy your dapp: +```bash +rm -rf .vercel +``` -```sh -npx vercel --prod +Then, run the following command to deploy your example dapp: + +```bash +vercel --prod +``` + +Vercel will prompt you to link your local project to a new Vercel project. +Follow the answers to the prompts below to ensure that your local project is correctly linked to a new Vercel project: + +```bash +? Set up “~/Documents/GitHub/test/soroban-dapps-challenge”? [Y/n] y +? Which scope should contain your project? +? Link to existing project? [y/N] n +? What’s your project’s name? +? In which directory is your code located? ./ ``` 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] ``` -:::caution +:::tip Please, save your production url, you will need it to complete the challenge. @@ -248,10 +284,14 @@ You can now visit the preview link to see your deployed dapp! 🎉 +Remember, 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 5: 💪 Pass the Challenge! -Submit your public url to the challenge form and proceed to the next step to check your work. +Now it's time to submit your work! + +Submit your `Production` URL from the previous step into the challenge form to pass the challenge! @@ -265,15 +305,15 @@ Join [our Community in Discord](https://discord.gg/stellardev) in case you have ## Checkpoint 6: ✅ Check your work! -In order to successfully complete this challenge, your work needs to be checked. Please, follow this steps: +In order to successfully complete this challenge, your work needs to be checked. Please, follow the steps below: 1. Fork [the challenge repository](https://github.com/stellar/soroban-dapps-challenge/fork). -2. Fill `crowdfund/challenge/output.txt` file with your wallet address. Filled file should look like: +2. Fill the `crowdfund/challenge/output.txt` file with your wallet address. The filled file should look as follows: ```sh 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. +3. Create a Pull Request to the `stellar/soroban-dapps-challenge/crowdfund` branch. When the PR is 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: diff --git a/dapps/dapp-challenges/challenge-1-payment.mdx b/dapps/dapp-challenges/challenge-1-payment.mdx index 3ee1149b2..fb7a20a9f 100644 --- a/dapps/dapp-challenges/challenge-1-payment.mdx +++ b/dapps/dapp-challenges/challenge-1-payment.mdx @@ -4,6 +4,23 @@ title: Payment Dapp Challenge description: Take on the challenge and master the Soroban Payment Dapp! --- + + Payment Dapp Challenge. + + + + + + import connect_freighter from "../../static/img/connect_freighter.png"; import freighter_settings from "../../static/img/freighter_settings.png"; import add_token from "../../static/img/add_token.png"; @@ -26,22 +43,26 @@ 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" +import './styles.css'; -This challenge will guide you through the process of setting up, customizing, and deploying the Example Soroban Payment Dapp, and building a blockchain-powered payment application designed to work with the Freighter wallet. +This challenge will guide you through the process of setting up, customizing, and deploying a Soroban Payment dapp, a blockchain-powered payment application designed to work with the Freighter wallet. Payment dapps are powerful because they offer users equitable and accessible means to send and receive payments. Transactions via a payment dapp are peer-to-peer, which means that no central authority, third-party, or bank oversees or controls the payment. This decentralization reduces payment fees, which are comparatively minimal on a blockchain, and transaction time, which is, via a payment dapp, almost instantaneous. What's more, the wallet integration in a payment dapp, like Freighter in this case, means that anyone with a smartphone and the wallet installed can use the payment dapp, no matter where they are in the world. ## Checkpoint 0: 📦 Install Dependencies -Before you begin, ensure you have the following installed on your system: +Before you begin, ensure you have the following installed on your system. You'll also want to be sure you have the most updated versions of Rust and Soroban installed. +- `soroban-cli`: [Install soroban-cli](../../docs/getting-started/setup) - `Node` (>=16.14.0 < 17.0.0): [Download Node](https://nodejs.org/en/download/) -- `Yarn` (v1.22.5 or newer): [Install Yarn](https://yarnpkg.com/) +- `Yarn` (v1.22.5 or newer): [Install Yarn](https://yarnpkg.com/getting-started/install) - `Freighter Wallet`: [Freighter Wallet](https://freighter.app/) +Node and Yarn are package managers that let you install and manage dependencies during the dapp development process. Freighter is the wallet you will integrate into your payment dapp. + ## Checkpoint 1: 🚀 Clone the Repository -Clone and set up the Example Soroban Payment Dapp repository: +Clone and set up the Soroban Dapps Challenge repository, which contains the Soroban Payment Dapp files. Then run yarn to install the dependencies. ```bash git clone https://github.com/stellar/soroban-dapps-challenge.git @@ -52,9 +73,15 @@ yarn ## Checkpoint 2: 🎬 Deploy Smart Contracts -For this step you will need to clone and deploy the Soroban token smart contracts. The Soroban token is a custom token that will be used to facilitate payments in the Payment Dapp. +For this step you will need to clone and deploy the Soroban token smart contract from the [Soroban Examples repository](https://github.com/stellar/soroban-examples/tree/v20.0.0-rc2/token). This Soroban token smart contract, broken into several smaller modules (as is the custom for complex smart contracts like this one), enables you to create and manage tokens on Soroban. -In a new terminal window, follow the steps below to build and deploy the smart contracts: +The Soroban token is a custom token that will be used to facilitate payments in the Payment Dapp. Tokens are essentially programmable assets on a blockchain, and smart contracts provide the automation and rules for these tokens. They allow for predefined conditions and actions related to the tokens, such as issuance, transfer, and more complex functions, ensuring the execution of these operations without the need for intermediaries. In the case of this Payment Dapp, you will use the Soroban token to initialize and mint "Demo Token" assets, or DT, that you can then use to make payments via the Payment Dapp. + +:::info +Soroban Tokens are not the same as [Stellar Asset Contracts](https://soroban.stellar.org/docs/advanced-tutorials/stellar-asset-contract) which allow users to use their Stellar native asset balances in Soroban. If you are curious about the mechanics of Soroban Tokens and Stellar Asset Contracts, you can read more about them in the [Soroban Token Playground](https://token-playground.gitbook.io/guide/). +::: + +In a new terminal window, follow the steps below to build and deploy the token smart contract: ```bash git clone https://github.com/stellar/soroban-examples.git @@ -64,7 +91,9 @@ make This will build the smart contracts and put them in the `token/target/wasm32-unknown-unknown/release` directory. -Next, you will need to deploy the smart contracts to Futurenet. To do this, open a terminal in the `soroban-examples/token` directory and follow the steps below: +Next, you will need to deploy the token smart contract to Futurenet. In order to deploy to future, you will need a Stellar account keypair (a public key and its corresponding secret key). Keep in mind that Freighter, where you can create and view your account's public key, intentionally does not allow you or any application to access your secret key. It's recommended therefore to generate a new Futurenet keypair using [Stellar Laboratory](https://laboratory.stellar.org/#account-creator?network=futurenet), fund the account, and then import the keypair's public key into your Freighter wallet. + +Once you have done this and are ready to deploy the token smart contract to Futurenet, open a terminal in the `soroban-examples/token` directory and follow the steps below: ```bash soroban contract deploy \ @@ -74,7 +103,7 @@ soroban contract deploy \ --network-passphrase 'Test SDF Future Network ; October 2022' ``` -This will return a contract id that we will need to use in the next step. +Deploying the token contract to Futurenet will return a contract ID that you will need to use in the next step to invoke the token smart contract and initialize the Soroban token as "Demo Token": ```bash soroban contract invoke \ @@ -91,15 +120,15 @@ soroban contract invoke \ Lets take a look at what is happening here: -- Admin Account: This is the public key of the administrator account. It is the 'master' account that has control over the token contract. +- admin: This is the public key of the administrator account and corresponds to the secret key you used to deploy the contract in the previous step. It is the "master" account that has control over the token contract. -- Decimal Precision: We set this value to 7. This indicates that your token will have 7 decimal places, providing fine-grained control and flexibility in transactions. +- decimal: This decimal precision value is set to 7. This value indicates that your token will have 7 decimal places, providing fine-grained control and flexibility in transactions. -- Name: We set this value to 'Demo Token'. This is the name of your token written as a string. In this case, we use a string, 'Demo Token'. +- name: This value is set to "Demo Token," the name of your token written as a string. -- Symbol: Your token symbol is a short string that represents your token. In this case, we use a string, 'DT'. +- symbol: Your token symbol is a short string that represents your token, in this case, "DT." -Next we will need to mint some tokens to your sender's account. To do this, run the following command: +Next, you will need to mint some tokens to your sender's account (the administrator account you used to deploy the contract and initialize the token above). To do this, run the following command: ```bash soroban contract invoke \ @@ -112,13 +141,25 @@ soroban contract invoke \ --amount 1000000000 ``` +This will mint 100 DT tokens to the `to` address. You can check any address' balance by running the following command: + +```bash +soroban contract invoke \ + --id \ + --source-account \ + --rpc-url https://rpc-futurenet.stellar.org:443 \ + --network-passphrase 'Test SDF Future Network ; October 2022' \ + -- balance \ + --id +``` + ## Checkpoint 3: 🖥️ Launch the Frontend -Make sure that the frontend of the Payment Dapp successfully communicates with the backend, allowing transactions to be created, signed, and submitted to the network. +In this checkpoint, you will make sure that the frontend of the Payment Dapp successfully communicates with the backend, allowing transactions to be created, signed, and submitted to the network. -Open a terminal in the `soroban-react-payment` directory and run the following command: +Open a terminal in the `soroban-dapps-challenge` directory and run the following command to launch the frontend of your dapp: ```bash yarn start @@ -133,9 +174,11 @@ $ webpack-dev-server --config config/webpack.dev.js ... ``` -Now open your browser and navigate to `http://localhost:9000/`. You should see the Payment Dapp running in your browser. +Now open your browser and navigate to [`http://localhost:9000`](http://localhost:9000). You should see the Payment Dapp running in your browser. -connect + + connect + ## Checkpoint 4: 🚀 Token Transfer Odyssey @@ -163,20 +206,20 @@ Follow the steps in the [Connect a Wallet: Freighter](../guides/wallets.mdx) gui #### Add Soroban Token -Open your Freighter wallet and click on the `Manage Assets` button at the bottom of the screen. -manage assets +To add the newly minted DT token type to your wallet, open your Freighter wallet and click on the `Manage Assets` button at the bottom of the screen. +manage assets -Then click on the `Add Soroban token ` button and enter the token ID that was returned when you deployed the smart contracts. -add token +Then click on the `Add Soroban token ` button and enter the token contract ID that was returned when you deployed the token smart contract. +add token
-new token +new token #### Check Token Addition You should now see the Soroban token in your Freighter wallet. -added balance +added balance @@ -192,44 +235,43 @@ You should now see the Soroban token in your Freighter wallet. #### Connect Freighter and Select Account -First, connect Freighter and Select the account that will be used to send Soroban tokens. -Click "next" to continue. -next +Back on your dapp's frontend webpage, make sure Freighter is connected and then select the account that will be used to send Soroban tokens. Click "next" to continue. +next #### Provide Token Transfer Details -Provide the public key of the account that will receive the Soroban tokens. -payment destination +To send DT tokens via the Payment dapp, provide the public key of the account that will receive the Soroban tokens. (This could be another of your own Freighter accounts.) +payment destination -Input the Token ID of the Soroban token. -choose token +Input the token ID of the Soroban token. +choose token Input the amount of Soroban tokens to send. -select token +select token -Confirm the payment settings. -payment settings +Confirm the payment settings, which include the option to add a memo and show the transaction fee. +payment settings #### 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. -confirm payment +Review the transaction details to ensure accuracy and then click "Sign with Freighter". Freighter will prompt you to sign the transaction with your wallet's private key. +confirm payment -Once signed, click the "Submit Payment" button, and the transaction will be submitted to the network. -submit payment +Once signed, click "Submit Payment." The transaction will be submitted to the network. +submit payment -The Payment Dapp will show a confirmation message once the transaction has been successfully submitted. -end +The Payment Dapp will show a confirmation message once the transaction has been successfully submitted. This includes the XDR response, which can be decoded using [stellar laboratory](https://laboratory.stellar.org/#xdr-viewer?type=TransactionResult&network=futurenet). +end You can now check the balance of the receiving account to ensure that the transaction was successful. -balance receiver +balance receiver -You can also check the balance of an account with the soroban-cli by running the following command: +As stated before, you can also check the balance of an account with the soroban-cli by running the following command: ```bash soroban contract invoke \ @@ -260,11 +302,9 @@ Output: ## 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. - -For this example, we will use the Vercel cli to complete your deployment +In this step, you will deploy your dapp to a hosting platform so that it can be accessed by anyone with an internet connection. You can use any hosting platform you like, but for demonstration purposes, this section will use [Vercel](https://vercel.com/). Vercel is a cloud platform for static sites and serverless functions that offers a free tier for developers. It also has a built-in integration with GitHub, which makes it easy to deploy your dapp directly from your GitHub repository. -> Note: If you dont already have a [Vercel account], you will need to create one and link it to your GitHub account. +If you dont already have a [Vercel account], you will need to create one and link it to your GitHub account. [Vercel account]: https://vercel.com/login @@ -274,45 +314,118 @@ First install the Vercel cli: npm i --global vercel ``` -Then run the following command to deploy your app: +Then, remove any existing `.vercel` directory in your project to ensure that you are starting with a clean slate: + +```bash +rm -rf .vercel +``` + +Next, you will need to create a new project on vercel. To do this, run the following command: + +```bash +vercel project add +``` + +For example: + +```bash +vercel project add soroban-react-payment +``` + +Next you will pull in the project settings locally by running the following command: + +```bash +vercel pull +``` + +Follow the answers to the prompts below to ensure that your local project is correctly linked to the target Vercel project: ```bash -npx vercel --prod +? Set up “~/Documents/GitHub/test/soroban-dapps-challenge”? [Y/n] y +? Which scope should contain your project? +? Link to existing project? [y/N] y +? What’s the name of your existing project? ``` -Then continue through the prompts until you see the following output: +After following the prompts, you should see something similar to the following output: ```bash -No framework detected. Default Project Settings: -- Build Command: 'npm run vercel-build' or 'npm run build' -- Development Command: None -- Install Command: 'yarn install', 'pnpm install', or 'npm install' -- Output Directory: 'public' if it exists, or '.' +... +🔗 Linked to julian-dev28/pmt-dapp (created .vercel) +> Downloading `development` Environment Variables for Project pmt-dapp +✅ Created .vercel/.env.development.local file [92ms] + +> Downloading project settings +✅ Downloaded project settings to ~/Documents/GitHub/test/soroban-dapps-challenge/.vercel/project.json [1ms] +``` + +Next, you will need to edit the `settings` section in `.vercel/project.json` to ensure that the `outputDirectory` is set to `build`: + +```diff + "settings": { + "createdAt": 1699390700432, + "framework": null, + "devCommand": null, + "installCommand": null, + "buildCommand": null, +- "outputDirectory": null, ++ "outputDirectory": "build", + "rootDirectory": null, + "directoryListing": false, + "nodeVersion": "18.x" + } ``` -Select `y` to continue, and then select `build` as the output directory. +Next, run the following command to build your dapp: ```bash -? Want to modify these settings? [y/N] y -? Which settings would you like to overwrite (select multiple)? Output Directory -? Output Directory? build +vercel build --prod ``` +What does the `vercel build` command do? It builds your dapp for production, which means that it optimizes your code for performance and creates an optimized production build of your dapp in the `.vercel/output` directory. This is the directory that you will deploy to Vercel. + +The output of the `vercel build` command should look something like this: + +```bash +.. +$ webpack --config config/webpack.prod.js +asset 8a7edf3024865247d470.js 1.73 MiB [emitted] [immutable] [minimized] (name: index) 1 related asset +... +webpack compiled in 12408 ms (be8ba6cc95f4aec4d07b) +✨ Done in 13.16s. +✅ Build Completed in .vercel/output [14s] +``` + +Next, you will deploy your dapp to Vercel by running the following command: + +```bash +vercel deploy --prebuilt --prod +``` + +Using the `--prebuilt` flag tells Vercel to deploy the the build outputs in `.vercel/output` that you created in the previous step. + Once the deployment is complete, you should see something similar to the following output: ```bash -🔗 Linked to julian-dev28/soroban-react-payment (created .vercel) -🔍 Inspect: https://vercel.com/julian-dev28/soroban-react-payment/AQoFFhZf5K1ufQj57eawApPkFduf [2s] -✅ Production: https://soroban-react-payment.vercel.app [58s] +🔍 Inspect: https://vercel.com/julian-dev28/soroban-react-payment/9PwV2DvuXJ3FWag7eLbjqNAhCeCu [2s] +✅ Production: https://soroban-react-payment-ahtko9qd1-julian-dev28.vercel.app [2s] ``` +:::tip + +Please, save your production url, you will need it to complete the challenge. + +::: + 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. +Remember, 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 6: ✅ Complete the Challenge! -Submit your public URL to the challenge form. +Now it's time to submit your work! + +Submit your `Production` URL from the previous step into the challenge form to pass the challenge! diff --git a/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx b/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx index 38d4de347..6ef2ea3de 100644 --- a/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx +++ b/dapps/dapp-challenges/challenge-2-liquidity-pool.mdx @@ -17,6 +17,26 @@ 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"; +import "./styles.css"; + + + Liquidity Pool Dapp Challenge. + + + + + @@ -26,11 +46,11 @@ This challenge will walk you through the step-by-step journey of creating and la ## Checkpoint 0: 📦 Install 📚 -Start by installing the required dependencies. +Start by installing the required dependencies. You'll also want to be sure you have the most updated version of Rust installed. Required: -- `soroban-cli`: [Download Soroban-CLI](https://soroban.stellar.org/docs/getting-started/setup#install-the-soroban-cli) +- `soroban-cli alias` (installed in the next step) - `Node` v18: [Download Node](https://nodejs.org/en/download/) - `Freighter Wallet`: [Freighter Wallet](https://freighter.app/) @@ -48,9 +68,12 @@ Then, install soroban-cli alias by running the following command: cargo install_soroban ``` +Soroban CLI is the command line interface to Soroban. It allows you to build, deploy, and interact with smart contracts, configure identities, generate key pairs, manage networks, and more. The soroban-cli (alias) that is used in this challenge is a pinned version of the soroban-cli that is used in the Soroban Dapps Challenge. This ensures that the challenge is reproducible and that all participants are using the same version of Soroban. + + ## Checkpoint 1: 🎬 Deploy Smart Contracts -Now that you have the Liquidity Pool branch checked out, it's time to deploy the smart contracts to a Sandbox environment. +Now that you have the Crowdfund branch checked out, it's time to deploy the smart contracts to a Sandbox environment. Deploying a smart contract in a production setting involves submitting the contract code to the blockchain's main network ( Mainnet ), where it becomes part of the chain's immutable ledger. Deploying smart contracts to a Sandbox environment simulates that process without actually affecting Mainnet. When you deploy the smart contracts, you'll instead deploy to Futurenet, a test network with more cutting-edge features that have not yet been implemented in the Mainnet. In your terminal, load the contracts and initialize them in the Sandbox environment by running the following commands: @@ -74,14 +97,23 @@ Done ... ``` +The contract ID is a unique identifier for a smart contract deployed on a blockchain. This contract ID is used to interact with and reference the smart contract, allowing users to invoke functions from the smart contract, send transactions, or otherwise interact with the smart contract's functionalities and data stored on the blockchain. + +:::tip + +Please, save your deployed contract ID. You will need it to complete the challenge. + +::: + ## Checkpoint 2: 🤝 Connect the Frontend to the Backend -Navigate to the frontend folder and run the development server: +Now that you have deployed the smart contract, it's time to check out the frontend of your dapp. The frontend is the browser interface where users will connect their digital wallets to make deposits, and withdrawals with the liquidity pool. The frontend is also where users will be able to see their balances and swap tokens. + +To set up the development server, navigate to the `frontend` folder and run the following command: ```bash -cd frontend make setup && make start_dev ``` @@ -91,18 +123,14 @@ Now open your browser and visit [http://localhost:5173](http://localhost:5173/). > Note: Follow the instructions below and ensure that you have funded your wallet address that you intend to use from browser. 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). -Now that you have the frontend running, it's time to connect it with your smart contracts. +Now that you have the frontend running, it's time to connect it with the backend, your smart contract, that defines the rules and logic of the liquidity pool, including the token swap and liquidity pool functions. -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. - -> Note: These are test lumens for use on Futurenet and cannot be used on Mainnet +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. Remember, these are test lumens for use on Futurenet and cannot be used on Mainnet. ## 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"; + @@ -134,7 +162,7 @@ Open the dapp frontend and click the "MINT" button for USDC and BTC. You should see a popup from Freighter asking you to sign the transactions. Click on "Approve" and wait for the transaction to be confirmed. - + @@ -143,7 +171,7 @@ You should see a popup from Freighter asking you to sign the transactions. Click You should see an updated balance in the account balance component. - + @@ -164,7 +192,7 @@ You should see an updated balance in the account balance component. 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. - + @@ -181,7 +209,7 @@ Click on "Approve" and wait for the transaction to be confirmed. Once the transa 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. - + @@ -205,7 +233,7 @@ 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. - + @@ -223,7 +251,7 @@ Click on "Approve" and wait for the transaction to be confirmed. Once the transaction is confirmed, you should see updated balances on the frontend. - + @@ -247,7 +275,7 @@ 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. - + @@ -265,7 +293,7 @@ Click on "Approve" and wait for the transaction to be confirmed. Once the transaction is confirmed, you should see updated balances on the frontend. - + @@ -280,7 +308,9 @@ Once the transaction is confirmed, you should see updated balances on the fronte ## Checkpoint 4: 🚢 Ship It! 🚁 -Now that your dapp is fully functional, its time to deploy it to a production environment. In this step, you will learn how to deploy your dapp to Vercel, a cloud platform for static sites that offers a quick and effective way to deploy the frontend of your dapp. +Now that your dapp is fully functional, its time to deploy it to a production environment. In this step, you will learn how to deploy your dapp to Vercel, a cloud platform for static sites that offers a quick and effective way to deploy the frontend of your dapp. This section requires that you have a [Vercel account] and the Vercel cli installed. + +[Vercel account]: https://vercel.com/login First, you will remove the target directory, as it is not used by Vercel to deploy your site. To do this, navigate to the `liquidity-pool` directory and run the following: @@ -298,7 +328,7 @@ From a terminal in the `liquidity-pool` directory, run the following command: mv .soroban frontend/.soroban ``` -Then, you need to update the `package.json` file in the frontend directory to point to the new contract binding locations. +Then, you need to update the `package.json` file in the `frontend` directory to point to the new contract binding locations. ```diff -"liquidity-pool-contract": "file:../.soroban/contracts/liquidity-pool", @@ -314,23 +344,35 @@ Then, you need to update the `package.json` file in the frontend directory to po Next, you will use the Vercel CLI to complete your 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: ```bash npm i --global vercel ``` -Then, open a terminal in the `liquidity-pool` directory and run the following command to deploy your example dapp: +Then, remove any existing `.vercel` directory in your project to ensure that you are starting with a clean slate: + +```bash +rm -rf .vercel +``` +Then, run the following command to deploy your example dapp: + +```bash +vercel --prod +``` + +Vercel will prompt you to link your local project to a new Vercel project. +Follow the answers to the prompts below to ensure that your local project is correctly linked to a new Vercel project: ```bash -npx vercel --prod +? Set up “~/Documents/GitHub/test/soroban-dapps-challenge”? [Y/n] y +? Which scope should contain your project? +? Link to existing project? [y/N] n +? What’s your project’s name? +? In which directory is your code located? ./ ``` -Then, continue through the prompts until you see the following message about setting overrides: +Then, continue through the prompts until you see the following message regarding setting overrides: ```bash ? Want to override the settings? [y/N] y @@ -360,7 +402,7 @@ cd frontend && make start_dev frontend/dist ``` -Once the deployment is complete, you should see a message similar to the following: +Once the deployment is complete, you should see a completion message similar to the following: ```bash 🔗 Linked to julian-dev28/liquidity-pool (created .vercel) @@ -368,15 +410,23 @@ Once the deployment is complete, you should see a message similar to the followi ✅ Production: https://liquidity-pool.vercel.app [54s] ``` +:::tip + +Please, save your production url, you will need it to complete the challenge. + +::: + 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. +Remember, 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 5: ✅ Complete the Challenge! -Submit your public URL to the challenge form. +Now it's time to submit your work! + +Submit your `Production` URL from the previous step into the challenge form to pass the challenge! diff --git a/dapps/dapp-challenges/styles.css b/dapps/dapp-challenges/styles.css new file mode 100644 index 000000000..23ecc7ab0 --- /dev/null +++ b/dapps/dapp-challenges/styles.css @@ -0,0 +1,31 @@ +.image-style { + border-radius: 10px; /* Rounded corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */ + transition: transform 0.3s; /* Smooth transition for hover effect */ + width: 40% + } + + .image-style_reg { + border-radius: 10px; /* Rounded corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */ + transition: transform 0.3s; /* Smooth transition for hover effect */ + } + + .image-style_lp { + border-radius: 10px; /* Rounded corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */ + transition: transform 0.3s; /* Smooth transition for hover effect */ + width: 85% + } + + .image-style:hover { + transform: translateY(-5px); /* Rise effect on hover */ + } + + .image-style_reg:hover { + transform: translateY(-5px); /* Rise effect on hover */ + } + + .image-style_lp:hover { + transform: translateY(-5px); /* Rise effect on hover */ + } \ No newline at end of file diff --git a/dapps/index.mdx b/dapps/index.mdx index 0339c6318..192ac74bd 100644 --- a/dapps/index.mdx +++ b/dapps/index.mdx @@ -3,13 +3,9 @@ sidebar_position: 1 title: Dapps on Soroban --- -The Soroban Dapps Challenge is a dynamic course designed for developers eager to explore the potential of building decentralized applications (Dapps) on the Soroban smart contracts platform. This course is part challenge, part educational journey that sets the stage for practical and creative blockchain development. - -:::caution +Decentralized applications, or "dapps," mark a significant shift in our digital interactions, running on a blockchain or peer-to-peer network instead of centralized servers. This shift enhances transparency, security, and user control, as data and smart contracts are stored on a public ledger, open for audit by anyone. Soroban facilitates building and deploying dapps on the Stellar blockchain, offering tools and frameworks that simplify the development process for even those with minimal coding experience. The Soroban Dapps Challenge highlights this, enabling you to create a variety of dapp use cases on a single page in just 20 minutes, with minimal coding, guiding you from smart contract deployment to user interaction through a web frontend. -This course operates within the pre-release version of Soroban. Expect breaking changes as we evolve. - -::: +The Soroban Dapps Challenge is a dynamic course designed for developers eager to explore the potential of building decentralized applications (Dapps) on the Soroban smart contracts platform. This course is part challenge, part educational journey that sets the stage for practical and creative blockchain development. While the course specifically focuses on the Soroban platform, the knowledge you gain can be applied to other transaction processors such as different blockchains, L2s, and permissioned ledgers. The skills you acquire here are meant to be transferable and versatile. diff --git a/docs/reference/sdks/data-providers.mdx b/docs/reference/sdks/data-providers.mdx new file mode 100644 index 000000000..33fb2a21d --- /dev/null +++ b/docs/reference/sdks/data-providers.mdx @@ -0,0 +1,27 @@ +--- +title: Data Providers +sidebar_position: 8 +--- + +In order for the Stellar network to remain as open and accessible as it has always been, Soroban-related data is available through a number of channels. + +## Data Indexers + +To power your applications, a range of data services will be available from data indexers with query interfaces. These indexers will allow you to easily store and retrieve decoded ledger data, contract event emissions, and more. You can focus more energy on making your project successful, and waste less time figuring out precisely _how_ to get the important data from the network. + +| Provider | Signup / Access | +| :----------------------------------- | ----------------------------------------------- | +| [Subquery](https://subquery.network) | [Access](https://subquery.network) | +| [Mercury](https://mercurydata.app/) | [Access](https://mercurydata.app/) | +| [BlockEden](https://blockeden.xyz) | [Access](https://blockeden.xyz/stellar-soroban) | +| [GoldSky](https://goldsky.com/) | Mirror and Indexer Coming soon | + +## Block Explorers + +Block explorers exist to publicly display blockchain data in an easily digestbible way. They can be browsed with an ordinary web browser, and do not require any special developer skills to use. The block explorers available for Soroban index data related to payments, accounts, deployed contracts, transaction history, and more. The following block explorers are available for the Testnet and Futurenet (Mainnet coming with launch). + +| Provider | Testnet | Futurenet | +| :--------------------------------------- | ----------------------------------------------------------- | -------------------------------------------------------- | +| [StellarExpert](https://stellar.expert) | [Testnet Explorer](https://stellar.expert/explorer/testnet) | n/a | +| [StellarChain](https://stellarchain.io/) | [Testnet Explorer](https://testnet.stellarchain.io/) | [Futurenet Explorer](https://futurenet.stellarchain.io/) | +| [StellarExplorer](https://steexp.com/) | [Testnet Explorer](https://testnet.steexp.com/) | [Futurenet Explorer](https://futurenet.steexp.com/) | diff --git a/src/components/molecules/leaderboard/index.tsx b/src/components/molecules/leaderboard/index.tsx index 9cb055f0f..3d5dd02e3 100644 --- a/src/components/molecules/leaderboard/index.tsx +++ b/src/components/molecules/leaderboard/index.tsx @@ -81,7 +81,7 @@ const Leaderboard: React.FC = ({ userId, list, isLoading, onLoad }) => { className={styles.leadTableHeadColumn} onClick={() => onSort(LeaderboardColumn.TotalValueLocked)} > - TVL, $ {col === LeaderboardColumn.TotalValueLocked ? arrow : null} + Total Value Locked {col === LeaderboardColumn.TotalValueLocked ? arrow : null} = ({ userId, list, isLoading, onLoad }) => { {`${item.userId}`} {item.totalValueLocked} - {item.challengesCompleted} - {item.minutesSpent} + + {item.challengesCompleted === 0 ? ( + "In Progress" + ) : ( + <>{item.challengesCompleted} + )} + + + {item.minutesSpent === 0 ? ( + "In Progress" + ) : ( + <>{item.minutesSpent} + )} + ); })} diff --git a/static/img/swapComplete.png b/static/img/swapComplete.png index fd51b6613..05f7a0559 100644 Binary files a/static/img/swapComplete.png and b/static/img/swapComplete.png differ