🧑‍💻 Initialize

Initialize

When creating a Face object, you need an API Key and blockchain network parameters that you intend to use.

import { Face, Network } from '@haechi-labs/face-sdk';

const face = new Face({
  network: Network.GOELRI,
  apiKey: 'YOUR_DAPP_API_KEY'
});

🚧

Face objects cannot be duplicated. For an object that was created, we recommend you manage and use it as a global variable or global state.

👍

For integrating in React environment

For managing Face object as a global variable/state, you might use the Singleton pattern. If you don't need to change the blockchain network, the Singleton pattern is enough. But, if you're developing an web application in React and need to change blockchain network, you can manage Face object as a global variable/state using a state management library like Recoil or Redux.

You can find an example code using Recoil in here.

0. Recoil makes you to be able to manage a global state via Atom.
1. Define and instantiate an atom for managing Face object as global state. (Example)
   • When using the Recoil, it might be occurred an immutable error for changing of the value in Face object. So, you should set dangerouslyAllowMutability to true value when you create an Atom.
2. Initialize Face object and set it to recoil state. (Example)
3. When you want to use Face object in other place, get it using recoil value. (Example)

If you want to use chainId, not Network parameter, you can use it.

import { Face, Network } from '@haechi-labs/face-sdk';

const face = new Face({
  network: 5, // Ethereum Goerli testnet's chain id is 5
  apiKey: 'YOUR_DAPP_API_KEY'
});

Network Parameter

Face Wallet supports the following blockchain networks.

API Key

You need an API Key to use Face Wallet SDK. You can have an API Key issued in Face Wallet Dashboard.

Advanced config

Notification Options

By default, Face Wallet display a toast message when the user completes their task (e.g., login, send a transaction, reeset PIN code, etc.).

Also, you can hide the toast message. So, you can display your custom notification instead of the default Face Wallet's toast message.

import { Face, Network } from '@haechi-labs/face-sdk';

const face = new Face({
  network: Network.GOELRI,
  apiKey: 'YOUR_DAPP_API_KEY',
  notificationOptions: {
    type: 'none' // 'toast', 'none'
  }
}); 

If you initialized the Face object with the type set to none in notificationOptions, when users finish their actions, the Face SDK will send the face-toast event.

// face-toast Event
interface FaceToast {
  message: {
    title: string;
    description: string;
  },
  type: 'default' | 'success' | 'error'
}

You can receive the face-toast event on your dapp by registering an event listener for the face-toast type.

const listener = (e: CustomEvent) => {
  alert(`JSON.stringify(e?.detail)`);
};

window.addEventListener('face-toast', listener);