Web3 provider integration

by passbird

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <!-- 
    Import metakeep sdk.
    You can also import npm package if you are using node for building website
    e.g. 
    npm install metakeep@2.2.7
    require(metakeep)
    -->
    <script src="https://cdn.jsdelivr.net/npm/metakeep@2.2.7/lib/index.js" integrity="sha256-xumw19/jm9jT85ZzguICnMTh9OxWus275ni9zhVnLSE=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.5/web3.min.js"></script>
  </head>

</html>

JavaScript

/* Init SDK */
const sdk = new MetaKeep({
  /* App id to configure UI */
  appId: "9cc98bca-da35-4da8-8f10-655b3e51cb9e",
  /* Default chain to use */
  chainId: 80002,
  /* RPC node urls map */
  rpcNodeUrls: {
    // Update with your node API key
    80002: "https://rpc.ankr.com/polygon_amoy"
  }
});


/* Get signature using web3 provider*/
async function web3Sign() {

  try {
    console.log("Initiazing MetaKeep Web3 provider");

    /* Use MetaKeep web3 provider */
    const web3Provider = await sdk.ethereum;
    await web3Provider.enable();

    /* Initialize web3 provider */
    const web3 = new Web3(web3Provider);

    /* Get accounts */
    const web3Accounts = await web3.eth.getAccounts();

    /* Sign message */
    const signMessageResponse = await web3.eth.sign("message", web3Accounts[0]);
    console.log("sign message successful");
    console.log(signMessageResponse);

    // Send txn. Will fail if there are no tokens to pay for gas fee.
    const signTxnResponse = await web3.eth.sendTransaction({
      from: web3Accounts[0],
      to: web3Accounts[0],
      value: "123",
    }, web3Accounts[0]);
    console.log("sign txn successful");
    console.log(signTxnResponse);
  } catch (err) {
    console.log("Error when trying to sign");
    console.log(err.message || err);
  }
}


web3Sign();