+
+ ) : (
+ {account.displayName}
+
+
+
+ );
+}
diff --git a/src/components/atoms/UI/carousel/style.module.css b/src/components/atoms/UI/carousel/style.module.css
new file mode 100644
index 000000000..58d6e904b
--- /dev/null
+++ b/src/components/atoms/UI/carousel/style.module.css
@@ -0,0 +1,12 @@
+.image_holder {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 16px 12px;
+ gap: 8px;
+ border-radius: 8px;
+ border: 0;
+ height: auto;
+ color: #ffffff;
+}
diff --git a/src/components/atoms/UI/loading/index.tsx b/src/components/atoms/UI/loading/index.tsx
new file mode 100644
index 000000000..7dfd772fc
--- /dev/null
+++ b/src/components/atoms/UI/loading/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import Image from "next/image";
+import { LoadingSvg } from "../../../assets/icons";
+
+export interface SpacerProps {
+ size: number;
+}
+
+export function Loading({ size }: SpacerProps) {
+ return
+
+
+
+ {images.map((image, index) => (
+
+
+
+ ))}
+
+ {labelText}
+
+
+
+
+ );
+}
diff --git a/src/components/atoms/UI/switcher/style.module.css b/src/components/atoms/UI/switcher/style.module.css
new file mode 100644
index 000000000..8cbc0a1c8
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/src/components/atoms/challenge-card/challenge-icons.tsx b/src/components/atoms/challenge-card/challenge-icons.tsx
new file mode 100644
index 000000000..3cc5833c1
--- /dev/null
+++ b/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 = (
+
+);
+
+export const iconWallet = (
+
+);
diff --git a/src/components/atoms/challenge-card/index.tsx b/src/components/atoms/challenge-card/index.tsx
new file mode 100644
index 000000000..3cf306397
--- /dev/null
+++ b/src/components/atoms/challenge-card/index.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+import styles from "./style.module.css";
+import { iconBulb, iconWallet } from "./challenge-icons";
+import { ChallengeInfo } from "../../../interfaces/challenge";
+
+interface ChallengeCardProps {
+ challenge: ChallengeInfo;
+}
+
+interface ChallengeConfig {
+ icon: JSX.Element;
+ route: string;
+ lastCheckpointRoute?: string;
+}
+
+enum ActionBtnTitle {
+ SEE_DETAILS = "See details",
+ CONTINUE = "Continue",
+ PENDING = "Pending",
+ COMPLETED = "Completed",
+}
+
+/* Config with challenge icon, page route and last checkpoint route in
+case the challenge might have Pending status and require PR submission */
+const challengeConfig: { [key: string]: ChallengeConfig } = {
+ 0: {
+ icon: iconBulb,
+ route: "/docs/learn/interactive/dapps/challenges/challenge-0-crowdfund",
+ lastCheckpointRoute:
+ "/docs/learn/interactive/dapps/challenges/challenge-0-crowdfund#checkpoint-7--check-your-work",
+ },
+ 1: {
+ icon: iconWallet,
+ route: "/docs/learn/interactive/dapps/challenges/challenge-1-payment",
+ },
+ 2: {
+ icon: iconBulb,
+ route: "/docs/learn/interactive/dapps/challenges/challenge-2-liquidity-pool",
+ },
+ 3: {
+ icon: iconBulb,
+ route: "/docs/learn/interactive/dapps/challenges/challenge-3-oracle",
+ lastCheckpointRoute:
+ "/docs/learn/interactive/dapps/challenges/challenge-3-oracle#checkpoint-8--check-your-work",
+ },
+};
+const months = [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+];
+
+export function ChallengeCard({ challenge }: ChallengeCardProps) {
+ const { id, name, milestonesAmount: totalSteps } = challenge;
+ let actionBtnTitle: ActionBtnTitle = ActionBtnTitle.SEE_DETAILS;
+ let displayDate: string;
+ const progressValue = (Number(challenge.progress) * 100) / totalSteps || 0;
+
+ const setDisplayDate = (date: number) => {
+ const resultDate = new Date(date);
+ const month = months[resultDate.getUTCMonth()];
+ const day = resultDate.getUTCDate();
+ const year = resultDate.getUTCFullYear();
+
+ return {
+ month,
+ day,
+ year,
+ };
+ };
+
+ if (challenge.startDate) {
+ const { month, day, year } = setDisplayDate(challenge.startDate);
+ actionBtnTitle = ActionBtnTitle.CONTINUE;
+ displayDate = `Started on ${month}, ${day}, ${year}`;
+ }
+
+ if (challenge.completedAt) {
+ const { month, day, year } = setDisplayDate(challenge.completedAt);
+ actionBtnTitle = ActionBtnTitle.PENDING;
+ displayDate = `Passed on ${month}, ${day}, ${year}`;
+ }
+
+ if (challenge.isCompleted) {
+ const { month, day, year } = setDisplayDate(challenge.completedAt);
+ actionBtnTitle = ActionBtnTitle.COMPLETED;
+ displayDate = `Completed on ${month}, ${day}, ${year}`;
+ }
+
+ const showCompleteNote =
+ actionBtnTitle === ActionBtnTitle.PENDING &&
+ challengeConfig[id].lastCheckpointRoute;
+
+ const shouldDisableAction =
+ actionBtnTitle === ActionBtnTitle.COMPLETED ||
+ actionBtnTitle === ActionBtnTitle.PENDING;
+
+ return (
+
+ {challengeConfig[id].icon}
+
+
+ {progressValue.toFixed()}/100%
+
+
+
+ + {name} +
+ +
+
+
+
+
+ {showCompleteNote && (
+ + In order to complete this challenge, check your CI/CD results on a + pull request created on{" "} + + this checkpoint + +
+ )} +
+ {displayDate}
+
+
+ {actionBtnTitle}
+
+
+ + + ); + } + + return ( +
+ {savedContractId ? (
+
+ );
+}
+
+function InnerComponent({ id }: { id: number }) {
+ const { loading, address } = useAuth();
+
+ // if user is not logged in (address is undefined), render the Login button
+ if (loading) {
+ return (
+ ContractId submitted!
+ ) : null} + + + {formError} +
+ Please connect to Testnet network.
+
+
+ );
+ }
+ // if user is logged in and connected to the right network,
+ // render the ChallengeForm
+ return +
+ + ); + } + + return ( +
+ {savedUrl ? (
+
+ );
+}
+
+function InnerComponent({ id }: { id: number }) {
+ const { loading, address } = useAuth();
+
+ // if user is not logged in (address is undefined), render the Login button
+ if (loading) {
+ return (
+ + Public url submitted! Your DApp is deployed to: + {savedUrl} +
+ ) : null} + + + {formError} +
+ Please connect to Testnet or Futurenet network.
+
+
+ );
+ }
+ // if user is logged in and connected to the right network,
+ // render the ChallengeForm
+ return +
You haven't completed any challenges yet.
+ )} + + ); + + const allChallenges = useMemo( + () => + availableChallenges?.map((aChall: Challenge) => { + const inProgressChallenge = userChallenges.find( + (uChall: ChallengeInfo) => uChall.id === aChall.id, + ); + + if (inProgressChallenge) { + return ( +
+
+
+
+ {userChallenges?.length > 0 ? (
+ setOnlyMine(value)}
+ />
+ ) : null}
+
+
+ {onReset && (
+
+ )}
+ -
+ {onlyMine ? myChallanges : allChallenges}
+
+ 
+
+ Congratulations on your milestone!
+
+
+);
+
+const completedToast = (
+
+
+ Congratulations on your milestone!
+
+
+ 
+
+ Congratulations! Your challenge is completed successfully.
+
+
+);
+
+const passedToast = (
+
+
+ Congratulations! Your challenge is completed successfully.
+
+
+
+
+ Congratulations on passing the challenge! Please, proceed to the next
+ checkpoint so that we can check your work.
+
+
+);
+
+export default function CompleteStepButton({
+ type,
+ isDisabled,
+ children,
+ id,
+ progress,
+ url,
+ contractId,
+}: CompleteStepButtonProps) {
+ const [challenge, setChallenge] = useState
+
+ Congratulations on passing the challenge! Please, proceed to the next
+ checkpoint so that we can check your work.
+
+
+
+
+ ) : null;
+}
diff --git a/src/components/atoms/complete-step-button/styles.module.css b/src/components/atoms/complete-step-button/styles.module.css
new file mode 100644
index 000000000..8d9df306f
--- /dev/null
+++ b/src/components/atoms/complete-step-button/styles.module.css
@@ -0,0 +1,39 @@
+.completeStep {
+ display: flex;
+ justify-content: center;
+ align-self: center;
+}
+
+.completeStepButton {
+ font-family: var(--ifm-font-family-base);
+ font-size: 14px;
+ font-weight: 600;
+ background-color: #FFD748;
+ color: #222222;
+ border-radius: 4px;
+ border: none;
+ padding: 16px 8px;
+ line-height: 0.8;
+ width: max-content;
+ cursor: pointer;
+}
+
+.completeStepButton:disabled {
+ background-color: #ECECEC;
+ color: #9F9F9F;
+ cursor: not-allowed;
+}
+
+.notification {
+ display: flex;
+ align-items: center;
+ padding-left: 16px;
+}
+
+.notificationText {
+ color: #222222;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: var(--ifm-font-family-base);
+ margin-left: 8px;
+}
\ No newline at end of file
diff --git a/src/components/atoms/confirm-modal/index.tsx b/src/components/atoms/confirm-modal/index.tsx
new file mode 100644
index 000000000..d55d0c1b4
--- /dev/null
+++ b/src/components/atoms/confirm-modal/index.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./style.module.css";
+
+interface Props {
+ onCancel: () => void;
+ onReset: () => void;
+}
+
+export default function ConfirmModal({ onCancel, onReset }: Props) {
+ return (
+ <>
+
+
+
+ Are you sure you want to continue? +
+
+ );
+}
diff --git a/src/components/atoms/confirm-modal/style.module.css b/src/components/atoms/confirm-modal/style.module.css
new file mode 100644
index 000000000..d855ac2c0
--- /dev/null
+++ b/src/components/atoms/confirm-modal/style.module.css
@@ -0,0 +1,63 @@
+.blurContainer {
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.7);
+ z-index: 1000;
+}
+
+.modalContainer {
+ position: absolute;
+ width: 350px;
+ height: 200px;
+ top: calc(50% - 100px);
+ left: calc(50% - 175px);
+ background-color: #ffffff;
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+ z-index: 1001;
+}
+
+.title {
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.buttons {
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+}
+
+.cancelBtn {
+ font-size: 14px;
+ font-weight: 500;
+ font-family: var(--ifm-font-family-base);
+ background-color: transparent;
+ color: #369ea7;
+ border-radius: 4px;
+ border: 1px solid #369ea7;
+ padding: 12px 8px;
+ line-height: 0.8;
+ width: max-content;
+ cursor: pointer;
+}
+
+.resetBtn {
+ font-size: 14px;
+ font-weight: 500;
+ font-family: var(--ifm-font-family-base);
+ background-color: transparent;
+ color: #df0101;
+ border-radius: 4px;
+ border: 1px solid #df0101;
+ padding: 12px 8px;
+ line-height: 0.8;
+ width: max-content;
+ cursor: pointer;
+}
diff --git a/src/components/atoms/dashboard-header/index.tsx b/src/components/atoms/dashboard-header/index.tsx
new file mode 100644
index 000000000..9520428a0
--- /dev/null
+++ b/src/components/atoms/dashboard-header/index.tsx
@@ -0,0 +1,104 @@
+import React , { useState }from "react";
+import { toast } from "react-toastify";
+import { Ranking } from "interfaces/challenge";
+import styles from "./style.module.css";
+import useAuth from "../../../hooks/useAuth";
+
+const AVATAR = `/icons/icon-avatar-${Math.floor(Math.random() * 10) + 1}.svg`;
+
+interface Props {
+ totalCompleted: number;
+ ranking: Ranking;
+}
+
+const DashboardHeader: React.FCReseting progress!
+ It may take up to minute!+ Are you sure you want to continue? +
+
+
+
+
+
+ );
+};
+
+export default DashboardHeader;
diff --git a/src/components/atoms/dashboard-header/style.module.css b/src/components/atoms/dashboard-header/style.module.css
new file mode 100644
index 000000000..e5c7576f8
--- /dev/null
+++ b/src/components/atoms/dashboard-header/style.module.css
@@ -0,0 +1,114 @@
+.dashboardHeader {
+ background-image: url("/static/img/dashboard-bg.png");
+ background-size: cover;
+ background-position: center;
+ height: 200px;
+ color: #ffffff;
+ padding: 40px 0 0 12%;
+}
+
+.dashboardTitle {
+ text-decoration: underline;
+ margin-left: 10px;
+}
+
+.dashboardTabs {
+}
+
+.toggleButton {
+ font-family: var(--ifm-font-family-base);
+ font-size: 14px;
+ font-weight: 600;
+ background-color: #FFD748;
+ color: #222222;
+ border-radius: 4px;
+ border: none;
+ padding: 8px 8px;
+ width: max-content;
+ cursor: pointer;
+}
+
+.userInfo {
+ display: flex;
+ padding: 10px 0 0 10px;
+}
+
+.userInfoItem {
+ display: flex;
+ align-items: flex-start;
+ list-style: none;
+}
+
+.userInfoItem:nth-child(1) {
+ margin-right: 150px;
+}
+
+.userInfoItem:nth-child(2) {
+ margin-right: 24px;
+}
+
+.userAddress {
+ position: relative;
+ max-width: 132px;
+ font-weight: 600;
+}
+
+.userAddress::after {
+ content: attr(data-truncate);
+ position: absolute;
+ left: 100%;
+ top: 0;
+ white-space: nowrap;
+}
+
+.userAddress div {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.completedChallenges {
+ display: flex;
+ flex-direction: column;
+}
+
+.completedChallenges label {
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.completedChallenges span {
+ font-size: 12px;
+ color: #bdbdbd;
+}
+
+.copyIcon {
+ position: absolute;
+ top: 1px;
+ right: -67px;
+ cursor: pointer;
+}
+
+.avatarIcon {
+ margin-right: 10px;
+}
+
+.statsIcon {
+ width: 30px;
+ height: 30px;
+ background-color: #444444;
+ padding: 6px;
+ border-radius: 50%;
+ margin-right: 10px;
+}
+
+.logoutButton {
+ color: #369ea7;
+ background-color: transparent;
+ padding: 12px 8px;
+ border: none;
+ font-family: var(--ifm-font-family-base);
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+}
diff --git a/src/components/atoms/index.tsx b/src/components/atoms/index.tsx
new file mode 100644
index 000000000..d32fd5f86
--- /dev/null
+++ b/src/components/atoms/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { useSorobanReact } from "@soroban-react/core";
+import styles from "./style.module.css";
+
+export interface ConnectButtonProps {
+ label: string;
+ isHigher?: boolean;
+}
+
+export function ConnectButton({ label, isHigher }: ConnectButtonProps) {
+ const { connect } = useSorobanReact();
+ const openConnectModal = async () => {
+ await connect();
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/atoms/start-challenge-button/index.tsx b/src/components/atoms/start-challenge-button/index.tsx
new file mode 100644
index 000000000..13da59ce5
--- /dev/null
+++ b/src/components/atoms/start-challenge-button/index.tsx
@@ -0,0 +1,91 @@
+import React, { useContext, useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { AxiosResponse } from "axios";
+import styles from "./style.module.css";
+import useAuth from "../../../hooks/useAuth";
+import UserChallengesContext, {
+ UserChallengesContextProps,
+} from "../../../store/user-challenges-context";
+import { getActiveChallenge } from "../../../utils/get-active-challenge";
+import {
+ UserChallengeData,
+ UpdateProgressData,
+} from "../../../interfaces/challenge";
+import {
+ fetchUserProgress,
+ updateUserProgress,
+} from "../../../services/challenges";
+
+interface StartChallengeButtonProps {
+ id: number;
+}
+
+const startedToast = (
+ Your dashboard
+ +-
+
-
+
+ +
+ ++++ +{address}+
+
+
+ -
+
+ + + completed challenges ++
+
+ -
+
+ + + + {showContent && ( +++ {!ranking.current || !ranking.total ? ( + + Start a challenge to get a rank + + ) : ( + <> + + leaderboard ranking + + )} ++ )} +
+
+
+
+ You’ve joined the challenge! Good luck!
+
+
+);
+
+export default function StartChallengeButton({
+ id,
+}: StartChallengeButtonProps) {
+ const { address, isConnected, connect } = useAuth();
+ const [isStarted, setIsStarted] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const { setData, updateProgress } = useContext
+
+ You’ve joined the challenge! Good luck!
+
+ | Title | +Link | +Tags | +
|---|
+
+
+
+ {isLoading ?
+ );
+};
+
+export default Leaderboard;
diff --git a/src/components/molecules/leaderboard/style.module.css b/src/components/molecules/leaderboard/style.module.css
new file mode 100644
index 000000000..02a481034
--- /dev/null
+++ b/src/components/molecules/leaderboard/style.module.css
@@ -0,0 +1,125 @@
+.leaderboard {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ padding: 32px 0;
+}
+
+.leadTable {
+ width: 100%;
+ display: table;
+ font-family: "Inter";
+ font-size: 14px;
+ font-weight: 500;
+}
+
+table.leadTable td,
+th {
+ background-color: #ffffff;
+}
+
+.leadTableHead {
+ background-color: var(--secondary-black);
+ color: #ffffff;
+}
+
+.leadTableHeadColumn {
+ width: 273px;
+ padding: 16px;
+ text-align: start;
+ border: 0.5px solid #b0b0b0;
+ cursor: pointer;
+ color: #585858;
+}
+
+.leadTableHeadColumnPlace {
+ width: 273px;
+ padding: 16px;
+ text-align: start;
+ cursor: pointer;
+ color: #585858;
+}
+
+.leadTableBody {
+ color: var(--secondary-black);
+ background-color: #ffffff;
+}
+
+.leadTableBodyRow {
+ background-color: #ffffff;
+ border: none;
+}
+
+.userRow {
+ border: 2px solid #ffd748;
+}
+
+.rankingCell {
+ display: flex;
+ align-items: center;
+}
+
+.userRankingCell {
+ padding-left: 7px;
+}
+
+.rankingCellNum {
+ border: 1px solid black;
+ width: min-content;
+ padding: 2px;
+ border-radius: 50%;
+ min-width: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.userRankingCellNum {
+ border: none;
+ padding: 5px 10px;
+ background-color: #ffd748;
+ margin-right: 5px;
+}
+
+.leaderboardText {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 15px;
+ left: 45%;
+}
+
+.leaderboardText span {
+ font-size: 24px;
+ font-weight: 200;
+}
+
+.leaderboardText strong {
+ color: #585858;
+ font-size: 22px;
+}
+
+.paginationBlock {
+ display: flex;
+ gap: 10px;
+ align-self: flex-end;
+}
+
+.paginationButton {
+ padding: 10px;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: var(--ifm-font-family-base);
+ border-radius: 4px;
+ border: none;
+ cursor: pointer;
+}
+
+.loading {
+ height: 536px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/constants.ts b/src/constants.ts
index 390675e6f..dc6bc3097 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -23,3 +23,9 @@ export const CODE_LANGS = {
typescript: 'TypeScript',
yaml: 'YAML',
};
+
+export const FUTURENET_DETAILS = {
+ network: "FUTURENET",
+ networkUrl: "https://horizon-futurenet.stellar.org",
+ networkPassphrase: "Test SDF Future Network ; October 2022",
+ };
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
new file mode 100644
index 000000000..ffa99107d
--- /dev/null
+++ b/src/hooks/useAuth.tsx
@@ -0,0 +1,76 @@
+import { useContext, useState } from "react";
+import { toast } from "react-toastify";
+import UserChallengesContext, {
+ UserChallengesContextProps,
+} from "../store/user-challenges-context";
+
+// Import the Freighter library
+import { isConnected, setAllowed, getPublicKey } from "@stellar/freighter-api";
+
+const useAuth = () => {
+ const { address, setAddress } = useContext| + Place + | +Address | +onSort(LeaderboardColumn.TotalValueLocked)} + > + Total Value Locked {col === LeaderboardColumn.TotalValueLocked ? arrow : null} + | +onSort(LeaderboardColumn.ChallengesCompleted)} + > + Number of challenges{" "} + {col === LeaderboardColumn.ChallengesCompleted ? arrow : null} + | +onSort(LeaderboardColumn.MinutesSpent)} + > + Minutes spent{" "} + {col === LeaderboardColumn.MinutesSpent ? arrow : null} + | +
|---|---|---|---|---|
|
+
+ {item.ranking.current}
+
+ {isCurrent ? (
+ <>
+ you are here!
+ 
+
+ ) : null}
+ |
+ {`${item.userId}`} | +{item.totalValueLocked} | ++ {item.challengesCompleted === 0 ? ( + "In Progress" + ) : ( + <>{item.challengesCompleted} + )} + | ++ {item.minutesSpent === 0 ? ( + "In Progress" + ) : ( + <>{item.minutesSpent} + )} + | +
Loading
: null}
+
+
+
+
+ + +:::info + +Join [our Community in Discord](https://discord.gg/stellardev) in case you have any issues or questions. + +::: + +## Checkpoint 6: ✅ Check your work! + +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 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 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: + +- 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! + +## ⚔️ Side Quests + +🌐 Explore [Stellar Laboratory] to inspect your account assets on Futurenet. + +You should see something like this: + +```json + "balances": [ + { + "balance": "100.0000000", + "limit": "922337203685.4775807", + "buying_liabilities": "0.0000000", + "selling_liabilities": "0.0000000", + "last_modified_ledger": 148108, + "is_authorized": true, + "is_authorized_to_maintain_liabilities": true, + "asset_type": "credit_alphanum4", + "asset_code": "ABND", + "asset_issuer": "GBUGENT4FK4Y6FZNZEEGVZJLCHKNES23FRVOPPOI62RUF4WRSNOTSZV4" + }, + ] +``` + +[Stellar Laboratory]: https://laboratory.stellar.org/#explorer?network=futurenet + +## 📚 User Workflows Checklist + +During this exercise you should be able to: + +- Clone the example repo (Crowdfund Dapp) +- Choose your target amount and deadline +- Deploy your contract to Futurenet +- Deploy the example web ui somewhere (e.g. netlify, vercel, surge, etc.) + +Then via the web UI, you should be able to: + +- Connect your wallet +- See your current balance(s) +- See the current fundraising status (total amount & time remaining) +- See allowed assets +- Deposit an allowed asset +- See your deposit(s) appear on the page as the transactions are confirmed. +- "Live"-Update the page with the total amount with the new amount + +## 🛡️🗡️ Take On More Challenges + +View your progress and take on more challenges by visiting your [User Dashboard!](../dashboard) diff --git a/src/pages/docs/learn/interactive/dapps/challenges/challenge-1-payment.mdx b/src/pages/docs/learn/interactive/dapps/challenges/challenge-1-payment.mdx new file mode 100644 index 000000000..efe7faaca --- /dev/null +++ b/src/pages/docs/learn/interactive/dapps/challenges/challenge-1-payment.mdx @@ -0,0 +1,457 @@ +--- +title: Payment Dapp Challenge +description: Take on the challenge and master the Soroban Payment Dapp! +--- + +import connect_freighter from "@site/static/img/connect_freighter.png"; +import freighter_settings from "@site/static/img/freighter_settings.png"; +import add_token from "@site/static/img/add_token.png"; +import new_token from "@site/static/img/new_token.png"; +import manage_assets from "@site/static/img/manage_assets.png"; +import added_balance from "@site/static/img/added_balance.png"; +import aucb_balance from "@site/static/img/aucb_balance.png"; +import pmt_dest from "@site/static/img/pmt_dest.png"; +import next from "@site/static/img/next.png"; +import choose_token from "@site/static/img/choose_token.png"; +import select_token from "@site/static/img/select_token.png"; +import payment_settings from "@site/static/img/payment_settings.png"; +import confirm_pmt from "@site/static/img/confirm_pmt.png"; +import submit_pmt from "@site/static/img/submit_pmt.png"; +import end from "@site/static/img/end.png"; +import balance_rcvr from "@site/static/img/balance_rcvr.png"; +import { ParentChallengeForm } from "@site/src/components/atoms/challenge-form"; +import { ParentChallengeContractForm } from "@site/src/components/atoms/challenge-contract-form"; +import CompleteStepButton from "@site/src/components/atoms/complete-step-button"; +import StartChallengeButton from "@site/src/components/atoms/start-challenge-button"; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import "./styles.css"; + +
+
+ +:::info + +Join [our Community in Discord](https://discord.gg/stellardev) in case you have any issues or questions. + +::: + +## Checkpoint 7: 💪 Share Your Accomplishment with the Community + +Don't forget to share your work with the community. Let others see what you've accomplished, receive feedback, and inspire others! + +## ⚔️ Side Quests + +🍴[Fork the Example Soroban Payment Dapp repo] and make your own changes to your Dapp. + +Consider customizing the code and submitting a pull request for the challenge. You can explore advanced features of the Example Soroban Payment Dapp, and Freighter wallet to take your skills to the next level. Show your creativity by adding unique functionalities, enhancing the user interface, or integrating with other APIs or services. Good luck! + +[Fork the Example Soroban Payment Dapp repo]: https://github.com/stellar/soroban-react-payment + +## 📚 User Workflows Checklist + +To ensure that you've covered all the key user actions during the challenge, follow this checklist: + +- Clone the repository +- Install dependencies +- Deploy and initialize the token smart contract +- Mint tokens to your account +- Launch the local frontend +- Add the Soroban token to Freighter +- Connect Freighter to the application +- Send tokens to another account +- Deploy the site with Vercel +- Submit your public key and URL + +## 🛡️🗡️ Take On More Challenges + +View your progress and take on more challenges by visiting your [User Dashboard!](../dashboard) diff --git a/src/pages/docs/learn/interactive/dapps/challenges/challenge-2-liquidity-pool.mdx b/src/pages/docs/learn/interactive/dapps/challenges/challenge-2-liquidity-pool.mdx new file mode 100644 index 000000000..15fbd6c69 --- /dev/null +++ b/src/pages/docs/learn/interactive/dapps/challenges/challenge-2-liquidity-pool.mdx @@ -0,0 +1,459 @@ +--- +title: Liquidity Pool Dapp Challenge +description: Deploy an example dapp, add liquidity! Beat the Challenge! +--- + +import mint_tokens from "@site/static/img/mint_tokens.png"; +import approveTokenMint from "@site/static/img/approveTokenMint.png"; +import updatedBalances from "@site/static/img/updatedBalances.png"; +import deposit50 from "@site/static/img/deposit50.png"; +import updatedBalances50 from "@site/static/img/updatedBalances50.png"; +import swap from "@site/static/img/swap.png"; +import swapComplete from "@site/static/img/swapComplete.png"; +import futurenetDeployment from "@site/static/img/futurenetDeployment.png"; +import wdraw from "@site/static/img/wdraw.png"; +import { ParentChallengeForm } from "@site/src/components/atoms/challenge-form"; +import { ParentChallengeContractForm } from "@site/src/components/atoms/challenge-contract-form"; +import CompleteStepButton from "@site/src/components/atoms/complete-step-button"; +import StartChallengeButton from "@site/src/components/atoms/start-challenge-button"; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import "./styles.css"; + +
+ +:::info + +Join [our Community in Discord](https://discord.gg/stellardev) in case you have any issues or questions. + +::: + +## 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/fork). +2. Fill `oracle/challenge/output.txt` file with your wallet address. Filled file should look like: + +```sh +Public Key: GBSXUXZSA2VEXN5VGOWE5ODAJLC575JCMWRJ4FFRDWSTRCJ123456789 +``` + +3. Create a Pull Request to the `stellar/soroban-dapps-challenge/oracle` branch. When the PR will be created, CI actions will check the `oracle/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 Oracle 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! + +## ⚔️ Side Quests + +🪬 Add a new feature to your dapp (e.g. add a new price feed, add a new token, etc.) + +🌐 Extend your dapp's functionality by allowing users to query and interact with historic oracle data directly through the user interface. + +💡 Develop a function to respond to a significant BTC price change. + +## 📚 User Workflows Checklist + +During this exercise you should be able to: + +- Clone the example repo (Oracle Dapp) +- Set the correct parameters in the `initialize.sh` script +- Deploy your contract to Futurenet +- Deploy the example web ui somewhere (e.g. netlify, vercel, surge, etc.) + +Then via the web UI, you should be able to: + +- Connect your wallet +- See the BTC to USD conversion rate +- See your current balance +- See the contract balance +- Mint an asset +- Deposit an asset +- See your deposit(s) appear on the page as the transactions are confirmed + +## 🛡️🗡️ Take On More Challenges + +View your progress and take on more challenges by visiting your [User Dashboard!](../dashboard) diff --git a/src/pages/docs/learn/interactive/dapps/challenges/styles.css b/src/pages/docs/learn/interactive/dapps/challenges/styles.css new file mode 100644 index 000000000..23ecc7ab0 --- /dev/null +++ b/src/pages/docs/learn/interactive/dapps/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/src/pages/docs/learn/interactive/dapps/dashboard/index.tsx b/src/pages/docs/learn/interactive/dapps/dashboard/index.tsx new file mode 100644 index 000000000..00bf42391 --- /dev/null +++ b/src/pages/docs/learn/interactive/dapps/dashboard/index.tsx @@ -0,0 +1,183 @@ +import React, { useEffect, useState } from "react"; +import Layout from "@theme/Layout"; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { toast } from "react-toastify"; +import { + LeaderboardParams, + fetchLeaderboard, +} from "@site/src/services/leaderboard"; +import styles from "./style.module.css"; +import { + fetchInitialChallenges, + fetchUserProgress, + resetUserProgress, +} from "@site/src/services/challenges"; +import useAuth from "@site/src/hooks/useAuth"; +import DashboardHeader from "@site/src/components/atoms/dashboard-header"; +import Leaderboard from "@site/src/components/molecules/leaderboard"; +import ChallengesList from "@site/src/components/atoms/challenges-list"; +import { + Challenge, + ChallengeInfo, + Leaderboard as LeaderboardI, + Ranking, +} from "@site/src/interfaces/challenge"; + +export default function Dashboard() { + const { address, isConnected, connect } = useAuth(); + + const [availableChallenges, setAvailableChallenges] = useState
+ {isConnected && address ? (
+
+
+ {isLoading ? (
+
+
+
+
+
+
+ )}
+
+
+ {!isConnected || !address ? (
+ We're loading the list of challenges...
+ ) : ( +
+ Want to take part in our challenges?
+
+
+ ) : null}
+