Merge remote-tracking branch 'upstream/leaderboard-wallet-integration…

…' into leaderboard-wallet-integrationv2

package.json

@@ -36,6 +36,7 @@
     "react-rewards": "^2.0.4",
     "react-toastify": "^9.1.3",
     "sass": "^1.57.1",
+    "soroban-client": "^1.0.0-beta.2",
     "stellar-wallets-kit": "github:Creit-Tech/Stellar-Wallets-Kit"
   },
   "browserslist": {

src/components/atoms/challenge-contract-form/index.tsx

@@ -30,8 +30,6 @@ function ChallengeContractForm({ address, id }: ChallengeFormProps) {
   );
   const isSubmitBtnDisabled = !contractId || savedContractId === contractId;
 
-  // TODO add logic with TVL based on contractId here
-
   useEffect(() => {
     if (address) {
       const challenge = getActiveChallenge(data, id);

src/components/atoms/challenges-list/index.tsx

@@ -3,19 +3,31 @@ import styles from "./style.module.css";
 import { Challenge, ChallengeInfo } from "../../../interfaces/challenge";
 import { ChallengeCard } from "../challenge-card";
 import Switcher from "../UI/switcher";
+import ConfirmModal from "../confirm-modal";
 
 interface Props {
   availableChallenges: Challenge[];
   userChallenges: ChallengeInfo[];
   onRefresh: () => void;
+  onReset?: () => void;
 }
 
 export default function ChallengeList({
   availableChallenges,
   userChallenges,
   onRefresh,
+  onReset,
 }: Props) {
   const [onlyMine, setOnlyMine] = useState(false);
+  const [confirmReset, setConfirmReset] = useState(false);
+
+  const onResetClick = () => {
+    setConfirmReset(true);
+  };
+
+  const onCancelClick = () => {
+    setConfirmReset(false);
+  };
 
   const myChallanges = (
     <>
@@ -53,21 +65,32 @@ export default function ChallengeList({
   return (
     <>
       <div className={styles.listHeader}>
-        {userChallenges?.length > 0 ? (
-          <Switcher
-            id="challengesFilter"
-            labelText="Show my challenges"
-            onChange={(value: boolean) => setOnlyMine(value)}
-          />
-        ) : null}
-        <button className={styles.refreshBtn} onClick={onRefresh}>
-          Refresh
-        </button>
+        <div className={styles.dataControls}>
+          {userChallenges?.length > 0 ? (
+            <Switcher
+              id="challengesFilter"
+              labelText="Show my challenges"
+              onChange={(value: boolean) => setOnlyMine(value)}
+            />
+          ) : null}
+          <button className={styles.refreshBtn} onClick={onRefresh}>
+            Refresh
+          </button>
+        </div>
+        {onReset && (
+          <button className={styles.resetBtn} onClick={onResetClick}>
+            Reset
+          </button>
+        )}
       </div>
 
       <ul className={styles.challengeCards}>
         {onlyMine ? myChallanges : allChallenges}
       </ul>
+
+      {confirmReset && onReset && (
+        <ConfirmModal onCancel={onCancelClick} onReset={onReset} />
+      )}
     </>
   );
 }

src/components/atoms/challenges-list/style.module.css

@@ -14,16 +14,35 @@
 
 .listHeader {
   display: flex;
+  justify-content: space-between;
+}
+
+.dataControls {
+  display: flex;
 }
 
 .refreshBtn {
   font-size: 14px;
   font-weight: 500;
   font-family: var(--ifm-font-family-base);
   background-color: transparent;
-  color: #369EA7;
+  color: #369ea7;
   border-radius: 4px;
-  border: 1px solid #369EA7;
+  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;
@@ -32,4 +51,4 @@
 
 div + .refreshBtn {
   margin-left: 20px;
-}
+}

src/components/atoms/complete-step-button/index.tsx

@@ -19,6 +19,7 @@ import {
   UpdateProgressData,
 } from "../../../interfaces/challenge";
 import { updateUserProgress } from "../../../services/challenges";
+import { getContractBalance } from "../../../utils/get-contract-balance";
 
 interface CompleteStepButtonState {
   isCompleted: boolean;
@@ -143,6 +144,7 @@ export default function CompleteStepButton({
       completedAt: Date.now(),
       startDate: challenge?.startDate,
       contractId: challenge?.contractId,
+      totalValueLocked: challenge?.totalValueLocked,
     });
 
     showToast(challenge?.isPullRequestRequired ? passedToast : completedToast);
@@ -155,6 +157,49 @@ export default function CompleteStepButton({
       return;
     }
 
+    let balance = 0;
+
+    // if funding step => get contract balance
+    if (progress === 2) {
+      if (challenge?.contractId) {
+        try {
+          const result = await getContractBalance(
+            challenge?.contractId,
+            address,
+          );
+          if (!result) {
+            toast("No locked balance found!", {
+              type: "error",
+              hideProgressBar: true,
+              position: "top-center",
+              autoClose: 2000,
+            });
+
+            return;
+          }
+
+          balance = result;
+        } catch (error) {
+          console.error(error);
+
+          toast("No locked balance found!", {
+            type: "error",
+            hideProgressBar: true,
+            position: "top-center",
+            autoClose: 2000,
+          });
+          return;
+        }
+      } else {
+        toast("No contract id found!", {
+          type: "error",
+          hideProgressBar: true,
+          position: "top-center",
+          autoClose: 2000,
+        });
+      }
+    }
+
     setState((prevState: CompleteStepButtonState) => {
       return {
         ...prevState,
@@ -168,6 +213,7 @@ export default function CompleteStepButton({
       challengeProgress: progress,
       startDate: challenge?.startDate,
       contractId: challenge?.contractId || contractId,
+      totalValueLocked: challenge?.totalValueLocked || balance,
     });
 
     showToast(milestoneToast);

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 (
+    <>
+      <div className={styles.blurContainer} onClick={onCancel}></div>
+      <div className={styles.modalContainer}>
+        <p className={styles.title}>Reseting progress!</p>
+        It may take up to minute! <br />
+        Are you sure you want to continue?
+        <div className={styles.buttons}>
+          <button className={styles.cancelBtn} onClick={onCancel}>
+            Cancel
+          </button>
+          <button className={styles.resetBtn} onClick={onReset}>
+            Reset
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

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;
+}

src/components/molecules/leaderboard/index.tsx

@@ -24,7 +24,7 @@ const Leaderboard: React.FC<Props> = ({ userId, list, onColumnClick }) => {
     setAsc(col === val ? !asc : false);
     onColumnClick({
       colName: val,
-      direction: nextAsc ? "asc" : "desc",
+      direction: nextAsc ? "desc" : "asc",
     });
     setCol(val);
   };

src/contants.ts

@@ -0,0 +1,5 @@
+export const FUTURENET_DETAILS = {
+  network: "FUTURENET",
+  networkUrl: "https://horizon-futurenet.stellar.org",
+  networkPassphrase: "Test SDF Future Network ; October 2022",
+};

src/hooks/useAuth.tsx

@@ -11,12 +11,7 @@ import { toast } from "react-toastify";
 import UserChallengesContext, {
   UserChallengesContextProps,
 } from "../store/user-challenges-context";
-
-export const FUTURENET_DETAILS = {
-  network: "FUTURENET",
-  networkUrl: "https://horizon-futurenet.stellar.org",
-  networkPassphrase: "Test SDF Future Network ; October 2022",
-};
+import { FUTURENET_DETAILS } from "../contants";
 
 const useAuth = () => {
   const { address, setAddress } = useContext<UserChallengesContextProps>(

src/interfaces/challenge.ts

@@ -11,6 +11,7 @@ export interface UpdateProgressData {
   startDate?: number;
   completedAt?: number;
   contractId?: string;
+  totalValueLocked?: number;
 }
 
 export interface Ranking {
@@ -40,6 +41,7 @@ export interface ChallengeInfo extends Challenge {
   startDate?: number;
   completedAt?: number;
   isCompleted?: boolean;
+  totalValueLocked?: number;
 }
 
 export interface UserProgress {