feat: disable weth deposit and reformat the error message

Author: tx-nikola

components/common/ErrorBlock.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="error-block-container">
     <FaceFrownIcon class="error-block-icon" aria-hidden="true" />
-    <div class="error-block-text-container">
+    <div :class="showCopyButton ? 'hidden' : 'error-block-text-container'">
       <slot>Unexpected error</slot>
     </div>
-    <CommonButton v-if="retryButton" class="ml-3" variant="error" @click="emit('try-again')">Try again</CommonButton>
+    <p :class="showCopyButton ? 'error-block-text-container' : 'hidden'">
+      Transaction failed. Please try again or copy the details of the error text.
+    </p>
+    <span class="flex flex-col items-end justify-center gap-2">
+      <CommonButton v-if="retryButton" class="ml-3" variant="error" @click="emit('try-again')">Try again</CommonButton>
+      <CommonButton
+        v-if="showCopyButton"
+        class="ml-3 text-sm"
+        size="sm"
+        variant="error"
+        @click="emit('copy-message')"
+        >{{ copied ? "Copied!" : "Copy error text" }}</CommonButton
+      >
+    </span>
   </div>
 </template>
 
@@ -16,10 +29,19 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  showCopyButton: {
+    type: Boolean,
+    default: false,
+  },
+  copied: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits<{
   (eventName: "try-again"): void;
+  (eventName: "copy-message"): void;
 }>();
 </script>
 

composables/useCopy.ts

@@ -16,9 +16,9 @@ export default (text: Ref<string>, copiedDuring = 1000) => {
 
   const copied = computed(() => isCopied.value || tooltipShownViaLegacyCopy.value);
 
-  async function copy() {
+  async function copy(altText?: string) {
     try {
-      await clipboardCopy();
+      await clipboardCopy(altText as string);
     } catch (error) {
       legacyCopy();
       showLegacyCopyTooltip();

utils/constants.ts

@@ -1 +1,3 @@
 export const L2_BASE_TOKEN_ADDRESS = "0x000000000000000000000000000000000000800A";
+
+export const WETH_L1_ADDRESS = "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";

views/transactions/Deposit.vue

@@ -160,7 +160,14 @@
       <template
         v-if="(!tokenCustomBridge || !tokenCustomBridge?.bridgingDisabled) && (step === 'form' || step === 'confirm')"
       >
-        <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
+        <CommonErrorBlock
+          v-if="feeError"
+          class="mt-2"
+          :show-copy-button="true"
+          :copied="copied"
+          @try-again="estimate"
+          @copy-message="copyMessage(`Fee estimation error: ${feeError.message}`)"
+        >
           Fee estimation error: {{ feeError.message }}
         </CommonErrorBlock>
         <div class="mt-4 flex items-center gap-4">
@@ -210,6 +217,19 @@
             <NuxtLink :to="{ name: 'receive-methods' }" class="alert-link">Receive funds</NuxtLink>
           </CommonAlert>
         </transition>
+        <transition v-bind="TransitionAlertScaleInOutTransition" mode="out-in">
+          <CommonAlert
+            v-if="selectedToken?.address?.toUpperCase() === WETH_L1_ADDRESS.toUpperCase()"
+            class="mt-4"
+            variant="error"
+            :icon="ExclamationTriangleIcon"
+          >
+            <p>
+              Currently, the <span class="font-medium">{{ selectedToken?.symbol }}</span> token is
+              <span class="font-medium">disabled</span> for deposit.
+            </p>
+          </CommonAlert>
+        </transition>
         <CommonErrorBlock v-if="allowanceRequestError" class="mt-2" @try-again="requestAllowance">
           Checking allowance error: {{ allowanceRequestError.message }}
         </CommonErrorBlock>
@@ -389,13 +409,15 @@ import useFee from "@/composables/zksync/deposit/useFee";
 import useTransaction from "@/composables/zksync/deposit/useTransaction";
 import { customBridgeTokens } from "@/data/customBridgeTokens";
 import { isCustomNode } from "@/data/networks";
+import { WETH_L1_ADDRESS } from "@/utils/constants";
 import DepositSubmitted from "@/views/transactions/DepositSubmitted.vue";
 
 import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 
 const route = useRoute();
 const router = useRouter();
+const { copy, copied } = useCopy();
 
 const onboardStore = useOnboardStore();
 const tokensStore = useZkSyncTokensStore();
@@ -411,6 +433,10 @@ const { balance, balanceInProgress, balanceError } = storeToRefs(zkSyncEthereumB
 
 const { captureException } = useSentryLogger();
 
+const copyMessage = async (text: string) => {
+  await copy(text);
+};
+
 const toNetworkModalOpened = ref(false);
 const toNetworkSelected = (networkKey?: string) => {
   if (destinations.value.ethereum.key === networkKey) {
@@ -646,6 +672,9 @@ watch(
 );
 
 const continueButtonDisabled = computed(() => {
+  if (selectedToken.value?.address?.toUpperCase() === WETH_L1_ADDRESS.toUpperCase()) {
+    return true;
+  }
   if (
     !transaction.value ||
     !enoughBalanceToCoverFee.value ||

views/transactions/Transfer.vue

@@ -191,7 +191,14 @@
       </template>
 
       <template v-if="!tokenCustomBridge && (step === 'form' || step === 'confirm')">
-        <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
+        <CommonErrorBlock
+          v-if="feeError"
+          class="mt-2"
+          :show-copy-button="true"
+          :copied="copied"
+          @try-again="estimate"
+          @copy-message="copyMessage(`Fee estimation error: ${feeError.message}`)"
+        >
           Fee estimation error: {{ feeError.message }}
         </CommonErrorBlock>
         <div class="mt-4 flex items-center gap-4">
@@ -304,6 +311,7 @@ const props = defineProps({
 
 const route = useRoute();
 const router = useRouter();
+const { copy, copied } = useCopy();
 
 const onboardStore = useOnboardStore();
 const walletStore = useZkSyncWalletStore();
@@ -315,6 +323,10 @@ const { destinations } = storeToRefs(useDestinationsStore());
 const { tokens, tokensRequestInProgress, tokensRequestError } = storeToRefs(tokensStore);
 const { balance, balanceInProgress, balanceError } = storeToRefs(walletStore);
 
+const copyMessage = async (text: string) => {
+  await copy(text);
+};
+
 const { captureException } = useSentryLogger();
 
 const toNetworkModalOpened = ref(false);