Skip to content

Commit

Permalink
Update ch1 with V3 release
Browse files Browse the repository at this point in the history
  • Loading branch information
Nadai2010 committed Sep 30, 2024
1 parent b4dc23f commit 27b6d70
Show file tree
Hide file tree
Showing 27 changed files with 1,651 additions and 313 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"prettier": "^3.2.5"
},
"dependencies": {
"humanize-duration": "^3.32.1",
"postcss": "^8.4.38"
}
}
15 changes: 0 additions & 15 deletions packages/nextjs/app/exampleView1/page.tsx

This file was deleted.

53 changes: 46 additions & 7 deletions packages/nextjs/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,55 @@
"use client";

import Image from "next/image";
import type { NextPage } from "next";
import { useAccount } from "~~/hooks/useAccount";
import { useAccount } from "@starknet-react/core";

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

return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5 w-[90%] md:w-[75%]"></div>
<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>
</div>
</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={event.args.sender as `0x${string}`} />
</td>
<td>
{event.args.amount &&
formatEther(BigInt(event.args.amount))}{" "}
ETH
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
</div>
);
};

export default Staking;
22 changes: 18 additions & 4 deletions packages/nextjs/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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, PhotoIcon } from "@heroicons/react/24/outline";
import { Bars3Icon, BugAntIcon, CircleStackIcon, Cog8ToothIcon, InboxStackIcon, PhotoIcon } 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 @@ -21,15 +21,29 @@ type HeaderMenuLink = {

export const menuLinks: HeaderMenuLink[] = [
{
label: "Example View 1",
href: "/exampleView1",
icon: <PhotoIcon className="h-4 w-4" />,
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",
icon: <BugAntIcon className="h-4 w-4" />,
},
{
label: "Configure Contracts",
href: "/configure",
icon: <Cog8ToothIcon className="h-4 w-4" />,
},
];

export const HeaderMenuLinks = () => {
Expand Down
52 changes: 52 additions & 0 deletions packages/nextjs/components/stake/ETHToPrice.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { useCallback, useState } from "react";
import { useGlobalState } from "~~/services/store/store";
import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";

type TBalanceProps = {
value?: string;
className?: string;
};

export const ETHToPrice = ({ value, className = "" }: TBalanceProps) => {
const [isEthBalance, setIsEthBalance] = useState(true);
const { targetNetwork } = useTargetNetwork();
const price = useGlobalState((state) => state.nativeCurrencyPrice);

const onToggleBalance = useCallback(() => {
if (price > 0) {
setIsEthBalance(!isEthBalance);
}
}, [isEthBalance, price]);

if (!value) {
return (
<div className="animate-pulse flex space-x-4">
<div className="flex items-center space-y-6">
<div className="h-5 w-12 bg-slate-300 rounded"></div>
</div>
</div>
);
}
return (
<button
className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
onClick={onToggleBalance}
>
<div className="w-full flex items-center justify-center">
{isEthBalance ? (
<>
<span>{parseFloat(value).toFixed(4)}</span>
<span className="text-xs font-bold ml-1">
{targetNetwork.nativeCurrency.symbol}
</span>
</>
) : (
<>
<span className="text-xs font-bold mr-1">$</span>
<span>{(parseFloat(value) * price).toFixed(2)}</span>
</>
)}
</div>
</button>
);
};
Loading

0 comments on commit 27b6d70

Please sign in to comment.