allow quick fix for short bytes32

src/components/Ui/UiInput.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
   additionalInputClass?: string;
   focusOnMount?: boolean;
   readonly?: boolean;
+  quickFix?(): void;
 }>();
 
 const emit = defineEmits(['update:modelValue', 'blur']);
@@ -64,13 +65,22 @@ onMounted(() => {
     </div>
     <div
       :class="[
-        's-error relative z-0',
+        's-error relative z-0 flex justify-start',
         !!error ? '-mt-[20px] opacity-100' : '-mt-[48px] opacity-0'
       ]"
     >
       <BaseIcon name="warning" class="text-red-500 mr-2" />
-      {{ error || '' }}
       <!-- The fact that error can be bool or string makes this necessary -->
+      {{ error || '' }}
+      <!-- Allow parent to format value with action -->
+      <button
+        v-if="quickFix"
+        class="ml-auto h-full px-1 rounded-full"
+        @click="quickFix"
+      >
+        Quick Fix
+        <i-ho-sparkles class="inline" />
+      </button>
     </div>
   </div>
 </template>

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

@@ -43,6 +43,22 @@ const newValue = ref(props.value);
 const validationState = ref(true);
 const isInputValid = computed(() => validationState.value);
 
+const validationErrorMessage = ref<string>();
+const errorMessageForDisplay = computed(() => {
+  if (!isInputValid.value) {
+    return validationErrorMessage.value
+      ? validationErrorMessage.value
+      : `Invalid ${props.parameter.baseType}`;
+  }
+});
+
+const allowQuickFixForBytes32 = computed(() => {
+  if (errorMessageForDisplay?.value?.includes('short')) {
+    return true;
+  }
+  return false;
+});
+
 function validate() {
   if (!isDirty.value) return true;
   if (isAddressInput.value) return isAddress(newValue.value);
@@ -59,7 +75,11 @@ watch(props.parameter, () => {
 });
 
 watch(newValue, () => {
-  validationState.value = validate();
+  const valid = validate();
+  if (valid) {
+    validationErrorMessage.value = undefined;
+  }
+  validationState.value = valid;
   emit('updateParameterValue', newValue.value);
 });
 
@@ -71,12 +91,23 @@ function validateBytesInput(value: string) {
   return isBytesLike(value);
 }
 
+// provide better feedback/validation messages for bytes32 inputs
 function validateBytes32Input(value: string) {
   try {
-    if (value.slice(2).length !== 64) {
-      throw new Error('Not 32 bytes');
+    const data = value?.slice(2) || '';
+
+    if (!isBytesLike(value)) {
+      throw new Error('Invalid bytes32');
     }
-    return isBytesLike(value);
+    if (data.length < 64) {
+      validationErrorMessage.value = 'Value too short';
+      throw new Error('Less than 32 bytes');
+    }
+    if (data.length > 64) {
+      validationErrorMessage.value = 'Value too long';
+      throw new Error('More than 32 bytes');
+    }
+    return true;
   } catch {
     return false;
   }
@@ -135,7 +166,7 @@ onMounted(() => {
   <UiInput
     v-if="inputType === 'array'"
     :placeholder="arrayPlaceholder"
-    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
@@ -144,7 +175,7 @@ onMounted(() => {
   <UiInput
     v-if="inputType === 'number'"
     placeholder="123456"
-    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
@@ -153,7 +184,7 @@ onMounted(() => {
   <UiInput
     v-if="inputType === 'bytes'"
     placeholder="0x123abc"
-    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
@@ -162,8 +193,9 @@ onMounted(() => {
   <UiInput
     v-if="inputType === 'bytes32'"
     placeholder="0x123abc"
-    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :error="errorMessageForDisplay"
     :model-value="value"
+    :quick-fix="allowQuickFixForBytes32 ? formatBytes32 : undefined"
     @blur="formatBytes32"
     @update:model-value="onChange($event)"
   >