Merge pull request #1 from Julian-dev28/frontend/progress-tracking

Add user progress tracking

.eslintrc.js

@@ -2,5 +2,10 @@ module.exports = {
   extends: ["@stellar/eslint-config"],
   rules: {
     "import/no-unresolved": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
+    "jsdoc/newline-after-description": 0,
+    "arrow-body-style": 0,
+    "no-return-await": 0,
+    "@typescript-eslint/naming-convention": 0,
   },
 };

dapps/dapp-challenges/challenge-0-crowdfund.mdx

@@ -12,8 +12,10 @@ import success from "../../static/img/success.png";
 import backedResult from "../../static/img/backedResult.png";
 import deployedDApp from "../../static/img/deployedDApp.png";
 import { ParentChallengeForm } from "../../src/components/atoms/challenge-form";
+import CompleteStepButton from "../../src/components/atoms/complete-step-button";
+import StartChallengeButton from "../../src/components/atoms/start-challenge-button";
 
-# Crowdfund Dapp Challenge
+<StartChallengeButton courseId="0" />
 
 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.
 
@@ -88,6 +90,9 @@ Done
 ...
 ```
 
+<CompleteStepButton courseId="0" progress={1}>
+  Mark smart contracts deployed
+</CompleteStepButton>
 
 ## Checkpoint 3: 🤝 Connect the Frontend to the Backend
 
@@ -154,6 +159,10 @@ You should see an updated balance in the amount you have pledged in the pledge c
 
 <img src={backedResult} width="40%" />
 
+<CompleteStepButton courseId="0" progress={2}>
+  Funding completed
+</CompleteStepButton>
+
 ## Checkpoint 6: 🚢 Ship it! 🚁
 
 Now that your dapp is fully functional locally, next prepare it for deployment on Futurenet.
@@ -220,7 +229,15 @@ You will need to add some Futurenet network lumens to your Freighter wallet to i
 
 Submit your public url to the challenge form.
 
-<ParentChallengeForm courseId={0} />
+<ParentChallengeForm courseId="0" />
+
+<br/>
+
+:::info
+
+Join [our Community in Discord](https://discord.gg/stellardev) in case you have any issues or questions.
+
+:::
 
 ## Checkpoint 8: 💪 Flex!
 

dapps/dapp-challenges/challenge-1-payment.mdx

@@ -21,6 +21,10 @@ import submit_pmt from "../../static/img/submit_pmt.png";
 import end from "../../static/img/end.png";
 import balance_rcvr from "../../static/img/balance_rcvr.png";
 import { ParentChallengeForm } from "../../src/components/atoms/challenge-form";
+import CompleteStepButton from "../../src/components/atoms/complete-step-button";
+import StartChallengeButton from "../../src/components/atoms/start-challenge-button";
+
+<StartChallengeButton courseId="1" />
 
 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.
 
@@ -104,6 +108,10 @@ soroban contract invoke \
     --amount 1000000000
 ```
 
+<CompleteStepButton courseId="1" progress={1}>
+  Mark smart contracts deployed
+</CompleteStepButton>
+
 ## 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.
@@ -205,6 +213,10 @@ Output:
 "1000000000"
 ```
 
+<CompleteStepButton courseId="1" progress={2}>
+  Tokens added
+</CompleteStepButton>
+
 ## Checkpoint 6: 🚢 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.
@@ -261,7 +273,15 @@ You will need to add some Futurenet network lumens to your Freighter wallet to i
 
 Submit your public url to the challenge form.
 
-<ParentChallengeForm courseId={1} />
+<ParentChallengeForm courseId="1" />
+
+<br/>
+
+:::info
+
+Join [our Community in Discord](https://discord.gg/stellardev) in case you have any issues or questions.
+
+:::
 
 ## Checkpoint 8: 💪 Share Your Accomplishment with the Community
 

docusaurus.config.js

@@ -93,8 +93,7 @@ const config = {
           {
             to: '/api',
             label: 'API',
-            position: 'left',
-            docsPluginId: 'api'
+            position: 'left'
           },
           // {
           //   href: 'https://fastcheapandoutofcontrol.com/',
@@ -105,8 +104,7 @@ const config = {
           {
             to: '/dapps',
             label: 'Dapps',
-            position: 'left',
-            docsPluginId: 'dapps'
+            position: 'left'
           },
           // {
           //   to: '/user-dashboard',

package.json

@@ -24,13 +24,16 @@
     "@soroban-react/events": "^5.3.12",
     "@soroban-react/freighter": "^5.3.12",
     "@soroban-react/types": "^5.3.12",
+    "axios": "^1.4.0",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.2",
     "mdx-mermaid": "^1.3.2",
     "mermaid": "^9.3.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-rewards": "^2.0.4",
+    "react-toastify": "^9.1.3",
     "sass": "^1.57.1"
   },
   "browserslist": {
@@ -66,4 +69,4 @@
     "typescript": "^4.9.4",
     "unist-util-visit": "^2.0.3"
   }
-}
+}