Gerhard/uma 2479 ensure osnap form input types working correctly

src/helpers/boost/index.ts

@@ -37,7 +37,8 @@ export const BOOST_WHITELIST_SETTINGS = {
     '0cf5e.eth',
     'thanku.eth',
     'test.wa0x6e.eth',
-    'aurelianob.eth'
+    'aurelianob.eth',
+    'pscott.eth'
   ]
 };
 

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

@@ -62,6 +62,7 @@ const handleBlur = () => {
   <UiInput
     v-model="input"
     :disabled="disabled"
+    placeholder="0x123...abc"
     :error="props.error ?? (error || '')"
     @input="handleInput()"
     @blur="handleBlur"

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

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { ParamType } from '@ethersproject/abi';
-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';
+import { hexZeroPad } from '@ethersproject/bytes';
+import {
+  validateArrayInput,
+  validateInput,
+  validateTupleInput,
+  isBytesLikeSafe
+} from '../../utils';
+import { InputTypes } from '../../types';
 
 const props = defineProps<{
   parameter: ParamType;
@@ -17,34 +21,93 @@ const emit = defineEmits<{
 }>();
 
 const isDirty = ref(false);
-const isBooleanInput = computed(() => props.parameter.baseType === 'bool');
-const isAddressInput = computed(() => props.parameter.baseType === 'address');
-const isNumberInput = computed(() => props.parameter.baseType.includes('int'));
-const isBytesInput = computed(() => props.parameter.baseType === 'bytes');
-const isBytes32Input = computed(() => props.parameter.baseType === 'bytes32');
-const isArrayInput = computed(
+
+const placeholders = {
+  string: 'a string of text',
+  address: '0x123...abc',
+  int: '123',
+  bytes: '0x123abc',
+  bytes32: '0x123abc',
+  bool: 'true'
+} as const;
+
+const inputType = computed(() => {
+  const baseType = props.parameter.baseType;
+
+  if (baseType === 'tuple') {
+    return {
+      input: 'tuple',
+      type: props.parameter.components.map(item => item.baseType as InputTypes)
+      // ["string","int","address"]
+    } as const;
+  }
+
+  if (baseType === 'array') {
+    return {
+      input: 'array',
+      type: props.parameter.arrayChildren.baseType as InputTypes
+    } as const;
+  }
+
+  return { type: baseType as InputTypes, input: 'single' } as const;
+});
+
+const isBooleanInput = computed(
+  () => inputType.value.input === 'single' && inputType.value.type === 'bool'
+);
+const isStringInput = computed(
+  () => inputType.value.input === 'single' && inputType.value.type === 'string'
+);
+const isAddressInput = computed(
+  () => inputType.value.input === 'single' && inputType.value.type === 'address'
+);
+const isNumberInput = computed(
   () =>
-    props.parameter.baseType === 'array' || props.parameter.baseType === 'tuple'
+    inputType.value.input === 'single' && inputType.value.type.includes('int')
+);
+const isBytesInput = computed(
+  () => inputType.value.input === 'single' && inputType.value.type === 'bytes'
+);
+const isBytes32Input = computed(
+  () => inputType.value.input === 'single' && inputType.value.type === 'bytes32'
 );
+const isArrayInput = computed(() => inputType.value.input !== 'single');
 
-const inputType = computed(() => {
-  if (isBooleanInput.value) return 'boolean';
-  if (isAddressInput.value) return 'address';
-  if (isNumberInput.value) return 'number';
-  if (isBytesInput.value) return 'bytes';
-  if (isBytes32Input.value) return 'bytes32';
-  if (isArrayInput.value) return 'array';
-  return 'text';
+// param name may be null or empty string
+const paramName = `${
+  props.parameter.name?.length ? props.parameter.name + ' ' : ''
+}`;
+const paramType = computed(() => {
+  if (inputType.value.input === 'single') {
+    return `(${inputType.value.type})`;
+  }
+  if (inputType.value.input === 'array') {
+    return `(${inputType.value.type}[])`;
+  }
+  // tuple type labels can be too long and take up too much space, limit to 2
+  return inputType.value.type.length > 2
+    ? `( ${inputType.value.type.slice(0, 2)}...[ ] )`
+    : inputType.value.type;
+});
+
+const label = paramName + paramType.value;
+
+const arrayPlaceholder = computed(() => {
+  if (inputType.value.input === 'array') {
+    return `E.g. [${placeholders[inputType.value.type]}]`;
+  }
+  if (inputType.value.input === 'tuple') {
+    return `E.g. [${inputType.value.type.map(type => placeholders[type])}]`;
+  }
 });
 
-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
@@ -62,12 +125,13 @@ const allowQuickFixForBytes32 = computed(() => {
 
 function validate() {
   if (!isDirty.value) return true;
-  if (isAddressInput.value) return isAddress(newValue.value);
-  if (isArrayInput.value) return validateArrayInput(newValue.value);
-  if (isNumberInput.value) return validateNumberInput(newValue.value);
-  if (isBytes32Input.value) return validateBytes32Input(newValue.value);
-  if (isBytesInput.value) return validateBytesInput(newValue.value);
-  return true;
+  if (inputType.value.input === 'array') {
+    return validateArrayInput(newValue.value, inputType.value.type);
+  }
+  if (inputType.value.input === 'tuple') {
+    return validateTupleInput(newValue.value, inputType.value.type);
+  }
+  return validateInput(newValue.value, inputType.value.type);
 }
 
 watch(props.parameter, () => {
@@ -84,56 +148,27 @@ watch(newValue, () => {
   emit('updateParameterValue', newValue.value);
 });
 
-function validateNumberInput(value: string) {
-  return isBigNumberish(value);
-}
-
-function validateBytesInput(value: string) {
-  return isBytesLike(value);
-}
-
 // provide better feedback/validation messages for bytes32 inputs
-function validateBytes32Input(value: string) {
-  try {
+watch(newValue, value => {
+  if (isBytes32Input.value && !isArrayInput.value) {
     const data = value?.slice(2) || '';
 
     if (data.length < 64) {
       const padded = hexZeroPad(value, 32);
       if (isBytesLikeSafe(padded)) {
-        validationErrorMessage.value = 'Value too short';
-        return false;
+        validationErrorMessage.value = 'bytes32 too short';
+        return;
       }
     }
 
     if (data.length > 64) {
-      validationErrorMessage.value = 'Value too long';
-      return false;
-    }
-    if (!isBytesLikeSafe(value)) {
-      validationErrorMessage.value = undefined;
-      return false;
+      validationErrorMessage.value = 'bytes32 too long';
+      return;
     }
-    return true;
-  } catch {
-    validationErrorMessage.value = undefined;
-    return false;
-  }
-}
 
-function validateArrayInput(value: string) {
-  try {
-    const parsedValue = JSON.parse(value) as Array<string> | unknown;
-    if (!Array.isArray(parsedValue)) return false;
-    if (
-      props.parameter.arrayLength !== -1 &&
-      parsedValue.length !== props.parameter.arrayLength
-    )
-      return false;
-    return true;
-  } catch (e) {
-    return false;
+    validationErrorMessage.value = undefined;
   }
-}
+});
 
 function onChange(value: string) {
   newValue.value = value;
@@ -145,6 +180,7 @@ function formatBytes32() {
     newValue.value = hexZeroPad(newValue.value, 32);
   }
 }
+
 onMounted(() => {
   if (props.validateOnMount) {
     isDirty.value = true;
@@ -154,8 +190,17 @@ onMounted(() => {
 </script>
 
 <template>
+  <UiInput
+    v-if="isArrayInput"
+    :placeholder="arrayPlaceholder"
+    :error="errorMessageForDisplay"
+    :model-value="value"
+    @update:model-value="onChange($event)"
+  >
+    <template #label>{{ label }}</template>
+  </UiInput>
   <UiSelect
-    v-if="inputType === 'boolean'"
+    v-if="isBooleanInput"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
@@ -165,41 +210,33 @@ onMounted(() => {
   </UiSelect>
 
   <AddressInput
-    v-if="inputType === 'address'"
+    v-if="isAddressInput"
     :label="label"
     :model-value="value"
     @update:model-value="onChange($event)"
   />
+
   <UiInput
-    v-if="inputType === 'array'"
-    :placeholder="arrayPlaceholder"
-    :error="errorMessageForDisplay"
-    :model-value="value"
-    @update:model-value="onChange($event)"
-  >
-    <template #label>{{ label }}</template>
-  </UiInput>
-  <UiInput
-    v-if="inputType === 'number'"
-    placeholder="123456"
+    v-if="isNumberInput"
+    :placeholder="placeholders.int"
     :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
     <template #label>{{ label }}</template>
   </UiInput>
   <UiInput
-    v-if="inputType === 'bytes'"
-    placeholder="0x123abc"
+    v-if="isBytesInput"
+    :placeholder="placeholders.bytes"
     :error="errorMessageForDisplay"
     :model-value="value"
     @update:model-value="onChange($event)"
   >
     <template #label>{{ label }}</template>
   </UiInput>
   <UiInput
-    v-if="inputType === 'bytes32'"
-    placeholder="0x123abc"
+    v-if="isBytes32Input"
+    :placeholder="placeholders.bytes"
     :error="errorMessageForDisplay"
     :model-value="value"
     :quick-fix="allowQuickFixForBytes32 ? formatBytes32 : undefined"
@@ -209,8 +246,8 @@ onMounted(() => {
     <template #label>{{ label }}</template>
   </UiInput>
   <UiInput
-    v-if="inputType === 'text'"
-    placeholder="a string of text"
+    v-if="isStringInput"
+    :placeholder="placeholders.string"
     :model-value="value"
     @update:model-value="onChange($event)"
   >

src/plugins/oSnap/types.ts

@@ -533,3 +533,17 @@ export namespace GnosisSafe {
     components?: ContractInput[];
   }
 }
+
+export type InputTypes =
+  | 'bool'
+  | 'string'
+  | 'address'
+  | Integer
+  | 'bytes'
+  | 'bytes32';
+
+export type Integer = `int${number}` | `uint${number}`;
+
+export function isIntegerType(type: InputTypes): type is Integer {
+  return type.includes('int');
+}