From 00708bbf9b4875be7f19b393612cd853b2432eac Mon Sep 17 00:00:00 2001
From: Yehor Podporinov <50983498+yehor-podporinov@users.noreply.github.com>
Date: Fri, 10 Nov 2023 12:26:47 +0200
Subject: [PATCH] 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 <yehor.podporinov@Yehors-MacBook-Pro.local>
---
 assets/icons/keyboard-icon.svg |  3 ++
 assets/styles/_global.scss     | 14 +++++----
 enums/icon-names.enum.ts       |  1 +
 forms/AbiEncodeForm.vue        | 53 +++++++++++++++++++++++++---------
 helpers/abi-form.helpers.ts    | 29 +++++++++++--------
 5 files changed, 70 insertions(+), 30 deletions(-)
 create mode 100644 assets/icons/keyboard-icon.svg

diff --git a/assets/icons/keyboard-icon.svg b/assets/icons/keyboard-icon.svg
new file mode 100644
index 0000000..6bcf10f
--- /dev/null
+++ b/assets/icons/keyboard-icon.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.41634 13.2917H15.583M5.49967 9.16667H5.50884M9.16634 9.16667H9.17551M12.833 9.16667H12.8422M16.4997 9.16667H16.5088M4.76634 16.5H17.233C18.2598 16.5 18.7732 16.5 19.1653 16.3002C19.5103 16.1244 19.7908 15.8439 19.9665 15.499C20.1663 15.1068 20.1663 14.5934 20.1663 13.5667V8.43333C20.1663 7.40657 20.1663 6.89319 19.9665 6.50102C19.7908 6.15605 19.5103 5.87559 19.1653 5.69982C18.7732 5.5 18.2598 5.5 17.233 5.5H4.76634C3.73958 5.5 3.2262 5.5 2.83403 5.69982C2.48906 5.87559 2.2086 6.15605 2.03283 6.50102C1.83301 6.89319 1.83301 7.40657 1.83301 8.43333V13.5667C1.83301 14.5934 1.83301 15.1068 2.03283 15.499C2.2086 15.8439 2.48906 16.1244 2.83403 16.3002C3.2262 16.5 3.73958 16.5 4.76634 16.5Z" stroke="currentColor" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/styles/_global.scss b/assets/styles/_global.scss
index c4eaa60..103f0ec 100644
--- a/assets/styles/_global.scss
+++ b/assets/styles/_global.scss
@@ -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);
diff --git a/enums/icon-names.enum.ts b/enums/icon-names.enum.ts
index c84606b..d6f3916 100644
--- a/enums/icon-names.enum.ts
+++ b/enums/icon-names.enum.ts
@@ -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',
diff --git a/forms/AbiEncodeForm.vue b/forms/AbiEncodeForm.vue
index 3fb3681..51db338 100644
--- a/forms/AbiEncodeForm.vue
+++ b/forms/AbiEncodeForm.vue
@@ -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,20 +46,46 @@
               @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 }"
@@ -68,20 +93,21 @@
                   @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>
diff --git a/helpers/abi-form.helpers.ts b/helpers/abi-form.helpers.ts
index 707c706..d884acf 100644
--- a/helpers/abi-form.helpers.ts
+++ b/helpers/abi-form.helpers.ts
@@ -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 ''
   }