update challenge view

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

@@ -0,0 +1,32 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { useParams } from "next/navigation";
+
+const PageView: React.FC = () => {
+  const { id } = useParams();
+
+  const [markdown, setMarkdown] = useState<string>();
+
+  useEffect(() => {
+    const getMarkdown = async () => {
+      const response = await fetch(
+        `https://raw.githubusercontent.com/scaffold-eth/se-2-challenges/${id}/README.md`,
+      );
+      const markdownData = await response.text();
+      setMarkdown(markdownData);
+    };
+
+    getMarkdown();
+  }, []);
+  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>
+    </div>
+  );
+};
+
+export default PageView;

packages/nextjs/app/page.tsx

@@ -5,7 +5,11 @@ import Image from "next/image";
 import StepInstruction from "~~/components/StepInstruction/StepInstruction";
 import ChallengeCard from "~~/components/ChallengeCard/ChallengeCard";
 import { firstChallenges, lastChallenges } from "~~/data-challenges/challenges";
+import { useRouter } from "next/navigation";
+
 const Home: NextPage = () => {
+  const router = useRouter();
+
   return (
     <div>
       <div className="w-full flex items-center justify-center flex-col bg-landing gap-10 bg-base-100 text-primary sm:gap-3 ">
@@ -48,15 +52,15 @@ const Home: NextPage = () => {
       </div>
       <div className="w-full flex justify-center text-lg flex-col items-center text-primary ">
         <div className="w-full px-[20px] flex justify-center flex-col items-center sm:pr-[35px]">
-          {firstChallenges.slice(0, 3).map((challenge, index) => (
+          {firstChallenges.slice(0, 3).map((challenge) => (
             <ChallengeCard
-              key={index}
+              key={challenge.id}
               challenge={challenge.challenge}
               title={challenge.title}
               description={challenge.description}
               imageUrl={challenge.imageUrl}
               buttonText="QUEST"
-              onButtonClick={() => {}}
+              onButtonClick={() => router.push(`/challenge/${challenge.id}`)}
               end={challenge.end || false}
               border={challenge.border !== undefined ? challenge.border : true}
             />
@@ -86,15 +90,15 @@ const Home: NextPage = () => {
           </div>
         </div>
         <div className="w-full px-[20px] flex justify-center flex-col items-center">
-          {lastChallenges.slice(1).map((challenge, index) => (
+          {lastChallenges.slice(1).map((challenge) => (
             <ChallengeCard
-              key={index}
+              key={challenge.id}
               challenge={challenge.challenge}
               title={challenge.title}
               description={challenge.description}
               imageUrl={challenge.imageUrl}
               buttonText="LOCK"
-              onButtonClick={() => {}}
+              onButtonClick={() => router.push(`/challenge/${challenge.id}`)}
               end={challenge.end || false}
               border={challenge.border !== undefined ? challenge.border : true}
             />

packages/nextjs/data-challenges/challenges.ts

@@ -6,13 +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: "challenge-0-simple-nft",
   },
   {
     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",
   },
   {
     challenge: "Challenge #2",
@@ -21,34 +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",
   },
   {
     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",
   },
   {
     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",
   },
   {
     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",
   },
   {
     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",
   },
   {
     challenge: "Challenge #7",
@@ -57,6 +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",
   },
 ];
 

packages/nextjs/hooks/scaffold-stark/useTargetNetwork.ts

@@ -27,7 +27,7 @@ export function useTargetNetwork(): { targetNetwork: ChainWithAttributes } {
   return {
     targetNetwork: {
       ...targetNetwork,
-      //   ...NETWORKS_EXTRA_DATA[targetNetwork.id],
+      //   ...NETWORKS_EXTRA_DATA[targetNetwork.page.tsx],
     },
   };
 }

packages/nextjs/package.json

@@ -31,6 +31,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
+    "react-markdown": "^9.0.1",
     "starknet": "5.25.0",
     "starknet-dev": "npm:[email protected]",
     "type-fest": "^4.6.0",