Feature/Share link (#64)

* updated config and env.example

* added api

* added link-shortener service

* updated encoder

* updated decoder

* refactored route path to route names

* updated names of mixin, classes, i18n keys

* added share btn for hash-function form

* check path of data from link-shortener for encoder and decoder

* added incompatible data received runtime error

* added todos

---------

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

.env.example

@@ -1,5 +1,6 @@
 VITE_ENVIRONMENT=development
 VITE_PORT=8095
+VITE_API_URL='https://api.stage.solarity.dev'
 VITE_APP_NAME='Solarity'
 VITE_APP_COMPANY_URL='https://distributedlab.com'
 VITE_APP_DOCUMENTATION_URL='https://docs.stage.solarity.dev'

api/index.ts

@@ -0,0 +1,6 @@
+import { config } from '@/config'
+import { Fetcher, fetcher } from '@distributedlab/fetcher'
+
+const api = new Fetcher({ baseUrl: config.API_URL })
+
+export { api, fetcher }

assets/styles/_mixins.scss

@@ -139,6 +139,8 @@ $media-breakpoints: (
 }
 
 @mixin solidity-tools-page-content {
+  position: relative;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   padding: toRem(40);
@@ -150,6 +152,18 @@ $media-breakpoints: (
   }
 }
 
+@mixin solidity-tools-page-content-loader-wrp {
+  $z-index: 100;
+
+  position: absolute;
+  inset: 0;
+  z-index: $z-index;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--backdrop-modal);
+}
+
 @mixin solidity-tools-form {
   display: grid;
   grid-gap: toRem(40);
@@ -173,6 +187,14 @@ $media-breakpoints: (
   background: var(--border-primary-main);
 }
 
+@mixin solidity-tools-form-share-btn-wrp {
+  display: flex;
+  justify-content: center;
+  border-top: toRem(1) solid var(--border-primary-main);
+  border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
+  padding: toRem(16) toRem(40);
+}
+
 @mixin page-msg {
   max-width: toRem(420);
   width: 100%;

components/AppButton.vue

@@ -80,8 +80,9 @@
 
 <script lang="ts" setup>
 import { AppIcon } from '#components'
-import { computed, useAttrs, useSlots } from 'vue'
 import { ICON_NAMES } from '@/enums'
+import { RouteLocationRaw } from '@/types'
+import { computed, useAttrs, useSlots } from 'vue'
 
 type ButtonType = 'button' | 'submit' | 'reset'
 
@@ -92,10 +93,10 @@ const props = withDefaults(
     modification?: 'border-circle' | 'border-rounded' | 'text' | 'none'
     color?: 'primary' | 'secondary' | 'none'
     size?: 'large' | 'medium' | 'none'
-    route?: string
+    route?: RouteLocationRaw
     href?: string
-    iconLeft?: ICON_NAMES
-    iconRight?: ICON_NAMES
+    iconLeft?: ICON_NAMES | ''
+    iconRight?: ICON_NAMES | ''
   }>(),
   {
     text: '',
@@ -105,8 +106,8 @@ const props = withDefaults(
     size: 'medium',
     route: undefined,
     href: '',
-    iconLeft: undefined,
-    iconRight: undefined,
+    iconLeft: '',
+    iconRight: '',
   },
 )
 
@@ -397,7 +398,6 @@ const buttonType = computed<ButtonType>(
     --app-button-border-focused: none;
     --app-button-border-active: none;
 
-    display: inline;
     padding: 0;
 
     &:not([disabled]):hover,

components/AppCopy.vue

@@ -12,6 +12,7 @@
 
 <script lang="ts" setup>
 import { AppIcon } from '#components'
+import { COPIED_DURING_MS } from '@/constants'
 import { copyToClipboard, sleep } from '@/helpers'
 import { ref } from 'vue'
 
@@ -22,7 +23,7 @@ const isCopied = ref(false)
 const handleCopy = async () => {
   await copyToClipboard(String(props.value))
   isCopied.value = true
-  await sleep(1000)
+  await sleep(COPIED_DURING_MS)
   isCopied.value = false
 }
 </script>

components/AppLogo.vue

@@ -1,5 +1,5 @@
 <template>
-  <nuxt-link class="app-logo" :to="$routes.app" @click="onClick">
+  <nuxt-link class="app-logo" :to="{ name: $routes.app }" @click="onClick">
     <img class="app-logo__img" src="/branding/logo.png" :alt="config.NAME" />
     <h3 class="app-logo__title">
       {{ $t('app-logo.title') }}
@@ -10,12 +10,12 @@
 <script lang="ts" setup>
 import { useRoute } from '#app'
 import { config } from '@/config'
-import { ROUTE_PATH } from '@/constants'
+import { ROUTE_NAMES } from '@/enums'
 
 const route = useRoute()
 
 const onClick = () => {
-  if (route.path === ROUTE_PATH.app) window.location.reload()
+  if (route.name === ROUTE_NAMES.app) window.location.reload()
 }
 </script>
 

components/ProjectsInfo.vue

@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import ProjectsInfoCard from './ProjectsInfoCard.vue'
 import { config } from '@/config'
-import { ROUTE_PATH } from '@/constants'
+import { ROUTE_NAMES } from '@/enums'
 import { ProjectInfoCard } from '@/types'
 import { i18n } from '~/plugins/localization'
 
@@ -23,7 +23,7 @@ const cards: ProjectInfoCard[] = [
     title: t('projects-info.audits-title'),
     message: t('projects-info.audits-message'),
     btnText: t('projects-info.visit-btn'),
-    route: ROUTE_PATH.audits,
+    route: { name: ROUTE_NAMES.audits },
   },
   {
     title: t('projects-info.github-title'),
@@ -35,7 +35,7 @@ const cards: ProjectInfoCard[] = [
     title: t('projects-info.solidity-tools-title'),
     message: t('projects-info.solidity-tools-message'),
     btnText: t('projects-info.visit-btn'),
-    route: ROUTE_PATH.abiEncoder,
+    route: { name: ROUTE_NAMES.abi },
   },
 ]
 </script>

components/StatsPreview.vue

@@ -20,7 +20,7 @@
         <app-button
           class="stats-preview__btn"
           :text="$t('stats-preview.tools-link-text')"
-          :route="ROUTE_PATH.abiEncoder"
+          :route="{ name: $routes.abiEncoderId }"
         />
         <app-button
           class="stats-preview__btn"
@@ -37,7 +37,6 @@
 import { AppButton } from '#components'
 import { useViewportSizes } from '@/composables'
 import { config } from '@/config'
-import { ROUTE_PATH } from '@/constants'
 
 const { isSmallBreakpoint } = useViewportSizes()
 </script>

components/ToolsSidebar.vue

@@ -31,8 +31,7 @@
 <script lang="ts" setup>
 import { useRoute } from '#app'
 import { AppButton, AppLogo } from '#components'
-import { ROUTE_PATH } from '@/constants'
-import { ICON_NAMES, WINDOW_BREAKPOINTS } from '@/enums'
+import { ICON_NAMES, ROUTE_NAMES, WINDOW_BREAKPOINTS } from '@/enums'
 import { useWindowSize } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
@@ -49,27 +48,27 @@ const navLinks = computed(() => [
   {
     title: t('tools-sidebar.abi-title'),
     icon: ICON_NAMES.code,
-    route: ROUTE_PATH.abi,
+    route: { name: ROUTE_NAMES.abi },
   },
   {
     title: t('tools-sidebar.hash-functions-title'),
     icon: ICON_NAMES.hashtag,
-    route: ROUTE_PATH.hashFunction,
+    route: { name: ROUTE_NAMES.hashFunction },
   },
   {
     title: t('tools-sidebar.converter-title'),
     icon: ICON_NAMES.refresh,
-    route: ROUTE_PATH.converter,
+    route: { name: ROUTE_NAMES.converter },
   },
   {
     title: t('tools-sidebar.unix-epoch-title'),
     icon: ICON_NAMES.clock,
-    route: ROUTE_PATH.unixEpoch,
+    route: { name: ROUTE_NAMES.unixEpoch },
   },
   {
     title: t('tools-sidebar.address-utils-title'),
     icon: ICON_NAMES.locationMarker,
-    route: ROUTE_PATH.addressUtils,
+    route: { name: ROUTE_NAMES.addressUtils },
   },
 ])
 

config.ts

@@ -1,6 +1,7 @@
 import { LogLevelDesc } from 'loglevel'
 
 export const config = {
+  API_URL: import.meta.env.VITE_API_URL as string,
   NAME: import.meta.env.VITE_APP_NAME as string,
   COMPANY_URL: import.meta.env.VITE_APP_COMPANY_URL as string,
   DOCUMENTATION_URL: import.meta.env.VITE_APP_DOCUMENTATION_URL as string,

constants/index.ts

@@ -1,2 +1 @@
-export * from './route-names.constant'
 export * from './numbers.constant'

constants/numbers.constant.ts

@@ -1,3 +1,5 @@
+export const COPIED_DURING_MS = 1000
+
 export const UNITS = {
   wei: { title: 'Wei', decimals: 18 },
   kwei: { title: 'KWei', decimals: 15 },

enums/icon-names.enum.ts

@@ -5,6 +5,7 @@ export enum ICON_NAMES {
   burger = 'burger',
   calendar = 'calendar',
   checkCircle = 'check-circle',
+  checkDouble = 'check-double',
   clipboardCheck = 'clipboard-check',
   clock = 'clock',
   code = 'code',

enums/index.ts

@@ -1,3 +1,4 @@
 export * from './ethereum-types.enum'
-export { ICON_NAMES } from './icon-names.enum'
+export * from './icon-names.enum'
+export * from './route-names.enum'
 export * from './window-breakpoints.enum'

enums/route-names.enum.ts

@@ -0,0 +1,21 @@
+export enum ROUTE_NAMES {
+  app = 'index',
+  audits = 'audits',
+  abi = 'abi',
+  abiEncoderId = 'abi-encoder-id',
+  abiDecoderId = 'abi-decoder-id',
+  unixEpoch = 'unix-epoch',
+  unixEpochDate = 'unix-epoch-date',
+  unixEpochTimestamp = 'unix-epoch-timestamp',
+  converter = 'converter',
+  converterUnit = 'converter-unit',
+  converterNumber = 'converter-number',
+  hashFunction = 'hash-function',
+  hashFunctionKeccak256Id = 'hash-function-keccak256-id',
+  hashFunctionSha256Id = 'hash-function-sha256-id',
+  hashFunctionRipemd160Id = 'hash-function-ripemd160-id',
+  addressUtils = 'address-utils',
+  addressUtilsCommonAddresses = 'address-utils-common-addresses',
+  addressUtilsCreate = 'address-utils-create',
+  addressUtilsCreate2 = 'address-utils-create2',
+}

error.vue

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

errors/index.ts

@@ -1,5 +1,9 @@
+import * as linkShortenerServiceErrors from './link-shortener.service.errors'
 import * as runtimeErrors from './runtime-errors'
 
 export const errors = {
   ...runtimeErrors,
+  linkShortenerServiceErrors,
 }
+
+export { linkShortenerServiceErrors, runtimeErrors }

errors/link-shortener.service.errors.ts

@@ -0,0 +1,11 @@
+import { RuntimeError } from './runtime-errors'
+
+export class CreateLinkFetchError extends RuntimeError {
+  // TODO: refactoring by web-kit
+  message = 'failed to create link'
+}
+
+export class GetDataByLinkFetchError extends RuntimeError {
+  // TODO: refactoring by web-kit
+  message = 'failed to get data by link'
+}

errors/runtime-errors.ts

@@ -1,17 +1,26 @@
 export class RuntimeError extends Error {}
 
 export class FunctionSignatureFetchError extends RuntimeError {
+  // TODO: refactoring by web-kit
   message = 'failed to get function signature'
 }
 
 export class FunctionFragmentGuessError extends RuntimeError {
+  // TODO: refactoring by web-kit
   message = 'failed to guess function fragment'
 }
 
 export class ParamTypesGuessError extends RuntimeError {
+  // TODO: refactoring by web-kit
   message = 'failed guess params types'
 }
 
 export class AbiDecodeError extends RuntimeError {
+  // TODO: refactoring by web-kit
   message = 'failed to decode abi'
 }
+
+export class IncompatibleDataReceivedError extends RuntimeError {
+  // TODO: refactoring by web-kit
+  message = 'incompatible data received'
+}