fix(types): add correct typing

packages/ui/api/index.ts

@@ -4,22 +4,29 @@ import feedQuery from './queries/feed'
 import feedsQuery from './queries/feeds'
 import networksQuery from './queries/networks'
 import feedRequestsQuery from './queries/requests'
+import type { Ecosystem, Feed, FeedRequests, Network } from '~/types'
 
-export const getAllFeedsRequests = async ({ network }: { network: any }) =>
+export const getAllFeedsRequests = async ({ network }: { network: string }) =>
   (await request(useRuntimeConfig().public.apiBase, feedsQuery, {
     network,
   })) as {
-    feeds: any
+    feeds: FeedRequests[]
     total: number
   }
 
-export const getEcosystems = async () =>
-  (await request(useRuntimeConfig().public.apiBase, ecosystemsQuery, {
-    network: 'all',
-  })) as {
-    feeds: any
+export const getEcosystems = async () => {
+  const result: { feeds: any } = await request(
+    useRuntimeConfig().public.apiBase,
+    ecosystemsQuery,
+    {
+      network: 'all',
+    },
+  )
+  return result.feeds as {
+    feeds: Ecosystem[]
     total: number
   }
+}
 
 export const getNetworks = async () =>
   (await request(useRuntimeConfig().public.apiBase, networksQuery)) as {
@@ -36,7 +43,7 @@ export const getFeedInfo = async ({
   (await request(useRuntimeConfig().public.apiBase, feedQuery, {
     timestamp,
     feedFullName,
-  })) as { feed: any }
+  })) as { feed: Feed }
 
 export const getFeedRequests = async ({
   feedFullName,

packages/ui/components/DataFeedDetails.vue

@@ -48,13 +48,15 @@
       :transactions="transactions"
     />
     <PaginationSection
+      v-if="itemsLength && itemsLength > 25"
       :items-length="itemsLength"
       @change-page="handleCurrentChange"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import type { AreaData, Time } from 'lightweight-charts'
 import PaginationSection from './PaginationSection.vue'
 import { getWitnetBlockExplorerLink } from '@/utils/getWitnetBlockExplorerLink'
 import { CHART_RANGE, POLLER_MILLISECONDS } from '@/constants'
@@ -71,7 +73,7 @@ const route = useRoute()
 const asyncFeedsInterval = new AsyncInterval(POLLER_MILLISECONDS)
 const timestamp = ref(getTimestampByRange(CHART_RANGE.w.value))
 const ranges = CHART_RANGE
-const currentRange = ref(null)
+const currentRange: Ref<number | null> = ref(null)
 const currentPage = ref(1)
 const itemsPerPage = ref(25)
 const { locale, t } = useI18n({ useScope: 'global' })
@@ -96,7 +98,7 @@ const normalizedFeed = computed(() => {
       finality: Number(feed.value.finality),
       deviation: feed.value.deviation,
       heartbeat: Number(feed.value.heartbeat),
-      decimals: feed.value.feedFullName.split('_').pop() || 3,
+      decimals: feed.value.feedFullName.split('_').pop() || '3',
       chain: feed.value.chain,
       lastResultValue: feed.value.lastResult,
       lastResultTimestamp: feed.value.lastResultTimestamp || '',
@@ -139,7 +141,7 @@ const lastResultValue = computed(() => {
     const dataFeedLastValue = `${normalizedFeed.value.label}${formatNumber(
       (
         parseFloat(normalizedFeed.value.lastResultValue) /
-        10 ** normalizedFeed.value.decimals
+        10 ** parseInt(normalizedFeed.value.decimals.toString())
       ).toString(),
     )} `
     emit('feed-value', dataFeedLastValue)
@@ -157,7 +159,7 @@ const maxTimeToResolve = computed(() => {
 })
 
 const itemsLength = computed(() => {
-  return feed.value.requests.length
+  return feed.value?.requests.length
 })
 const fetchData = async () => {
   await store.fetchFeedInfo({
@@ -171,19 +173,20 @@ const fetchData = async () => {
   })
 }
 
-const chartData = computed(() => {
+const chartData: Ref<AreaData<Time>[]> = computed(() => {
   if (feed.value && feed.value.requests.length > 0) {
     return feed.value.requests
       .map((request: any) => {
         return {
           time: Number(request.timestamp),
           value:
-            parseFloat(request.result) / 10 ** normalizedFeed.value?.decimals,
-        }
+            parseFloat(request.result) /
+            10 ** parseInt((normalizedFeed.value?.decimals ?? 3).toString()),
+        } as AreaData<Time>
       })
       .sort((t1: any, t2: any) => t1.time - t2.time)
   } else {
-    return [{ time: 0, value: 0 }]
+    return [{ time: 0, value: 0 } as AreaData<Time>]
   }
 })
 const transactions = computed(() => {
@@ -196,7 +199,7 @@ const transactions = computed(() => {
       witnetLink: getWitnetBlockExplorerLink(request.drTxHash),
       drTxHash: request.drTxHash,
       data: {
-        label: feed.value.label,
+        label: feed.value?.label,
         value: request.result,
         decimals: normalizedFeed.value?.decimals,
       },
@@ -242,6 +245,7 @@ watch(
             chain: value.chain,
             key: value.network,
             label: value.networkName,
+            logo: value.logo,
           },
         ],
       })

packages/ui/components/LandingPage.vue

@@ -33,7 +33,6 @@ useServerSeoMeta({
     'Explore the list of decentralized data feeds to connect your smart contracts to real world events, using the Witnet oracle network',
 })
 
-const feeds = computed(() => store.ecosystems)
 const totalFeeds = computed(() => store.totalFeeds)
 const networks = computed(() => store.networks)
 const supportedChains = computed(() => {
@@ -44,7 +43,8 @@ const supportedChains = computed(() => {
       return {
         name: chain,
         count:
-          feeds.value.filter((feed: any) => feed.chain === chain).length || 0,
+          store.ecosystems.filter((feed: any) => feed.chain === chain).length ||
+          0,
         detailsPath: {
           name: 'network',
           params: {
@@ -58,7 +58,7 @@ const supportedChains = computed(() => {
 })
 
 onMounted(async () => {
-  store.updateSelectedNetwork({ network: [] })
+  store.updateSelectedNetwork({ networks: [] })
   await store.fetchEcosystems()
 })
 </script>

packages/ui/components/ThemeSwitch.vue

@@ -5,26 +5,27 @@
 </template>
 
 <script setup lang="ts">
-const colorMode = useColorMode()
-const themes: any = {
-  light: {
+import { type Themes, ThemeKey } from '@/types'
+import { themeFromColorValue, changeColorMode } from '@/utils/colorMode'
+
+const themes: Themes = {
+  [ThemeKey.light]: {
     icon: 'moon',
-    key: 'light',
+    key: ThemeKey.light,
   },
-  dark: {
+  [ThemeKey.dark]: {
     icon: 'sun',
-    key: 'dark',
+    key: ThemeKey.dark,
   },
 }
-const currentTheme: Ref<string> = ref(colorMode.value)
-const icon = computed(() => themes[colorMode.value].icon)
+
+const icon = computed(() => themes[themeFromColorValue.value].icon)
 const toggleMode = () => {
-  if (colorMode.value === themes.dark.key) {
-    colorMode.preference = 'light'
+  if (themeFromColorValue.value === ThemeKey.light) {
+    changeColorMode(ThemeKey.dark)
   } else {
-    colorMode.preference = 'dark'
+    changeColorMode(ThemeKey.light)
   }
-  currentTheme.value = colorMode.preference
 }
 </script>
 

packages/ui/constants.ts

@@ -1,11 +1,11 @@
 import { es, enGB } from 'date-fns/locale'
-import { localeCodes, type LanguageDictionary } from './types'
+import { localeCodes, type LanguageDictionary, type ChartRange } from './types'
 
 export const LANGUAGE_LOCALES: LanguageDictionary = {
   [localeCodes.en]: {
     code: 'en-US',
     iso: 'en-US',
-    name: 'English(US)',
+    name: 'English',
     file: 'en-US.json',
     fnsLocale: enGB,
   },
@@ -83,7 +83,7 @@ export const dataFeedStatus = {
   },
 }
 
-export const CHART_RANGE: { [key: string]: any } = {
+export const CHART_RANGE: { [key: string]: ChartRange } = {
   w: {
     key: 'w',
     value: 24 * 7,

packages/ui/stores/index.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { type DataStore, type Network } from '@/types'
 import {
   getEcosystems,
   getNetworks,
@@ -7,22 +8,6 @@ import {
   getFeedRequests,
 } from '@/api/index'
 
-export type Network = {
-  chain: string
-  key: string
-  label: string
-  logo: string
-}
-
-export interface DataStore {
-  selectedEcosystem: Array<any>
-  networks: Array<Network | undefined>
-  ecosystems: any
-  totalFeeds: any
-  feed: any
-  paginatedFeedRequest: any
-}
-
 export const useStore = defineStore('data', {
   state: () =>
     ({
@@ -36,8 +21,8 @@ export const useStore = defineStore('data', {
   actions: {
     async fetchEcosystems() {
       const result = await getEcosystems()
-      this.ecosystems = result.feeds.feeds
-      this.totalFeeds = result.feeds.total
+      this.ecosystems = result.feeds
+      this.totalFeeds = result.total
     },
     async fetchNetworks() {
       this.networks = (await getNetworks()).networks
@@ -70,7 +55,7 @@ export const useStore = defineStore('data', {
       })
       this.paginatedFeedRequest = result.requests
     },
-    updateSelectedNetwork({ networks }: any) {
+    updateSelectedNetwork({ networks }: { networks: Network[] | [] }) {
       this.selectedEcosystem = networks
     },
     deleteEmptyNetwork({ index }: { index: number }) {

packages/ui/types.ts

@@ -3,6 +3,22 @@ export enum localeCodes {
   es = 'es-ES',
 }
 
+export enum ThemeKey {
+  light = 'light',
+  dark = 'dark',
+}
+
+export interface Themes {
+  [ThemeKey.dark]: {
+    icon: string
+    key: string
+  }
+  [ThemeKey.light]: {
+    icon: string
+    key: string
+  }
+}
+
 export type Locale = {
   code: string
   iso: string
@@ -16,3 +32,61 @@ export interface LanguageDictionary {
   [localeCodes.es]: Locale
 }
 export type CallbackFn = () => Promise<void>
+
+export type ChartRange = {
+  key: string
+  value: number
+}
+
+export type Network = {
+  chain: string
+  key: string
+  label: string
+  logo: string
+}
+
+export type Ecosystem = {
+  feeds: {
+    chain: string
+  }
+  total: number
+}
+
+export type FeedRequests = {
+  feedFullName: string
+  result: string
+  drTxHash: string
+  requestId: string
+  timestamp: string
+}
+
+export type Feed = {
+  feedFullName: string
+  isRouted: boolean
+  name: string
+  address: string
+  contractId: string
+  lastResult: string
+  lastResultTimestamp: string
+  network: string
+  networkName: string
+  chain: string
+  label: string
+  deviation: string
+  proxyAddress: string
+  heartbeat: string
+  finality: string
+  requests: FeedRequests[]
+  blockExplorer: string
+  color: string
+  logo: string
+}
+
+export interface DataStore {
+  selectedEcosystem: Network[] | []
+  networks: Array<Network | undefined>
+  ecosystems: Ecosystem[] | []
+  totalFeeds: number
+  feed: Feed | null
+  paginatedFeedRequest: Request[] | null
+}

packages/ui/utils/colorMode.ts

@@ -0,0 +1,18 @@
+import { ThemeKey } from '@/types'
+
+const colorMode = useColorMode()
+
+export const themeFromColorValue = computed(() => {
+  switch (colorMode.value) {
+    case 'light':
+      return ThemeKey.light
+    case 'dark':
+      return ThemeKey.dark
+    default:
+      return ThemeKey.dark
+  }
+})
+
+export function changeColorMode(theme: ThemeKey) {
+  colorMode.preference = theme
+}