fix: remove component level tx state

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

@@ -14,7 +14,6 @@ const emit = defineEmits<{
   updateTransaction: [transaction: SafeImportTransaction];
 }>();
 
-const transaction = ref<SafeImportTransaction>(props.transaction);
 const isValueValid = ref(true);
 
 const isToValid = computed(() => {
@@ -26,22 +25,22 @@ const isToValid = computed(() => {
 
 function updateFinalTransaction(tx: Partial<SafeImportTransaction>) {
   const _tx = {
-    ...transaction.value,
+    ...props.transaction,
     ...tx
   };
-  transaction.value = _tx;
-  formatTransaction();
+  const formatted = createSafeImportTransaction(_tx);
+  emit('updateTransaction', formatted);
 }
 
 function updateParams(paramsToUpdate: SafeImportTransaction['parameters']) {
-  const tx = {
-    ...transaction.value,
+  const _tx = {
+    ...props.transaction,
     parameters: {
-      ...transaction.value?.parameters,
+      ...props.transaction?.parameters,
       ...paramsToUpdate
     }
   };
-  updateFinalTransaction(tx);
+  updateFinalTransaction(_tx);
 }
 
 function updateValue(newValue: string) {
@@ -56,34 +55,8 @@ function updateValue(newValue: string) {
     isValueValid.value = true;
   } catch (error) {
     isValueValid.value = false;
-  } finally {
-    formatTransaction();
-  }
-}
-
-function formatTransaction() {
-  try {
-    if (!isValueValid.value) {
-      throw new Error('"Value" field is invalid');
-    }
-
-    if (!isToValid.value) {
-      throw new Error('"To" field is invalid');
-    }
-    const tx = createSafeImportTransaction(transaction.value);
-    console.log(tx);
-    emit('updateTransaction', tx);
-  } catch {
-    emit('updateTransaction', {
-      ...transaction.value,
-      isValid: false
-    });
   }
 }
-
-onMounted(formatTransaction);
-watch(isToValid, formatTransaction);
-watch(isValueValid, formatTransaction);
 </script>
 
 <template>

src/plugins/oSnap/utils/abi.ts

@@ -7,6 +7,7 @@ import {
   mustBeEthereumContractAddress
 } from './validators';
 import { GnosisSafe, SafeImportTransaction } from '../types';
+import { createSafeImportTransaction } from './transactions';
 
 /**
  * Checks if the `parameter` of a contract method `method` takes an array or tuple as input, based on the `baseType` of the parameter.
@@ -142,7 +143,7 @@ export function transformSafeMethodToFunctionFragment(
 export function initializeSafeImportTransaction(
   unprocessedTransactions: GnosisSafe.BatchTransaction
 ): SafeImportTransaction {
-  return {
+  return createSafeImportTransaction({
     type: 'safeImport',
     to: unprocessedTransactions.to,
     value: unprocessedTransactions.value,
@@ -154,7 +155,7 @@ export function initializeSafeImportTransaction(
       : undefined,
     parameters: unprocessedTransactions.contractInputsValues,
     formatted: ['', 0, '0', '0x']
-  };
+  });
 }
 
 export function encodeSafeMethodAndParams(

src/plugins/oSnap/utils/transactions.ts

@@ -11,6 +11,8 @@ import {
   SafeImportTransaction
 } from '../types';
 import { encodeMethodAndParams, encodeSafeMethodAndParams } from './abi';
+import { isAddress } from '@ethersproject/address';
+import { validateTransaction } from './validators';
 
 /**
  * Creates a formatted transaction for the Optimistic Governor to execute
@@ -171,57 +173,72 @@ export function parseValueInput(input: string) {
 export function createSafeImportTransaction(
   params: SafeImportTransaction
 ): SafeImportTransaction {
-  const abi = params.method ? JSON.stringify(Array(params.method)) : undefined;
-  // is native transfer funds
-  if (!params.method) {
-    const data = '0x';
+  try {
+    // check "value" & "to"
+    if (!validateTransaction(params)) {
+      throw new Error('Invalid transaction');
+    }
+    const abi = params.method
+      ? JSON.stringify(Array(params.method))
+      : undefined;
+    // is native transfer funds
+    if (!params.method) {
+      const data = '0x';
+      const formatted = createFormattedOptimisticGovernorTransaction({
+        to: params.to,
+        value: params.value,
+        data
+      });
+      return {
+        ...params,
+        isValid: true,
+        abi,
+        formatted,
+        data
+      };
+    }
+    // is contract interaction with NO args
+    if (!params.parameters) {
+      const data = params?.data || '0x';
+      const formatted = createFormattedOptimisticGovernorTransaction({
+        to: params.to,
+        value: params.value,
+        data
+      });
+      return {
+        ...params,
+        isValid: true,
+
+        formatted,
+        data
+      };
+    }
+
+    // is contract interaction WITH args
+    // will throw if args are invalid
+    const encodedData =
+      params?.data ||
+      encodeSafeMethodAndParams(params.method, params.parameters) ||
+      '0x';
+
     const formatted = createFormattedOptimisticGovernorTransaction({
       to: params.to,
       value: params.value,
-      data
+      data: encodedData
     });
+
     return {
       ...params,
       isValid: true,
       abi,
       formatted,
-      data
+      data: encodedData
     };
-  }
-  // is contract interaction with NO args
-  if (!params.parameters) {
-    const data = params?.data || '0x';
-    const formatted = createFormattedOptimisticGovernorTransaction({
-      to: params.to,
-      value: params.value,
-      data
-    });
+  } catch (error) {
+    console.error(error);
     return {
       ...params,
-      isValid: true,
-
-      formatted,
-      data
+      isValid: false
     };
   }
-
-  // is contract interaction WITH args
-  const encodedData =
-    params?.data ||
-    encodeSafeMethodAndParams(params.method, params.parameters) ||
-    '0x';
-
-  const formatted = createFormattedOptimisticGovernorTransaction({
-    to: params.to,
-    value: params.value,
-    data: encodedData
-  });
-
-  return {
-    ...params,
-    isValid: true,
-    abi,
-    formatted,
-    data: encodedData
-  };
 }