finalizing the repo
Showing
frontend/Shifting/Shift.html
0 → 100644
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Shift</title> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script> | ||
<link href="./mini.css" rel="stylesheet"> | ||
</head> | ||
<body><div id="main" class=""> | ||
<div class="min-h-screen bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 py-6 flex flex-col justify-center sm:py-12 text-white dark:bg-gradient-to-r dark:from-gray-800 dark:to-gray-900"> | ||
<div class="dark:bg-gray-800 dark:text-white w-full mx-auto rounded-3xl shadow-lg bg-white px-10 pt-16 pb-10 text-gray-600" style="max-width: 400px" x-data="app()"> | ||
<div class="overflow-hidden relative mb-10"> | ||
<div class="font-semibold text-center text-2xl mb-4 text-gray-900 dark:text-white">Shift</div> | ||
<div class="container mx-auto mb-1 pt-8"> | ||
<p class="mx-auto mb-3 text-purple-500 dark:text-pink-500">Amount</p> | ||
<input id="amount" class="dark:border-gray-800 focus:ring-2 dark:bg-gray-600 shadow appearance-none border rounded py-2 px-10 text-grey-darker"> | ||
</div> | ||
<div class="relative inline-flex mt-7"> | ||
<svg class="w-2 h-2 absolute top-0 right-0 m-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 232"><path d="M206 171.144L42.678 7.822c-9.763-9.763-25.592-9.763-35.355 0-9.763 9.764-9.763 25.592 0 35.355l181 181c4.88 4.882 11.279 7.323 17.677 7.323s12.796-2.441 17.678-7.322l181-181c9.763-9.764 9.763-25.592 0-35.355-9.763-9.763-25.592-9.763-35.355 0L206 171.144z" fill="#648299" fill-rule="nonzero"/></svg> | ||
<select id="aggregator1" class="dark:border-gray-800 focus:ring-2 dark:bg-gray-600 dark:text-white border border-gray-300 rounded text-gray-600 h-10 pl-20 pr-20 bg-white hover:border-gray-400 focus:outline-none appearance-none"> | ||
<option>Choose an asset</option> | ||
<option value="0xab4a352ac35dFE83221220D967Db41ee61A0DeFa" selected="">[XFT] Offshift</option><option value="0xECe365B379E1dD183B20fc5f022230C044d51404">[BTC] Bitcoin</option><option value="0x81570059A0cb83888f1459Ec66Aad1Ac16730243">[XAU] Gold</option><option value="0xd8bD0a1cB028a31AA859A21A3758685a95dE4623">[LINK] ChainLink</option></select> | ||
</select> | ||
</div> | ||
<div class="container text-center pt-5"> | ||
<h1>TO </h1> | ||
</div> | ||
<div class="relative inline-flex mt-7"> | ||
<svg class="w-2 h-2 absolute top-0 right-0 m-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 232"><path d="M206 171.144L42.678 7.822c-9.763-9.763-25.592-9.763-35.355 0-9.763 9.764-9.763 25.592 0 35.355l181 181c4.88 4.882 11.279 7.323 17.677 7.323s12.796-2.441 17.678-7.322l181-181c9.763-9.764 9.763-25.592 0-35.355-9.763-9.763-25.592-9.763-35.355 0L206 171.144z" fill="#648299" fill-rule="nonzero"/></svg> | ||
<select id="aggregator2" class="dark:border-gray-800 focus:ring-2 dark:bg-gray-600 dark:text-white border border-gray-300 rounded text-gray-600 h-10 pl-20 pr-20 bg-white hover:border-gray-400 focus:outline-none appearance-none"> | ||
<option>Choose an asset</optaion> | ||
<option value="0xab4a352ac35dFE83221220D967Db41ee61A0DeFa" selected="">[XFT] Offshift</option><option value="0xECe365B379E1dD183B20fc5f022230C044d51404">[BTC] Bitcoin</option><option value="0x81570059A0cb83888f1459Ec66Aad1Ac16730243">[XAU] Gold</option><option value="0xd8bD0a1cB028a31AA859A21A3758685a95dE4623">[LINK] ChainLink</option></select> | ||
</select> | ||
</div> | ||
<div> | ||
</div> | ||
<div class="container w-full pt-8"> | ||
<button onclick="approve()" class="dark:bg-gradient-to-r dark:from-purple-800 mb-auto px-7 py-3 shadow-md no-underline rounded-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 text-white font-sans font-semibold text-xl border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2">Approve</button> | ||
<button onclick="shifter()" class="dark:bg-gradient-to-r dark:from-purple-800 mb-auto px-11 py-3 md:ml-6 sm:ml-4 shadow-md no-underline rounded-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 text-white font-sans font-semibold text-xl border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2">Shift</button> | ||
</div> | ||
</div> | ||
<div class="absolute bottom-4 right-3"> | ||
<button id="mode" onclick="changeMode();" class="mb-auto px-3 py-2 shadow-md no-underline rounded-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 text-white font-sans font-semibold text-xs border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2 dark:bg-gradient-to-r dark:from-purple-800">switch theme</button> | ||
</div> | ||
</div> | ||
</div> | ||
</body> | ||
<script> | ||
ethereum.request({ method: 'eth_requestAccounts' }); | ||
web3 = new Web3(window.ethereum); | ||
web3.eth.getAccounts(async function(error, accounts) { | ||
web3.eth.accounts = accounts; | ||
web3.eth.defaultAccount = accounts[0]; | ||
}); | ||
let shift = new web3.eth.Contract([{ | ||
"inputs": [ | ||
{ | ||
"internalType": "address", | ||
"name": "_tokenA", | ||
"type": "address" | ||
}, | ||
{ | ||
"internalType": "address", | ||
"name": "_tokenB", | ||
"type": "address" | ||
} | ||
], | ||
"stateMutability": "nonpayable", | ||
"type": "constructor" | ||
}, | ||
{ | ||
"anonymous": false, | ||
"inputs": [ | ||
{ | ||
"indexed": false, | ||
"internalType": "uint256", | ||
"name": "value", | ||
"type": "uint256" | ||
} | ||
], | ||
"name": "Shifted", | ||
"type": "event" | ||
}, | ||
{ | ||
"inputs": [ | ||
{ | ||
"internalType": "uint256", | ||
"name": "amount", | ||
"type": "uint256" | ||
}, | ||
{ | ||
"internalType": "address", | ||
"name": "tA", | ||
"type": "address" | ||
}, | ||
{ | ||
"internalType": "address", | ||
"name": "tB", | ||
"type": "address" | ||
} | ||
], | ||
"name": "shift", | ||
"outputs": [], | ||
"stateMutability": "nonpayable", | ||
"type": "function" | ||
}], "0x6bE4C94052BF34e09d67C255D9Fe564c5abd4f95"); | ||
let tokenA = new web3.eth.Contract([{ | ||
"inputs": [], | ||
"stateMutability": "nonpayable", | ||
"type": "constructor" | ||
}, | ||
{ | ||
"inputs": [{ | ||
"internalType": "address", | ||
"name": "spender", | ||
"type": "address" | ||
}, | ||
{ | ||
"internalType": "uint256", | ||
"name": "amount", | ||
"type": "uint256" | ||
} | ||
], | ||
"name": "approve", | ||
"outputs": [{ | ||
"internalType": "bool", | ||
"name": "", | ||
"type": "bool" | ||
}], | ||
"stateMutability": "nonpayable", | ||
"type": "function" | ||
}, | ||
{ | ||
"inputs": [{ | ||
"internalType": "address", | ||
"name": "owner", | ||
"type": "address" | ||
}, | ||
{ | ||
"internalType": "address", | ||
"name": "spender", | ||
"type": "address" | ||
} | ||
], | ||
"name": "allowance", | ||
"outputs": [{ | ||
"internalType": "uint256", | ||
"name": "", | ||
"type": "uint256" | ||
}], | ||
"stateMutability": "view", | ||
"type": "function" | ||
} | ||
], "0x1190fb1B00D20656549cdFF689E55D072BA764f3"); | ||
async function approve() { | ||
let amount = document.getElementById("amount").value; | ||
amount = web3.utils.toWei(parseFloat(amount).toString(),'ether'); | ||
if (amount => 0) { | ||
let approvalAmount; | ||
tokenA.methods.allowance(ethereum.selectedAddress, shift._address).call({from: ethereum.selectedAddress}).then(data => approvalAmount = data); | ||
if (approvalAmount >= amount) { | ||
alert("already approved"); | ||
} else { | ||
tokenA.methods.approve(shift._address, amount).send({from: ethereum.selectedAddress}).then(); | ||
} | ||
} else { | ||
alert("input a number"); | ||
} | ||
} | ||
function shifter() { | ||
let amount = document.getElementById("amount").value; | ||
let A_aggregator = document.getElementById("aggregator2").value; | ||
let B_aggregator = document.getElementById("aggregator1").value; | ||
amount = web3.utils.toWei(parseFloat(amount).toString(),'ether'); | ||
if (amount > 0) { | ||
shift.methods.shift(amount, A_aggregator, B_aggregator).send({from: ethereum.selectedAddress}).then("amount shifted successfuly "); | ||
} | ||
} | ||
function changeMode() { | ||
document.getElementById("mode").innerText.replace("www") | ||
if (localStorage.theme != 'dark'){ | ||
localStorage.theme = 'dark'; | ||
document.getElementById("main").classList.add("dark"); | ||
document.getElementById("mode").textContent = "Dark mode"; | ||
}else { | ||
localStorage.theme = 'light'; | ||
document.getElementById("main").classList.remove("dark"); | ||
document.getElementById("mode").textContent = "Light mode"; | ||
} | ||
} | ||
changeMode(); | ||
</script> | ||
</html> | ||
\ No newline at end of file |
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<meta property="og:locale" content="en_US"> | ||
<meta property="og:type" content="website"> | ||
<meta property="og:title" content="Offshift"> | ||
<meta property="og:description" content="Anonymous alternative to | ||
centralized, fiat-backed stablecoins"> | ||
<meta property="og:url" content="https://offshift.io/"> | ||
<meta property="og:site_name" content="Offshift"> | ||
<meta property="article:modified_time" content="2020-08-11T09:10:25+00:00"> | ||
<meta property="og:image" content="https://offshift.io/wp-content/uploads/2020/07/Thumb.jpg"> | ||
<meta property="og:image:width" content="1200"> | ||
<meta property="og:image:height" content="630"> | ||
<title>Faucet</title> | ||
<link href="./mini.css" rel="stylesheet"> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script> | ||
</head> | ||
<body> | ||
<div id="main" class=""> | ||
<div class="dark:bg-gradient-to-r dark:from-gray-800 dark:to-gray-900 min-h-screen bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 py-6 flex flex-col justify-center sm:py-12 text-white"> | ||
<div class="dark:bg-gray-800 dark:text-white w-full mx-auto rounded-3xl shadow-lg bg-white px-10 pt-16 pb-10 text-gray-600" style="max-width: 400px" x-data="app()"> | ||
<div class="overflow-hidden relative mb-10"> | ||
<div class="font-semibold text-center text-2xl mb-4 text-gray-900 dark:text-white">TESTNET FAUCET</div> | ||
<div class="container w-full pt-8"> | ||
<button onclick="faucet();" class="dark:bg-gradient-to-r dark:from-purple-800 ml-12 px-7 py-3 shadow-md no-underline rounded-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 text-white font-sans font-semibold text-xl border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2">xftT(testnet) faucet</button> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="absolute bottom-4 right-3"> | ||
<button id="mode" onclick="changeMode();" class="mb-auto px-3 py-2 shadow-md no-underline rounded-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 text-white font-sans font-semibold text-xs border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2 dark:bg-gradient-to-r dark:from-purple-800">dark mode</button> | ||
</div> | ||
</div> | ||
</div> | ||
</body> | ||
<script> | ||
ethereum.request({ method: 'eth_requestAccounts' }); | ||
web3 = new Web3(window.ethereum); | ||
web3.eth.getAccounts(async function(error, accounts) { | ||
web3.eth.accounts = accounts; | ||
web3.eth.defaultAccount = accounts[0]; | ||
}); | ||
web3.eth.getAccounts(function(error, accounts) { | ||
web3.eth.defaultAccount = accounts[0]; | ||
}) | ||
shift = new web3.eth.Contract([ | ||
{ | ||
"inputs": [ | ||
{ | ||
"internalType": "address", | ||
"name": "_tokenA", | ||
"type": "address" | ||
}, | ||
{ | ||
"internalType": "address", | ||
"name": "_tokenB", | ||
"type": "address" | ||
} | ||
], | ||
"stateMutability": "nonpayable", | ||
"type": "constructor" | ||
}, | ||
{ | ||
"anonymous": false, | ||
"inputs": [ | ||
{ | ||
"indexed": false, | ||
"internalType": "uint256", | ||
"name": "value", | ||
"type": "uint256" | ||
} | ||
], | ||
"name": "Shifted", | ||
"type": "event" | ||
}, | ||
{ | ||
"inputs": [], | ||
"name": "faucet", | ||
"outputs": [], | ||
"stateMutability": "payable", | ||
"type": "function" | ||
}, | ||
{ | ||
"inputs": [ | ||
{ | ||
"internalType": "uint256", | ||
"name": "amount", | ||
"type": "uint256" | ||
} | ||
], | ||
"name": "shift", | ||
"outputs": [], | ||
"stateMutability": "nonpayable", | ||
"type": "function" | ||
} | ||
], "0x6bE4C94052BF34e09d67C255D9Fe564c5abd4f95"); | ||
function faucet() { | ||
shift.methods.faucet().send({from: ethereum.selectedAddress}).then(); | ||
} | ||
function changeMode() { | ||
if (localStorage.theme != 'dark'){ | ||
localStorage.theme = 'dark'; | ||
document.getElementById("main").classList.add("dark"); | ||
document.getElementById("mode").textContent = "Dark mode"; | ||
}else { | ||
localStorage.theme = 'light'; | ||
document.getElementById("main").classList.remove("dark"); | ||
document.getElementById("mode").textContent = "Light mode"; | ||
} | ||
} | ||
changeMode(); | ||
</script> | ||
</html> | ||
\ No newline at end of file |
frontend/Shifting/mini.css
0 → 100644