Skip to content

Commit

Permalink
Update Challenge-token-vendor last Version Scaffold Stark
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nadai2010
Nadai2010 committed Aug 10, 2024
1 parent 80f3d15 commit 69d11d0
Show file tree
Hide file tree
Showing 23 changed files with 1,598 additions and 244 deletions.
120 changes: 120 additions & 0 deletions packages/nextjs/app/events/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
"use client";

import type { NextPage } from "next";
import { Address } from "~~/components/scaffold-stark/Address";
import { useScaffoldEventHistory } from "~~/hooks/scaffold-stark/useScaffoldEventHistory";
import { formatEther } from "ethers";

const Events: NextPage = () => {
const { data: buyTokenEvents, isLoading: isBuyEventsLoading } =
useScaffoldEventHistory({
contractName: "Vendor",
eventName: "contracts::Vendor::Vendor::BuyTokens",
fromBlock: 0n,
});

const { data: sellTokenEvents, isLoading: isSellEventsLoading } =
useScaffoldEventHistory({
contractName: "Vendor",
eventName: "contracts::Vendor::Vendor::SellTokens",
fromBlock: 0n,
});

return (
<div className="flex items-center flex-col flex-grow pt-10">
<div>
<div className="text-center mb-4">
<span className="block text-2xl font-bold">Buy Token Events</span>
</div>
{isBuyEventsLoading ? (
<div className="flex justify-center items-center mt-8">
<span className="loading loading-spinner loading-lg"></span>
</div>
) : (
<div className="overflow-x-auto shadow-lg">
<table className="table table-zebra w-full">
<thead>
<tr>
<th className="bg-secondary text-white">Buyer</th>
<th className="bg-secondary text-white">Amount of ETH</th>
<th className="bg-secondary text-white">Amount of Tokens</th>
</tr>
</thead>
<tbody>
{!buyTokenEvents || buyTokenEvents.length === 0 ? (
<tr>
<td colSpan={3} className="text-center">
No events found
</td>
</tr>
) : (
buyTokenEvents?.map((event, index) => {
return (
<tr key={index}>
<td className="text-center">
<Address address={event.args.buyer} />
</td>
<td>{formatEther(event.args.eth_amount).toString()}</td>
<td>
{formatEther(event.args.tokens_amount).toString()}
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
)}
</div>

<div className="mt-14">
<div className="text-center mb-4">
<span className="block text-2xl font-bold">Sell Token Events</span>
</div>
{isSellEventsLoading ? (
<div className="flex justify-center items-center mt-8">
<span className="loading loading-spinner loading-lg"></span>
</div>
) : (
<div className="overflow-x-auto shadow-lg">
<table className="table table-zebra w-full">
<thead>
<tr>
<th className="bg-secondary text-white">Seller</th>
<th className="bg-secondary text-white">Amount of ETH</th>
<th className="bg-secondary text-white">Amount of Tokens</th>
</tr>
</thead>
<tbody>
{!sellTokenEvents || sellTokenEvents.length === 0 ? (
<tr>
<td colSpan={3} className="text-center">
No events found
</td>
</tr>
) : (
sellTokenEvents?.map((event, index) => {
return (
<tr key={index}>
<td className="text-center">
<Address address={event.args.seller} />
</td>
<td>{formatEther(event.args.eth_amount).toString()}</td>
<td>
{formatEther(event.args.tokens_amount).toString()}
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
)}
</div>
</div>
);
};

export default Events;
7 changes: 5 additions & 2 deletions packages/nextjs/app/layout.tsx
View file
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
106 changes: 37 additions & 69 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,56 @@
"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-stark";
import { useAccount } from "@starknet-react/core";
import { Address as AddressType } from "@starknet-react/chains";
import Image from "next/image";
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">
<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>
<div className="px-5 w-[90%] md:w-[75%]">
<h1 className="text-center mb-6">
<span className="block text-2xl mb-2">SpeedRunStark</span>
<span className="block text-4xl font-bold">
Challenge #2: 🏵 Token Vendor 🤖
</span>
</h1>
<div className="flex justify-center items-center space-x-2">
<p className="my-2 font-medium text-[#00A3FF]">
Connected Address:
</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.
<div className="flex flex-col items-center justify-center">
<Image
src="/hero2.png"
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">
🤖 Smart contracts are kind of like &quot;always on&quot;
vending machines that anyone can access. Let&apos;s make a
decentralized, digital currency. Then, let&apos;s build an
unstoppable vending machine that will buy and sell the currency.
We&apos;ll learn about the &quot;approve&quot; pattern for
ERC20s and how contract to contract interactions work.
</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 className="text-center text-lg">
🌟 The final deliverable is an app that lets users purchase your
ERC20 token, transfer it, and sell it back to the vendor. Deploy
your contracts on your public chain of choice and then deploy
your app to a public webserver. Submit the url on{" "}
<a
href="https://www.speedrunstark.com/"
target="_blank"
rel="noreferrer"
className="underline"
>
SpeedrunStark.com
</a>{" "}
!
</p>
</div>
</div>
</div>
{/* <div
onClick={() => {
writeAsync();
}}
>
TEST TX
</div> */}
</div>
</>
);
Expand Down
Loading

0 comments on commit 69d11d0

Please sign in to comment.