fix: improvements

components/modal/WalletWarning.vue

@@ -1,8 +1,9 @@
 <template>
   <CommonModal :initialFocus="checkbox" v-model:opened="walletWarningModal" :closable="false" title="Wallet warning">
     <p class="leading-normal">
-      Make sure your wallet supports zkSync Era network before adding funds to your account. Otherwise, this can result
-      in <span class="font-medium text-red-600">loss of funds</span>. See the list of supported wallets on the
+      Make sure your wallet supports {{ selectedNetwork.name }} network before adding funds to your account. Otherwise,
+      this can result in <span class="font-medium text-red-600">loss of funds</span>. See the list of supported wallets
+      on the
       <a class="link" href="https://zksync.dappradar.com/ecosystem?category-de=wallet" target="_blank">Ecosystem</a>
       website.
     </p>
@@ -26,8 +27,10 @@ import { ref, watch } from "vue";
 import { useStorage } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 
+import { useNetworkStore } from "@/store/network";
 import { useOnboardStore } from "@/store/onboard";
 
+const { selectedNetwork } = storeToRefs(useNetworkStore());
 const { walletNotSupported } = storeToRefs(useOnboardStore());
 const checkbox = ref<HTMLInputElement | undefined>();
 

composables/useScreening.ts

@@ -0,0 +1,18 @@
+/* import { $fetch } from "ofetch"; */
+import { useMemoize } from "@vueuse/core";
+
+/* Returns void if address screening was successful */
+/* Fails if address screening was unsuccessful */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const validateAddress = useMemoize(async (address: string) => {
+  /* const response = await $fetch(`${env.API_URL}/check-address/${address}`); */
+  // TODO: remove mock
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  // throw new Error("We were unable to process this transaction...");
+});
+
+export default () => {
+  return {
+    validateAddress,
+  };
+};

composables/zksync/deposit/useTransaction.ts

@@ -1,3 +1,5 @@
+import useScreening from "@/composables/useScreening";
+
 import type { DepositFeeValues } from "@/composables/zksync/deposit/useFee";
 import type { BigNumberish } from "ethers";
 import type { L1Signer } from "zksync-web3";
@@ -9,6 +11,8 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
   const error = ref<Error | undefined>();
   const ethTransactionHash = ref<string | undefined>();
 
+  const { validateAddress } = useScreening();
+
   const commitTransaction = async (
     transaction: {
       to: string;
@@ -34,6 +38,9 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
       if (overrides.gasPrice && overrides.maxFeePerGas) {
         overrides.gasPrice = undefined;
       }
+
+      await validateAddress(transaction.to);
+
       const depositResponse = await wallet.deposit({
         to: transaction.to,
         token: transaction.tokenAddress,

composables/zksync/useBridgeWithdrawalStatuses.ts

@@ -6,6 +6,7 @@ import useTimedCache from "@/composables/useTimedCache";
 import type { Hash } from "@/types";
 import type { Transfer } from "@/utils/mappers";
 
+import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { useZkSyncTransfersHistoryStore } from "@/store/zksync/transfersHistory";
 import { useZkSyncWalletStore } from "@/store/zksync/wallet";
@@ -35,8 +36,9 @@ const forceCheckWithdrawalStatus = (transactionHash: string) => {
 };
 
 export default () => {
-  const eraTransfersHistoryStore = useZkSyncTransfersHistoryStore();
-  const { transfers } = storeToRefs(eraTransfersHistoryStore);
+  const transfersHistoryStore = useZkSyncTransfersHistoryStore();
+  const { isConnected } = storeToRefs(useOnboardStore());
+  const { transfers } = storeToRefs(transfersHistoryStore);
   const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 
   const storageCompletedWithdrawals = useStorage<{ [networkKey: string]: string[] }>(
@@ -88,14 +90,15 @@ export default () => {
     }
   };
   const updateAllWithdrawalStatuses = async () => {
-    eraTransfersHistoryStore.requestRecentTransfers();
+    transfersHistoryStore.requestRecentTransfers();
     for (const withdrawalTransfer of recentWithdrawals.value) {
       await updateWithdrawalStatus(withdrawalTransfer.transactionHash!);
     }
   };
   watch(
     () => recentWithdrawals.value.map((e) => e.transactionHash),
     () => {
+      if (!isConnected.value) return;
       if (!eraNetwork.value.blockExplorerApi) return;
       updateAllWithdrawalStatuses();
     },

composables/zksync/useTransaction.ts

@@ -1,5 +1,7 @@
 import { useMemoize } from "@vueuse/core";
 
+import useScreening from "@/composables/useScreening";
+
 import type { BigNumberish } from "ethers";
 import type { Provider, Signer } from "zksync-web3";
 
@@ -18,6 +20,7 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
   const transactionHash = ref<string | undefined>();
 
   const retrieveBridgeAddresses = useMemoize(() => getProvider().getDefaultBridgeAddresses());
+  const { validateAddress } = useScreening();
 
   const commitTransaction = async (
     transaction: TransactionParams,
@@ -28,14 +31,16 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
 
       status.value = "processing";
       const signer = await getSigner();
-      if (!signer) throw new Error("Era Signer is not available");
+      if (!signer) throw new Error("zkSync Signer is not available");
 
       const getRequiredBridgeAddress = async () => {
         if (transaction.tokenAddress === ETH_TOKEN.address) return undefined;
         const bridgeAddresses = await retrieveBridgeAddresses();
         return bridgeAddresses.erc20L2;
       };
 
+      await validateAddress(transaction.to);
+
       status.value = "waiting-for-signature";
       const tx = await signer[transaction.type === "transfer" ? "transfer" : "withdraw"]({
         to: transaction.to,

data/wallets.ts

@@ -13,5 +13,5 @@ export const confirmedSupportedWallets: WalletEntry[] = [
 ];
 
 export const disabledWallets: WalletEntry[] = [
-  { walletName: "Argent", type: "walletConnect" }, // Argent has different L1 and L2 Era addresses, also Remote wallet type for zkSync Lite should be fixed
+  { walletName: "Argent", type: "walletConnect" }, // Argent has different L1 and L2 Era addresses
 ];

pages/assets.vue

@@ -146,9 +146,9 @@ import { parseTokenAmount, removeSmallAmount } from "@/utils/formatters";
 import { isOnlyZeroes } from "@/utils/helpers";
 
 const onboardStore = useOnboardStore();
-const walletEraStore = useZkSyncWalletStore();
+const walletStore = useZkSyncWalletStore();
 const { isConnected } = storeToRefs(onboardStore);
-const { balance, balanceInProgress, balanceError } = storeToRefs(walletEraStore);
+const { balance, balanceInProgress, balanceError } = storeToRefs(walletStore);
 const { destinations } = storeToRefs(useDestinationsStore());
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 
@@ -222,7 +222,7 @@ const depositMethods = computed(() => {
 
 const fetch = () => {
   if (!isConnected.value) return;
-  walletEraStore.requestBalance();
+  walletStore.requestBalance();
 };
 fetch();
 

pages/balances.vue

@@ -49,17 +49,17 @@ import { useZkSyncWalletStore } from "@/store/zksync/wallet";
 import { groupBalancesByAmount } from "@/utils/mappers";
 
 const onboardStore = useOnboardStore();
-const walletEraStore = useZkSyncWalletStore();
+const walletStore = useZkSyncWalletStore();
 const { isConnected } = storeToRefs(onboardStore);
-const { balance, balanceInProgress, balanceError } = storeToRefs(walletEraStore);
+const { balance, balanceInProgress, balanceError } = storeToRefs(walletStore);
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 
 const { loading, reset: resetSingleLoading } = useSingleLoading(computed(() => balanceInProgress.value));
 
 const balanceGroups = groupBalancesByAmount(balance);
 
 const fetch = () => {
-  walletEraStore.requestBalance();
+  walletStore.requestBalance();
 };
 fetch();
 

pages/index.vue

@@ -1,11 +1,11 @@
 <template>
   <ModalTransactionDepositUnavailable />
 
-  <EraDepositForm />
+  <DepositView />
 </template>
 
 <script lang="ts" setup>
-import EraDepositForm from "@/views/transactions/Deposit.vue";
+import DepositView from "@/views/transactions/Deposit.vue";
 </script>
 
 <style lang="scss" scoped></style>

pages/send.vue

@@ -1,13 +1,13 @@
 <template>
-  <EraTransferForm type="transfer">
+  <TransferView type="transfer">
     <template #title>
       <PageTitle :fallback-route="{ name: 'send-methods' }">Send to another address</PageTitle>
     </template>
-  </EraTransferForm>
+  </TransferView>
 </template>
 
 <script lang="ts" setup>
-import EraTransferForm from "@/views/transactions/Transfer.vue";
+import TransferView from "@/views/transactions/Transfer.vue";
 </script>
 
 <style lang="scss" scoped></style>

pages/transactions.vue

@@ -77,7 +77,7 @@ import { useZkSyncTransfersHistoryStore } from "@/store/zksync/transfersHistory"
 
 const onboardStore = useOnboardStore();
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
-const eraTransfersHistoryStore = useZkSyncTransfersHistoryStore();
+const transfersHistoryStore = useZkSyncTransfersHistoryStore();
 const { isConnected } = storeToRefs(onboardStore);
 const {
   transfers,
@@ -86,7 +86,7 @@ const {
   canLoadMore,
   previousTransfersRequestInProgress,
   previousTransfersRequestError,
-} = storeToRefs(eraTransfersHistoryStore);
+} = storeToRefs(transfersHistoryStore);
 const { destinations } = storeToRefs(useDestinationsStore());
 const { recentWithdrawals, updateAllWithdrawalStatuses, updateWithdrawalStatus } = useWithdrawalStatuses();
 
@@ -98,16 +98,19 @@ const displayedTransfers = computed(() => {
 const { loading, reset: resetSingleLoading } = useSingleLoading(recentTransfersRequestInProgress);
 
 const updateSingleWithdrawal = (transactionHash: string) => {
+  if (!isConnected.value) return;
   if (!eraNetwork.value.blockExplorerApi) return;
   updateWithdrawalStatus(transactionHash, true);
 };
 
 const fetch = () => {
   if (!isConnected.value) return;
-  eraTransfersHistoryStore.requestRecentTransfers();
+  transfersHistoryStore.requestRecentTransfers();
 };
 fetch();
+
 const fetchWithdrawalStatuses = () => {
+  if (!isConnected.value) return;
   if (eraNetwork.value.blockExplorerApi) {
     updateAllWithdrawalStatuses();
   }
@@ -128,7 +131,7 @@ const unsubscribe = onboardStore.subscribeOnAccountChange((newAddress) => {
 
 const loadMoreEl = ref(null);
 const fetchMore = () => {
-  eraTransfersHistoryStore.requestPreviousTransfers();
+  transfersHistoryStore.requestPreviousTransfers();
 };
 const { stop: stopLoadMoreObserver } = useIntersectionObserver(loadMoreEl, ([{ isIntersecting }]) => {
   if (isIntersecting) {

pages/withdraw.vue

@@ -1,15 +1,15 @@
 <template>
   <ModalTransactionWithdrawalUnavailable />
 
-  <EraTransferForm type="withdrawal">
+  <TransferView type="withdrawal">
     <template #title>
       <PageTitle>Bridge</PageTitle>
     </template>
-  </EraTransferForm>
+  </TransferView>
 </template>
 
 <script lang="ts" setup>
-import EraTransferForm from "@/views/transactions/Transfer.vue";
+import TransferView from "@/views/transactions/Transfer.vue";
 </script>
 
 <style lang="scss" scoped></style>

store/zksync/ethereumBalance.ts

@@ -12,14 +12,14 @@ export const useZkSyncEthereumBalanceStore = defineStore("zkSyncEthereumBalances
   const runtimeConfig = useRuntimeConfig();
   const onboardStore = useOnboardStore();
   const ethereumBalancesStore = useEthereumBalanceStore();
-  const eraTokensStore = useZkSyncTokensStore();
+  const tokensStore = useZkSyncTokensStore();
   const { l1Network, selectedNetwork } = storeToRefs(useNetworkStore());
   const { account } = storeToRefs(onboardStore);
   const { balance: ethereumBalance } = storeToRefs(ethereumBalancesStore);
-  const { l1Tokens } = storeToRefs(eraTokensStore);
+  const { l1Tokens } = storeToRefs(tokensStore);
 
   const getBalancesFromApi = async (): Promise<TokenAmount[]> => {
-    await Promise.all([ethereumBalancesStore.requestBalance(), eraTokensStore.requestTokens()]);
+    await Promise.all([ethereumBalancesStore.requestBalance(), tokensStore.requestTokens()]);
 
     if (!ethereumBalance.value) throw new Error("Ethereum balances are not available");
 
@@ -44,7 +44,7 @@ export const useZkSyncEthereumBalanceStore = defineStore("zkSyncEthereumBalances
     ];
   };
   const getBalancesFromRPC = async (): Promise<TokenAmount[]> => {
-    await eraTokensStore.requestTokens();
+    await tokensStore.requestTokens();
     if (!l1Tokens.value) throw new Error("Tokens are not available");
     if (!account.value.address) throw new Error("Account is not available");
 

store/zksync/tokens.ts

@@ -7,8 +7,8 @@ import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { mapApiToken } from "@/utils/mappers";
 
 export const useZkSyncTokensStore = defineStore("zkSyncTokens", () => {
-  const eraProviderStore = useZkSyncProviderStore();
-  const { eraNetwork } = storeToRefs(eraProviderStore);
+  const providerStore = useZkSyncProviderStore();
+  const { eraNetwork } = storeToRefs(providerStore);
 
   const {
     result: tokensRaw,

store/zksync/wallet.ts

@@ -11,10 +11,10 @@ import { useZkSyncTokensStore } from "@/store/zksync/tokens";
 
 export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
   const onboardStore = useOnboardStore();
-  const eraProviderStore = useZkSyncProviderStore();
-  const eraTokensStore = useZkSyncTokensStore();
-  const { eraNetwork } = storeToRefs(eraProviderStore);
-  const { tokens } = storeToRefs(eraTokensStore);
+  const providerStore = useZkSyncProviderStore();
+  const tokensStore = useZkSyncTokensStore();
+  const { eraNetwork } = storeToRefs(providerStore);
+  const { tokens } = storeToRefs(tokensStore);
   const { account, network } = storeToRefs(onboardStore);
 
   const { execute: getSigner, reset: resetSigner } = usePromise(async () => {
@@ -42,7 +42,7 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const web3Provider = new ethers.providers.Web3Provider((await onboardStore.getWallet()) as any, "any");
-    const eraL1Signer = L1Signer.from(web3Provider.getSigner(), eraProviderStore.requestProvider());
+    const eraL1Signer = L1Signer.from(web3Provider.getSigner(), providerStore.requestProvider());
     return eraL1Signer;
   });
   const getL1VoidSigner = () => {
@@ -51,7 +51,7 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const web3Provider = new ethers.providers.Web3Provider(onboardStore.getPublicClient() as any, "any");
     const voidSigner = new VoidSigner(account.value.address, web3Provider);
-    return L1VoidSigner.from(voidSigner, eraProviderStore.requestProvider()) as unknown as L1Signer;
+    return L1VoidSigner.from(voidSigner, providerStore.requestProvider()) as unknown as L1Signer;
   };
 
   const {
@@ -67,7 +67,7 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
   });
 
   const getBalancesFromBlockExplorerApi = async (): Promise<TokenAmount[]> => {
-    await Promise.all([requestAccountState({ force: true }), eraTokensStore.requestTokens()]);
+    await Promise.all([requestAccountState({ force: true }), tokensStore.requestTokens()]);
     if (!accountState.value) throw new Error("Account state is not available");
     if (!tokens.value) throw new Error("Tokens are not available");
     return Object.entries(accountState.value.balances)
@@ -84,11 +84,11 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
       });
   };
   const getBalancesFromRPC = async (): Promise<TokenAmount[]> => {
-    await eraTokensStore.requestTokens();
+    await tokensStore.requestTokens();
     if (!tokens.value) throw new Error("Tokens are not available");
     if (!account.value.address) throw new Error("Account is not available");
 
-    const provider = eraProviderStore.requestProvider();
+    const provider = providerStore.requestProvider();
     const balances = await Promise.all(
       Object.entries(tokens.value).map(async ([, token]) => {
         const amount = await provider.getBalance(onboardStore.account.address!, undefined, token.address);