Integrated MetaMask into the UI elements

frontend
ProMate04 2022-12-07 00:36:25 +01:00
parent 90a40a0be9
commit 425b6ae6dd
2 changed files with 53 additions and 4 deletions

View File

@ -20,7 +20,7 @@
<li><a href="sendflag.html">Send Flag</a></li> <li><a href="sendflag.html">Send Flag</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</a></li> <li><button class="btn btn-default navbar-btn" id="metamask-login" type="button" style="margin-right:20px"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</button></li>
<!--<button class="btn btn-danger navbar-btn">Button</button>--> <!--<button class="btn btn-danger navbar-btn">Button</button>-->
</ul> </ul>
</div> </div>
@ -56,5 +56,30 @@
</table> </table>
</div> </div>
<script type='module'>
window.addEventListener("load", function () {
let loginbutton = document.getElementById('metamask-login');
let accounts;
ethereum.request({method: 'eth_requestAccounts'}).then(accounts => {
console.log(accounts);
if (accounts.length > 0) {
loginbutton.textContent = accounts[0];
loginbutton.disabled = true;
}
});
});
loginbutton.addEventListener('click', event => {
let account;
ethereum.request({method: 'eth_requestAccounts'}).then(accounts =>{
account = accounts[0];
//alert(account);
console.log(account);
loginbutton.textContent = account;
loginbutton.disabled = true;
})
})
</script>
</body> </body>
</html> </html>

View File

@ -22,7 +22,7 @@
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</a></li> <li><button class="btn btn-default navbar-btn" id="metamask-login" type="button" style="margin-right:20px"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</button></li>
<!--<button class="btn btn-danger navbar-btn">Button</button>--> <!--<button class="btn btn-danger navbar-btn">Button</button>-->
</ul> </ul>
</div> </div>
@ -30,16 +30,40 @@
<div class="container" style="margin-top:50px"> <div class="container" style="margin-top:50px">
<h1>Send the flag</h1> <h1>Send the flag</h1>
<form class="form-inline"> <form class="form-inline" id="flag-form" style="display:none">
<div class="form-group"> <div class="form-group">
<label for="flagbox">Flag:</label> <label for="flagbox">Flag:</label>
<input type="text" class="form-control" id="flagbox"> <input type="text" class="form-control" id="flagbox">
</div> </div>
<button type="button" class="btn btn-default" id="submitFlagBtn">Submit Flag</button> <button id="submitFlagBtn" type="button" class="btn btn-default">Submit Flag</button>
</form> </form>
</div> </div>
<script type='module'>
window.addEventListener("load", function () {
let loginbutton = document.getElementById('metamask-login');
let accounts;
ethereum.request({method: 'eth_requestAccounts'}).then(accounts => {
console.log(accounts);
if (accounts.length > 0) {
document.getElementById('flag-form').style.display = "block";
loginbutton.textContent = accounts[0];
loginbutton.disabled = true;
}
});
});
let loginbutton = document.getElementById('metamask-login');
loginbutton.addEventListener('click', event => {
let account;
ethereum.request({method: 'eth_requestAccounts'}).then(accounts =>{
account = accounts[0];
document.getElementById('flag-form').style.display = "block";
loginbutton.textContent = account;
loginbutton.disabled = true;
})
})
</script>
</body> </body>
</html> </html>