Skip to main content

Using Locus Library

React Library​

In this example, we introduce how to install the Locus library and create an NFT using an RPC call.

1. Create Project​

Create the project in the terminal as follows:

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

2. Install Locus Library​

Install the Locus library in the terminal as follows:

npm i @locuschain/lib

3. Edit index.tsx​

Update the index.tsx file with the following content.

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. Run​

Run the project in the terminal as follows:

npm run start