#501 | Fix bytes input

src/components/ContractTab/function-interface-utils.js

@@ -535,40 +535,6 @@ function parseBooleanArrayString(str, expectedLength) {
     return boolArray;
 }
 
-/**
- * Given a string, returns an array of byte strings iff the string is a valid representation of bytes.
- * Returns undefined if string is valid but has the wrong number of elements in the case of fixed-size arrays
- *
- * @param {string} str - string representation of an array of bytes, e.g. "[a9, ff, 02]"
- * @param {number|undefined} expectedLength
- * @returns {string[]|undefined}
- */
-function parseBytesArrayString(str, expectedLength) {
-    if (str === '[]' && expectedLength === undefined) {
-        return [];
-    }
-
-    const bytesArrayStringRegex = /^\[(([0-9A-Fa-f]{2}), *)*([0-9A-Fa-f]{2})]$/;
-
-    const stringRepresentValidBoolArray = bytesArrayStringRegex.test(str);
-    if (!stringRepresentValidBoolArray) {
-        return undefined;
-    }
-
-    const byteRegex = /[0-9A-Fa-f]{2}/g;
-    const bytesArray = str.match(byteRegex);
-
-    if (Number.isInteger(expectedLength)) {
-        const actualLength = bytesArray.length;
-
-        if (actualLength !== expectedLength) {
-            return undefined;
-        }
-    }
-
-    return bytesArray;
-}
-
 /**
  * Given a string, returns an array of string iff it is a valid JSON representation of a string array.
  * Returns undefined if string is valid but has the wrong number of elements in the case of fixed-size arrays
@@ -631,7 +597,6 @@ export {
     parseAddressString,
     parseBooleanArrayString,
     parseBooleanString,
-    parseBytesArrayString,
     parseSignedIntArrayString,
     parseSignedIntString,
     parseStringArrayString,

src/components/inputs/BytesArrayInput.vue

@@ -1,8 +1,10 @@
 <script>
-import { parseBytesArrayString } from 'components/ContractTab/function-interface-utils';
-
 import BaseTextInput from 'components/inputs/BaseTextInput';
 
+const bytesArrayStringRegex = /^0x([0-9A-Fa-f])*$/;
+
+const validateArrayIsEvenLength = value => value.length % 2 === 0 || value === '';
+
 export default {
     name: 'BytesArrayInput',
     components: {
@@ -34,12 +36,12 @@ export default {
         },
     },
     data: () => ({
-        placeholder: '[a9, 4b, ff, ...]',
+        placeholder: '0xAB12CD...',
         previousParsedValue: undefined,
     }),
     computed: {
         rules() {
-            const validateParsedArray = value => Array.isArray(parseBytesArrayString(value)) || value === '';
+            const validateArrayString = value => bytesArrayStringRegex.test(value) || value === '';
 
             const validateArrayLength = (value) => {
                 const sizeIsUnconstrained = [undefined, null, -1, '-1'].includes(this.size);
@@ -48,16 +50,21 @@ export default {
                     return true;
                 }
 
+                // the number of bytes, i.e. the number of hex character pairs like 'EF'
                 const expectedLength = +this.size;
-                return Array.isArray(parseBytesArrayString(value, expectedLength));
+                const numberOfBytes = (value.length - 2) / 2; // subtract 2 for '0x' prefix
+
+                return numberOfBytes === expectedLength;
             };
 
+            const oddNumberOfBytesMessage = this.$t('components.inputs.odd_number_of_bytes');
             const incorrectArrayLengthMessage =
                 this.$t('components.inputs.incorrect_bytes_array_length', { size: +this.size });
             const invalidArrayStringMessage = this.$t('components.inputs.invalid_bytes_array_string');
 
             return [
-                val => validateParsedArray(val) || invalidArrayStringMessage,
+                val => validateArrayString(val) || invalidArrayStringMessage,
+                val => validateArrayIsEvenLength(val) || oddNumberOfBytesMessage,
                 val => validateArrayLength(val) || incorrectArrayLengthMessage,
             ];
         },
@@ -87,8 +94,7 @@ export default {
             if (newValue !== this.modelValue) {
                 this.$emit('update:modelValue', newValue);
 
-                const expectedSize = +this.size === -1 ? undefined : +this.size;
-                const newParsed = parseBytesArrayString(newValue, expectedSize);
+                const newParsed = newValue || undefined;
 
                 if (this.previousParsedValue !== newParsed) {
                     this.$emit('valueParsed', newParsed);

src/i18n/de-de/index.js

@@ -262,6 +262,7 @@ export default {
             incorrect_address_array_length: 'Das Array sollte { size } Adressen enthalten',
             incorrect_booleans_array_length: 'In dem Array sollten { size } Boolesche Werte enthalten sein',
             incorrect_bytes_array_length: 'Das Array sollte { size } Bytes enthalten',
+            odd_number_of_bytes: 'Es sollte eine gerade Anzahl von Bytezeichen vorhanden sein',
             incorrect_sigint_array_length: 'Das Array muss { size } signed Integers enthalten',
             incorrect_strings_array_length: 'Das Array sollte nur { size } Zeichenfolgen enthalten',
             incorrect_unsigint_array_length: 'Das Array muss { size } unsigned Integers enthalten',

src/i18n/en-us/index.js

@@ -262,6 +262,7 @@ export default {
             incorrect_address_array_length: 'There should be { size } addresses in the array',
             incorrect_booleans_array_length: 'There should be { size } booleans in the array',
             incorrect_bytes_array_length: 'There should be { size } bytes in the array',
+            odd_number_of_bytes: 'There should be an even number of byte characters',
             incorrect_sigint_array_length: 'There should be { size } signed integers in the array',
             incorrect_strings_array_length: 'There should be { size } strings in the array',
             incorrect_unsigint_array_length: 'There should be { size } unsigned integers in the array',

src/i18n/es-es/index.js

@@ -262,6 +262,7 @@ export default {
             incorrect_address_array_length: 'Debe haber { size } direcciones en la matriz',
             incorrect_booleans_array_length: 'Debe haber { size } booleanos en la matriz',
             incorrect_bytes_array_length: 'Debe haber { size } bytes en la matriz',
+            odd_number_of_bytes: 'Debe haber un número par de caracteres de bytes',
             incorrect_sigint_array_length: 'Debe haber { size } enteros firmados en la matriz',
             incorrect_strings_array_length: 'Debe haber { size } cadenas en la matriz',
             incorrect_unsigint_array_length: 'Debe haber { size } enteros sin firmar en la matriz',

src/i18n/fr-fr/index.js

@@ -262,6 +262,7 @@ export default {
             incorrect_address_array_length: 'Le tableau doit contenir { size } adresses',
             incorrect_booleans_array_length: 'Le tableau doit contenir { size } booléens',
             incorrect_bytes_array_length: 'Le tableau doit contenir { size } bytes',
+            odd_number_of_bytes: 'Il devrait y avoir un nombre pair de caractères d\'octet',
             incorrect_sigint_array_length: 'Le tableau doit contenir { size } entiers signés',
             incorrect_strings_array_length: 'Le tableau doit contenir { size } chaînes de caractères',
             incorrect_unsigint_array_length: 'Le tableau doit contenir { size } entiers non signés',

src/i18n/pt-br/index.js

@@ -262,6 +262,7 @@ export default {
             incorrect_address_array_length: 'Deve haver { size } endereços na matriz',
             incorrect_booleans_array_length: 'Deve haver { size } booleanos na matriz',
             incorrect_bytes_array_length: 'Deve haver { size } bytes na matriz',
+            odd_number_of_bytes: 'Deve haver um número par de caracteres de byte',
             incorrect_sigint_array_length: 'Deve haver { size } inteiros com sinal na matriz',
             incorrect_strings_array_length: 'Deve haver { size } strings (sequência de caracteres) na matriz',
             incorrect_unsigint_array_length: 'Deve haver { size } inteiros sem sinal na matriz',

test/components/ContractTab/function-interface-utils.test.js

@@ -20,7 +20,6 @@ import {
     parseAddressString,
     parseBooleanArrayString,
     parseBooleanString,
-    parseBytesArrayString,
     parseSignedIntArrayString,
     parseSignedIntString,
     parseStringArrayString,
@@ -503,30 +502,6 @@ describe('function-interface-utils', () => {
         });
     });
 
-    describe('parseBytesArrayString', () => {
-        it('should correctly parse a string representation of bytes', () => {
-            const bytesOne = 'fa';
-            const bytesTwo = 'B4';
-
-            // any length - valid
-            expect(parseBytesArrayString('[]')).toEqual([]);
-            expect(parseBytesArrayString(`[${bytesOne}]`)).toEqual([bytesOne]);
-            expect(parseBytesArrayString(`[${bytesOne}, ${bytesTwo}]`)).toEqual([bytesOne, bytesTwo]);
-
-            // any length - invalid
-            expect(parseBytesArrayString('[1]')).toEqual(undefined);
-
-
-            // fixed length - valid
-            expect(parseBytesArrayString(`[${bytesOne}]`, 1)).toEqual([bytesOne]);
-            expect(parseBytesArrayString(`[${bytesOne}, ${bytesTwo}]`, 2)).toEqual([bytesOne, bytesTwo]);
-
-            // fixed length - invalid
-            expect(parseBytesArrayString('[]', 2)).toEqual(undefined);
-            expect(parseBytesArrayString(`[${bytesOne}]`, 2)).toEqual(undefined);
-        });
-    });
-
     describe('parseSignedIntArrayString', () => {
         it('should correctly parse a string representation of signed int array', () => {
             const intOne = 1;