Connect Wallet

By default, the DID-Manager provides your application with a wallet selector dialog, which is directly used to select and connect wallets. The DID-Manager also helps your team customize your application in order to be consistent with the design style of the product.

ISMEProvider

As mentioned in the previous section, when you want to customize front-end components, you don't need to import the ‘did-manager' built-in css style and simply pass in the parameter silent

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

import 'bootstrap/dist/css/bootstrap.min.css'
import Connect from './pages/Connect'

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

With the above code, Developers have to implement wallet selector and register the DID by themselves.

Wallet Selector

The below code example gives a simple and fast solution using 'react-bootstrap':

import { useState } from 'react'
import Button from 'react-bootstrap/Button'
import Modal from 'react-bootstrap/Modal'

export default function Connect() {
  const [show, setShow] = useState(false)

  const onSelect = async (wallet: 'MetaMask' | 'Phantom' | 'Petra') => {
    setShow(false)
    console.log(wallet)
  }

  return (
    <div>
      <Button variant="primary" onClick={() => setShow(true)}>
        Connect Wallet
      </Button>
      <Modal show={show} onHide={() => setShow(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Connect Wallet</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="d-grid gap-2">
            <Button
              variant="outline-primary"
              size="lg"
              onClick={() => onSelect('MetaMask')}
            >
              MetaMask
            </Button>
            <Button
              variant="outline-primary"
              size="lg"
              onClick={() => onSelect('Phantom')}
            >
              Phantom
            </Button>
            <Button
              variant="outline-primary"
              size="lg"
              onClick={() => onSelect('Petra')}
            >
              Petra
            </Button>
          </div>
        </Modal.Body>
      </Modal>
    </div>
  )
}

From the above example, we define one 'Button' and one 'Modal', When Button is clicked, Modal will pop up. Modal provides two buttons, representing wallets MetaMask and Phantom respectively. When the user clicks on them, User's selection result can be obtained through the onSelect method.

Connect Wallet

As our next step, we will go through how to connect the wallet. 'useISME' provides the method 'selectWallet' to connect wallet. You only need to pass the type of the wallet, and don't need to think about the underlying difference between wallets.

import { useISME, WalletType } from '@ismelabs/did-manager'

export default function Connect() {
  const { account, selectWallet } = useISME()

  const onSelect = async (wallet: WalletType) => {
    setShow(false)
    const address = await selectWallet(wallet)
    console.log(address)
  }
}

selectWallet: If the wallet connection is successful, it will directly return the current account address. useNFT also provides a special status account, which indicates the account that the current wallet is connected to. If the wallet switches the account address, account will also automatically change, so it can be detected by useEffect.

Auto-Connect

Even if the user has connected to the wallet and is authorized, the previous connection status will be lost when the page is refreshed. Hence we usually try to automatically detect and connect the wallet when the page is loaded. useISME provides a method eagerConnect, which will silently try to connect to the wallet without popping up the authorization prompt of the wallet. If it has been authorized before, it will automatically complete the connection. If it has not been authorized, it will not change the state. The sample code is as follows:

import { useEffect } from 'react'

export default function Connect() {
  const { account, eagerConnect } = useISME()

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

In this way, the component can silently connect to the wallet when it is mounted.

Disconnection

The disconnect method provided by useISME can clear the connection status of the wallet. If you have already connected to an address in MetaMask, but now want to switch to the Phantom wallet, then you need to disconnect the current connection first.

caution

Disconnection only clears the connection status of the current frontend, and does not mean canceling the connection authorization of the wallet.