From f5a1367daed72e8b2736f0482ab00667bae5ff38 Mon Sep 17 00:00:00 2001
From: Yehor Podporinov <50983498+yehor-podporinov@users.noreply.github.com>
Date: Fri, 3 Nov 2023 19:03:19 +0200
Subject: [PATCH] Feature/Default values (#51)

* fix drop-menu options

* fix func-is-guessed warning

* fix a formating value function for decode-form

* replaced formatArgSubtype functions of abi forms to helpers

* added default values generating for abi form args

* added hover, focus, active states for app-logo

* updated app-button colors

* refactoring, renamed field-transition-duration -> transition-duration-fast

* added var for transition-timing-function

---------

Co-authored-by: Yehor Podporinov <yehor.podporinov@Yehors-MacBook-Pro.local>
---
 assets/styles/_global.scss    |  2 +-
 assets/styles/_mixins.scss    | 19 +++++---
 assets/styles/_variables.scss |  5 +-
 assets/styles/flatpickr.scss  | 15 ++++--
 components/AppButton.vue      | 19 ++++----
 components/AppLogo.vue        | 12 +++++
 components/AppModal.vue       |  4 +-
 components/AppNavbar.vue      |  4 +-
 components/StatsPreview.vue   |  2 +-
 components/ToolsSidebar.vue   |  7 +--
 fields/AutocompleteField.vue  |  6 +--
 fields/CheckboxField.vue      |  2 +-
 fields/DatetimeField.vue      |  2 +-
 fields/InputField.vue         |  6 +--
 fields/RadioButtonField.vue   |  2 +-
 fields/TextareaField.vue      | 35 ++++++++++++--
 forms/AbiEncodeForm.vue       | 89 ++++++++++++++++++++++++++++-------
 helpers/abi-form.helpers.ts   | 31 ++++++++++++
 public/noscript/style.css     |  4 +-
 19 files changed, 204 insertions(+), 62 deletions(-)

diff --git a/assets/styles/_global.scss b/assets/styles/_global.scss
index 1bd597f..c4eaa60 100644
--- a/assets/styles/_global.scss
+++ b/assets/styles/_global.scss
@@ -29,7 +29,7 @@ textarea {
   padding: var(--field-padding);
   background: var(--field-bg-primary);
   box-shadow: inset 0 0 0 toRem(50) var(--field-bg-primary);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: color, box-shadow, border-color, background-color;
 
   &:disabled,
diff --git a/assets/styles/_mixins.scss b/assets/styles/_mixins.scss
index a191551..4f522d9 100644
--- a/assets/styles/_mixins.scss
+++ b/assets/styles/_mixins.scss
@@ -42,7 +42,7 @@ $media-breakpoints: (
   letter-spacing: var(--field-label-letter-spacing);
   color: var(--field-label);
   margin-bottom: var(--field-label-margin-bottom);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   max-width: max-content;
 }
 
@@ -70,7 +70,7 @@ $media-breakpoints: (
   color: var(--field-placeholder);
   -webkit-text-fill-color: var(--field-placeholder);
   fill: var(--field-placeholder);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: opacity, color;
   opacity: 1;
 }
@@ -84,7 +84,7 @@ $media-breakpoints: (
   color: var(--field-placeholder-readonly);
   -webkit-text-fill-color: var(--field-placeholder-readonly);
   fill: var(--field-placeholder-readonly);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: opacity, color;
   opacity: 1;
 }
@@ -97,7 +97,7 @@ $media-breakpoints: (
   letter-spacing: var(--field-error-letter-spacing);
   color: var(--field-error);
   margin-top: var(--field-error-margin-top);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: opacity, color, font-size, transform;
 }
 
@@ -238,11 +238,18 @@ $media-breakpoints: (
 @mixin drop-item-transition {
   .drop-item {
     &-enter-active {
-      animation: drop-item var(--field-transition-duration) ease;
+      animation:
+        drop-item
+        var(--transition-duration-fast)
+        var(--transition-timing-default);
     }
 
     &-leave-active {
-      animation: drop-item var(--field-transition-duration) ease reverse;
+      animation:
+        drop-item
+        var(--transition-duration-fast)
+        var(--transition-timing-default)
+        reverse;
     }
   }
 
diff --git a/assets/styles/_variables.scss b/assets/styles/_variables.scss
index 5e48d77..3c7ec3d 100644
--- a/assets/styles/_variables.scss
+++ b/assets/styles/_variables.scss
@@ -127,8 +127,9 @@
   --field-border-focus: var(--primary-main);
   --field-border-radius: #{toRem(8)};
 
-  /* transition duration */
-  --field-transition-duration: 0.2s;
+  /* transition */
+  --transition-duration-fast: 0.2s;
+  --transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);
 
   /* paddings */
   --field-padding-top: #{toRem(12)};
diff --git a/assets/styles/flatpickr.scss b/assets/styles/flatpickr.scss
index 8030ae6..0ce3921 100644
--- a/assets/styles/flatpickr.scss
+++ b/assets/styles/flatpickr.scss
@@ -50,7 +50,10 @@ $z-index-arrow: 1;
     color: var(--text-primary-invert-main);
     width: toRem(18);
     height: toRem(18);
-    transition: color var(--field-transition-duration) ease;
+    transition:
+      color
+      var(--transition-duration-fast)
+      var(--transition-timing-default);
   }
 
   &:hover {
@@ -108,7 +111,10 @@ $z-index-arrow: 1;
   padding: 0 toRem(4) 0 toRem(4);
   height: 50%;
   cursor: pointer;
-  transition: opacity var(--field-transition-duration) ease;
+  transition:
+    opacity
+    var(--transition-duration-fast)
+    var(--transition-timing-default);
 
   &:after {
     display: block;
@@ -116,7 +122,10 @@ $z-index-arrow: 1;
     position: absolute;
     border-left: toRem(4) solid transparent;
     border-right: toRem(4) solid transparent;
-    transition: border-color var(--field-transition-duration) ease;
+    transition:
+      border-color
+      var(--transition-duration-fast)
+      var(--transition-timing-default);
   }
 }
 
diff --git a/components/AppButton.vue b/components/AppButton.vue
index 7ee80dd..2c5e010 100644
--- a/components/AppButton.vue
+++ b/components/AppButton.vue
@@ -144,7 +144,8 @@ const buttonType = computed<ButtonType>(
   grid: auto / auto-flow max-content;
   align-items: center;
   justify-content: center;
-  transition: all var(--button-transition-duration) ease-in;
+  transition: all var(--button-transition-duration)
+    var(--transition-timing-default);
   border: var(--app-button-border);
   background-color: var(--app-button-bg);
   color: var(--app-button-text);
@@ -160,7 +161,7 @@ const buttonType = computed<ButtonType>(
 
   &:not([disabled]):hover {
     text-decoration: none;
-    transition-timing-function: ease-out;
+    transition-timing-function: var(--transition-timing-default);
     color: var(--app-button-text-hover);
     background-color: var(--app-button-bg-hover);
     border: var(--app-button-border-hover);
@@ -170,14 +171,14 @@ const buttonType = computed<ButtonType>(
   &:not([disabled]):focus {
     text-decoration: none;
     color: var(--app-button-text-focused);
-    transition-timing-function: ease-out;
+    transition-timing-function: var(--transition-timing-default);
     background-color: var(--app-button-bg-focused);
     border: var(--app-button-border-focused);
   }
 
   &:not([disabled]):active {
     text-decoration: none;
-    transition-timing-function: ease-out;
+    transition-timing-function: var(--transition-timing-default);
     color: var(--app-button-text-active);
     background-color: var(--app-button-bg-active);
     border: var(--app-button-border-active);
@@ -322,14 +323,14 @@ const buttonType = computed<ButtonType>(
   }
 
   &--none {
-    $flat-border-hover: #{toRem(1)} solid var(--border-primary-light);
+    $flat-border-hover: #{toRem(1)} solid var(--primary-light);
 
     --app-button-flat-bg-hover: var(--background-primary-main);
     --app-button-flat-bg-focused: var(--background-primary-main);
     --app-button-flat-bg-active: var(--background-primary-main);
 
     --app-button-flat-text: var(--text-primary-light);
-    --app-button-flat-text-hover: var(--text-primary-light);
+    --app-button-flat-text-hover: var(--primary-light);
     --app-button-flat-text-focused: var(--primary-main);
     --app-button-flat-text-active: var(--primary-main);
 
@@ -349,9 +350,9 @@ const buttonType = computed<ButtonType>(
 
     &.app-button--text {
       --app-button-text: var(--text-primary-light);
-      --app-button-text-hover: var(--primary-main);
-      --app-button-text-focused: var(--primary-light);
-      --app-button-text-active: var(--primary-light);
+      --app-button-text-hover: var(--primary-light);
+      --app-button-text-focused: var(--primary-main);
+      --app-button-text-active: var(--primary-main);
     }
   }
 
diff --git a/components/AppLogo.vue b/components/AppLogo.vue
index 753d21c..549fb05 100644
--- a/components/AppLogo.vue
+++ b/components/AppLogo.vue
@@ -23,6 +23,18 @@ const onClick = () => {
 .app-logo {
   display: flex;
   align-items: center;
+  max-width: max-content;
+  transition: color var(--transition-duration-fast)
+    var(--transition-timing-default);
+
+  &:hover {
+    color: var(--primary-light);
+  }
+
+  &:focus,
+  &:active {
+    color: var(--primary-main);
+  }
 }
 
 .app-logo__img {
diff --git a/components/AppModal.vue b/components/AppModal.vue
index fc21cbf..a52c6e5 100644
--- a/components/AppModal.vue
+++ b/components/AppModal.vue
@@ -71,7 +71,9 @@ $z-index: 1300;
 
   &-enter-active,
   &-leave-active {
-    transition: var(--field-transition-duration) ease-in-out;
+    $timing: var(--transition-timing-default);
+
+    transition: var(--transition-duration-fast) $timing;
     transition-property: opacity, transform;
   }
 
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 22fdc93..8d7e759 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -79,7 +79,7 @@ $gap-burger-btn-line: toRem(8);
   padding: 0 var(--app-padding-right) 0 var(--app-padding-left);
   height: var(--app-height-header);
   background: transparent;
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: background-color, box-shadow;
 
   &--dark {
@@ -117,7 +117,7 @@ $gap-burger-btn-line: toRem(8);
     height: $height-burger-btn-line;
     background-color: var(--primary-light);
     border-radius: var(--border-primary-main);
-    transition: var(--field-transition-duration);
+    transition: var(--transition-duration-fast);
   }
 
   .app-navbar__burger-btn--active & {
diff --git a/components/StatsPreview.vue b/components/StatsPreview.vue
index 75d645f..5c11a9a 100644
--- a/components/StatsPreview.vue
+++ b/components/StatsPreview.vue
@@ -21,7 +21,7 @@
   background-size: 100% 100%;
   width: 100%;
   min-height: vh(100);
-  transition: min-height var(--field-transition-duration);
+  transition: min-height var(--transition-duration-fast);
   padding: calc(var(--app-height-header) + var(--app-padding-top)) toRem(80)
     var(--app-padding-bottom);
 
diff --git a/components/ToolsSidebar.vue b/components/ToolsSidebar.vue
index 87827c3..b534b49 100644
--- a/components/ToolsSidebar.vue
+++ b/components/ToolsSidebar.vue
@@ -161,12 +161,13 @@ $aside-max-width: toRem(280);
 }
 
 .tools-sidebar__transition-enter-active {
-  animation: fade-unroll-right var(--field-transition-duration) ease-in-out;
+  animation: fade-unroll-right var(--transition-duration-fast)
+    var(--transition-timing-default);
 }
 
 .tools-sidebar__transition-leave-active {
-  animation: fade-unroll-right var(--field-transition-duration) ease-in-out
-    reverse;
+  animation: fade-unroll-right var(--transition-duration-fast)
+    var(--transition-timing-default) reverse;
 }
 
 @keyframes fade-unroll-right {
diff --git a/fields/AutocompleteField.vue b/fields/AutocompleteField.vue
index 856ab99..48af3b6 100644
--- a/fields/AutocompleteField.vue
+++ b/fields/AutocompleteField.vue
@@ -193,7 +193,7 @@ onMounted(() => {
   width: toRem(22);
   height: toRem(22);
   color: var(--field-placeholder);
-  transition: var(--field-transition-duration) ease-in-out;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
 
   .autocomplete-field--disabled &,
   .autocomplete-field--readonly & {
@@ -240,11 +240,11 @@ onMounted(() => {
 
 .autocomplete-field__err-msg {
   &-enter-active {
-    animation: fade-down var(--field-transition-duration);
+    animation: fade-down var(--transition-duration-fast);
   }
 
   &-leave-active {
-    animation: fade-down var(--field-transition-duration) reverse;
+    animation: fade-down var(--transition-duration-fast) reverse;
   }
 }
 
diff --git a/fields/CheckboxField.vue b/fields/CheckboxField.vue
index c6d1d40..6c4ad5d 100644
--- a/fields/CheckboxField.vue
+++ b/fields/CheckboxField.vue
@@ -71,7 +71,7 @@ const onChange = (event: Event) => {
 .checkbox-field__label {
   display: block;
   padding: toRem(8) toRem(16);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: background-color, color;
   border-radius: inherit;
   color: var(--text-primary-main);
diff --git a/fields/DatetimeField.vue b/fields/DatetimeField.vue
index b8c750b..4392238 100644
--- a/fields/DatetimeField.vue
+++ b/fields/DatetimeField.vue
@@ -164,7 +164,7 @@ $z-index-btn: 1;
   border-radius: var(--border-radius-main);
   color: var(--text-primary-main);
   padding: toRem(8) toRem(16);
-  transition: var(--field-transition-duration);
+  transition: var(--transition-duration-fast);
   transition-property: background-color, color;
   width: 100%;
 
diff --git a/fields/InputField.vue b/fields/InputField.vue
index 5893182..171c531 100644
--- a/fields/InputField.vue
+++ b/fields/InputField.vue
@@ -292,7 +292,7 @@ $z-index-side-nodes: 1;
   max-width: toRem(24);
   max-height: toRem(24);
   color: var(--field-placeholder);
-  transition: color var(--field-transition-duration);
+  transition: color var(--transition-duration-fast);
 
   .input-field--filled &:not(.input-field__icon--error) {
     color: var(--field-text);
@@ -323,11 +323,11 @@ $z-index-side-nodes: 1;
 }
 
 .input-field__err-msg-transition-enter-active {
-  animation: fade-down var(--field-transition-duration);
+  animation: fade-down var(--transition-duration-fast);
 }
 
 .input-field__err-msg-transition-leave-active {
-  animation: fade-down var(--field-transition-duration) reverse;
+  animation: fade-down var(--transition-duration-fast) reverse;
 }
 
 @keyframes fade-down {
diff --git a/fields/RadioButtonField.vue b/fields/RadioButtonField.vue
index a9d9986..a09b653 100644
--- a/fields/RadioButtonField.vue
+++ b/fields/RadioButtonField.vue
@@ -77,7 +77,7 @@ const emit = defineEmits<{
 .radio-button-field__label {
   display: block;
   padding: toRem(8) toRem(16);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: background-color, color;
   border-radius: inherit;
   color: var(--text-primary-main);
diff --git a/fields/TextareaField.vue b/fields/TextareaField.vue
index 79bc4dc..4a455ac 100644
--- a/fields/TextareaField.vue
+++ b/fields/TextareaField.vue
@@ -59,7 +59,15 @@
 <script lang="ts" setup>
 import { AppIcon } from '#components'
 import { v4 as uuidv4 } from 'uuid'
-import { computed, nextTick, onMounted, useAttrs, useSlots, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  useAttrs,
+  useSlots,
+  watch,
+} from 'vue'
 
 type SCHEMES = 'primary'
 type SIZES = 'default' | 'small'
@@ -96,6 +104,7 @@ const slots = useSlots()
 
 const uid = uuidv4()
 const textareaElement = ref<HTMLTextAreaElement | null>(null)
+const nodeRightWrp = ref<HTMLDivElement | null>(null)
 
 const isDisabled = computed(() =>
   ['', 'disabled', true].includes(attrs.disabled as string | boolean),
@@ -161,6 +170,20 @@ watch(
 )
 
 onMounted(resizeTextarea)
+
+const OFFSET_WIDTH = 19
+onMounted(() => {
+  if (!textareaElement.value) return
+
+  if (slots?.nodeRight && nodeRightWrp.value) {
+    textareaElement.value?.style.setProperty(
+      'padding-right',
+      `calc(${
+        nodeRightWrp.value?.offsetWidth || OFFSET_WIDTH
+      }px + var(--field-padding-right) * 2)`,
+    )
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -214,7 +237,7 @@ $z-index-side-nodes: 1;
       height: toRem(2);
       width: 0;
       background: var(--primary-main);
-      transition: width calc(var(--field-transition-duration) + 0.3s);
+      transition: width calc(var(--transition-duration-fast) + 0.3s);
 
       .textarea-field--error & {
         background: var(--field-error);
@@ -251,13 +274,15 @@ $z-index-side-nodes: 1;
   transform: translateY(-50%);
   color: inherit;
   z-index: $z-index-side-nodes;
+  display: flex;
+  gap: toRem(8);
 }
 
 .textarea-field__icon {
   max-width: toRem(24);
   max-height: toRem(24);
   color: var(--field-placeholder);
-  transition: color var(--field-transition-duration);
+  transition: color var(--transition-duration-fast);
 
   .textarea-field--filled &:not(.textarea-field__icon--error) {
     color: var(--field-text);
@@ -288,11 +313,11 @@ $z-index-side-nodes: 1;
 }
 
 .textarea-field__err-msg-transition-enter-active {
-  animation: fade-down var(--field-transition-duration);
+  animation: fade-down var(--transition-duration-fast);
 }
 
 .textarea-field__err-msg-transition-leave-active {
-  animation: fade-down var(--field-transition-duration) reverse;
+  animation: fade-down var(--transition-duration-fast) reverse;
 }
 
 @keyframes fade-down {
diff --git a/forms/AbiEncodeForm.vue b/forms/AbiEncodeForm.vue
index 411f084..3fb3681 100644
--- a/forms/AbiEncodeForm.vue
+++ b/forms/AbiEncodeForm.vue
@@ -34,11 +34,9 @@
             :error-message="getFieldErrorMessage(`args[${idx}].type`)"
             @blur="touchField(`args[${idx}].type`)"
           />
-          <div
-            v-if="arg.type === ETHEREUM_TYPES.tuple"
-            class="abi-encode-form__tuple"
-          >
+          <div class="abi-encode-form__value-wrp">
             <input-field
+              v-if="arg.type === ETHEREUM_TYPES.tuple"
               :model-value="arg.subtype"
               is-clearable
               :label="$t('abi-encode-form.arg-subtype-label')"
@@ -53,22 +51,43 @@
             <textarea-field
               v-model="arg.value"
               size="small"
+              :label="
+                arg.type !== ETHEREUM_TYPES.tuple
+                  ? $t('abi-encode-form.arg-subtype-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>
+                <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"
+                  />
+                </button>
+                <button
+                  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"
+                    :name="$icons.x"
+                  />
+                </button>
+              </template>
+            </textarea-field>
           </div>
-          <textarea-field
-            v-else
-            v-model="arg.value"
-            is-clearable
-            size="small"
-            :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`)"
-            @clear="removeArg(arg.id)"
-          />
         </div>
       </div>
       <app-button
@@ -106,7 +125,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppButton, AppCopy } from '#components'
+import { AppButton, AppCopy, AppIcon } from '#components'
 import { useFormValidation } from '@/composables'
 import { ETHEREUM_TYPES } from '@/enums'
 import {
@@ -122,6 +141,7 @@ import {
   ethereumBaseType,
   ethereumBaseTypeValue,
   formatArgSubtype,
+  getDefaultValueOfType,
   json,
   parseFuncArgToValueOfEncode,
   required,
@@ -315,8 +335,41 @@ abiEncoding.value = encodeAbi([], [])
   }
 }
 
-.abi-encode-form__tuple {
+.abi-encode-form__value-wrp {
   display: grid;
   grid-gap: toRem(16);
 }
+
+.abi-encode-form__field-btn {
+  color: var(--field-placeholder);
+  transition: color var(--transition-duration-fast)
+    var(--transition-timing-default);
+
+  &--filled {
+    color: var(--field-text);
+  }
+
+  &:disabled {
+    color: var(--disable-primary-main);
+  }
+
+  &:not([disabled]):hover {
+    color: var(--primary-light);
+  }
+
+  &:not([disabled]):focus,
+  &:not([disabled]):active {
+    color: var(--primary-main);
+  }
+}
+
+.abi-encode-form .abi-encode-form__field-btn-icon {
+  height: toRem(24);
+  width: toRem(24);
+
+  &--refresh {
+    height: toRem(18);
+    width: toRem(18);
+  }
+}
 </style>
diff --git a/helpers/abi-form.helpers.ts b/helpers/abi-form.helpers.ts
index 1260491..707c706 100644
--- a/helpers/abi-form.helpers.ts
+++ b/helpers/abi-form.helpers.ts
@@ -194,3 +194,34 @@ export const parseFuncArgToValueOfEncode = (arg: AbiForm.FuncArg): unknown => {
 export const formatArgSubtype = (subtype: AbiForm.FuncArg['subtype']) => {
   return subtype.replaceAll('tuple(', '(').replaceAll('(', 'tuple(')
 }
+
+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
+
+  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 '[""]'
+    case ETHEREUM_TYPES.uint:
+      return sizeOfType.toString()
+    case ETHEREUM_TYPES.uintArray:
+      return `["${sizeOfType}"]`
+    default:
+      return ''
+  }
+}
diff --git a/public/noscript/style.css b/public/noscript/style.css
index 8491f29..af250c0 100644
--- a/public/noscript/style.css
+++ b/public/noscript/style.css
@@ -22,7 +22,7 @@
 }
 
 .noscript__enable-support {
-  transition: color var(--field-transition-duration);
+  transition: color var(--transition-duration-fast);
   color: var(--primary-main);
 }
 
@@ -53,5 +53,5 @@
 
 .noscript__image {
   display: block;
-  transition: transform var(--field-transition-duration);
+  transition: transform var(--transition-duration-fast);
 }