JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
<section>
  <header><h1>Sale</h1></header>
  <button id="connect">Connect Metamask</button>
  <div class="identity"></div>
  <div class="error"></div>
  <div class="loading" >Something is loading...</div>
  <label>
    <strong>Payment token</strong>
    <select id="paymentTokens">
      <option value="eth">ETH (0.001 eth / nft)</option>
      <option value="usdc">USDC (100 USDC / nft)</option>
    </select>
    </label>
  <div class="pack">
    <div class="input__wrapper">
      <label for="pack">
        <strong>Buy Pack</strong>
        <input type="number" value="1" min="1" max="5" id="pack" />
      </label>
      <button id="pack__trigger">Buy</button>
    </div>
  </div>
  
  <div class="individuals">
    <div class="input__wrapper">
      <label for="token1">
        <strong>Buy token 1</strong>
        <input type="number" value="1" min="1" max="5" id="token1" />
      </label>
      <button id="token1__trigger">Buy</button>
    </div>
    <div class="input__wrapper">
      <label for="token2">
        <strong>Buy token 2</strong>
        <input type="number" value="1" min="1" max="5" id="token2" />
      </label>
      <button id="token2__trigger">Buy</button>
    </div>
    <div class="input__wrapper">
      <label for="token3">
        <strong>Buy token 3</strong>
        <input type="number" value="1" min="1" max="5" id="token3" />
      </label>
      <button id="token3__trigger">Buy</button>
    </div>
    <div class="input__wrapper">
      <label for="token4">
        <strong>Buy token 4</strong>
        <input type="number" value="1" min="1" max="5" id="token4" />
      </label>
      <button id="token4__trigger">Buy</button>
    </div>
    <div class="input__wrapper">
      <label for="token5">
        <strong>Buy token 5</strong>
        <input type="number" value="1" min="1" max="5" id="token5" />
      </label>
      <button...

CSS

section.is-loading button,
section.no-signer .input__wrapper button {

  opacity: .5;
  pointer-events: none;
}

.individuals {
  margin-top: 1em;
}

.error {
  padding: 1em 0;
  color: red;
}

.loading {
  padding: 1em 0;
  color: blue;
  font-weight: 800;
}

.balances {
  padding: 1em;
  text-align: center;
}

JavaScript

//const NFT_CONTRACT = '0x0bA7167a264609aC1aF10331f1f4cfd88487310b';
//const SALE_CONTRACT = '0xE1AA586e4Aa2fCAE9afB6331847d5cc1B4040a03';
const NFT_CONTRACT = '0x706C850E3aE8ee5cD03833607a1A437116809993';
const SALE_CONTRACT = '0x4a1502c16926dA037B8e3dc445D199747FCfc0c4';


const CHAIN_ID = '0x4';
const paymentTokens = {
	eth: {
 		token: null,
    price: ethers.utils.parseEther('0.001'),
  },
  usdc: {
  	token: '0xFab46E002BbF0b4509813474841E0716E6730136',
    price: ethers.utils.parseEther('5')
  }
};

const error = writable('');
const loading = writable(false);
const signer = writable(null);
const balances = writable(null);
const chainId = writable(null);

let provider;

const $connect = document.getElementById('connect');
const $paymentTokens = document.getElementById('paymentTokens');


let paymentToken;


$connect.addEventListener('click', e => {
	e.preventDefault();
	connect();
});

$paymentTokens.addEventListener('change', selectPaymentToken)
selectPaymentToken();

for(let i = 1; i <= 5; i++) {
	const $btn = document.getElementById(`token${i}__trigger`);
	$btn.addEventListener('click', async e => {
		e.preventDefault();
		const $input = document.getElementById(`token${i}`);
		const amount = parseInt($input.value);
		if (amount >= 1 && amount <= 5) {
			await collect([i], [amount]);
		}
	})
}

document.getElementById('pack__trigger').addEventListener('click', async e => {
		e.preventDefault();
		const $input = document.getElementById(`pack`);
    const amount = parseInt($input.value);
		if (amount >= 1 && amount <= 5) {
			await collect([1, 2, 3, 4, 5], [amount, amount, amount, amount, amount]);
		}
})

// connect the website to Metamask
async function connect() {
  if (!window.ethereum) throw new Error('No wallet');

	loading.set(true);
	try {
		// open metamask "connect" window
		await window.ethereum.send('eth_requestAccounts');
		
		// create a web3 provider
		provider = new ethers.providers.Web3Provider(window.ethereum);
		
		// get the current...