NEAR

팁

이 파트에서는 NEAR 트랜잭션 전송을 dapp.request를 통해 시작하는 방식을 소개합니다. 이 API에서 제공하는 것보다 더 높은 수준의 추상화가 필요한 경우 공급자를 직접 사용하는 대신, 편의 라이브러리를 사용하는 것이 좋습니다. WELLDONE Wallet은 dapp 메소드의 편리한 사용을 위한 방법을 강구 중입니다.

NEAR 네트워크에 트랜잭션을 보내기 위해서는 다음의 과정이 먼저 필요합니다.

1. Universal Provider (window.dapp) 감지
2. 사용자가 연결된 NEAR 네트워크 감지
3. 사용자의 NEAR 계정 가져오기

의 전제가 필요합니다. WELLDONE Wallet에서는 해당 지갑 주소에 연결된 네트워크를 자동으로 감지하여 가져옵니다. 따라서 트랜잭션을 보내기 이전에 메인넷에 트랜잭션을 보낼 것인지, 테스트넷에 트랜잭션을 보낼 것인지 미리 고려해두어야 합니다. 트랜잭션은 아래와 같은 포맷을 통해 전송될 수 있습니다.

const response = await dapp.request('near', {
  method: 'dapp:signAndSendTransaction',
  params: [HEX_STRING_TX_DATA],
});

1. Returns

해당 메소드는 단일 트랜잭션 뿐만 아니라 여러 개의 트랜잭션 전송이 가능하기 때문에, 트랜잭션 해시 값을 string 타입의 Promise 배열로 반환합니다.

Promise<string[]>;

2. Params

type HEX_STRING_TX_DATA = string;

• NEAR에서 트랜잭션을 보내기 위해선 HEX_STRING_TX_DATA을 params로 넘겨야 합니다. 해당 값은 near-api-js 라이브러리를 통해 얻을 수 있으며, 자세한 사용 방식은 이 링크와 아래의 예시를 통해 이해할 수 있습니다.

3. Example

import { providers, transactions, utils } from 'near-api-js';
const getSerializedTransaction = async (accounts) => {
  const rpc = 'https://rpc.testnet.near.org';
  const provider = new providers.JsonRpcProvider(rpc);
  const accountLocal = currentAccount['near'].address;
  const publicKey = currentAccount['near'].pubKey;
  const signerId = accountLocal;
  const accessKey = await provider.query(`access_key/${signerId}/${publicKey}`, '');
  const actions = [transactions.transfer(new BN(10))];
  const recentBlockHash = utils.serialize.base_decode(accessKey.block_hash);

  const transaction = transactions.createTransaction(
    accountLocal,
    utils.PublicKey.fromString(publicKey),
    accountLocal, // send to yourself
    accessKey.nonce + 1,
    actions,
    recentBlockHash,
  );

  const bytes = transaction.encode();

  return Buffer.from(bytes).toString('hex');
};
const sendTransaction = async () => {
  // get accounts first
  const accounts = await dapp.request('near', { method: 'dapp:accounts' });
  const HEX_STRING_TX_DATA = await getSerializedTransaction(accounts['near']);
  // sending a transaction
  try {
    const response = await dapp.request('near', {
      method: 'dapp:signAndSendTransaction',
      params: [
        // use serialized transaction
        [`0x${HEX_STRING_TX_DATA}`],
      ],
    });
    const txHash = response[0];
  } catch (error) {
    /*
        {
          message: 'User denied transaction signature',
          code: 4001,
        }
      */
  }
};

아래의 예제를 통해 실제로 트랜잭션을 전송해 볼 수 있습니다. 아래 예제를 통해 트랜잭션을 보내기 위해선 NEAR 테스트넷 계정과 테스트넷 토큰이 필요합니다. 지갑 내의 FAUCET 탭에서 faucet을 요청할 수 있습니다.

라이브 에디터

function sendTransaction() { const CHAIN_NAME = 'near'; const [accounts, setAccounts] = React.useState(null); const [txHash, setTxHash] = React.useState(null); const getSerializedTransaction = async () => { try { const rpc = 'https://rpc.testnet.near.org'; const provider = new providers.JsonRpcProvider(rpc); const signerId = accounts.address; const publicKey = accounts.pubKey; const accessKey = await provider.query(`access_key/${signerId}/${publicKey}`, ''); const actions = [transactions.transfer(new BN(10))]; const recentBlockHash = utils.serialize.base_decode(accessKey.block_hash); // make transaction const transaction = transactions.createTransaction( signerId, // signerId utils.PublicKey.fromString(publicKey), //pubKey signerId, // send to yourself accessKey.nonce + 1, // nonce actions, // actions recentBlockHash, // recentBlockHash ); const bytes = transaction.encode(); return Buffer.from(bytes).toString('hex'); } catch (error) { /* error */ console.log(error); } }; async function handleGetAccount() { try { const accounts = await dapp.request(CHAIN_NAME, { method: 'dapp:accounts', }); if (Object.keys(accounts).length === 0) { throw new Error('There is no accounts.'); } const status = await window.dapp.request('near', { method: 'status', params: [] }); if (status.chain_id !== 'testnet') { throw new Error('Please chagne to NEAR Testnet in WELLDONE Wallet'); } setAccounts(accounts[CHAIN_NAME]); } catch (error) { alert(error.message); } } async function handleSendTransaction() { try { const HEX_STRING_TX_DATA = await getSerializedTransaction(); const response = await dapp.request(CHAIN_NAME, { method: 'dapp:signAndSendTransaction', params: [`0x${HEX_STRING_TX_DATA}`], }); const txHash = response[0]; setTxHash(txHash); } catch (error) { console.log(error); alert(`Error Message: ${error.message}\nError Code: ${error.code}`); } } return ( <> {accounts ? ( <> <Button onClick={handleSendTransaction} type="button"> Send a Transaction </Button> <ResultTooltip style={{ background: '#3B48DF' }}> <b>Accounts:</b> {accounts.address} </ResultTooltip> </> ) : ( <> <Button onClick={handleGetAccount} type="button"> Get Account </Button> <div>You have to get account first!</div> </> )} {txHash && ( <ResultTooltip style={{ background: '#F08080' }}> <b>Transaction Hash:</b> {txHash} </ResultTooltip> )} </> ); }

function sendTransaction() {
  const CHAIN_NAME = 'near';
  const [accounts, setAccounts] = React.useState(null);
  const [txHash, setTxHash] = React.useState(null);
  const getSerializedTransaction = async () => {
    try {
      const rpc = 'https://rpc.testnet.near.org';
      const provider = new providers.JsonRpcProvider(rpc);
      const signerId = accounts.address;
      const publicKey = accounts.pubKey;

      const accessKey = await provider.query(`access_key/${signerId}/${publicKey}`, '');

      const actions = [transactions.transfer(new BN(10))];
      const recentBlockHash = utils.serialize.base_decode(accessKey.block_hash);

      // make transaction
      const transaction = transactions.createTransaction(
        signerId, // signerId
        utils.PublicKey.fromString(publicKey), //pubKey
        signerId, // send to yourself
        accessKey.nonce + 1, // nonce
        actions, // actions
        recentBlockHash, // recentBlockHash
      );
      const bytes = transaction.encode();

      return Buffer.from(bytes).toString('hex');
    } catch (error) {
      /* error */
      console.log(error);
    }
  };

  async function handleGetAccount() {
    try {
      const accounts = await dapp.request(CHAIN_NAME, {
        method: 'dapp:accounts',
      });
      if (Object.keys(accounts).length === 0) {
        throw new Error('There is no accounts.');
      }
      const status = await window.dapp.request('near', { method: 'status', params: [] });
      if (status.chain_id !== 'testnet') {
        throw new Error('Please chagne to NEAR Testnet in WELLDONE Wallet');
      }
      setAccounts(accounts[CHAIN_NAME]);
    } catch (error) {
      alert(error.message);
    }
  }
  async function handleSendTransaction() {
    try {
      const HEX_STRING_TX_DATA = await getSerializedTransaction();
      const response = await dapp.request(CHAIN_NAME, {
        method: 'dapp:signAndSendTransaction',
        params: [`0x${HEX_STRING_TX_DATA}`],
      });
      const txHash = response[0];

      setTxHash(txHash);
    } catch (error) {
      console.log(error);
      alert(`Error Message: ${error.message}\nError Code: ${error.code}`);
    }
  }

  return (
    <>
      {accounts ? (
        <>
          <Button onClick={handleSendTransaction} type="button">
            Send a Transaction
          </Button>
          <ResultTooltip style={{ background: '#3B48DF' }}>
            <b>Accounts:</b> {accounts.address}
          </ResultTooltip>
        </>
      ) : (
        <>
          <Button onClick={handleGetAccount} type="button">
            Get Account
          </Button>
          <div>You have to get account first!</div>
        </>
      )}
      {txHash && (
        <ResultTooltip style={{ background: '#F08080' }}>
          <b>Transaction Hash:</b> {txHash}
        </ResultTooltip>
      )}
    </>
  );
}

결과

Loading...