Deposit ERC20 (Myria) Tokens

Learn how to deposit ERC20 tokens from Ethereum L1 to Myria L2 network.

Prerequisites

• Have some tokens on Ethereum L1 (testnet or mainnet) in the Myria wallet

Implementation

Myria SDK (React)

info

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

1. Set up a React project

Depositing ERC20 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 the 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. Deposit tokens

deposit-erc20.ts

The depositErc20() function has the following parameters:

1. params object:

• starkKey - the Stark Key of your wallet
• contractAddress - contract address of the token to deposit
• amount - the amount of tokens to deposit
• ethAddress - the public key of your wallet

2. sendOptions object:

• from - public key of your wallet
• confirmationType - confirmation type

import { ConfirmationType, DepositERC20Params, DepositModule, MyriaClient, SendOptions } from "myria-core-sdk";
import Web3 from 'web3';

function convertEthToWei(amount: string): string {
  if (!amount || Number(amount) === 0) return '0';
  return Web3.utils.toWei(amount.toString()).toString();
}

export async function depositErc20(client: MyriaClient, starkKey: string, account: string, contractAddress: string, amount: string) {
  const depositModule: DepositModule = new DepositModule(client);

  const params: DepositERC20Params = {
    starkKey: starkKey,
    contractAddress: contractAddress,
    amount: String(convertEthToWei(amount.toString())),
    ethAddress: account
  }

  const sendOptions: SendOptions = {
    from: account,
    confirmationType: ConfirmationType.Confirmed,
  }

  const result = await depositModule.depositERC20(params, sendOptions);
  console.log(JSON.stringify(result, null, 2));
}

Wallet.tsx

To deposit ERC20 tokens, you need to know the contract address of that token. You can find the address using one of the blockchain explorers, such as Etherscan. Here's an example of Myria Token on Sepolia network.

import { MyriaClient } from "myria-core-sdk";
import { useState } from "react";
import { depositErc20 } from "./deposit-erc20";

type Props = {
  isConnected: boolean,
  account: string,
  starkKey: string
  client: MyriaClient
}

const Wallet = ({ isConnected, account, starkKey, client }: Props) => {
  const [contractAddress, setContractAddress] = useState<any>("0x83a795e1e91560aae4207fdae9199d384f11d9d2");
  const [amount, setAmount] = useState<any>("5");

  const onDeposit = async () => {
    return await depositErc20(client, starkKey, account, contractAddress, amount);
  };

  const onContractAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setContractAddress(event.target.value);
  };

  const onAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setAmount(event.target.value);
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-4 list-form py-3 mt-3">
          <h4 className="text-white">Deposit tokens</h4>
          <div className="form-row">
            <div className="col">
              <input type="text" value={contractAddress} onChange={onContractAddressChange} name="contractAddress" className="form-control" placeholder="Erc20 contract address" />
            </div>
            <div className="col">
              <input type="text" value={amount} onChange={onAmountChange} name="amount" className="form-control" placeholder="Amount" />
            </div>
            <div className="col">
              <button onClick={() => onDeposit()} className="btn-mry">Deposit tokens</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Wallet;

Myria Marketplace

1. Open the Myria NFT Marketplace

• Staging environment
• Mainnet environment

2. Connect your MetaMask

3. Open your wallet and click Deposit

4. Select the token name and the amount of tokens to deposit. Click Next

5. Approve the transaction

After a successful deposit transaction, you'll see a confirmation that looks like this:

Note, the deposit takes ~10 minutes to confirm.