feat: new token features (#143)

components/transaction/zksync/era/deposit/ConfirmTransactionModal.vue

@@ -96,7 +96,6 @@
               :token="transaction.token"
               :amount="transaction.amount"
               :direction="transactionReceiptDirection"
-              :loading="transaction.token.price === 'loading'"
             />
           </template>
         </TransactionLineItem>
@@ -318,8 +317,7 @@ const makeTransaction = async () => {
   if (tx) {
     for (const tokenAddress in totalOfEachToken.value) {
       const token = totalOfEachToken.value[tokenAddress];
-      if (!token?.token.l1Address) continue;
-      eraEthereumBalanceStore.deductBalance(token.token.l1Address, token.amount.toString());
+      eraEthereumBalanceStore.deductBalance(token.token.address, token.amount.toString());
     }
     tx.waitL1Commit()
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

composables/zksync/era/deposit/useFee.ts

@@ -10,7 +10,7 @@ import type { PublicClient } from "@wagmi/core";
 import type { Ref } from "vue";
 import type { L1Signer } from "zksync-web3";
 
-import { ETH_L2_ADDRESS } from "@/utils/constants";
+import { ETH_L1_ADDRESS } from "@/utils/constants";
 import { retry } from "@/utils/helpers";
 import { calculateFee } from "@/utils/helpers";
 
@@ -24,8 +24,8 @@ export type DepositFeeValues = {
 };
 
 export default (
-  tokens: Ref<{ [tokenSymbol: string]: Token } | undefined>,
-  balances: Ref<TokenAmount[]>,
+  tokens: Ref<Token[]>,
+  balances: Ref<TokenAmount[] | undefined>,
   getL1VoidSigner: () => L1Signer,
   getPublicClient: () => PublicClient
 ) => {
@@ -52,10 +52,10 @@ export default (
   });
 
   const feeToken = computed(() => {
-    return tokens.value?.[ETH_L2_ADDRESS];
+    return tokens.value.find((e) => e.address === ETH_L1_ADDRESS);
   });
   const enoughBalanceToCoverFee = computed(() => {
-    if (!feeToken.value || inProgress.value) {
+    if (!feeToken.value || !balances.value || inProgress.value) {
       return true;
     }
     const feeTokenBalance = balances.value.find((e) => e.address === feeToken.value!.address);

composables/zksync/era/deposit/useTransaction.ts

@@ -13,8 +13,6 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
     try {
       error.value = undefined;
 
-      if (!transaction.token.l1Address) throw new Error("Token L1 address is not available");
-
       status.value = "processing";
       const wallet = await getL1Signer();
       if (!wallet) throw new Error("Wallet is not available");
@@ -31,7 +29,7 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
       }
       const depositResponse = await wallet.deposit({
         to: transaction.to,
-        token: transaction.token.l1Address,
+        token: transaction.token.address,
         amount: transaction.amount,
         l2GasLimit: fee.l2GasLimit,
         overrides,

data/networks.ts

@@ -4,9 +4,6 @@ import type { Token } from "@/types";
 import type { Chain } from "@wagmi/core/chains";
 import type { Network } from "zksync/build/types";
 
-import { ETH_L1_ADDRESS, ETH_L2_ADDRESS } from "@/utils/constants";
-import { getTokensByNetworkId } from "@/utils/zksync/era/token-library";
-
 export type L2Network = {
   key: string;
   name: string;
@@ -30,8 +27,8 @@ export const l1Networks = {
     ...sepolia,
     name: "Sepolia Testnet",
     rpcUrls: {
-      public: { http: ["https://ethereum-sepolia.publicnode.com"] },
-      default: { http: ["https://ethereum-sepolia.publicnode.com"] },
+      public: { http: ["https://rpc.ankr.com/eth_sepolia"] },
+      default: { http: ["https://rpc.ankr.com/eth_sepolia"] },
     },
   },
 } as const;
@@ -46,7 +43,7 @@ export type EraNetwork = L2Network & {
     showPartnerLinks?: boolean;
     showZkSyncLiteNetworks?: boolean;
   };
-  getTokens: () => Token[] | Promise<Token[]>;
+  getTokens?: () => Token[] | Promise<Token[]>; // If blockExplorerApi is specified, tokens will be fetched from there. Otherwise, this function will be used.
 };
 
 // See the official documentation on running a local zkSync node: https://era.zksync.io/docs/tools/testing/
@@ -59,15 +56,6 @@ export const eraInMemoryNode: EraNetwork = {
   name: "In-memory node",
   shortName: "In-memory local node",
   rpcUrl: "http://localhost:8011",
-  getTokens: () => [
-    {
-      address: ETH_L2_ADDRESS,
-      symbol: "ETH",
-      decimals: 18,
-      iconUrl: "/img/eth.svg", // optional
-      enabledForFees: true, // optional
-    },
-  ],
 };
 
 // Dockerized local setup default config. Docs: https://era.zksync.io/docs/tools/testing/dockerized-testing.html
@@ -77,16 +65,6 @@ export const eraDockerizedNode: EraNetwork = {
   name: "Dockerized local node",
   shortName: "Dockerized node",
   rpcUrl: "http://localhost:3050",
-  getTokens: () => [
-    {
-      address: ETH_L2_ADDRESS,
-      l1Address: ETH_L1_ADDRESS, // optional
-      symbol: "ETH",
-      decimals: 18,
-      iconUrl: "/img/eth.svg", // optional
-      enabledForFees: true, // optional
-    },
-  ],
   l1Network: {
     id: 9,
     name: "L1 Local",
@@ -103,23 +81,36 @@ export const eraNetworks: EraNetwork[] = [
   {
     id: 324,
     key: "era-mainnet",
-    name: "zkSync Era Mainnet",
-    shortName: "Era Mainnet",
+    name: "zkSync Mainnet",
+    shortName: "zkSync",
     rpcUrl: "https://mainnet.era.zksync.io",
     blockExplorerUrl: "https://explorer.zksync.io",
     blockExplorerApi: "https://block-explorer-api.mainnet.zksync.io",
     displaySettings: {
       showPartnerLinks: true,
       showZkSyncLiteNetworks: true,
     },
-    getTokens: () => getTokensByNetworkId(324),
     l1Network: l1Networks.mainnet,
   },
+  {
+    id: 300,
+    key: "era-sepolia",
+    name: "zkSync Sepolia Testnet",
+    shortName: "zkSync Sepolia",
+    rpcUrl: "https://sepolia.era.zksync.dev",
+    blockExplorerUrl: "https://sepolia.explorer.zksync.io",
+    blockExplorerApi: "https://block-explorer-api.sepolia.zksync.dev",
+    displaySettings: {
+      showPartnerLinks: true,
+      showZkSyncLiteNetworks: true,
+    },
+    l1Network: l1Networks.sepolia,
+  },
   {
     id: 280,
     key: "era-goerli",
-    name: "zkSync Era Testnet",
-    shortName: "Era Testnet",
+    name: "zkSync Goerli Testnet",
+    shortName: "zkSync Goerli",
     rpcUrl: "https://testnet.era.zksync.dev",
     blockExplorerUrl: "https://goerli.explorer.zksync.io",
     blockExplorerApi: "https://block-explorer-api.testnets.zksync.dev",
@@ -128,29 +119,17 @@ export const eraNetworks: EraNetwork[] = [
       showPartnerLinks: true,
       showZkSyncLiteNetworks: true,
     },
-    getTokens: () => getTokensByNetworkId(280),
     l1Network: l1Networks.goerli,
   },
   {
     id: 270,
     key: "era-stage",
-    name: "zkSync Era Stage",
-    shortName: "Era Stage",
+    name: "zkSync Stage",
+    shortName: "zkSync Stage",
     rpcUrl: "https://z2-dev-api.zksync.dev",
     blockExplorerUrl: "https://goerli-beta.staging-scan-v2.zksync.dev",
     blockExplorerApi: "https://block-explorer-api.stage.zksync.dev",
     faucetUrl: "https://stage2-faucet.zksync.dev/ask_money",
-    getTokens: () => getTokensByNetworkId(270),
-    l1Network: l1Networks.sepolia,
-    hidden: true,
-  },
-  {
-    id: 300,
-    key: "era-boojnet",
-    name: "zkSync Era Boojnet",
-    shortName: "Era Boojnet",
-    rpcUrl: "https://sepolia.era.zksync.dev",
-    getTokens: () => getTokensByNetworkId(300),
     l1Network: l1Networks.sepolia,
     hidden: true,
   },