Update config file and fix navbar

packages/api/src/dataFeedsRouter.json

@@ -47,12 +47,18 @@
               "maxSecsBetweenUpdates": 86400,
               "minSecsBetweenUpdates": 900
             },
-            "Price-OLO/USDC-6": {
+            "Price-DAI/USD-6": {
               "label": "$",
               "deviationPercentage": 0.1,
               "maxSecsBetweenUpdates": 86400,
               "minSecsBetweenUpdates": 900
             },
+            "Price-OLO/USDC-6": {
+              "label": "$",
+              "deviationPercentage": 1.0,
+              "maxSecsBetweenUpdates": 86400,
+              "minSecsBetweenUpdates": 900
+            },
             "Price-BTC/USD-6": {
               "label": "$",
               "deviationPercentage": 1.0,
@@ -128,6 +134,18 @@
               "maxSecsBetweenUpdates": 86400,
               "minSecsBetweenUpdates": 3600
             },
+            "Price-DAI/USD-6": {
+              "label": "$",
+              "deviationPercentage": 0.1,
+              "maxSecsBetweenUpdates": 86400,
+              "minSecsBetweenUpdates": 900
+            },
+            "Price-OLO/USDC-6": {
+              "label": "$",
+              "deviationPercentage": 1.0,
+              "maxSecsBetweenUpdates": 86400,
+              "minSecsBetweenUpdates": 900
+            },
             "Price-ETH/USD-6": {
               "label": "$",
               "deviationPercentage": 1.0,

packages/api/src/repository/ResultRequest.ts

@@ -13,7 +13,15 @@ export class ResultRequestRepository {
 
   constructor (db: Db, _dataFeeds: Array<FeedInfo>) {
     this.collection = db.collection('result_request')
-    this.collection.createIndex({ feedFullName: 1, timestamp: -1 })
+    this.collection.createIndex(
+      { feedFullName: 1, timestamp: -1 },
+      {
+        collation: {
+          locale: 'en_US',
+          numericOrdering: true
+        }
+      }
+    )
   }
 
   async getFeedRequests (
@@ -69,6 +77,10 @@ export class ResultRequestRepository {
         sort: {
           timestamp: -1
         },
+        collation: {
+          locale: 'en_US',
+          numericOrdering: true
+        }
       }
     )
     return this.normalizeId(lastResultRequest)

packages/api/src/utils/index.ts

@@ -101,7 +101,15 @@ export function normalizeConfig (
 }
 
 export function isZeroAddress (address: string) {
-  return address === '0x0000000000000000000000000000000000000000'
+  return address === '0x0000000000000000000000000000000000000000' || !address
+}
+
+export function isZeroHash (hash: string) {
+  return (
+    hash ===
+      '0x0000000000000000000000000000000000000000000000000000000000000000' ||
+    !hash
+  )
 }
 
 export function sleep (ms) {

packages/api/src/web3Middleware/index.ts

@@ -205,19 +205,19 @@ export class Web3Middleware {
         lastDrTxHash,
         requestId
       }: ContractsState = await this.readContractsState(contracts)
-      const decodedDrTxHash = toHex(lastDrTxHash).slice(2)
-      const lastStoredResult = this.lastStoredResult[feedFullName]
-      const isAlreadyStored = lastStoredResult?.timestamp === lastTimestamp
-      const isDrSolved =
-        decodedDrTxHash &&
-        decodedDrTxHash !==
-          '0000000000000000000000000000000000000000000000000000000000000000'
-      if (!isAlreadyStored && isDrSolved) {
+      const decodedDrTxHash = toHex(lastDrTxHash)
+      const lastStoredResult =
+        this.lastStoredResult[feedFullName] ||
+        (await this.repositories.resultRequestRepository.getLastResult(
+          feedFullName
+        ))
+      const timestampChanged = lastStoredResult?.timestamp !== lastTimestamp
+      if (timestampChanged) {
         const result = await this.repositories.resultRequestRepository.insert({
           result: lastPrice,
           timestamp: lastTimestamp,
           requestId: requestId,
-          drTxHash: decodedDrTxHash,
+          drTxHash: decodedDrTxHash.slice(2),
           feedFullName
         })
         this.lastStoredResult[feedFullName] = result

packages/ui/assets/styles/main.scss

@@ -191,7 +191,7 @@
   //sidebar
   --tab-gradient: linear-gradient(90deg, #2d2c39d3 95%, #4ab6a02c);
   --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%);
+  --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.20) 35%);
 
   //breadcrumbs
   --selected-option: #4AB6A1;

packages/ui/components/Main.vue

@@ -66,6 +66,9 @@ export default {
         return null
       }
     },
+    updateFromMain() {
+      return this.$store.state.updateFromMain
+    },
     selectedNetworks() {
       const result = this.selected.map((option) => {
         return capitalizeFirstLetter(option.label.split('-')[1])
@@ -81,7 +84,9 @@ export default {
       this.currentPage = val
     },
     updateSelected(selectedOption) {
-      this.$store.commit('updateSelectedNetwork', { network: selectedOption })
+      if (this.updateFromMain) {
+        this.$store.commit('updateSelectedNetwork', { network: selectedOption })
+      }
     },
   },
 }

packages/ui/components/MainSection.vue

@@ -3,6 +3,7 @@
     <div class="main-section">
       <slot name="navbar"></slot>
       <slot name="breadcrumbs"></slot>
+      <slot name="cover"></slot>
       <slot name="content"></slot>
       <ThemeSwitch class="theme-switch" />
     </div>

packages/ui/components/NavBar.vue

@@ -103,7 +103,8 @@ export default {
     capitalizeFirstLetter,
     updateSelected(selectedOption) {
       this.$store.commit('updateSelectedNetwork', { network: selectedOption })
-      this.$router.push('/')
+      this.$store.commit('updateFromNavBar')
+      this.$router.push({ path: '/' })
     },
     closeMenu() {
       this.isMenuVisible = false
@@ -243,10 +244,9 @@ export default {
   .drop {
     position: fixed;
     top: 0;
-    overflow: hidden;
-    overflow-y: auto;
     height: 100%;
     z-index: 15;
+    overflow-y: auto;
   }
 
   .navbar {

packages/ui/components/chart/ChartMovingTooltip.vue

@@ -39,7 +39,7 @@ export default {
   padding: 8px 16px;
   border-radius: 4px;
   color: var(--text);
-  z-index: 1000;
+  z-index: 13;
   .value {
     font-size: var(--text-size);
   }

packages/ui/layouts/default.vue

@@ -2,6 +2,7 @@
   <div class="background" :class="{ 'hide-scroll': hideScroll }">
     <MainSection>
       <NavBar slot="navbar" @scroll="handleScroll" />
+      <div slot="cover" class="cover" :class="{ show: hideScroll }"></div>
       <BreadCrumbs slot="breadcrumbs" />
       <Nuxt slot="content" />
       <Footer slot="footer" />
@@ -44,12 +45,29 @@ html {
   height: 100vh;
   position: absolute;
   overflow-y: hidden;
+  background: var(--bg);
+}
+
+.cover {
+  display: none;
+  &.show {
+    display: block;
+    min-height: 100%;
+    min-width: 100vw;
+    position: absolute;
+    background: var(--bg);
+    z-index: 14;
+  }
 }
 
 html,
 body {
   margin: 0;
   padding: 0;
+  padding-top: env(safe-area-inset-top, 1em);
+  padding-right: env(safe-area-inset-right, 1em);
+  padding-bottom: env(safe-area-inset-bottom, 1em);
+  padding-left: env(safe-area-inset-left, 1em);
 }
 .nuxt-link-exact-active {
   color: var(--text);

packages/ui/nuxt.config.js

@@ -15,7 +15,10 @@ export default {
     },
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      {
+        name: 'viewport',
+        content: 'viewport-fit=cover, width=device-width, initial-scale=1',
+      },
       {
         hid: 'title',
         name: 'title',
@@ -25,7 +28,7 @@ export default {
         hid: 'description',
         name: 'description',
         content:
-          'Explore the list of decentralized data feeds to connect your smart contracts to real world events, usingthe Witet oracle network',
+          'Explore the list of decentralized data feeds to connect your smart contracts to real world events, usingthe Witnet oracle network',
       },
       {
         hid: 'twitter:title',
@@ -36,12 +39,12 @@ export default {
         hid: 'twitter:description',
         name: 'twitter:description',
         content:
-          'Explore the list of decentralized data feeds to connect your smart contracts to real world events, usingthe Witet oracle network',
+          'Explore the list of decentralized data feeds to connect your smart contracts to real world events, usingthe Witnet oracle network',
       },
       {
         hid: 'twitter:image',
         name: 'twitter:image',
-        content: 'images/witnet_green.png',
+        content: '~/assets/images/meta-image.png',
       },
       {
         hid: 'twitter:image:alt',
@@ -57,17 +60,17 @@ export default {
         hid: 'og:description',
         property: 'og:description',
         content:
-          'Explore the list of decentralized data feeds to connect your smart contracts to real world events, usingthe Witet oracle network',
+          'Explore the list of decentralized data feeds to connect your smart contracts to real world events, usingthe Witnet oracle network',
       },
       {
         hid: 'og:image',
         property: 'og:image',
-        content: 'images/witnet_green.png',
+        content: '~/assets/images/meta-image.png',
       },
       {
         hid: 'og:image:secure_url',
         property: 'og:image:secure_url',
-        content: 'images/witnet_green.png',
+        content: '~/assets/images/meta-image.png',
       },
       {
         hid: 'og:image:alt',
@@ -76,7 +79,29 @@ export default {
       },
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'apple-touch-icon', type: 'image/x-icon', href: '/favicon.ico' },
+      {
+        rel: 'icon',
+        sizes: '180x180',
+        href: '/apple-touch-icon.png',
+        type: 'image/png',
+      },
+      {
+        rel: 'icon',
+        sizes: '32x32',
+        href: '/favicon-32x32.png',
+        type: 'image/png',
+      },
+      {
+        rel: 'icon',
+        sizes: '16x16',
+        href: '/favicon-16x16.png',
+        type: 'image/png',
+      },
+      { rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' },
+      { rel: 'manifest', href: '/site.webmanifest' },
+      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '2D2C39' },
+      { rel: 'msapplication-TileColor', content: '2D2C39' },
       { rel: 'shortcut icon', href: '/favicon.ico' },
       {
         rel: 'stylesheet',
@@ -124,7 +149,7 @@ export default {
     dirs: [
       '~/components',
       { path: '~/components/chart', extensions: ['vue'] },
-      { path: '~/components/breadcrumbs', extensions: ['vue'] },
+      { path: '~/components/breadcrumbs', extensions: ['vue', 'js'] },
     ],
   },
 

packages/ui/store/index.js

@@ -6,12 +6,17 @@ export const state = () => ({
       network: 'Ethereum',
     },
   ],
+  updateFromMain: true,
 })
 
 export const mutations = {
   updateSelectedNetwork(state, { network }) {
     state.selectedNetwork = network
   },
+  // TODO: refactor with cleaner approach
+  updateFromNavBar(state) {
+    state.updateFromMain = false
+  },
   deleteEmptyNetwork(state, { index }) {
     state.selectedNetwork.splice(index, 1)
   },