starter_07.js

const tokenRows = document.querySelector('[data-id="token-rows"]');
const txConfirmation = document.querySelector('[data-id="tx-confirmation"]');

// This listener checks to see if we clicked the buy now button
tokenRows.addEventListener('click', async evt => {
  // If the target is the buy now button
  if (evt.target.dataset.id === 'buy-now') {
    
    // We want to get the resale ID and price we set on the button via
    // data attributes.
    const { resaleid, price } = evt.target.dataset;

    try {
      // Call the cargo method with our data attribute values and 
      // get the transaction hash
      const tx = await cargo.api.purchaseResaleToken(resaleid, price);
      
      // Show a confirmation message in the UI
      txConfirmation.innerHTML = `
        ${txConfirmation.innerHTML}
        <p>Your transaction has been submitted you can check the status <a href="https://rinkeby.etherscan.io/tx/${tx}" target="_blank" rel="noopener noreferrer">here</a></p>
      `;
    } catch (e) {
      alert('Something went wrong, or user denied transaction');
    }
  }
});

function displayContractContent(contracts, resaleItems) {
  let template = '';
  contracts.forEach(contract => {
    const { name, symbol, tokenAddress, tokenContractId } = contract;
    const currentResaleItems = resaleItems[tokenContractId];

    let tokenMarkup = '';

    // Loop through each of the tokens for sale and create some markup
    // for them.
    currentResaleItems.forEach(token => {
      const { metadata, price } = token;

      // Here I have added the button with data attributes that we 
      // can use to get information about the current token
      tokenMarkup += `
        <div class="tile">
          <img src=${metadata.image} />
          <h3 class="bold">${metadata.name}</h3>
          <h3 class="color-primary">${cargo.web3.fromWei(
            price,
            'ether'
          )} ETH</h3>
          <button class="margin-top" data-id="buy-now" data-resaleid="${
            token.resaleItemId
          }" data-price="${token.price}">Buy Now</button>
        </div>
      `;
    });

    template += `
      <div class="contract-header">
        <h2>${name} ${symbol}</h2>
        <h3>${tokenAddress}</h3>
      </div>
      ${tokenMarkup}
    `;
  });

  tokenRows.innerHTML = template;
}