-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
201 lines (182 loc) · 7.2 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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flt withdraw</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
margin-top: 0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.button-wrapper {
margin-top: 20px;
text-align: center;
}
.input-group {
margin-bottom: 10px;
}
.input-group label {
display: block;
font-weight: bold;
}
.output {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Withdraw FLT</h1>
<div class="input-group">
<label for="account">Wallet Address:</label>
<span id="account" class="output"></span>
</div>
<div class="input-group">
<label for="fltBalance">FLT Balance:</label>
<span id="fltBalance" class="output"></span>
</div>
<div class="input-group">
<label for="lockTime">Lock Time (Based on the browser time zone):</label>
<span id="lockTime" class="output"></span>
</div>
<div class="button-wrapper">
<button id="connectButton">Connect</button>
<button id="withdrawButton" style="display: none;">Withdraw</button>
</div>
</div>
<script type="module">
import {ethers} from "https://cdnjs.cloudflare.com/ajax/libs/ethers/6.2.3/ethers.js";
async function getABI() {
const response = await fetch('fltDropABI.json');
const abi = await response.json();
return abi;
}
async function initEthereum() {
const ethereum = window.ethereum;
if (!ethereum) {
alert("Please install MetaMask or another Ethereum-compatible browser extension.");
return;
}
try {
await getChainId();
console.log("Ethereum initialized successfully.");
} catch (error) {
console.error("Error initializing Ethereum:", error);
alert("Error initializing Ethereum. Please make sure you have an Ethereum wallet installed and unlocked.");
}
}
async function getChainId() {
const chainId = ethereum.networkVersion;
if (chainId !== "1") {
try {
await ethereum.request({
method: "wallet_switchEthereumChain",
params: [{chainId: "0x1"}]
});
console.log("Switched to Ethereum Mainnet.");
} catch (error) {
console.error("Error switching Ethereum network:", error);
alert("Error switching to Ethereum Mainnet. Please switch manually.");
}
}
}
document.addEventListener('DOMContentLoaded', async () => {
const connectButton = document.querySelector('#connectButton');
const withdrawButton = document.querySelector('#withdrawButton');
const showAccount = document.querySelector('#account');
const showFltBalance = document.querySelector('#fltBalance');
const showLockTime = document.querySelector('#lockTime');
const fltDropAddress = '0x6081d7F04a8c31e929f25152d4ad37c83638C62b'; // flt-drop Contract
let lockedBalance = 0;
const fltDropAbi = await getABI();
connectButton.addEventListener('click', connectOnClick);
withdrawButton.addEventListener('click', withdrawOnClick);
async function connectOnClick() {
console.log("Connecting to wallet...");
try {
const provider = new ethers.BrowserProvider(window.ethereum);
await initEthereum();
const accounts = await provider.send("eth_requestAccounts", []);
const account = accounts[0];
showAccount.textContent = account.toString();
const contractFltDrop = new ethers.Contract(fltDropAddress, fltDropAbi, provider);
const fltBalance = await contractFltDrop.balanceOf(account);
console.log(`FLT balance: ${fltBalance}`);
lockedBalance = fltBalance;
showFltBalance.textContent = ethers.formatEther(fltBalance);
const lockedBalances = await contractFltDrop.lockedBalances(account);
console.log(`Lock Time: ${lockedBalances.unlockTime}`);
showLockTime.textContent = blockchainTimestampToDateTime(lockedBalances.unlockTime.toString());
if (lockedBalance > 0) {
connectButton.style.display = 'none';
withdrawButton.style.display = '';
} else {
alert("There are no FLT tokens available for withdrawal.");
}
} catch (error) {
console.error("Error connecting to wallet:", error);
alert("Error connecting to wallet. Please make sure you have an Ethereum wallet installed and unlocked.");
}
}
async function withdrawOnClick() {
console.log("Withdrawing FLT...");
try {
if (lockedBalance == 0) {
throw new Error('There are no FLT tokens available for withdrawal.');
}
const provider = new ethers.BrowserProvider(window.ethereum);
await initEthereum();
const signer = await provider.getSigner();
const accounts = await provider.send("eth_requestAccounts", []);
const account = accounts[0];
const contractFltDrop = new ethers.Contract(fltDropAddress, fltDropAbi, signer);
const tx = await contractFltDrop.transfer(account, lockedBalance);
await tx.wait();
alert("FLT tokens withdrawn successfully.");
} catch (error) {
console.error("Withdrawal error:", error.message);
alert("Withdrawal error: " + error.message);
}
}
});
function blockchainTimestampToDateTime(blockchainTimestamp) {
const date = new Date(blockchainTimestamp * 1000);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hours = ('0' + date.getHours()).slice(-2);
const minutes = ('0' + date.getMinutes()).slice(-2);
const seconds = ('0' + date.getSeconds()).slice(-2);
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>
</body>
</html>