Skip to content

Commit

Permalink
Feat: Add ch-2
Browse files Browse the repository at this point in the history
  • Loading branch information
gianalarcon committed Jul 27, 2024
1 parent b83a327 commit db029a8
Show file tree
Hide file tree
Showing 39 changed files with 1,645 additions and 179 deletions.
Empty file added packages/nextjs/.env
Empty file.
2 changes: 2 additions & 0 deletions packages/nextjs/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,5 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts

yarn.lock
2 changes: 1 addition & 1 deletion packages/nextjs/app/debug/_components/DebugContracts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function DebugContracts() {
}, [selectedContract, setSelectedContract]);

return (
<div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
<div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center text-primary">
{contractNames.length === 0 ? (
<p className="text-3xl mt-14">No contracts found!</p>
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ export const ContractInput = ({
<div className="flex flex-col gap-1.5 w-full">
<div className="flex items-center ml-2">
{paramType.name && (
<span className="text-xs font-medium mr-2 leading-none">
<span className="text-xs font-medium mr-2 leading-none text-neutral">
{paramType.name}
</span>
)}
<span className="block text-xs font-extralight leading-none">
<span className="block text-xs font-extralight leading-none text-neutral">
{displayType(paramType.type)}
</span>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const ContractReadMethods = ({
};
});
if (!functionsToDisplay.length) {
return <>No read methods</>;
return <span className="text-neutral">No read methods</span>;
}
return (
<>
Expand Down
12 changes: 7 additions & 5 deletions packages/nextjs/app/debug/_components/contract/ContractUI.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const ContractUI = ({

if (!deployedContractData) {
return (
<p className="text-3xl mt-14">
<p className="text-3xl mt-14 text-neutral">
{`No contract found by the name of "${contractName}" on chain "${targetNetwork.name}"!`}
</p>
);
Expand All @@ -59,7 +59,9 @@ export const ContractUI = ({
<span className="font-bold text-neutral">{contractName}</span>
<Address address={deployedContractData.address} />
<div className="flex gap-1 items-center">
<span className="font-bold text-sm">Balance:</span>
<span className="font-bold text-sm text-neutral">
Balance:
</span>
<Balance
address={deployedContractData.address}
className="px-0 h-1.5 min-h-[0.375rem] text-network"
Expand All @@ -69,7 +71,7 @@ export const ContractUI = ({
</div>
{targetNetwork && (
<p className="my-0 text-sm">
<span className="font-bold">Network</span>:{" "}
<span className="font-bold text-neutral">Network</span>:{" "}
<span className="text-network">{targetNetwork.name}</span>
</p>
)}
Expand All @@ -86,7 +88,7 @@ export const ContractUI = ({
<div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
<div className="bg-function w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] clip-corner">
<div className="flex items-center justify-center space-x-2">
<p className="my-0 text-sm text-center">Read</p>
<p className="my-0 text-sm text-center text-neutral">Read</p>
</div>
</div>
<div className="p-5 divide-y divide-secondary">
Expand All @@ -100,7 +102,7 @@ export const ContractUI = ({
<div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
<div className="w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] bg-function clip-corner">
<div className="flex items-center justify-center space-x-2">
<p className="my-0 text-sm">Write</p>
<p className="my-0 text-sm text-neutral">Write</p>
</div>
</div>
<div className="p-5 divide-y divide-secondary">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const ContractVariables = ({
};
});
if (!functionsToDisplay.length) {
return <>No contract variables</>;
return <span className="text-neutral">No contract variables</span>;
}

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const DisplayVariable = ({
{abiFunction.name}
</h3>
<button
className="btn btn-ghost btn-xs"
className="btn btn-ghost btn-xs text-neutral"
onClick={async () => await refetch()}
>
{!isLoading && isFetching ? (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export const WriteOnlyFunctionForm = ({
{inputs}
<div className="flex justify-between gap-2">
{!zeroInputs && (
<div className="flex-grow basis-0">
<div className="flex-grow basis-0 text-neutral-content">
{displayedTxResult ? (
<TxReceipt txResult={displayedTxResult} />
) : null}
Expand Down
15 changes: 0 additions & 15 deletions packages/nextjs/app/exampleView1/page.tsx

This file was deleted.

49 changes: 44 additions & 5 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 "@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={`0x${event.args.sender}`} />
</td>
<td>
{event.args.amount &&
formatEther(BigInt(event.args.amount))}{" "}
ETH
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
</div>
);
};

export default Staking;
2 changes: 1 addition & 1 deletion packages/nextjs/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Button: React.FC<ButtonProps> = ({
}) => {
return (
<button
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"}`}
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"}
Expand Down
47 changes: 42 additions & 5 deletions packages/nextjs/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@ 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,
InboxStackIcon,
} from "@heroicons/react/24/outline";
import { useOutsideClick } from "~~/hooks/scaffold-stark";
import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
import { useTheme } from "next-themes";
import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
import { devnet } from "@starknet-react/chains";
import { SwitchTheme } from "./SwitchTheme";
import { useAccount, useProvider } from "@starknet-react/core";

export type HeaderMenuLink = {
label: string;
Expand All @@ -20,9 +26,18 @@ export 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",
Expand All @@ -39,6 +54,7 @@ export const HeaderMenuLinks = () => {
useEffect(() => {
setIsDark(theme === "dark");
}, [theme]);

return (
<>
{menuLinks.map(({ label, href, icon }) => {
Expand Down Expand Up @@ -77,6 +93,23 @@ export const Header = () => {
);
const { targetNetwork } = useTargetNetwork();
const isLocalNetwork = targetNetwork.id === devnet.id;
const { provider } = useProvider();
const { address, status } = useAccount();
const [isDeployed, setIsDeployed] = useState(true);

useEffect(() => {
if (status === "connected" && address) {
provider
.getContractVersion(address)
.then((v) => {
if (v) setIsDeployed(true);
})
.catch((e) => {
console.log(e);
setIsDeployed(false);
});
}
}, [status, address, provider]);

return (
<div className="sticky lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
Expand Down Expand Up @@ -128,8 +161,12 @@ export const Header = () => {
</ul>
</div>
<div className="navbar-end flex-grow mr-4 gap-4">
{status === "connected" && !isDeployed ? (
<span className="bg-[#8a45fc] text-[9px] p-1 text-white">
Wallet Not Deployed
</span>
) : null}
<CustomConnectButton />
{/* <FaucetButton /> */}
<SwitchTheme
className={`pointer-events-auto ${
isLocalNetwork ? "self-end md:self-auto" : ""
Expand Down
Loading

0 comments on commit db029a8

Please sign in to comment.