지갑 연결 감지

React Library

이 예제에서는 지갑의 이벤트를 감지하여 연결된 계정의 주소와 연결여부를 표시합니다.

1. 프로젝트 생성

터미널에서 다음과 같이 프로젝트를 생성합니다.

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

2. App.tsx 수정

App.tsx 파일에 다음 내용을 업데이트 하세요.

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

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

  const connectHandler = async (data) => {
    const { addr } = data
    setConnectedAccount(addr)
    setConnected(!!addr)
  }

  const disconnectHandler = (data) => {
    setConnectedAccount(undefined)
    setConnected(false)
  }

  const unlockWalletHandler = async (data: any) => {
    const addr = await window.locus.request('getAccount').catch((e: any) => undefined);
    setConnectedAccount(addr)
    setConnected(!!addr)
  }

  useEffect(() => {
    const locus = window.locus;
    if(locus) {
      console.warn('Locus wallet is not installed on this device.');
      return;
    }
    
    locus.on('init', initHandler)
    locus.on('connect', connectHandler)
    locus.on('disconnect', disconnectHandler)
    locus.on('unlockWallet', unlockWalletHandler);

    return () => {
       locus.off('init', initHandler);
       locus.off('connect', connectHandler);
       locus.off('disconnect', disconnectHandler);
       locus.off('unlockWallet', unlockWalletHandler);
    }
 }, [])

  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;

지갑이 정상적으로 설치되어 사용이 가능한 상태일때 init 이벤트가 한번 발생합니다.
init 이벤트의 데이터에서 선택된 계정과 네트워크 정보, 연결 여부를 얻을수 있습니다.
연결 상태가 변경됬을때 connect, disconnect 이벤트로 연결 여부를 업데이트 합니다.

info

발생하는 이벤트 목록은 여기에서 볼 수 있습니다.

3. 실행

터미널에서 다음과같이 프로젝트를 실행합니다.

npm run start