코인 전송 Tx 생성

React Library

이 예제에서는 코인 전송 Tx를 생성하여 코인을 전송합니다.

1. 프로젝트 생성

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

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

2. Locus library 설치

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

npm i @locuschain/lib

3. App.tsx 수정

App.tsx 파일에 다음 내용을 업데이트 하고 정의된 변수를 사용자에 맞게 수정하세요.

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

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 transferCoin = async () => {
      try {
        const params = {
          from: testAccount.address,
          to: 'QRO5DMWKPKX5RKEBAWNYJGWBKJMWGUVAURENCABGCY',
          amount: '0.000001',
          tokenAmounts: [],
          feeType: 0,
        };

        const ret = await web3.provider.locus_transferCoin(params);
        setResult(JSON.stringify(ret, null, 2));
      } catch (e: any) {
        if (e.name !== 'AbortError') {
             setError(e.message);
        }
      }
    };
    transferCoin();
  }, [])

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

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

locus_transferCoin RPC를 호출하여 코인 전송 트랜잭션을 생성 및 전송합니다.

정보

로커스 라이브러리에 대한 자세한 정의는 여기에서 볼 수 있습니다.

4. 실행

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

npm run start