From 791feb6e80a2b51700e268cb38533e5723d9c6fd Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Mon, 9 Sep 2024 18:17:46 +0300
Subject: [PATCH 01/13] added expanding inputs in convertors

---
 fields/TextareaField.vue      | 35 +++++++++++++++++++++++
 forms/NumberConverterForm.vue | 53 +++++++++++++++++++----------------
 forms/UnitConverterForm.vue   | 39 +++++++++++++++-----------
 3 files changed, 86 insertions(+), 41 deletions(-)

diff --git a/fields/TextareaField.vue b/fields/TextareaField.vue
index 50ae833..63268e0 100644
--- a/fields/TextareaField.vue
+++ b/fields/TextareaField.vue
@@ -8,6 +8,13 @@
       {{ label }}
     </label>
     <div class="textarea-field__textarea-wrp">
+      <div
+        v-if="hasLeftNode"
+        ref="nodeLeftWrp"
+        class="textarea-field__node-left-wrp"
+      >
+        <slot v-if="$slots.nodeLeft" name="nodeLeft" />
+      </div>
       <textarea
         ref="textareaElement"
         class="textarea-field__textarea"
@@ -105,6 +112,7 @@ const slots = useSlots()
 const uid = uuidv4()
 const textareaElement = ref<HTMLTextAreaElement | null>(null)
 const nodeRightWrp = ref<HTMLDivElement | null>(null)
+const nodeLeftWrp = ref<HTMLDivElement | null>(null)
 
 const isDisabled = computed(() =>
   ['', 'disabled', true].includes(attrs.disabled as string | boolean),
@@ -122,6 +130,8 @@ const hasRightNode = computed<boolean>(() =>
   Boolean(slots.nodeRight || props.isClearable || props.errorMessage),
 )
 
+const hasLeftNode = computed<boolean>(() => Boolean(slots.nodeLeft))
+
 const listeners = computed(() => ({
   input: (event: Event) => {
     const eventTarget = event.target as HTMLTextAreaElement
@@ -132,6 +142,7 @@ const listeners = computed(() => ({
 const textareaClasses = computed(() => [
   'textarea-field',
   ...(hasRightNode.value ? ['textarea-field--node-right'] : []),
+  ...(hasLeftNode.value ? ['textarea-field--node-left'] : []),
   ...(isDisabled.value ? ['textarea-field--disabled'] : []),
   ...(isReadonly.value ? ['textarea-field--readonly'] : []),
   ...(props.errorMessage ? ['textarea-field--error'] : []),
@@ -183,6 +194,15 @@ onMounted(() => {
       }px + var(--field-padding-right) * 2)`,
     )
   }
+
+  if (slots?.nodeLeft && nodeLeftWrp.value) {
+    textareaElement.value?.style.setProperty(
+      'padding-left',
+      `calc(${
+        nodeLeftWrp.value?.offsetWidth || OFFSET_WIDTH
+      }px + var(--field-padding-right) * 2)`,
+    )
+  }
 })
 </script>
 
@@ -250,6 +270,10 @@ $z-index-side-nodes: 1;
     padding-right: calc(var(--field-padding-right) * 3);
   }
 
+  .textarea-field--node-left & {
+    padding-left: calc(var(--field-padding-left) * 3);
+  }
+
   .textarea-field--error.textarea-field--primary & {
     border-color: var(--field-error);
   }
@@ -279,6 +303,17 @@ $z-index-side-nodes: 1;
   gap: toRem(8);
 }
 
+.textarea-field__node-left-wrp {
+  position: absolute;
+  top: 50%;
+  left: var(--field-padding-left);
+  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);
diff --git a/forms/NumberConverterForm.vue b/forms/NumberConverterForm.vue
index f92de4c..8148b68 100644
--- a/forms/NumberConverterForm.vue
+++ b/forms/NumberConverterForm.vue
@@ -2,20 +2,21 @@
   <form class="number-converter-form">
     <div class="number-converter-form__input">
       <h3>{{ $t('number-converter-form.input-title') }}</h3>
-      <input-field
+      <textarea-field
         v-for="(_, key) in form"
+        size="small"
         :model-value="form[key]"
         :key="key"
         :label="$t(`number-converter-form.${key}-label`)"
         :placeholder="$t(`number-converter-form.${key}-placeholder`)"
         :error-message="getFieldErrorMessage(key)"
-        @blur="touchField(key)"
         @update:model-value="formatInputs($event, key)"
+        @blur="touchField(key)"
       >
         <template #nodeLeft>
           <app-copy :value="form[key] || 0" />
         </template>
-      </input-field>
+      </textarea-field>
     </div>
   </form>
 </template>
@@ -24,11 +25,12 @@
 import { AppCopy } from '#components'
 import { useFormValidation } from '@/composables'
 import { NUMBER_SYSTEMS } from '@/constants'
-import { InputField } from '@/fields'
+import { TextareaField } from '@/fields'
 import { binary, hexadecimal, integer, octal } from '@/helpers'
 import { BigNumber } from 'bignumber.js'
 import { isEmpty } from 'lodash-es'
 import { reactive } from 'vue'
+import { debounce } from 'lodash-es'
 
 const form = reactive({
   binary: '',
@@ -47,30 +49,33 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   },
 )
 
-const formatInputs = (value: string | number, key: keyof typeof form) => {
-  form[key] = String(value)
+const formatInputs = debounce(
+  (value: string | number, key: keyof typeof form) => {
+    form[key] = String(value)
 
-  const formKeys = Object.keys(form) as (keyof typeof form)[]
-  const filteredKeys = formKeys.filter(_key => _key !== key)
-  const formattedValue = String(value).trim()
+    const formKeys = Object.keys(form) as (keyof typeof form)[]
+    const filteredKeys = formKeys.filter(_key => _key !== key)
+    const formattedValue = String(value).trim()
 
-  if (isEmpty(formattedValue) || !isFormValid()) {
-    for (key of filteredKeys) form[key] = ''
-    return
-  }
+    if (isEmpty(formattedValue) || !isFormValid()) {
+      for (key of filteredKeys) form[key] = ''
+      return
+    }
 
-  const bigNumber = BigNumber(
-    NUMBER_SYSTEMS[key].prefix.concat(formattedValue.toLowerCase()),
-    NUMBER_SYSTEMS[key].base,
-  )
+    const bigNumber = BigNumber(
+      NUMBER_SYSTEMS[key].prefix.concat(formattedValue.toLowerCase()),
+      NUMBER_SYSTEMS[key].base,
+    )
 
-  for (key of filteredKeys)
-    form[key] = bigNumber.isFinite()
-      ? NUMBER_SYSTEMS[key].prefix.concat(
-          bigNumber.toString(NUMBER_SYSTEMS[key].base),
-        )
-      : ''
-}
+    for (key of filteredKeys)
+      form[key] = bigNumber.isFinite()
+        ? NUMBER_SYSTEMS[key].prefix.concat(
+            bigNumber.toString(NUMBER_SYSTEMS[key].base),
+          )
+        : ''
+  },
+  500,
+)
 
 formatInputs('10', 'decimal')
 </script>
diff --git a/forms/UnitConverterForm.vue b/forms/UnitConverterForm.vue
index a85f6ce..353594e 100644
--- a/forms/UnitConverterForm.vue
+++ b/forms/UnitConverterForm.vue
@@ -2,12 +2,13 @@
   <form class="unit-converter-form">
     <div class="unit-converter-form__input">
       <h3>{{ $t('unit-converter-form.input-title') }}</h3>
-      <input-field
+      <textarea-field
         v-for="(_, key) in form"
+        size="small"
+        :model-value="form[key]"
         :key="key"
         :label="UNITS[key].title"
         :placeholder="UNITS[key].title"
-        :model-value="form[key]"
         :error-message="getFieldErrorMessage(key)"
         @blur="touchField(key)"
         @update:model-value="formatInputs($event, key)"
@@ -15,7 +16,7 @@
         <template #nodeLeft>
           <app-copy :value="form[key] || 0" />
         </template>
-      </input-field>
+      </textarea-field>
     </div>
   </form>
 </template>
@@ -24,10 +25,11 @@
 import { AppCopy } from '#components'
 import { useFormValidation } from '@/composables'
 import { UNITS } from '@/constants'
-import { InputField } from '@/fields'
+import { TextareaField } from '@/fields'
 import { fromUnits, numeric, toUnits } from '@/helpers'
 import { isEmpty, mapValues } from 'lodash-es'
 import { reactive } from 'vue'
+import { debounce } from 'lodash-es'
 
 const form = reactive({
   wei: '',
@@ -48,22 +50,25 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   mapValues(form, () => ({ numeric })),
 )
 
-const formatInputs = (value: string | number, key: keyof typeof form) => {
-  form[key] = String(value)
+const formatInputs = debounce(
+  (value: string | number, key: keyof typeof form) => {
+    form[key] = String(value)
 
-  const formKeys = Object.keys(form) as (keyof typeof form)[]
-  const filteredKeys = formKeys.filter(_key => _key !== key)
-  const formattedValue = String(value).trim()
+    const formKeys = Object.keys(form) as (keyof typeof form)[]
+    const filteredKeys = formKeys.filter(_key => _key !== key)
+    const formattedValue = String(value).trim()
 
-  if (isEmpty(formattedValue) || !isFormValid()) {
-    for (key of filteredKeys) form[key] = ''
-    return
-  }
+    if (isEmpty(formattedValue) || !isFormValid()) {
+      for (key of filteredKeys) form[key] = ''
+      return
+    }
 
-  const etherAmount = fromUnits(formattedValue, UNITS[key].decimals)
-  for (key of filteredKeys)
-    form[key] = toUnits(etherAmount, UNITS[key].decimals)
-}
+    const etherAmount = fromUnits(formattedValue, UNITS[key].decimals)
+    for (key of filteredKeys)
+      form[key] = toUnits(etherAmount, UNITS[key].decimals)
+  },
+  500,
+)
 
 formatInputs('1', 'ether')
 </script>

From 44d93f3184deb946774cd0f26d3b1dd47e70fc09 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Tue, 10 Sep 2024 15:08:29 +0300
Subject: [PATCH 02/13] added seconds to duration feature

---
 enums/index.ts                         |   1 +
 enums/route-names.enum.ts              |   1 +
 enums/time.enum.ts                     |  17 ++++
 forms/DurationForm.vue                 | 113 +++++++++++++++++++++++++
 forms/NumberConverterForm.vue          |  44 +++++-----
 forms/UnitConverterForm.vue            |  30 +++----
 helpers/index.ts                       |   1 +
 helpers/time.helpers.ts                |  75 ++++++++++++++++
 pages/unix-epoch.vue                   |   6 ++
 pages/unix-epoch/duration.vue          |   7 ++
 plugins/localization/resources/en.json |  12 ++-
 11 files changed, 265 insertions(+), 42 deletions(-)
 create mode 100644 enums/time.enum.ts
 create mode 100644 forms/DurationForm.vue
 create mode 100644 helpers/time.helpers.ts
 create mode 100644 pages/unix-epoch/duration.vue

diff --git a/enums/index.ts b/enums/index.ts
index 77ba008..632dba3 100644
--- a/enums/index.ts
+++ b/enums/index.ts
@@ -2,3 +2,4 @@ export * from './ethereum-types.enum'
 export * from './icon-names.enum'
 export * from './route-names.enum'
 export * from './window-breakpoints.enum'
+export * from './time.enum'
diff --git a/enums/route-names.enum.ts b/enums/route-names.enum.ts
index e1eeed9..a166159 100644
--- a/enums/route-names.enum.ts
+++ b/enums/route-names.enum.ts
@@ -7,6 +7,7 @@ export enum ROUTE_NAMES {
   unixEpoch = 'unix-epoch',
   unixEpochDate = 'unix-epoch-date',
   unixEpochTimestamp = 'unix-epoch-timestamp',
+  unixEpochDuration = 'unix-epoch-duration',
   converter = 'converter',
   converterUnit = 'converter-unit',
   converterNumber = 'converter-number',
diff --git a/enums/time.enum.ts b/enums/time.enum.ts
new file mode 100644
index 0000000..adb30d2
--- /dev/null
+++ b/enums/time.enum.ts
@@ -0,0 +1,17 @@
+export enum DATE_IDS {
+  seconds = 's',
+  minutes = 'min',
+  hours = 'h',
+  days = 'd',
+  weeks = 'w',
+  years = 'y',
+}
+
+export enum TIME_CONSTANTS {
+  secondsInMinute = 60,
+  minutesInHour = 60,
+  hoursInDay = 24,
+  daysInWeek = 7,
+  weeksInYear = 52,
+  daysInYear = 365,
+}
diff --git a/forms/DurationForm.vue b/forms/DurationForm.vue
new file mode 100644
index 0000000..2bff2e1
--- /dev/null
+++ b/forms/DurationForm.vue
@@ -0,0 +1,113 @@
+<template>
+  <form class="duration-form">
+    <div class="duration-form__input">
+      <h3>{{ $t('duration-form.input-title') }}</h3>
+      <input-field
+        v-model="form.date"
+        :label="$t('duration-form.date-label')"
+        :placeholder="$t('duration-form.date-placeholder')"
+        @blur="touchField('date')"
+      />
+    </div>
+    <div class="duration-form__divider" />
+    <div class="duration-form__output">
+      <h3>{{ $t('duration-form.output-title') }}</h3>
+      <div v-for="(item, idx) in outputItems" :key="idx">
+        <p class="duration-form__output-item-label">
+          {{ item.label }}
+        </p>
+        <app-copy :value="item.value">
+          <p class="duration-form__output-item-value">
+            {{ item.value || '–' }}
+          </p>
+        </app-copy>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { AppCopy } from '#components'
+import { useFormValidation } from '@/composables'
+import { InputField } from '@/fields'
+import { computed, reactive, watch } from 'vue'
+import { i18n } from '~/plugins/localization'
+import { duration } from 'dayjs'
+import { resetRawDate, updateRawDate } from '@/helpers'
+
+const { t } = i18n.global
+
+const form = reactive({ date: '' })
+
+const rawDate = reactive({
+  seconds: 0,
+  minutes: 0,
+  hours: 0,
+  days: 0,
+  weeks: 0,
+  years: 0,
+})
+
+const { touchField } = useFormValidation(form, {})
+
+const outputItems = computed(() => [
+  {
+    label: t('duration-form.you-put-label'),
+    value: pastedValue.value,
+  },
+  {
+    label: t('duration-form.milliseconds-label'),
+    value: secondsDuration.value || '',
+  },
+])
+
+const dateObject = computed(() => {
+  const dateObject: Partial<Record<keyof typeof rawDate, number>> = {}
+  const dateKeys = Object.keys(rawDate) as (keyof typeof rawDate)[]
+
+  dateKeys.forEach(key => {
+    dateObject[key] = rawDate[key]
+  })
+
+  return dateObject
+})
+
+const pastedValue = computed(() =>
+  t('duration-form.pasted-value', dateObject.value),
+)
+
+const secondsDuration = computed(() => {
+  return duration(dateObject.value).asSeconds()
+})
+
+watch(
+  () => form.date,
+  () => {
+    resetRawDate(rawDate)
+    updateRawDate(form.date, rawDate)
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.duration-form {
+  @include solidity-tools-form;
+}
+
+.duration-form__output,
+.duration-form__input {
+  @include solidity-tools-form-part;
+}
+
+.duration-form__divider {
+  @include solidity-tools-form-divider;
+}
+
+.duration-form__output-item-label {
+  @include field-label;
+}
+
+.duration-form__output-item-value {
+  @include text-ellipsis;
+}
+</style>
diff --git a/forms/NumberConverterForm.vue b/forms/NumberConverterForm.vue
index 8148b68..813d795 100644
--- a/forms/NumberConverterForm.vue
+++ b/forms/NumberConverterForm.vue
@@ -30,7 +30,6 @@ import { binary, hexadecimal, integer, octal } from '@/helpers'
 import { BigNumber } from 'bignumber.js'
 import { isEmpty } from 'lodash-es'
 import { reactive } from 'vue'
-import { debounce } from 'lodash-es'
 
 const form = reactive({
   binary: '',
@@ -49,33 +48,30 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   },
 )
 
-const formatInputs = debounce(
-  (value: string | number, key: keyof typeof form) => {
-    form[key] = String(value)
+const formatInputs = (value: string | number, key: keyof typeof form) => {
+  form[key] = String(value)
 
-    const formKeys = Object.keys(form) as (keyof typeof form)[]
-    const filteredKeys = formKeys.filter(_key => _key !== key)
-    const formattedValue = String(value).trim()
+  const formKeys = Object.keys(form) as (keyof typeof form)[]
+  const filteredKeys = formKeys.filter(_key => _key !== key)
+  const formattedValue = String(value).trim()
 
-    if (isEmpty(formattedValue) || !isFormValid()) {
-      for (key of filteredKeys) form[key] = ''
-      return
-    }
+  if (isEmpty(formattedValue) || !isFormValid()) {
+    for (key of filteredKeys) form[key] = ''
+    return
+  }
 
-    const bigNumber = BigNumber(
-      NUMBER_SYSTEMS[key].prefix.concat(formattedValue.toLowerCase()),
-      NUMBER_SYSTEMS[key].base,
-    )
+  const bigNumber = BigNumber(
+    NUMBER_SYSTEMS[key].prefix.concat(formattedValue.toLowerCase()),
+    NUMBER_SYSTEMS[key].base,
+  )
 
-    for (key of filteredKeys)
-      form[key] = bigNumber.isFinite()
-        ? NUMBER_SYSTEMS[key].prefix.concat(
-            bigNumber.toString(NUMBER_SYSTEMS[key].base),
-          )
-        : ''
-  },
-  500,
-)
+  for (key of filteredKeys)
+    form[key] = bigNumber.isFinite()
+      ? NUMBER_SYSTEMS[key].prefix.concat(
+          bigNumber.toString(NUMBER_SYSTEMS[key].base),
+        )
+      : ''
+}
 
 formatInputs('10', 'decimal')
 </script>
diff --git a/forms/UnitConverterForm.vue b/forms/UnitConverterForm.vue
index 353594e..890507d 100644
--- a/forms/UnitConverterForm.vue
+++ b/forms/UnitConverterForm.vue
@@ -29,7 +29,6 @@ import { TextareaField } from '@/fields'
 import { fromUnits, numeric, toUnits } from '@/helpers'
 import { isEmpty, mapValues } from 'lodash-es'
 import { reactive } from 'vue'
-import { debounce } from 'lodash-es'
 
 const form = reactive({
   wei: '',
@@ -50,25 +49,22 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   mapValues(form, () => ({ numeric })),
 )
 
-const formatInputs = debounce(
-  (value: string | number, key: keyof typeof form) => {
-    form[key] = String(value)
+const formatInputs = (value: string | number, key: keyof typeof form) => {
+  form[key] = String(value)
 
-    const formKeys = Object.keys(form) as (keyof typeof form)[]
-    const filteredKeys = formKeys.filter(_key => _key !== key)
-    const formattedValue = String(value).trim()
+  const formKeys = Object.keys(form) as (keyof typeof form)[]
+  const filteredKeys = formKeys.filter(_key => _key !== key)
+  const formattedValue = String(value).trim()
 
-    if (isEmpty(formattedValue) || !isFormValid()) {
-      for (key of filteredKeys) form[key] = ''
-      return
-    }
+  if (isEmpty(formattedValue) || !isFormValid()) {
+    for (key of filteredKeys) form[key] = ''
+    return
+  }
 
-    const etherAmount = fromUnits(formattedValue, UNITS[key].decimals)
-    for (key of filteredKeys)
-      form[key] = toUnits(etherAmount, UNITS[key].decimals)
-  },
-  500,
-)
+  const etherAmount = fromUnits(formattedValue, UNITS[key].decimals)
+  for (key of filteredKeys)
+    form[key] = toUnits(etherAmount, UNITS[key].decimals)
+}
 
 formatInputs('1', 'ether')
 </script>
diff --git a/helpers/index.ts b/helpers/index.ts
index 19253cf..d24bf5a 100644
--- a/helpers/index.ts
+++ b/helpers/index.ts
@@ -10,3 +10,4 @@ export * from './type.helpers'
 export * from './validators.helpers'
 export * from './hash-functions.helpers'
 export * from './numbers.helpers'
+export * from './time.helpers'
diff --git a/helpers/time.helpers.ts b/helpers/time.helpers.ts
new file mode 100644
index 0000000..c41177c
--- /dev/null
+++ b/helpers/time.helpers.ts
@@ -0,0 +1,75 @@
+import { DATE_IDS, TIME_CONSTANTS } from '@/enums'
+import { duration } from 'dayjs'
+
+type RawDateType = Record<keyof typeof DATE_IDS, number>
+
+export const normalizeTime = (rawDate: RawDateType) => {
+  let totalDuration = duration(0)
+
+  totalDuration = totalDuration
+    .add(rawDate.seconds, 'seconds')
+    .add(rawDate.minutes, 'minutes')
+    .add(rawDate.hours, 'hours')
+    .add(rawDate.days, 'days')
+    .add(rawDate.weeks, 'weeks')
+    .add(rawDate.years, 'years')
+
+  rawDate.seconds = totalDuration.seconds()
+  rawDate.minutes = totalDuration.minutes()
+  rawDate.hours = totalDuration.hours()
+  // HACK! DayJS doesn't handle this kind of parsing (weeks => years)
+  // with integer, so the solution is the expressions below
+  // https://day.js.org/docs/en/durations/weeks
+  rawDate.days =
+    (Math.floor(totalDuration.asDays()) -
+      Math.floor(totalDuration.asYears()) * TIME_CONSTANTS.daysInYear) %
+    TIME_CONSTANTS.daysInWeek
+  rawDate.weeks = Math.floor(
+    (Math.floor(totalDuration.asDays()) -
+      Math.floor(totalDuration.asYears()) * TIME_CONSTANTS.daysInYear) /
+      TIME_CONSTANTS.daysInWeek,
+  )
+  rawDate.years = totalDuration.years()
+
+  return rawDate
+}
+
+export const resetRawDate = (rawDate: RawDateType) => {
+  Object.keys(rawDate).forEach(
+    key => (rawDate[key as keyof typeof rawDate] = 0),
+  )
+}
+
+export const updateRawDate = (dateString: string, rawDate: RawDateType) => {
+  const dateUnits = Object.values(DATE_IDS).join('|')
+  const regex = new RegExp(`(\\d+)\\s*(${dateUnits})`, 'g')
+
+  let match
+  while ((match = regex.exec(dateString))) {
+    const value = parseInt(match[1])
+    const unit = match[2] as DATE_IDS
+
+    switch (unit) {
+      case DATE_IDS.seconds:
+        rawDate.seconds += value
+        break
+      case DATE_IDS.minutes:
+        rawDate.minutes += value
+        break
+      case DATE_IDS.hours:
+        rawDate.hours += value
+        break
+      case DATE_IDS.days:
+        rawDate.days += value
+        break
+      case DATE_IDS.years:
+        rawDate.years += value
+        break
+      case DATE_IDS.weeks:
+        rawDate.weeks += value
+        break
+    }
+  }
+
+  normalizeTime(rawDate)
+}
diff --git a/pages/unix-epoch.vue b/pages/unix-epoch.vue
index 88d52b4..0efa585 100644
--- a/pages/unix-epoch.vue
+++ b/pages/unix-epoch.vue
@@ -26,6 +26,7 @@ definePageMeta({
 enum TABS_IDS {
   date = 'date',
   timestamp = 'timestamp',
+  duration = 'duration',
 }
 
 const { t } = i18n.global
@@ -40,6 +41,11 @@ const tabsList = computed<Tab[]>(() => [
     id: TABS_IDS.timestamp,
     route: { name: ROUTE_NAMES.unixEpochTimestamp },
   },
+  {
+    title: t('unix-epoch-page.duration-form-tab'),
+    id: TABS_IDS.duration,
+    route: { name: ROUTE_NAMES.unixEpochDuration },
+  },
 ])
 </script>
 
diff --git a/pages/unix-epoch/duration.vue b/pages/unix-epoch/duration.vue
new file mode 100644
index 0000000..07376a7
--- /dev/null
+++ b/pages/unix-epoch/duration.vue
@@ -0,0 +1,7 @@
+<template>
+  <duration-form />
+</template>
+
+<script lang="ts" setup>
+import DurationForm from '@/forms/DurationForm.vue'
+</script>
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index 4383b56..6a5fc80 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -79,7 +79,17 @@
   "unix-epoch-page": {
     "main-title": "UNIX epoch",
     "date-form-tab": "Human date UTC",
-    "timestamp-form-tab": "Timestamp"
+    "timestamp-form-tab": "Timestamp",
+    "duration-form-tab": "Duration"
+  },
+  "duration-form": {
+    "pasted-value": "{years} year(s) {weeks} week(s) {days} day(s)\n {hours} hour(s) {minutes} minute(s)",
+    "input-title": "Enter Duration",
+    "date-label": "Duration in following format",
+    "date-placeholder": "Enter time (ex: 1y 3w 4h 5min 1300s)",
+    "you-put-label": "Entered duration",
+    "output-title": "Output",
+    "milliseconds-label": "Entered duration (seconds)"
   },
   "abi-decode-form": {
     "input-title": "Decoder",

From 673912bddda7f382525831b34be5690eebf0fa1b Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Wed, 11 Sep 2024 10:29:02 +0300
Subject: [PATCH 03/13] addded hex2ASCII converter

---
 enums/route-names.enum.ts              |  1 +
 forms/AsciiConverterForm.vue           | 76 ++++++++++++++++++++++++++
 forms/index.ts                         |  1 +
 helpers/text.helpers.ts                | 21 +++++++
 pages/converter.vue                    |  6 ++
 pages/converter/ascii.vue              |  7 +++
 plugins/localization/resources/en.json | 10 +++-
 7 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 forms/AsciiConverterForm.vue
 create mode 100644 pages/converter/ascii.vue

diff --git a/enums/route-names.enum.ts b/enums/route-names.enum.ts
index a166159..b19a3ad 100644
--- a/enums/route-names.enum.ts
+++ b/enums/route-names.enum.ts
@@ -11,6 +11,7 @@ export enum ROUTE_NAMES {
   converter = 'converter',
   converterUnit = 'converter-unit',
   converterNumber = 'converter-number',
+  converterAscii = 'converter-ascii',
   hashFunction = 'hash-function',
   hashFunctionKeccak256Id = 'hash-function-keccak256-id',
   hashFunctionSha256Id = 'hash-function-sha256-id',
diff --git a/forms/AsciiConverterForm.vue b/forms/AsciiConverterForm.vue
new file mode 100644
index 0000000..3081e53
--- /dev/null
+++ b/forms/AsciiConverterForm.vue
@@ -0,0 +1,76 @@
+<template>
+  <form class="ascii-converter-form">
+    <div class="ascii-converter-form__input">
+      <h3>{{ $t('ascii-converter-form.input-title') }}</h3>
+      <textarea-field
+        v-for="(_, key) in form"
+        size="small"
+        :model-value="form[key]"
+        :key="key"
+        :label="$t(`ascii-converter-form.${key}-label`)"
+        :placeholder="$t(`ascii-converter-form.${key}-placeholder`)"
+        :error-message="getFieldErrorMessage(key)"
+        @update:model-value="formatInputs($event, key)"
+        @blur="touchField(key)"
+      >
+        <template #nodeLeft>
+          <app-copy :value="form[key] || 0" />
+        </template>
+      </textarea-field>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { AppCopy } from '#components'
+import { useFormValidation } from '@/composables'
+import { TextareaField } from '@/fields'
+import { hexadecimal } from '@/helpers'
+import { isEmpty } from 'lodash-es'
+import { reactive } from 'vue'
+import { hexToASCII, asciiToHex } from '@/helpers'
+
+const form = reactive({
+  hexadecimal: '',
+  ascii: '',
+})
+
+const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
+  form,
+  {
+    hexadecimal: { hexadecimal },
+    ascii: {},
+  },
+)
+
+const formatInputs = (value: string | number, key: keyof typeof form) => {
+  form[key] = String(value)
+  const formKeys = Object.keys(form) as (keyof typeof form)[]
+  const filteredKeys = formKeys.filter(_key => _key !== key)
+  const formattedValue = String(value).trim()
+
+  if (isEmpty(formattedValue) || !isFormValid()) {
+    for (key of filteredKeys) form[key] = ''
+    return
+  }
+
+  switch (key) {
+    case 'hexadecimal':
+      form.ascii = hexToASCII(form.hexadecimal)
+      break
+    case 'ascii':
+      form.hexadecimal = asciiToHex(form.ascii)
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ascii-converter-form {
+  @include solidity-tools-form;
+}
+
+.ascii-converter-form__input {
+  @include solidity-tools-form-part;
+}
+</style>
diff --git a/forms/index.ts b/forms/index.ts
index b47552e..0e8604d 100644
--- a/forms/index.ts
+++ b/forms/index.ts
@@ -8,3 +8,4 @@ export { default as TimestampForm } from './TimestampForm.vue'
 export { default as HashFunctionForm } from './HashFunctionForm.vue'
 export { default as UnitConverterForm } from './UnitConverterForm.vue'
 export { default as NumberConverterForm } from './NumberConverterForm.vue'
+export { default as AsciiConverterForm } from './AsciiConverterForm.vue'
diff --git a/helpers/text.helpers.ts b/helpers/text.helpers.ts
index 23843e5..e7ee0c2 100644
--- a/helpers/text.helpers.ts
+++ b/helpers/text.helpers.ts
@@ -2,3 +2,24 @@ export function capitalize(str: string) {
   if (!str) return ''
   return str[0].toUpperCase() + str.slice(1)
 }
+
+export function hexToASCII(hexString: string) {
+  const hex = (
+    hexString.startsWith('0x') ? hexString.slice(2) : hexString
+  ).replaceAll(' ', '')
+
+  let ascii = ''
+  for (let i = 0; i < hex.length; i += 2) {
+    ascii += String.fromCharCode(parseInt(hex.slice(i, i + 2), 16))
+  }
+
+  return ascii
+}
+
+export function asciiToHex(asciiString: string) {
+  let hex = ''
+  for (let i = 0; i < asciiString.length; i++) {
+    hex += asciiString.charCodeAt(i).toString(16).padStart(2, '0')
+  }
+  return '0x' + hex
+}
diff --git a/pages/converter.vue b/pages/converter.vue
index 29b1232..f3d3698 100644
--- a/pages/converter.vue
+++ b/pages/converter.vue
@@ -26,6 +26,7 @@ definePageMeta({
 enum TABS_IDS {
   unitConverterForm = 'unit-converter-form',
   numberConverterForm = 'number-converter-form',
+  asciiConverterForm = 'ascii-converter-form',
 }
 
 const { t } = i18n.global
@@ -40,6 +41,11 @@ const tabsList = computed<Tab[]>(() => [
     id: TABS_IDS.numberConverterForm,
     route: { name: ROUTE_NAMES.converterNumber },
   },
+  {
+    title: t('converter-page.ascii-converter-form-tab'),
+    id: TABS_IDS.asciiConverterForm,
+    route: { name: ROUTE_NAMES.converterAscii },
+  },
 ])
 </script>
 
diff --git a/pages/converter/ascii.vue b/pages/converter/ascii.vue
new file mode 100644
index 0000000..8d10fcb
--- /dev/null
+++ b/pages/converter/ascii.vue
@@ -0,0 +1,7 @@
+<template>
+  <ascii-converter-form />
+</template>
+
+<script lang="ts" setup>
+import { AsciiConverterForm } from '@/forms'
+</script>
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index 6a5fc80..bbbbc82 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -71,7 +71,8 @@
   "converter-page": {
     "main-title": "Converter",
     "unit-converter-form-tab": "Unit converter",
-    "number-converter-form-tab": "Number converter"
+    "number-converter-form-tab": "Number converter",
+    "ascii-converter-form-tab": "Hex2ASCII converter"
   },
   "hash-functions-page": {
     "main-title": "Hash functions"
@@ -173,6 +174,13 @@
     "decimal-placeholder": "Decimal",
     "hexadecimal-placeholder": "Hexadecimal"
   },
+  "ascii-converter-form": {
+    "input-title": "Hex2ASCII converter",
+    "hexadecimal-label": "Hexadecimal",
+    "hexadecimal-placeholder": "0x4578616d706c6521",
+    "ascii-label": "ASCII",
+    "ascii-placeholder": "Example!"
+  },
   "timestamp-form": {
     "input-title": "Enter Timestamp",
     "timestamp-label": "Timestamp in seconds",

From 575933c44c2a2ae5aa1ff271f6bf4e5a020a9014 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Wed, 11 Sep 2024 16:22:45 +0300
Subject: [PATCH 04/13] added constants page

---
 components/ToolsSidebar.vue            |  5 ++
 enums/constants.enum.ts                |  3 +
 enums/index.ts                         |  1 +
 enums/route-names.enum.ts              |  2 +
 forms/ConstantsForm.vue                | 97 ++++++++++++++++++++++++++
 forms/index.ts                         |  1 +
 pages/constants.vue                    | 30 ++++++++
 pages/constants/bytes.vue              |  7 ++
 plugins/localization/resources/en.json | 15 +++-
 9 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 enums/constants.enum.ts
 create mode 100644 forms/ConstantsForm.vue
 create mode 100644 pages/constants.vue
 create mode 100644 pages/constants/bytes.vue

diff --git a/components/ToolsSidebar.vue b/components/ToolsSidebar.vue
index d3d3092..bb86207 100644
--- a/components/ToolsSidebar.vue
+++ b/components/ToolsSidebar.vue
@@ -70,6 +70,11 @@ const navLinks = computed(() => [
     icon: ICON_NAMES.locationMarker,
     route: { name: ROUTE_NAMES.addressUtils },
   },
+  {
+    title: t('tools-sidebar.constants'),
+    icon: ICON_NAMES.clipboardCheck,
+    route: { name: ROUTE_NAMES.constants },
+  },
 ])
 
 const { width: windowWidth } = useWindowSize()
diff --git a/enums/constants.enum.ts b/enums/constants.enum.ts
new file mode 100644
index 0000000..4f0a19a
--- /dev/null
+++ b/enums/constants.enum.ts
@@ -0,0 +1,3 @@
+export enum BYTES_CONSTANTS {
+  zeroBytes = '0x0000000000000000000000000000000000000000000000000000000000000000',
+}
diff --git a/enums/index.ts b/enums/index.ts
index 632dba3..377fd20 100644
--- a/enums/index.ts
+++ b/enums/index.ts
@@ -3,3 +3,4 @@ export * from './icon-names.enum'
 export * from './route-names.enum'
 export * from './window-breakpoints.enum'
 export * from './time.enum'
+export * from './constants.enum'
diff --git a/enums/route-names.enum.ts b/enums/route-names.enum.ts
index b19a3ad..6571aad 100644
--- a/enums/route-names.enum.ts
+++ b/enums/route-names.enum.ts
@@ -20,4 +20,6 @@ export enum ROUTE_NAMES {
   addressUtilsCommonAddresses = 'address-utils-common-addresses',
   addressUtilsCreate = 'address-utils-create',
   addressUtilsCreate2 = 'address-utils-create2',
+  constants = 'constants',
+  constantsBytes = 'constants-bytes',
 }
diff --git a/forms/ConstantsForm.vue b/forms/ConstantsForm.vue
new file mode 100644
index 0000000..db2cdad
--- /dev/null
+++ b/forms/ConstantsForm.vue
@@ -0,0 +1,97 @@
+<template>
+  <form class="constants-form" @submit.prevent>
+    <div class="constants-form__input">
+      <h3>{{ $t('constants-form.title') }}</h3>
+      <template v-for="(_, key) in form" :key="key">
+        <div v-if="key === 'randomBytes32'">
+          <div class="constants-form__label-wrp">
+            <label
+              class="constants-form__label"
+              :for="randomBytes32InputFieldUid"
+            >
+              {{ $t(`constants-form.${key}-label`) }}
+            </label>
+            <button
+              v-if="key === 'randomBytes32'"
+              @click="form.randomBytes32 = generateRandomBytes()"
+            >
+              <app-icon
+                class="constants-form__btn-icon"
+                :name="$icons.refresh"
+              />
+            </button>
+          </div>
+          <input-field
+            readonly
+            :model-value="form[key]"
+            :uid="randomBytes32InputFieldUid"
+          >
+            <template #nodeLeft>
+              <app-copy :value="form[key]" />
+            </template>
+          </input-field>
+        </div>
+        <input-field
+          v-else
+          readonly
+          :label="$t(`constants-form.${key}-label`)"
+          :model-value="form[key]"
+        >
+          <template #nodeLeft>
+            <app-copy :value="form[key]" />
+          </template>
+        </input-field>
+      </template>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { AppCopy, AppIcon } from '#components'
+import { InputField } from '@/fields'
+import { v4 as uuidv4 } from 'uuid'
+import { onMounted, reactive } from 'vue'
+import { randomBytes, hexlify } from 'ethers'
+import { BYTES_CONSTANTS } from '@/enums'
+
+const randomBytes32InputFieldUid = `input-field--${uuidv4()}`
+const generateRandomBytes = (): string => hexlify(randomBytes(32))
+
+const form = reactive({
+  zeroBytes32: BYTES_CONSTANTS.zeroBytes,
+  randomBytes32: generateRandomBytes(),
+})
+
+onMounted(() => {
+  form.randomBytes32 = generateRandomBytes()
+})
+</script>
+
+<style lang="scss" scoped>
+.constants-form {
+  @include solidity-tools-form;
+}
+
+.constants-form__input {
+  @include solidity-tools-form-part;
+}
+
+.constants-form__label-wrp {
+  display: flex;
+  gap: toRem(8);
+  align-items: center;
+  margin-bottom: var(--field-label-margin-bottom);
+}
+
+.constants-form__label {
+  @include field-label;
+
+  margin-bottom: 0;
+}
+
+.constants-form .constants-form__btn-icon {
+  height: toRem(16);
+  width: toRem(16);
+  color: var(--primary-main);
+}
+</style>
diff --git a/forms/index.ts b/forms/index.ts
index 0e8604d..f2515bd 100644
--- a/forms/index.ts
+++ b/forms/index.ts
@@ -9,3 +9,4 @@ export { default as HashFunctionForm } from './HashFunctionForm.vue'
 export { default as UnitConverterForm } from './UnitConverterForm.vue'
 export { default as NumberConverterForm } from './NumberConverterForm.vue'
 export { default as AsciiConverterForm } from './AsciiConverterForm.vue'
+export { default as ConstantsForm } from './ConstantsForm.vue'
diff --git a/pages/constants.vue b/pages/constants.vue
new file mode 100644
index 0000000..4a6f080
--- /dev/null
+++ b/pages/constants.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="constants">
+    <h2>{{ $t('constants.main-title') }}</h2>
+    <div>
+      <div class="constants__content">
+        <nuxt-page keepalive />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { definePageMeta } from '#imports'
+import { ROUTE_NAMES } from '@/enums'
+
+definePageMeta({
+  layout: 'solidity-tools',
+  redirect: { name: ROUTE_NAMES.constantsBytes },
+})
+</script>
+
+<style lang="scss" scoped>
+.constants {
+  @include solidity-tools-page-base;
+}
+
+.constants__content {
+  @include solidity-tools-page-content;
+}
+</style>
diff --git a/pages/constants/bytes.vue b/pages/constants/bytes.vue
new file mode 100644
index 0000000..4d9e488
--- /dev/null
+++ b/pages/constants/bytes.vue
@@ -0,0 +1,7 @@
+<template>
+  <constants-form />
+</template>
+
+<script lang="ts" setup>
+import { ConstantsForm } from '@/forms'
+</script>
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index bbbbc82..fa02d6d 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -55,7 +55,8 @@
     "hash-functions-title": "Hash functions",
     "converter-title": "Converter",
     "unix-epoch-title": "Unix epoch",
-    "address-utils-title": "Address utils"
+    "address-utils-title": "Address utils",
+    "constants": "Constants"
   },
   "abi-page": {
     "main-title": "ABI Encoder/Decoder",
@@ -72,7 +73,7 @@
     "main-title": "Converter",
     "unit-converter-form-tab": "Unit converter",
     "number-converter-form-tab": "Number converter",
-    "ascii-converter-form-tab": "Hex2ASCII converter"
+    "ascii-converter-form-tab": "ASCII converter"
   },
   "hash-functions-page": {
     "main-title": "Hash functions"
@@ -175,7 +176,7 @@
     "hexadecimal-placeholder": "Hexadecimal"
   },
   "ascii-converter-form": {
-    "input-title": "Hex2ASCII converter",
+    "input-title": "ASCII converter",
     "hexadecimal-label": "Hexadecimal",
     "hexadecimal-placeholder": "0x4578616d706c6521",
     "ascii-label": "ASCII",
@@ -270,5 +271,13 @@
     "audits-card-2-file-size": "11.5 MB",
     "audits-card-3-title": "PollenDAO",
     "audits-card-3-file-size": "10.3 MB"
+  },
+  "constants": {
+    "main-title": "Constants"
+  },
+  "constants-form": {
+    "title": "Bytes",
+    "zeroBytes32-label": "Zero bytes (32)",
+    "randomBytes32-label": "Random bytes (32)"
   }
 }

From c625b06ffb350e9bbc62446a56575389c81c5723 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Fri, 13 Sep 2024 12:25:25 +0300
Subject: [PATCH 05/13] added verify message form

---
 assets/icons/constant-icon.svg         |   1 +
 components/ToolsSidebar.vue            |   7 +-
 composables/use-form-validation.ts     |  11 +++
 enums/icon-names.enum.ts               |   1 +
 enums/route-names.enum.ts              |   2 +
 enums/time.enum.ts                     |   8 +-
 forms/DurationForm.vue                 |  33 ++++++-
 forms/VerifySignatureForm.vue          | 114 +++++++++++++++++++++++++
 forms/index.ts                         |   1 +
 helpers/time.helpers.ts                |  56 +++++++-----
 pages/constants.vue                    |  17 ++++
 pages/ecrecover.vue                    |  47 ++++++++++
 pages/ecrecover/verify.vue             |   7 ++
 plugins/localization/resources/en.json |  30 +++++--
 14 files changed, 302 insertions(+), 33 deletions(-)
 create mode 100644 assets/icons/constant-icon.svg
 create mode 100644 forms/VerifySignatureForm.vue
 create mode 100644 pages/ecrecover.vue
 create mode 100644 pages/ecrecover/verify.vue

diff --git a/assets/icons/constant-icon.svg b/assets/icons/constant-icon.svg
new file mode 100644
index 0000000..3825287
--- /dev/null
+++ b/assets/icons/constant-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M282.6 78.1c8-27.3 33-46.1 61.4-46.1l200 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L344 96 238.7 457c-3.6 12.3-14.1 21.2-26.8 22.8s-25.1-4.6-31.5-15.6L77.6 288 32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l45.6 0c22.8 0 43.8 12.1 55.3 31.8l65.2 111.8L282.6 78.1zM393.4 233.4c12.5-12.5 32.8-12.5 45.3 0L480 274.7l41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L525.3 320l41.4 41.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L480 365.3l-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L434.7 320l-41.4-41.4c-12.5-12.5-12.5-32.8 0-45.3z"/></svg>
\ No newline at end of file
diff --git a/components/ToolsSidebar.vue b/components/ToolsSidebar.vue
index bb86207..fb53b0d 100644
--- a/components/ToolsSidebar.vue
+++ b/components/ToolsSidebar.vue
@@ -72,9 +72,14 @@ const navLinks = computed(() => [
   },
   {
     title: t('tools-sidebar.constants'),
-    icon: ICON_NAMES.clipboardCheck,
+    icon: ICON_NAMES.constant,
     route: { name: ROUTE_NAMES.constants },
   },
+  {
+    title: t('tools-sidebar.ecrecover'),
+    icon: ICON_NAMES.checkCircle,
+    route: { name: ROUTE_NAMES.ecrecover },
+  },
 ])
 
 const { width: windowWidth } = useWindowSize()
diff --git a/composables/use-form-validation.ts b/composables/use-form-validation.ts
index 11ae3c6..a91273d 100644
--- a/composables/use-form-validation.ts
+++ b/composables/use-form-validation.ts
@@ -47,10 +47,21 @@ export const useFormValidation = (
     }
   }
 
+  const resetForm = <T extends Record<string, unknown>>(form: T) => {
+    const formKeys = Object.keys(form) as Array<keyof T>
+
+    formKeys.forEach(key => {
+      form[key] = '' as T[keyof T]
+      const field = get(validationController.value, key)
+      field.$reset()
+    })
+  }
+
   return {
     isFieldsValid,
     getFieldErrorMessage,
     touchField,
     isFormValid,
+    resetForm,
   }
 }
diff --git a/enums/icon-names.enum.ts b/enums/icon-names.enum.ts
index 8f56a0a..17fa516 100644
--- a/enums/icon-names.enum.ts
+++ b/enums/icon-names.enum.ts
@@ -21,4 +21,5 @@ export enum ICON_NAMES {
   refresh = 'refresh',
   xCircle = 'x-circle',
   x = 'x',
+  constant = 'constant',
 }
diff --git a/enums/route-names.enum.ts b/enums/route-names.enum.ts
index 6571aad..d8a52c3 100644
--- a/enums/route-names.enum.ts
+++ b/enums/route-names.enum.ts
@@ -22,4 +22,6 @@ export enum ROUTE_NAMES {
   addressUtilsCreate2 = 'address-utils-create2',
   constants = 'constants',
   constantsBytes = 'constants-bytes',
+  ecrecover = 'ecrecover',
+  ecrecoverVerify = 'ecrecover-verify',
 }
diff --git a/enums/time.enum.ts b/enums/time.enum.ts
index adb30d2..47d2c16 100644
--- a/enums/time.enum.ts
+++ b/enums/time.enum.ts
@@ -4,14 +4,14 @@ export enum DATE_IDS {
   hours = 'h',
   days = 'd',
   weeks = 'w',
+  months = 'mon',
   years = 'y',
 }
 
 export enum TIME_CONSTANTS {
-  secondsInMinute = 60,
-  minutesInHour = 60,
+  secondsInHour = 3600,
   hoursInDay = 24,
   daysInWeek = 7,
-  weeksInYear = 52,
-  daysInYear = 365,
+  daysInMonth = 30,
+  daysInYear = 360,
 }
diff --git a/forms/DurationForm.vue b/forms/DurationForm.vue
index 2bff2e1..ac5e6ad 100644
--- a/forms/DurationForm.vue
+++ b/forms/DurationForm.vue
@@ -8,6 +8,15 @@
         :placeholder="$t('duration-form.date-placeholder')"
         @blur="touchField('date')"
       />
+      <p class="duration-form__text">
+        <app-icon class="duration-form__text-icon" :name="ICON_NAMES.clock" />
+        {{
+          $t('duration-form.info', {
+            daysInYear: TIME_CONSTANTS.daysInYear,
+            daysInMonth: TIME_CONSTANTS.daysInMonth,
+          })
+        }}
+      </p>
     </div>
     <div class="duration-form__divider" />
     <div class="duration-form__output">
@@ -32,8 +41,12 @@ import { useFormValidation } from '@/composables'
 import { InputField } from '@/fields'
 import { computed, reactive, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
-import { duration } from 'dayjs'
-import { resetRawDate, updateRawDate } from '@/helpers'
+import {
+  getTotalDurationAsSeconds,
+  resetRawDate,
+  updateRawDate,
+} from '@/helpers'
+import { ICON_NAMES, TIME_CONSTANTS } from '@/enums'
 
 const { t } = i18n.global
 
@@ -45,6 +58,7 @@ const rawDate = reactive({
   hours: 0,
   days: 0,
   weeks: 0,
+  months: 0,
   years: 0,
 })
 
@@ -77,7 +91,7 @@ const pastedValue = computed(() =>
 )
 
 const secondsDuration = computed(() => {
-  return duration(dateObject.value).asSeconds()
+  return getTotalDurationAsSeconds(rawDate)
 })
 
 watch(
@@ -110,4 +124,17 @@ watch(
 .duration-form__output-item-value {
   @include text-ellipsis;
 }
+
+.duration-form__text {
+  font-size: toRem(14);
+  display: flex;
+  align-items: center;
+  gap: toRem(5);
+}
+
+.duration-form__text-icon {
+  width: toRem(16);
+  height: toRem(16);
+  color: var(--primary-main);
+}
 </style>
diff --git a/forms/VerifySignatureForm.vue b/forms/VerifySignatureForm.vue
new file mode 100644
index 0000000..53428c0
--- /dev/null
+++ b/forms/VerifySignatureForm.vue
@@ -0,0 +1,114 @@
+<template>
+  <form class="verify-signature-form" @submit.prevent="verifySignature">
+    <div class="verify-signature-form__input">
+      <h3>{{ $t('verify-signature-form.input-title') }}</h3>
+      <div class="verify-signature-form__input-fields">
+        <input-field
+          v-model="form.accountAddress"
+          :label="$t('verify-signature-form.account-address-label')"
+          :placeholder="$t('verify-signature-form.account-address-placeholder')"
+          :error-message="getFieldErrorMessage('accountAddress')"
+          @blur="touchField('accountAddress')"
+        />
+        <textarea-field
+          v-model="form.message"
+          :label="$t('verify-signature-form.message-label')"
+          :placeholder="$t('verify-signature-form.message-placeholder')"
+          :error-message="getFieldErrorMessage('message')"
+          @blur="touchField('message')"
+        />
+        <textarea-field
+          v-model="form.signature"
+          :label="$t('verify-signature-form.signature-label')"
+          :placeholder="$t('verify-signature-form.signature-placeholder')"
+          :error-message="getFieldErrorMessage('signature')"
+          @blur="touchField('signature')"
+        />
+        <div class="verify-signature-form__buttons">
+          <app-button
+            type="submit"
+            :text="$t('verify-signature-form.submit-btn')"
+          />
+          <app-button
+            scheme="flat"
+            :text="$t('verify-signature-form.reset-btn')"
+            @click="resetForm(form)"
+          />
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { useFormValidation } from '@/composables'
+import { InputField, TextareaField } from '@/fields'
+import { ErrorHandler, address, hexadecimal, required } from '@/helpers'
+import { verifyMessage, getAddress } from 'ethers'
+import { i18n } from '~/plugins/localization'
+import { reactive } from 'vue'
+
+const { showToast } = useNotifications()
+const { t } = i18n.global
+
+const form = reactive({
+  accountAddress: '',
+  signature: '',
+  message: '',
+})
+
+const { isFormValid, getFieldErrorMessage, touchField, resetForm } =
+  useFormValidation(form, {
+    accountAddress: { required, address },
+    signature: { required, hexadecimal },
+    message: { required },
+  })
+
+const verifySignature = async () => {
+  try {
+    if (!isFormValid()) return
+    const signerAddr = verifyMessage(form.message, form.signature)
+    if (signerAddr !== getAddress(form.accountAddress)) {
+      showToast('error', t('verify-signature-form.not-verified'))
+      return
+    }
+    showToast('success', t('verify-signature-form.verified'))
+  } catch (error) {
+    ErrorHandler.process(error)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.verify-signature-form {
+  @include solidity-tools-form;
+}
+
+.verify-signature-form__output,
+.verify-signature-form__input {
+  @include solidity-tools-form-part;
+}
+
+.verify-signature-form__divider {
+  @include solidity-tools-form-divider;
+}
+
+.verify-signature-form__input-fields {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(16);
+}
+
+.verify-signature-form__output-item-label {
+  @include field-label;
+}
+
+.verify-signature-form__output-item-value {
+  @include text-ellipsis;
+}
+
+.verify-signature-form__buttons {
+  display: flex;
+  gap: toRem(16);
+}
+</style>
diff --git a/forms/index.ts b/forms/index.ts
index f2515bd..49434e7 100644
--- a/forms/index.ts
+++ b/forms/index.ts
@@ -10,3 +10,4 @@ export { default as UnitConverterForm } from './UnitConverterForm.vue'
 export { default as NumberConverterForm } from './NumberConverterForm.vue'
 export { default as AsciiConverterForm } from './AsciiConverterForm.vue'
 export { default as ConstantsForm } from './ConstantsForm.vue'
+export { default as VerifySignatureForm } from './VerifySignatureForm.vue'
diff --git a/helpers/time.helpers.ts b/helpers/time.helpers.ts
index c41177c..066da6e 100644
--- a/helpers/time.helpers.ts
+++ b/helpers/time.helpers.ts
@@ -4,34 +4,47 @@ import { duration } from 'dayjs'
 type RawDateType = Record<keyof typeof DATE_IDS, number>
 
 export const normalizeTime = (rawDate: RawDateType) => {
+  const seconds = getTotalDurationAsSeconds(rawDate)
+
   let totalDuration = duration(0)
 
-  totalDuration = totalDuration
-    .add(rawDate.seconds, 'seconds')
-    .add(rawDate.minutes, 'minutes')
-    .add(rawDate.hours, 'hours')
-    .add(rawDate.days, 'days')
-    .add(rawDate.weeks, 'weeks')
-    .add(rawDate.years, 'years')
+  totalDuration = totalDuration.add(seconds, 'seconds')
 
   rawDate.seconds = totalDuration.seconds()
   rawDate.minutes = totalDuration.minutes()
   rawDate.hours = totalDuration.hours()
-  // HACK! DayJS doesn't handle this kind of parsing (weeks => years)
-  // with integer, so the solution is the expressions below
-  // https://day.js.org/docs/en/durations/weeks
-  rawDate.days =
-    (Math.floor(totalDuration.asDays()) -
-      Math.floor(totalDuration.asYears()) * TIME_CONSTANTS.daysInYear) %
-    TIME_CONSTANTS.daysInWeek
-  rawDate.weeks = Math.floor(
-    (Math.floor(totalDuration.asDays()) -
-      Math.floor(totalDuration.asYears()) * TIME_CONSTANTS.daysInYear) /
-      TIME_CONSTANTS.daysInWeek,
+  // Calculated because we have a year as 360 days (NOT 365)
+  // so DayJs can't handle it properly
+  let daysLeft = Math.floor(
+    totalDuration.asSeconds() /
+      (TIME_CONSTANTS.hoursInDay * TIME_CONSTANTS.secondsInHour),
   )
-  rawDate.years = totalDuration.years()
 
-  return rawDate
+  rawDate.years = Math.floor(daysLeft / TIME_CONSTANTS.daysInYear)
+  daysLeft %= TIME_CONSTANTS.daysInYear
+
+  rawDate.months = Math.floor(daysLeft / TIME_CONSTANTS.daysInMonth)
+  daysLeft %= TIME_CONSTANTS.daysInMonth
+
+  rawDate.weeks = Math.floor(daysLeft / TIME_CONSTANTS.daysInWeek)
+  daysLeft %= TIME_CONSTANTS.daysInWeek
+
+  rawDate.days = daysLeft
+}
+
+export const getTotalDurationAsSeconds = (rawDate: RawDateType) => {
+  let totalDuration = duration(0)
+
+  totalDuration = totalDuration
+    .add(rawDate.seconds, 'seconds')
+    .add(rawDate.minutes, 'minutes')
+    .add(rawDate.hours, 'hours')
+    .add(rawDate.days, 'days')
+    .add(rawDate.weeks * TIME_CONSTANTS.daysInWeek, 'days')
+    .add(rawDate.months * TIME_CONSTANTS.daysInMonth, 'days')
+    .add(rawDate.years * TIME_CONSTANTS.daysInYear, 'days')
+
+  return totalDuration.asSeconds()
 }
 
 export const resetRawDate = (rawDate: RawDateType) => {
@@ -62,6 +75,9 @@ export const updateRawDate = (dateString: string, rawDate: RawDateType) => {
       case DATE_IDS.days:
         rawDate.days += value
         break
+      case DATE_IDS.months:
+        rawDate.months += value
+        break
       case DATE_IDS.years:
         rawDate.years += value
         break
diff --git a/pages/constants.vue b/pages/constants.vue
index 4a6f080..11e4523 100644
--- a/pages/constants.vue
+++ b/pages/constants.vue
@@ -2,6 +2,7 @@
   <div class="constants">
     <h2>{{ $t('constants.main-title') }}</h2>
     <div>
+      <app-tabs :tabs="tabsList" />
       <div class="constants__content">
         <nuxt-page keepalive />
       </div>
@@ -12,11 +13,27 @@
 <script lang="ts" setup>
 import { definePageMeta } from '#imports'
 import { ROUTE_NAMES } from '@/enums'
+import { i18n } from '~/plugins/localization'
+import { type Tab } from '@/types'
+import { computed } from 'vue'
 
 definePageMeta({
   layout: 'solidity-tools',
   redirect: { name: ROUTE_NAMES.constantsBytes },
 })
+
+enum TABS_IDS {
+  constantsBytes = 'constants-bytes',
+}
+
+const { t } = i18n.global
+const tabsList = computed<Tab[]>(() => [
+  {
+    title: t('constants.constants-bytes-tab'),
+    id: TABS_IDS.constantsBytes,
+    route: { name: ROUTE_NAMES.constantsBytes },
+  },
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/ecrecover.vue b/pages/ecrecover.vue
new file mode 100644
index 0000000..2cc8b46
--- /dev/null
+++ b/pages/ecrecover.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="ecrecover">
+    <h2>{{ $t('ecrecover.main-title') }}</h2>
+    <div>
+      <app-tabs :tabs="tabsList" />
+      <div class="ecrecover__content">
+        <nuxt-page keepalive />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { definePageMeta } from '#imports'
+import { ROUTE_NAMES } from '@/enums'
+import { i18n } from '~/plugins/localization'
+import { type Tab } from '@/types'
+import { computed } from 'vue'
+
+definePageMeta({
+  layout: 'solidity-tools',
+  redirect: { name: ROUTE_NAMES.ecrecoverVerify },
+})
+
+enum TABS_IDS {
+  ecrecoverVerify = 'ecrecover-verify',
+}
+
+const { t } = i18n.global
+const tabsList = computed<Tab[]>(() => [
+  {
+    title: t('ecrecover.ecrecover-secp256k1-tab'),
+    id: TABS_IDS.ecrecoverVerify,
+    route: { name: ROUTE_NAMES.ecrecoverVerify },
+  },
+])
+</script>
+
+<style lang="scss" scoped>
+.ecrecover {
+  @include solidity-tools-page-base;
+}
+
+.ecrecover__content {
+  @include solidity-tools-page-content;
+}
+</style>
diff --git a/pages/ecrecover/verify.vue b/pages/ecrecover/verify.vue
new file mode 100644
index 0000000..f4c1987
--- /dev/null
+++ b/pages/ecrecover/verify.vue
@@ -0,0 +1,7 @@
+<template>
+  <verify-signature-form />
+</template>
+
+<script lang="ts" setup>
+import { VerifySignatureForm } from '@/forms'
+</script>
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index fa02d6d..d56949b 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -56,7 +56,8 @@
     "converter-title": "Converter",
     "unix-epoch-title": "Unix epoch",
     "address-utils-title": "Address utils",
-    "constants": "Constants"
+    "constants": "Constants",
+    "ecrecover": "Ecrecover"
   },
   "abi-page": {
     "main-title": "ABI Encoder/Decoder",
@@ -85,10 +86,11 @@
     "duration-form-tab": "Duration"
   },
   "duration-form": {
-    "pasted-value": "{years} year(s) {weeks} week(s) {days} day(s)\n {hours} hour(s) {minutes} minute(s)",
+    "info": "Please note that in the convertor 1 year = {daysInYear} days and 1 month = {daysInMonth} days",
+    "pasted-value": "{years} year(s) {months} month(s) {weeks} week(s) {days} day(s)\n {hours} hour(s) {minutes} minute(s)",
     "input-title": "Enter Duration",
     "date-label": "Duration in following format",
-    "date-placeholder": "Enter time (ex: 1y 3w 4h 5min 1300s)",
+    "date-placeholder": "Enter time (ex: 1y 2mon 3w 4h 5min 1300s)",
     "you-put-label": "Entered duration",
     "output-title": "Output",
     "milliseconds-label": "Entered duration (seconds)"
@@ -273,11 +275,29 @@
     "audits-card-3-file-size": "10.3 MB"
   },
   "constants": {
-    "main-title": "Constants"
+    "main-title": "Constants",
+    "constants-bytes-tab": "Bytes constants"
   },
   "constants-form": {
     "title": "Bytes",
     "zeroBytes32-label": "Zero bytes (32)",
     "randomBytes32-label": "Random bytes (32)"
+  },
+  "ecrecover": {
+    "main-title": "Ecrecover utils",
+    "ecrecover-secp256k1-tab": "Secp256k1 Recovery Tool"
+  },
+  "verify-signature-form": {
+    "input-title": "Verify signature",
+    "verified": "Message signature verified",
+    "not-verified": "The Message Signature Verification Failed!",
+    "account-address-label": "Address",
+    "account-address-placeholder": "Enter the signer address",
+    "message-label": "Message",
+    "message-placeholder": "Enter the original message",
+    "signature-label": "Hash",
+    "signature-placeholder": "Enter the hash of signed message",
+    "submit-btn": "Check signature",
+    "reset-btn": "Reset form"
   }
-}
+}
\ No newline at end of file

From 762f1cc8a51d01fbd6a5f653a0e733e2d7cacc18 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Fri, 13 Sep 2024 17:47:05 +0300
Subject: [PATCH 06/13] refactored duration form

---
 enums/time.enum.ts                     |   2 +-
 forms/AsciiConverterForm.vue           |  18 ++--
 forms/DurationForm.vue                 |  54 ++++++------
 helpers/text.helpers.ts                |   4 +-
 helpers/time.helpers.ts                | 112 +++++++++++--------------
 plugins/localization/resources/en.json |   4 +-
 6 files changed, 95 insertions(+), 99 deletions(-)

diff --git a/enums/time.enum.ts b/enums/time.enum.ts
index 47d2c16..e740014 100644
--- a/enums/time.enum.ts
+++ b/enums/time.enum.ts
@@ -1,4 +1,4 @@
-export enum DATE_IDS {
+export enum TIME_IDS {
   seconds = 's',
   minutes = 'min',
   hours = 'h',
diff --git a/forms/AsciiConverterForm.vue b/forms/AsciiConverterForm.vue
index 3081e53..5667682 100644
--- a/forms/AsciiConverterForm.vue
+++ b/forms/AsciiConverterForm.vue
@@ -3,9 +3,9 @@
     <div class="ascii-converter-form__input">
       <h3>{{ $t('ascii-converter-form.input-title') }}</h3>
       <textarea-field
-        v-for="(_, key) in form"
+        v-for="(value, key) in form"
         size="small"
-        :model-value="form[key]"
+        :model-value="value"
         :key="key"
         :label="$t(`ascii-converter-form.${key}-label`)"
         :placeholder="$t(`ascii-converter-form.${key}-placeholder`)"
@@ -30,7 +30,12 @@ import { isEmpty } from 'lodash-es'
 import { reactive } from 'vue'
 import { hexToASCII, asciiToHex } from '@/helpers'
 
-const form = reactive({
+type AsciiConverterFormType = {
+  hexadecimal: string
+  ascii: string
+}
+
+const form = reactive<AsciiConverterFormType>({
   hexadecimal: '',
   ascii: '',
 })
@@ -43,9 +48,12 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   },
 )
 
-const formatInputs = (value: string | number, key: keyof typeof form) => {
+const formatInputs = (
+  value: string | number,
+  key: keyof AsciiConverterFormType,
+) => {
   form[key] = String(value)
-  const formKeys = Object.keys(form) as (keyof typeof form)[]
+  const formKeys = Object.keys(form) as Array<keyof AsciiConverterFormType>
   const filteredKeys = formKeys.filter(_key => _key !== key)
   const formattedValue = String(value).trim()
 
diff --git a/forms/DurationForm.vue b/forms/DurationForm.vue
index ac5e6ad..cca9a70 100644
--- a/forms/DurationForm.vue
+++ b/forms/DurationForm.vue
@@ -3,10 +3,10 @@
     <div class="duration-form__input">
       <h3>{{ $t('duration-form.input-title') }}</h3>
       <input-field
-        v-model="form.date"
-        :label="$t('duration-form.date-label')"
-        :placeholder="$t('duration-form.date-placeholder')"
-        @blur="touchField('date')"
+        v-model="form.duration"
+        :label="$t('duration-form.duration-label')"
+        :placeholder="$t('duration-form.duration-placeholder')"
+        @blur="touchField('duration')"
       />
       <p class="duration-form__text">
         <app-icon class="duration-form__text-icon" :name="ICON_NAMES.clock" />
@@ -41,18 +41,14 @@ import { useFormValidation } from '@/composables'
 import { InputField } from '@/fields'
 import { computed, reactive, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
-import {
-  getTotalDurationAsSeconds,
-  resetRawDate,
-  updateRawDate,
-} from '@/helpers'
-import { ICON_NAMES, TIME_CONSTANTS } from '@/enums'
+import { getTotalDurationAsSeconds, getUpdatedDuration } from '@/helpers'
+import { ICON_NAMES, TIME_CONSTANTS, TIME_IDS } from '@/enums'
 
-const { t } = i18n.global
-
-const form = reactive({ date: '' })
+type RawDateType = {
+  [key in keyof typeof TIME_IDS]: number
+}
 
-const rawDate = reactive({
+const INITIAL_RAW_DURATION_STATE = {
   seconds: 0,
   minutes: 0,
   hours: 0,
@@ -60,7 +56,13 @@ const rawDate = reactive({
   weeks: 0,
   months: 0,
   years: 0,
-})
+}
+
+const { t } = i18n.global
+
+const form = reactive({ duration: '' })
+
+const rawDuration = reactive<RawDateType>({ ...INITIAL_RAW_DURATION_STATE })
 
 const { touchField } = useFormValidation(form, {})
 
@@ -75,30 +77,30 @@ const outputItems = computed(() => [
   },
 ])
 
-const dateObject = computed(() => {
-  const dateObject: Partial<Record<keyof typeof rawDate, number>> = {}
-  const dateKeys = Object.keys(rawDate) as (keyof typeof rawDate)[]
+const durationObject = computed(() => {
+  const durationObject: Partial<Record<keyof RawDateType, number>> = {}
+  const durationKeys = Object.keys(rawDuration) as (keyof RawDateType)[]
 
-  dateKeys.forEach(key => {
-    dateObject[key] = rawDate[key]
+  durationKeys.forEach(key => {
+    durationObject[key] = rawDuration[key]
   })
 
-  return dateObject
+  return durationObject
 })
 
 const pastedValue = computed(() =>
-  t('duration-form.pasted-value', dateObject.value),
+  t('duration-form.pasted-value', durationObject.value),
 )
 
 const secondsDuration = computed(() => {
-  return getTotalDurationAsSeconds(rawDate)
+  return getTotalDurationAsSeconds(rawDuration)
 })
 
 watch(
-  () => form.date,
+  () => form.duration,
   () => {
-    resetRawDate(rawDate)
-    updateRawDate(form.date, rawDate)
+    Object.assign(rawDuration, INITIAL_RAW_DURATION_STATE)
+    Object.assign(rawDuration, getUpdatedDuration(form.duration, rawDuration))
   },
 )
 </script>
diff --git a/helpers/text.helpers.ts b/helpers/text.helpers.ts
index e7ee0c2..952c5c3 100644
--- a/helpers/text.helpers.ts
+++ b/helpers/text.helpers.ts
@@ -4,9 +4,7 @@ export function capitalize(str: string) {
 }
 
 export function hexToASCII(hexString: string) {
-  const hex = (
-    hexString.startsWith('0x') ? hexString.slice(2) : hexString
-  ).replaceAll(' ', '')
+  const hex = hexString.replace('0x', '')
 
   let ascii = ''
   for (let i = 0; i < hex.length; i += 2) {
diff --git a/helpers/time.helpers.ts b/helpers/time.helpers.ts
index 066da6e..ea46159 100644
--- a/helpers/time.helpers.ts
+++ b/helpers/time.helpers.ts
@@ -1,18 +1,47 @@
-import { DATE_IDS, TIME_CONSTANTS } from '@/enums'
+import { TIME_IDS, TIME_CONSTANTS } from '@/enums'
 import { duration } from 'dayjs'
 
-type RawDateType = Record<keyof typeof DATE_IDS, number>
+type TimeKeysType = keyof typeof TIME_IDS
+type TimeType = Record<TimeKeysType, number>
 
-export const normalizeTime = (rawDate: RawDateType) => {
-  const seconds = getTotalDurationAsSeconds(rawDate)
+export const getUpdatedDuration = (
+  dateString: string,
+  rawDuration: TimeType,
+): TimeType => {
+  const updatedDuration = { ...rawDuration }
+  const dateUnits = Object.values(TIME_IDS).join('|')
+  const regex = new RegExp(`(\\d+)\\s*(${dateUnits})`, 'g')
+
+  const unitMap = Object.keys(updatedDuration).reduce((acc, key) => {
+    const typedKey = key as TimeKeysType
+    acc[TIME_IDS[typedKey]] = typedKey
+    return acc
+  }, {} as Record<TIME_IDS, TimeKeysType>)
+
+  let match
+  while ((match = regex.exec(dateString))) {
+    const value = parseInt(match[1])
+    const unit = match[2] as TIME_IDS
+
+    if (unitMap[unit]) {
+      updatedDuration[unitMap[unit]] += value
+    }
+  }
+
+  return getNormalizedTime(updatedDuration)
+}
+
+export const getNormalizedTime = (rawDuration: TimeType): TimeType => {
+  const normalizedTime = { ...rawDuration }
+  const seconds = getTotalDurationAsSeconds(rawDuration)
 
   let totalDuration = duration(0)
 
   totalDuration = totalDuration.add(seconds, 'seconds')
 
-  rawDate.seconds = totalDuration.seconds()
-  rawDate.minutes = totalDuration.minutes()
-  rawDate.hours = totalDuration.hours()
+  normalizedTime.seconds = totalDuration.seconds()
+  normalizedTime.minutes = totalDuration.minutes()
+  normalizedTime.hours = totalDuration.hours()
   // Calculated because we have a year as 360 days (NOT 365)
   // so DayJs can't handle it properly
   let daysLeft = Math.floor(
@@ -20,72 +49,31 @@ export const normalizeTime = (rawDate: RawDateType) => {
       (TIME_CONSTANTS.hoursInDay * TIME_CONSTANTS.secondsInHour),
   )
 
-  rawDate.years = Math.floor(daysLeft / TIME_CONSTANTS.daysInYear)
+  normalizedTime.years = Math.floor(daysLeft / TIME_CONSTANTS.daysInYear)
   daysLeft %= TIME_CONSTANTS.daysInYear
 
-  rawDate.months = Math.floor(daysLeft / TIME_CONSTANTS.daysInMonth)
+  normalizedTime.months = Math.floor(daysLeft / TIME_CONSTANTS.daysInMonth)
   daysLeft %= TIME_CONSTANTS.daysInMonth
 
-  rawDate.weeks = Math.floor(daysLeft / TIME_CONSTANTS.daysInWeek)
+  normalizedTime.weeks = Math.floor(daysLeft / TIME_CONSTANTS.daysInWeek)
   daysLeft %= TIME_CONSTANTS.daysInWeek
 
-  rawDate.days = daysLeft
+  normalizedTime.days = daysLeft
+
+  return normalizedTime
 }
 
-export const getTotalDurationAsSeconds = (rawDate: RawDateType) => {
+export const getTotalDurationAsSeconds = (rawDuration: TimeType) => {
   let totalDuration = duration(0)
 
   totalDuration = totalDuration
-    .add(rawDate.seconds, 'seconds')
-    .add(rawDate.minutes, 'minutes')
-    .add(rawDate.hours, 'hours')
-    .add(rawDate.days, 'days')
-    .add(rawDate.weeks * TIME_CONSTANTS.daysInWeek, 'days')
-    .add(rawDate.months * TIME_CONSTANTS.daysInMonth, 'days')
-    .add(rawDate.years * TIME_CONSTANTS.daysInYear, 'days')
+    .add(rawDuration.seconds, 'seconds')
+    .add(rawDuration.minutes, 'minutes')
+    .add(rawDuration.hours, 'hours')
+    .add(rawDuration.days, 'days')
+    .add(rawDuration.weeks * TIME_CONSTANTS.daysInWeek, 'days')
+    .add(rawDuration.months * TIME_CONSTANTS.daysInMonth, 'days')
+    .add(rawDuration.years * TIME_CONSTANTS.daysInYear, 'days')
 
   return totalDuration.asSeconds()
 }
-
-export const resetRawDate = (rawDate: RawDateType) => {
-  Object.keys(rawDate).forEach(
-    key => (rawDate[key as keyof typeof rawDate] = 0),
-  )
-}
-
-export const updateRawDate = (dateString: string, rawDate: RawDateType) => {
-  const dateUnits = Object.values(DATE_IDS).join('|')
-  const regex = new RegExp(`(\\d+)\\s*(${dateUnits})`, 'g')
-
-  let match
-  while ((match = regex.exec(dateString))) {
-    const value = parseInt(match[1])
-    const unit = match[2] as DATE_IDS
-
-    switch (unit) {
-      case DATE_IDS.seconds:
-        rawDate.seconds += value
-        break
-      case DATE_IDS.minutes:
-        rawDate.minutes += value
-        break
-      case DATE_IDS.hours:
-        rawDate.hours += value
-        break
-      case DATE_IDS.days:
-        rawDate.days += value
-        break
-      case DATE_IDS.months:
-        rawDate.months += value
-        break
-      case DATE_IDS.years:
-        rawDate.years += value
-        break
-      case DATE_IDS.weeks:
-        rawDate.weeks += value
-        break
-    }
-  }
-
-  normalizeTime(rawDate)
-}
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index d56949b..7aeea7a 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -89,8 +89,8 @@
     "info": "Please note that in the convertor 1 year = {daysInYear} days and 1 month = {daysInMonth} days",
     "pasted-value": "{years} year(s) {months} month(s) {weeks} week(s) {days} day(s)\n {hours} hour(s) {minutes} minute(s)",
     "input-title": "Enter Duration",
-    "date-label": "Duration in following format",
-    "date-placeholder": "Enter time (ex: 1y 2mon 3w 4h 5min 1300s)",
+    "duration-label": "Duration in following format",
+    "duration-placeholder": "Enter time (ex: 1y 2mon 3w 4h 5min 1300s)",
     "you-put-label": "Entered duration",
     "output-title": "Output",
     "milliseconds-label": "Entered duration (seconds)"

From d5ad414e719eb0eb164e9f62288324c30ae31d71 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Fri, 13 Sep 2024 18:03:29 +0300
Subject: [PATCH 07/13] refactored ecrecover form

---
 composables/use-form-validation.ts | 12 +-----------
 forms/VerifySignatureForm.vue      | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/composables/use-form-validation.ts b/composables/use-form-validation.ts
index a91273d..2d6aa1b 100644
--- a/composables/use-form-validation.ts
+++ b/composables/use-form-validation.ts
@@ -47,21 +47,11 @@ export const useFormValidation = (
     }
   }
 
-  const resetForm = <T extends Record<string, unknown>>(form: T) => {
-    const formKeys = Object.keys(form) as Array<keyof T>
-
-    formKeys.forEach(key => {
-      form[key] = '' as T[keyof T]
-      const field = get(validationController.value, key)
-      field.$reset()
-    })
-  }
-
   return {
     isFieldsValid,
     getFieldErrorMessage,
     touchField,
     isFormValid,
-    resetForm,
+    validationController,
   }
 }
diff --git a/forms/VerifySignatureForm.vue b/forms/VerifySignatureForm.vue
index 53428c0..e2aad71 100644
--- a/forms/VerifySignatureForm.vue
+++ b/forms/VerifySignatureForm.vue
@@ -32,7 +32,7 @@
           <app-button
             scheme="flat"
             :text="$t('verify-signature-form.reset-btn')"
-            @click="resetForm(form)"
+            @click="resetForm()"
           />
         </div>
       </div>
@@ -51,13 +51,23 @@ import { reactive } from 'vue'
 const { showToast } = useNotifications()
 const { t } = i18n.global
 
-const form = reactive({
+const INITIAL_FORM_STATE = {
+  accountAddress: '',
+  signature: '',
+  message: '',
+}
+
+type VerifySignatureFormType = {
+  [key in keyof typeof INITIAL_FORM_STATE]: ''
+}
+
+const form = reactive<VerifySignatureFormType>({
   accountAddress: '',
   signature: '',
   message: '',
 })
 
-const { isFormValid, getFieldErrorMessage, touchField, resetForm } =
+const { isFormValid, getFieldErrorMessage, touchField, validationController } =
   useFormValidation(form, {
     accountAddress: { required, address },
     signature: { required, hexadecimal },
@@ -77,6 +87,11 @@ const verifySignature = async () => {
     ErrorHandler.process(error)
   }
 }
+
+const resetForm = () => {
+  Object.assign(form, INITIAL_FORM_STATE)
+  validationController.value.$reset()
+}
 </script>
 
 <style lang="scss" scoped>

From 063e60391a0b120f23b55395b56d9b0a50cf6a79 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Mon, 16 Sep 2024 20:30:03 +0300
Subject: [PATCH 08/13] partially refactored pull request

---
 ...constant-icon.svg => square-root-icon.svg} |  0
 components/ToolsSidebar.vue                   |  2 +-
 constants/bytes.constant.ts                   |  2 +
 constants/index.ts                            |  1 +
 enums/constants.enum.ts                       |  3 -
 enums/icon-names.enum.ts                      |  2 +-
 enums/index.ts                                |  1 -
 forms/AsciiConverterForm.vue                  |  3 +-
 forms/ConstantsForm.vue                       | 31 +++------
 forms/DurationForm.vue                        | 29 ++------
 forms/NumberConverterForm.vue                 | 15 ++--
 forms/UnitConverterForm.vue                   | 15 ++--
 forms/VerifySignatureForm.vue                 | 12 +---
 helpers/time.helpers.ts                       | 68 +++++++++++++------
 types/time.types.ts                           |  4 ++
 15 files changed, 95 insertions(+), 93 deletions(-)
 rename assets/icons/{constant-icon.svg => square-root-icon.svg} (100%)
 create mode 100644 constants/bytes.constant.ts
 delete mode 100644 enums/constants.enum.ts
 create mode 100644 types/time.types.ts

diff --git a/assets/icons/constant-icon.svg b/assets/icons/square-root-icon.svg
similarity index 100%
rename from assets/icons/constant-icon.svg
rename to assets/icons/square-root-icon.svg
diff --git a/components/ToolsSidebar.vue b/components/ToolsSidebar.vue
index fb53b0d..b3dcc2a 100644
--- a/components/ToolsSidebar.vue
+++ b/components/ToolsSidebar.vue
@@ -72,7 +72,7 @@ const navLinks = computed(() => [
   },
   {
     title: t('tools-sidebar.constants'),
-    icon: ICON_NAMES.constant,
+    icon: ICON_NAMES.squareRoot,
     route: { name: ROUTE_NAMES.constants },
   },
   {
diff --git a/constants/bytes.constant.ts b/constants/bytes.constant.ts
new file mode 100644
index 0000000..1df87ad
--- /dev/null
+++ b/constants/bytes.constant.ts
@@ -0,0 +1,2 @@
+export const ZERO_BYTES_32 =
+  '0x0000000000000000000000000000000000000000000000000000000000000000'
diff --git a/constants/index.ts b/constants/index.ts
index 07aa784..b5bf401 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -1 +1,2 @@
 export * from './numbers.constant'
+export * from './bytes.constant'
diff --git a/enums/constants.enum.ts b/enums/constants.enum.ts
deleted file mode 100644
index 4f0a19a..0000000
--- a/enums/constants.enum.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum BYTES_CONSTANTS {
-  zeroBytes = '0x0000000000000000000000000000000000000000000000000000000000000000',
-}
diff --git a/enums/icon-names.enum.ts b/enums/icon-names.enum.ts
index 17fa516..492ad5c 100644
--- a/enums/icon-names.enum.ts
+++ b/enums/icon-names.enum.ts
@@ -21,5 +21,5 @@ export enum ICON_NAMES {
   refresh = 'refresh',
   xCircle = 'x-circle',
   x = 'x',
-  constant = 'constant',
+  squareRoot = 'square-root',
 }
diff --git a/enums/index.ts b/enums/index.ts
index 377fd20..632dba3 100644
--- a/enums/index.ts
+++ b/enums/index.ts
@@ -3,4 +3,3 @@ export * from './icon-names.enum'
 export * from './route-names.enum'
 export * from './window-breakpoints.enum'
 export * from './time.enum'
-export * from './constants.enum'
diff --git a/forms/AsciiConverterForm.vue b/forms/AsciiConverterForm.vue
index 5667682..04df68b 100644
--- a/forms/AsciiConverterForm.vue
+++ b/forms/AsciiConverterForm.vue
@@ -14,7 +14,7 @@
         @blur="touchField(key)"
       >
         <template #nodeLeft>
-          <app-copy :value="form[key] || 0" />
+          <app-copy :value="value || 0" />
         </template>
       </textarea-field>
     </div>
@@ -58,6 +58,7 @@ const formatInputs = (
   const formattedValue = String(value).trim()
 
   if (isEmpty(formattedValue) || !isFormValid()) {
+    // Reset all fields simultaneously
     for (key of filteredKeys) form[key] = ''
     return
   }
diff --git a/forms/ConstantsForm.vue b/forms/ConstantsForm.vue
index db2cdad..b1abcbc 100644
--- a/forms/ConstantsForm.vue
+++ b/forms/ConstantsForm.vue
@@ -2,13 +2,10 @@
   <form class="constants-form" @submit.prevent>
     <div class="constants-form__input">
       <h3>{{ $t('constants-form.title') }}</h3>
-      <template v-for="(_, key) in form" :key="key">
+      <template v-for="(value, key) in form" :key="key">
         <div v-if="key === 'randomBytes32'">
           <div class="constants-form__label-wrp">
-            <label
-              class="constants-form__label"
-              :for="randomBytes32InputFieldUid"
-            >
+            <label class="constants-form__label">
               {{ $t(`constants-form.${key}-label`) }}
             </label>
             <button
@@ -21,13 +18,9 @@
               />
             </button>
           </div>
-          <input-field
-            readonly
-            :model-value="form[key]"
-            :uid="randomBytes32InputFieldUid"
-          >
+          <input-field readonly :model-value="value">
             <template #nodeLeft>
-              <app-copy :value="form[key]" />
+              <app-copy :value="value" />
             </template>
           </input-field>
         </div>
@@ -35,10 +28,10 @@
           v-else
           readonly
           :label="$t(`constants-form.${key}-label`)"
-          :model-value="form[key]"
+          :model-value="value"
         >
           <template #nodeLeft>
-            <app-copy :value="form[key]" />
+            <app-copy :value="value" />
           </template>
         </input-field>
       </template>
@@ -49,22 +42,16 @@
 <script lang="ts" setup>
 import { AppCopy, AppIcon } from '#components'
 import { InputField } from '@/fields'
-import { v4 as uuidv4 } from 'uuid'
-import { onMounted, reactive } from 'vue'
+import { reactive } from 'vue'
 import { randomBytes, hexlify } from 'ethers'
-import { BYTES_CONSTANTS } from '@/enums'
+import { ZERO_BYTES_32 } from '@/constants'
 
-const randomBytes32InputFieldUid = `input-field--${uuidv4()}`
 const generateRandomBytes = (): string => hexlify(randomBytes(32))
 
 const form = reactive({
-  zeroBytes32: BYTES_CONSTANTS.zeroBytes,
+  zeroBytes32: ZERO_BYTES_32,
   randomBytes32: generateRandomBytes(),
 })
-
-onMounted(() => {
-  form.randomBytes32 = generateRandomBytes()
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/forms/DurationForm.vue b/forms/DurationForm.vue
index cca9a70..9bb3e21 100644
--- a/forms/DurationForm.vue
+++ b/forms/DurationForm.vue
@@ -42,13 +42,10 @@ import { InputField } from '@/fields'
 import { computed, reactive, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
 import { getTotalDurationAsSeconds, getUpdatedDuration } from '@/helpers'
-import { ICON_NAMES, TIME_CONSTANTS, TIME_IDS } from '@/enums'
+import { ICON_NAMES, TIME_CONSTANTS } from '@/enums'
+import { TimeType } from 'types/time.types'
 
-type RawDateType = {
-  [key in keyof typeof TIME_IDS]: number
-}
-
-const INITIAL_RAW_DURATION_STATE = {
+const INITIAL_RAW_DURATION_STATE: TimeType = {
   seconds: 0,
   minutes: 0,
   hours: 0,
@@ -62,7 +59,7 @@ const { t } = i18n.global
 
 const form = reactive({ duration: '' })
 
-const rawDuration = reactive<RawDateType>({ ...INITIAL_RAW_DURATION_STATE })
+const rawDuration = reactive<TimeType>({ ...INITIAL_RAW_DURATION_STATE })
 
 const { touchField } = useFormValidation(form, {})
 
@@ -77,20 +74,7 @@ const outputItems = computed(() => [
   },
 ])
 
-const durationObject = computed(() => {
-  const durationObject: Partial<Record<keyof RawDateType, number>> = {}
-  const durationKeys = Object.keys(rawDuration) as (keyof RawDateType)[]
-
-  durationKeys.forEach(key => {
-    durationObject[key] = rawDuration[key]
-  })
-
-  return durationObject
-})
-
-const pastedValue = computed(() =>
-  t('duration-form.pasted-value', durationObject.value),
-)
+const pastedValue = computed(() => t('duration-form.pasted-value', rawDuration))
 
 const secondsDuration = computed(() => {
   return getTotalDurationAsSeconds(rawDuration)
@@ -99,8 +83,7 @@ const secondsDuration = computed(() => {
 watch(
   () => form.duration,
   () => {
-    Object.assign(rawDuration, INITIAL_RAW_DURATION_STATE)
-    Object.assign(rawDuration, getUpdatedDuration(form.duration, rawDuration))
+    Object.assign(rawDuration, getUpdatedDuration(form.duration))
   },
 )
 </script>
diff --git a/forms/NumberConverterForm.vue b/forms/NumberConverterForm.vue
index 813d795..a210c47 100644
--- a/forms/NumberConverterForm.vue
+++ b/forms/NumberConverterForm.vue
@@ -3,9 +3,9 @@
     <div class="number-converter-form__input">
       <h3>{{ $t('number-converter-form.input-title') }}</h3>
       <textarea-field
-        v-for="(_, key) in form"
+        v-for="(value, key) in form"
         size="small"
-        :model-value="form[key]"
+        :model-value="value"
         :key="key"
         :label="$t(`number-converter-form.${key}-label`)"
         :placeholder="$t(`number-converter-form.${key}-placeholder`)"
@@ -14,7 +14,7 @@
         @blur="touchField(key)"
       >
         <template #nodeLeft>
-          <app-copy :value="form[key] || 0" />
+          <app-copy :value="value || 0" />
         </template>
       </textarea-field>
     </div>
@@ -31,6 +31,8 @@ import { BigNumber } from 'bignumber.js'
 import { isEmpty } from 'lodash-es'
 import { reactive } from 'vue'
 
+type NumberConverterFormKeysType = keyof typeof form
+
 const form = reactive({
   binary: '',
   octal: '',
@@ -48,10 +50,13 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   },
 )
 
-const formatInputs = (value: string | number, key: keyof typeof form) => {
+const formatInputs = (
+  value: string | number,
+  key: NumberConverterFormKeysType,
+) => {
   form[key] = String(value)
 
-  const formKeys = Object.keys(form) as (keyof typeof form)[]
+  const formKeys = Object.keys(form) as NumberConverterFormKeysType[]
   const filteredKeys = formKeys.filter(_key => _key !== key)
   const formattedValue = String(value).trim()
 
diff --git a/forms/UnitConverterForm.vue b/forms/UnitConverterForm.vue
index 890507d..44eebcc 100644
--- a/forms/UnitConverterForm.vue
+++ b/forms/UnitConverterForm.vue
@@ -3,9 +3,9 @@
     <div class="unit-converter-form__input">
       <h3>{{ $t('unit-converter-form.input-title') }}</h3>
       <textarea-field
-        v-for="(_, key) in form"
+        v-for="(value, key) in form"
         size="small"
-        :model-value="form[key]"
+        :model-value="value"
         :key="key"
         :label="UNITS[key].title"
         :placeholder="UNITS[key].title"
@@ -14,7 +14,7 @@
         @update:model-value="formatInputs($event, key)"
       >
         <template #nodeLeft>
-          <app-copy :value="form[key] || 0" />
+          <app-copy :value="value || 0" />
         </template>
       </textarea-field>
     </div>
@@ -30,6 +30,8 @@ import { fromUnits, numeric, toUnits } from '@/helpers'
 import { isEmpty, mapValues } from 'lodash-es'
 import { reactive } from 'vue'
 
+type UnitConverterFormKeysType = keyof typeof form
+
 const form = reactive({
   wei: '',
   kwei: '',
@@ -49,10 +51,13 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   mapValues(form, () => ({ numeric })),
 )
 
-const formatInputs = (value: string | number, key: keyof typeof form) => {
+const formatInputs = (
+  value: string | number,
+  key: UnitConverterFormKeysType,
+) => {
   form[key] = String(value)
 
-  const formKeys = Object.keys(form) as (keyof typeof form)[]
+  const formKeys = Object.keys(form) as UnitConverterFormKeysType[]
   const filteredKeys = formKeys.filter(_key => _key !== key)
   const formattedValue = String(value).trim()
 
diff --git a/forms/VerifySignatureForm.vue b/forms/VerifySignatureForm.vue
index e2aad71..459dc6b 100644
--- a/forms/VerifySignatureForm.vue
+++ b/forms/VerifySignatureForm.vue
@@ -32,7 +32,7 @@
           <app-button
             scheme="flat"
             :text="$t('verify-signature-form.reset-btn')"
-            @click="resetForm()"
+            @click="resetForm"
           />
         </div>
       </div>
@@ -57,15 +57,7 @@ const INITIAL_FORM_STATE = {
   message: '',
 }
 
-type VerifySignatureFormType = {
-  [key in keyof typeof INITIAL_FORM_STATE]: ''
-}
-
-const form = reactive<VerifySignatureFormType>({
-  accountAddress: '',
-  signature: '',
-  message: '',
-})
+const form = reactive({ ...INITIAL_FORM_STATE })
 
 const { isFormValid, getFieldErrorMessage, touchField, validationController } =
   useFormValidation(form, {
diff --git a/helpers/time.helpers.ts b/helpers/time.helpers.ts
index ea46159..4c0bd11 100644
--- a/helpers/time.helpers.ts
+++ b/helpers/time.helpers.ts
@@ -1,30 +1,56 @@
 import { TIME_IDS, TIME_CONSTANTS } from '@/enums'
 import { duration } from 'dayjs'
-
-type TimeKeysType = keyof typeof TIME_IDS
-type TimeType = Record<TimeKeysType, number>
-
-export const getUpdatedDuration = (
-  dateString: string,
-  rawDuration: TimeType,
-): TimeType => {
-  const updatedDuration = { ...rawDuration }
+import { TimeType } from 'types/time.types'
+
+export const getUpdatedDuration = (dateString: string): TimeType => {
+  const updatedDuration: TimeType = {
+    seconds: 0,
+    minutes: 0,
+    hours: 0,
+    days: 0,
+    weeks: 0,
+    months: 0,
+    years: 0,
+  }
   const dateUnits = Object.values(TIME_IDS).join('|')
-  const regex = new RegExp(`(\\d+)\\s*(${dateUnits})`, 'g')
-
-  const unitMap = Object.keys(updatedDuration).reduce((acc, key) => {
-    const typedKey = key as TimeKeysType
-    acc[TIME_IDS[typedKey]] = typedKey
-    return acc
-  }, {} as Record<TIME_IDS, TimeKeysType>)
+  const regex = new RegExp(`(?<value>\\d+)\\s*(?<key>${dateUnits})`, 'g')
 
   let match
   while ((match = regex.exec(dateString))) {
-    const value = parseInt(match[1])
-    const unit = match[2] as TIME_IDS
-
-    if (unitMap[unit]) {
-      updatedDuration[unitMap[unit]] += value
+    const groups = match.groups as {
+      key: TIME_IDS
+      value: string
+    }
+    const value = Number(groups.value)
+    const key = groups.key
+
+    // TODO:  Discuss solutions such as:
+    // 1: switch/case
+    // 2. timeKeyMap
+    // 3. Full timeIds such as 'days', 'year' and so on...
+    // 4. Any another approach?
+    switch (key) {
+      case TIME_IDS.seconds:
+        updatedDuration.seconds += value
+        break
+      case TIME_IDS.minutes:
+        updatedDuration.minutes += value
+        break
+      case TIME_IDS.hours:
+        updatedDuration.hours += value
+        break
+      case TIME_IDS.days:
+        updatedDuration.days += value
+        break
+      case TIME_IDS.weeks:
+        updatedDuration.weeks += value
+        break
+      case TIME_IDS.months:
+        updatedDuration.months += value
+        break
+      case TIME_IDS.years:
+        updatedDuration.years += value
+        break
     }
   }
 
diff --git a/types/time.types.ts b/types/time.types.ts
new file mode 100644
index 0000000..9d09061
--- /dev/null
+++ b/types/time.types.ts
@@ -0,0 +1,4 @@
+import { TIME_IDS } from 'enums'
+
+export type TimeKeysType = keyof typeof TIME_IDS
+export type TimeType = Record<TimeKeysType, number>

From cc1c79a2ae76e158e387f906f47f17065936a2c8 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Tue, 17 Sep 2024 20:39:47 +0300
Subject: [PATCH 09/13] refactored PR

---
 forms/AsciiConverterForm.vue           | 14 ++---
 forms/CommonAddressesForm.vue          | 27 +++------
 forms/DurationForm.vue                 | 10 ++--
 forms/NumberConverterForm.vue          |  9 +--
 forms/UnitConverterForm.vue            |  9 +--
 helpers/time.helpers.ts                | 81 ++++++++------------------
 pages/abi.vue                          | 10 ++--
 pages/address-utils.vue                | 12 ++--
 pages/constants.vue                    |  8 +--
 pages/converter.vue                    | 12 ++--
 pages/ecrecover.vue                    |  8 +--
 pages/hash-function.vue                | 23 ++++----
 pages/unix-epoch.vue                   | 12 ++--
 plugins/localization/resources/en.json |  5 +-
 types/time.types.ts                    |  4 +-
 15 files changed, 97 insertions(+), 147 deletions(-)

diff --git a/forms/AsciiConverterForm.vue b/forms/AsciiConverterForm.vue
index 04df68b..0782453 100644
--- a/forms/AsciiConverterForm.vue
+++ b/forms/AsciiConverterForm.vue
@@ -30,12 +30,14 @@ import { isEmpty } from 'lodash-es'
 import { reactive } from 'vue'
 import { hexToASCII, asciiToHex } from '@/helpers'
 
-type AsciiConverterFormType = {
+type AsciiConverterForm = {
   hexadecimal: string
   ascii: string
 }
 
-const form = reactive<AsciiConverterFormType>({
+type AsciiConverterFormKeys = keyof AsciiConverterForm
+
+const form = reactive<AsciiConverterForm>({
   hexadecimal: '',
   ascii: '',
 })
@@ -48,17 +50,13 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   },
 )
 
-const formatInputs = (
-  value: string | number,
-  key: keyof AsciiConverterFormType,
-) => {
+const formatInputs = (value: string | number, key: AsciiConverterFormKeys) => {
   form[key] = String(value)
-  const formKeys = Object.keys(form) as Array<keyof AsciiConverterFormType>
+  const formKeys = Object.keys(form) as Array<AsciiConverterFormKeys>
   const filteredKeys = formKeys.filter(_key => _key !== key)
   const formattedValue = String(value).trim()
 
   if (isEmpty(formattedValue) || !isFormValid()) {
-    // Reset all fields simultaneously
     for (key of filteredKeys) form[key] = ''
     return
   }
diff --git a/forms/CommonAddressesForm.vue b/forms/CommonAddressesForm.vue
index 57a3cbc..cd071c4 100644
--- a/forms/CommonAddressesForm.vue
+++ b/forms/CommonAddressesForm.vue
@@ -2,13 +2,10 @@
   <form class="common-addresses-form" @submit.prevent>
     <div class="common-addresses-form__input">
       <h3>{{ $t('common-addresses-form.input-title') }}</h3>
-      <template v-for="(_, key) in form" :key="key">
+      <template v-for="(value, key) in form" :key="key">
         <div v-if="key === 'randomAddress'">
           <div class="common-addresses-form__label-wrp">
-            <label
-              class="common-addresses-form__label"
-              :for="randomAddressInputFieldUid"
-            >
+            <label class="common-addresses-form__label">
               {{ $t(`common-addresses-form.${key}-label`) }}
             </label>
             <button
@@ -21,13 +18,9 @@
               />
             </button>
           </div>
-          <input-field
-            readonly
-            :model-value="form[key]"
-            :uid="randomAddressInputFieldUid"
-          >
+          <input-field readonly :model-value="value">
             <template #nodeLeft>
-              <app-copy :value="form[key]" />
+              <app-copy :value="value" />
             </template>
           </input-field>
         </div>
@@ -35,10 +28,10 @@
           v-else
           readonly
           :label="$t(`common-addresses-form.${key}-label`)"
-          :model-value="form[key]"
+          :model-value="value"
         >
           <template #nodeLeft>
-            <app-copy :value="form[key]" />
+            <app-copy :value="value" />
           </template>
         </input-field>
       </template>
@@ -50,10 +43,8 @@
 import { AppCopy, AppIcon } from '#components'
 import { InputField } from '@/fields'
 import { Wallet } from 'ethers'
-import { v4 as uuidv4 } from 'uuid'
-import { onMounted, reactive } from 'vue'
+import { reactive } from 'vue'
 
-const randomAddressInputFieldUid = `input-field--${uuidv4()}`
 const generateRandomAddress = (): string => Wallet.createRandom().address
 
 const form = reactive({
@@ -62,10 +53,6 @@ const form = reactive({
   allEsAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
   randomAddress: generateRandomAddress(),
 })
-
-onMounted(() => {
-  form.randomAddress = generateRandomAddress()
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/forms/DurationForm.vue b/forms/DurationForm.vue
index 9bb3e21..5abaca2 100644
--- a/forms/DurationForm.vue
+++ b/forms/DurationForm.vue
@@ -41,11 +41,11 @@ import { useFormValidation } from '@/composables'
 import { InputField } from '@/fields'
 import { computed, reactive, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
-import { getTotalDurationAsSeconds, getUpdatedDuration } from '@/helpers'
+import { getTotalDurationAsSeconds, getTransformedTime } from '@/helpers'
 import { ICON_NAMES, TIME_CONSTANTS } from '@/enums'
-import { TimeType } from 'types/time.types'
+import { Time } from 'types/time.types'
 
-const INITIAL_RAW_DURATION_STATE: TimeType = {
+const INITIAL_RAW_DURATION_STATE: Time = {
   seconds: 0,
   minutes: 0,
   hours: 0,
@@ -59,7 +59,7 @@ const { t } = i18n.global
 
 const form = reactive({ duration: '' })
 
-const rawDuration = reactive<TimeType>({ ...INITIAL_RAW_DURATION_STATE })
+const rawDuration = reactive<Time>({ ...INITIAL_RAW_DURATION_STATE })
 
 const { touchField } = useFormValidation(form, {})
 
@@ -83,7 +83,7 @@ const secondsDuration = computed(() => {
 watch(
   () => form.duration,
   () => {
-    Object.assign(rawDuration, getUpdatedDuration(form.duration))
+    Object.assign(rawDuration, getTransformedTime(form.duration))
   },
 )
 </script>
diff --git a/forms/NumberConverterForm.vue b/forms/NumberConverterForm.vue
index a210c47..801e1e3 100644
--- a/forms/NumberConverterForm.vue
+++ b/forms/NumberConverterForm.vue
@@ -31,7 +31,7 @@ import { BigNumber } from 'bignumber.js'
 import { isEmpty } from 'lodash-es'
 import { reactive } from 'vue'
 
-type NumberConverterFormKeysType = keyof typeof form
+type NumberConverterFormKeys = keyof typeof form
 
 const form = reactive({
   binary: '',
@@ -50,13 +50,10 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   },
 )
 
-const formatInputs = (
-  value: string | number,
-  key: NumberConverterFormKeysType,
-) => {
+const formatInputs = (value: string | number, key: NumberConverterFormKeys) => {
   form[key] = String(value)
 
-  const formKeys = Object.keys(form) as NumberConverterFormKeysType[]
+  const formKeys = Object.keys(form) as NumberConverterFormKeys[]
   const filteredKeys = formKeys.filter(_key => _key !== key)
   const formattedValue = String(value).trim()
 
diff --git a/forms/UnitConverterForm.vue b/forms/UnitConverterForm.vue
index 44eebcc..26acca6 100644
--- a/forms/UnitConverterForm.vue
+++ b/forms/UnitConverterForm.vue
@@ -30,7 +30,7 @@ import { fromUnits, numeric, toUnits } from '@/helpers'
 import { isEmpty, mapValues } from 'lodash-es'
 import { reactive } from 'vue'
 
-type UnitConverterFormKeysType = keyof typeof form
+type UnitConverterFormKeys = keyof typeof form
 
 const form = reactive({
   wei: '',
@@ -51,13 +51,10 @@ const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
   mapValues(form, () => ({ numeric })),
 )
 
-const formatInputs = (
-  value: string | number,
-  key: UnitConverterFormKeysType,
-) => {
+const formatInputs = (value: string | number, key: UnitConverterFormKeys) => {
   form[key] = String(value)
 
-  const formKeys = Object.keys(form) as UnitConverterFormKeysType[]
+  const formKeys = Object.keys(form) as UnitConverterFormKeys[]
   const filteredKeys = formKeys.filter(_key => _key !== key)
   const formattedValue = String(value).trim()
 
diff --git a/helpers/time.helpers.ts b/helpers/time.helpers.ts
index 4c0bd11..2bb25c2 100644
--- a/helpers/time.helpers.ts
+++ b/helpers/time.helpers.ts
@@ -1,66 +1,31 @@
 import { TIME_IDS, TIME_CONSTANTS } from '@/enums'
 import { duration } from 'dayjs'
-import { TimeType } from 'types/time.types'
-
-export const getUpdatedDuration = (dateString: string): TimeType => {
-  const updatedDuration: TimeType = {
-    seconds: 0,
-    minutes: 0,
-    hours: 0,
-    days: 0,
-    weeks: 0,
-    months: 0,
-    years: 0,
-  }
-  const dateUnits = Object.values(TIME_IDS).join('|')
-  const regex = new RegExp(`(?<value>\\d+)\\s*(?<key>${dateUnits})`, 'g')
-
-  let match
-  while ((match = regex.exec(dateString))) {
-    const groups = match.groups as {
-      key: TIME_IDS
-      value: string
-    }
-    const value = Number(groups.value)
-    const key = groups.key
-
-    // TODO:  Discuss solutions such as:
-    // 1: switch/case
-    // 2. timeKeyMap
-    // 3. Full timeIds such as 'days', 'year' and so on...
-    // 4. Any another approach?
-    switch (key) {
-      case TIME_IDS.seconds:
-        updatedDuration.seconds += value
-        break
-      case TIME_IDS.minutes:
-        updatedDuration.minutes += value
-        break
-      case TIME_IDS.hours:
-        updatedDuration.hours += value
-        break
-      case TIME_IDS.days:
-        updatedDuration.days += value
-        break
-      case TIME_IDS.weeks:
-        updatedDuration.weeks += value
-        break
-      case TIME_IDS.months:
-        updatedDuration.months += value
-        break
-      case TIME_IDS.years:
-        updatedDuration.years += value
-        break
-    }
-  }
-
-  return getNormalizedTime(updatedDuration)
+import { Time, TimeKeys } from 'types/time.types'
+
+export const getTransformedTime = (dateString: string) => {
+  const dateUnits = Object.entries(TIME_IDS)
+
+  const duration = dateUnits.reduce((accumulator, [timeKey, timeId]) => {
+    const regex = new RegExp(`(?<value>\\d+\\.?\\d*)\\s*(${timeId})`, 'g')
+    const matches = dateString.matchAll(regex)
+    const parsedValue = [...matches].reduce((_accumulator, _prevValue) => {
+      if (_prevValue.groups) {
+        const { value } = _prevValue.groups
+        _accumulator += Number(value)
+      }
+      return _accumulator
+    }, 0)
+
+    accumulator[timeKey as TimeKeys] = parsedValue
+    return accumulator
+  }, {} as Time)
+
+  return getNormalizedTime(duration)
 }
 
-export const getNormalizedTime = (rawDuration: TimeType): TimeType => {
+export const getNormalizedTime = (rawDuration: Time): Time => {
   const normalizedTime = { ...rawDuration }
   const seconds = getTotalDurationAsSeconds(rawDuration)
-
   let totalDuration = duration(0)
 
   totalDuration = totalDuration.add(seconds, 'seconds')
@@ -89,7 +54,7 @@ export const getNormalizedTime = (rawDuration: TimeType): TimeType => {
   return normalizedTime
 }
 
-export const getTotalDurationAsSeconds = (rawDuration: TimeType) => {
+export const getTotalDurationAsSeconds = (rawDuration: Time) => {
   let totalDuration = duration(0)
 
   totalDuration = totalDuration
diff --git a/pages/abi.vue b/pages/abi.vue
index 5c7b1f4..dd137b7 100644
--- a/pages/abi.vue
+++ b/pages/abi.vue
@@ -2,7 +2,7 @@
   <div class="abi-page">
     <h2>{{ $t('abi-page.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="tabsList" />
+      <app-tabs :tabs="tabItems" />
       <div class="abi-page__content">
         <nuxt-page keepalive />
       </div>
@@ -23,21 +23,21 @@ definePageMeta({
   redirect: { name: ROUTE_NAMES.abiEncoderId },
 })
 
-enum TABS_IDS {
+enum TAB_IDS {
   encoder = 'encoder',
   decoder = 'decoder',
 }
 
 const { t } = i18n.global
-const tabsList = computed<Tab[]>(() => [
+const tabItems = computed<Tab[]>(() => [
   {
     title: t('abi-page.encoder-tab'),
-    id: TABS_IDS.encoder,
+    id: TAB_IDS.encoder,
     route: { name: ROUTE_NAMES.abiEncoderId },
   },
   {
     title: t('abi-page.decoder-tab'),
-    id: TABS_IDS.decoder,
+    id: TAB_IDS.decoder,
     route: { name: ROUTE_NAMES.abiDecoderId },
   },
 ])
diff --git a/pages/address-utils.vue b/pages/address-utils.vue
index c00bb4f..364f771 100644
--- a/pages/address-utils.vue
+++ b/pages/address-utils.vue
@@ -2,7 +2,7 @@
   <div class="address-utils-page">
     <h2>{{ $t('address-utils-page.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="tabsList" />
+      <app-tabs :tabs="tabItems" />
       <div class="address-utils-page__content">
         <nuxt-page keepalive />
       </div>
@@ -23,27 +23,27 @@ definePageMeta({
   redirect: { name: ROUTE_NAMES.addressUtilsCommonAddresses },
 })
 
-enum TABS_IDS {
+enum TAB_IDS {
   commonAddressesForm = 'common-addresses-form',
   createAddressForm = 'create-address-form',
   create2AddressForm = 'create2-address-form',
 }
 
 const { t } = i18n.global
-const tabsList = computed<Tab[]>(() => [
+const tabItems = computed<Tab[]>(() => [
   {
     title: t('address-utils-page.common-addresses-form-tab'),
-    id: TABS_IDS.commonAddressesForm,
+    id: TAB_IDS.commonAddressesForm,
     route: { name: ROUTE_NAMES.addressUtilsCommonAddresses },
   },
   {
     title: t('address-utils-page.create-address-form-tab'),
-    id: TABS_IDS.createAddressForm,
+    id: TAB_IDS.createAddressForm,
     route: { name: ROUTE_NAMES.addressUtilsCreate },
   },
   {
     title: t('address-utils-page.create2-address-form-tab'),
-    id: TABS_IDS.create2AddressForm,
+    id: TAB_IDS.create2AddressForm,
     route: { name: ROUTE_NAMES.addressUtilsCreate2 },
   },
 ])
diff --git a/pages/constants.vue b/pages/constants.vue
index 11e4523..28bda40 100644
--- a/pages/constants.vue
+++ b/pages/constants.vue
@@ -2,7 +2,7 @@
   <div class="constants">
     <h2>{{ $t('constants.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="tabsList" />
+      <app-tabs :tabs="tabItems" />
       <div class="constants__content">
         <nuxt-page keepalive />
       </div>
@@ -22,15 +22,15 @@ definePageMeta({
   redirect: { name: ROUTE_NAMES.constantsBytes },
 })
 
-enum TABS_IDS {
+enum TAB_IDS {
   constantsBytes = 'constants-bytes',
 }
 
 const { t } = i18n.global
-const tabsList = computed<Tab[]>(() => [
+const tabItems = computed<Tab[]>(() => [
   {
     title: t('constants.constants-bytes-tab'),
-    id: TABS_IDS.constantsBytes,
+    id: TAB_IDS.constantsBytes,
     route: { name: ROUTE_NAMES.constantsBytes },
   },
 ])
diff --git a/pages/converter.vue b/pages/converter.vue
index f3d3698..2730deb 100644
--- a/pages/converter.vue
+++ b/pages/converter.vue
@@ -2,7 +2,7 @@
   <div class="converter-page">
     <h2>{{ $t('converter-page.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="tabsList" />
+      <app-tabs :tabs="tabItems" />
       <div class="converter-page__content">
         <nuxt-page keepalive />
       </div>
@@ -23,27 +23,27 @@ definePageMeta({
   redirect: { name: ROUTE_NAMES.converterUnit },
 })
 
-enum TABS_IDS {
+enum TAB_IDS {
   unitConverterForm = 'unit-converter-form',
   numberConverterForm = 'number-converter-form',
   asciiConverterForm = 'ascii-converter-form',
 }
 
 const { t } = i18n.global
-const tabsList = computed<Tab[]>(() => [
+const tabItems = computed<Tab[]>(() => [
   {
     title: t('converter-page.unit-converter-form-tab'),
-    id: TABS_IDS.unitConverterForm,
+    id: TAB_IDS.unitConverterForm,
     route: { name: ROUTE_NAMES.converterUnit },
   },
   {
     title: t('converter-page.number-converter-form-tab'),
-    id: TABS_IDS.numberConverterForm,
+    id: TAB_IDS.numberConverterForm,
     route: { name: ROUTE_NAMES.converterNumber },
   },
   {
     title: t('converter-page.ascii-converter-form-tab'),
-    id: TABS_IDS.asciiConverterForm,
+    id: TAB_IDS.asciiConverterForm,
     route: { name: ROUTE_NAMES.converterAscii },
   },
 ])
diff --git a/pages/ecrecover.vue b/pages/ecrecover.vue
index 2cc8b46..ba9bd07 100644
--- a/pages/ecrecover.vue
+++ b/pages/ecrecover.vue
@@ -2,7 +2,7 @@
   <div class="ecrecover">
     <h2>{{ $t('ecrecover.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="tabsList" />
+      <app-tabs :tabs="tabItems" />
       <div class="ecrecover__content">
         <nuxt-page keepalive />
       </div>
@@ -22,15 +22,15 @@ definePageMeta({
   redirect: { name: ROUTE_NAMES.ecrecoverVerify },
 })
 
-enum TABS_IDS {
+enum TAB_IDS {
   ecrecoverVerify = 'ecrecover-verify',
 }
 
 const { t } = i18n.global
-const tabsList = computed<Tab[]>(() => [
+const tabItems = computed<Tab[]>(() => [
   {
     title: t('ecrecover.ecrecover-secp256k1-tab'),
-    id: TABS_IDS.ecrecoverVerify,
+    id: TAB_IDS.ecrecoverVerify,
     route: { name: ROUTE_NAMES.ecrecoverVerify },
   },
 ])
diff --git a/pages/hash-function.vue b/pages/hash-function.vue
index 2b4b86f..2bda954 100644
--- a/pages/hash-function.vue
+++ b/pages/hash-function.vue
@@ -2,7 +2,7 @@
   <div class="hash-functions-page">
     <h2>{{ $t('hash-functions-page.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="TABS_LIST" />
+      <app-tabs :tabs="tabItems" />
       <div class="hash-functions-page__content">
         <nuxt-page keepalive />
       </div>
@@ -14,36 +14,39 @@
 import { AppTabs } from '#components'
 import { definePageMeta } from '#imports'
 import { ROUTE_NAMES } from '@/enums'
+import { computed } from 'vue'
 import { type Tab } from '@/types'
+import { i18n } from '~/plugins/localization'
 
 definePageMeta({
   layout: 'solidity-tools',
   redirect: { name: ROUTE_NAMES.hashFunctionKeccak256Id },
 })
 
-enum TABS_IDS {
+enum TAB_IDS {
   keccak256 = 'keccak256',
   sha256 = 'sha256',
   ripemd160 = 'ripemd160',
 }
 
-const TABS_LIST: Tab[] = [
+const { t } = i18n.global
+const tabItems = computed<Tab[]>(() => [
   {
-    title: 'Keccak256',
-    id: TABS_IDS.keccak256,
+    title: t('hash-functions-page.keccak256'),
+    id: TAB_IDS.keccak256,
     route: { name: ROUTE_NAMES.hashFunctionKeccak256Id },
   },
   {
-    title: 'Sha256',
-    id: TABS_IDS.sha256,
+    title: t('hash-functions-page.sha256'),
+    id: TAB_IDS.sha256,
     route: { name: ROUTE_NAMES.hashFunctionSha256Id },
   },
   {
-    title: 'Ripemd160',
-    id: TABS_IDS.ripemd160,
+    title: t('hash-functions-page.ripemd160'),
+    id: TAB_IDS.ripemd160,
     route: { name: ROUTE_NAMES.hashFunctionRipemd160Id },
   },
-]
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/unix-epoch.vue b/pages/unix-epoch.vue
index 0efa585..692723e 100644
--- a/pages/unix-epoch.vue
+++ b/pages/unix-epoch.vue
@@ -2,7 +2,7 @@
   <div class="unix-epoch-page">
     <h2>{{ $t('unix-epoch-page.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="tabsList" />
+      <app-tabs :tabs="tabItems" />
       <div class="unix-epoch-page__content">
         <nuxt-page keepalive />
       </div>
@@ -23,27 +23,27 @@ definePageMeta({
   redirect: { name: ROUTE_NAMES.unixEpochDate },
 })
 
-enum TABS_IDS {
+enum TAB_IDS {
   date = 'date',
   timestamp = 'timestamp',
   duration = 'duration',
 }
 
 const { t } = i18n.global
-const tabsList = computed<Tab[]>(() => [
+const tabItems = computed<Tab[]>(() => [
   {
     title: t('unix-epoch-page.date-form-tab'),
-    id: TABS_IDS.date,
+    id: TAB_IDS.date,
     route: { name: ROUTE_NAMES.unixEpochDate },
   },
   {
     title: t('unix-epoch-page.timestamp-form-tab'),
-    id: TABS_IDS.timestamp,
+    id: TAB_IDS.timestamp,
     route: { name: ROUTE_NAMES.unixEpochTimestamp },
   },
   {
     title: t('unix-epoch-page.duration-form-tab'),
-    id: TABS_IDS.duration,
+    id: TAB_IDS.duration,
     route: { name: ROUTE_NAMES.unixEpochDuration },
   },
 ])
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index 7aeea7a..a4d9c90 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -77,7 +77,10 @@
     "ascii-converter-form-tab": "ASCII converter"
   },
   "hash-functions-page": {
-    "main-title": "Hash functions"
+    "main-title": "Hash functions",
+    "keccak256": "Keccak256",
+    "sha256": "Sha256",
+    "ripemd160": "Ripemd160"
   },
   "unix-epoch-page": {
     "main-title": "UNIX epoch",
diff --git a/types/time.types.ts b/types/time.types.ts
index 9d09061..ce0b02f 100644
--- a/types/time.types.ts
+++ b/types/time.types.ts
@@ -1,4 +1,4 @@
 import { TIME_IDS } from 'enums'
 
-export type TimeKeysType = keyof typeof TIME_IDS
-export type TimeType = Record<TimeKeysType, number>
+export type TimeKeys = keyof typeof TIME_IDS
+export type Time = Record<TimeKeys, number>

From c44becbf0982d7918ca5cdb7658276666366eb0d Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Sat, 21 Sep 2024 14:10:11 +0300
Subject: [PATCH 10/13] adjusted code after review

---
 enums/time.enum.ts                     |  4 +-
 forms/CommonAddressesForm.vue          |  6 +--
 forms/ConstantsForm.vue                | 51 +++++++++++---------------
 forms/DurationForm.vue                 | 23 ++++++------
 forms/NumberConverterForm.vue          |  2 +-
 helpers/time.helpers.ts                | 34 ++++++++---------
 pages/hash-function.vue                | 15 +++-----
 plugins/localization/resources/en.json |  9 ++---
 types/time.types.ts                    |  6 +--
 9 files changed, 67 insertions(+), 83 deletions(-)

diff --git a/enums/time.enum.ts b/enums/time.enum.ts
index e740014..73df7c3 100644
--- a/enums/time.enum.ts
+++ b/enums/time.enum.ts
@@ -1,4 +1,4 @@
-export enum TIME_IDS {
+export enum PERIOD_IDS {
   seconds = 's',
   minutes = 'min',
   hours = 'h',
@@ -8,7 +8,7 @@ export enum TIME_IDS {
   years = 'y',
 }
 
-export enum TIME_CONSTANTS {
+export enum PERIOD_CONSTANTS {
   secondsInHour = 3600,
   hoursInDay = 24,
   daysInWeek = 7,
diff --git a/forms/CommonAddressesForm.vue b/forms/CommonAddressesForm.vue
index cd071c4..638f835 100644
--- a/forms/CommonAddressesForm.vue
+++ b/forms/CommonAddressesForm.vue
@@ -8,10 +8,7 @@
             <label class="common-addresses-form__label">
               {{ $t(`common-addresses-form.${key}-label`) }}
             </label>
-            <button
-              v-if="key === 'randomAddress'"
-              @click="form.randomAddress = generateRandomAddress()"
-            >
+            <button v-if="key === 'randomAddress'" @click="updateRandomAddress">
               <app-icon
                 class="common-addresses-form__btn-icon"
                 :name="$icons.refresh"
@@ -46,6 +43,7 @@ import { Wallet } from 'ethers'
 import { reactive } from 'vue'
 
 const generateRandomAddress = (): string => Wallet.createRandom().address
+const updateRandomAddress = () => (form.randomAddress = generateRandomAddress())
 
 const form = reactive({
   zeroAddress: '0x0000000000000000000000000000000000000000',
diff --git a/forms/ConstantsForm.vue b/forms/ConstantsForm.vue
index b1abcbc..d423faf 100644
--- a/forms/ConstantsForm.vue
+++ b/forms/ConstantsForm.vue
@@ -2,40 +2,32 @@
   <form class="constants-form" @submit.prevent>
     <div class="constants-form__input">
       <h3>{{ $t('constants-form.title') }}</h3>
-      <template v-for="(value, key) in form" :key="key">
-        <div v-if="key === 'randomBytes32'">
-          <div class="constants-form__label-wrp">
-            <label class="constants-form__label">
-              {{ $t(`constants-form.${key}-label`) }}
-            </label>
-            <button
-              v-if="key === 'randomBytes32'"
-              @click="form.randomBytes32 = generateRandomBytes()"
-            >
-              <app-icon
-                class="constants-form__btn-icon"
-                :name="$icons.refresh"
-              />
-            </button>
-          </div>
-          <input-field readonly :model-value="value">
-            <template #nodeLeft>
-              <app-copy :value="value" />
-            </template>
-          </input-field>
+      <div>
+        <div class="constants-form__label-wrp">
+          <label class="constants-form__label">
+            {{ $t(`constants-form.random-bytes32-label`) }}
+          </label>
+          <button @click="updateRandomBytes">
+            <app-icon class="constants-form__btn-icon" :name="$icons.refresh" />
+          </button>
         </div>
-        <input-field
-          v-else
-          readonly
-          :label="$t(`constants-form.${key}-label`)"
-          :model-value="value"
-        >
+        <input-field v-model="form.randomBytes32" readonly>
           <template #nodeLeft>
-            <app-copy :value="value" />
+            <app-copy :value="form.randomBytes32" />
           </template>
         </input-field>
-      </template>
+      </div>
     </div>
+
+    <input-field
+      v-model="form.zeroBytes32"
+      readonly
+      :label="$t(`constants-form.zero-bytes32-label`)"
+    >
+      <template #nodeLeft>
+        <app-copy :value="form.zeroBytes32" />
+      </template>
+    </input-field>
   </form>
 </template>
 
@@ -46,6 +38,7 @@ import { reactive } from 'vue'
 import { randomBytes, hexlify } from 'ethers'
 import { ZERO_BYTES_32 } from '@/constants'
 
+const updateRandomBytes = () => (form.randomBytes32 = generateRandomBytes())
 const generateRandomBytes = (): string => hexlify(randomBytes(32))
 
 const form = reactive({
diff --git a/forms/DurationForm.vue b/forms/DurationForm.vue
index 5abaca2..9a6f42e 100644
--- a/forms/DurationForm.vue
+++ b/forms/DurationForm.vue
@@ -1,3 +1,4 @@
+\
 <template>
   <form class="duration-form">
     <div class="duration-form__input">
@@ -12,8 +13,8 @@
         <app-icon class="duration-form__text-icon" :name="ICON_NAMES.clock" />
         {{
           $t('duration-form.info', {
-            daysInYear: TIME_CONSTANTS.daysInYear,
-            daysInMonth: TIME_CONSTANTS.daysInMonth,
+            daysInYear: PERIOD_CONSTANTS.daysInYear,
+            daysInMonth: PERIOD_CONSTANTS.daysInMonth,
           })
         }}
       </p>
@@ -42,10 +43,14 @@ import { InputField } from '@/fields'
 import { computed, reactive, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
 import { getTotalDurationAsSeconds, getTransformedTime } from '@/helpers'
-import { ICON_NAMES, TIME_CONSTANTS } from '@/enums'
-import { Time } from 'types/time.types'
+import { ICON_NAMES, PERIOD_CONSTANTS } from '@/enums'
+import { Periods } from 'types/time.types'
 
-const INITIAL_RAW_DURATION_STATE: Time = {
+const { t } = i18n.global
+
+const form = reactive({ duration: '' })
+
+const rawDuration = reactive<Periods>({
   seconds: 0,
   minutes: 0,
   hours: 0,
@@ -53,13 +58,7 @@ const INITIAL_RAW_DURATION_STATE: Time = {
   weeks: 0,
   months: 0,
   years: 0,
-}
-
-const { t } = i18n.global
-
-const form = reactive({ duration: '' })
-
-const rawDuration = reactive<Time>({ ...INITIAL_RAW_DURATION_STATE })
+})
 
 const { touchField } = useFormValidation(form, {})
 
diff --git a/forms/NumberConverterForm.vue b/forms/NumberConverterForm.vue
index 801e1e3..9b5c71d 100644
--- a/forms/NumberConverterForm.vue
+++ b/forms/NumberConverterForm.vue
@@ -14,7 +14,7 @@
         @blur="touchField(key)"
       >
         <template #nodeLeft>
-          <app-copy :value="value || 0" />
+          <app-copy :value="value" />
         </template>
       </textarea-field>
     </div>
diff --git a/helpers/time.helpers.ts b/helpers/time.helpers.ts
index 2bb25c2..de0501e 100644
--- a/helpers/time.helpers.ts
+++ b/helpers/time.helpers.ts
@@ -1,9 +1,9 @@
-import { TIME_IDS, TIME_CONSTANTS } from '@/enums'
+import { PERIOD_IDS, PERIOD_CONSTANTS } from '@/enums'
 import { duration } from 'dayjs'
-import { Time, TimeKeys } from 'types/time.types'
+import { Periods, PeriodKeys } from 'types/time.types'
 
 export const getTransformedTime = (dateString: string) => {
-  const dateUnits = Object.entries(TIME_IDS)
+  const dateUnits = Object.entries(PERIOD_IDS)
 
   const duration = dateUnits.reduce((accumulator, [timeKey, timeId]) => {
     const regex = new RegExp(`(?<value>\\d+\\.?\\d*)\\s*(${timeId})`, 'g')
@@ -16,14 +16,14 @@ export const getTransformedTime = (dateString: string) => {
       return _accumulator
     }, 0)
 
-    accumulator[timeKey as TimeKeys] = parsedValue
+    accumulator[timeKey as PeriodKeys] = parsedValue
     return accumulator
-  }, {} as Time)
+  }, {} as Periods)
 
   return getNormalizedTime(duration)
 }
 
-export const getNormalizedTime = (rawDuration: Time): Time => {
+export const getNormalizedTime = (rawDuration: Periods): Periods => {
   const normalizedTime = { ...rawDuration }
   const seconds = getTotalDurationAsSeconds(rawDuration)
   let totalDuration = duration(0)
@@ -37,24 +37,24 @@ export const getNormalizedTime = (rawDuration: Time): Time => {
   // so DayJs can't handle it properly
   let daysLeft = Math.floor(
     totalDuration.asSeconds() /
-      (TIME_CONSTANTS.hoursInDay * TIME_CONSTANTS.secondsInHour),
+      (PERIOD_CONSTANTS.hoursInDay * PERIOD_CONSTANTS.secondsInHour),
   )
 
-  normalizedTime.years = Math.floor(daysLeft / TIME_CONSTANTS.daysInYear)
-  daysLeft %= TIME_CONSTANTS.daysInYear
+  normalizedTime.years = Math.floor(daysLeft / PERIOD_CONSTANTS.daysInYear)
+  daysLeft %= PERIOD_CONSTANTS.daysInYear
 
-  normalizedTime.months = Math.floor(daysLeft / TIME_CONSTANTS.daysInMonth)
-  daysLeft %= TIME_CONSTANTS.daysInMonth
+  normalizedTime.months = Math.floor(daysLeft / PERIOD_CONSTANTS.daysInMonth)
+  daysLeft %= PERIOD_CONSTANTS.daysInMonth
 
-  normalizedTime.weeks = Math.floor(daysLeft / TIME_CONSTANTS.daysInWeek)
-  daysLeft %= TIME_CONSTANTS.daysInWeek
+  normalizedTime.weeks = Math.floor(daysLeft / PERIOD_CONSTANTS.daysInWeek)
+  daysLeft %= PERIOD_CONSTANTS.daysInWeek
 
   normalizedTime.days = daysLeft
 
   return normalizedTime
 }
 
-export const getTotalDurationAsSeconds = (rawDuration: Time) => {
+export const getTotalDurationAsSeconds = (rawDuration: Periods) => {
   let totalDuration = duration(0)
 
   totalDuration = totalDuration
@@ -62,9 +62,9 @@ export const getTotalDurationAsSeconds = (rawDuration: Time) => {
     .add(rawDuration.minutes, 'minutes')
     .add(rawDuration.hours, 'hours')
     .add(rawDuration.days, 'days')
-    .add(rawDuration.weeks * TIME_CONSTANTS.daysInWeek, 'days')
-    .add(rawDuration.months * TIME_CONSTANTS.daysInMonth, 'days')
-    .add(rawDuration.years * TIME_CONSTANTS.daysInYear, 'days')
+    .add(rawDuration.weeks * PERIOD_CONSTANTS.daysInWeek, 'days')
+    .add(rawDuration.months * PERIOD_CONSTANTS.daysInMonth, 'days')
+    .add(rawDuration.years * PERIOD_CONSTANTS.daysInYear, 'days')
 
   return totalDuration.asSeconds()
 }
diff --git a/pages/hash-function.vue b/pages/hash-function.vue
index 2bda954..5994fe3 100644
--- a/pages/hash-function.vue
+++ b/pages/hash-function.vue
@@ -2,7 +2,7 @@
   <div class="hash-functions-page">
     <h2>{{ $t('hash-functions-page.main-title') }}</h2>
     <div>
-      <app-tabs :tabs="tabItems" />
+      <app-tabs :tabs="TAB_ITEMS" />
       <div class="hash-functions-page__content">
         <nuxt-page keepalive />
       </div>
@@ -14,9 +14,7 @@
 import { AppTabs } from '#components'
 import { definePageMeta } from '#imports'
 import { ROUTE_NAMES } from '@/enums'
-import { computed } from 'vue'
 import { type Tab } from '@/types'
-import { i18n } from '~/plugins/localization'
 
 definePageMeta({
   layout: 'solidity-tools',
@@ -29,24 +27,23 @@ enum TAB_IDS {
   ripemd160 = 'ripemd160',
 }
 
-const { t } = i18n.global
-const tabItems = computed<Tab[]>(() => [
+const TAB_ITEMS: Tab[] = [
   {
-    title: t('hash-functions-page.keccak256'),
+    title: 'Keccak256',
     id: TAB_IDS.keccak256,
     route: { name: ROUTE_NAMES.hashFunctionKeccak256Id },
   },
   {
-    title: t('hash-functions-page.sha256'),
+    title: 'Sha256',
     id: TAB_IDS.sha256,
     route: { name: ROUTE_NAMES.hashFunctionSha256Id },
   },
   {
-    title: t('hash-functions-page.ripemd160'),
+    title: 'Ripemd160',
     id: TAB_IDS.ripemd160,
     route: { name: ROUTE_NAMES.hashFunctionRipemd160Id },
   },
-])
+]
 </script>
 
 <style lang="scss" scoped>
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index a4d9c90..be85985 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -77,10 +77,7 @@
     "ascii-converter-form-tab": "ASCII converter"
   },
   "hash-functions-page": {
-    "main-title": "Hash functions",
-    "keccak256": "Keccak256",
-    "sha256": "Sha256",
-    "ripemd160": "Ripemd160"
+    "main-title": "Hash functions"
   },
   "unix-epoch-page": {
     "main-title": "UNIX epoch",
@@ -283,8 +280,8 @@
   },
   "constants-form": {
     "title": "Bytes",
-    "zeroBytes32-label": "Zero bytes (32)",
-    "randomBytes32-label": "Random bytes (32)"
+    "zero-bytes32-label": "Zero bytes (32)",
+    "random-bytes32-label": "Random bytes (32)"
   },
   "ecrecover": {
     "main-title": "Ecrecover utils",
diff --git a/types/time.types.ts b/types/time.types.ts
index ce0b02f..bd460d4 100644
--- a/types/time.types.ts
+++ b/types/time.types.ts
@@ -1,4 +1,4 @@
-import { TIME_IDS } from 'enums'
+import { PERIOD_IDS } from 'enums'
 
-export type TimeKeys = keyof typeof TIME_IDS
-export type Time = Record<TimeKeys, number>
+export type PeriodKeys = keyof typeof PERIOD_IDS
+export type Periods = Record<PeriodKeys, number>

From b5bd98d7d2d61fde45d65e40e12687505f669c4b Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Mon, 23 Sep 2024 09:42:53 +0300
Subject: [PATCH 11/13] restored previous copy button usage

---
 components/AppCopy.vue        | 1 +
 forms/AsciiConverterForm.vue  | 3 ++-
 forms/NumberConverterForm.vue | 3 ++-
 forms/UnitConverterForm.vue   | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/AppCopy.vue b/components/AppCopy.vue
index 2384410..596f298 100644
--- a/components/AppCopy.vue
+++ b/components/AppCopy.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="app-copy">
     <slot />
+    <!-- TODO: Refactor condition to avoid "value || ' '" in components  -->
     <button v-if="String(props.value)" type="button" @click="handleCopy">
       <app-icon
         class="app-copy__icon"
diff --git a/forms/AsciiConverterForm.vue b/forms/AsciiConverterForm.vue
index 0782453..b7c98e0 100644
--- a/forms/AsciiConverterForm.vue
+++ b/forms/AsciiConverterForm.vue
@@ -14,7 +14,8 @@
         @blur="touchField(key)"
       >
         <template #nodeLeft>
-          <app-copy :value="value || 0" />
+          <!-- value || ' ' to keep the copy-button visible in input -->
+          <app-copy :value="value || ' '" />
         </template>
       </textarea-field>
     </div>
diff --git a/forms/NumberConverterForm.vue b/forms/NumberConverterForm.vue
index 9b5c71d..3eb72b4 100644
--- a/forms/NumberConverterForm.vue
+++ b/forms/NumberConverterForm.vue
@@ -14,7 +14,8 @@
         @blur="touchField(key)"
       >
         <template #nodeLeft>
-          <app-copy :value="value" />
+          <!-- value || ' ' to keep the copy-button visible in input -->
+          <app-copy :value="value || ' '" />
         </template>
       </textarea-field>
     </div>
diff --git a/forms/UnitConverterForm.vue b/forms/UnitConverterForm.vue
index 26acca6..2ef9544 100644
--- a/forms/UnitConverterForm.vue
+++ b/forms/UnitConverterForm.vue
@@ -14,7 +14,8 @@
         @update:model-value="formatInputs($event, key)"
       >
         <template #nodeLeft>
-          <app-copy :value="value || 0" />
+          <!-- value || ' ' to keep the copy-button visible in input -->
+          <app-copy :value="value || ' '" />
         </template>
       </textarea-field>
     </div>

From 10e213670a8fd8d3f663f7b5027a7ca095c69cfb Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Mon, 23 Sep 2024 09:52:58 +0300
Subject: [PATCH 12/13] changed naming of period related stuff

---
 enums/index.ts                                 | 2 +-
 enums/{time.enum.ts => period.enum.ts}         | 0
 forms/DurationForm.vue                         | 6 +++---
 helpers/index.ts                               | 2 +-
 helpers/{time.helpers.ts => period.helpers.ts} | 8 ++++----
 types/{time.types.ts => period.types.ts}       | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)
 rename enums/{time.enum.ts => period.enum.ts} (100%)
 rename helpers/{time.helpers.ts => period.helpers.ts} (90%)
 rename types/{time.types.ts => period.types.ts} (67%)

diff --git a/enums/index.ts b/enums/index.ts
index 632dba3..8af1241 100644
--- a/enums/index.ts
+++ b/enums/index.ts
@@ -2,4 +2,4 @@ export * from './ethereum-types.enum'
 export * from './icon-names.enum'
 export * from './route-names.enum'
 export * from './window-breakpoints.enum'
-export * from './time.enum'
+export * from './period.enum'
diff --git a/enums/time.enum.ts b/enums/period.enum.ts
similarity index 100%
rename from enums/time.enum.ts
rename to enums/period.enum.ts
diff --git a/forms/DurationForm.vue b/forms/DurationForm.vue
index 9a6f42e..1e90203 100644
--- a/forms/DurationForm.vue
+++ b/forms/DurationForm.vue
@@ -42,9 +42,9 @@ import { useFormValidation } from '@/composables'
 import { InputField } from '@/fields'
 import { computed, reactive, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
-import { getTotalDurationAsSeconds, getTransformedTime } from '@/helpers'
+import { getTotalDurationAsSeconds, getTransformedPeriod } from '@/helpers'
 import { ICON_NAMES, PERIOD_CONSTANTS } from '@/enums'
-import { Periods } from 'types/time.types'
+import { Periods } from 'types/period.types'
 
 const { t } = i18n.global
 
@@ -82,7 +82,7 @@ const secondsDuration = computed(() => {
 watch(
   () => form.duration,
   () => {
-    Object.assign(rawDuration, getTransformedTime(form.duration))
+    Object.assign(rawDuration, getTransformedPeriod(form.duration))
   },
 )
 </script>
diff --git a/helpers/index.ts b/helpers/index.ts
index d24bf5a..f50d51a 100644
--- a/helpers/index.ts
+++ b/helpers/index.ts
@@ -10,4 +10,4 @@ export * from './type.helpers'
 export * from './validators.helpers'
 export * from './hash-functions.helpers'
 export * from './numbers.helpers'
-export * from './time.helpers'
+export * from './period.helpers'
diff --git a/helpers/time.helpers.ts b/helpers/period.helpers.ts
similarity index 90%
rename from helpers/time.helpers.ts
rename to helpers/period.helpers.ts
index de0501e..59df361 100644
--- a/helpers/time.helpers.ts
+++ b/helpers/period.helpers.ts
@@ -1,8 +1,8 @@
 import { PERIOD_IDS, PERIOD_CONSTANTS } from '@/enums'
 import { duration } from 'dayjs'
-import { Periods, PeriodKeys } from 'types/time.types'
+import { Periods, PeriodKeys } from 'types/period.types'
 
-export const getTransformedTime = (dateString: string) => {
+export const getTransformedPeriod = (dateString: string) => {
   const dateUnits = Object.entries(PERIOD_IDS)
 
   const duration = dateUnits.reduce((accumulator, [timeKey, timeId]) => {
@@ -20,10 +20,10 @@ export const getTransformedTime = (dateString: string) => {
     return accumulator
   }, {} as Periods)
 
-  return getNormalizedTime(duration)
+  return getNormalizedPeriod(duration)
 }
 
-export const getNormalizedTime = (rawDuration: Periods): Periods => {
+export const getNormalizedPeriod = (rawDuration: Periods): Periods => {
   const normalizedTime = { ...rawDuration }
   const seconds = getTotalDurationAsSeconds(rawDuration)
   let totalDuration = duration(0)
diff --git a/types/time.types.ts b/types/period.types.ts
similarity index 67%
rename from types/time.types.ts
rename to types/period.types.ts
index bd460d4..c877805 100644
--- a/types/time.types.ts
+++ b/types/period.types.ts
@@ -1,4 +1,4 @@
-import { PERIOD_IDS } from 'enums'
+import { PERIOD_IDS } from 'enums/period.enum'
 
 export type PeriodKeys = keyof typeof PERIOD_IDS
 export type Periods = Record<PeriodKeys, number>

From b147ded490204c5c5c8c8ee0f8fe125dfee8ca74 Mon Sep 17 00:00:00 2001
From: Mykyta Sydorenko <mykytasydorenko0@gmail.com>
Date: Mon, 23 Sep 2024 09:59:13 +0300
Subject: [PATCH 13/13] changed parentheses to curly brackets

---
 forms/CommonAddressesForm.vue | 4 +++-
 forms/ConstantsForm.vue       | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/forms/CommonAddressesForm.vue b/forms/CommonAddressesForm.vue
index 638f835..1f29f38 100644
--- a/forms/CommonAddressesForm.vue
+++ b/forms/CommonAddressesForm.vue
@@ -43,7 +43,9 @@ import { Wallet } from 'ethers'
 import { reactive } from 'vue'
 
 const generateRandomAddress = (): string => Wallet.createRandom().address
-const updateRandomAddress = () => (form.randomAddress = generateRandomAddress())
+const updateRandomAddress = () => {
+  form.randomAddress = generateRandomAddress()
+}
 
 const form = reactive({
   zeroAddress: '0x0000000000000000000000000000000000000000',
diff --git a/forms/ConstantsForm.vue b/forms/ConstantsForm.vue
index d423faf..5c33a96 100644
--- a/forms/ConstantsForm.vue
+++ b/forms/ConstantsForm.vue
@@ -38,7 +38,9 @@ import { reactive } from 'vue'
 import { randomBytes, hexlify } from 'ethers'
 import { ZERO_BYTES_32 } from '@/constants'
 
-const updateRandomBytes = () => (form.randomBytes32 = generateRandomBytes())
+const updateRandomBytes = () => {
+  form.randomBytes32 = generateRandomBytes()
+}
 const generateRandomBytes = (): string => hexlify(randomBytes(32))
 
 const form = reactive({