지갑 연결 감지

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 = 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;

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

정보

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

3. 실행

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

npm run start