Fix/Default types (#53)

* updated default values for solidity types

* added default subtype and value for tuple

* replaced icon for default values

---------

Co-authored-by: Yehor Podporinov <[email protected]>

Author: yehor-podporinov

assets/icons/keyboard-icon.svg

@@ -87,11 +87,6 @@ textarea {
   @include field-text;
 }
 
-button,
-a {
-  cursor: pointer;
-}
-
 body,
 span,
 p,
@@ -101,6 +96,15 @@ a {
   @include p-16-regular;
 }
 
+button,
+a {
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
 main {
   margin-top: var(--app-height-header);
   padding: var(--app-padding);

assets/styles/_global.scss

@@ -14,6 +14,7 @@ export enum ICON_NAMES {
   exclamationCircle = 'exclamation-circle',
   exclamationTriangle = 'exclamation-triangle',
   hashtag = 'hashtag',
+  keyboard = 'keyboard',
   locationMarker = 'location-marker',
   plus = 'plus',
   refresh = 'refresh',

enums/icon-names.enum.ts

@@ -38,7 +38,6 @@
             <input-field
               v-if="arg.type === ETHEREUM_TYPES.tuple"
               :model-value="arg.subtype"
-              is-clearable
               :label="$t('abi-encode-form.arg-subtype-label')"
               :placeholder="
                 $t('abi-encode-form.arg-subtype-placeholder--tuple')
@@ -47,41 +46,68 @@
               @blur="touchField(`args[${idx}].subtype`)"
               @clear="removeArg(arg.id)"
               @update:model-value="onArgSubtypeUpdate($event as string, idx)"
-            />
+            >
+              <template #nodeRight>
+                <button
+                  class="abi-encode-form__field-btn"
+                  :class="{ 'abi-encode-form__field-btn--filled': arg.subtype }"
+                  @click="arg.subtype = getDefaultSubtypeOfType(arg.type)"
+                >
+                  <app-icon
+                    class="abi-encode-form__field-btn-icon"
+                    :name="$icons.keyboard"
+                  />
+                </button>
+                <button
+                  class="abi-encode-form__field-btn"
+                  :class="{ 'abi-encode-form__field-btn--filled': arg.subtype }"
+                  @click="removeArg(arg.id)"
+                >
+                  <app-icon
+                    :class="[
+                      'abi-encode-form__field-btn-icon',
+                      'abi-encode-form__field-btn-icon--x-mark',
+                    ]"
+                    :name="$icons.x"
+                  />
+                </button>
+              </template>
+            </input-field>
             <textarea-field
               v-model="arg.value"
               size="small"
               :label="
                 arg.type !== ETHEREUM_TYPES.tuple
-                  ? $t('abi-encode-form.arg-subtype-label')
+                  ? $t('abi-encode-form.arg-value-label')
                   : ''
               "
               :placeholder="$t('abi-encode-form.arg-value-placeholder')"
               :error-message="getFieldErrorMessage(`args[${idx}].value`)"
               @blur="touchField(`args[${idx}].value`)"
             >
-              <template v-if="arg.type !== ETHEREUM_TYPES.tuple" #nodeRight>
+              <template #nodeRight>
                 <button
                   class="abi-encode-form__field-btn"
                   :class="{ 'abi-encode-form__field-btn--filled': arg.value }"
                   :disabled="!arg.type"
                   @click="arg.value = getDefaultValueOfType(arg.type)"
                 >
                   <app-icon
-                    :class="[
-                      'abi-encode-form__field-btn-icon',
-                      'abi-encode-form__field-btn-icon--refresh',
-                    ]"
-                    :name="$icons.refresh"
+                    class="abi-encode-form__field-btn-icon"
+                    :name="$icons.keyboard"
                   />
                 </button>
                 <button
+                  v-if="arg.type !== ETHEREUM_TYPES.tuple"
                   class="abi-encode-form__field-btn"
                   :class="{ 'abi-encode-form__field-btn--filled': arg.value }"
                   @click="removeArg(arg.id)"
                 >
                   <app-icon
-                    class="abi-encode-form__field-btn-icon"
+                    :class="[
+                      'abi-encode-form__field-btn-icon',
+                      'abi-encode-form__field-btn-icon--x-mark',
+                    ]"
                     :name="$icons.x"
                   />
                 </button>
@@ -141,6 +167,7 @@ import {
   ethereumBaseType,
   ethereumBaseTypeValue,
   formatArgSubtype,
+  getDefaultSubtypeOfType,
   getDefaultValueOfType,
   json,
   parseFuncArgToValueOfEncode,
@@ -366,10 +393,10 @@ abiEncoding.value = encodeAbi([], [])
 .abi-encode-form .abi-encode-form__field-btn-icon {
   height: toRem(24);
   width: toRem(24);
+  margin-right: toRem(-1);
 
-  &--refresh {
-    height: toRem(18);
-    width: toRem(18);
+  &--x-mark {
+    margin-right: toRem(-5);
   }
 }
 </style>

forms/AbiEncodeForm.vue

@@ -195,32 +195,37 @@ export const formatArgSubtype = (subtype: AbiForm.FuncArg['subtype']) => {
   return subtype.replaceAll('tuple(', '(').replaceAll('(', 'tuple(')
 }
 
+export const getDefaultSubtypeOfType = (
+  type: AbiForm.FuncArg['type'],
+): string => {
+  if (type === ETHEREUM_TYPES.tuple) {
+    return 'tuple()'
+  }
+
+  return ''
+}
+
 export const getDefaultValueOfType = (
   type: AbiForm.FuncArg['type'],
 ): string => {
   const baseType = type.replace(/\d+/, '')
   const matchArray = type.match(/\d+/)
   const sizeOfType = matchArray?.length ? Number(matchArray[0]) : 0
+  const isArrayBaseType = ParamType.from(type).baseType === 'array'
+
+  if (isArrayBaseType) return '[]'
 
   switch (baseType) {
     case ETHEREUM_TYPES.address:
       return '0x0000000000000000000000000000000000000000'
-    case ETHEREUM_TYPES.addressArray:
-      return '["0x0000000000000000000000000000000000000000"]'
     case ETHEREUM_TYPES.bool:
       return 'false'
-    case ETHEREUM_TYPES.boolArray:
-      return '[false]'
     case ETHEREUM_TYPES.bytes:
-      return sizeOfType ? '0x'.concat('00'.repeat(sizeOfType)) : '0x00'
-    case ETHEREUM_TYPES.bytesArray:
-      return sizeOfType ? `["0x${'00'.repeat(sizeOfType)}"]` : '["0x00"]'
-    case ETHEREUM_TYPES.stringArray:
-      return '[""]'
+      return sizeOfType ? '0x'.concat('00'.repeat(sizeOfType)) : '0x'
+    case ETHEREUM_TYPES.tuple:
+      return '[]'
     case ETHEREUM_TYPES.uint:
-      return sizeOfType.toString()
-    case ETHEREUM_TYPES.uintArray:
-      return `["${sizeOfType}"]`
+      return '0'
     default:
       return ''
   }