Feature/Routes

components/AppTabs.vue

@@ -5,11 +5,12 @@
       :key="tab.id"
       :text="tab.title"
       :icon-left="$icons.cube"
+      :route="tab.route"
       color="secondary"
       scheme="none"
       modification="none"
       class="app-tabs__btn"
-      :class="{ 'app-tabs__btn--active': modelValue.id === tab.id }"
+      :class="{ 'app-tabs__btn--active': modelValue?.id === tab.id }"
       @click="updateTab(tab)"
     />
   </div>
@@ -20,7 +21,7 @@ import { AppButton } from '#components'
 import { Tab } from '@/types'
 
 defineProps<{
-  modelValue: Tab
+  modelValue?: Tab
   tabs: Tab[]
 }>()
 
@@ -54,6 +55,7 @@ const updateTab = (tab: Tab) => {
     --app-button-text-focused: var(--text-primary-invert-main);
     --app-button-text-active: var(--text-primary-invert-main);
 
+    &.router-link-active,
     &--active {
       --app-button-bg: var(--primary-main);
       --app-button-bg-hover: var(--primary-main);

components/ToolsSidebar.vue

@@ -71,7 +71,7 @@ const navLinks = computed(() => [
   {
     title: t('tools-sidebar.hash-functions-title'),
     icon: ICON_NAMES.hashtag,
-    route: ROUTE_PATH.hashFunctions,
+    route: ROUTE_PATH.hashFunction,
   },
   {
     title: t('tools-sidebar.converter-title'),

constants/route-names.constant.ts

@@ -2,8 +2,19 @@ export const ROUTE_PATH = {
   app: '/',
   audits: '/audits',
   abi: '/abi',
+  abiEncoder: '/abi/encoder',
+  abiDecoder: '/abi/decoder',
   unixEpoch: '/unix-epoch',
+  unixEpochDate: '/unix-epoch/date',
+  unixEpochTimestamp: '/unix-epoch/timestamp',
   converter: '/converter',
-  hashFunctions: '/hash-functions',
+  converterUnit: '/converter/unit',
+  converterNumber: '/converter/number',
+  hashFunction: '/hash-function',
+  hashFunctionKeccak256: '/hash-function/keccak256',
+  hashFunctionSha256: '/hash-function/sha256',
+  hashFunctionRipemd160: '/hash-function/ripemd160',
   addressPredicator: '/address-predictor',
+  addressPredicatorCreate: '/address-predictor/create',
+  addressPredicatorCreate2: '/address-predictor/create2',
 }

error.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { navigateTo } from '#imports'
 import { ROUTE_PATH } from '@/constants'
 navigateTo(ROUTE_PATH.app, { redirectCode: 301 })
 </script>

forms/AbiDecodeForm.vue

@@ -3,7 +3,7 @@
     <div class="abi-decode-form__input">
       <div class="abi-decode-form__title-wrp">
         <h3 class="abi-decode-form__title">
-          {{ title }}
+          {{ $t('abi-decode-form.input-title') }}
         </h3>
         <div class="abi-decode-form__options-wrp">
           <checkbox-field
@@ -177,10 +177,6 @@ const TYPE_OPTIONS: FieldOption[] = without(
   title: v,
 }))
 
-defineProps<{
-  title: string
-}>()
-
 const DEFAULT_FUNCTION_NAME = 'function'
 const { t } = i18n.global
 

forms/AbiEncodeForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form class="abi-encode-form" @submit.prevent>
     <div class="abi-encode-form__input">
-      <h3>{{ title }}</h3>
+      <h3>{{ $t('abi-encode-form.input-title') }}</h3>
       <input-field
         v-model="form.funcName"
         :label="$t('abi-encode-form.func-name-label')"
@@ -121,10 +121,6 @@ const TYPE_OPTIONS: FieldOption[] = without(
   title: v,
 }))
 
-defineProps<{
-  title: string
-}>()
-
 const abiEncoding = ref('')
 const funcSignature = ref('')
 

helpers/hash-functions.helpers.ts

@@ -8,29 +8,23 @@ import {
 } from 'ethers'
 import { type HashFunction } from '@/types'
 
-export function keccak256(
-  ...[str, type]: Parameters<HashFunction>
-): ReturnType<HashFunction> {
+export const keccak256: HashFunction = (str, type) => {
   const dataHexString = _keccak256(
     type === 'text' ? toUtf8Bytes(str) : toBeHex(str),
   )
 
   return hexlify(dataHexString)
 }
 
-export function sha256(
-  ...[str, type]: Parameters<HashFunction>
-): ReturnType<HashFunction> {
+export const sha256: HashFunction = (str, type) => {
   const dataHexString = _sha256(
     type === 'text' ? toUtf8Bytes(str) : toBeHex(str),
   )
 
   return hexlify(dataHexString)
 }
 
-export function ripemd160(
-  ...[str, type]: Parameters<HashFunction>
-): ReturnType<HashFunction> {
+export const ripemd160: HashFunction = (str, type) => {
   const dataHexString = _ripemd160(
     type === 'text' ? toUtf8Bytes(str) : toBeHex(str),
   )

pages/abi.vue

@@ -2,16 +2,9 @@
   <div class="abi-page">
     <page-title :title="$t('abi-page.main-title')" />
     <div class="block">
-      <app-tabs v-model="currentTab" :tabs="tabsList" />
+      <app-tabs :tabs="tabsList" />
       <div class="content">
-        <abi-encode-form
-          v-show="currentTab.id === TABS_IDS.encoder"
-          :title="currentTab.title"
-        />
-        <abi-decode-form
-          v-show="currentTab.id === TABS_IDS.decoder"
-          :title="currentTab.title"
-        />
+        <nuxt-page keepalive />
       </div>
     </div>
   </div>
@@ -20,13 +13,14 @@
 <script lang="ts" setup>
 import { AppTabs, PageTitle } from '#components'
 import { definePageMeta } from '#imports'
-import { AbiEncodeForm, AbiDecodeForm } from '@/forms'
+import { ROUTE_PATH } from '@/constants'
 import { type Tab } from '@/types'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { i18n } from '~/plugins/localization'
 
 definePageMeta({
   layout: 'solidity-tools',
+  redirect: ROUTE_PATH.abiEncoder,
 })
 
 enum TABS_IDS {
@@ -39,13 +33,14 @@ const tabsList = computed<Tab[]>(() => [
   {
     title: t('abi-page.encoder-tab'),
     id: TABS_IDS.encoder,
+    route: ROUTE_PATH.abiEncoder,
   },
   {
     title: t('abi-page.decoder-tab'),
     id: TABS_IDS.decoder,
+    route: ROUTE_PATH.abiDecoder,
   },
 ])
-const currentTab = ref<Tab>(tabsList.value[0])
 </script>
 
 <style lang="scss" scoped>

pages/abi/decoder.vue

@@ -0,0 +1,7 @@
+<template>
+  <abi-decode-form />
+</template>
+
+<script lang="ts" setup>
+import { AbiDecodeForm } from '@/forms'
+</script>

pages/abi/encoder.vue

@@ -0,0 +1,7 @@
+<template>
+  <abi-encode-form />
+</template>
+
+<script lang="ts" setup>
+import { AbiEncodeForm } from '@/forms'
+</script>

pages/address-predictor.vue

@@ -2,29 +2,25 @@
   <div class="address-predictor-page">
     <page-title :title="$t('address-predictor-page.main-title')" />
     <div class="block">
-      <app-tabs v-model="currentTab" :tabs="tabsList" />
+      <app-tabs :tabs="tabsList" />
       <div class="content">
-        <create-address-form
-          v-show="currentTab.id === TABS_IDS.createAddressForm"
-        />
-        <create2-address-form
-          v-show="currentTab.id === TABS_IDS.create2AddressForm"
-        />
+        <nuxt-page keepalive />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { AppTabs, PageTitle } from '#components'
-import { CreateAddressForm, Create2AddressForm } from '@/forms'
-import { type Tab } from '@/types'
-import { ref, computed } from 'vue'
 import { definePageMeta } from '#imports'
+import { ROUTE_PATH } from '@/constants'
+import { type Tab } from '@/types'
+import { computed } from 'vue'
 import { i18n } from '~/plugins/localization'
 
 definePageMeta({
   layout: 'solidity-tools',
+  redirect: ROUTE_PATH.addressPredicatorCreate,
 })
 
 enum TABS_IDS {
@@ -37,13 +33,14 @@ const tabsList = computed<Tab[]>(() => [
   {
     title: t('address-predictor-page.create-address-form-tab'),
     id: TABS_IDS.createAddressForm,
+    route: ROUTE_PATH.addressPredicatorCreate,
   },
   {
     title: t('address-predictor-page.create2-address-form-tab'),
     id: TABS_IDS.create2AddressForm,
+    route: ROUTE_PATH.addressPredicatorCreate2,
   },
 ])
-const currentTab = ref<Tab>(tabsList.value[0])
 </script>
 
 <style lang="scss" scoped>

pages/address-predictor/create.vue

@@ -0,0 +1,7 @@
+<template>
+  <create-address-form />
+</template>
+
+<script lang="ts" setup>
+import { CreateAddressForm } from '@/forms'
+</script>

pages/address-predictor/create2.vue

@@ -0,0 +1,7 @@
+<template>
+  <create2-address-form />
+</template>
+
+<script lang="ts" setup>
+import { Create2AddressForm } from '@/forms'
+</script>

pages/converter.vue

@@ -2,29 +2,25 @@
   <div class="converter-page">
     <page-title :title="$t('converter-page.main-title')" />
     <div class="block">
-      <app-tabs v-model="currentTab" :tabs="tabsList" />
+      <app-tabs :tabs="tabsList" />
       <div class="content">
-        <unit-converter-form
-          v-show="currentTab.id === TABS_IDS.unitConverterForm"
-        />
-        <number-converter-form
-          v-show="currentTab.id === TABS_IDS.numberConverterForm"
-        />
+        <nuxt-page keepalive />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { AppTabs, PageTitle } from '#components'
-import { UnitConverterForm, NumberConverterForm } from '@/forms'
-import { type Tab } from '@/types'
-import { ref, computed } from 'vue'
 import { definePageMeta } from '#imports'
+import { ROUTE_PATH } from '@/constants'
+import { type Tab } from '@/types'
+import { computed } from 'vue'
 import { i18n } from '~/plugins/localization'
 
 definePageMeta({
   layout: 'solidity-tools',
+  redirect: ROUTE_PATH.converterUnit,
 })
 
 enum TABS_IDS {
@@ -37,13 +33,14 @@ const tabsList = computed<Tab[]>(() => [
   {
     title: t('converter-page.unit-converter-form-tab'),
     id: TABS_IDS.unitConverterForm,
+    route: ROUTE_PATH.converterUnit,
   },
   {
     title: t('converter-page.number-converter-form-tab'),
     id: TABS_IDS.numberConverterForm,
+    route: ROUTE_PATH.converterNumber,
   },
 ])
-const currentTab = ref<Tab>(tabsList.value[0])
 </script>
 
 <style lang="scss" scoped>

pages/converter/number.vue

@@ -0,0 +1,7 @@
+<template>
+  <number-converter-form />
+</template>
+
+<script lang="ts" setup>
+import { NumberConverterForm } from '@/forms'
+</script>

pages/converter/unit.vue

@@ -0,0 +1,7 @@
+<template>
+  <unit-converter-form />
+</template>
+
+<script lang="ts" setup>
+import { UnitConverterForm } from '@/forms'
+</script>