From 195f07681e8da16aaed9d3701801944b5f4ac5dd Mon Sep 17 00:00:00 2001
From: Carlos Rosado <carlos.rosado@ext.iovlabs.org>
Date: Fri, 15 Mar 2024 11:43:02 -0600
Subject: [PATCH] Fix: fixed some styling and added loading effects on tables

---
 src/components/BigField.vue              |  2 +-
 src/components/DataField.vue             |  5 +-
 src/components/DataPage.vue              | 14 ++---
 src/components/FieldItem.vue             |  1 -
 src/components/General/BackContent.vue   | 38 ++++++++++---
 src/components/General/TitleDetail.vue   |  2 +-
 src/components/Home.vue                  |  3 -
 src/components/Loaders/Loader.vue        | 36 ++++++++++++
 src/components/Loaders/SectionLoader.vue | 20 +++++++
 src/components/Loaders/TableLoader.vue   | 71 ++++++++++++++++++++++++
 src/components/Navigations/Sidebar.vue   | 15 +++--
 src/components/Search/CtrlSearch.vue     | 16 ++++--
 src/components/controls/MenuButton.vue   |  3 -
 src/config/pageColors.js                 |  3 +
 src/config/types.js                      | 22 ++++++++
 src/icons/AppsIcon.vue                   |  8 +++
 src/icons/credit-card.js                 |  6 ++
 src/router/routes.js                     |  1 +
 src/styles/_clasess.scss                 | 35 +++++++++++-
 src/styles/_controls.scss                |  2 +-
 src/styles/_datatable.scss               | 14 ++++-
 src/styles/_home.scss                    |  2 +-
 src/styles/_navigation.scss              |  4 +-
 src/styles/_page.scss                    |  1 +
 24 files changed, 282 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Loaders/Loader.vue
 create mode 100644 src/components/Loaders/SectionLoader.vue
 create mode 100644 src/components/Loaders/TableLoader.vue
 create mode 100644 src/icons/AppsIcon.vue

diff --git a/src/components/BigField.vue b/src/components/BigField.vue
index a3e5ab33..bd3d14cc 100644
--- a/src/components/BigField.vue
+++ b/src/components/BigField.vue
@@ -64,7 +64,7 @@ export default {
     display flex
 
     .decode
-      align-self flex-end
+      margin-left 10px
 
     textarea
       padding 0
diff --git a/src/components/DataField.vue b/src/components/DataField.vue
index 243ae1b7..2a20af8c 100644
--- a/src/components/DataField.vue
+++ b/src/components/DataField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="data-field" :style="cellStyle(field, value)" :class="fieldClass">
+  <div class="data-field" :class="fieldClass">
     <template v-if="field.renderAs">
       <component :is="field.renderAs" v-bind="renderAsProps({ field, value, filteredValue, row })"></component>
     </template>
@@ -78,7 +78,8 @@ export default {
       return getType(this.filteredValue)
     },
     link () {
-      return this.makeLink(this.field, this.row)
+      const value = this.makeLink(this.field, this.row)
+      return value === this.$route.path ? false : value
     },
     trim () {
       return this.computeTrim(this.field, this.value, this.filteredValue)
diff --git a/src/components/DataPage.vue b/src/components/DataPage.vue
index db90ef9f..92db62a7 100644
--- a/src/components/DataPage.vue
+++ b/src/components/DataPage.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="data-page centered" :class="$route.name">
-    <div class="flex container-title" v-if="!requesting">
+    <div class="flex container-title">
       <icon :class="titleDescription" :name="titleDescription.toLowerCase()"></icon>
       <div class="text-white-100 title capitalize" v-if="titleDescription">{{ titleDescription }}</div>
     </div>
-    <div v-if="(requesting && !error && !delayed.fields) || delayed.registry" class="flex justify-center content-spiner">
-      <spinner :height="300" :width="300" :border="5" />
+    <div v-if="(requesting && !error && !delayed.fields) || delayed.registry" class="content-spiner">
+      <Loader type="table" :fixed="false" />
     </div>
     <error-page v-if="error" :error="error"></error-page>
     <div class="update-error" v-if="updateError">
@@ -75,7 +75,7 @@
           </div>
           <template v-for="(tab, i) in tabs">
             <template v-if="isActiveTab(tab)">
-              <spinner :key="tab.action" v-if="isRequesting()(tab.name)" :height="300" :width="300" :border="5" />
+              <Loader type="table" :key="tab.action" v-if="isRequesting()(tab.name)" :fixed="true" />
               <data-section :key="`${tab.module}-${i}`" class="tab-content" v-else :module="tab.module" :dataType="tab.dataType" :reqKey="tab.name" :action="tab.action" :msgs="tab.msgs"></data-section>
             </template>
           </template>
@@ -92,22 +92,22 @@ import Message from './Message'
 import ItemNavigator from './ItemNavigator'
 import ExportControls from './ExportControls'
 import common from '../mixins/common'
-import Spinner from './Loaders/Spinner.vue'
 import { PAGE_COLORS } from '@/config/pageColors'
 import TitleDetail from './General/TitleDetail.vue'
 import BackContent from './General/BackContent.vue'
+import Loader from './Loaders/Loader.vue'
 
 export default {
   name: 'data-page',
   components: {
-    Spinner,
     DataSection,
     ErrorPage,
     Message,
     ItemNavigator,
     ExportControls,
     TitleDetail,
-    BackContent
+    BackContent,
+    Loader
   },
   mixins: [
     common
diff --git a/src/components/FieldItem.vue b/src/components/FieldItem.vue
index 4dc1c286..55ce74d4 100644
--- a/src/components/FieldItem.vue
+++ b/src/components/FieldItem.vue
@@ -4,7 +4,6 @@
     data-field(
       :field='parsedField'
       :row='data'
-      :style='cellStyle(field,getValue(field,data,true))'
       :delayed='delayed')
 
 </template>
diff --git a/src/components/General/BackContent.vue b/src/components/General/BackContent.vue
index feb25f54..aa73e713 100644
--- a/src/components/General/BackContent.vue
+++ b/src/components/General/BackContent.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="back-content">
-    <router-link :to="routes[$route.name] || ''" class="flex item-center">
+    <router-link :to="routes[$route.name].route || ''" class="flex item-center">
       <icon name="back" :class="$route.name" />
-      <span :style="{color: PAGE_COLORS[$route.name].cl}">{{ `All ${$route.name}s` }}</span>
+      <span :style="{color: PAGE_COLORS[$route.name].cl}">{{ `All ${routes[$route.name].name}` }}</span>
     </router-link>
   </div>
 </template>
@@ -17,12 +17,34 @@ export default {
     return {
       PAGE_COLORS,
       routes: {
-        Block: '/blocks',
-        Transaction: '/txs',
-        Address: '/addresses',
-        'Internal transaction': '/txs',
-        Event: '/txs',
-        Token: '/tokens'
+        Block: {
+          route: '/blocks',
+          name: 'Blocks'
+        },
+        Transaction: {
+          route: '/txs',
+          name: 'Transactions'
+        },
+        Address: {
+          route: '/addresses',
+          name: 'Addresses'
+        },
+        'Internal transaction': {
+          route: '/txs',
+          name: 'Transactions'
+        },
+        Event: {
+          route: '/txs',
+          name: 'Transactions'
+        },
+        Token: {
+          route: '/tokens',
+          name: 'Tokens'
+        },
+        'Account Balance': {
+          route: '/balance',
+          name: 'Balance'
+        }
       }
     }
   }
diff --git a/src/components/General/TitleDetail.vue b/src/components/General/TitleDetail.vue
index ab7a98f1..ff773bd8 100644
--- a/src/components/General/TitleDetail.vue
+++ b/src/components/General/TitleDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="title-detail flex">
     <icon :class="titleDescription" :name="icon"></icon>
-    <div class="text-white-100">
+    <div class="text-white-100 cursor-text">
       <tool-tip :text="value" :hideCopy="true" :trim="data[routerName].hideTrim" />
       <span class="capitalize"> {{ titleDescription }}</span>
     </div>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index bf674710..363c7d5a 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -57,6 +57,3 @@ export default {
 
 }
 </script>
-<style lang="stylus">
-  // @import ('../lib/styl/style.styl')
-</style>
diff --git a/src/components/Loaders/Loader.vue b/src/components/Loaders/Loader.vue
new file mode 100644
index 00000000..756097af
--- /dev/null
+++ b/src/components/Loaders/Loader.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <spinner v-if="type === 'spinner'" />
+    <table-loader v-if="typeLoader === 'table'" />
+    <section-loader v-if="typeLoader === 'section'" />
+  </div>
+</template>
+<script>
+import Spinner from './Spinner.vue'
+import TableLoader from './TableLoader.vue'
+import SectionLoader from './SectionLoader.vue'
+export default {
+  components: {
+    Spinner,
+    TableLoader,
+    SectionLoader
+  },
+  props: ['type', 'fixed'],
+  data () {
+    return {
+      typeLoader: ''
+    }
+  },
+  created () {
+    if (this.fixed) {
+      this.typeLoader = this.type
+      return
+    }
+    if (Object.values(this.$route.params).length > 0) {
+      this.typeLoader = 'section'
+    } else {
+      this.typeLoader = 'table'
+    }
+  }
+}
+</script>
diff --git a/src/components/Loaders/SectionLoader.vue b/src/components/Loaders/SectionLoader.vue
new file mode 100644
index 00000000..8fc7fdc6
--- /dev/null
+++ b/src/components/Loaders/SectionLoader.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="section-loader animate-pulse bg-secondary">
+    <svg width="1300" height="470" viewBox="0 0 1300 470" fill="red" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="1" rx="5" ry="5" width="120px" height="10" />
+      <rect x="0" y="41" rx="5" ry="5" width="270px" height="30" />
+      <rect x="0" y="100" rx="5" ry="5" width="100px" height="30" />
+      <rect x="120" y="100" rx="5" ry="5" width="100px" height="30" />
+      <circle cx="18" cy="190" r="18" />
+      <rect x="67" y="175" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="250" r="18" />
+      <rect x="67" y="235" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="310" r="18" />
+      <rect x="67" y="295" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="370" r="18" />
+      <rect x="67" y="355" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="430" r="18" />
+      <rect x="67" y="415" rx="5" ry="5" width="87%" height="30" />
+    </svg>
+    </div>
+</template>
diff --git a/src/components/Loaders/TableLoader.vue b/src/components/Loaders/TableLoader.vue
new file mode 100644
index 00000000..11d9c402
--- /dev/null
+++ b/src/components/Loaders/TableLoader.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="table-loader animate-pulse">
+    <svg width="1400" height="450" viewBox="0 0 1400 450" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="0" rx="4" ry="4" width="100%" height="52" />
+      <rect x="67" y="15" rx="10" ry="10" width="85" height="20" fill="#3A3A3A" />
+      <rect x="188" y="15" rx="10" ry="10" width="169" height="19" fill="#3A3A3A" />
+      <rect x="402" y="15" rx="10" ry="10" width="85" height="19" fill="#3A3A3A" />
+      <rect x="523" y="15" rx="10" ry="10" width="169" height="19" fill="#3A3A3A" />
+      <rect x="731" y="15" rx="10" ry="10" width="85" height="19" fill="#3A3A3A" />
+      <rect x="852" y="15" rx="10" ry="10" width="85" height="19" fill="#3A3A3A" />
+      <rect x="978" y="15" rx="10" ry="10" width="169" height="19" fill="#3A3A3A" />
+      <rect x="1180" y="15" rx="10" ry="10" width="50" height="19" fill="#3A3A3A" />
+
+      <rect x="10" y="72" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="80" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="80" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="80" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="80" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="120" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="152" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="160" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="160" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="160" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="160" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="200" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="232" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="240" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="240" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="240" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="240" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="280" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="312" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="320" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="320" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="320" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="320" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="360" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="392" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="400" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="400" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="400" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="400" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="440" rx="10" ry="10" width="100%" height="1" />
+
+    </svg>
+  </div>
+</template>
diff --git a/src/components/Navigations/Sidebar.vue b/src/components/Navigations/Sidebar.vue
index 75270b6f..1485b67c 100644
--- a/src/components/Navigations/Sidebar.vue
+++ b/src/components/Navigations/Sidebar.vue
@@ -14,23 +14,26 @@
             <img class="home-active" src="@/assets/svg/home-active.svg" alt="home-icon">
             <span>Home</span>
           </router-link>
-          <router-link to="/blocks" class="link-blocks" :class="$route.name === 'Block' ? activeClasses : ''">
+          <router-link to="/blocks" class="link-blocks"
+            :class="PAGE_NAME.BLOCKS.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/block-icon.svg" alt="block-icon">
             <img class="active-icon" src="@/assets/svg/block-active.svg" alt="block-icon">
             <span>Blocks</span>
           </router-link>
           <router-link to="/txs" class="link-txs"
-            :class="$route.name === 'Internal transaction' || $route.name === 'Transaction' || $route.name === 'Event' ? activeClasses : ''">
+            :class="PAGE_NAME.TXS.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/tx-icon.svg" alt="transaction-icon">
             <img class="active-icon" src="@/assets/svg/tx-active.svg" alt="transaction-icon">
             <span>Transactions</span>
           </router-link>
-          <router-link to="/addresses" class="link-address" :class="$route.name === 'Address' ? activeClasses : ''">
+          <router-link to="/addresses" class="link-address"
+            :class="PAGE_NAME.ADDRESSES.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/address-icon.svg" alt="address-icon">
             <img class="active-icon" src="@/assets/svg/address-active.svg" alt="address-icon">
             <span>Addresses</span>
           </router-link>
-          <router-link to="/tokens" class="link-tokens" :class="$route.name === 'Token' || $route.name === 'Token Account' ? activeClasses : ''">
+          <router-link to="/tokens" class="link-tokens"
+            :class="PAGE_NAME.TOKENS.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/token-icon.svg" alt="token-icon">
             <img class="active-icon" src="@/assets/svg/token-active.svg" alt="token-icon">
             <span>Tokens</span>
@@ -51,12 +54,12 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import { DOMAIN_STATS_TESTNET, DOMAIN_STATS_MAINNET } from '../../config/network'
+import { PAGE_NAME } from '@/config/types'
 
 export default {
-  components: {
-  },
   data () {
     return {
+      PAGE_NAME,
       DOMAIN_STATS_MAINNET,
       DOMAIN_STATS_TESTNET,
       activeClasses: 'router-link-exact-active router-link-active'
diff --git a/src/components/Search/CtrlSearch.vue b/src/components/Search/CtrlSearch.vue
index d568fdee..b96b4f9a 100644
--- a/src/components/Search/CtrlSearch.vue
+++ b/src/components/Search/CtrlSearch.vue
@@ -10,7 +10,7 @@
         type="text"
         :value="value"
         @input.prevent="input"
-        @change.prevent="changeInput"
+        @keyup.enter="changeInput"
         @keyup.stop="onKey"
         :placeholder="onFocusValue ? placeholder : null"
         :class="cssClass"
@@ -43,6 +43,7 @@
 import { mapActions } from 'vuex'
 import { clamp } from '../../lib/js/utils'
 import Spinner from '../Loaders/Spinner.vue'
+import { ROUTES } from '../../config/types'
 export default {
   name: 'ctrl-search',
   components: {
@@ -64,7 +65,7 @@ export default {
     if (searchValue) this.value = searchValue
   },
   methods: {
-    ...mapActions(['searchExpand']),
+    ...mapActions(['searchExpand', 'clearSearchedResults']),
     setExpand () {
       if (window.innerWidth > 600) return
       this.expandSearch = !this.expandSearch
@@ -73,6 +74,7 @@ export default {
     clear () {
       this.value = ''
       this.selectResult(0)
+      this.clearSearchedResults()
     },
     input (event, type) {
       this.selectResult(0)
@@ -102,7 +104,6 @@ export default {
     onChange (event) {
       const value = this.value
       this.emit(event, 'change', value)
-      this.clear()
     },
     selectResult (result) {
       this.selectedResult = result
@@ -113,7 +114,6 @@ export default {
       if (link) this.$router.push(link)
       this.selectResult(key++)
       this.emitResult(event, result)
-      this.clear()
     },
     emitResult (event, result) {
       this.emit(event, 'result', result)
@@ -148,6 +148,14 @@ export default {
     isLoading () {
       return !!this.loading
     }
+  },
+  watch: {
+    $route () {
+      if (this.$route.name.toLowerCase() !== ROUTES.search.toLowerCase()) {
+        this.clearSearchedResults()
+        this.value = ''
+      }
+    }
   }
 }
 </script>
diff --git a/src/components/controls/MenuButton.vue b/src/components/controls/MenuButton.vue
index 5af0975b..0c3844f6 100644
--- a/src/components/controls/MenuButton.vue
+++ b/src/components/controls/MenuButton.vue
@@ -19,9 +19,6 @@ export default {
   methods: {
     switchMenu () {
       this.enabled = !this.enabled
-      if (this.enabled) {
-        setTimeout(() => { this.enabled = false }, 3000)
-      }
     },
     hideMenu () {
       this.enabled = false
diff --git a/src/config/pageColors.js b/src/config/pageColors.js
index cc97ea39..cf2cb2f8 100644
--- a/src/config/pageColors.js
+++ b/src/config/pageColors.js
@@ -43,5 +43,8 @@ export const PAGE_COLORS = {
   },
   txPool: {
     cl: '#08FFD0'
+  },
+  'Account Balance': {
+    cl: '#FF71E1'
   }
 }
diff --git a/src/config/types.js b/src/config/types.js
index efe53911..02268398 100644
--- a/src/config/types.js
+++ b/src/config/types.js
@@ -28,6 +28,28 @@ export const ROUTES = {
   apps: 'apps'
 }
 
+export const PAGE_NAME = {
+  TXS: [
+    'Internal transaction',
+    'Transaction',
+    'Event',
+    'Transactions'
+  ],
+  TOKENS: [
+    'Token',
+    'Tokens',
+    'Token Account'
+  ],
+  ADDRESSES: [
+    'Address',
+    'Addresses'
+  ],
+  BLOCKS: [
+    'Block',
+    'Blocks'
+  ]
+}
+
 export const STATUS = {
   SUCCESS: 'SUCCESSFUL',
   FAIL: 'FAILED',
diff --git a/src/icons/AppsIcon.vue b/src/icons/AppsIcon.vue
new file mode 100644
index 00000000..9658152e
--- /dev/null
+++ b/src/icons/AppsIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.2857 12H1.71429C1.25963 12 0.823594 11.8344 0.502103 11.5397C0.180612 11.245 0 10.8453 0 10.4286V2.57143C0 2.15466 0.180612 1.75496 0.502103 1.46026C0.823594 1.16556 1.25963 1 1.71429 1H10.2857C10.7404 1 11.1764 1.16556 11.4979 1.46026C11.8194 1.75496 12 2.15466 12 2.57143V10.4286C12 10.8453 11.8194 11.245 11.4979 11.5397C11.1764 11.8344 10.7404 12 10.2857 12ZM1.71429 2.57143V10.4286H10.2857V2.57143H1.71429Z" />
+    <path d="M17.5 7.5V10.5H14.5V7.5H17.5ZM17.5 6H14.5C14.1022 6 13.7206 6.15804 13.4393 6.43934C13.158 6.72064 13 7.10218 13 7.5V10.5C13 10.8978 13.158 11.2794 13.4393 11.5607C13.7206 11.842 14.1022 12 14.5 12H17.5C17.8978 12 18.2794 11.842 18.5607 11.5607C18.842 11.2794 19 10.8978 19 10.5V7.5C19 7.10218 18.842 6.72064 18.5607 6.43934C18.2794 6.15804 17.8978 6 17.5 6Z" />
+    <path d="M9.5 14.5V17.5H6.5V14.5H9.5ZM9.5 13H6.5C6.10218 13 5.72064 13.158 5.43934 13.4393C5.15804 13.7206 5 14.1022 5 14.5V17.5C5 17.8978 5.15804 18.2794 5.43934 18.5607C5.72064 18.842 6.10218 19 6.5 19H9.5C9.89782 19 10.2794 18.842 10.5607 18.5607C10.842 18.2794 11 17.8978 11 17.5V14.5C11 14.1022 10.842 13.7206 10.5607 13.4393C10.2794 13.158 9.89782 13 9.5 13Z" />
+    <path d="M17.5 14.5V17.5H14.5V14.5H17.5ZM17.5 13H14.5C14.1022 13 13.7206 13.158 13.4393 13.4393C13.158 13.7206 13 14.1022 13 14.5V17.5C13 17.8978 13.158 18.2794 13.4393 18.5607C13.7206 18.842 14.1022 19 14.5 19H17.5C17.8978 19 18.2794 18.842 18.5607 18.5607C18.842 18.2794 19 17.8978 19 17.5V14.5C19 14.1022 18.842 13.7206 18.5607 13.4393C18.2794 13.158 17.8978 13 17.5 13Z" />
+  </svg>
+</template>
diff --git a/src/icons/credit-card.js b/src/icons/credit-card.js
index 697a6fc8..e9150676 100644
--- a/src/icons/credit-card.js
+++ b/src/icons/credit-card.js
@@ -8,5 +8,11 @@ icon.register({
     height: 16,
     viewBox: '0 0 16 16',
     data: '<path d="M9.5625 10.125H7.3125C5.75859 10.125 4.5 11.3836 4.5 12.9375C4.5 13.2469 4.75312 13.5 5.0625 13.5H11.8125C12.1231 13.5 12.375 13.2481 12.375 12.9375C12.375 11.3836 11.1164 10.125 9.5625 10.125ZM8.4375 9C9.68027 9 10.6875 7.99277 10.6875 6.75C10.6875 5.50723 9.68027 4.5 8.4375 4.5C7.19508 4.5 6.1875 5.50723 6.1875 6.75C6.1875 7.99277 7.19648 9 8.4375 9ZM17.4375 11.25H16.875V14.625H17.4375C17.7481 14.625 18 14.3731 18 14.0625V11.8125C18 11.5031 17.7469 11.25 17.4375 11.25ZM17.4375 2.25H16.875V5.625H17.4375C17.7469 5.625 18 5.37187 18 5.0625V2.8125C18 2.50172 17.7469 2.25 17.4375 2.25ZM17.4375 6.75H16.875V10.125H17.4375C17.7469 10.125 18 9.87187 18 9.5625V7.3125C18 7.00313 17.7469 6.75 17.4375 6.75ZM13.5 0H3.375C2.13223 0 1.125 1.00723 1.125 2.25V15.75C1.125 16.9928 2.13223 18 3.375 18H13.5C14.7428 18 15.75 16.9928 15.75 15.75V2.25C15.75 1.00723 14.741 0 13.5 0ZM14.0625 15.75C14.0625 16.0606 13.8106 16.3125 13.5 16.3125H3.375C3.06436 16.3125 2.8125 16.0606 2.8125 15.75V2.25C2.8125 1.93929 3.06436 1.6875 3.375 1.6875H13.5C13.8106 1.6875 14.0625 1.93929 14.0625 2.25V15.75Z" />'
+  },
+  'account balance': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path d="M9.5625 10.125H7.3125C5.75859 10.125 4.5 11.3836 4.5 12.9375C4.5 13.2469 4.75312 13.5 5.0625 13.5H11.8125C12.1231 13.5 12.375 13.2481 12.375 12.9375C12.375 11.3836 11.1164 10.125 9.5625 10.125ZM8.4375 9C9.68027 9 10.6875 7.99277 10.6875 6.75C10.6875 5.50723 9.68027 4.5 8.4375 4.5C7.19508 4.5 6.1875 5.50723 6.1875 6.75C6.1875 7.99277 7.19648 9 8.4375 9ZM17.4375 11.25H16.875V14.625H17.4375C17.7481 14.625 18 14.3731 18 14.0625V11.8125C18 11.5031 17.7469 11.25 17.4375 11.25ZM17.4375 2.25H16.875V5.625H17.4375C17.7469 5.625 18 5.37187 18 5.0625V2.8125C18 2.50172 17.7469 2.25 17.4375 2.25ZM17.4375 6.75H16.875V10.125H17.4375C17.7469 10.125 18 9.87187 18 9.5625V7.3125C18 7.00313 17.7469 6.75 17.4375 6.75ZM13.5 0H3.375C2.13223 0 1.125 1.00723 1.125 2.25V15.75C1.125 16.9928 2.13223 18 3.375 18H13.5C14.7428 18 15.75 16.9928 15.75 15.75V2.25C15.75 1.00723 14.741 0 13.5 0ZM14.0625 15.75C14.0625 16.0606 13.8106 16.3125 13.5 16.3125H3.375C3.06436 16.3125 2.8125 16.0606 2.8125 15.75V2.25C2.8125 1.93929 3.06436 1.6875 3.375 1.6875H13.5C13.8106 1.6875 14.0625 1.93929 14.0625 2.25V15.75Z" />'
   }
 })
diff --git a/src/router/routes.js b/src/router/routes.js
index 5f4d1a46..63a806b9 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -81,6 +81,7 @@ export default [
   },
   {
     path: '/apps',
+    name: 'apps',
     component: AppsView
   }
 ]
diff --git a/src/styles/_clasess.scss b/src/styles/_clasess.scss
index 4773c46e..056f9acb 100644
--- a/src/styles/_clasess.scss
+++ b/src/styles/_clasess.scss
@@ -15,6 +15,9 @@ body {
   background-color: $newbw_900;
   font-family: 'Rootstock Sans Body', sans-serif;
 }
+button {
+  font-family: 'Rootstock Sans Body', sans-serif;
+}
 // background
 .bg-primary {
   background-color: $newbw_900;
@@ -302,6 +305,11 @@ button {
   background-color: $orange_900;
   color: #000;
 }
+.cursor-text {
+  a, button, .trim-value {
+    cursor: text !important;
+  }
+}
 
 .spinner {
   border-color: rgba(170, 170, 170, 0.1);
@@ -338,4 +346,29 @@ button {
 
 svg {
   fill: $white_400;
-}
\ No newline at end of file
+}
+.section-loader {
+  width: 100%;
+  overflow: hidden;
+  padding: 24px;
+  border-radius: 12px;
+  svg {
+    fill: $newbw_700;
+  }
+}
+.table-loader {
+  width: 100%;
+  overflow: hidden;
+  svg {
+    fill: $newbw_800;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5
+  }
+}
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index cd4f2982..a5326da7 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -10,7 +10,7 @@
     }
   }
   .content-spiner {
-    margin-top: 50px;
+    width: 100%;
   }
   .container-title {
     .title {
diff --git a/src/styles/_datatable.scss b/src/styles/_datatable.scss
index 8a6d3738..1a5d93e8 100644
--- a/src/styles/_datatable.scss
+++ b/src/styles/_datatable.scss
@@ -206,6 +206,10 @@
 
 .Transactions, .Transaction {
   .data-table {
+    overflow-x: auto;
+    .flex-table, table {
+      min-width: 1100px;
+    }
     table {
       table-layout: unset;
       td {
@@ -246,7 +250,7 @@
         }
       }
       .from-to-arrow {
-        width: 60px;
+        width: 40px;
       }
       .from-to-arrow {
         text-align: center;
@@ -286,6 +290,14 @@
     table {
       table-layout: unset;
       tr {
+        .field__name {
+          width: 200px;
+          .data-field {
+            justify-content: flex-start;
+            margin-left: 30px;
+            width: 100%;
+          }
+        }
         &:hover {
           .row-icon {
             svg {
diff --git a/src/styles/_home.scss b/src/styles/_home.scss
index 8d4b4427..4a6aeaaf 100644
--- a/src/styles/_home.scss
+++ b/src/styles/_home.scss
@@ -271,7 +271,7 @@
       height: 20px;
       padding: 0 8px;
       font-weight: 700;
-      font-size: 12px;
+      font-size: 13px;
       width: fit-content;
       .text-primary {
         font-weight: 700;
diff --git a/src/styles/_navigation.scss b/src/styles/_navigation.scss
index 6acff9db..231b74b1 100644
--- a/src/styles/_navigation.scss
+++ b/src/styles/_navigation.scss
@@ -203,7 +203,7 @@
         display: block;
         object-fit: contain;
         flex-shrink: 0;
-        max-width: 100%;
+        width: 18px;
         max-height: 100%;
         margin-right: 12px;
       }
@@ -220,7 +220,7 @@
   }
   svg {
     fill: $white_400 !important;
-    margin-right: 14px;
+    margin-right: 17px;
   }
 
   .router-link-active {
diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index d31c968f..320d0922 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -197,6 +197,7 @@
         flex: 5;
         gap: 5px;
         align-items: center;
+        word-break: break-all;
         a {
           color: $white_400;
           &:hover {