-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
181 lines (166 loc) · 7.06 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
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parking Token DApp</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> <!-- Load Web3.js -->
</head>
<body>
<div class="container">
<h1>Parking Token DApp</h1>
<div>
<h2>Purchase Tokens</h2>
<input type="text" id="purchaseAmount" placeholder="Amount in Ether">
<button id="purchaseButton">Purchase Tokens</button>
</div>
<div>
<h2>Redeem Tokens for NFT</h2>
<input type="text" id="redeemAmount" placeholder="Amount of tokens">
<button id="redeemButton">Redeem Tokens</button>
</div>
<div>
<h2>Scan Parking Spot</h2>
<input type="text" id="nftId" placeholder="NFT ID">
<button id="scanButton">Scan Parking Spot</button>
</div>
<div>
<h2>Sell NFT</h2>
<input type="text" id="sellNftId" placeholder="NFT ID">
<input type="text" id="sellTo" placeholder="Recipient Address">
<input type="text" id="sellPrice" placeholder="Sale Price in Tokens">
<button id="sellButton">Sell NFT</button>
</div>
<div>
<h2>Transfer Tokens</h2>
<input type="text" id="transferTo" placeholder="Recipient Address">
<input type="text" id="transferAmount" placeholder="Amount to Transfer">
<input type="text" id="exchangeRate" placeholder="Exchange Rate">
<button id="transferButton">Transfer Tokens</button>
</div>
<div>
<h2>Owner Withdraw Funds</h2>
<button id="withdrawButton">Withdraw Ether</button>
</div>
<div id="message"></div>
</div>
<script>
const contractAddress = 'YOUR_CONTRACT_ADDRESS_HERE'; // Replace with your contract address
const abi = [
// Place the ABI of your smart contract here
{
"inputs": [],
"name": "purchaseTokens",
"outputs": [],
"stateMutability": "payable",
"type": "function"
},
{
"inputs": ["uint256"],
"name": "redeemTokensForNFT",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": ["uint256"],
"name": "scanParkingSpot",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": ["uint256", "address", "uint256"],
"name": "sellNFT",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": ["address", "uint256", "uint256"],
"name": "transferTokens",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "withdrawFunds",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
];
const web3 = new Web3(Web3.givenProvider || "http://localhost:8545"); // Connect to Ethereum
const contract = new web3.eth.Contract(abi, contractAddress);
document.getElementById('purchaseButton').onclick = async () => {
const amount = document.getElementById('purchaseAmount').value;
const accounts = await web3.eth.getAccounts();
const value = web3.utils.toWei(amount, 'ether');
try {
await contract.methods.purchaseTokens().send({ from: accounts[0], value: value });
showMessage("Tokens purchased successfully!");
} catch (error) {
showMessage("Error purchasing tokens: " + error.message);
}
};
document.getElementById('redeemButton').onclick = async () => {
const amount = document.getElementById('redeemAmount').value;
const accounts = await web3.eth.getAccounts();
try {
await contract.methods.redeemTokensForNFT(amount).send({ from: accounts[0] });
showMessage("Tokens redeemed for NFT successfully!");
} catch (error) {
showMessage("Error redeeming tokens: " + error.message);
}
};
document.getElementById('scanButton').onclick = async () => {
const nftId = document.getElementById('nftId').value;
const accounts = await web3.eth.getAccounts();
try {
await contract.methods.scanParkingSpot(nftId).send({ from: accounts[0] });
showMessage("Parking spot scanned successfully!");
} catch (error) {
showMessage("Error scanning parking spot: " + error.message);
}
};
document.getElementById('sellButton').onclick = async () => {
const nftId = document.getElementById('sellNftId').value;
const recipient = document.getElementById('sellTo').value;
const salePrice = document.getElementById('sellPrice').value;
const accounts = await web3.eth.getAccounts();
try {
await contract.methods.sellNFT(nftId, recipient, salePrice).send({ from: accounts[0] });
showMessage("NFT sold successfully!");
} catch (error) {
showMessage("Error selling NFT: " + error.message);
}
};
document.getElementById('transferButton').onclick = async () => {
const recipient = document.getElementById('transferTo').value;
const amount = document.getElementById('transferAmount').value;
const exchangeRate = document.getElementById('exchangeRate').value;
const accounts = await web3.eth.getAccounts();
try {
await contract.methods.transferTokens(recipient, amount, exchangeRate).send({ from: accounts[0] });
showMessage("Tokens transferred successfully!");
} catch (error) {
showMessage("Error transferring tokens: " + error.message);
}
};
document.getElementById('withdrawButton').onclick = async () => {
const accounts = await web3.eth.getAccounts();
try {
await contract.methods.withdrawFunds().send({ from: accounts[0] });
showMessage("Funds withdrawn successfully!");
} catch (error) {
showMessage("Error withdrawing funds: " + error.message);
}
};
function showMessage(message) {
document.getElementById('message').innerText = message;
}
</script>
</body>
</html>