From b3e642fc9761a4652896c10093087506346463a9 Mon Sep 17 00:00:00 2001 From: nmadadair <109177652+nmadadair@users.noreply.github.com> Date: Tue, 14 Nov 2023 15:12:45 -0500 Subject: [PATCH] Sdc mental models: payment dapp upgrades (#641) * bringing sdc-mental-models branch up to date (#632) * feat: provide a means of receiving simple feedback from users (#587) * feat: provide a means of receiving simple feedback from users Here, we have swizzled (ejected) the `DocItem/Footer` component from docusaurus, and are inserting our own `ReaderFeedback` component into it before the rest of the doc footer content. Also, the `custom.scss` file has been used to style this element in a consistent manner with the rest of the site. This is the first step to resolve #586: The user interaction can now take place. From here, we will work on integrating the custom events into Google analytics. Ultimately, we will like to implment this feature into the `stellar-docs` repository, as well. Refs: #586 * Moving some React state things around * Including an `alt` tag for the like/dislike buttons * use the `pageId` for `eventLabel` in the send event * style: Linting the code * style: changing inline svg tag to be on newlines, changine filename to `jsx` * feat: Inserting the `DocItem/Footer` components on `dapps` and `api` pages * feat: migrating to the GA4 plugin in docusaurus * Testing with a new ga4 tracking id for preview domain * add some console statements to test what's happening * add configuration for test gtag container for this pr preview * feat: use `gtag` over the deprecated `ga` function * adding my own test gtag? * Remove the `gtag` function call, and just register state * removing the old-style google analytics tag for good * remove staging tag manager containers in preparation for production * replace staging ga4 tracking id with production tracking id * use `@site/static` for feedback button imports, rename file extension * rpc: rename expirationLedgerSeq to liveUntilLedgerSeq (#625) * rpc: rename expirationLedgerSeq to liveUntilLedgerSeq * rpc: rename expiration ledger in openrpc file --------- Co-authored-by: Elliot Voris * Remove docker image hashes (#628) * remove mentions of specific image hashes in docker commands * update docker image hash to most recent version on releases page * Update WASM retrieval tutorial (#627) * docs: explain the diagnostic events that are emitted in sandbox (#593) * docs: explain the diagnostic events that are emitted in sandbox Perhaps this approach is too verbose? I think having the explanation of what is being seen right there in the tutorial is useful at this early step in the "getting started" section. A new developer is more likely to understand what they see, and remember what it is in the future if we don't try to interrupt their flow at this point by sending them to another page for some (possibly irrelevant) info. I may be incorrect there, and I'm happy to hear opinions from others. Refs: #521 * docs: add a space between two words * editorial in Update hello-world.mdx --------- Co-authored-by: Bri Wylde <92327786+briwylde08@users.noreply.github.com> * Fix a couple typos in rust-dialect.mdx (#630) --------- Co-authored-by: Elliot Voris Co-authored-by: Alfonso Acosta Co-authored-by: George Co-authored-by: Bri Wylde <92327786+briwylde08@users.noreply.github.com> Co-authored-by: Sapo-Dorado * Crowdfund dapp copy updates v1 Added in some (minimal) context throughout. Tidied up a few grammatical/spelling inconsistencies. * add description and update "ship it" workflow * update soroban-cli install * Update challenge-0-crowdfund.mdx * remove extra vercel link * Merge branch 'main' into sdc-mental-models * Add intro to dapps * nit formatting * Payment dapp copy updates Updates to Checkpoints 0-4 of the Payment dapp challenge, including added copy and a few very minor grammatical upgrades. * add more context * Merge Payment dapp fix (#643) * Update latest testnet-compatible JavaScript release versions (#634) * Update latest testnet-compatible JavaScript release versions * Add links to release notes for each version * Upgrade `getLedgerEntries` examples to latest pre-stable releases of the SDKs (#635) Co-authored-by: Elliot Voris * Switch Ubuntu base image to 22.04 from 20.04 (#638) Signed-off-by: Satyam Zode Co-authored-by: Satyam Zode * Update getting-started for 20.0.0-rc.4.1 cli (#636) * Updates to setup.mdx * Add CLI for testnet configuration to Setup * Updates to hello-world.mdx Reorder some code snippets to be after the description * Small edits in storing-data.mdx * Add high_expiration_watermark argument to bump in incrementor * Move deploy-to-testnet after hello-world to allow the user to interact with their contract on testnet * Add Optimizing Builds to hello-world * Update storing-data to remove sandbox interation * Add a deploy-incrementor-to-testnet step * Update position of Create an App * Apply suggestions from code review Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> * Update create-an-app.mdx * Fix typo * Add a mv command for .soroban dir when reorganizing to a multi-contract project * Apply mdx prettier updates * Update astro port in create-an-app.mdx * Apply suggestions from code review Co-authored-by: Elliot Voris * Add .mdx to end of internal markdown links for docusaurus magic * Make sure there are new lines before and after ::: tags * Some additional edits/improvements * Mention that Freighter is available as a firefox add-on * Update the deploy-incrementor url * Apply prettier updates --------- Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> Co-authored-by: Elliot Voris * docs: change preflight wording to simulate transaction (#585) * docs: change preflight wording to simulate transaction A first attempt to resolve #478, there may be more work to be done. I've used a few different phrases, depending on how the sentence structure works, perhaps taking some liberties in the process. I've also left alone the `releases` page for preview releases older than 11. It seems unnecessary to rewrite the development history too far into the past. Refs: #478 * editorial on Update interacting-with-contracts.mdx * added a couple "the"s Update state-expiration.mdx * fix wording about ledger entries to be less confusing * clearing up some other language surrounding footprints --------- Co-authored-by: Bri Wylde <92327786+briwylde08@users.noreply.github.com> * Create data-providers.mdx (#629) * Create data-providers.mdx Adding new page for data providers to cover indexers and block explorers * Update data-providers.mdx updated explanation text * style: fixing some markdown styles and formatting * Adding some more verbose descriptions and links --------- Co-authored-by: Elliot Voris * docs: change sitewide wording from "preview release" to "release candidate" (#639) * docs: update welcome page "preview release" > "release candidate" * docs: change "preview release" > "release candidate" on releases page * update payment challenge; add styles * add clickable object to localhost:9000 example * Update challenge-1-payment.mdx * Squashed commit of the following: commit 76c48ccd8049bca6bb11f131cefb35253dad86b2 Author: Julian Martinez Date: Wed Nov 8 10:10:12 2023 -0800 add more context --------- Signed-off-by: Satyam Zode Co-authored-by: George Co-authored-by: Elliot Voris Co-authored-by: Satyam Zode <5508956+satyamz@users.noreply.github.com> Co-authored-by: Satyam Zode Co-authored-by: Elizabeth Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> Co-authored-by: Elliot Voris Co-authored-by: Bri Wylde <92327786+briwylde08@users.noreply.github.com> Co-authored-by: jcx120 <91218921+jcx120@users.noreply.github.com> * format image * Squashed commit of the following: commit 308444d93d4f7133107ca499a6d255fe5ae302d4 Author: Julian Martinez Date: Wed Nov 8 14:55:06 2023 -0800 update copy commit ec062702a5a900ff890bf5cc99dfd9b6dbe1915a Author: Julian Martinez Date: Wed Nov 8 12:34:07 2023 -0800 add styles for lp commit f7bbf2e61a262aa6dd76bed2f43cd26aafce075b Author: Julian Martinez Date: Wed Nov 8 12:13:49 2023 -0800 add image styles * update copy for production deployment * caution -> tip * add commas, add soroban-cli install to payment dapp * fix broken link * Squashed commit of the following: commit 7de8a99ec32065376ea4fd2f42a14194cdda6e49 Author: Elliot Voris Date: Thu Nov 9 15:47:49 2023 -0600 docs: move data providers page out of sdks directory (#645) commit 55e0a866c6dbbe2b4dd38f38816915d59c962584 Author: Elliot Voris Date: Tue Nov 7 11:40:20 2023 -0600 docs: change sitewide wording from "preview release" to "release candidate" (#639) * docs: update welcome page "preview release" > "release candidate" * docs: change "preview release" > "release candidate" on releases page commit 2ae107280eb4bfee7192e7bdabf704c80ffab43c Author: jcx120 <91218921+jcx120@users.noreply.github.com> Date: Tue Nov 7 08:48:50 2023 -0800 Create data-providers.mdx (#629) * Create data-providers.mdx Adding new page for data providers to cover indexers and block explorers * Update data-providers.mdx updated explanation text * style: fixing some markdown styles and formatting * Adding some more verbose descriptions and links --------- Co-authored-by: Elliot Voris commit 0054011876a8273788a5bf6de16623683c9159d2 Author: Elliot Voris Date: Mon Nov 6 11:00:02 2023 -0600 docs: change preflight wording to simulate transaction (#585) * docs: change preflight wording to simulate transaction A first attempt to resolve #478, there may be more work to be done. I've used a few different phrases, depending on how the sentence structure works, perhaps taking some liberties in the process. I've also left alone the `releases` page for preview releases older than 11. It seems unnecessary to rewrite the development history too far into the past. Refs: #478 * editorial on Update interacting-with-contracts.mdx * added a couple "the"s Update state-expiration.mdx * fix wording about ledger entries to be less confusing * clearing up some other language surrounding footprints --------- Co-authored-by: Bri Wylde <92327786+briwylde08@users.noreply.github.com> commit b9710ea0ea6c4652aea2019504534197195a2b3a Author: Elizabeth Date: Mon Nov 6 11:59:21 2023 -0500 Update getting-started for 20.0.0-rc.4.1 cli (#636) * Updates to setup.mdx * Add CLI for testnet configuration to Setup * Updates to hello-world.mdx Reorder some code snippets to be after the description * Small edits in storing-data.mdx * Add high_expiration_watermark argument to bump in incrementor * Move deploy-to-testnet after hello-world to allow the user to interact with their contract on testnet * Add Optimizing Builds to hello-world * Update storing-data to remove sandbox interation * Add a deploy-incrementor-to-testnet step * Update position of Create an App * Apply suggestions from code review Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> * Update create-an-app.mdx * Fix typo * Add a mv command for .soroban dir when reorganizing to a multi-contract project * Apply mdx prettier updates * Update astro port in create-an-app.mdx * Apply suggestions from code review Co-authored-by: Elliot Voris * Add .mdx to end of internal markdown links for docusaurus magic * Make sure there are new lines before and after ::: tags * Some additional edits/improvements * Mention that Freighter is available as a firefox add-on * Update the deploy-incrementor url * Apply prettier updates --------- Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> Co-authored-by: Elliot Voris commit 61054dcad82dbf77c28aa1819ad08b6fa132ad70 Author: Satyam Zode <5508956+satyamz@users.noreply.github.com> Date: Fri Nov 3 20:26:27 2023 +0530 Switch Ubuntu base image to 22.04 from 20.04 (#638) Signed-off-by: Satyam Zode Co-authored-by: Satyam Zode commit d6091131996ab81e42dff57f4bccaad3f5d56b3e Author: George Date: Thu Nov 2 12:53:52 2023 -0700 Upgrade `getLedgerEntries` examples to latest pre-stable releases of the SDKs (#635) Co-authored-by: Elliot Voris commit 228e4bfed691effa58a07b664abfd78b04e6dcd4 Author: George Date: Thu Nov 2 09:18:50 2023 -0700 Update latest testnet-compatible JavaScript release versions (#634) * Update latest testnet-compatible JavaScript release versions * Add links to release notes for each version * add SEO logic --------- Signed-off-by: Satyam Zode Co-authored-by: Elliot Voris Co-authored-by: Alfonso Acosta Co-authored-by: George Co-authored-by: Bri Wylde <92327786+briwylde08@users.noreply.github.com> Co-authored-by: Sapo-Dorado Co-authored-by: Julian Martinez Co-authored-by: Julian Martinez <73849597+Julian-dev28@users.noreply.github.com> Co-authored-by: Satyam Zode <5508956+satyamz@users.noreply.github.com> Co-authored-by: Satyam Zode Co-authored-by: Elizabeth Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com> Co-authored-by: Elliot Voris Co-authored-by: jcx120 <91218921+jcx120@users.noreply.github.com> --- .../dapp-challenges/challenge-0-crowdfund.mdx | 98 +++++--- dapps/dapp-challenges/challenge-1-payment.mdx | 237 +++++++++++++----- .../challenge-2-liquidity-pool.mdx | 114 ++++++--- dapps/dapp-challenges/styles.css | 31 +++ dapps/index.mdx | 8 +- .../molecules/leaderboard/index.tsx | 18 +- 6 files changed, 374 insertions(+), 132 deletions(-) create mode 100644 dapps/dapp-challenges/styles.css 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/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} + )} + ); })}