SDC UI upgrades

.eslintrc.js

@@ -2,5 +2,11 @@ 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,
+    "no-unused-expressions": 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 id={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,15 @@ Done
 ...
 ```
 
+:::caution
+
+Please, save your deployed contract ID, you will need it to complete the challenge.
+
+:::
+
+<CompleteStepButton id={0} progress={1}>
+  Mark smart contracts deployed
+</CompleteStepButton>
 
 ## Checkpoint 3: 🤝 Connect the Frontend to the Backend
 
@@ -154,6 +165,10 @@ You should see an updated balance in the amount you have pledged in the pledge c
 
 <img src={backedResult} width="40%" />
 
+<CompleteStepButton id={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.
@@ -210,19 +225,52 @@ Vercel CLI 30.1.1
 ✅  Production: https://soroban-example-dapp-rho.vercel.app [42s]
 ```
 
+:::caution
+
+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! 🎉
 
 <img src={deployedDApp} width="90%" />
 
 You will need to add some Futurenet network lumens to your Freighter wallet to interact with the deployed dapp. Visit [https://laboratory.stellar.org/#account-creator?network=futurenet](https://laboratory.stellar.org/#account-creator?network=futurenet), and follow the instructions to create your Freighter account on Futurenet.
 
-## Checkpoint 7: ✅ Complete the Challenge!
+## Checkpoint 7: 💪 Pass the Challenge!
+
+Submit your public url to the challenge form and proceed to the next step to check your work.
+
+<ParentChallengeForm id={0} />
+
+<br/>
 
-Submit your public URL to the challenge form.
+:::info
 
-<ParentChallengeForm courseId={0} />
+Join [our Community in Discord](https://discord.gg/stellardev) in case you have any issues or questions.
 
-## Checkpoint 8: 💪 Flex!
+:::
+
+## Checkpoint 8: ✅ Check your work!
+
+In order to successfully complete this challenge, your work needs to be checked.
+Please, follow this steps:
+
+1. Fork [the challenge repository](https://github.com/stellar/soroban-dapps-challenge).
+2. Fill `crowdfund/challenge/output.txt` file with your wallet address, contract ID and production url.
+Filled file should look like:
+```sh
+public key: GBSXUXZSA2VEXN5VGOWE5ODAJLC575JCMWRJ4FFRDWSTRCJ123456789
+contract Id: CBKY7UN5VGD4LIQFOBOTSUSQWK67BZZTA23NIEVWSWRR5SAT26JQN2BN
+production: https://soroban-example-dapp-rho.vercel.app
+```
+3. Create a Pull Request to the `stellar/soroban-dapps-challenge/main` branch. When the PR will be created, CI actions will check the `crowdfund/challenge/output.txt` file data and update your progress.
+4. Wait for the CI/CD pipeline results.
+5. Fix errors if present:
+- find the error reason in the Crowdfund challenge CI results (you can find a link right in the pull request);
+- return to your forked repository;
+- fix errors and commit changes. The existing PR will be checked again.
+6. If the pipeline was successful, then congratulations! You completed the challenge!👏
 
 Invite a friend to try out your dapp and ask them to provide feedback!
 
@@ -249,16 +297,7 @@ You should see something like this:
   ]
 ```
 
-<br />
-
-🍴 [Fork the Crowdfund repo] and make your own changes to the dapp.
-
-Customize the code and submit a pull request for the Crowdfund Dapp challenge. You can experiment with new fundraising strategies, improve the user interface, or integrate additional payment options.
-
-Take this opportunity to showcase your skills and make your mark on the Crowdfund Dapp. Good luck!
-
 [Stellar Laboratory]: https://laboratory.stellar.org/#explorer?network=futurenet
-[Fork the Crowdfund repo]: https://github.com/stellar/soroban-example-dapp/fork
 
 ## 📚 User Workflows Checklist
 

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 id={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 id={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 id={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 id={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,14 +104,8 @@ const config = {
           {
             to: '/dapps',
             label: 'Dapps',
-            position: 'left',
-            docsPluginId: 'dapps'
+            position: 'left'
           },
-          // {
-          //   to: '/user-dashboard',
-          //   label: 'User Dashboard',
-          //   position: 'right',
-          // },
           {
             href: 'https://github.com/stellar/rs-soroban-sdk',
             label: 'GitHub',

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": {

sidebarsDapps.js

@@ -1,5 +1,10 @@
 module.exports = {
   mySidebar: [
+    {
+      type: 'link',
+      label: 'Dashboard',
+      href: '/dashboard',
+    },
     {
       type: "autogenerated",
       dirName: ".", // generate sidebar from the docs folder (or versioned_docs/<version>)

src/components/atoms/carousel/index.tsx → src/components/atoms/UI/carousel/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import styles from "./style.module.css";
-import { ImageHolder } from "../course-images";
+import { ImageHolder } from "../../course-images";
 
 interface CarouselProps {
   images: ReactNode[];

src/components/atoms/UI/switcher/index.tsx

@@ -0,0 +1,34 @@
+import React, { ChangeEvent, useState } from "react";
+import styles from "./style.module.css";
+
+interface SwitcherProps {
+  id: string;
+  labelText?: string;
+  onChange?: (value: boolean) => void;
+}
+
+export default function Switcher({ id, labelText, onChange }: SwitcherProps) {
+  const [isSwitched, setIsSwitched] = useState<boolean>(false);
+  const switcherClasses = isSwitched
+    ? `${styles.switcher} ${styles.switcherOn}`
+    : styles.switcher;
+
+  const changeHandler = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    setIsSwitched(target.checked);
+    onChange && onChange(target.checked);
+  };
+
+  return (
+    <div className={styles.switcherWrapper}>
+      <span className={styles.switcherLabel}>{labelText}</span>
+
+      <label htmlFor={id} className={switcherClasses} />
+      <input
+        type="checkbox"
+        id={id}
+        className={styles.switcherInput}
+        onChange={changeHandler}
+      />
+    </div>
+  );
+}

src/components/atoms/UI/switcher/style.module.css

@@ -0,0 +1,51 @@
+.switcherWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.switcher {
+  display: block;
+  width: 24px;
+  height: 16px;
+  border: 2px solid #369EA7;
+  border-radius: 16px;
+  background-color: transparent;
+  position: relative;
+  transition: all .2s ease-in-out;
+  cursor: pointer;
+}
+
+.switcher::before {
+  content: '';
+  display: block;
+  width: 4px;
+  height: 4px;
+  border: 2px solid #369EA7;
+  background-color: transparent;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+
+.switcherOn {
+  background-color: #369EA7;
+}
+
+.switcher.switcherOn::before {
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+  left: unset;
+  right: 2px;
+}
+
+.switcherLabel {
+  color: #585858;
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.switcherInput {
+  width: 0;
+  height: 0;
+}

src/components/atoms/challenge-card/challenge-icons.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+/* Constants with icons markup to render inside challenge cards
+In such way we can change styles of the icon on card hover */
+export const iconBulb = (
+  <svg
+    width="33"
+    height="32"
+    viewBox="0 0 33 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="16.5" cy="16" r="16" fill="#34CEFF" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.5 6C12.082 6 8.5 9.58197 8.5 14C8.5 17.1428 10.3128 19.8555 12.9444 21.1633V22V23.7778C12.9444 25.2505 14.1384 26.4445 15.6111 26.4445H17.3889C18.8616 26.4445 20.0556 25.2505 20.0556 23.7778V22V21.1633C22.6872 19.8555 24.5 17.1428 24.5 14C24.5 9.58197 20.918 6 16.5 6ZM18.2778 21.1111V20.5893C18.2778 20.2273 18.4974 19.9014 18.833 19.7654C21.1151 18.8412 22.7222 16.6087 22.7222 14C22.7222 10.5638 19.9362 7.77778 16.5 7.77778C13.0638 7.77778 10.2778 10.5638 10.2778 14C10.2778 16.6087 11.8849 18.8412 14.167 19.7654C14.5026 19.9014 14.7222 20.2273 14.7222 20.5893V21.1111H18.2778ZM14.7222 22.8889V23.7778C14.7222 24.2687 15.1202 24.6667 15.6111 24.6667H17.3889C17.8798 24.6667 18.2778 24.2687 18.2778 23.7778V22.8889H14.7222Z"
+      fill="white"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.5 11.3333C15.0274 11.3333 13.8333 12.5274 13.8333 14C13.8333 14.4909 13.4354 14.8889 12.9444 14.8889C12.4535 14.8889 12.0555 14.4909 12.0555 14C12.0555 11.5455 14.0455 9.55554 16.5 9.55554C16.9909 9.55554 17.3889 9.95351 17.3889 10.4444C17.3889 10.9354 16.9909 11.3333 16.5 11.3333Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const iconWallet = (
+  <svg
+    width="33"
+    height="32"
+    viewBox="0 0 33 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Challenge-icons">
+      <circle id="Challenge icon" cx="16.5" cy="16" r="16" fill="#FF6534" />
+      <g id="Vector">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.75 10.5556C9.33579 10.5556 9 10.9038 9 11.3333V20.6667C9 21.0962 9.33579 21.4444 9.75 21.4444H23.25C23.6642 21.4444 24 21.0962 24 20.6667V11.3333C24 10.9038 23.6642 10.5556 23.25 10.5556H9.75ZM7.5 11.3333C7.5 10.0447 8.50736 9 9.75 9H23.25C24.4926 9 25.5 10.0447 25.5 11.3333V20.6667C25.5 21.9553 24.4926 23 23.25 23H9.75C8.50736 23 7.5 21.9553 7.5 20.6667V11.3333Z"
+          fill="white"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.5 14.4444C7.5 14.0149 7.83579 13.6667 8.25 13.6667H24.75C25.1642 13.6667 25.5 14.0149 25.5 14.4444C25.5 14.874 25.1642 15.2222 24.75 15.2222H8.25C7.83579 15.2222 7.5 14.874 7.5 14.4444Z"
+          fill="white"
+        />
+      </g>
+    </g>
+  </svg>
+);