const venlyConnect = new VenlyConnect('Testaccount', { environment: 'sandbox' }); const chain = 'MATIC'; let wallets = []; async function getAccount() { const response = await venlyConnect.flows.getAccount(chain); document.querySelector('#noAuth').hidden = true; document.querySelector('#needsAuth').hidden = false; showResponse('getAccount', response); } async function executeContract() { const response = await venlyConnect.signer.executeContract({ secretType: 'MATIC', //blockchain of the NFT contract walletId: '63d88de8-873e-4cdb-b6d1-52b08fa537e6', //the ID of the wallet holding the NFT to: '0x4df3e0285df213d0516bdbd495f0593f8b6ec31a', //the contract address of the NFT functionName: 'burn', //This will be burn inputs: [{ //an array of inputs for the burn function type: "uint256", value: 69 //the token ID }, { type: "address", value: "0x9A9F6A560bBdCFbbb014303fc817D1e5EeaA3AE2" //the wallet address holding the NFT }, { type: "uint256", value: 1 //number of NFTs to burn } ] }) } function showResponse(name, response) { console.log(name, response); document.querySelector('#response').value = JSON.stringify(response, null, 3); }
<!DOCTYPE html> <html> <head> <title>Venly Widget</title> <script type="text/javascript" src="https://unpkg.com/@venly/connect"></script> <!--Include the widget--> </head> <body> <div id="noAuth"> <p> You first need to connect your account: </p> <button id="getAccount" onclick="getAccount()">Connect with Widget</button> </div> <p></p> <div id="needsAuth" hidden="hidden"> <p> Now you can execute the following function: </p> <button id="executeContract" onclick="executeContract()">Execute Contract</button> </div> <p></p> <textarea id="response" disabled="disabled" rows="20" cols="100"></textarea> </body> </html>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f5f5f5; } h1 { color: #6a0dad; /* Purple color */ text-align: center; display: flex; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; } #noAuth, #needsAuth { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 5px; margin-bottom: 20px; border-radius: 5px; width: 400px; text-align: center; } button { padding: 10px 15px; margin: 5px; cursor: pointer; background-color: #6a0dad; /* Purple color */ color: #fff; border: none; border-radius: 3px; transition: background-color 0.3s ease; } button:hover { background-color: #531c8c; /* Darker shade of purple on hover */ } textarea { width: 100%; resize: vertical; padding: 10px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; margin-top: 10px; } h1 img { width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; }