fix(ui): fix DOM error in production

packages/api/src/dataFeedsRouter.json

@@ -48,7 +48,7 @@
               "minSecsBetweenUpdates": 900
             },
             "Price-OLO/USDC-6": {
-              "label": "($)",
+              "label": "$",
               "deviationPercentage": 0.1,
               "maxSecsBetweenUpdates": 86400,
               "minSecsBetweenUpdates": 900

packages/api/test/validateFeedsConfig.spec.ts

@@ -5,7 +5,10 @@ import { normalizeConfig } from '../src/utils/index'
 describe('validateDataFeedsConfig', () => {
   it('check if the structure is correct', async () => {
     const dataFeedsRouterConfig = JSON.parse(
-      fs.readFileSync(path.resolve('./test/web3Middleware/dataFeedsRouter.json'), 'utf-8')
+      fs.readFileSync(
+        path.resolve('./test/web3Middleware/dataFeedsRouter.json'),
+        'utf-8'
+      )
     )
 
     const feeds = normalizeConfig(dataFeedsRouterConfig)

packages/api/test/web3Middleware/dataFeedsRouter.json

@@ -521,4 +521,4 @@
       }
     }
   }
-}
+}

packages/ui/assets/styles/main.scss

@@ -190,7 +190,8 @@
 
   //sidebar
   --tab-gradient: linear-gradient(90deg, #2d2c39d3 95%, #4ab6a02c);
-  --tab-gradient-selected: linear-gradient(90deg, #2d2c39d3 0%, rgba(74, 182, 160, 0.05) 20%, rgba(74, 182, 160, 0.10) 24%, rgba(74, 182, 160, 0.15) 30%, rgba(74, 182, 160, 0.173) 35%);
+  --tab-background: #2D2C39;
+  --tab-gradient-selected: linear-gradient(90deg, #2D2C39 0%, rgba(74, 182, 160, 0.05) 20%, rgba(74, 182, 160, 0.10) 24%, rgba(74, 182, 160, 0.15) 30%, rgba(74, 182, 160, 0.173) 35%);
 
   //breadcrumbs
   --selected-option: #4AB6A1;

packages/ui/components/InfoTooltip.vue

@@ -90,11 +90,14 @@ export default {
 }
 .container {
   display: flex;
+  align-items: center;
 }
 .info {
   display: flex;
   align-items: center;
   font-size: 10px;
+  width: 10px;
+  height: 10px;
   cursor: pointer;
 }
 @media (max-width: 300px) {

packages/ui/components/IntegrationDetails.vue

@@ -141,6 +141,8 @@ export default {
     }
     .icon {
       font-size: 10px;
+      width: 10px;
+      height: 10px;
     }
   }
 }

packages/ui/components/Main.vue

@@ -8,11 +8,11 @@
     />
     <div v-if="selected && selected.length" class="feeds-container">
       <div class="title-container">
-        <p class="title bold">
+        <div class="title bold">
           <SvgIcon class="logo" :name="selected[0].network.toLowerCase()" />{{
             selected[0].network
           }}
-        </p>
+        </div>
         <p class="subtitle light-text bold">
           {{ $t('main.network_subtitle') }}
           <span class="bold text">{{ selected[0].network }}</span>

packages/ui/components/NavBar.vue

@@ -107,9 +107,11 @@ export default {
     },
     closeMenu() {
       this.isMenuVisible = false
+      this.$emit('scroll', this.isMenuVisible)
     },
     toggleMenu() {
       this.isMenuVisible = !this.isMenuVisible
+      this.$emit('scroll', this.isMenuVisible)
     },
     displayDropDown() {
       this.displayBox = !this.displayBox
@@ -184,6 +186,7 @@ export default {
       &.last-item {
         display: flex;
         justify-content: center;
+        padding-bottom: 24px;
       }
       .btn-container {
         width: max-content;

packages/ui/components/ThemeSwitch.vue

@@ -51,6 +51,8 @@ export default {
 .mode-icon {
   color: var(--icon-color);
   font-size: 20px;
+  width: 20px;
+  height: 20px;
 }
 .icon-container {
   cursor: pointer;

packages/ui/components/Transaction.vue

@@ -76,6 +76,8 @@ export default {
   color: var(--witnet-transaction);
   font-family: Roboto Mono, monospace;
   .icon {
+    width: 10px;
+    height: 10px;
     font-size: var(--text-size-small);
   }
 }

packages/ui/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="background">
+  <div class="background" :class="{ 'hide-scroll': hideScroll }">
     <MainSection>
-      <NavBar slot="navbar" />
+      <NavBar slot="navbar" @scroll="handleScroll" />
       <BreadCrumbs slot="breadcrumbs" />
       <Nuxt slot="content" />
       <Footer slot="footer" />
@@ -11,9 +11,19 @@
 
 <script>
 export default {
+  data() {
+    return {
+      hideScroll: false,
+    }
+  },
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
   },
+  methods: {
+    handleScroll(scroll) {
+      this.hideScroll = scroll
+    },
+  },
 }
 </script>
 <style lang="scss">
@@ -30,6 +40,11 @@ html {
   background: var(--bg);
   scroll-behavior: smooth;
 }
+.hide-scroll {
+  height: 100vh;
+  position: absolute;
+  overflow-y: hidden;
+}
 
 html,
 body {

packages/ui/nuxt.config.js

@@ -15,7 +15,6 @@ export default {
     },
     meta: [
       { charset: 'utf-8' },
-      { name: 'theme-color', content: '#0094a8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       {
         hid: 'title',