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://cdn.ethers.io/lib/ethers-5.7.umd.min.js" type="application/javascript"></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 ethersSign() {

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

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

    // Initialize ethers provider
    const ethersProvider = new ethers.providers.Web3Provider(web3Provider);

    // Signer
    const signer = ethersProvider.getSigner()
    const signerAddress = await signer.getAddress()
    console.log(signerAddress)

    // Sign message
    const signMessageResponse = await signer.signMessage("Hello World");
    console.log("sign message successful");
    console.log(signMessageResponse);

    // Send txn. Will fail if there are no tokens to pay for gas fee.
    const sendTxnResponse = await signer.sendTransaction({
      from: signerAddress,
      to: signerAddress,
      value: "0x12"
    });
    console.log("send txn successful");
    console.log(sendTxnResponse);
  } catch (err) {
    console.log("Error when trying to perform provider operations");
    console.log(err.message || err);
  }
}


ethersSign();