Coming soon: stable coins + prediction markets

packages/backend/utils/challenges.js

@@ -31,6 +31,14 @@ const challengeMapping = {
     id: 7,
     autograding: false,
   },
+  stablecoins: {
+    id: 8,
+    autograding: false,
+  },
+  "prediction-markets": {
+    id: 9,
+    autograding: false,
+  },
 };
 
 function getChallengeIndexFromChallengeId(challengeId) {

packages/react-app/src/components/ChallengeExpandedCard.jsx

@@ -22,6 +22,7 @@ import JoinBG from "./JoinBG";
 import CrossedSwordsIcon from "./icons/CrossedSwordsIcon";
 import PadLockIcon from "./icons/PadLockIcon";
 import QuestionIcon from "./icons/QuestionIcon";
+import NewIcon from "./icons/NewIcon";
 
 const ChallengeExpandedCard = ({
   challengeId,
@@ -85,6 +86,7 @@ const ChallengeExpandedCard = ({
   }
 
   const isChallengeLocked = challenge.disabled || !builderHasCompletedDependenciesChallenges;
+  const isChallengeComingSoon = challenge.comingSoon;
 
   if (challenge.checkpoint) {
     return (
@@ -302,8 +304,8 @@ const ChallengeExpandedCard = ({
               <ButtonGroup alignItems="center">
                 <Button
                   as={RouteLink}
-                  to={!isChallengeLocked && `/challenge/${challengeId}`}
-                  isDisabled={isChallengeLocked}
+                  to={!isChallengeLocked && !isChallengeComingSoon && `/challenge/${challengeId}`}
+                  isDisabled={isChallengeLocked || isChallengeComingSoon}
                   variant={isChallengeLocked ? "outline" : "solid"}
                   fontSize={{ base: "xl", lg: "lg" }}
                   border="2px"
@@ -312,7 +314,14 @@ const ChallengeExpandedCard = ({
                   py="1rem"
                   px={4}
                 >
-                  {!isChallengeLocked ? (
+                  {isChallengeComingSoon ? (
+                    <Flex justifyContent="center">
+                      <NewIcon w={6} h={6} />
+                      <chakra.span color={primaryFontColor} ml={2} textTransform="uppercase" fontWeight="medium">
+                        Coming Soon
+                      </chakra.span>
+                    </Flex>
+                  ) : !isChallengeLocked ? (
                     <Flex justifyContent="center" alignItems="center">
                       <CrossedSwordsIcon w={6} h={6} />
                       <chakra.span color={primaryFontColor} ml={2} textTransform="uppercase" fontWeight="medium">

packages/react-app/src/components/icons/NewIcon.jsx

@@ -0,0 +1,20 @@
+/* eslint react/jsx-props-no-spreading: off */
+// ☝️ we want this component to be usable with chakra props
+import React from "react";
+import { chakra } from "@chakra-ui/react";
+
+const NewIcon = props => (
+  <chakra.svg width="800px" height="800px" viewBox="0 0 48 48" {...props} xmlns="http://www.w3.org/2000/svg">
+    <title>new-rectangle</title>
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="invisible_box" data-name="invisible box">
+        <rect width="48" height="48" fill="none" />
+      </g>
+      <g id="icons_Q2" data-name="icons Q2">
+        <path d="M44,14H4a2,2,0,0,0-2,2V32a2,2,0,0,0,2,2H44a2,2,0,0,0,2-2V16A2,2,0,0,0,44,14ZM17.3,29H14.8l-3-5-.7-1.3h0V29H8.7V19h2.5l3,5,.6,1.3h.1s-.1-1.2-.1-1.6V19h2.5Zm9.1,0H18.7V19h7.6v2H21.2v1.8h4.4v2H21.2v2.1h5.2Zm10.9,0H34.8l-1-4.8c-.2-.8-.4-1.9-.4-1.9h0s-.2,1.1-.3,1.9L32,29H29.6L26.8,19h2.5l1,4.2a20.1,20.1,0,0,1,.5,2.5h0l.5-2.4,1-4.3h2.3l.9,4.3.5,2.4h0l.5-2.5,1-4.2H40Z" />
+      </g>
+    </g>
+  </chakra.svg>
+);
+
+export default NewIcon;

packages/react-app/src/data/challenges.js

@@ -73,6 +73,30 @@ export const challengeInfo = {
       claim: "Join the 🏰️ BuidlGuidl",
     },
   },
+  stablecoins: {
+    // ID is not acually used (We are passing the object key as the id ("stablecoins")
+    id: 8,
+    branchName: "challenge-8-stablecoin",
+    // Label shown in the User profile (won't be shown until we enabled this, then it might be time to change label and id)
+    label: "💰 Stablecoins",
+    disabled: false,
+    description:
+      "🪙Build your own decentralized stablecoin. Let’s write a contract that takes collateral and issues MyUSD tokens based on the value of the collateral. What happens when the collateral changes in value? If it is higher, we will be able to borrow more tokens. If it is lower, we will also build a system for liquidating the MyUSD.",
+    previewImage: "assets/challenges/stablecoins.svg",
+    comingSoon: true,
+    dependencies: [],
+  },
+  "prediction-markets": {
+    id: 9,
+    branchName: "challenge-9-prediction-markets",
+    label: "📈 Prediction Markets",
+    disabled: false,
+    description:
+      "🔮 Build a prediction market where users can create questions about future outcomes for others to bet on. Users can also participate in existing markets to speculate on event results. 📊 Outcome shares can be traded, with prices adjusting dynamically based on market belief. This is possible because the smart contract acts as an automated market maker (like in the DEX challenge) and adjusts odds based on supply and demand.",
+    previewImage: "assets/challenges/predictionMarkets.svg",
+    comingSoon: true,
+    dependencies: [],
+  },
   "state-channels": {
     id: 5,
     branchName: "challenge-5-state-channels",