<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet" 
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" 
        crossorigin="anonymous">
    <title>Safle Keyless</title>
</head>
<body class="bg-light">
    <div class="px-4 py-5 my-5 text-center">
        <img class="d-block mx-auto mb-4" width="250" height="200" src="https://app.getsafle.com/assets/img/svg/safle-logo.svg">
        <br />
        <div class="col-lg-6 mx-auto">
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <button type="button" class="btn btn-primary px-4 me-sm-3"  style="background-color: #007AFF" onclick="runSafle()" id="loginButton">Login</button>
          </div>
        </div>

        <div id="afterLoginDiv" class="col-lg-3 mx-auto" style="display: none;">
            <div>
                SafleID: <span id="safleIdSpan"></span><br>
            </div>
            <div>
                PublicAddress: <span id="userAddressSpan"></span><br>
            </div>
            <div>
                Wallet Balance: <span id="ethBalanceSpan"></span><br>
            </div>
            <br>
    
            <form id="transferForm">
                <div class="row">
                    <div class="col-md-4">
                        <label for="recipient" class="form-label">Recipient Address</label>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" id="recipient" placeholder="to 0x......"/>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-4">
                        <label for="value" class="form-label">Amount</label>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">                            
                            <input type="text" class="form-control" id="value" placeholder="value"/>
                        </div>
                    </div>
                </div>
                <br>
                <button class="btn btn-primary" style="background-color: #007AFF;margin:auto; display:block" id="submitTransferFrom">Submit Form</button>
            </form>    
        </div>
    </div>    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" 
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@getsafle/[email protected]/dist/keyless.min.js"></script>
</body>
</html>

var afterLoginDiv = document.getElementById('afterLoginDiv');
var safleIdSpan = document.getElementById('safleIdSpan');
var userAddressSpan = document.getElementById('userAddressSpan');
var ethBalanceSpan = document.getElementById('ethBalanceSpan');
var loginButton = document.getElementById('loginButton');
var userData;
var gasPrice;
var gasLimit = 30000;
var keylessWidget;
async function runSafle() {
    
    keylessWidget = new safle.safle.Widget({
            env: 'test',
            rpcURL: 'https://ropsten.infura.io/v3/b3a845111c5f4e3eaf646c79bcb4d4c0',
    });

    keylessWidget.initLogin();

    // listening to successfull widget initialisation event
    keylessWidget.on(keylessWidget.EVENTS.KEYLESS_WIDGET_INITIALISED, (data) => {
      console.log(data)
    });

    // Listening to login success event.
    keylessWidget.on(keylessWidget.EVENTS.LOGIN_SUCCESS, (widgetData) => {
        if (widgetData.status) {
            userData = widgetData.data;            
            // show values on html page
            safleIdSpan.innerHTML = userData.safleId;
            userAddressSpan.innerHTML = userData.publicAddress;
            
            // show ethBalanceSpan
            afterLoginDiv.style.display = 'block';
            // hide login button
            loginButton.style.display = 'none';
            wallet();
        }        
    });  
}
async function wallet() {
    const web3 = new safle.Web3(
        new safle.Web3.providers.HttpProvider('https://ropsten.infura.io/v3/b3a845111c5f4e3eaf646c79bcb4d4c0')
    );
    let walletBalance = await web3.eth.getBalance(userData.publicAddress);
    let ethBalance = web3.utils.fromWei(walletBalance, 'ether');
    gasPrice = await web3.eth.getGasPrice();
    ethBalanceSpan.innerHTML = ethBalance;
}

let form  = document.getElementById('transferForm');

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
    const web3 = new safle.Web3(
        new safle.Web3.providers.HttpProvider('https://ropsten.infura.io/v3/b3a845111c5f4e3eaf646c79bcb4d4c0')
    );
    var recipient = document.getElementById('recipient').value;
    var value = document.getElementById('value').value; 
    value = web3.utils.toWei(value, 'ether')
    var rawTx = {
      to: recipient,
      value,
      gasPrice: gasPrice ,   
      gasLimit: gasLimit,
    }

    keylessWidget.initSendTransaction(rawTx);
    
    keylessWidget.on(keylessWidget.EVENTS.SIGN_AND_SEND_TRANSACTION_SUCCESSFUL, (data) => {
        console.log(data)
    });

    keylessWidget.on(keylessWidget.EVENTS.SIGN_AND_SEND_TRANSACTION_FAILED, (data) => {
      console.log(data)
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.