로커스 라이브러리 사용

React Library

이 예제에서는 로커스 라이브러리를 설치하고 rpc호출로 nft를 생성하는 방법을 소개합니다.

1. 프로젝트 생성

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

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

2. Locus library 설치

터미널에서 다음과같이 로커스 라이브러리를 설치합니다.

npm i @locuschain/lib

3. App.tsx 수정

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

import { Account, convertStringToData, loadLocusWasm, Web3 } from '@locuschain/lib';
import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

function App() {
  const [result, setResult] = useState<string>('executing...')
  const [error, setError] = useState<string>()

  useEffect(() => {
    // rpcUrl must be changed to match the actual environment.
    const rpcUrl = 'http://[IP_ADDRESS]/';
    const web3 = new Web3(rpcUrl);

    // testAccount must be changed to match the actual environment.
    const testAccount = new Account({
      address: 'GAST567Y42J5VZFXLNW4W...',
      nsk: 'AFNZZPKVBP7AS46SSX....'
    });
    web3.accounts.add(testAccount);

    const createNft = async () => {
      try {
        const params = {
          account: testAccount.address,
          assetType: 'asset4',
          amount: '0',
          operator: '',
          metaData: convertStringToData(
            '{"name":"testname", "image":"https://iam-test-free270.s3.ap-northeast-2.amazonaws.com/logo.png", "decimals":18, "symbol":"symbol1"}'
          ),
          feeType: 0
        };

        // 3. Request asset object creation (includes signing process internally)
        // @ts-ignore
        const ret = await web3.provider.locus_createAssetObject(params);
        setResult(JSON.stringify(ret, null, 2));
      } catch (e: any) {
        if (e.name !== 'AbortError') {
            setError(e.message);
        }
      }
    };
    createNft();
  }, [])

  return <>
    <div>Result: <pre>{result}</pre></div>
    {error && <div style={{color: 'red'}}>{`${error}`}</div>}
  </>
}


(async () => {
  await loadLocusWasm();
  root.render(
    <App />
  );
})();

4. 실행

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

npm run start