Validation fixes

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;
- }
- 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');
+}