-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
175 lines (145 loc) · 9.72 KB
/
index.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlockPad-Save your public data permanently on the blockchain</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col text-end">
<span id="networkName"></span>
<br>
<span id="accountAddress"></span>
<button id="installMetamaskBtn" class="btn btn-primary d-none">Install Metamask</button>
</div>
</div>
<h1>BlockPad</h1>
<h5>Save your public data permanently on the Ethereum Classic blockchain with Meatamask</h5>
<div class="mb-3">
<label for="hintInput" class="form-label">Hint:</label>
<input type="text" class="form-control" id="hintInput" placeholder="Enter hint">
</div>
<div class="mb-3">
<label for="storeTextInput" class="form-label">StoreText:</label>
<input type="text" class="form-control" id="storeTextInput" placeholder="Enter store text">
</div>
<button type="button" class="btn btn-primary" onclick="addData()">Add Data <span id="addSpinner"
class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></button>
<button type="button" class="btn btn-success" onclick="searchData()">Search by hint <span id="searchSpinner"
class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></button>
<!--
<button type="button" class="btn btn-info" onclick="LatestData()">Recent <span id="latestSpinner"
class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></button>
-->
<div id="output" class="mt-3"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
// Initialize Web3.js
// Initialize Web3.js
// Check if MetaMask is installed
if (typeof window.ethereum === 'undefined') {
document.getElementById('installMetamaskBtn').classList.remove('d-none');
document.getElementById('installMetamaskBtn').addEventListener('click', () => {
window.open('https://metamask.io', '_blank');
});
}else{
window.web3 = new Web3(window.ethereum);
try {
// Request account access if needed
await window.ethereum.request({ method: 'eth_requestAccounts' });
const networkId = await web3.eth.net.getId();
console.log("networkId:",networkId)
if (networkId ==1) {
document.getElementById('networkName').innerText = "ETC";
}else{
document.getElementById('networkName').innerText = "Current network is not Ethereum Classic.";
return
}
const accounts = await window.ethereum.request({ method: 'eth_accounts' });
const accountAddress = accounts[0];
document.getElementById('accountAddress').innerText = accountAddress;
} catch (error) {
console.error('User denied account access or network error:', error);
}
}
//etc:0xA02923959f586c1a8DFe969Fa2977403628cE367
//fantom:0x8d58070A4A43C9e74B7D847658139aB0B7Fd6D99
// Contract address and ABI
const contractAddress = '0xA02923959f586c1a8DFe969Fa2977403628cE367';
const contractABI = [{"inputs":[{"internalType":"string","name":"_Hint","type":"string"},{"internalType":"string","name":"_StoreText","type":"string"}],"name":"addData","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_feeAmount","type":"uint256"}],"name":"setFeeAmount","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address payable","name":"_receiver","type":"address"}],"name":"TransferETH","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address payable","name":"_receiver","type":"address"},{"internalType":"address","name":"TokenAddress","type":"address"}],"name":"TransferToken","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"stateMutability":"payable","type":"fallback"},{"stateMutability":"payable","type":"receive"},{"inputs":[],"name":"contractOwner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"feeAmount","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"_value","type":"string"}],"name":"searchData","outputs":[{"internalType":"string","name":"","type":"string"},{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"structArray","outputs":[{"internalType":"string","name":"Hint","type":"string"},{"internalType":"string","name":"StoreText","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"structArrayLength","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"}]
// Create contract instance
const contract = new web3.eth.Contract(contractABI, contractAddress);
// Function to add data
window.addData = async () => {
document.getElementById('addSpinner').classList.remove('d-none'); // Show spinner
const hint = document.getElementById('hintInput').value;
const storeText = document.getElementById('storeTextInput').value;
// Calculate the amount in Wei
const amountInEther = 0.02;
const amountInWei = web3.utils.toWei(amountInEther.toString(), 'ether');
try {
const accounts = await window.ethereum.request({ method: 'eth_accounts' });
const account = accounts[0];
const gas = await contract.methods.addData(hint, storeText).estimateGas({ from: account, value: amountInWei });
const tx = await contract.methods.addData(hint, storeText).send({ from: account, gas, value: amountInWei });
console.log('Transaction hash:', tx.transactionHash);
document.getElementById('output').innerText = 'Data added successfully';
} catch (error) {
console.error('Error adding data:', error);
document.getElementById('output').innerText = 'Error adding data,maybe this record exist.';
} finally {
document.getElementById('addSpinner').classList.add('d-none'); // Hide spinner after operation
}
};
// Function to search data
window.searchData = async () => {
document.getElementById('searchSpinner').classList.remove('d-none'); // Show spinner
const searchValue = document.getElementById('hintInput').value; // Use hint input for search value
try {
const result = await contract.methods.searchData(searchValue).call();
const hint = result[0];
const storeText = result[1];
//document.getElementById('output').innerText = `Hint: ${hint}\nStore Text: ${storeText}`;
document.getElementById('output').innerText = `Hint: ${hint}\nStore Text: ${storeText}`;
} catch (error) {
console.error('Error searching data:', error);
document.getElementById('output').innerText = 'Data not found';
} finally {
document.getElementById('searchSpinner').classList.add('d-none'); // Hide spinner after operation
}
};
// Function to search data
window.LatestData = async () => {
try {
const structCount = await contract.methods.structArrayLength().call(); // Assuming a function to get array length
const startIndex = structCount > 3 ? structCount - 3 : 0; // Calculate start index to fetch last 3 elements
const results = await Promise.all([
contract.methods.structArray(startIndex).call(),
contract.methods.structArray(startIndex + 1).call(),
contract.methods.structArray(startIndex + 2).call(),
]);
let output = '';
results.forEach((result, index) => {
const hint = result.Hint;
const storeText = result.StoreText;
//output += `Hint ${startIndex + index + 1}: ${hint}, StoreText: ${storeText}\n`;
output += `${hint}:${storeText}\n`;
});
document.getElementById('output').innerText = output;
} catch (error) {
console.error('Error fetching data:', error);
document.getElementById('output').innerText = 'Error fetching data';
}
};
LatestData()
});
</script>
</body>
</html>