index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LearnWeb3 First dApp</title>
  </head>
  <body>
    <body>
      <script>
        //here we are just declaring two variables. We will be assigning them their respective values in the next script
        var getMood
        var setMood
      </script>

      <script type="module">
        //A Wallet Client is an interface to interact with Ethereum Accounts.
        //The createWalletClient function sets up a Wallet Client with a given medium.
        import {
          createWalletClient,
          custom,
          getContract,
        } from "https://esm.sh/viem";
        import { sepolia } from "https://esm.sh/viem/chains";

        //create a client that connects the user's account to Ethereum Sepolia
        const walletClient = createWalletClient({
          chain: sepolia,
          transport: custom(window.ethereum),
        });

        // this will make your wallet extension show you a pop-up requesting you to connect your wallet
        // accounts will be an array
        const accounts = await walletClient.requestAddresses();

        //get the first address in the accounts array
        const [address] = accounts;


        // Replace the following two values
        const MoodContractAddress = "0x6bfdb5ff147e677afac15a0601528baf99f0aa23";
        const MoodContractABI = [
          {
            inputs: [
              {
                internalType: "string",
                name: "_mood",
                type: "string",
              },
            ],
            name: "setMood",
            outputs: [],
            stateMutability: "nonpayable",
            type: "function",
          },
          {
            inputs: [],
            name: "getMood",
            outputs: [
              {
                internalType: "string",
                name: "",
                type: "string",
              },
            ],
            stateMutability: "view",
            type: "function",
          },
        ];

        const MoodContractInstance = getContract({
          address: MoodContractAddress,
          abi: MoodContractABI,
          client: walletClient,
        });


        getMood= async function() {
          const mood = await MoodContractInstance.read.getMood();
          document.getElementById("showMood").innerText = `Your Mood: ${mood}`;
        }

        setMood= async function() {
          const mood = document.getElementById("mood").value;
          await MoodContractInstance.write.setMood([mood],{
            account:address
          });
        }
      </script>


      <div>
        <h1>This is my dApp!</h1>
        <p>Here we can set or get the mood:</p>
        <label for="mood">Input Mood:</label> <br />
        <input type="text" id="mood" />

        <button onclick="getMood()">Get Mood</button>
        <button onclick="setMood()">Set Mood</button>
        <p id="showMood"></p>
      </div>
    </body>
  </body>
</html>