Merge SDC from julian-dev28:main to Stellar:SSDC23 (#541)

* Update index.tsx * update kv:worker endpoint * Update index.tsx * Add Root component, finish-step-button, update styles * Add library for toast notifications, show milestone notification * Add class for HttpClient, functions for requests * Changed backend model, finalize user progress on course * Add confetti effect on complete button click, refactor * Remove mocks, use endpoint, fix issues * Merge Development into main (#2) * update kv:worker endpoint * Update index.tsx * Add Root component, finish-step-button, update styles * Add library for toast notifications, show milestone notification * Add class for HttpClient, functions for requests * Changed backend model, finalize user progress on course * Add confetti effect on complete button click, refactor * Remove mocks, use endpoint, fix issues --------- Co-authored-by: Iryna Telesheva <[email protected]> Co-authored-by: Iryna Telesheva <[email protected]> * Add Dashboard for Dapps challenges (#3) (#4) * Added dashboard component, styled cards * Added DashboardHeader, Leaderboard component, tabs, styles * Added ChallengesList component, updated login logic, tabs * Refactor existing approach, update models, add filtering * Add UI folder, add id for switcher and random avatar generating * Remove old dashboard components, rename util file * Add dashboard link to dapps sidebar instead of navbar * Add TODOs, rename component * Fix issues Co-authored-by: Iryna Telesheva <[email protected]> --------- Co-authored-by: Iryna Telesheva <[email protected]> Co-authored-by: Iryna Telesheva <[email protected]>
stellar-deprecated · Aug 14, 2023 · 5acab78 · 5acab78
1 parent 45c41e3
commit 5acab78
Show file tree

Hide file tree

Showing 74 changed files with 1,847 additions and 1,097 deletions.
diff --git a/.eslintrc.js b/.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,
   },
 };
diff --git a/dapps/dapp-challenges/challenge-0-crowdfund.mdx b/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,9 @@ Done
 ...
 ```
 
+<CompleteStepButton id={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 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.
@@ -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 id={0} />
+
+<br/>
+
+:::info
+
+Join [our Community in Discord](https://discord.gg/stellardev) in case you have any issues or questions.
+
+:::
 
 ## Checkpoint 8: 💪 Flex!
 

diff --git a/dapps/dapp-challenges/challenge-1-payment.mdx b/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
 

diff --git a/dapps/user-dashboard.mdx b/dapps/user-dashboard.mdx
diff --git a/docusaurus.config.js b/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',

diff --git a/package.json b/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"
   }
-}
+}
diff --git a/sidebarsDapps.js b/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>)

diff --git a/src/components/atoms/carousel/index.tsx → src/components/atoms/UI/carousel/index.tsx b/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[];

diff --git a/...omponents/atoms/carousel/style.module.css → ...onents/atoms/UI/carousel/style.module.css b/...omponents/atoms/carousel/style.module.css → ...onents/atoms/UI/carousel/style.module.css
diff --git a/src/components/atoms/loading/index.tsx → src/components/atoms/UI/loading/index.tsx b/src/components/atoms/loading/index.tsx → src/components/atoms/UI/loading/index.tsx
diff --git a/src/components/atoms/UI/switcher/index.tsx b/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>
+  );
+}
diff --git a/src/components/atoms/UI/switcher/style.module.css b/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;
+}
diff --git a/src/components/atoms/challenge-card/challenge-icons.tsx b/src/components/atoms/challenge-card/challenge-icons.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+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>
+);