Hello World

Overview

Identify Snap provides developers with a range of APIs, starting with the simple "hello" snap API. This API connects to the current account and displays content to the user via a MetaMask dialog box. By learning to integrate the "hello" API, developers can then seamlessly integrate more complex APIs related to DIDs and VCs. To explore available APIs, refer to the Snap RPC APIs section in the documentation.

Add a method to retrieve the currently connected Metamask account address

Since snaps cannot retrieve the account info on their own, it is the responsibility of the DApp to request the user for their currently connected Metamask account address and pass that in as a parameter to each and every single Identify Snap API.

async function getCurrentMetamaskAccount() {
  const accounts = await window.ethereum.request({
    method: "eth_requestAccounts"
  });
  return accounts[0];
}

JavaScript function to interact with Identify Snap API

Let's see how we can interact with the "hello" API of the Identify Snap.

export const handleHelloAPIRequest = async () => {
  const snapId = `npm:@tuum-tech/identify`
  const metamaskAddress = await getCurrentMetamaskAccount();
  await window.ethereum.request({
    method: 'wallet_invokeSnap',
    params: {
      snapId,
      request: { method: 'hello', params: { metamaskAddress } }
    }
  })
}

where snapId can be one of the following:

1. npm:@tuum-tech/identify: This is what you'll have most of the time if you are going to be integrating with the Identify Snap version from the npm registry.

2. local:http://localhost:8080: If you're running the Identify Snap locally on your development environment via Identify Snap Local Environment, the snap APIs are exposed on localhost:8080. Note that you would only use this if you're actively making some changes to the Identify Snap code locally otherwise, you'll be interacting with the Identify Snap npm package directly.

On the above handleHelloAPIRequestmethod, we can see that it's invoking the wallet_snap_* method of Metamask. What this does is invoke the hello API of Identify Snap. Identify Snap has implemented how to handle this API including what arguments to take(if any). Refer to hello snap API for more info on how this API works.

Then, all we need to do now is to handle the hello snap API request on our application:

  const handleSendHelloClick = async () => {
    try {
      await sendHello();
    } catch (e) {
      console.error(e);
    }
  };

  <Card
    content={{
      title: 'Send Hello message',
      description: 'Display a custom message within a confirmation screen in MetaMask.',
      button: (
        <Button
          buttonText="Send message"
          onClick={handleSendHelloClick}
        />
      ),
    }}
  />

To ease the integration of Identify Snap on an application, we have created a template web application that you can run locally and check out the code in its entirety to learn how you can integrate and interact with various APIs exposed by Identify Snap. Check out the full source code at template application github repository.

You can also check out the API reference to learn how each API works.