Quick Start

This chapter will walk you through how to install and use the ISME SDK in any react project.

Create Project

This is a blank project of React+TS based on Vite, please skip this step if integrating with an already existing project.

pnpm create vite isme-app --template react-ts

Install ISME SDK

enter isme-app folder，run

pnpm add @ismelabs/did-manager

Import SDK

Import ISMEProvider in the entry file, where endpoint is the node address of the ISME Gateway

import ReactDOM from 'react-dom/client'
import { ISMEProvider } from '@ismelabs/did-manager'

import '@ismelabs/did-manager/dist/styles/style.css'
import App from './pages/App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <ISMEProvider endpoint="https://t0.onebitdev.com/nft3-gateway/">
    <App />
  </ISMEProvider>
)

did-manager includes front-end components for wallet connection and DID registration. If you want to use these components, you need to import the corresponding css styles

import '@ismelabs/did-manager/dist/styles/style.css'

By default, did-manager will pop up the component to finish the interaction. If you need to implement these two components yourself for the sake of style consistency, you don't need to introduce the built-in css style, and moreover passing the silent parameter to the ISMEProvider, 'did-manager` will not render the corresponding component, such as

import ReactDOM from 'react-dom/client'
import { ISMEProvider } from '@ismelabs/did-manager'

import App from './pages/App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <ISMEProvider endpoint="https://t0.onebitdev.com/nft3-gateway/" silent>
    <App />
  </ISMEProvider>
)

More detailed usage instructions will be shared later on, or else please refer to the example code. Then use the hook useISME in the App component to import the required state and methods.

import { useEffect } from 'react'
import { useISME } from '@ismelabs/did-manager'

export default function App() {
  const { connect, login, logout, eagerConnect, identifier, account } = useISME()

  useEffect(() => {
    eagerConnect()
  }, [eagerConnect])

  if (!account) {
    return <button onClick={connect}>Connect Wallet</button>
  }

  if (!identifier) {
    return <button onClick={login}>Login ISME</button>
  }

  return (
    <>
      <h2>{identifier}</h2>
      <button onClick={logout}>Logout ISME</button>
    </>
  )
}

Now a React application with multi-chain wallet connection, DID registration and login functions has been completed. You can see that the code is very simple.