improve bytes32 error message

src/plugins/oSnap/components/Input/MethodParameter.vue

@@ -4,6 +4,7 @@ import { isAddress } from '@ethersproject/address';
 import { isBigNumberish } from '@ethersproject/bignumber/lib/bignumber';
 import AddressInput from './Address.vue';
 import { hexZeroPad, isBytesLike } from '@ethersproject/bytes';
+import { isBytesLikeSafe } from '../../utils';
 
 const props = defineProps<{
   parameter: ParamType;
@@ -53,7 +54,7 @@ const errorMessageForDisplay = computed(() => {
 });
 
 const allowQuickFixForBytes32 = computed(() => {
-  if (!errorMessageForDisplay?.value?.includes('long')) {
+  if (errorMessageForDisplay?.value?.includes('short')) {
     return true;
   }
   return false;
@@ -97,20 +98,24 @@ function validateBytes32Input(value: string) {
     const data = value?.slice(2) || '';
 
     if (data.length < 64) {
-      validationErrorMessage.value = 'Value too short';
-      throw new Error('Less than 32 bytes');
+      const padded = hexZeroPad(value, 32);
+      if (isBytesLikeSafe(padded)) {
+        validationErrorMessage.value = 'Value too short';
+        return false;
+      }
     }
 
     if (data.length > 64) {
       validationErrorMessage.value = 'Value too long';
-      throw new Error('More than 32 bytes');
+      return false;
     }
-
-    if (!isBytesLike(value)) {
-      throw new Error('Invalid bytes32');
+    if (!isBytesLikeSafe(value)) {
+      validationErrorMessage.value = undefined;
+      return false;
     }
     return true;
   } catch {
+    validationErrorMessage.value = undefined;
     return false;
   }
 }

src/plugins/oSnap/utils/validators.ts

@@ -6,7 +6,7 @@ import {
 import memoize from 'lodash/memoize';
 import { Contract } from '@ethersproject/contracts';
 import { isBigNumberish } from '@ethersproject/bignumber/lib/bignumber';
-import { isHexString } from '@ethersproject/bytes';
+import { isBytesLike, isHexString } from '@ethersproject/bytes';
 import getProvider from '@snapshot-labs/snapshot.js/src/utils/provider';
 import { OPTIMISTIC_GOVERNOR_ABI } from '../constants';
 import { BaseTransaction, NFT, Token, Transaction, GnosisSafe } from '../types';
@@ -119,6 +119,14 @@ export function amountPositive(amount: string, decimals = 18) {
   }
 }
 
+export function isBytesLikeSafe(value: string): boolean {
+  try {
+    return isBytesLike(value);
+  } catch {
+    return false;
+  }
+}
+
 export function allTransactionsValid(transactions: Transaction[]): boolean {
   return transactions.every(tx => tx.isValid === true);
 }