@iome/react-widget NPM

IOMe Widget

Overview

The IOMe widget offers an extensive collection of UI components and specialized modules for developers, applications, and users. Additionally, the Utils module provides a wide range of utility functions, including a wallet library, encoding and cryptography tools etc. This comprehensive approach guarantees that IOMe effectively addresses the diverse requirements of your web or mobile application.

Moreover, this npm package is specifically crafted to seamlessly integrate with both ReactJS and NextJS frontend frameworks.

Installation

npm install @iome/react-widget

Pre-requisites

Before you begin, ensure you have your DeveloperID and AppSecret ready. You can find instructions on how to obtain them by visiting this link.

Usage

// Import
import { IOMe, Connect, Utils } from "@iome/react-widget"
let iomeObj = new IOMe("<developerID>","<AppSecret>");

// Init
useEffect(() => {
	async function __initIome() {
		try {
			await iomeObj.InitDev();
			await iomeObj.InitApp();
		}catch(e) {
			// handle error
		}
	}
	__initIOMe();
},[])

Connect Widget

<Connect
	onSuccess={// handle success event}
	iome={iomeObj}
/>

This Connect component is responsible for managing both current users of the applications and onboarding of new users.

App and user modules

App To initialize the App module, simply use the following code:

	```js
	const iome = new IOMe(DeveloperID, AppSecret)
	iome.InitDev()
	iome.InitApp()
	```

	To learn more about the functions under the app module. Visit [this](https://dev.iome.ai/docs/widget) page.

User To initialize the User module, you must connect the widget to your application as detailed in the Connect Widget section.

Once a user logs in using their IOMe credentials, the User module will be automatically initialized. This allows you to access any function under it. For instance, to generate a user session token, you can make the following call:

#### Fetch user MOI ID aka Participant ID

iome.user.ParticipantID

#### Generate User Auth Token

```js
// iome.user.getAuthToken(DAT Token Type, message)
iome.user.getAuthToken("SESSION", <timestamp>)
```

#### Sign a message
```js
const signatureDetails = iome.user.sign("message to be signed");
console.log(signatureDetails)
/*
{
  message: "i'm getting signed",
  pubKey: '0x0399d76e4747439fe43e76b2d174ef2f40d81f3f31bb7ccb66e01c5d612a8777f1',
  shortenAddress: '0x8150C9cba21AdbFd8DEe5102f8311ad5B037AF6e',
  signature: {
    algorithm: 'ecdsa_secp256k1',
    digest: '0xe552649e81c3036372b305e91c5f87cbbb447aa5d9b624027d0afce7fb50fe662f98ecfa8e606fd01b8554510f84df2fa22d477d3f7283054b8e9c3fa9b125761c'
  }
}
*/
```

Please ensure that the user has successfully logged in before using above functions.

Utils module

enc The Utils.enc class is created with the intent of simplifying the encoding and decoding of both general strings like Usernames and Attribute names, as well as specific IOMe namespaces like App names, Account names and Avatar names.

Utils.enc.mEncode(<string>)
Utils.enc.mDecode(<encodedstring>, <isNamespace>), pass isNamespace=true if encoded string is IOMe namespace.

zk The Utils.zk class is intended to assist in the generation and verification of Zero-Knowledge Proofs (ZK Proofs) that are created during interactions in IOMe.