Transfer ERC20 (Myria) Tokens

• Learn how to transfer with gasless for the ERC20 tokens from the Myria L2 to another L2 wallets.
• To inspect the function in the SDK with details payload and response format you can reference at SDK Docs.

Prerequisites

• ERC20 Token must be registered to Myria system
• Make sure that you have ERC-20 tokens (such as Myria tokens) in the L2 wallet
• You can deposit ERC20 (ex: MYR tokens) from L1 to L2 wallet, can reference at depositERC20 step.
• Or if your L2 wallet received the ERC-20 tokens from Airdrop / Campaign events.

Transfer process

• Defined the amount of tokens you want to execute transfer.
• Make sure the current balance of ERC20 tokens you have in L2 wallet is greater >= with the number you want to execute the transfer.
• Trigger the transfer process.
• Query and tracking the status of batch transfer.

Implementation

info

You can find the full React implementation for transfer ERC20 tokens in the Myria React Samples repository.

Transfer ERC-20 tokens can either perform in the Website or Server side.

• For website, it is required the browser have metamask extention to be interact with for getting Metamask signature to authorize the owner of the tokens.
• For server side, it is required for the Myria private key that you can retrieve in the Developer Portal Dashboard.

1. Set up a new React project

Transfer ERC-20 tokens requires client-side interaction with the MetaMask wallet.

It's recommended to use React to implement such behavior.

You can create a React app via Create React App. Note, the below project relies on Web3.js library and needs custom configuration.

2. Create a myria-client.ts helper

It's recommended to have a separate .ts file for quick access to the MyriaClient.

For more details, use the Myria Core SDK overview.

3. Trigger the transfer tokens action

You can create the simple React component file with below implementation such as TransferTokensComponent.tsx

Sample Code with Details Implementation

  const mClient: IMyriaClient = {
      networkId: Network.SEPOLIA, // This network is couple along with env - for Mainnet it is 1
      provider: web3Instance.currentProvider,
      web3: web3Instance,
      env: EnvTypes.STAGING, // Env that you're interacting on STAGING/PROD
    };

    const MYR_TOKEN_ADDRESS_EXAMPLE = "0xA06116D9...."; // ERC-20 token address - and make sure it is registered in Myria System already
    const RECEIVER_WALLET_ADDRESS = '0xd0D8A467E....'; // Your receiver/users wallet address
    const SENDER_WALLET_ADDRESS = '0x724f337bF0F....'; // Must be the owner of tokens, sender wallet address

    const moduleFactory = ModuleFactory.getInstance(mClient);
    const transactionManager = moduleFactory.getTransactionManager();

    const QUANTUM = 10000000000; // 10^10 as pre-defined rules in Myria

    // BN lib reference: https://github.com/indutny/bn.js/

    // Sample method to convert the pure amount to Quantized amount
    function convertAmountToQuantizedAmount(amount: number | string): number {
      const wei = convertEthToWei(String(amount));
      const quantizedAmount = Number(new BN(wei, 10).div(new BN(QUANTUM, 10)).toString());
      return quantizedAmount;
    }

    function convertEthToWei(amount: string): string {
      return ethers.utils.parseEther(String(amount)).toString();
    }

    const transferredItems: ItemSignableTransferParams[] = [
      {
        quantizedAmount: String(convertAmountToQuantizedAmount(1)),
        receiverWalletAddress: RECEIVER_WALLET_ADDRESS,
        tokenType: TokenType.ERC20,
        tokenData: {
          tokenAddress: MYR_TOKEN_ADDRESS_EXAMPLE,
        },
      },
      {
        quantizedAmount: String(convertAmountToQuantizedAmount(2)),
        receiverWalletAddress: RECEIVER_WALLET_ADDRESS,
        tokenType: TokenType.ERC20,
        tokenData: {
          tokenAddress: MYR_TOKEN_ADDRESS_EXAMPLE,
        },
      },
      {
        quantizedAmount: String(convertAmountToQuantizedAmount(3)),
        receiverWalletAddress: RECEIVER_WALLET_ADDRESS,
        tokenType: TokenType.ERC20,
        tokenData: {
          tokenAddress: MYR_TOKEN_ADDRESS_EXAMPLE,
        },
      },
    ];

    // For the group request ID and Partner reference ID, we can have a note to keep track that field 
    // as this field use to query the list of transactions in batch and indicate the status success/failed in transfer
    const transferTokenParams: TransferTokenParams = {
      senderWalletAddress: SENDER_WALLET_ADDRESS,
      groupRequestId: '7257d29c-c96a-4302-8eaf-368a0d62b977', // Require to Note - Can use random UUID to generate groupRequestID
      requestId: '9cc6e9e4-aba3-4879-8043-421a0b4dddf8',  // Required to Unique - Can use random UUID to generate requestID
      partnerRefId: 'Project-ID', // Partner project ID
      description: 'Test-Test Bulk Transfer',
      items: transferredItems,
    };

    const transferResult = await transactionManager.bulkTransferERC20Token(
      transferTokenParams,
    );

4. Query and tracking the status of batch transfer

You can create the simple React component file with below implementation such as QueryTransferStatus.tsx

Sample Code with Details Implementation

const mClient: IMyriaClient = {
      networkId: Network.SEPOLIA,
      provider: web3Instance.currentProvider,
      web3: web3Instance,
      env: EnvTypes.STAGING,
    };

    const groupRequestID = "7257d29c-c96a-4302-8eaf-368a0d62b977";
    const partnerRefId = "Project-ID"; // Unique Project ID in Myria System
    const moduleFactory = ModuleFactory.getInstance(mClient);
    const transactionManager = moduleFactory.getTransactionManager();
    const result = await transactionManager.getTransactionsByGroupRequestIDAndPartnerRefID(
      groupRequestID,
      partnerRefId
    );

    console.log('Transaction result -> ', result);