Feature/Сommon addresses (#38)

* kebab-case in template in app.vue

* renamed address predicator -> address utils

* added common addresses tab in address utils

* added common-addresses page

* added random address

---------

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

app.vue

@@ -1,7 +1,7 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <nuxt-layout>
+    <nuxt-page />
+  </nuxt-layout>
   <div id="app-modals" />
 </template>
 

components/ToolsSidebar.vue

@@ -67,9 +67,9 @@ const navLinks = computed(() => [
     route: ROUTE_PATH.unixEpoch,
   },
   {
-    title: t('tools-sidebar.address-predictor-title'),
+    title: t('tools-sidebar.address-utils-title'),
     icon: ICON_NAMES.locationMarker,
-    route: ROUTE_PATH.addressPredicator,
+    route: ROUTE_PATH.addressUtils,
   },
 ])
 

constants/route-names.constant.ts

@@ -14,7 +14,8 @@ export const ROUTE_PATH = {
   hashFunctionKeccak256: '/hash-function/keccak256',
   hashFunctionSha256: '/hash-function/sha256',
   hashFunctionRipemd160: '/hash-function/ripemd160',
-  addressPredicator: '/address-predictor',
-  addressPredicatorCreate: '/address-predictor/create',
-  addressPredicatorCreate2: '/address-predictor/create2',
+  addressUtils: '/address-utils',
+  addressUtilsCommonAddresses: '/address-utils/common-addresses',
+  addressUtilsCreate: '/address-utils/create',
+  addressUtilsCreate2: '/address-utils/create2',
 }

fields/InputField.vue

@@ -271,6 +271,8 @@ $z-index-side-nodes: 1;
   color: inherit;
   max-height: 100%;
   z-index: $z-index-side-nodes;
+  display: flex;
+  gap: toRem(8);
 }
 
 .input-field__node-right-wrp {
@@ -280,6 +282,8 @@ $z-index-side-nodes: 1;
   transform: translateY(-50%);
   color: inherit;
   z-index: $z-index-side-nodes;
+  display: flex;
+  gap: toRem(8);
 }
 
 .input-field__icon {

forms/CommonAddressesForm.vue

@@ -0,0 +1,63 @@
+<template>
+  <form class="common-addresses-form" @submit.prevent>
+    <div class="common-addresses-form__input">
+      <h3>{{ $t('common-addresses-form.input-title') }}</h3>
+      <input-field
+        v-for="(_, key) in form"
+        :key="key"
+        readonly
+        :label="$t(`common-addresses-form.${key}-label`)"
+        :model-value="form[key]"
+      >
+        <template #nodeLeft>
+          <app-copy :value="form[key]" />
+          <button
+            v-if="key === 'randomAddress'"
+            @click="form.randomAddress = generateRandomAddress()"
+          >
+            <app-icon
+              class="common-addresses-form__btn-icon"
+              :name="$icons.refresh"
+            />
+          </button>
+        </template>
+      </input-field>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { AppCopy, AppIcon } from '#components'
+import { InputField } from '@/fields'
+import { Wallet } from 'ethers'
+import { onMounted, reactive } from 'vue'
+
+const generateRandomAddress = (): string => Wallet.createRandom().address
+
+const form = reactive({
+  zeroAddress: '0x0000000000000000000000000000000000000000',
+  allFsAddress: '0xFFfFfFffFFfffFFfFFfFFFFFffFFFffffFfFFFfF',
+  allEsAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+  randomAddress: '',
+})
+
+onMounted(() => {
+  form.randomAddress = generateRandomAddress()
+})
+</script>
+
+<style lang="scss" scoped>
+.common-addresses-form {
+  @include solidity-tools-form;
+}
+
+.common-addresses-form__input {
+  @include solidity-tools-form-part;
+}
+
+.common-addresses-form .common-addresses-form__btn-icon {
+  height: toRem(16);
+  width: toRem(16);
+  color: var(--primary-main);
+}
+</style>

forms/index.ts

@@ -1,5 +1,6 @@
 export { default as AbiDecodeForm } from './AbiDecodeForm.vue'
 export { default as AbiEncodeForm } from './AbiEncodeForm.vue'
+export { default as CommonAddressesForm } from './CommonAddressesForm.vue'
 export { default as CreateAddressForm } from './CreateAddressForm.vue'
 export { default as Create2AddressForm } from './Create2AddressForm.vue'
 export { default as DateForm } from './DateForm.vue'

pages/address-predictor.vue → pages/address-utils.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="address-predictor-page">
-    <h2>{{ $t('address-predictor-page.main-title') }}</h2>
+  <div class="address-utils-page">
+    <h2>{{ $t('address-utils-page.main-title') }}</h2>
     <div>
       <app-tabs :tabs="tabsList" />
-      <div class="address-predictor-page__content">
+      <div class="address-utils-page__content">
         <nuxt-page keepalive />
       </div>
     </div>
@@ -20,35 +20,41 @@ import { i18n } from '~/plugins/localization'
 
 definePageMeta({
   layout: 'solidity-tools',
-  redirect: ROUTE_PATH.addressPredicatorCreate,
+  redirect: ROUTE_PATH.addressUtilsCommonAddresses,
 })
 
 enum TABS_IDS {
+  commonAddressesForm = 'common-addresses-form',
   createAddressForm = 'create-address-form',
   create2AddressForm = 'create2-address-form',
 }
 
 const { t } = i18n.global
 const tabsList = computed<Tab[]>(() => [
   {
-    title: t('address-predictor-page.create-address-form-tab'),
+    title: t('address-utils-page.common-addresses-form-tab'),
+    id: TABS_IDS.commonAddressesForm,
+    route: ROUTE_PATH.addressUtilsCommonAddresses,
+  },
+  {
+    title: t('address-utils-page.create-address-form-tab'),
     id: TABS_IDS.createAddressForm,
-    route: ROUTE_PATH.addressPredicatorCreate,
+    route: ROUTE_PATH.addressUtilsCreate,
   },
   {
-    title: t('address-predictor-page.create2-address-form-tab'),
+    title: t('address-utils-page.create2-address-form-tab'),
     id: TABS_IDS.create2AddressForm,
-    route: ROUTE_PATH.addressPredicatorCreate2,
+    route: ROUTE_PATH.addressUtilsCreate2,
   },
 ])
 </script>
 
 <style lang="scss" scoped>
-.address-predictor-page {
+.address-utils-page {
   @include solidity-tools-page-base;
 }
 
-.address-predictor-page__content {
+.address-utils-page__content {
   @include solidity-tools-page-content;
 }
 </style>

pages/address-utils/common-addresses.vue

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

plugins/localization/resources/en.json

@@ -51,15 +51,16 @@
     "hash-functions-title": "Hash functions",
     "converter-title": "Converter",
     "unix-epoch-title": "Unix epoch",
-    "address-predictor-title": "Address predictor"
+    "address-utils-title": "Address utils"
   },
   "abi-page": {
     "main-title": "ABI Encoder/Decoder",
     "encoder-tab": "Encoder",
     "decoder-tab": "Decoder"
   },
-  "address-predictor-page": {
-    "main-title": "Address predictor",
+  "address-utils-page": {
+    "main-title": "Address utils",
+    "common-addresses-form-tab": "Common addresses",
     "create-address-form-tab": "Create",
     "create2-address-form-tab": "Create2"
   },
@@ -110,6 +111,13 @@
     "func-signature-label": "Function signature",
     "func-signature-placeholder": "Function signature"
   },
+  "common-addresses-form": {
+    "input-title": "Common addresses",
+    "zeroAddress-label": "Zero Address",
+    "allFsAddress-label": "All Fs Address",
+    "allEsAddress-label": "All Es Address",
+    "randomAddress-label": "Random address"
+  },
   "date-form": {
     "input-title": "Enter Date and Time",
     "year-label": "Year",