Web3 Provider - encodeFunctionSignature

HTML

<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@venly/web3-provider/umd/index.js"></script></head>
  <body>
    
  </body>
</html>

JavaScript

const options = {
  clientId: 'Testaccount',
  environment: 'staging',
  secretType: 'MATIC',
  skipAuthentication: true,
};

document.addEventListener('DOMContentLoaded', initProvider);

async function initProvider() {
  const provider = await Venly.createProvider(options);
	window.web3 = new Web3(provider);
  showFunctionSignatureInput();
}

function showFunctionSignatureInput() {
		const body = document.querySelector('body');
		const h2 = document.createElement('h2');
    h2.innerText = 'Get Encoded Function Signature:';

		const input = document.createElement('input');
    input.setAttribute('type', 'text');
	  input.setAttribute('id', 'abiFunction');
   	input.setAttribute('size', '80');
    input.setAttribute('placeHolder', 'safeTransferFrom(address,address,uint256,uint256,bytes)');

		const submit = document.createElement('input');
    submit.setAttribute('type', 'submit');
	  submit.setAttribute('value', 'Encode');
    submit.onclick = encodeAndDisplayFunctionSignature;

		body.appendChild(h2);
    body.appendChild(input);
	  body.appendChild(submit);
}

function encodeAndDisplayFunctionSignature() {
   displayEncodedFunctionSignature(encodeFunctionSignature());
}

function encodeFunctionSignature() {
    const input = document.querySelector('#abiFunction');
    return window.web3.eth.abi.encodeFunctionSignature(input.value);
}

function displayEncodedFunctionSignature(encodedFunctionSignature) {    
	  const body = document.querySelector('body');
    const h2 = document.createElement('h2');
	  h2.innerText = 'Result:';
		const p = document.createElement('p');
	  p.innerText = encodedFunctionSignature;
    
    body.appendChild(h2);
    body.appendChild(p);
}