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 such as transferring Hbar and retrieving account information. To explore available APIs, refer to the Snap RPC APIs section in the documentation.

JavaScript function to interact with Identify Snap API

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

const handleHelloAPIRequest = async () => {
  const snapId = `npm:@hashgraph/hedera-identify-snap`
  await window.ethereum.request({
    method: 'wallet_invokeSnap',
    params: {
      snapId,
      request: {
        method: 'hello',
        params: {}
      }
    }
  })
}

where snapId can be one of the following:

1. npm:@hashgraph/hedera-identify-snap: 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:9001: If you're running the Identify Snap locally on your development environment via Identify Snap Local Environment, the snap APIs are exposed on localhost:9001. 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 handleHelloAPIRequest();
    } 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}
        />
      ),
    }}
  />

Live Demo on CodePen

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 Hedera Wallet 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.