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 executeTransfer() { const response = await venlyConnect.signer.executeTransfer({ walletId: '9100ca80-0d16-4aff-a13b-bce795d4a219', //Enter the walletId that will execute the tx to: '0x6cCAf4aA614808022504eC01d68a722F27C70EB7', //Enter the wallet address where funds will be sent to value: 0.00115, //Amount you want to send secretType: 'MATIC' //Blockchain of the transaction }) showResponse('executeTransfer', response) } 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="executeTransfer" onclick="executeTransfer()">Execute Transfer</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: 3px; 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%; }