move some logic to a diff file

packages/ui/components/ApolloExample.vue

@@ -3,9 +3,8 @@
 </template>
 
 <script setup>
-import { generateSelectOptions } from '../utils/generateSelectOptions'
 import { gql } from "@apollo/client/core"
-import { useQuery, useResult } from '@vue/apollo-composable'
+import { useQuery } from '@vue/apollo-composable'
 const networksQuery = gql`
   query networks {
     networks {

packages/ui/components/DataFeedDescription.vue

@@ -1,7 +1,8 @@
 <template>
   <i18n-t :keypath="description.i18nPath" tag="p" class="feed-description" scope="global">
     <template v-for="field in description.fields" #[field] :key="field.i18nPath">
-      <span :key="field.i18nPath" class="bold">{{ fieldToProp[field] }}</span>
+      <!-- todo -->
+      <!-- <span :key="field.i18nPath" class="bold">{{ fieldToProp[field] }}</span> -->
     </template>
   </i18n-t>
 </template>

packages/ui/components/DataFeedDetails.vue

@@ -59,14 +59,12 @@
 </template>
 
 <script setup>
-// import feed from '@/apollo/queries/feed.gql'
-// import requests from '@/apollo/queries/requests.gql'
-import { getWitnetBlockExplorerLink } from '@/utils/getWitnetBlockExplorerLink'
+import { useQuery } from '@vue/apollo-composable'
+import { gql } from "@apollo/client/core"
 import { CHART_RANGE } from '@/constants'
 import { formatTimestamp } from '@/utils/formatTimestamp'
-import { formatNumber } from '@/utils/formatNumber'
-import { formatMilliseconds } from '@/utils/formatMilliseconds'
 import { getTimestampByRange } from '@/utils/getTimestampByRange.js'
+import { getAdaptedFeed, getChartData, getLastResultValue, getMaxTimeToResolve, getTransactions } from '../utils/dataFeedDetails'
 
 const vm = getCurrentInstance();
 
@@ -142,39 +140,12 @@ const requests = await useQuery(requestsQuery, requestsVariables)
 // })
 
 const normalizedFeed = computed(() => {
-  if (feed.result.value) {
-    const adaptedFeed = feed.result.value.feed
+  const adaptedFeed = getAdaptedFeed(feed?.result?.value?.feed)
+  if (adaptedFeed) {
     emit('feed-name', adaptedFeed.name.toUpperCase())
     emit('network', adaptedFeed.networkName)
-    return {
-      name: adaptedFeed.name.toUpperCase(),
-      isRouted: adaptedFeed.isRouted,
-      address: adaptedFeed.address,
-      proxyAddress: adaptedFeed.proxyAddress,
-      contractId: adaptedFeed.contractId,
-      finality: Number(adaptedFeed.finality),
-      deviation: adaptedFeed.deviation,
-      heartbeat: Number(adaptedFeed.heartbeat),
-      decimals: adaptedFeed.feedFullName.split('_').pop() || 3,
-      chain: adaptedFeed.chain,
-      lastResultValue: adaptedFeed.lastResult,
-      lastResultTimestamp: adaptedFeed.lastResultTimestamp || '',
-      networkName: adaptedFeed.networkName,
-      label: adaptedFeed.label,
-      network: adaptedFeed.network,
-      urlUnderlyingContract: adaptedFeed.blockExplorer.replace(
-        `{address}`,
-        adaptedFeed.address
-      ),
-      urlProxyContract: adaptedFeed.blockExplorer.replace(
-        `{address}`,
-        adaptedFeed.proxyAddress
-      ),
-      logo: adaptedFeed.logo,
-    }
-  } else {
-    return null
   }
+  return adaptedFeed
 })
 
 const lastResultDate = computed(() => {
@@ -200,59 +171,28 @@ const feedTimeToUpdate = computed(() => {
   return null
 })
 const lastResultValue = computed(() => {
-  if (normalizedFeed.value) {
-    const dataFeedLastValue = `${normalizedFeed.value.label}${formatNumber(
-      parseFloat(normalizedFeed.value.lastResultValue) /
-        10 ** normalizedFeed.value.decimals
-    )} `
+  return getLastResultValue(normalizedFeed.value)
+})
+
+watch(lastResultValue.value, (value) => {
+  if (value) {
     emit('feed-value', dataFeedLastValue)
-    return dataFeedLastValue
-  } else {
-    return null
   }
 })
+
 const maxTimeToResolve = computed(() => {
-  if (normalizedFeed.value && normalizedFeed.value.heartbeat) {
-    return normalizedFeed.value.heartbeat + normalizedFeed.value.finality
-  } else {
-    return null
-  }
-})
-const numberOfPages = computed(() => {
-  return feed.result.value
-    ? Math.ceil(feed.result.value.feed.requests.length / itemsPerPage.value)
-    : 0
+  return getMaxTimeToResolve(normalizedFeed.value)
 })
+// const numberOfPages = computed(() => {
+//   return feed.result.value
+//     ? Math.ceil(feed.result.value.feed.requests.length / itemsPerPage.value)
+//     : 0
+// })
 const chartData = computed(() => {
-  if (feed.result.value.feed && feed.result.value.feed.requests.length > 0) {
-    return feed.result.value.feed.requests
-      .map((request) => {
-        return {
-          time: Number(request.timestamp),
-          value:
-            parseFloat(request.result) / 10 ** normalizedFeed.value.decimals,
-        }
-      })
-      .sort((t1, t2) => t1.time - t2.time)
-  } else {
-    return [{ time: 0, value: 0 }]
-  }
+  return getChartData(feed?.result?.value?.feed?.requests, normalizedFeed.value)
 })
 const transactions = computed(() => {
-  if (feed.result.value && requests.data.value && requests.data.value.requests.length > 0) {
-    return requests.data.value.requests.map((request) => ({
-      witnetLink: getWitnetBlockExplorerLink(request.drTxHash),
-      drTxHash: request.drTxHash,
-      data: {
-        label: feed.result.value.feed.label,
-        value: request.result,
-        decimals: normalizedFeed.value.decimals,
-      },
-      timestamp: request.timestamp,
-    }))
-  } else {
-    return null
-  }
+  return getTransactions(normalizedFeed.value, requests?.result.value?.requests)
 })
 
 watch(

packages/ui/components/LandingPage.vue

@@ -36,15 +36,15 @@ const { result: networksQueryResult } = await useQuery(networksQuery)
 
 const variables = { network: 'all'}
 
-      const feedsQuery = gql`
-        query homePageData {
-          feeds (network: "all") {
-            feeds {
-              chain
-            }
-            total
-          }
-        }`
+const feedsQuery = gql`
+  query homePageData {
+    feeds (network: "all") {
+      feeds {
+        chain
+      }
+      total
+    }
+  }`
 const { result } = await useQuery(feedsQuery, variables)
 
 const total = computed(() => {
@@ -55,7 +55,7 @@ const networks = computed(() => {
   return networksQueryResult.value?.networks
 })
 const networksLength = computed(() => {
-  return networks.value ? networks.length : 0
+  return networks.value ? networks.value.length : 0
 })
 
 const feeds = computed(() => {

packages/ui/components/Main.vue

@@ -42,7 +42,6 @@ import { useQuery, useResult } from '@vue/apollo-composable'
 import { generateSelectOptions } from '../utils/generateSelectOptions'
 import { generateNavOptions } from '../utils/generateNavOptions'
 import { gql } from "@apollo/client/core"
-console.log(1)
 const store = useNetwork()
 
 const emit = defineEmits(['set-network'])
@@ -56,21 +55,19 @@ const networksQuery = gql`
       logo
     }
   }`
-    
 const { result } = await useQuery(networksQuery)
 
 const networks = computed(() => {
-  console.log('result///-', result.value)
   return result.value?.networks
 })
 
 const route = useRoute()
-const currentPage = ref(1)
 const currentNetwork = ref(route.params.network.toUpperCase())
 
 const selected = computed(() => {
   return store.selectedNetwork
 })
+
 const options = computed(() => {  
   if (networks.value) {
     const options = generateSelectOptions(unref(networks))
@@ -107,15 +104,15 @@ watch(() => options.value, (newOptions) => {
   }
   const networks = newOptions?.[network.value]
   store.updateSelectedNetwork(networks)
-})
+}, { immediate: true })
 
 function updateOptions(index) {
   store.deleteEmptyNetwork({ index })
 }
 
-function handleCurrentChange(val) {
-  currentPage.value = val
-}
+// function handleCurrentChange(val) {
+//   currentPage.value = val
+// }
 
 function setCurrentNetwork(options) {
   currentNetwork.value = options[route.params.network][0].chain

packages/ui/utils/dataFeedDetails.js

@@ -0,0 +1,89 @@
+
+import { formatNumber } from './formatNumber'
+import { getWitnetBlockExplorerLink } from "./getWitnetBlockExplorerLink"
+
+export function getAdaptedFeed(feed) {
+  if (!feed) {
+    return null
+  }
+
+  return {
+    name: feed.name.toUpperCase(),
+    isRouted: feed.isRouted,
+    address: feed.address,
+    proxyAddress: feed.proxyAddress,
+    contractId: feed.contractId,
+    finality: Number(feed.finality),
+    deviation: feed.deviation,
+    heartbeat: Number(feed.heartbeat),
+    decimals: feed.feedFullName.split('_').pop() || 3,
+    chain: feed.chain,
+    lastResultValue: feed.lastResult,
+    lastResultTimestamp: feed.lastResultTimestamp || '',
+    networkName: feed.networkName,
+    label: feed.label,
+    network: feed.network,
+    urlUnderlyingContract: feed.blockExplorer.replace(
+      `{address}`,
+      feed.address
+    ),
+    urlProxyContract: feed.blockExplorer.replace(
+      `{address}`,
+      feed.proxyAddress
+    ),
+    logo: feed.logo,
+  }
+}
+
+export function getTransactions(feed, requests) {
+  if (!feed || !requests?.length) {
+    return null
+  }
+
+  return requests.map((request) => ({
+    witnetLink: getWitnetBlockExplorerLink(request.drTxHash),
+    drTxHash: request.drTxHash,
+    data: {
+      label: feed.label,
+      value: request.result,
+      decimals: feed.decimals,
+    },
+    timestamp: request.timestamp,
+  }))
+
+}
+
+export function getLastResultValue(feed) {
+  if (!feed) {
+    return null
+  }
+  const dataFeedLastValue = `${feed.label}${formatNumber(
+    parseFloat(feed.lastResultValue) /
+      10 ** feed.decimals
+  )} `
+  return dataFeedLastValue
+}
+
+export function getMaxTimeToResolve(feed) {
+  if (!feed || !feed.heartbeat) {
+    return null
+  }
+
+  return feed.heartbeat + feed.finality
+}
+
+export function getChartData (requests, normalizedFeed) {
+  if (!requests?.length) {
+    return [{ time: 0, value: 0 }]
+  }
+
+  return requests
+    .map((request) => {
+      return {
+        time: Number(request.timestamp),
+        value:
+          parseFloat(request.result) / 10 ** normalizedFeed.decimals,
+      }
+    })
+    .sort((t1, t2) => t1.time - t2.time)
+}

packages/ui/utils/supportedChains.js

@@ -10,7 +10,6 @@ export function getSupportedChains(networks, feeds) {
     .filter((network) => network && network[0])
     .map((network) => {
       const { chain, logo } = network[0]
-      console.log("logo", network[0])
       return {
         name: chain,
         count: