Merge pull request #16 from Quantum3-Labs/challenge-view

packages/nextjs/app/challenge/[id]/page.tsx

@@ -3,27 +3,48 @@
 import React, { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { useParams } from "next/navigation";
+import { getMarkdownComponents } from "~~/components/GetMarkdownComponents/GetMarkdownComponents";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+
+// eslint-disable-next-line react/display-name
 
 const PageView: React.FC = () => {
   const { id } = useParams();
-
   const [markdown, setMarkdown] = useState<string>();
 
   useEffect(() => {
     const getMarkdown = async () => {
       const response = await fetch(
         `https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/${id}/README.md`,
+        // `https://raw.githubusercontent.com/scaffold-eth/se-2-challenges/challenge-0-simple-nft/README.md`,
       );
       const markdownData = await response.text();
+
       setMarkdown(markdownData);
     };
 
     getMarkdown();
   }, [id]);
+  const handleClick = () => {
+    window.open(
+      `https://github.com/Quantum3-Labs/speedrunstark/tree/${id}`,
+      "_blank",
+    );
+  };
   return (
     <div className=" flex items-center w-full justify-center sm:text-[12px] ">
-      <div className="max-w-[800px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 ">
-        <ReactMarkdown>{markdown}</ReactMarkdown>
+      <div className="max-w-[860px] py-20 sm:w-full sm:py-5 sm:px-5 ">
+        <ReactMarkdown components={getMarkdownComponents()}>
+          {markdown}
+        </ReactMarkdown>
+        <div className="w-full flex justify-center">
+          <button
+            className="rounded-full border py-2 px-3 font-medium hover:bg-secondary-content flex items-center justify-center gap-1 text-center"
+            onClick={handleClick}
+          >
+            View it on Github <ArrowTopRightOnSquareIcon className="w-[20px]" />
+          </button>
+        </div>
       </div>
     </div>
   );

packages/nextjs/app/page.tsx

@@ -50,7 +50,7 @@ const Home: NextPage = () => {
         </div>
         <div className="footer-header-landing"></div>
       </div>
-      <div className="w-full flex justify-center text-lg flex-col items-center text-primary ">
+      <div className="w-full flex justify-center text-lg flex-col items-center text-primary bg-">
         <div className="w-full px-[20px] flex justify-center flex-col items-center sm:pr-[35px]">
           {firstChallenges.slice(0, 3).map((challenge) => (
             <ChallengeCard
@@ -77,7 +77,7 @@ const Home: NextPage = () => {
               </div>
               <div className="flex lg:justify-center">
                 <div className="max-w-[430px] w-full py-20 pl-20 sm:py-0 sm:pl-3 sm:flex lg:pl-0  lg:pt-0">
-                  <span className="sm:text-[12px] sm:text-center ">
+                  <span className="sm:text-[12px] sm:text-center leading-7 sm:text-xs">
                     The BuidlGuidl is a curated group of Ethereum builders
                     creating products, prototypes, and tutorials to enrich the
                     web3 ecosystem. A place to show off your builds and meet
@@ -97,7 +97,7 @@ const Home: NextPage = () => {
               title={challenge.title}
               description={challenge.description}
               imageUrl={challenge.imageUrl}
-              buttonText="LOCK"
+              buttonText="COMING SOON"
               onButtonClick={() => router.push(`/challenge/${challenge.id}`)}
               end={challenge.end || false}
               border={challenge.border !== undefined ? challenge.border : true}

packages/nextjs/components/Button/Button.tsx

@@ -3,14 +3,20 @@ import React, { ReactNode } from "react";
 interface ButtonProps {
   onClick: () => void;
   children: ReactNode;
+  isDisable?: boolean;
 }
 
-const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+const Button: React.FC<ButtonProps> = ({
+  onClick,
+  children,
+  isDisable = false,
+}) => {
   return (
     <button
-      className="py-[10px] px-[20px] sm:px-[10px] sm:py-[5px] bg-base-300 text-base-100 rounded-[8px] sm:text-[12px]"
+      className={`py-[10px] px-[20px] sm:px-[10px] sm:py-[5px] bg-base-300 text-base-100 rounded-[8px] sm:text-[12px] ${isDisable ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
       onClick={onClick}
       type="button"
+      disabled={isDisable || children === "Coming Soon"}
     >
       {children}
     </button>

packages/nextjs/components/ChallengeCard/ChallengeCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Image from "next/image";
 import Button from "~~/components/Button/Button";
 
@@ -38,9 +38,14 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
         <div className="max-w-[500px] flex flex-col gap-4 ">
           <span>{challenge}</span>
           <h2 className="text-2xl sm:text-[16px] sm:m-0">{title}</h2>
-          <p className="sm:m-0">{description}</p>
+          <p className="sm:m-0 leading-7 sm:text-xs">{description}</p>
           <div className="sm:pt-[10px]">
-            <Button onClick={onButtonClick}>{buttonText}</Button>
+            <Button
+              onClick={onButtonClick}
+              isDisable={buttonText === "COMING SOON"}
+            >
+              {buttonText}
+            </Button>
           </div>
         </div>
         <div>

packages/nextjs/components/Footer.tsx

@@ -28,7 +28,7 @@ export const Footer = () => {
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div>
-                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
+                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto bg-base-300 text-base-100">
                   <CurrencyDollarIcon className="h-4 w-4" />
                   <span>{nativeCurrencyPrice}</span>
                 </div>

packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx

@@ -0,0 +1,57 @@
+import { Components } from "react-markdown";
+
+export const getMarkdownComponents = (): Components => {
+  return {
+    h1: ({ children }) => {
+      return (
+        <h1 className="text-primary text-4xl font-bold py-4 border-b border-[#1c2d49] mb-2 sm:text-lg ">
+          {children}
+        </h1>
+      );
+    },
+    h2: ({ children }) => (
+      <h2 className="text-primary text-3xl font-bold py-3 sm:text-sm sm:m-0">
+        {children}
+      </h2>
+    ),
+    h3: ({ children }) => (
+      <h3 className="text-primary text-xl font-bold py-3 sm:text-sm sm:m-0">
+        {children}
+      </h3>
+    ),
+    p: ({ children }) => (
+      <p className="text-primary text-base sm:text-xs lg:text-sm text-justify max-w-[860px] sm:max-w-[400px] sm:overflow-auto ">
+        {children}
+      </p>
+    ),
+    strong: ({ children }) => (
+      <strong className="text-primary text-base sm:text-xs lg:text-sm">
+        {children}
+      </strong>
+    ),
+    div: ({ children }) => <div className="text-primary py-3">{children}</div>,
+    a: ({ children, href }) => (
+      <a className="text-accent cursor-pointer sm:text-xs" href={href}>
+        {children}
+      </a>
+    ),
+    pre: ({ children }) => (
+      <pre className="bg-secondary-content text-secondary rounded p-5 text-base sm:text-xs lg:text-sm overflow-auto">
+        {children}
+      </pre>
+    ),
+    code: ({ children }) => (
+      <code className="text-sm rounded bg-secondary-content text-secondary w-full px-[4px] sm:text-xs">
+        {children}
+      </code>
+    ),
+    blockquote: ({ children }) => (
+      <blockquote className="text-justify text-base sm:text-xs lg:text-sm ">
+        {children}
+      </blockquote>
+    ),
+    li: ({ children }) => (
+      <li className="list-disc text-base sm:text-xs lg:text-sm ">{children}</li>
+    ),
+  };
+};

packages/nextjs/components/Header.tsx

@@ -41,20 +41,22 @@ export const Header = () => {
 
   return (
     <div
-      className={`lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 bg-base-100 ${pathname !== "/" ? "border-b border-[#1c2d49]" : ""}`}
+      className={`lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 bg-base-100 ${pathname !== "/" ? "border-b border-[#1c2d49] bg-base-400" : ""}`}
     >
-      <div className="pl-8">
+      <div className="pl-8 sm:pl-0">
         {pathname !== "/" && (
-          <Image
-            src={"/logo-header.svg"}
-            alt={"logo header"}
-            width={200}
-            height={65}
-            className="sm:w-[100px]"
-          />
+          <button onClick={() => (window.location.href = "/")}>
+            <Image
+              src={"/logo-header.svg"}
+              alt={"logo header"}
+              width={200}
+              height={65}
+              className="sm:w-[130px] "
+            />
+          </button>
         )}
       </div>
-      <div className="navbar-end flex-grow pr-8 py-[8px]">
+      <div className="navbar-end flex-grow pr-8 py-[8px] sm:pr-0 leading-7">
         <CustomConnectButton />
         <FaucetButton />
       </div>

packages/nextjs/components/StepInstruction/StepInstruction.tsx

@@ -11,7 +11,7 @@ const StepInstruction: React.FC<StepInstructionProps> = ({ number, text }) => {
       <div className="w-6 h-6 rounded-full bg-gradient-linear text-white text-center sm:w-5 sm:h-5">
         {number}
       </div>
-      <span className="text-center text-[16px] sm:text-[12px]">{text}</span>
+      <span className="text-center text-[16px] sm:text-xs ">{text}</span>
     </div>
   );
 };

packages/nextjs/data-challenges/challenges.ts

@@ -6,15 +6,15 @@ const allChallenges = [
       "🎫 Create a simple NFT to learn basics of scaffold-Stark. You'll use 👷‍♀️ HardHat to compile and deploy smart contracts. Then, you'll use a template React app full of important Ethereum components and hooks. Finally, you'll deploy an NFT to a public network to share with friends! 🚀",
     imageUrl: "/simpleNFT.png",
     end: true,
-    id: "challenge0",
+    id: "simple-nft-example",
   },
   {
     challenge: "Challenge #1",
     title: "🥩 Decentralized Staking App",
     description:
       "🦸 A superpower of Ethereum is allowing you, the builder, to create a simple set of rules that an adversarial group of players can use to work together. In this challenge, you create a decentralized application where users can coordinate a group funding effort. The users only have to trust the code.",
     imageUrl: "/stakingToken.png",
-    id: "challenge-0-simple-nft",
+    id: "decentralized-staking",
   },
   {
     challenge: "Challenge #2",
@@ -23,39 +23,39 @@ const allChallenges = [
       "🤖 Smart contracts are kind of like always on vending machines that anyone can access. Let's make a decentralized, digital currency (an ERC20 token). Then, let's build an unstoppable vending machine that will buy and sell the currency. We'll learn about the approve pattern for ERC20s and how contract to contract interactions work.",
     imageUrl: "/tokenVendor.png",
     border: false,
-    id: "challenge-0-simple-nft",
+    id: "token-vendor",
   },
   {
     challenge: "Challenge #3",
     title: "🎲 Dice Game",
     description:
       "🎰 Randomness is tricky on a public deterministic blockchain. The block hash is the result proof-of-work (for now) and some builders use this as a weak form of randomness. In this challenge you will take advantage of a Dice Game contract by predicting the randomness in order to only roll winning dice!",
     imageUrl: "/diceGame.png",
-    id: "challenge-0-simple-nft",
+    id: "dice-game",
   },
   {
     challenge: "Challenge #4",
     title: "⚖️ Build a DEX",
     description:
       "💵 Build an exchange that swaps ETH to tokens and tokens to ETH. 💰 This is possible because the smart contract holds reserves of both assets and has a price function based on the ratio of the reserves. Liquidity providers are issued a token that represents their share of the reserves and fees...",
     imageUrl: "/dex.png",
-    id: "challenge-0-simple-nft",
+    id: "build-a-dex",
   },
   {
     challenge: "Challenge #5",
     title: "📺 A State Channel Application",
     description:
       "🛣️ The Ethereum blockchain has great decentralization & security properties but these properties come at a price: transaction throughput is low, and transactions can be expensive. This makes many traditional web applications infeasible on a blockchain... or does it? State channels look to solve these problems by allowing participants to securely transact off-chain while keeping interaction with Ethereum Mainnet at a minimum.",
     imageUrl: "/state.png",
-    id: "challenge-0-simple-nft",
+    id: "state-channel-application",
   },
   {
     challenge: "Challenge #6",
     title: "👛 Multisig Wallet Challenge",
     description:
       "🛣️ The Ethereum blockchain has great decentralization & security properties but these properties come at a price: transaction throughput is low, and transactions can be expensive. This makes many traditional web applications infeasible on a blockchain... or does it? State channels look to solve these problems by allowing participants to securely transact off-chain while keeping interaction with Ethereum Mainnet at a minimum.",
     imageUrl: "/multiSig.png",
-    id: "challenge-0-simple-nft",
+    id: "multisig-wallet-challenge",
   },
   {
     challenge: "Challenge #7",
@@ -64,7 +64,7 @@ const allChallenges = [
       "🧙 Tinker around with cutting edge smart contracts that render SVGs in Solidity. 🧫 We quickly discovered that the render function needs to be public... 🤔 This allows NFTs that own other NFTs to render their stash. Just wait until you see an Optimistic Loogie and a Fancy Loogie swimming around in the same Loogie Tank!",
     imageUrl: "/dynamicSvgNFT.png",
     border: false,
-    id: "challenge-0-simple-nft",
+    id: "svg-nft",
   },
 ];
 

packages/nextjs/tailwind.config.ts

@@ -60,14 +60,15 @@ module.exports = {
           primary: "#0C0C4F",
           "primary-content": "#212638",
           secondary: "#0C0C4F",
-          "secondary-content": "#E7F0FE",
+          "secondary-content": "#abc6f1",
           accent: "#93BBFB",
           "accent-content": "#212638",
           neutral: "#212638",
           "neutral-content": "#ffffff",
           "base-100": "#E7F0FE",
           "base-200": "#f4f8ff",
           "base-300": "#0C0C4F",
+          "base-400": "#E7F0FE",
           "base-content": "#212638",
           info: "#93BBFB",
           success: "#34EEB6",
@@ -98,8 +99,9 @@ module.exports = {
           neutral: "#F9FBFF",
           "neutral-content": "#385183",
           "base-100": "#1b2841",
-          "base-200": "#1c2d49",
+          "base-200": "#29385d",
           "base-300": "#E7F0FE",
+          "base-400": "#364a70",
           "base-content": "#F9FBFF",
           info: "#385183",
           success: "#34EEB6",