first-dapp-test/index.html at main · mwanjeronie/first-dapp-test · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Web App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1><button id="connect-wallet">Connect Wallet</button>
          <p style="font-size: x-small;">push and pull data from</p>
          <p style="font-size: 50%;">Lisk Sepolia Testnet</p></h1>

        <input type="text" id="inputField" placeholder="Enter text here to be pushed to the blockchain">
        <button id="button1">push data</button>
        <button id="button2">pull data</button>
        <div id="output" style="border: 2px solid #4CAF50; padding: 15px; margin-top: 20px; background-color: #e8f5e9; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
            <p style="color: #888;">pulled data will be displayed here...</p>
        </div>

        <!-- Script tag with type module -->
        <script type="module">
            // Import necessary modules
            import {
                createWalletClient,
                custom,
                getContract,
            } from "https://esm.sh/viem";
            import { liskSepolia } from "https://esm.sh/viem/chains";

            // Variables
            let WalletClient;
            let address;
            let DataContractInstance;

            // Connect wallet button event listener
            document.getElementById('connect-wallet').addEventListener('click', async () => {
                // Create wallet client
                WalletClient = createWalletClient({
                    chain: liskSepolia,
                    transport: custom(window.ethereum),
                });

                // Request addresses
                const accounts = await WalletClient.requestAddresses();

                // Get first address in array
                [address] = accounts;

                console.log('Connected to wallet:', address);

                // Accessing the Data contract address.
                const DataContractAddress = "0xB881f24928128dd69B5878c8292C211695b0B90B";
                const DataContractAbi = [
	{
		"inputs": [
			{
				"internalType": "string",
				"name": "_data",
				"type": "string"
			}
		],
		"name": "setData",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "getData",
		"outputs": [
			{
				"internalType": "string",
				"name": "",
				"type": "string"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
]
;

                // Get contract instance
                DataContractInstance = getContract({
                    address: DataContractAddress,
                    abi: DataContractAbi,
                    client: WalletClient,
                });
            });

            // Push data button event listener
            document.getElementById('button1').addEventListener('click', async () => {
                if (!DataContractInstance) return console.log('Please connect your wallet first');

                const data = document.getElementById("inputField").value;

 　 　 　 　 　　// setData
 　 　 　 　 　　await DataContractInstance.write.setData([data], { account: address });
 　 　 　 　　console.log("Data has been pushed");
　 　 　 　 });

　 　 　 　　// Pull data button event listener
　 　 　 　　document.getElementById('button2').addEventListener('click', async () => {
　 　 　 　 　 if (!DataContractInstance) return console.log('Please connect your wallet first');

　 　 　 　 　　const data = await DataContractInstance.read.getData();
　 　 　 　　   document.getElementById("output").innerText = `Your pulled data is : ${data}`;
　 　 　 　　});
　 　 　 </script>

　 　 　 <!-- End of container div -->
　 　 　 </div>

　 　 　 <!-- End of body -->
　 　 　 </body>

　 　 　 <!-- End of html -->
　 　 　 </html>