validate raw tx inputs

src/plugins/oSnap/components/TransactionBuilder/RawTransaction.vue

@@ -4,11 +4,12 @@ import { isAddress } from '@ethersproject/address';
 import { isBigNumberish } from '@ethersproject/bignumber/lib/bignumber';
 import { isHexString } from '@ethersproject/bytes';
 import { RawTransaction } from '../../types';
-import { createRawTransaction } from '../../utils';
+import { createRawTransaction, parseValueInput } from '../../utils';
 import AddressInput from '../Input/Address.vue';
 
 const props = defineProps<{
   transaction: RawTransaction;
+  setTransactionAsInvalid(): void;
 }>();
 
 const emit = defineEmits<{
@@ -19,21 +20,12 @@ const to = ref(props.transaction.to ?? '');
 const value = ref(props.transaction.value ?? '0');
 const data = ref(props.transaction.data ?? '0x');
 
+const isValueValid = ref(true);
+
 const isToValid = computed(() => {
   return to.value === '' || isAddress(to.value);
 });
 
-const isValueValid = computed(() => {
-  if (value.value === '') return true;
-  if (!isBigNumberish(value.value)) return false;
-  try {
-    parseAmount(value.value);
-    return true;
-  } catch (error) {
-    return false;
-  }
-});
-
 const isDataValid = computed(() => {
   return data.value === '' || isHexString(data.value);
 });
@@ -43,14 +35,39 @@ watch(value, updateTransaction);
 watch(data, updateTransaction);
 
 function updateTransaction() {
-  if (!isToValid.value || !isValueValid.value || !isDataValid.value) return;
+  try {
+    if (!isToValid.value) {
+      throw new Error('"To" address invalid');
+    }
+    if (!isValueValid.value) {
+      throw new Error('"Value" amount invalid invalid');
+    }
+    if (!isDataValid.value) {
+      throw new Error('"Data" field invalid');
+    }
 
-  const transaction = createRawTransaction({
-    to: to.value,
-    value: value.value,
-    data: data.value
-  });
-  emit('updateTransaction', transaction);
+    const transaction = createRawTransaction({
+      to: to.value,
+      value: value.value,
+      data: data.value
+    });
+    emit('updateTransaction', transaction);
+  } catch (error) {
+    console.error(error);
+    props.setTransactionAsInvalid();
+  }
+}
+
+function updateValue(newValue: string) {
+  try {
+    const parsed = parseValueInput(newValue);
+    value.value = parsed;
+    isValueValid.value = true;
+  } catch (error) {
+    isValueValid.value = false;
+  } finally {
+    updateTransaction();
+  }
 }
 </script>
 
@@ -66,6 +83,7 @@ function updateTransaction() {
     <UiInput
       v-model="value"
       :error="!isValueValid && $t('safeSnap.invalidValue')"
+      @update:model-value="updateValue($event)"
     >
       <template #label>{{ $t('safeSnap.value') }}</template>
     </UiInput>