dapp/index.html at main · ablejose/dapp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>

        <style>
          body {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
          }

          div {
            width: 20%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
          }

          button {
            width: 100%;
            margin: 10px 0px 5px 0px;
          }
        </style>
  </head>
  <body>
        <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>


  <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";

        //code in the above block

//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
//Make sure the MoodContractAddress is in double single/double quotes
const MoodContractAddress = "0xB68df60078dd5f7Ef9cB0977AC6E77dB7f739F65";
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"
	}
]
//pre-existing code

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

//space for remaining code

getMood= async function() {
//since getMood in our contract is a read function, your wallet won't pop up
          const mood = await MoodContractInstance.read.getMood();
          document.getElementById("showMood").innerText = `Your Mood: ${mood}`;
        }

setMood= async function() {
          const mood = document.getElementById("mood").value;
//setMood in our contract is a write function so your wallet will pop up and will ask you to confirm your transaction, requiring some gas fees.
          await MoodContractInstance.write.setMood([mood],{
            account:address
          });
        }

</script>

</html>