pad bytes32

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

@@ -3,6 +3,8 @@ import { ParamType } from '@ethersproject/abi';
 import { isAddress } from '@ethersproject/address';
 import { isBigNumberish } from '@ethersproject/bignumber/lib/bignumber';
 import AddressInput from './Address.vue';
+import { formatBytes32String } from '@ethersproject/strings';
+import { hexZeroPad, isBytesLike } from '@ethersproject/bytes';
 
 const props = defineProps<{
   parameter: ParamType;
@@ -17,7 +19,8 @@ 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.includes('bytes'));
+const isBytesInput = computed(() => props.parameter.baseType === 'bytes');
+const isBytes32Input = computed(() => props.parameter.baseType === 'bytes32');
 const isArrayInput = computed(
   () =>
     props.parameter.baseType === 'array' || props.parameter.baseType === 'tuple'
@@ -28,6 +31,7 @@ const inputType = computed(() => {
   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';
 });
@@ -40,6 +44,7 @@ const isInputValid = computed(() => {
   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;
 });
@@ -60,7 +65,18 @@ function validateNumberInput(value: string) {
 }
 
 function validateBytesInput(value: string) {
-  return value.startsWith('0x');
+  return isBytesLike(value);
+}
+
+function validateBytes32Input(value: string) {
+  try {
+    if (value.slice(2).length > 64) {
+      throw new Error('String too long');
+    }
+    return isBytesLike(value);
+  } catch {
+    return false;
+  }
 }
 
 function validateArrayInput(value: string) {
@@ -82,6 +98,12 @@ function onChange(value: string) {
   newValue.value = value;
   isDirty.value = true;
 }
+
+function formatBytes32() {
+  if (isBytes32Input) {
+    newValue.value = hexZeroPad(newValue.value, 32);
+  }
+}
 </script>
 
 <template>
@@ -128,6 +150,16 @@ function onChange(value: string) {
   >
     <template #label>{{ label }}</template>
   </UiInput>
+  <UiInput
+    v-if="inputType === 'bytes32'"
+    placeholder="0x123abc"
+    :error="!isInputValid && `Invalid ${parameter.baseType}`"
+    :model-value="value"
+    @blur="formatBytes32"
+    @update:model-value="onChange($event)"
+  >
+    <template #label>{{ label }}</template>
+  </UiInput>
   <UiInput
     v-if="inputType === 'text'"
     placeholder="a string of text"

src/plugins/oSnap/utils/validators.ts

@@ -133,10 +133,3 @@ export function amountPositive(amount: string, decimals = 18) {
 export function allTransactionsValid(transactions: Transaction[]): boolean {
   return transactions.every(tx => tx.isValid === true);
 }
-
-export function validateParameters(
-  method: FunctionFragment,
-  parameters: string[]
-): boolean {
-  return true;
-}