first contact

copy_evm_deployments_to_frontend.sh

@@ -0,0 +1,5 @@
+rm "./frontend/src/evm-output/*"
+
+cp "./evm/ignition/deployments/chain-31337/deployed_addresses.json" "./frontend/src/evm-output/deployed_addresses.json"
+
+cp "./evm/ignition/deployments/chain-31337/artifacts/MessageBoxModule#MessageBox.json" "./frontend/src/evm-output/MessageBox.artifacts.json"

evm/contracts/MessageBox.sol

@@ -0,0 +1,27 @@
+// SPDX-License-Identifier: UNLICENSED
+pragma solidity ^0.8.24;
+
+contract MessageBox {
+    address public immutable owner;
+    string public message;
+
+    event MessageSet(string oldMessage, string newMessage, uint changedAt);
+
+    modifier onlyOwner() {
+        require(msg.sender == owner, "Only the owner can do that.");
+        _;
+    }
+
+    constructor(string memory _initialMessage) {
+        owner = msg.sender;
+        message = _initialMessage;
+    }
+
+    function getMessage() external view returns (string memory) {
+        return message;
+    }
+
+    function setMessage(string calldata _newMessage) external onlyOwner {
+        message = _newMessage;
+    }
+}

evm/ignition/modules/MessageBox.ts

@@ -0,0 +1,13 @@
+import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";
+
+const INITIAL_MESSAGE = "Hello OsiPad!";
+
+const MessageBoxModule = buildModule("MessageBoxModule", (m) => {
+	const initialMessage = m.getParameter("initialMessage", INITIAL_MESSAGE);
+
+	const messageBox = m.contract("MessageBox", [initialMessage]);
+
+	return { messageBox };
+});
+
+export default MessageBoxModule;

frontend/src/App.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
-import { web3 } from "./web3";
+import { messageBox, web3 } from "./web3";
 
 function App() {
 	const [connectedAccount, setConnectedAccount] = useState("");
+	const [message, setMessage] = useState("");
 
 	// https://docs.web3js.org/guides/getting_started/metamask/#react-app
 	async function connectMetamask() {
@@ -15,6 +16,9 @@ function App() {
 
 		// Show the first connected account in the page
 		setConnectedAccount(accounts[0]);
+
+		const _message: string = await messageBox.methods.getMessage().call();
+		setMessage(_message);
 	}
 
 	return (
@@ -35,6 +39,8 @@ function App() {
 
 				{/* Display the connected account */}
 				<h2>Connected account address: {connectedAccount}</h2>
+
+				<h2>Message: {message}</h2>
 			</div>
 		</main>
 	);

frontend/src/evm-output/deployed_addresses.json

@@ -0,0 +1,3 @@
+{
+  "MessageBoxModule#MessageBox": "0x5FbDB2315678afecb367f032d93F642f64180aa3"
+}

frontend/src/web3.ts

@@ -1,4 +1,6 @@
 import { Web3 } from "web3";
+import messageBoxArtifacts from "./evm-output/MessageBox.artifacts.json";
+import deployedAddresses from "./evm-output/deployed_addresses.json";
 
 export let web3: Web3;
 
@@ -10,3 +12,8 @@ if (window.ethereum) {
 } else {
 	alert("ERROR: Please download MetaMask.");
 }
+
+export const messageBox = new web3!.eth.Contract(
+	messageBoxArtifacts.abi,
+	deployedAddresses["MessageBoxModule#MessageBox"]
+);