Workshop

damianmarti · Aug 20, 2024 · e668b4a · e668b4a
1 parent 5b0646d
commit e668b4a
Show file tree

Hide file tree

Showing 4 changed files with 449 additions and 16 deletions.
diff --git a/packages/hardhat/contracts/YourContract.sol b/packages/hardhat/contracts/YourContract.sol
@@ -15,7 +15,8 @@ import "hardhat/console.sol";
 contract YourContract {
 	// State Variables
 	address public immutable owner;
-	string public greeting = "Building Unstoppable Apps!!!";
+	address public delegate;
+	string public greeting = "Aleph!!!";
 	bool public premium = false;
 	uint256 public totalCounter = 0;
 	mapping(address => uint) public userGreetingCounter;
@@ -42,6 +43,10 @@ contract YourContract {
 		_;
 	}
 
+	function setDelegate(address _delegate) public isOwner {
+		delegate = _delegate;
+	}
+
 	/**
 	 * Function that allows anyone to change the state variable "greeting" of the contract and increase the counters
 	 *

diff --git a/packages/hardhat/deploy/00_deploy_your_contract.ts b/packages/hardhat/deploy/00_deploy_your_contract.ts
@@ -25,7 +25,7 @@ const deployYourContract: DeployFunction = async function (hre: HardhatRuntimeEn
   await deploy("YourContract", {
     from: deployer,
     // Contract constructor arguments
-    args: [deployer],
+    args: ["0xB6b6457311c278a31ADA0244f329AdEFC2c0DeDC"],
     log: true,
     // autoMine: can be passed to the deploy function to make the deployment process faster on local networks by
     // automatically mining the contract deployment transaction. There is no effect on live networks.

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,13 +1,51 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import type { NextPage } from "next";
+import { parseEther } from "viem";
 import { useAccount } from "wagmi";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { Address } from "~~/components/scaffold-eth";
+import { Address, AddressInput, EtherInput } from "~~/components/scaffold-eth";
+import { useScaffoldEventHistory, useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 
 const Home: NextPage = () => {
   const { address: connectedAddress } = useAccount();
+  const [newMessage, setNewMessage] = useState<string>("");
+  const [newValue, setNewValue] = useState<string>("");
+  const [newDelegate, setNewDelegate] = useState<string>("");
+
+  const { data: greeting } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "greeting",
+  });
+
+  const { data: delegate } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "delegate",
+  });
+
+  const { data: counterByAddress } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "userGreetingCounter",
+    args: [connectedAddress],
+  });
+
+  const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("YourContract");
+
+  const {
+    data: events,
+    isLoading: isLoadingEvents,
+    error: errorReadingEvents,
+  } = useScaffoldEventHistory({
+    contractName: "YourContract",
+    eventName: "GreetingChange",
+    fromBlock: 1n,
+    watch: true,
+    blockData: true,
+    transactionData: true,
+    receiptData: true,
+  });
 
   return (
     <>
@@ -21,21 +59,68 @@ const Home: NextPage = () => {
             <p className="my-2 font-medium">Connected Address:</p>
             <Address address={connectedAddress} />
           </div>
+          <p className="text-center text-lg">{greeting}</p>
+          <p className="text-center text-lg">Counter by address: {counterByAddress?.toString()}</p>
+          <p className="text-center text-lg">
+            <EtherInput value={newValue} onChange={setNewValue} />
+            <input
+              type="text"
+              placeholder="The value to set"
+              value={newMessage}
+              onChange={e => setNewMessage(e.target.value)}
+            />
+            <button
+              className="btn btn-primary"
+              onClick={async () => {
+                try {
+                  await writeYourContractAsync({
+                    functionName: "setGreeting",
+                    args: [newMessage],
+                    value: parseEther(newValue),
+                  });
+                } catch (e) {
+                  console.error("Error setting greeting:", e);
+                }
+              }}
+            >
+              Set Greeting
+            </button>
+          </p>
+          <p className="text-center text-lg">
+            Delegate:
+            <Address address={delegate} />
+          </p>
           <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/app/page.tsx
-            </code>
+            <AddressInput onChange={setNewDelegate} value={newDelegate} placeholder="Input your address" />
+            <button
+              className="btn btn-primary"
+              onClick={async () => {
+                try {
+                  await writeYourContractAsync({
+                    functionName: "setDelegate",
+                    args: [newDelegate],
+                  });
+                } catch (e) {
+                  console.error("Error delegating:", e);
+                }
+              }}
+            >
+              Set Delegate
+            </button>
           </p>
           <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.sol
-            </code>{" "}
-            in{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/hardhat/contracts
-            </code>
+            Events
+            {isLoadingEvents && <span>Loading...</span>}
+            {errorReadingEvents && <span>Error: {errorReadingEvents.message}</span>}
+            {events && (
+              <ul>
+                {events.map((event, i) => (
+                  <li key={i}>
+                    <Address address={event.args.greetingSetter} /> - {event.args.newGreeting}
+                  </li>
+                ))}
+              </ul>
+            )}
           </p>
         </div>