diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index 7d2ad434d..fde2770ff 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -2,6 +2,9 @@ import type { Metadata } from "next"; import { ScaffoldStarkAppWithProviders } from "~~/components/ScaffoldStarkAppWithProviders"; import "~~/styles/globals.css"; import { ThemeProvider } from "~~/components/ThemeProvider"; +import { Space_Grotesk } from "next/font/google"; + +const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Starknet Speedrun", @@ -11,7 +14,7 @@ export const metadata: Metadata = { const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => { return ( - + {children} diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 107066a33..ec3dd1b25 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -1,88 +1,107 @@ "use client"; -import Link from "next/link"; import type { NextPage } from "next"; -import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; -// import { Address } from "~~/components/scaffold-eth"; - +import Image from "next/image"; +import StepInstruction from "~~/components/StepInstruction/StepInstruction"; +import ChallengeCard from "~~/components/ChallengeCard/ChallengeCard"; +import { firstChallenges, lastChallenges } from "~~/data-challenges/challenges"; const Home: NextPage = () => { - // const { data } = useScaffoldContractRead({ - // contractName: "HelloStarknet", - // functionName: "get_balance6", - // }); - - // console.log(data); - - // const { writeAsync } = useScaffoldContractWrite({ - // contractName: "HelloStarknet", - // functionName: "increase_balance", - // args: [1], - // }); - - // console.log(data, isLoading); return ( - <> -
-
-

- Welcome to - Scaffold-Stark 2 -

-
-

Connected Address:

- {/*
*/} +
+
+
+
+ {"icon + + Learn how to build on Starknet; the superpowers and the gotchas. + +

+ SPEEDRUN STARKNET +

+
+
+ + + +
-

- Get started by editing{" "} - - packages/nextjs/app/page.tsx - -

-

- Edit your smart contract{" "} - - YourContract.sol - {" "} - in{" "} - - packages/hardhat/contracts - -

+
+
+
+
+
+ {firstChallenges.slice(0, 3).map((challenge, index) => ( + {}} + end={challenge.end || false} + border={challenge.border !== undefined ? challenge.border : true} + /> + ))}
-
-
-
- -

- Tinker with your smart contract using the{" "} - - Debug Contracts - {" "} - tab. -

-
-
- -

- Explore your local transactions with the{" "} - - Block Explorer - {" "} - tab. -

+
+
+
+
+ + JOiN BUiLDGUiLD + +
+
+
+ + 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 + other builders. Start crafting your Web3 portfolio by + submitting your DEX, Multisig or SVG NFT build. + +
+
- {/*
{ - writeAsync(); - }} - > - TEST TX -
*/} +
+ {lastChallenges.slice(1).map((challenge, index) => ( + {}} + end={challenge.end || false} + border={challenge.border !== undefined ? challenge.border : true} + /> + ))} +
- +
); }; diff --git a/packages/nextjs/components/Button/Button.tsx b/packages/nextjs/components/Button/Button.tsx new file mode 100644 index 000000000..2cc0c7e54 --- /dev/null +++ b/packages/nextjs/components/Button/Button.tsx @@ -0,0 +1,20 @@ +import React, { ReactNode } from "react"; + +interface ButtonProps { + onClick: () => void; + children: ReactNode; +} + +const Button: React.FC = ({ onClick, children }) => { + return ( + + ); +}; + +export default Button; diff --git a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx new file mode 100644 index 000000000..322eaa4e5 --- /dev/null +++ b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import Image from "next/image"; +import Button from "~~/components/Button/Button"; + +interface ChallengeCardProps { + challenge: string; + title: string; + description: string; + imageUrl: string; + buttonText: string; + onButtonClick: () => void; + border?: boolean; + end?: boolean; +} + +const ChallengeCard: React.FC = ({ + challenge, + title, + imageUrl, + buttonText, + onButtonClick, + description, + border = true, + end = false, +}) => { + return ( +
+
+
+
+
+
+
+
+ {challenge} +

{title}

+

{description}

+
+ +
+
+
+ image challenge +
+
+
+ ); +}; + +export default ChallengeCard; diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index b8eab224e..c37e68abc 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -1,19 +1,15 @@ import React from "react"; -import Link from "next/link"; -// import { devnet } from "viem/chains"; -import { - CurrencyDollarIcon, - MagnifyingGlassIcon, -} from "@heroicons/react/24/outline"; import { HeartIcon } from "@heroicons/react/24/outline"; import { SwitchTheme } from "~~/components/SwitchTheme"; import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo"; import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork"; import { useGlobalState } from "~~/services/store/store"; import { devnet } from "@starknet-react/chains"; -// import { Faucet } from "~~/components/scaffold-eth"; -// import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; -// import { useGlobalState } from "~~/services/store/store"; +import Link from "next/link"; +import { + CurrencyDollarIcon, + MagnifyingGlassIcon, +} from "@heroicons/react/24/outline"; /** * Site footer @@ -26,7 +22,7 @@ export const Footer = () => { const isLocalNetwork = targetNetwork.id === devnet.id; return ( -
+
@@ -44,7 +40,7 @@ export const Footer = () => { Block Explorer @@ -59,9 +55,9 @@ export const Footer = () => { />
-
-