update stakings

README.md

@@ -25,9 +25,9 @@ Before you begin, you need to install the following tools:
 Then download the challenge to your computer and install dependencies by running:
 
 ```sh
-git clone https://github.com/scaffold-eth/se-2-challenges.git challenge-1-decentralized-staking
-cd challenge-1-decentralized-staking
-git checkout challenge-1-decentralized-staking
+git clone https://github.com/scaffold-eth/se-2-challenges.git challenge-1-decentralized-stakings
+cd challenge-1-decentralized-stakings
+git checkout challenge-1-decentralized-stakings
 yarn install
 ```
 
@@ -40,14 +40,14 @@ yarn chain
 > in a second terminal window, 🛰 deploy your contract (locally):
 
 ```sh
-cd challenge-1-decentralized-staking
+cd challenge-1-decentralized-stakings
 yarn deploy
 ```
 
 > in a third terminal window, start your 📱 frontend:
 
 ```sh
-cd challenge-1-decentralized-staking
+cd challenge-1-decentralized-stakings
 yarn start
 ```
 

packages/nextjs/app/page.tsx

@@ -40,7 +40,7 @@ const Home: NextPage = () => {
                 className="underline text-primary font-bold"
               >
                 SpeedRunStark.com
-              </a>{" "}
+              </a>
               !
             </p>
           </div>

packages/nextjs/app/stakings/page.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+interface StakeEvent {
+  args: [string, string];
+}
+
+interface StakingsProps {
+  stakeEvents: StakeEvent[] | undefined;
+  isLoading: boolean;
+}
+
+const Stakings: React.FC<StakingsProps> = ({ stakeEvents, isLoading }) => {
+  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">
+      <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 shadow-lg">
+        <table className="table table-zebra w-full">
+          <thead>
+            <tr>
+              <th className="bg-primary text-base-100">From</th>
+              <th className="bg-primary text-base-100">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {!stakeEvents || stakeEvents.length === 0 ? (
+              <tr>
+                <td colSpan={2} className="text-center">
+                  No events found
+                </td>
+              </tr>
+            ) : (
+              stakeEvents.map((event, index) => (
+                <tr key={index}>
+                  <td>{event.args[0]}</td>
+                  <td>{event.args[1] && event.args[1]} ETH</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Stakings;

packages/nextjs/components/stake/StakeContractInteraction.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAccount } from "@starknet-react/core";
+import { useAccount, useBalance } from "@starknet-react/core";
 import { useDeployedContractInfo } from "~~/hooks/scaffold-stark";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-stark/useScaffoldContractRead";
@@ -11,7 +11,9 @@ import { Address } from "~~/components/scaffold-stark";
 export const StakeContractInteraction = ({ address }: { address?: string }) => {
   const { address: connectedAddress } = useAccount();
   const { data: StakerContract } = useDeployedContractInfo("Challenge1");
-
+  const { data: balanceData } = useBalance({
+    address,
+  });
   const { targetNetwork } = useTargetNetwork();
 
   // Contract Read Actions
@@ -31,7 +33,12 @@ export const StakeContractInteraction = ({ address }: { address?: string }) => {
     functionName: "completed",
     watch: true,
   });
-
+  // const { data: myStake } = useScaffoldContractRead({
+  //   contractName: "Challenge1",
+  //   functionName: "balances",
+  //   args: [],
+  //   watch: true,
+  // });
   // Contract Write Actions
   // const { writeAsync: stakeETH } = useScaffoldContractWrite({
   //     contractName: "Challenge1",
@@ -70,7 +77,7 @@ export const StakeContractInteraction = ({ address }: { address?: string }) => {
           <p className="block text-2xl mt-0 mb-2 font-semibold">
             Staker Contract
           </p>
-          <Address address={address} size="xl" />
+          <Address address={connectedAddress} size="xl" />
         </div>
         <div className="flex items-start justify-around w-full">
           <div className="flex flex-col items-center justify-center w-1/2">
@@ -82,7 +89,8 @@ export const StakeContractInteraction = ({ address }: { address?: string }) => {
           <div className="flex flex-col items-center w-1/2">
             <p className="block text-xl mt-0 mb-1 font-semibold">You Staked</p>
             <span>
-              {0} {targetNetwork.nativeCurrency.symbol}
+              {balanceData ? balanceData.formatted : 0}{" "}
+              {targetNetwork.nativeCurrency.symbol}
             </span>
           </div>
         </div>

packages/nextjs/data-challenges/challenges.ts

@@ -14,7 +14,7 @@ const allChallenges = [
     description:
       "🦸 A superpower of Ethereum 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.",
     imageUrl: "/stakingToken.png",
-    id: "decentralized-staking",
+    id: "decentralized-stakings",
   },
   {
     challenge: "Challenge #2",