Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabaldon
gabaldon committed Apr 15, 2024
1 parent ebcaf97 commit 21c9ff8
Show file tree
Hide file tree
Showing 12 changed files with 2,124 additions and 812 deletions.
8 changes: 5 additions & 3 deletions packages/ui/api/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,20 @@ function getApiEndpoint() {
}
}

export const getAllFeedsRequests = async ({ network }: { network: string }) =>
(await request(
export const getAllFeedsRequests = async ({ network }: { network: string }) => {
const result: { feeds: any } = await request(
getApiEndpoint(),
feedsQuery,
{
network,
},
{ accept: 'application/json' },
)) as {
)
return result.feeds as {
feeds: FeedRequests[]
total: number
}
}

export const getEcosystems = async () => {
const result: { feeds: any } = await request(
Expand Down
135 changes: 86 additions & 49 deletions packages/ui/components/DataFeedDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,8 @@ const maxTimeToResolve = computed(() => {
return null
}
})
const feedName = computed(() => normalizedFeed.value?.name ?? '')
const networkName = computed(() => normalizedFeed.value?.networkName ?? '')
const itemsLength = computed(() => {
return feed.value?.requests.length
Expand All @@ -172,6 +174,41 @@ const fetchData = async () => {
page: currentPage.value,
size: itemsPerPage.value,
})
useHead({
title: `${feedName.value} Witnet Data Feed on ${networkName.value}`,
meta: [
{
hid: 'title',
name: 'title',
content: `${feedName.value} Witnet Data Feed on ${networkName.value}`,
},
{
hid: 'description',
name: 'description',
content: `Last result of ${feedName.value} Witnet Data Feed on ${networkName.value} is ${lastResultValue.value} at ${lastResultDate.value}`,
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: `${feedName.value} Witnet Data Feed on ${networkName.value}}`,
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: `Last result of ${feedName.value} Witnet Data Feed on ${networkName.value}} is ${lastResultValue.value} at ${lastResultDate.value}`,
},
{
hid: 'og:title',
property: 'og:title',
content: `${feedName.value} Witnet Data Feed on ${networkName.value}}`,
},
{
hid: 'og:description',
property: 'og:description',
content: `Last result of ${feedName.value} Witnet Data Feed on ${networkName.value}} is ${lastResultValue.value} at ${lastResultDate.value}`,
},
],
})
if (!store.feed) {
router.push('/')
}
Expand Down Expand Up @@ -257,55 +294,55 @@ watch(
},
{ deep: true },
)
useHead({
title: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
meta: [
{
hid: 'title',
name: 'title',
content: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
},
{
hid: 'description',
name: 'description',
content: `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
},
{
hid: 'og:title',
property: 'og:title',
content: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
},
{
hid: 'og:description',
property: 'og:description',
content: `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
},
],
})
useSeoMeta({
ogTitle: () =>
`${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
title: () =>
`${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
description: () =>
`Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
ogDescription: () =>
`Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
twitterTitle: () =>
`${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
twitterDescription: () =>
`Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
})
// useHead({
// title: `${feedName.value} Witnet Data Feed on ${networkName.value}`,
// meta: [
// {
// hid: 'title',
// name: 'title',
// content: `${feedName.value} Witnet Data Feed on ${networkName.value}`,
// },
// {
// hid: 'description',
// name: 'description',
// content: `Last result of ${feedName.value} Witnet Data Feed on ${networkName.value} is ${lastResultValue.value} at ${lastResultDate.value}`,
// },
// {
// hid: 'twitter:title',
// name: 'twitter:title',
// content: `${feedName.value} Witnet Data Feed on ${networkName.value}}`,
// },
// {
// hid: 'twitter:description',
// name: 'twitter:description',
// content: `Last result of ${feedName.value} Witnet Data Feed on ${networkName.value}} is ${lastResultValue.value} at ${lastResultDate.value}`,
// },
// {
// hid: 'og:title',
// property: 'og:title',
// content: `${feedName.value} Witnet Data Feed on ${networkName.value}}`,
// },
// {
// hid: 'og:description',
// property: 'og:description',
// content: `Last result of ${feedName.value} Witnet Data Feed on ${networkName.value}} is ${lastResultValue.value} at ${lastResultDate.value}`,
// },
// ],
// })
// useSeoMeta({
// ogTitle: () =>
// `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
// title: () =>
// `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
// description: () =>
// `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
// ogDescription: () =>
// `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
// twitterTitle: () =>
// `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
// twitterDescription: () =>
// `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
// })
</script>
<style lang="scss" scoped>
Expand Down
88 changes: 42 additions & 46 deletions packages/ui/components/DataFeeds.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="feeds-container">
<div v-if="!pending" class="feeds-container">
<FeedCard
v-for="feed in allFeeds"
:key="feed.name + feed.network + feed.value + feed.color"
Expand Down Expand Up @@ -31,59 +31,55 @@ const props = defineProps({
required: true,
},
})
const fetchFeedByCurrentNetwork = async () => {
return await store.fetchFeeds({
network: props.network.key.toLowerCase(),
})
}
const route = useRoute()
const networkFeeds: Ref<any> = ref(null)
const { data, pending } = await useAsyncData('feeds', fetchFeedByCurrentNetwork)
const emit = defineEmits(['empty'])
const allFeeds = computed(() => {
if (networkFeeds.value?.total) {
const feeds = networkFeeds.value?.feeds
.filter((feed: any) => {
return feed.lastResult && Number(feed.lastResultTimestamp) > 0
})
.map((feed: any) => {
return {
detailsPath: {
name: 'network-id',
params: {
network: route.params.network || 'ethereum',
id: feed.feedFullName,
},
},
decimals: parseInt(feed.feedFullName.split('_').pop()) || 3,
name: feed.name,
value: feed.lastResult,
lastResultTimestamp: feed.lastResultTimestamp || '0',
label: feed.label,
timeToUpdate: feed.heartbeat
? Number(feed.heartbeat) + Number(feed.finality)
: null,
img: {
name: formatSvgName(feed.name),
alt: feed.name,
const feeds = data.value?.feeds
.filter((feed: any) => {
return feed.lastResult && Number(feed.lastResultTimestamp) > 0
})
.map((feed: any) => {
return {
detailsPath: {
name: 'network-id',
params: {
network: route.params.network || 'ethereum',
id: feed.feedFullName,
},
network: feed.network,
chain: feed.chain,
color: feed.color,
blockExplorer: feed.blockExplorer,
svg: feed.logo,
}
})
.sort((feed1: any, feed2: any) => feed1.name.localeCompare(feed2.name))
return feeds
} else {
return []
}
},
decimals: parseInt(feed.feedFullName.split('_').pop()) || 3,
name: feed.name,
value: feed.lastResult,
lastResultTimestamp: feed.lastResultTimestamp || '0',
label: feed.label,
timeToUpdate: feed.heartbeat
? Number(feed.heartbeat) + Number(feed.finality)
: null,
img: {
name: formatSvgName(feed.name),
alt: feed.name,
},
network: feed.network,
chain: feed.chain,
color: feed.color,
blockExplorer: feed.blockExplorer,
svg: feed.logo,
}
})
.sort((feed1: any, feed2: any) => feed1.name.localeCompare(feed2.name))
return feeds
})
watch(networkFeeds, () => {
if (allFeeds.value.length < 1) {
watch(data, () => {
if (allFeeds.value && allFeeds.value.length < 1) {
emit('empty', props.networkIndex)
}
})
onMounted(async () => {
networkFeeds.value = await store.fetchFeeds({
network: props.network.key.toLowerCase(),
})
})
</script>

<style lang="scss" scoped>
Expand Down
89 changes: 3 additions & 86 deletions packages/ui/components/EcosystemNetworkList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ import { generateNavOptions } from '../utils/generateNavOptions'
const store = useStore()
const route = useRoute()
const router = useRouter()
const { data } = await useAsyncData('networks', store.fetchNetworks)
const currentEcosystem = ref(route.params.network.toString())
const currentEcosystemSeoFormat = ref(currentEcosystem.value.toUpperCase())
const selectedEcosystem = computed(() => store.selectedEcosystem)
const ecosystemsList = computed(() => generateSelectOptions(store.networks))
const ecosystemsList = computed(() => generateSelectOptions(data.value))
const navBarOptions = computed(() => {
return generateNavOptions(Object.values(ecosystemsList.value))
})
Expand All @@ -62,10 +62,7 @@ const ecosystemNetworksNames = computed(() => {
last,
}
})
onMounted(async () => {
if (store.networks.length < 1) {
await store.fetchNetworks()
}
onMounted(() => {
const selectedEcosystemNetworks =
ecosystemsList.value[currentEcosystem.value.toLocaleLowerCase()]
if (selectedEcosystemNetworks) {
Expand All @@ -77,86 +74,6 @@ onMounted(async () => {
function updateOptions(index: number) {
store.deleteEmptyNetwork({ index })
}
useHead({
title: `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{
name: 'viewport',
content: 'viewport-fit=cover, width=device-width, initial-scale=1',
},
{
hid: 'title',
name: 'title',
content: `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
},
{
hid: 'description',
name: 'description',
content: `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
},
{
hid: 'twitter:image',
name: 'twitter:image',
content: 'https://feeds.witnet.io/meta-image.png',
},
{
hid: 'twitter:image:alt',
name: 'twitter:image:alt',
content: 'Witnet data feeds explorer',
},
{
hid: 'og:title',
property: 'og:title',
content: `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
},
{
hid: 'og:description',
property: 'og:description',
content: `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
},
{
hid: 'og:image',
property: 'og:image',
content: 'https://feeds.witnet.io/meta-image.png',
},
{
hid: 'og:image:secure_url',
property: 'og:image:secure_url',
content: 'https://feeds.witnet.io/meta-image.png',
},
{
hid: 'og:image:alt',
property: 'og:image:alt',
content: 'Witnet data feeds explorer',
},
],
})
useSeoMeta({
ogTitle: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
title: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
description: () =>
`Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
ogDescription: () =>
`Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
twitterTitle: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
twitterDescription: () =>
`Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
})
</script>

<style lang="scss" scoped>
Expand Down
Loading

0 comments on commit 21c9ff8

Please sign in to comment.