Skip to content

Commit

Permalink
Update Challenge-decentralized-staking last Version Scaffold Stark
Browse files Browse the repository at this point in the history
  • Loading branch information
Nadai2010 committed Aug 11, 2024
1 parent 80f3d15 commit d7da0c3
Show file tree
Hide file tree
Showing 28 changed files with 1,954 additions and 492 deletions.
282 changes: 179 additions & 103 deletions README.md

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions packages/nextjs/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,20 @@ 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: "Scaffold-Stark",
title: "Speedrun Stark",
description: "Fast track your starknet journey",
icons: "/logo.ico",
};

const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
return (
<html suppressHydrationWarning>
<body>
<body className={spaceGrotesk.className}>
<ThemeProvider enableSystem>
<ScaffoldStarkAppWithProviders>
{children}
Expand Down
117 changes: 41 additions & 76 deletions packages/nextjs/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,90 +1,55 @@
"use client";

import Link from "next/link";
import Image from "next/image";
import type { NextPage } from "next";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { Address } from "~~/components/scaffold-stark";
import { useAccount } from "@starknet-react/core";
import { Address as AddressType } from "@starknet-react/chains";
import Image from "next/image";

const Home: NextPage = () => {
const connectedAddress = useAccount();

return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center">
<span className="block text-2xl mb-2">Welcome to</span>
<span className="block text-4xl font-bold">Scaffold-Stark 2</span>
</h1>
<div className="flex justify-center items-center space-x-2">
<p className="my-2 font-medium text-[#00A3FF]">
Connected Address:
<div className="flex items-center flex-col flex-grow pt-10 bg-">
<div className="px-5 w-[90%] md:w-[75%]">
<h1 className="text-center mb-6 text-neutral">
<span className="block text-2xl mb-2 text-neutral">
SpeedRunStark
</span>
<span className="block text-4xl font-bold text-neutral">
Challenge #1: 🔏 Decentralized Staking App
</span>
</h1>
<div className="flex flex-col items-center justify-center">
<Image
src="/banner-home.svg"
width="727"
height="231"
alt="challenge banner"
className="rounded-xl border-4 border-primary"
/>
<div className="max-w-3xl ">
<p className="text-center text-lg mt-8 text-neutral">
🦸 A superpower of Starknet 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.
</p>
<p className="text-center text-lg text-neutral">
🌟 The final deliverable is deploying a Dapp that lets users send
ether to a contract and stake if the conditions are met, then
deploy your app to a public webserver. Submit the url on{" "}
<a
href="https://speedrunstark.com/"
target="_blank"
rel="noreferrer"
className="underline text-neutral font-bold"
>
SpeedRunStark.com
</a>
!
</p>
<Address address={connectedAddress.address as AddressType} />
</div>
<p className="text-center text-lg">
Get started by editing{" "}
<code className="bg-underline italic text-base font-bold max-w-full break-words break-all inline-block">
packages/nextjs/app/page.tsx
</code>
</p>
<p className="text-center text-lg">
Edit your smart contract{" "}
<code className="bg-underline italic text-base font-bold max-w-full break-words break-all inline-block">
YourContract.cairo
</code>{" "}
in{" "}
<code className="bg-underline italic text-base font-bold max-w-full break-words break-all inline-block">
packages/snfoundry/contracts/src
</code>
</p>
</div>

<div className="bg-container flex-grow w-full mt-16 px-8 py-12">
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
<div className="flex flex-col bg-base-100 relative text-[12px] px-10 py-10 text-center items-center max-w-xs rounded-3xl border border-gradient">
<div className="trapeze"></div>
<Image
src="/debug-icon.svg"
alt="icon"
width={25}
height={25}
></Image>
<p>
Tinker with your smart contract using the{" "}
<Link href="/debug" passHref className="link">
Debug Contracts
</Link>{" "}
tab.
</p>
</div>
<div className="flex flex-col bg-base-100 relative text-[12px] px-10 py-10 text-center items-center max-w-xs rounded-3xl border border-gradient">
<div className="trapeze"></div>
<Image
src="/explorer-icon.svg"
alt="icon"
width={20}
height={20}
></Image>
<p>
Play around with Multiwrite transactions using
useScaffoldMultiWrite() hook
</p>
</div>
</div>
</div>
{/* <div
onClick={() => {
writeAsync();
}}
>
TEST TX
</div> */}
</div>
</>
</div>
);
};

Expand Down
18 changes: 18 additions & 0 deletions packages/nextjs/app/stake-ui/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
"use client";

import type { NextPage } from "next";
import { StakeContractInteraction } from "~~/components/stake/StakeContractInteraction";
import { useDeployedContractInfo } from "~~/hooks/scaffold-stark";

const StakerUI: NextPage = () => {
const { data: StakerContract } = useDeployedContractInfo("Staker");

return (
<StakeContractInteraction
key={StakerContract?.address}
address={StakerContract?.address}
/>
);
};

export default StakerUI;
76 changes: 76 additions & 0 deletions packages/nextjs/app/stakings/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
"use client";
import React from "react";
import { NextPage } from "next";
import { useScaffoldEventHistory } from "~~/hooks/scaffold-stark/useScaffoldEventHistory";
import { Address } from "~~/components/scaffold-stark";
import { formatEther } from "ethers";

interface StakeEvent {
args: {
sender: string;
amount: bigint;
};
}
const Staking: NextPage = () => {
// @ts-ignore
const { data: stakeEvents, isLoading } = useScaffoldEventHistory<StakeEvent>({
contractName: "Staker",
eventName: "contracts::Staker::Staker::Stake",
watch: true,
fromBlock: 0n,
});
console.log(stakeEvents);

if (isLoading)
return (
<div className="flex justify-center items-center mt-10">
<span className="loading loading-spinner loading-lg"></span>
</div>
);

return (
<div className="flex items-center flex-col flex-grow pt-10 text-neutral">
<div className="px-5">
<h1 className="text-center mb-3">
<span className="block text-2xl font-bold">All Staking Events</span>
</h1>
</div>
<div className="overflow-x-auto border border-secondary">
<table className="table table-zebra w-full">
<thead>
<tr>
<th className="bg-secondary text-white">From</th>
<th className="bg-secondary text-white">Value</th>
</tr>
</thead>
<tbody>
{!stakeEvents || stakeEvents.length === 0 ? (
<tr>
<td colSpan={3} className="text-center">
No events found
</td>
</tr>
) : (
stakeEvents?.map((event: StakeEvent, index) => {
return (
<tr key={index}>
<td>
<Address address={`0x${event.args.sender}`} />
</td>
<td>
{event.args.amount &&
formatEther(BigInt(event.args.amount))}{" "}
ETH
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
</div>
);
};

export default Staking;
26 changes: 26 additions & 0 deletions packages/nextjs/components/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React, { ReactNode } from "react";

interface ButtonProps {
onClick: () => void;
children: ReactNode;
isDisable?: boolean;
}

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

export default Button;
12 changes: 12 additions & 0 deletions packages/nextjs/components/ButtonStyle/ButtonStyle.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.base_button__small {
padding-block: 14px;
padding-inline: 24px;
border-radius: 7px;
}

.base_button__large {
width: 490px;
padding: 16px 33px;
border: none;
border-radius: 8px;
}
19 changes: 19 additions & 0 deletions packages/nextjs/components/ButtonStyle/ButtonStyle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
interface ButtonProps {
children: string;
size?: "small" | "large";
onClick?: () => void;
}

const ButtonStyle = ({ children, size = "small", onClick }: ButtonProps) => {
const isSmall = size === "small";
return (
<button
onClick={onClick}
className={`btn btn-secondary my-4 base_button__${isSmall ? "small" : "large"}`}
>
{children}
</button>
);
};

export default ButtonStyle;
17 changes: 16 additions & 1 deletion packages/nextjs/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ import React, { useCallback, useRef, useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
import {
Bars3Icon,
BugAntIcon,
CircleStackIcon,
InboxStackIcon,
} from "@heroicons/react/24/outline";
import { useOutsideClick } from "~~/hooks/scaffold-stark";
import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
import { useTheme } from "next-themes";
Expand All @@ -24,6 +29,16 @@ export const menuLinks: HeaderMenuLink[] = [
label: "Home",
href: "/",
},
{
label: "Staker UI",
href: "/stake-ui",
icon: <CircleStackIcon className="h-4 w-4" />,
},
{
label: "Stake Events",
href: "/stakings",
icon: <InboxStackIcon className="h-4 w-4" />,
},
{
label: "Debug Contracts",
href: "/debug",
Expand Down
Loading

0 comments on commit d7da0c3

Please sign in to comment.