buy.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aloycwl.github.io/js/cdn/jquery.min.js"></script>
    <script src="https://aloycwl.github.io/js/cdn/web3.min.js"></script>
    <script src="https://aloycwl.github.io/js/cdn/web3ac.js"></script>
    <title>Agora Marketplace - World's First NFT DEX</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <b>Buy NFTS</b> |
    <a href="fetch_using_etherscan_api.html">Etherscan API Example</a> |
    <a href="index.html">Opensea API Example</a><br />
    <a id="body"></a>
  </body>
  <script>
    offset = 0;
    CHAIN = 4;
    CS = 'https://aloycwl.github.io/agora_frontend/css/agora.css';
    WB =
      'https://eth-rinkeby.alchemyapi.io/v2/xneL9EV87zUlVocEVcyDT5tqp4LZE0Fy';
    async function display(o) {
      a = await contracta.methods.Show(20, o).call();
      for (i = 0; i < a[0].length; i++)
        if (a[0][i].length > 1) {
          try {
            b = await $.getJSON(formatURL(a[0][i]));
          } catch (e) {
            b = { name: '', description: '', image: '' };
          }
          $('#body').append(
            `<div class="nfts"><b>${b.name}</b><br><i>${b.description}</i><br>${
              typeof b.image != 'undefined'
                ? `<img src="${formatURL(b.image)}">`
                : `<video autoplay muted loop><source src="${formatURL(
                    (img = b.animation_url)
                  )}"></video>`
            }<br>Price: ${a[1][i]} ETH <button onclick="buy(${a[1][i]},${
              a[2][i]
            })">Buy now</button>`
          );
        }
    }
    async function buy(amt, id) {
      await contract.methods.Buy(id).send({
        from: acct,
        value: amt * 1e18,
      });
    }
    (async () => {
      await load(
        [
          {
            inputs: [u1],
            name: 'Buy',
            outputs: [],
            stateMutability: 'payable',
            type: 'function',
          },
          {
            inputs: [u1, u1],
            name: 'Show',
            outputs: [u6, u2, u2],
            stateMutability: 'view',
            type: 'function',
          },
        ],
        '0x07b2de1b0d412d567ca4028ab229fd8a671f2491'
      );
      display(offset);
    })();
    $(window).scroll(function () {
      if (
        Math.ceil($(window).scrollTop()) ==
        Math.ceil($(document).height() - $(window).height())
      ) {
        offset += 20;
        display(offset);
      }
    });
  </script>
</html>