feat(ui): add routes for each network

packages/api/src/repository/Feed.ts

@@ -32,18 +32,13 @@ export class FeedRepository {
     return this.sortedDataFeeds.find(feed => feed.feedFullName === feedFullName)
   }
 
-  async getPaginatedFeeds (
+  async getFeedsByNetwork (
     // starts in 1
     network: string
   ): Promise<PaginatedFeedsObject> {
-    const filteredFeeds =
-      network === 'all'
-        ? this.sortedDataFeeds
-        : this.dataFeedsByNetwork[network]
-
     return {
-      feeds: filteredFeeds,
-      total: filteredFeeds.length
+      feeds: this.dataFeedsByNetwork[network],
+      total: this.dataFeedsByNetwork[network].length
     }
   }
 

packages/api/src/resolvers.ts

@@ -2,11 +2,13 @@ import { Context, Network } from './types'
 const resolvers = {
   Query: {
     feeds: async (_parent, args, { feedRepository }: Context) => {
-      return await feedRepository.getPaginatedFeeds(args.network)
+      return await feedRepository.getFeedsByNetwork(args.network)
     },
 
     networks: async (_parent, _args) => {
-      return Object.keys(Network).map(key => ({ label: Network[key] }))
+      return Object.keys(Network).map(key => ({
+        label: Network[key]
+      }))
     },
 
     requests: async (_parent, args, { resultRequestRepository }: Context) => {

packages/api/src/types.ts

@@ -52,8 +52,8 @@ export enum Network {
   MetisRinkeby = 'metis-rinkeby',
   PolygonMainnet = 'polygon-mainnet',
   PolygonGoerli = 'polygon-goerli',
-  KCCMainnet = 'kcc-mainnet',
-  KCCTestnet = 'kcc-testnet'
+  KCCMainnet = 'KCC-mainnet',
+  KCCTestnet = 'KCC-testnet'
 }
 
 export type FeedInfoGeneric<ABI> = {

packages/ui/components/DataFeeds.vue

@@ -28,9 +28,7 @@ export default {
       query: feeds,
       variables() {
         return {
-          page: this.currentPage,
-          pageSize: this.itemsPerPage,
-          network: this.network.label,
+          network: this.network.label.toLowerCase(),
         }
       },
       pollInterval: 60000,
@@ -63,8 +61,11 @@ export default {
           .map((feed) => {
             return {
               detailsPath: {
-                name: 'feeds-id',
-                params: { id: feed.feedFullName },
+                name: 'network-id',
+                params: {
+                  network: this.$route.params.network || 'ethereum',
+                  id: feed.feedFullName,
+                },
               },
               decimals: parseInt(feed.feedFullName.split('_').pop()) || 3,
               name: feed.name,
@@ -81,6 +82,7 @@ export default {
               blockExplorer: feed.blockExplorer,
             }
           })
+          .sort((feed1, feed2) => feed1.name.localeCompare(feed2.name))
         return feeds
       } else {
         return []
@@ -110,12 +112,12 @@ export default {
 
 @media screen and (max-width: 1100px) {
   .feeds-container {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 @media screen and (max-width: 900px) {
   .feeds-container {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(2, 1fr);
     padding: 0;
   }
 }

packages/ui/components/FeedCard.vue

@@ -5,6 +5,7 @@
         <SvgIcon class="img" :name="img.name" />
         <p class="name title">{{ name.toUpperCase() }}</p>
         <InfoTooltip
+          v-if="dataFeedStatus.key !== 'operational'"
           :show-icon="false"
           :value="$t(`chart.${dataFeedStatus.key}`)"
         >

packages/ui/components/Main.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="main">
-    <SideBar
+    <NetworkOptions
       v-if="networks && networks.length > 1"
-      :default-option="selected"
-      :options="options"
-      @update-selected="updateSelected"
+      :options="Object.keys(options)"
     />
     <div v-if="selected && selected.length" class="feeds-container">
       <div class="title-container">
@@ -66,15 +64,20 @@ export default {
         return null
       }
     },
-    updateFromMain() {
-      return this.$store.state.updateFromMain
-    },
     selectedNetworks() {
       const result = this.selected.map((option) => {
         return capitalizeFirstLetter(option.label.split('-')[1])
       })
       return result.join(', ').replace(/, ([^,]*)$/, ' and $1')
     },
+    network() {
+      return this.$route.params.network || 'ethereum'
+    },
+  },
+  mounted() {
+    this.$store.commit('updateSelectedNetwork', {
+      network: this.options[this.network],
+    })
   },
   methods: {
     updateOptions(index) {
@@ -83,11 +86,6 @@ export default {
     handleCurrentChange(val) {
       this.currentPage = val
     },
-    updateSelected(selectedOption) {
-      if (this.updateFromMain) {
-        this.$store.commit('updateSelectedNetwork', { network: selectedOption })
-      }
-    },
   },
 }
 </script>

packages/ui/components/NavBar.vue

@@ -26,17 +26,7 @@
             :class="{ visible: isMenuVisible }"
             @click="closeMenu"
           >
-            <div
-              v-for="option in sidebarOptions"
-              :key="optionFromSelected(option)"
-              class="option"
-              :class="{
-                selected: optionFromSelected(option) === selectedOption,
-              }"
-              @click="updateSelected(option)"
-            >
-              {{ capitalizeFirstLetter(optionFromSelected(option)) }}
-            </div>
+            <NetworkOptions type="navbar" :options="Object.keys(options)" />
           </div>
           <li class="tab last-item" @click="closeMenu">
             <a class="btn-container" :href="requestDataFeedUrl" target="_blank">
@@ -75,7 +65,9 @@ export default {
       return this.$store.state.selectedNetwork
     },
     sidebarOptions() {
-      return Object.values(this.options)
+      return Object.values(this.options).map((option) =>
+        this.optionFromSelected(option)
+      )
     },
     options() {
       if (this.networks) {
@@ -97,15 +89,7 @@ export default {
     },
   },
   methods: {
-    optionFromSelected(options) {
-      return (options[0] ? options[0].network : '').toLowerCase()
-    },
     capitalizeFirstLetter,
-    updateSelected(selectedOption) {
-      this.$store.commit('updateSelectedNetwork', { network: selectedOption })
-      this.$store.commit('updateFromNavBar')
-      this.$router.push({ path: '/' })
-    },
     closeMenu() {
       this.isMenuVisible = false
       this.$emit('scroll', this.isMenuVisible)
@@ -208,19 +192,6 @@ export default {
         padding-right: 0;
       }
     }
-    .option {
-      padding: 16px 24px;
-      text-align: center;
-      cursor: pointer;
-      color: var(--light-text);
-      font-weight: bold;
-      &.selected {
-        font-weight: bold;
-        color: var(--btn-primary-color);
-        background: var(--tab-background);
-        background: var(--tab-gradient-selected);
-      }
-    }
   }
 }
 

packages/ui/components/NetworkOptions.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :class="type">
+    <div
+      v-for="option in options"
+      :key="option"
+      class="option"
+      :class="{ selected: isSelected(option) }"
+    >
+      <nuxt-link
+        class="nav-link"
+        :to="
+          localeRoute({
+            name: 'network',
+            params: {
+              network: option,
+            },
+          })
+        "
+      >
+        {{ capitalizeFirstLetter(option) }}
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { capitalizeFirstLetter } from '@/utils/capitalizeFirstLetter'
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'sidebar',
+      validator(value) {
+        return ['navbar', 'sidebar'].includes(value)
+      },
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    selected() {
+      return this.$store.state.selectedNetwork
+    },
+    selectedOption() {
+      return (
+        this.$route.params.network ||
+        this.$store.state.selectedNetwork[0]?.network.toLowerCase()
+      )
+    },
+  },
+  methods: {
+    capitalizeFirstLetter,
+    isSelected(option) {
+      return option.toLowerCase() === this.selectedOption.toLowerCase()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.nav-link {
+  font-size: 14px;
+  padding: 16px 24px;
+  display: block;
+  color: var(--light-text);
+}
+.selected {
+  font-weight: bold;
+  color: var(--btn-primary-color);
+  background: var(--tab-background);
+  background: var(--tab-gradient-selected);
+  .nav-link {
+    color: var(--btn-primary-color);
+  }
+}
+.sidebar {
+  position: relative;
+  text-align: right;
+  color: var(--light-text);
+  .option {
+    font-size: var(--text-size-medium);
+    text-align: center;
+    cursor: pointer;
+    color: var(--light-text);
+    font-weight: bold;
+    &.selected {
+      border-radius: 4px;
+    }
+  }
+}
+.navbar {
+  .option {
+    text-align: center;
+    cursor: pointer;
+    color: var(--light-text);
+    font-weight: bold;
+  }
+}
+@media (max-width: 850px) {
+  .sidebar {
+    display: none;
+  }
+}
+</style>