JSFiddle - React, Tailwind, and code Playground

by Aggre _--

HTML

<script src="https://cdn.ethers.io/lib/ethers-5.1.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="flow-root p-8">
  <ul role="list" class="grid gap-2 w-full m-auto md:w-96">
    <li>
      <div class="grid gap-2 justify-stretch justify-items-center">
        <a id="connect" href="#" onclick="connect()" class="w-full bg-gray-800 rounded-md p-4 font-semibold text-white text-center hover:bg-gray-900">Connect</a>
        <span class="mt-2 h-12 w-0.5 bg-gray-200" aria-hidden="true"></span>
      </div>
    </li>

	<li>
      <div class="grid gap-2 justify-stretch justify-items-center">
        <form class="w-full">
          <input id="amount" name="amount" type="number" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 border border-gray-300 rounded-md" placeholder="Amount">
        </form>
        <span class="mt-2 h-12 w-0.5 bg-gray-200" aria-hidden="true"></span>
      </div>
    </li>

    <li>
      <div class="grid gap-2 justify-stretch justify-items-center">
        <a id="approve" href="#" onclick="approve()" class="w-full bg-gray-300 rounded-md p-4 font-semibold text-white text-center hover:bg-gray-900">Approve</a>
        <span class="mt-2 h-12 w-0.5 bg-gray-200" aria-hidden="true"></span>
      </div>
    </li>
	
    <li>
      <div class="grid gap-2 justify-stretch justify-items-center">
        <a id="wrap" href="#" onclick="wrap()" class="w-full bg-gray-300 rounded-md p-4 font-semibold text-white text-center hover:bg-gray-900">Wrap</a>
      </div>
    </li>
  </ul>
</div>

JavaScript

const {
  ethers
} = window
const info_dev = {
  address: '0xa21CB351Fc29aCB7c3901270a5259Bf5e68f11d8',
  abi: [
    'function balanceOf(address account) external view returns (uint256)',
    'function approve(address spender, uint256 amount) external returns (bool)'
  ]
}
const info_wdev = {
  address: '0xb970C9AB82C9b5110d734bA413AA3527ddd9eB6F',
  abi: [
    'function wrap(uint256 _amount) public returns (bool)'
  ]
}
const el = {
  connect: document.getElementById('connect'),
  amount: document.getElementById('amount'),
  approve: document.getElementById('approve'),
  wrap: document.getElementById('wrap')
}
const step = new Map()
const STEPS = {
  CONNECTED: 'CONNECTED',
  APPROVED: 'APPROVED',
  WRAPED: 'WRAPED'
}

let prov
let contract_dev
let contract_wdev

const toggle_connect = () => {
  el.connect.classList.toggle('bg-gray-800')
  el.connect.classList.toggle('hover:bg-gray-900')
  el.connect.classList.toggle('bg-gray-300')
  el.approve.classList.toggle('bg-gray-300')
  el.approve.classList.toggle('bg-gray-800')
}
const toggle_approve = () => {
  el.approve.classList.toggle('bg-gray-800')
  el.approve.classList.toggle('hover:bg-gray-900')
  el.approve.classList.toggle('bg-gray-300')
  el.wrap.classList.toggle('bg-gray-300')
  el.wrap.classList.toggle('bg-gray-800')
}
const toggle_wrap = () => {
  el.wrap.classList.toggle('bg-gray-800')
  el.wrap.classList.toggle('hover:bg-gray-900')
  el.wrap.classList.toggle('bg-gray-300')
}

const connect = async () => {
  if (step.get(STEPS.CONNECTED)) return
  const Web3Modal = window.Web3Modal.default
  const providerOptions = {
    injected: {
      display: {
        logo: "data:image/gif;base64,INSERT_BASE64_STRING",
        name: "Injected",
        description: "Connect with the provider in your Browser"
      }
    }
  }

  const web3Modal = new Web3Modal({
    providerOptions,
    cacheProvider: false
  })
  web3Modal.clearCachedProvider()


  const provider = await web3Modal.connect()
  prov = new...