257 lines
No EOL
9.1 KiB
HTML
257 lines
No EOL
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>⇋ BMEther-E-HUF Swap</title>
|
|
<!-- CSS only -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
<!-- JavaScript Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
|
crossorigin="anonymous"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.6.1/web3.min.js"
|
|
integrity="sha512-5erpERW8MxcHDF7Xea9eBQPiRtxbse70pFcaHJuOhdEBQeAxGQjUwgJbuBDWve+xP/u5IoJbKjyJk50qCnMD7A=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<div class="container">
|
|
<h1>⇋ BMEther-E-HUF Swap</h1>
|
|
<div id="loginForm">
|
|
<form>
|
|
<div class="mb-3">
|
|
<h3>Login</h3>
|
|
<label for="address" class="form-label">Address</label>
|
|
<input type="text" class="form-control" id="address" aria-describedby="address" disabled>
|
|
<div id="loginHelp" class="form-text">Connect your metamask wallet to swap founds ⇋</div>
|
|
</div>
|
|
</form>
|
|
<div class="mb-3">
|
|
<button class="col mx-2 btn btn-primary enableEthereumButton">Enable Ethereum</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3" id="etherToToken" style="display: none;">
|
|
<form>
|
|
<div class="mb-3">
|
|
<h3>Swap BMEther to E-HUF</h3>
|
|
<label for="amount" class="form-label">BMEther Amount</label>
|
|
<input type="number" class="form-control" id="toToken" aria-describedby="amount" value="0">
|
|
<div id="loginHelp" class="form-text">The amount of BMEther you want to swap for E-HUF ⇋</div>
|
|
<label for="tokenAmount1" class="form-label">E-HUF Amount</label>
|
|
<input type="number" class="form-control" id="tokenAmount1" aria-describedby="tokenAmount" disabled>
|
|
<div id="loginHelp" class="form-text">The amount of E-HUF you will receive after the swap</div>
|
|
</div>
|
|
</form>
|
|
<div class="mb-3">
|
|
<button class="col mx-2 btn btn-success" id="buyToken">Buy tokens</button>
|
|
</div>
|
|
<form>
|
|
<div class="mb-3">
|
|
<h3>Swap E-HUF to BMEther</h3>
|
|
<label for="amount" class="form-label">E-HUF Amount</label>
|
|
<input type="number" class="form-control" id="toEther" aria-describedby="amount" value="0">
|
|
<div id="loginHelp" class="form-text">The amount of E-HUF you want to swap for BMEther ⇋</div>
|
|
<label for="tokenAmount2" class="form-label">BMEther Amount</label>
|
|
<input type="number" class="form-control" id="tokenAmount2" aria-describedby="tokenAmount" disabled>
|
|
<div id="loginHelp" class="form-text">The amount of BMEther you will receive after the swap</div>
|
|
</div>
|
|
</form>
|
|
<div class="mb-3">
|
|
<button class="col mx-2 btn btn-primary" id="approveToken" disabled>Approve</button>
|
|
<button class="col mx-2 btn btn-danger" id="sellToken" disabled>Sell token</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="swap.js"></script>
|
|
<script>
|
|
if (typeof window.ethereum !== 'undefined') {
|
|
console.log('MetaMask is installed!');
|
|
}
|
|
|
|
let contract;
|
|
let tokenContract;
|
|
var web3;
|
|
let accounts = [];
|
|
|
|
const ethereumButton = document.querySelector('.enableEthereumButton');
|
|
const toToken = document.querySelector('#toToken');
|
|
const tokenAmount1 = document.querySelector('#tokenAmount1');
|
|
const buyButton = document.querySelector('#buyToken');
|
|
const toEther = document.querySelector('#toEther');
|
|
const tokenAmount2 = document.querySelector('#tokenAmount2');
|
|
const approveButton = document.querySelector('#approveToken');
|
|
const sellButton = document.querySelector('#sellToken');
|
|
|
|
|
|
|
|
|
|
|
|
ethereumButton.addEventListener('click', () => {
|
|
getAccount();
|
|
});
|
|
|
|
buyButton.addEventListener('click', () => {
|
|
updateTokenPrice1();
|
|
buyToken();
|
|
});
|
|
|
|
approveButton.addEventListener('click', () => {
|
|
updateTokenPrice2();
|
|
approveSwap();
|
|
});
|
|
|
|
sellButton.addEventListener('click', () => {
|
|
updateTokenPrice2();
|
|
sellToken();
|
|
});
|
|
|
|
|
|
async function approveSwap() {
|
|
let sellAmount = toEther.value;
|
|
if (isNumeric(sellAmount)) {
|
|
accounts = await ethereum.request({ method: 'eth_requestAccounts' });
|
|
document.getElementById("address").value = accounts[0];
|
|
let allowed = new web3.utils.BN(await tokenContract.methods.allowance(accounts[0], ContractAddress).call());
|
|
let sellWei = new web3.utils.BN(await web3.utils.toWei(sellAmount, 'ether'));
|
|
if (allowed.lt(sellWei)) {
|
|
sellButton.disabled = true;
|
|
await tokenContract.methods.approve(ContractAddress, sellWei).send({ from: accounts[0] });
|
|
} else {
|
|
sellButton.disabled = false;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
async function buyToken() {
|
|
let buyAmount = toToken.value;
|
|
if (isNumeric(buyAmount)) {
|
|
let price = await contract.methods.getPrice().call();
|
|
let priceDivider = await contract.methods.getPriceDivider().call();
|
|
accounts = await ethereum.request({ method: 'eth_requestAccounts' });
|
|
document.getElementById("address").value = accounts[0];
|
|
|
|
await contract.methods.buyToken().send({ from: accounts[0], value: buyAmount * 10 ** 18 });
|
|
}
|
|
}
|
|
|
|
|
|
async function sellToken() {
|
|
let sellAmount = toEther.value;
|
|
console.log(sellAmount);
|
|
if (isNumeric(sellAmount)) {
|
|
let price = await contract.methods.getPrice().call();
|
|
let priceDivider = await contract.methods.getPriceDivider().call();
|
|
accounts = await ethereum.request({ method: 'eth_requestAccounts' });
|
|
document.getElementById("address").value = accounts[0];
|
|
|
|
let allowed = new web3.utils.BN(await tokenContract.methods.allowance(accounts[0], ContractAddress).call());
|
|
let sellWei = new web3.utils.BN(await web3.utils.toWei(sellAmount, 'ether'));
|
|
if (allowed.gte(sellWei)) {
|
|
await contract.methods.sellTokens(sellWei).send({ from: accounts[0] });
|
|
} else {
|
|
sellButton.disabled = true;
|
|
}
|
|
} else {
|
|
sellButton.disabled = true;
|
|
approveButton.disabled = true;
|
|
}
|
|
}
|
|
|
|
toToken.addEventListener('change', () => {
|
|
updateTokenPrice1();
|
|
})
|
|
|
|
toEther.addEventListener('change', () => {
|
|
updateTokenPrice2();
|
|
})
|
|
|
|
|
|
|
|
|
|
async function getAccount() {
|
|
await registerTestnet();
|
|
accounts = await ethereum.request({ method: 'eth_requestAccounts' });
|
|
document.getElementById("address").value = accounts[0];
|
|
hideLogin();
|
|
showSwap();
|
|
if(contract == undefined){
|
|
initContracts();
|
|
}
|
|
}
|
|
|
|
async function updateTokenPrice1() {
|
|
if (isNumeric(toToken.value)) {
|
|
buyButton.disabled = false;
|
|
} else {
|
|
buyButton.disabled = true;
|
|
}
|
|
let price = await contract.methods.getPrice().call();
|
|
let priceDivider = await contract.methods.getPriceDivider().call();
|
|
tokenAmount1.value = toToken.value * price / priceDivider;
|
|
}
|
|
|
|
async function updateTokenPrice2() {
|
|
if (isNumeric(toEther.value)) {
|
|
approveButton.disabled = false;
|
|
let price = await contract.methods.getPrice().call();
|
|
let priceDivider = await contract.methods.getPriceDivider().call();
|
|
let sellAmountEther = toEther.value / price * priceDivider * 10 ** 18;
|
|
accounts = await ethereum.request({ method: 'eth_requestAccounts' });
|
|
document.getElementById("address").value = accounts[0];
|
|
let allowed = await tokenContract.methods.allowance(accounts[0], ContractAddress);
|
|
tokenAmount2.value = toEther.value / price * priceDivider;
|
|
sellButton.disabled = allowed < web3.utils.toWei(toEther.value,'ether');
|
|
} else {
|
|
approveButton.disabled = true;
|
|
sellButton.disabled = true;
|
|
}
|
|
}
|
|
|
|
function showLogin() {
|
|
document.querySelector("#loginForm").style.display = 'block';
|
|
}
|
|
|
|
function hideLogin() {
|
|
document.querySelector("#loginForm").style.display = 'none';
|
|
}
|
|
|
|
function showSwap() {
|
|
document.querySelector("#etherToToken").style.display = 'block';
|
|
}
|
|
|
|
function hideSwap() {
|
|
document.querySelector("#etherToToken").style.display = 'none';
|
|
}
|
|
|
|
function initContracts() {
|
|
contract = new web3.eth.Contract(ContractABI, ContractAddress);
|
|
tokenContract = new web3.eth.Contract(ERC20ABI, tokenAddress);
|
|
}
|
|
|
|
window.addEventListener("load", function () {
|
|
if (typeof web3 !== "undefined") {
|
|
web3 = new Web3(web3.currentProvider);
|
|
//console.log(web3);
|
|
initContracts();
|
|
web3.eth.getAccounts().then(account => {
|
|
console.log(account);
|
|
document.getElementById("address").value = account[0];
|
|
hideLogin();
|
|
showSwap();
|
|
});
|
|
|
|
} else {
|
|
console.log("No web3? You should consider trying MetaMask!");
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |