Javascript

You can easily integrate with MoonKey login flow to provision or retrieve Ethereum wallet access. We keep track of all MoonKey provisioned wallets with the associated user and securely provide access to your users client-side.

1 - Install MoonKey.js

HTML

<script src="https://js.moonkey.fun/sdk/dist/latest/streambird.js"></script>

2 - Install Ethers.js

HTML

<script src="https://cdn.ethers.io/scripts/ethers-v4.min.js"></script>

3 - Configure MoonKey SDK

We add the following code to initialize the MoonKey SDK.

Initialize

<script type="module">
  let streambirdProvider;

  let streambird = MoonKey(STREAMBIRD_PUBLIC_TOKEN, {
    headless: true,
    networkConfig: {
      rpcUrl: 'https://goerli.infura.io/v3/INFURA_API_KEY'
    },
    emailMagicLinkOptions: {
      autoVerify: true
    }
  });
</script>

In this example, we will be using your PublicToken, which is publishable and safe to expose client-side.

We create a simple login form to allow the user to enter their email and authenticate.

HTML

<div>
  <form id="form">
    <input id="email" name="email" type="email" />
    <button type="submit">
      Sign in
    </button>
  </form>
</div>

In the same script as the initialization, we just add click listener to handle the login button when clicked.

document.getElementById('form').addEventListener('submit', handleLogin)

Once the user types in the email and clicks the login button, a magic link will be sent to their email address. Since we enabled the the autoVerify setting by configuring autoVerify: true, which allows the user to verify magic link via a MoonKey hosted verification page.

Handle Login + Authentication

async function handleLogin(e) {
  e.preventDefault();
  const email = new FormData(e.target).get("email");

  if(email) {
    try {
      // magic link email is sent, now waiting for user to verify
      let result = await streambird.magicLinks.loginOrCreate(email);
      streambirdProvider = new ethers.providers.Web3Provider(streambird.rpcProvider);

      // We're connected now! 
      // Let's get some wallet information
      const address = await streambirdProvider.getSigner().getAddress();
      const balance = ethers.utils.formatEther(
        await streambirdProvider.getBalance(address),
      );

      // Print the wallet address somewhere
      document.getElementById('walletAddress').innerText = address;
      // Print the wallet balance somewhere
      document.getElementById('walletBalance').innerText = balance + ' ETH';
    } catch(error) {
      console.log(error);
    }
  }
};

If you want to customize this verification page and brand it yourself, you can optionally configure redirect url that your user will redirect to and handle the magic token yourself. Read more about the different parameters and customizations you can do in our MoonKey SDK Docs.

5 - Perform Web3 functions

Now that you have the Web3 Provider inside the global variable streambirdProvider, you can perform different Web3 operations. Here are some examples:

  async function getAddress() {
    const signer = streambirdProvider.getSigner();
    const address = await signer.getAddress();

    // put the address in a control
    document.getElementById('walletAddress').innerText = address;
  }

  async function refreshBalance() {
    const signer = streambirdProvider.getSigner();
    const address = await signer.getAddress();

    const balance = ethers.utils.formatEther(
      await streambirdProvider.getBalance(address),
    );

    // update the balance against control
    document.getElementById('walletBalance').innerText = balance + ' ETH';
  }

async function signMessage() {
  const signer = streambirdProvider.getSigner();

  // get message from input textbox
  const originalMessage = document.getElementById('inputSignedMessage').value;
  const signedMessage = await signer.signMessage(originalMessage);

  // print the sign message in a control
  document.getElementById('signedMessage').innerText = signedMessage;
}

Congrats! You now have allowed your user to access their own Ethereum wallet and you have the capability to perform many Web3 functions! To view a demo, please see navigate to the following example.

Main

Frontend SDKs

REST API

Concepts and Resources

1 - Install MoonKey.js

2 - Install Ethers.js

3 - Configure MoonKey SDK

5 - Perform Web3 functions

​1 - Install MoonKey.js

​2 - Install Ethers.js

​3 - Configure MoonKey SDK

​4 - Handle Login

​5 - Perform Web3 functions

1 - Install MoonKey.js

2 - Install Ethers.js

3 - Configure MoonKey SDK

4 - Handle Login

5 - Perform Web3 functions