Shift.html 9.33 KB
Newer Older
XFT-dev's avatar
XFT-dev committed
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
<!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/web3@latest/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>