From 7bba94b2874eb2d090dd82e57e38e540d2185402 Mon Sep 17 00:00:00 2001
From: Gerhard Steenkamp <51655063+gsteenkamp89@users.noreply.github.com>
Date: Fri, 12 Apr 2024 13:39:41 +0200
Subject: [PATCH] feat: add support to osnap plugin for importing transactions
 from Safe builder (#4649)

* feat: allow safe json upload into osnap tx builder

Signed-off-by: david <david@umaproject.org>

* parse batchfile & populate input fields with values

* show value & to fields

* improve input

* improve file input error handling and styling

* refactor

* refactor

* minor bug fix

* allow quick fix for short bytes32

* align icon better

* make file input own component

* import file once and initialize multiple safeImport transactions

* check if safe address & chainId match

* small fixes

* clean up comments

* better border sie for file input

* clear input element value to allow recurring upload

* fix quick fix

* handle multiple files

* better error message

* emit from watcher

* fix: use upstream state only

* clean up

* do byteslike check last

* fixes

* add default label

* fix: remove component level tx state

* Merge branch 'master' into uma-add-safe-transaction-file-import-to-osnap-plugin

* validate address input on blur

* clean up input css

* improve bytes32 error message

* replace readOnly with hidden, casing change

---------

Signed-off-by: david <david@umaproject.org>
Co-authored-by: david <david@umaproject.org>
Co-authored-by: Chaitanya <yourchaitu@gmail.com>
---
 src/components/Ui/UiInput.vue                 |   8 +-
 src/helpers/utils.ts                          |   4 +
 src/plugins/oSnap/Create.vue                  |   3 -
 .../oSnap/components/Input/Address.vue        |   9 +-
 .../components/Input/FileInput/FileInput.vue  | 126 ++++++++++++++++++
 .../oSnap/components/Input/FileInput/utils.ts |  17 +++
 .../components/Input/MethodParameter.vue      |  71 ++++++++--
 .../components/Input/TransactionType.vue      |   8 ++
 .../ModalTransactionType.vue                  |  25 ++--
 .../TransactionBuilder/RawTransaction.vue     |   4 +-
 .../TransactionBuilder/SafeImport.vue         | 107 +++++++++++++++
 .../TransactionBuilder/Transaction.vue        |  51 +++----
 .../TransactionBuilder/TransactionBuilder.vue |  11 ++
 .../TransactionBuilder/TransactionImport.vue  |  76 +++++++++++
 .../TransactionBuilder/TransferFunds.vue      |   1 -
 src/plugins/oSnap/constants.ts                |   3 +-
 src/plugins/oSnap/types.ts                    |  87 +++++++++++-
 src/plugins/oSnap/utils/abi.ts                |  53 ++++++++
 src/plugins/oSnap/utils/safeImport.ts         |  47 +++++++
 src/plugins/oSnap/utils/transactions.ts       |  80 ++++++++++-
 src/plugins/oSnap/utils/validators.ts         |  86 +++++++++++-
 21 files changed, 817 insertions(+), 60 deletions(-)
 create mode 100644 src/plugins/oSnap/components/Input/FileInput/FileInput.vue
 create mode 100644 src/plugins/oSnap/components/Input/FileInput/utils.ts
 create mode 100644 src/plugins/oSnap/components/TransactionBuilder/SafeImport.vue
 create mode 100644 src/plugins/oSnap/components/TransactionBuilder/TransactionImport.vue
 create mode 100644 src/plugins/oSnap/utils/safeImport.ts

diff --git a/src/components/Ui/UiInput.vue b/src/components/Ui/UiInput.vue
index 538f3ffc7..b5c2973d2 100644
--- a/src/components/Ui/UiInput.vue
+++ b/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']);
@@ -69,8 +70,13 @@ onMounted(() => {
       ]"
     >
       <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" @click="quickFix">
+        Quick Fix
+        <i-ho-sparkles class="inline" />
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
index 1b5b75d05..c9e1829a5 100644
--- a/src/helpers/utils.ts
+++ b/src/helpers/utils.ts
@@ -200,3 +200,7 @@ export function toChecksumAddress(address: string) {
     return address;
   }
 }
+
+export function addressEqual(address1: string, address2: string) {
+  return address1.toLowerCase() === address2.toLowerCase();
+}
diff --git a/src/plugins/oSnap/Create.vue b/src/plugins/oSnap/Create.vue
index f4cc6fcc3..d4942df81 100644
--- a/src/plugins/oSnap/Create.vue
+++ b/src/plugins/oSnap/Create.vue
@@ -49,19 +49,16 @@ const collectables = ref<NFT[]>([]);
 function addTransaction(transaction: Transaction) {
   if (newPluginData.value.safe === null) return;
   newPluginData.value.safe.transactions.push(transaction);
-  update(newPluginData.value);
 }
 
 function removeTransaction(transactionIndex: number) {
   if (!newPluginData.value.safe) return;
   newPluginData.value.safe.transactions.splice(transactionIndex, 1);
-  update(newPluginData.value);
 }
 
 function updateTransaction(transaction: Transaction, transactionIndex: number) {
   if (!newPluginData.value.safe) return;
   newPluginData.value.safe.transactions[transactionIndex] = transaction;
-  update(newPluginData.value);
 }
 
 async function fetchTokens(url: string): Promise<Token[]> {
diff --git a/src/plugins/oSnap/components/Input/Address.vue b/src/plugins/oSnap/components/Input/Address.vue
index 00895563c..eddd5636c 100644
--- a/src/plugins/oSnap/components/Input/Address.vue
+++ b/src/plugins/oSnap/components/Input/Address.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   error?: string;
   disabled?: boolean;
 }>();
+
 const emit = defineEmits<{
   'update:modelValue': [value: string];
 }>();
@@ -24,6 +25,7 @@ const validate = () => {
     error.value = 'Address is required';
     return;
   }
+
   if (!mustBeEthereumAddress(input.value)) {
     error.value = 'Invalid address';
     return;
@@ -49,6 +51,11 @@ onMounted(() => {
 const handleInput = () => {
   emit('update:modelValue', input.value);
 };
+
+const handleBlur = () => {
+  dirty.value = true;
+  validate();
+};
 </script>
 
 <template>
@@ -57,7 +64,7 @@ const handleInput = () => {
     :disabled="disabled"
     :error="props.error ?? (error || '')"
     @input="handleInput()"
-    @blur="dirty = true"
+    @blur="handleBlur"
   >
     <template v-if="label" #label>{{ label }}</template>
   </UiInput>
diff --git a/src/plugins/oSnap/components/Input/FileInput/FileInput.vue b/src/plugins/oSnap/components/Input/FileInput/FileInput.vue
new file mode 100644
index 000000000..2f86e80bb
--- /dev/null
+++ b/src/plugins/oSnap/components/Input/FileInput/FileInput.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, defineProps, watch } from 'vue';
+import { getFilesFromEvent, isFileOfType } from './utils';
+
+type InputState = 'IDLE' | 'INVALID_TYPE' | 'VALID' | 'INVALID_QUANTITY';
+
+const props = defineProps<{
+  fileType: File['type'];
+  error?: string | undefined;
+  multiple?: boolean;
+  defaultLabel?: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:file', file: File | null): void;
+  (event: 'update:fileInputState', state: InputState): void;
+}>();
+const inputRef = ref<HTMLInputElement>();
+const file = ref<File | null>();
+const fileInputState = ref<InputState>('IDLE');
+const isDropping = ref(false);
+
+const isError = computed(() => {
+  return (
+    !!props.error ||
+    fileInputState.value === 'INVALID_TYPE' ||
+    fileInputState.value === 'INVALID_QUANTITY'
+  );
+});
+
+const isAccepted = computed(() => {
+  return fileInputState.value === 'VALID' && !props?.error;
+});
+
+const handleFileChange = (event: Event | DragEvent) => {
+  isDropping.value = false;
+  const _files = getFilesFromEvent(event);
+  if (!_files?.length) return;
+
+  // enforce single drop based on props
+  if (!props.multiple) {
+    if (_files?.length && _files?.length > 1) {
+      fileInputState.value = 'INVALID_QUANTITY';
+      file.value = null;
+      clearInputValue();
+      return;
+    }
+  }
+  const _file = _files[0];
+  if (!isFileOfType(_file, props.fileType)) {
+    fileInputState.value = 'INVALID_TYPE';
+    file.value = null;
+  } else {
+    file.value = _file;
+    fileInputState.value = 'VALID';
+  }
+  clearInputValue();
+};
+
+function clearInputValue() {
+  if (inputRef?.value) {
+    inputRef.value.value = '';
+  }
+}
+
+function toggleDropping() {
+  isDropping.value = !isDropping.value;
+}
+
+watch(file, newFile => {
+  if (newFile) {
+    emit('update:file', newFile);
+  }
+});
+
+watch(fileInputState, newState => {
+  emit('update:fileInputState', newState);
+});
+</script>
+
+<template>
+  <label
+    for="file_input"
+    @dragenter.prevent="toggleDropping"
+    @dragleave.prevent="toggleDropping"
+    @dragover.prevent
+    @drop.prevent="handleFileChange($event)"
+    class="my-2 w-full group hover:bg-transparent hover:border-skin-text hover:text-skin-link hover:cursor-pointer inline-block border-2 border-dashed py-2 px-4 rounded-xl"
+    :class="{
+      'border-solid border-skin-text text-skin-link bg-transparent': isDropping,
+      'bg-red/10 border-red/50 text-red/80': isError,
+      'bg-green/10 border-green/50 text-green/80': isAccepted
+    }"
+  >
+    <div
+      class="flex line-clamp-2 flex-col gap-1 items-center text-center justify-center"
+    >
+      <i-ho-upload />
+      <span class="line-clamp-2">
+        <template v-if="props.error">{{ props.error }}</template>
+        <template v-else-if="fileInputState === 'INVALID_TYPE'"
+          >File type must be <strong>{{ props.fileType }}</strong
+          >. Please choose another.</template
+        >
+        <template v-else-if="fileInputState === 'INVALID_QUANTITY'"
+          >Drop only <strong class="underline">one</strong> file at a time
+        </template>
+        <template v-else-if="fileInputState === 'VALID' && file">{{
+          file.name
+        }}</template>
+        <template v-else="fileInputState === 'IDLE'">{{
+          props.defaultLabel ?? 'Click to select file, or drag n drop'
+        }}</template>
+      </span>
+    </div>
+
+    <input
+      ref="inputRef"
+      id="file_input"
+      class="hidden"
+      :accept="props.fileType"
+      type="file"
+      @change="handleFileChange"
+    />
+  </label>
+</template>
diff --git a/src/plugins/oSnap/components/Input/FileInput/utils.ts b/src/plugins/oSnap/components/Input/FileInput/utils.ts
new file mode 100644
index 000000000..7716e49a3
--- /dev/null
+++ b/src/plugins/oSnap/components/Input/FileInput/utils.ts
@@ -0,0 +1,17 @@
+export function isFileOfType(file: File, type: File['type']) {
+  return file.type === type;
+}
+
+export function getFilesFromEvent(event: DragEvent | Event) {
+  let _files: FileList | undefined | null;
+
+  if (event instanceof DragEvent) {
+    _files = event.dataTransfer?.files;
+  }
+
+  if (event.target && event.target instanceof HTMLInputElement) {
+    _files = (event?.currentTarget as HTMLInputElement)?.files;
+  }
+  if (!_files) return;
+  return _files;
+}
diff --git a/src/plugins/oSnap/components/Input/MethodParameter.vue b/src/plugins/oSnap/components/Input/MethodParameter.vue
index a0f9025c4..e6437a69b 100644
--- a/src/plugins/oSnap/components/Input/MethodParameter.vue
+++ b/src/plugins/oSnap/components/Input/MethodParameter.vue
@@ -4,10 +4,12 @@ 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;
   value: string;
+  validateOnMount?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -37,8 +39,28 @@ const inputType = computed(() => {
 
 const label = `${props.parameter.name} (${props.parameter.type})`;
 const arrayPlaceholder = `E.g. ["text", 123, 0x123]`;
+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 isInputValid = computed(() => {
+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);
   if (isArrayInput.value) return validateArrayInput(newValue.value);
@@ -46,9 +68,7 @@ const isInputValid = computed(() => {
   if (isBytes32Input.value) return validateBytes32Input(newValue.value);
   if (isBytesInput.value) return validateBytesInput(newValue.value);
   return true;
-});
-
-const newValue = ref(props.value);
+}
 
 watch(props.parameter, () => {
   newValue.value = '';
@@ -56,6 +76,11 @@ watch(props.parameter, () => {
 });
 
 watch(newValue, () => {
+  const valid = validate();
+  if (valid) {
+    validationErrorMessage.value = undefined;
+  }
+  validationState.value = valid;
   emit('updateParameterValue', newValue.value);
 });
 
@@ -67,13 +92,30 @@ 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('String too long');
+    const data = value?.slice(2) || '';
+
+    if (data.length < 64) {
+      const padded = hexZeroPad(value, 32);
+      if (isBytesLikeSafe(padded)) {
+        validationErrorMessage.value = 'Value too short';
+        return false;
+      }
+    }
+
+    if (data.length > 64) {
+      validationErrorMessage.value = 'Value too long';
+      return false;
     }
-    return isBytesLike(value);
+    if (!isBytesLikeSafe(value)) {
+      validationErrorMessage.value = undefined;
+      return false;
+    }
+    return true;
   } catch {
+    validationErrorMessage.value = undefined;
     return false;
   }
 }
@@ -103,6 +145,12 @@ function formatBytes32() {
     newValue.value = hexZeroPad(newValue.value, 32);
   }
 }
+onMounted(() => {
+  if (props.validateOnMount) {
+    isDirty.value = true;
+  }
+  validationState.value = validate();
+});
 </script>
 
 <template>
@@ -125,7 +173,7 @@ function formatBytes32() {
   <UiInput
     v-if="inputType === 'array'"
     :placeholder="arrayPlaceholder"
-    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
@@ -134,7 +182,7 @@ function formatBytes32() {
   <UiInput
     v-if="inputType === 'number'"
     placeholder="123456"
-    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
@@ -143,7 +191,7 @@ function formatBytes32() {
   <UiInput
     v-if="inputType === 'bytes'"
     placeholder="0x123abc"
-    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
@@ -152,8 +200,9 @@ function formatBytes32() {
   <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)"
   >
diff --git a/src/plugins/oSnap/components/Input/TransactionType.vue b/src/plugins/oSnap/components/Input/TransactionType.vue
index 7cadab8c0..c26e1da1f 100644
--- a/src/plugins/oSnap/components/Input/TransactionType.vue
+++ b/src/plugins/oSnap/components/Input/TransactionType.vue
@@ -16,6 +16,7 @@ const transactionTypesWithDetails: {
   type: TransactionType;
   title: string;
   description: string;
+  hidden?: boolean;
 }[] = [
   {
     type: 'transferFunds',
@@ -36,6 +37,13 @@ const transactionTypesWithDetails: {
     type: 'raw',
     title: 'Raw transaction',
     description: 'Send a raw transaction'
+  },
+  {
+    type: 'safeImport',
+    title: 'Import Safe file',
+    description:
+      'Import JSON file exported from Gnosis Safe transaction builder',
+    hidden: true
   }
 ];
 </script>
diff --git a/src/plugins/oSnap/components/TransactionBuilder/ModalTransactionType.vue b/src/plugins/oSnap/components/TransactionBuilder/ModalTransactionType.vue
index 527628dd0..5b0b33ced 100644
--- a/src/plugins/oSnap/components/TransactionBuilder/ModalTransactionType.vue
+++ b/src/plugins/oSnap/components/TransactionBuilder/ModalTransactionType.vue
@@ -8,6 +8,7 @@ defineProps<{
     type: TransactionType;
     title: string;
     description: string;
+    hidden?: boolean;
   }[];
 }>();
 
@@ -28,17 +29,19 @@ function select(type: TransactionType) {
       <h3>Select transaction type</h3>
     </template>
     <div class="mx-0 my-4 flex flex-col space-y-3 md:mx-4">
-      <button
-        v-for="(typeAndDetails, key) in transactionTypesWithDetails"
-        :key="key"
-        @click="select(typeAndDetails.type)"
-      >
-        <BaseModalSelectItem
-          :selected="typeAndDetails.type === selected"
-          :title="typeAndDetails.title"
-          :description="typeAndDetails.description"
-        />
-      </button>
+      <template v-for="(typeAndDetails, key) in transactionTypesWithDetails">
+        <button
+          v-if="!typeAndDetails.hidden"
+          :key="key"
+          @click="select(typeAndDetails.type)"
+        >
+          <BaseModalSelectItem
+            :selected="typeAndDetails.type === selected"
+            :title="typeAndDetails.title"
+            :description="typeAndDetails.description"
+          />
+        </button>
+      </template>
     </div>
   </BaseModal>
 </template>
diff --git a/src/plugins/oSnap/components/TransactionBuilder/RawTransaction.vue b/src/plugins/oSnap/components/TransactionBuilder/RawTransaction.vue
index 357f8783c..19d58d5f3 100644
--- a/src/plugins/oSnap/components/TransactionBuilder/RawTransaction.vue
+++ b/src/plugins/oSnap/components/TransactionBuilder/RawTransaction.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { parseAmount } from '@/helpers/utils';
 import { isAddress } from '@ethersproject/address';
-import { isBigNumberish } from '@ethersproject/bignumber/lib/bignumber';
 import { isHexString } from '@ethersproject/bytes';
 import { RawTransaction } from '../../types';
 import { createRawTransaction, parseValueInput } from '../../utils';
@@ -76,7 +74,7 @@ function updateValue(newValue: string) {
     <AddressInput
       v-model="to"
       :input-props="{ required: false }"
-      :error="!isToValid && $t('safeSnap.invalidAddress')"
+      :error="!isToValid ? $t('safeSnap.invalidAddress') : undefined"
       :label="$t('safeSnap.to')"
     />
 
diff --git a/src/plugins/oSnap/components/TransactionBuilder/SafeImport.vue b/src/plugins/oSnap/components/TransactionBuilder/SafeImport.vue
new file mode 100644
index 000000000..e392311b7
--- /dev/null
+++ b/src/plugins/oSnap/components/TransactionBuilder/SafeImport.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { SafeImportTransaction, Network } from '../../types';
+import { createSafeImportTransaction, parseValueInput } from '../../utils';
+import MethodParameterInput from '../../components/Input/MethodParameter.vue';
+import AddressInput from '../../components/Input/Address.vue';
+import { isAddress } from '@ethersproject/address';
+
+const props = defineProps<{
+  transaction: SafeImportTransaction;
+  network: Network;
+}>();
+
+const emit = defineEmits<{
+  updateTransaction: [transaction: SafeImportTransaction];
+}>();
+
+const isValueValid = ref(true);
+
+const isToValid = computed(() => {
+  if (!props.transaction?.to) {
+    return true;
+  }
+  return isAddress(props.transaction.to);
+});
+
+function updateFinalTransaction(tx: Partial<SafeImportTransaction>) {
+  const _tx = {
+    ...props.transaction,
+    ...tx
+  };
+  const formatted = createSafeImportTransaction(_tx);
+  emit('updateTransaction', formatted);
+}
+
+function updateParams(paramsToUpdate: SafeImportTransaction['parameters']) {
+  const _tx = {
+    ...props.transaction,
+    parameters: {
+      ...props.transaction?.parameters,
+      ...paramsToUpdate
+    }
+  };
+  updateFinalTransaction(_tx);
+}
+
+function updateValue(newValue: string) {
+  try {
+    if (!props.transaction) {
+      return;
+    }
+    const parsed = parseValueInput(newValue);
+    updateFinalTransaction({
+      value: parsed
+    });
+    isValueValid.value = true;
+  } catch (error) {
+    isValueValid.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="text-skin-text text-left">
+    {{
+      props.transaction?.method?.name
+        ? `Contract interaction (${props.transaction.method.name})`
+        : 'Native Transfer'
+    }}
+  </div>
+
+  <div v-if="props.transaction" class="flex flex-col gap-2 mt-2">
+    <AddressInput
+      @update:model-value="(e: string) => updateFinalTransaction({ to: e })"
+      :model-value="props.transaction.to"
+      :label="$t('safeSnap.to')"
+      :error="!isToValid ? 'Invalid address' : undefined"
+    />
+
+    <UiInput
+      placeholder="123456"
+      :error="!isValueValid && 'Invalid value'"
+      :model-value="props.transaction.value"
+      @update:model-value="(e: string) => updateValue(e)"
+    >
+      <template #label>Value (wei)</template>
+    </UiInput>
+
+    <!-- ContractInteraction Parameters -->
+    <div
+      class="flex flex-col gap-2"
+      v-if="props.transaction.method?.inputs?.length"
+    >
+      <div class="text-left mt-3">Function Parameters</div>
+      <div class="divider h-[1px] bg-skin-border mb-3" />
+      <MethodParameterInput
+        v-for="input in props.transaction.method.inputs"
+        :key="input.name"
+        :validateOnMount="true"
+        :parameter="input"
+        :value="props.transaction?.parameters?.[input.name] ?? ''"
+        @update-parameter-value="
+          (e: string) => updateParams({ [input.name]: e })
+        "
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/plugins/oSnap/components/TransactionBuilder/Transaction.vue b/src/plugins/oSnap/components/TransactionBuilder/Transaction.vue
index e5251c025..a61856079 100644
--- a/src/plugins/oSnap/components/TransactionBuilder/Transaction.vue
+++ b/src/plugins/oSnap/components/TransactionBuilder/Transaction.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { cloneDeep } from 'lodash';
 import {
   ContractInteractionTransaction,
   TransferNftTransaction,
@@ -9,13 +8,15 @@ import {
   type Transaction as TTransaction,
   type TransactionType as TTransactionType,
   type Token,
-  type TransferFundsTransaction
+  type TransferFundsTransaction,
+  SafeImportTransaction
 } from '../../types';
 import TransactionType from '../Input/TransactionType.vue';
 import ContractInteraction from './ContractInteraction.vue';
 import RawTransaction from './RawTransaction.vue';
 import TransferFunds from './TransferFunds.vue';
 import TransferNFT from './TransferNFT.vue';
+import SafeImport from './SafeImport.vue';
 
 const props = defineProps<{
   transaction: TTransaction;
@@ -32,27 +33,27 @@ const emit = defineEmits<{
   removeTransaction: [transactionIndex: number];
 }>();
 
-const newTransaction = ref<TTransaction>(cloneDeep(props.transaction));
-
 function updateTransactionType(transactionType: TTransactionType) {
-  newTransaction.value = {
-    type: transactionType,
-    to: '',
-    value: '0',
-    data: '0x',
-    formatted: ['', 0, '0', '0x']
-  };
-  emit('updateTransaction', newTransaction.value, props.transactionIndex);
+  emit(
+    'updateTransaction',
+    {
+      type: transactionType,
+      to: '',
+      value: '0',
+      data: '0x',
+      formatted: ['', 0, '0', '0x']
+    },
+    props.transactionIndex
+  );
 }
 
 function updateTransaction(transaction: TTransaction) {
-  newTransaction.value = transaction;
-  emit('updateTransaction', newTransaction.value, props.transactionIndex);
+  emit('updateTransaction', transaction, props.transactionIndex);
 }
 
 function setTransactionAsInvalid() {
   const tx: TTransaction = {
-    ...newTransaction.value,
+    ...props.transaction,
     isValid: false
   };
   emit('updateTransaction', tx, props.transactionIndex);
@@ -65,10 +66,7 @@ function setTransactionAsInvalid() {
       <h3 class="text-left text-base">
         Transaction {{ transactionIndex + 1 }}
       </h3>
-      <button
-        v-if="transactionIndex !== 0"
-        @click="emit('removeTransaction', transactionIndex)"
-      >
+      <button @click="emit('removeTransaction', transactionIndex)">
         Remove
       </button>
     </div>
@@ -78,7 +76,7 @@ function setTransactionAsInvalid() {
     />
     <ContractInteraction
       v-if="transaction.type === 'contractInteraction'"
-      :transaction="newTransaction as ContractInteractionTransaction"
+      :transaction="transaction as ContractInteractionTransaction"
       :network="network"
       :setTransactionAsInvalid="setTransactionAsInvalid"
       @update-transaction="updateTransaction"
@@ -88,7 +86,7 @@ function setTransactionAsInvalid() {
       v-if="transaction.type === 'transferFunds'"
       :network="network"
       :tokens="tokens"
-      :transaction="newTransaction as TransferFundsTransaction"
+      :transaction="transaction as TransferFundsTransaction"
       :setTransactionAsInvalid="setTransactionAsInvalid"
       @update-transaction="updateTransaction"
     />
@@ -98,16 +96,23 @@ function setTransactionAsInvalid() {
       :network="network"
       :safe-address="safeAddress"
       :collectables="collectables"
-      :transaction="newTransaction as TransferNftTransaction"
+      :transaction="transaction as TransferNftTransaction"
       :setTransactionAsInvalid="setTransactionAsInvalid"
       @update-transaction="updateTransaction"
     />
 
     <RawTransaction
       v-if="transaction.type === 'raw'"
-      :transaction="newTransaction as TRawTransaction"
+      :transaction="transaction as TRawTransaction"
       :setTransactionAsInvalid="setTransactionAsInvalid"
       @update-transaction="updateTransaction"
     />
+
+    <SafeImport
+      v-if="transaction.type === 'safeImport'"
+      :transaction="transaction as SafeImportTransaction"
+      :network="network"
+      @update-transaction="updateTransaction"
+    />
   </div>
 </template>
diff --git a/src/plugins/oSnap/components/TransactionBuilder/TransactionBuilder.vue b/src/plugins/oSnap/components/TransactionBuilder/TransactionBuilder.vue
index 70fc2771a..e96ee5e67 100644
--- a/src/plugins/oSnap/components/TransactionBuilder/TransactionBuilder.vue
+++ b/src/plugins/oSnap/components/TransactionBuilder/TransactionBuilder.vue
@@ -5,12 +5,14 @@ import {
   GnosisSafe,
   NFT,
   Network,
+  SafeImportTransaction,
   Transaction as TTransaction,
   Token
 } from '../../types';
 import { getSafeAppLink } from '../../utils';
 import Transaction from './Transaction.vue';
 import TenderlySimulation from './TenderlySimulation.vue';
+import TransactionImport from './TransactionImport.vue';
 
 const props = defineProps<{
   safeAddress: string;
@@ -34,6 +36,10 @@ const emit = defineEmits<{
 const safeLink = computed(() =>
   getSafeAppLink(props.network, props.safeAddress)
 );
+
+function addImportedTransactions(transactions: SafeImportTransaction[]) {
+  transactions.forEach(tx => emit('addTransaction', tx));
+}
 </script>
 
 <template>
@@ -57,6 +63,11 @@ const safeLink = computed(() =>
   <p class="my-2">
     <strong>Number of transactions</strong
     ><span class="ml-2 inline-block">{{ transactions.length }}</span>
+    <TransactionImport
+      @update:imported-transactions="addImportedTransactions"
+      :safe="props.safe"
+      :network="props.network"
+    />
   </p>
   <div class="text-center">
     <Transaction
diff --git a/src/plugins/oSnap/components/TransactionBuilder/TransactionImport.vue b/src/plugins/oSnap/components/TransactionBuilder/TransactionImport.vue
new file mode 100644
index 000000000..cf62c6eb3
--- /dev/null
+++ b/src/plugins/oSnap/components/TransactionBuilder/TransactionImport.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  GnosisSafe,
+  Network,
+  SafeImportTransaction,
+  isErrorWithMessage
+} from '../../types';
+import { initializeSafeImportTransaction } from '../../utils';
+import { parseGnosisSafeFile } from '../../utils/safeImport';
+import FileInput from '../Input/FileInput/FileInput.vue';
+
+const props = defineProps<{
+  network: Network;
+  safe: GnosisSafe | null;
+}>();
+
+// Emits definition
+const emit = defineEmits<{
+  (
+    event: 'update:importedTransactions',
+    importedTransactions: SafeImportTransaction[]
+  ): void;
+}>();
+
+const file = ref<File>(); // raw file, if valid type
+const safeFile = ref<GnosisSafe.BatchFile>(); // parsed, type-safe file
+
+const error = ref<string>();
+
+function resetState() {
+  file.value = undefined;
+  safeFile.value = undefined;
+  error.value = undefined;
+}
+
+watch(file, async () => {
+  if (!file.value) return;
+  parseGnosisSafeFile(file.value, props.safe)
+    .then(result => {
+      safeFile.value = result;
+    })
+    .catch(e => {
+      safeFile.value = undefined;
+      if (isErrorWithMessage(e)) {
+        error.value = e.message;
+        return;
+      }
+      error.value = 'Safe file corrupted. Please select another.';
+    });
+});
+
+function handleFileChange(_file: File | null) {
+  if (_file) {
+    resetState();
+    file.value = _file;
+  }
+}
+
+watch(safeFile, safeFile => {
+  if (safeFile) {
+    const convertedTxs = safeFile.transactions.map(
+      initializeSafeImportTransaction
+    );
+    emit('update:importedTransactions', convertedTxs);
+  }
+});
+</script>
+
+<template>
+  <FileInput
+    :error="error"
+    @update:file="handleFileChange"
+    :file-type="'application/json'"
+    :defaultLabel="'Import transactions from Safe file, drag and drop'"
+  />
+</template>
diff --git a/src/plugins/oSnap/components/TransactionBuilder/TransferFunds.vue b/src/plugins/oSnap/components/TransactionBuilder/TransferFunds.vue
index df6a023f3..c5bf22862 100644
--- a/src/plugins/oSnap/components/TransactionBuilder/TransferFunds.vue
+++ b/src/plugins/oSnap/components/TransactionBuilder/TransferFunds.vue
@@ -5,7 +5,6 @@ import { Network, Token, TransferFundsTransaction } from '../../types';
 import {
   createTransferFundsTransaction,
   getERC20TokenTransferTransactionData,
-  getNativeAsset,
   isTransferFundsValid
 } from '../../utils';
 import AddressInput from '../Input/Address.vue';
diff --git a/src/plugins/oSnap/constants.ts b/src/plugins/oSnap/constants.ts
index 795cbe97c..44b6a08e0 100644
--- a/src/plugins/oSnap/constants.ts
+++ b/src/plugins/oSnap/constants.ts
@@ -1542,7 +1542,8 @@ export const transactionTypes = [
   'transferFunds',
   'transferNFT',
   'contractInteraction',
-  'raw'
+  'raw',
+  'safeImport'
 ] as const;
 
 export const solidityZeroHexString =
diff --git a/src/plugins/oSnap/types.ts b/src/plugins/oSnap/types.ts
index 998aaeef7..cf2533591 100644
--- a/src/plugins/oSnap/types.ts
+++ b/src/plugins/oSnap/types.ts
@@ -2,6 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber';
 import { Contract, Event } from '@ethersproject/contracts';
 import networks from '@snapshot-labs/snapshot.js/src/networks.json';
 import { safePrefixes, transactionTypes } from './constants';
+import { FunctionFragment } from '@ethersproject/abi';
 
 /**
  * Represents details about the chains that snapshot supports as described in the `networks` json file.
@@ -77,7 +78,8 @@ export type Transaction =
   | RawTransaction
   | ContractInteractionTransaction
   | TransferNftTransaction
-  | TransferFundsTransaction;
+  | TransferFundsTransaction
+  | SafeImportTransaction;
 
 /**
  * Represents the fields that all transactions share.
@@ -93,6 +95,22 @@ export type BaseTransaction = {
   formatted: OptimisticGovernorTransaction;
   isValid?: boolean;
 };
+/**
+ * Represents a transaction that interacts with an arbitrary contract from safe json file import.
+ *
+ * @field `abi` field is the ABI of the contract that the transaction interacts with, represented as a JSON string.
+ *
+ * @field `methodName` field is the name of the method on the contract that the transaction calls.
+ *
+ * @field `parameters` field is an array of strings that represent the parameters that the method takes. NOTE: some methods take arrays or tuples as arguments, so some of these strings in the array may be JSON formatted arrays or tuples.
+ */
+
+export type SafeImportTransaction = BaseTransaction & {
+  type: 'safeImport';
+  abi?: string; // represents partial ABI only
+  method?: FunctionFragment;
+  parameters?: { [key: string]: string };
+};
 
 /**
  * Represents a 'raw' transaction that does not have any additional fields.
@@ -114,6 +132,7 @@ export type ContractInteractionTransaction = BaseTransaction & {
   type: 'contractInteraction';
   abi?: string;
   methodName?: string;
+  method?: FunctionFragment;
   parameters?: string[];
 };
 
@@ -448,3 +467,69 @@ export type SpaceConfigResponse =
       bondToken: boolean;
       bondAmount: boolean;
     };
+
+export namespace GnosisSafe {
+  export interface ProposedTransaction {
+    id: number;
+    contractInterface: ContractInterface | null;
+    description: {
+      to: string;
+      value: string;
+      customTransactionData?: string;
+      contractMethod?: ContractMethod;
+      contractFieldsValues?: Record<string, string>;
+      contractMethodIndex?: string;
+      nativeCurrencySymbol?: string;
+      networkPrefix?: string;
+    };
+    raw: { to: string; value: string; data: string };
+  }
+
+  export interface ContractInterface {
+    methods: ContractMethod[];
+  }
+
+  export interface Batch {
+    id: number | string;
+    name: string;
+    transactions: ProposedTransaction[];
+  }
+
+  export interface BatchFile {
+    version: string;
+    chainId: string;
+    createdAt: number;
+    meta: BatchFileMeta;
+    transactions: BatchTransaction[];
+  }
+
+  export interface BatchFileMeta {
+    txBuilderVersion?: string;
+    checksum?: string;
+    createdFromSafeAddress?: string;
+    createdFromOwnerAddress?: string;
+    name: string;
+    description?: string;
+  }
+
+  export interface BatchTransaction {
+    to: string;
+    value: string;
+    data?: string;
+    contractMethod?: ContractMethod;
+    contractInputsValues?: { [key: string]: string };
+  }
+
+  export interface ContractMethod {
+    inputs: ContractInput[];
+    name: string;
+    payable: boolean;
+  }
+
+  export interface ContractInput {
+    internalType: string;
+    name: string;
+    type: string;
+    components?: ContractInput[];
+  }
+}
diff --git a/src/plugins/oSnap/utils/abi.ts b/src/plugins/oSnap/utils/abi.ts
index ca1641a89..cfb18a354 100644
--- a/src/plugins/oSnap/utils/abi.ts
+++ b/src/plugins/oSnap/utils/abi.ts
@@ -6,6 +6,8 @@ import {
   mustBeEthereumAddress,
   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.
@@ -127,6 +129,57 @@ export function encodeMethodAndParams(
   return contractInterface.encodeFunctionData(method, parameterValues);
 }
 
+export function transformSafeMethodToFunctionFragment(
+  method: GnosisSafe.ContractMethod
+): FunctionFragment {
+  const fragment = FunctionFragment.from({
+    ...method,
+    type: 'function',
+    stateMutability: method.payable ? 'payable' : 'nonpayable'
+  });
+  return fragment;
+}
+
+export function initializeSafeImportTransaction(
+  unprocessedTransactions: GnosisSafe.BatchTransaction
+): SafeImportTransaction {
+  return createSafeImportTransaction({
+    type: 'safeImport',
+    to: unprocessedTransactions.to,
+    value: unprocessedTransactions.value,
+    data: unprocessedTransactions?.data ?? '',
+    method: unprocessedTransactions.contractMethod
+      ? transformSafeMethodToFunctionFragment(
+          unprocessedTransactions.contractMethod
+        )
+      : undefined,
+    parameters: unprocessedTransactions.contractInputsValues,
+    formatted: ['', 0, '0', '0x']
+  });
+}
+
+export function encodeSafeMethodAndParams(
+  method: SafeImportTransaction['method'],
+  params: SafeImportTransaction['parameters']
+) {
+  if (!params || !method) return;
+  const missingParams = Object.values(params).length !== method.inputs.length;
+  if (missingParams) {
+    throw new Error('Some params are missing');
+  }
+  const abiSlice = Array(method);
+  const contractInterface = new Interface(abiSlice);
+
+  const parameterValues = method.inputs.map(input => {
+    const value = params[input.name];
+    if (isArrayParameter(input.baseType)) {
+      return JSON.parse(value);
+    }
+    return value;
+  });
+  return contractInterface.encodeFunctionData(method.name, parameterValues);
+}
+
 /**
  * Returns the transaction data for an ERC20 transfer.
  */
diff --git a/src/plugins/oSnap/utils/safeImport.ts b/src/plugins/oSnap/utils/safeImport.ts
new file mode 100644
index 000000000..35495cc4b
--- /dev/null
+++ b/src/plugins/oSnap/utils/safeImport.ts
@@ -0,0 +1,47 @@
+import { addressEqual } from '@/helpers/utils';
+import { GnosisSafe } from '../types';
+import { isSafeFile } from './validators';
+
+export async function parseGnosisSafeFile(
+  file: File,
+  safe: GnosisSafe | null
+): Promise<GnosisSafe.BatchFile> {
+  return new Promise((res, rej) => {
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = async () => {
+      try {
+        if (typeof reader.result !== 'string') {
+          return rej(new Error('Buffer can not be parsed'));
+        }
+        const json = JSON.parse(reader.result);
+        if (!isSafeFile(json)) {
+          return rej(new Error('Not a valid Safe transaction file.'));
+        }
+        if (!isCreatedFromSafe(json, safe)) {
+          return rej(
+            new Error(
+              "Safe file does not match the selected treasury's address or chain ID"
+            )
+          );
+        }
+        return res(json);
+      } catch (err) {
+        return rej(new Error('Safe file corrupted. Please select another.'));
+      }
+    };
+  });
+}
+
+function isCreatedFromSafe(
+  batchFile: GnosisSafe.BatchFile,
+  safe: GnosisSafe | null
+): boolean {
+  if (safe && batchFile.meta.createdFromSafeAddress) {
+    return (
+      safe.network === batchFile.chainId &&
+      addressEqual(safe.safeAddress, batchFile.meta.createdFromSafeAddress)
+    );
+  }
+  return false;
+}
diff --git a/src/plugins/oSnap/utils/transactions.ts b/src/plugins/oSnap/utils/transactions.ts
index e8fbf5eb2..4724b2044 100644
--- a/src/plugins/oSnap/utils/transactions.ts
+++ b/src/plugins/oSnap/utils/transactions.ts
@@ -7,9 +7,12 @@ import {
   RawTransaction,
   Token,
   TransferFundsTransaction,
-  TransferNftTransaction
+  TransferNftTransaction,
+  SafeImportTransaction
 } from '../types';
-import { encodeMethodAndParams } from './abi';
+import { encodeMethodAndParams, encodeSafeMethodAndParams } from './abi';
+import { isAddress } from '@ethersproject/address';
+import { validateTransaction } from './validators';
 
 /**
  * Creates a formatted transaction for the Optimistic Governor to execute
@@ -166,3 +169,76 @@ export function parseValueInput(input: string) {
   }
   return parseAmount(input);
 }
+
+export function createSafeImportTransaction(
+  params: SafeImportTransaction
+): SafeImportTransaction {
+  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: encodedData
+    });
+
+    return {
+      ...params,
+      isValid: true,
+      abi,
+      formatted,
+      data: encodedData
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      ...params,
+      isValid: false
+    };
+  }
+}
diff --git a/src/plugins/oSnap/utils/validators.ts b/src/plugins/oSnap/utils/validators.ts
index 4a69a3836..a1dbdc11e 100644
--- a/src/plugins/oSnap/utils/validators.ts
+++ b/src/plugins/oSnap/utils/validators.ts
@@ -6,10 +6,10 @@ 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 } from '../types';
+import { BaseTransaction, NFT, Token, Transaction, GnosisSafe } from '../types';
 import { parseUnits } from '@ethersproject/units';
 import { useMemoize } from '@vueuse/core';
 
@@ -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);
 }
@@ -136,3 +144,77 @@ export const checkIsContract = useMemoize(
   async (address: string, network: string) =>
     await isContractAddress(address, network)
 );
+
+// check if json is a safe json type
+export const isSafeFile = (input: any): input is GnosisSafe.BatchFile => {
+  const $io0 = (input: any): boolean =>
+    'string' === typeof input.version &&
+    'string' === typeof input.chainId &&
+    'number' === typeof input.createdAt &&
+    'object' === typeof input.meta &&
+    null !== input.meta &&
+    $io1(input.meta) &&
+    Array.isArray(input.transactions) &&
+    input.transactions.every(
+      (elem: any) => 'object' === typeof elem && null !== elem && $io2(elem)
+    );
+  const $io1 = (input: any): boolean =>
+    (null === input.txBuilderVersion ||
+      undefined === input.txBuilderVersion ||
+      'string' === typeof input.txBuilderVersion) &&
+    (null === input.checksum ||
+      undefined === input.checksum ||
+      'string' === typeof input.checksum) &&
+    (null === input.createdFromSafeAddress ||
+      undefined === input.createdFromSafeAddress ||
+      'string' === typeof input.createdFromSafeAddress) &&
+    (null === input.createdFromOwnerAddress ||
+      undefined === input.createdFromOwnerAddress ||
+      'string' === typeof input.createdFromOwnerAddress) &&
+    'string' === typeof input.name &&
+    (null === input.description ||
+      undefined === input.description ||
+      'string' === typeof input.description);
+  const $io2 = (input: any): boolean =>
+    'string' === typeof input.to &&
+    'string' === typeof input.value &&
+    (null === input.data ||
+      undefined === input.data ||
+      'string' === typeof input.data) &&
+    (null === input.contractMethod ||
+      undefined === input.contractMethod ||
+      ('object' === typeof input.contractMethod &&
+        null !== input.contractMethod &&
+        $io3(input.contractMethod))) &&
+    (null === input.contractInputsValues ||
+      undefined === input.contractInputsValues ||
+      ('object' === typeof input.contractInputsValues &&
+        null !== input.contractInputsValues &&
+        false === Array.isArray(input.contractInputsValues) &&
+        $io5(input.contractInputsValues)));
+  const $io3 = (input: any): boolean =>
+    Array.isArray(input.inputs) &&
+    input.inputs.every(
+      (elem: any) => 'object' === typeof elem && null !== elem && $io4(elem)
+    ) &&
+    'string' === typeof input.name &&
+    'boolean' === typeof input.payable;
+  const $io4 = (input: any): boolean =>
+    (undefined === input.internalType ||
+      'string' === typeof input.internalType) &&
+    'string' === typeof input.name &&
+    'string' === typeof input.type &&
+    (null === input.components ||
+      undefined === input.components ||
+      (Array.isArray(input.components) &&
+        input.components.every(
+          (elem: any) => 'object' === typeof elem && null !== elem && $io4(elem)
+        )));
+  const $io5 = (input: any): boolean =>
+    Object.keys(input).every((key: any) => {
+      const value = input[key];
+      if (undefined === value) return true;
+      return 'string' === typeof value;
+    });
+  return 'object' === typeof input && null !== input && $io0(input);
+};