Detect Wallet Connection

React Library

In this example, wallet events are detected to display the address and connection status of the connected account.

1. Generate Project

Create the project in the terminal as follows.

npx create-react-app locuschain-example-connection --template typescript

2. Edit App.tsx

Update the App.tsx file with the following content.

// @ts-nocheck
import React, { useCallback, useEffect, useState } from 'react';

function App() {
  const [connected, setConnected] = useState<boolean>();
  const [connectedAccount, setConnectedAccount] = useState<string>();
  
const initHandler = useCallback((data) => {
  const { connectedAccount, address, connected } = data
  setConnectedAccount(connectedAccount?.addr)
  setConnected(connected)
}, [])

const connectionChangedHandler = useCallback(async (data) => {
  const { addr } = data
  setConnectedAccount(addr)
  setConnected(!!addr)
}, [])

const disconnectedHandler = useCallback((data) => {
  setConnectedAccount(undefined)
  setConnected(false)
}, [])

  useEffect(() => {
    if(!window.locus) {
      console.warn('Locus wallet is not installed on this device.');
      return;
    }

    window.locus.on('init', initHandler)
    window.locus.on('connectionChanged', connectionChangedHandler)
    window.locus.on('disconnected', disconnectedHandler)

    return () => {
       window.locus.off('init', initHandler);
       window.locus.off('connectionChanged', connectionChangedHandler);
       window.locus.off('disconnected', disconnectedHandler);
    }
 }, [])

  const connect = () => {
    if (!window.locus) {
      alert('Locus wallet is not installed on this device.');
      return;
    }
    window.locus.request('connect', {}).catch((err) => {
      console.error(err);
    });
  }

  return <>
    <button onClick={connect}>connect locuschain wallet</button><br/><br/>
    <div>account: {connectedAccount}</div>
    <div>connected: {`${connected}`}</div>
  </>
}

export default App;

The init event will be triggered once when the wallet is properly installed and ready to use. You can obtain the selected account and connection status from the data of the 'init' event. When the connection status changes, the 'connectionChanged' and 'disconnected' events are used to update the connection status.

info

The list of events that occur can be found here

3. execute

Execute the project in the terminal as shown below.

npm run start