From b0c516a4ded3707068629df927dbe02210e53c1a Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Mon, 27 May 2024 18:41:31 +0200
Subject: [PATCH 1/7] fix: allow testing config file

---
 packages/api/src/fetchSvgs.ts     | 2 +-
 packages/api/src/readDataFeeds.ts | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/fetchSvgs.ts b/packages/api/src/fetchSvgs.ts
index 63c037cc..a641aba8 100644
--- a/packages/api/src/fetchSvgs.ts
+++ b/packages/api/src/fetchSvgs.ts
@@ -5,7 +5,7 @@ export const DEFAULT_SVG =
   '<svg class="icon-size" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="17" cy="17" r="17" fill="#C4C4C4"/><path d="M18.066 20.785h-2.988a9.951 9.951 0 0 1 .164-1.816c.11-.516.293-.98.551-1.395a6.466 6.466 0 0 1 1.055-1.23c.367-.328.687-.64.96-.938.274-.297.489-.601.645-.914.156-.32.235-.676.235-1.066 0-.453-.07-.828-.211-1.125a1.428 1.428 0 0 0-.61-.692c-.265-.156-.601-.234-1.008-.234-.336 0-.648.074-.937.223-.29.14-.527.359-.715.656-.18.297-.273.687-.281 1.172h-3.399c.024-1.07.27-1.953.739-2.649a4.252 4.252 0 0 1 1.91-1.558c.797-.344 1.691-.516 2.683-.516 1.094 0 2.032.18 2.813.54.781.35 1.379.87 1.793 1.558.414.68.62 1.508.62 2.484 0 .68-.132 1.285-.398 1.817a6.21 6.21 0 0 1-1.043 1.464c-.43.454-.902.922-1.417 1.407-.446.398-.75.816-.915 1.254-.156.437-.238.957-.246 1.558Zm-3.34 3.621c0-.5.172-.914.516-1.242.344-.336.805-.504 1.383-.504.57 0 1.027.168 1.371.504.352.328.527.742.527 1.242 0 .485-.175.895-.527 1.23-.344.337-.8.505-1.371.505-.578 0-1.04-.168-1.383-.504a1.655 1.655 0 0 1-.515-1.23Z" fill="#fff"/></svg>'
 
 const STATIC_LOGOS_SVG_URL = process.env.TEST_BRANCH
-  ? `https://raw.githubusercontent.com/witnet/data-feeds-explorer//${process.env.TEST_BRANCH}/packages/ui/assets/svg/`
+  ? `https://raw.githubusercontent.com/witnet/data-feeds-explorer/${process.env.TEST_BRANCH}/packages/ui/assets/svg/`
   : 'https://raw.githubusercontent.com/witnet/data-feeds-explorer/main/packages/ui/assets/svg/'
 
 export async function fetchSvgs(
diff --git a/packages/api/src/readDataFeeds.ts b/packages/api/src/readDataFeeds.ts
index 45d85084..2fb5e257 100644
--- a/packages/api/src/readDataFeeds.ts
+++ b/packages/api/src/readDataFeeds.ts
@@ -4,13 +4,16 @@ import fs from 'fs'
 import { RouterDataFeedsConfig, FeedInfo, FeedInfoConfig } from '../types'
 import { normalizeConfig } from './utils'
 
-const CONFIG_URL = `https://raw.github.com/witnet/data-feeds-explorer/main/packages/api/src/dataFeedsRouter.json`
+const CONFIG_URL = process.env.TEST_BRANCH
+? `https://raw.github.com/witnet/data-feeds-explorer/${process.env.TEST_BRANCH}/packages/api/src/dataFeedsRouter.json`
+: `https://raw.github.com/witnet/data-feeds-explorer/main/packages/api/src/dataFeedsRouter.json`
 
 function isRouterDataFeedsConfig(val: any): val is RouterDataFeedsConfig {
   return val?.contracts && val?.chains && val.conditions && val.currencies
 }
 
 export async function fetchDataFeedsRouterConfig(): Promise<RouterDataFeedsConfig | null> {
+  console.log('CONFIG URL', CONFIG_URL)
   return await axios
     .get(CONFIG_URL)
     .then((res) => {

From 81e29862300c8c5fed5e14316c6d81fc19e6eabd Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Mon, 27 May 2024 18:42:09 +0200
Subject: [PATCH 2/7] feat: implement empty state for data feeds

---
 packages/ui/components/DataFeeds.vue          | 28 ++++++++++++++++---
 packages/ui/components/NavBar.vue             | 11 +-------
 packages/ui/components/RequestDataFeedBtn.vue | 11 ++++++++
 packages/ui/locales/en-US.json                |  1 +
 packages/ui/locales/es-ES.json                |  1 +
 5 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 packages/ui/components/RequestDataFeedBtn.vue

diff --git a/packages/ui/components/DataFeeds.vue b/packages/ui/components/DataFeeds.vue
index 1f89017e..558a1d8d 100644
--- a/packages/ui/components/DataFeeds.vue
+++ b/packages/ui/components/DataFeeds.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="feeds-container">
+  <div v-if="noFeedsAvailable" class="empty-state">
+    <i18n-t keypath="empty_feeds" tag="p" scope="global">
+      <span class="bold">{{ network.label }}</span>
+    </i18n-t>
+    <RequestDataFeedBtn />
+  </div>
+  <div v-else-if="loading" class="feeds-container">
     <FeedCard
       v-for="feed in allFeeds"
       :key="feed.name + feed.network + feed.value + feed.color"
@@ -16,6 +22,7 @@
       :color="feed.color"
     />
   </div>
+  <div v-else class="feeds-container">Loading...</div>
 </template>
 
 <script setup lang="ts">
@@ -32,8 +39,10 @@ const props = defineProps({
   },
 })
 const route = useRoute()
+const loading = ref(false)
+const noFeedsAvailable = ref(false)
 const networkFeeds: Ref<any> = ref(null)
-const emit = defineEmits(['empty'])
+const emptyFeeds = computed(() => allFeeds.value.length < 1)
 const allFeeds = computed(() => {
   if (networkFeeds.value?.total) {
     const feeds = networkFeeds.value?.feeds
@@ -77,8 +86,10 @@ const allFeeds = computed(() => {
   }
 })
 watch(networkFeeds, () => {
-  if (allFeeds.value.length < 1) {
-    emit('empty', props.networkIndex)
+  loading.value = true
+  if (emptyFeeds.value) {
+    noFeedsAvailable.value = true
+    // emit('empty', props.networkIndex)
   }
 })
 onMounted(async () => {
@@ -98,6 +109,15 @@ onMounted(async () => {
   justify-content: flex-start;
   align-items: center;
 }
+.empty-state {
+  display: grid;
+  grid-gap: 16px;
+  width: 100%;
+  grid-template-rows: 1fr;
+  justify-content: flex-start;
+  align-items: center;
+  padding-bottom: 16px;
+}
 
 @media screen and (max-width: 1100px) {
   .feeds-container {
diff --git a/packages/ui/components/NavBar.vue b/packages/ui/components/NavBar.vue
index 1539d10b..61952fe1 100644
--- a/packages/ui/components/NavBar.vue
+++ b/packages/ui/components/NavBar.vue
@@ -29,15 +29,7 @@
             <NetworkOptions type="navbar" :options="navBarOptions" />
           </div>
           <div class="tab last-item" @click="closeMenu">
-            <a
-              class="btn-container"
-              :href="urls.requestDataFeed"
-              target="_blank"
-            >
-              <CustomButton class="btn">{{
-                $t('navbar.request_data_feed')
-              }}</CustomButton>
-            </a>
+            <RequestDataFeedBtn class="btn-container" />
           </div>
         </div>
       </transition>
@@ -46,7 +38,6 @@
 </template>
 
 <script setup>
-import { urls } from '../constants'
 import { generateNavOptions } from '../utils/generateNavOptions'
 import { generateSelectOptions } from '../utils/generateSelectOptions'
 const store = useStore()
diff --git a/packages/ui/components/RequestDataFeedBtn.vue b/packages/ui/components/RequestDataFeedBtn.vue
new file mode 100644
index 00000000..85873705
--- /dev/null
+++ b/packages/ui/components/RequestDataFeedBtn.vue
@@ -0,0 +1,11 @@
+<template>
+  <a :href="urls.requestDataFeed" target="_blank">
+    <CustomButton class="btn">{{
+      $t('navbar.request_data_feed')
+    }}</CustomButton>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { urls } from '../constants'
+</script>
diff --git a/packages/ui/locales/en-US.json b/packages/ui/locales/en-US.json
index a9f3d447..3b541026 100644
--- a/packages/ui/locales/en-US.json
+++ b/packages/ui/locales/en-US.json
@@ -102,6 +102,7 @@
       "title": "Users and Partners"
     }
   },
+  "empty_feeds": "There are no active feeds in {0}. Request new price feed!",
   "feeds": "feeds",
   "data_feeds": "Data feeds",
   "networks": "Networks",
diff --git a/packages/ui/locales/es-ES.json b/packages/ui/locales/es-ES.json
index 71995592..3d8ce956 100644
--- a/packages/ui/locales/es-ES.json
+++ b/packages/ui/locales/es-ES.json
@@ -102,6 +102,7 @@
       "title": "Users and Partners"
     }
   },
+  "empty_feeds": "No hay feeds activos en {0}. ¡Solicita un nuevo data feed!",
   "feeds": "feeds",
   "data_feeds": "Data feeds",
   "networks": "Networks",

From e10380ee83a4ae192dcff97fc6e748fd608f5dbf Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Tue, 28 May 2024 10:56:54 +0200
Subject: [PATCH 3/7] feat: implement loading state

---
 packages/ui/assets/styles/main.scss           | 22 +++++++++++
 .../ui/components/AnimatedPlaceholder.vue     | 39 +++++++++++++++++++
 packages/ui/components/DataFeeds.vue          | 11 +++---
 packages/ui/components/FeedSkeleton.vue       | 35 +++++++++++++++++
 packages/ui/components/cards/FeedCard.vue     | 29 ++++++++------
 5 files changed, 120 insertions(+), 16 deletions(-)
 create mode 100644 packages/ui/components/AnimatedPlaceholder.vue
 create mode 100644 packages/ui/components/FeedSkeleton.vue

diff --git a/packages/ui/assets/styles/main.scss b/packages/ui/assets/styles/main.scss
index 003e6aec..e321feeb 100644
--- a/packages/ui/assets/styles/main.scss
+++ b/packages/ui/assets/styles/main.scss
@@ -209,6 +209,17 @@
 
   //breadcrumbs
   --selected-option: #4ab6a1;
+
+  //Placeholder
+  --placeholder-bg-color: #bebebe0d;
+  --placeholder-gradient: linear-gradient(
+    to right,
+    rgba(84, 84, 85, 0) 0%,
+    rgba(84, 84, 85, 0.07) 20%,
+    rgba(84, 84, 85, 0.12) 24%,
+    rgba(84, 84, 85, 0.17) 30%,
+    rgba(84, 84, 85, 0.22) 35%
+  );
 }
 
 .light-mode {
@@ -340,6 +351,17 @@
 
   //breadcrumbs
   --selected-option: #41bea5;
+
+  //Placeholder
+  --placeholder-bg-color: rgba(128, 128, 128, 0.051);
+  --placeholder-gradient: linear-gradient(
+    to right,
+    rgba(128, 128, 128, 0) 0%,
+    rgba(128, 128, 128, 0.001) 20%,
+    rgba(128, 128, 128, 0.005) 24%,
+    rgba(128, 128, 128, 0.008) 30%,
+    rgba(128, 128, 128, 0.03) 35%
+  );
 }
 
 body {
diff --git a/packages/ui/components/AnimatedPlaceholder.vue b/packages/ui/components/AnimatedPlaceholder.vue
new file mode 100644
index 00000000..c4e3cedd
--- /dev/null
+++ b/packages/ui/components/AnimatedPlaceholder.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="placeholder">&nbsp;</div>
+</template>
+<script setup>
+defineProps({
+  height: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: String,
+    required: true,
+  },
+  borderRadius: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+<style scoped lang="scss">
+@keyframes bgAnimate {
+  0% {
+    background-position: 50% 0;
+  }
+  100% {
+    background-position: -150% 0;
+  }
+}
+.placeholder {
+  background-color: var(--placeholder-bg-color);
+  height: v-bind(height);
+  width: v-bind(width);
+  border-radius: v-bind(borderRadius);
+  background-image: var(--placeholder-gradient);
+  background-size: 200% 200%;
+  box-shadow: var(--card-box-shadow);
+  animation: bgAnimate 1.2s linear infinite;
+}
+</style>
diff --git a/packages/ui/components/DataFeeds.vue b/packages/ui/components/DataFeeds.vue
index 558a1d8d..776d14ec 100644
--- a/packages/ui/components/DataFeeds.vue
+++ b/packages/ui/components/DataFeeds.vue
@@ -5,7 +5,7 @@
     </i18n-t>
     <RequestDataFeedBtn />
   </div>
-  <div v-else-if="loading" class="feeds-container">
+  <div v-else-if="!loading" class="feeds-container">
     <FeedCard
       v-for="feed in allFeeds"
       :key="feed.name + feed.network + feed.value + feed.color"
@@ -22,7 +22,9 @@
       :color="feed.color"
     />
   </div>
-  <div v-else class="feeds-container">Loading...</div>
+  <div v-else class="feeds-container">
+    <FeedCard v-for="feed in ['1', '2', '3']" :key="feed" :empty="true" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -39,7 +41,7 @@ const props = defineProps({
   },
 })
 const route = useRoute()
-const loading = ref(false)
+const loading = ref(true)
 const noFeedsAvailable = ref(false)
 const networkFeeds: Ref<any> = ref(null)
 const emptyFeeds = computed(() => allFeeds.value.length < 1)
@@ -86,10 +88,9 @@ const allFeeds = computed(() => {
   }
 })
 watch(networkFeeds, () => {
-  loading.value = true
+  loading.value = false
   if (emptyFeeds.value) {
     noFeedsAvailable.value = true
-    // emit('empty', props.networkIndex)
   }
 })
 onMounted(async () => {
diff --git a/packages/ui/components/FeedSkeleton.vue b/packages/ui/components/FeedSkeleton.vue
new file mode 100644
index 00000000..3472143e
--- /dev/null
+++ b/packages/ui/components/FeedSkeleton.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="card-container">
+    <div class="title">
+      <AnimatedPlaceholder
+        class="img"
+        width="50px"
+        height="50px"
+        border-radius="50%"
+      />
+      <AnimatedPlaceholder
+        class="name title"
+        width="50px"
+        height="16px"
+        border-radius="8%"
+      />
+    </div>
+    <AnimatedPlaceholder
+      class="value"
+      width="100px"
+      height="16px"
+      border-radius="8%"
+    />
+    <AnimatedPlaceholder
+      class="timestamp"
+      width="50px"
+      height="8px"
+      border-radius="8%"
+    />
+  </div>
+</template>
+<style scoped>
+.card-container {
+  background-color: var(--placeholder-bg-color);
+}
+</style>
diff --git a/packages/ui/components/cards/FeedCard.vue b/packages/ui/components/cards/FeedCard.vue
index 01cda9be..ae403f4b 100644
--- a/packages/ui/components/cards/FeedCard.vue
+++ b/packages/ui/components/cards/FeedCard.vue
@@ -1,6 +1,6 @@
 <template>
-  <BaseCard :class="dataFeedStatus.key">
-    <nuxt-link v-if="detailsPath.params.id" :to="localeRoute(detailsPath)">
+  <BaseCard v-if="!empty" :class="dataFeedStatus.key">
+    <nuxt-link :to="localeRoute(detailsPath)">
       <div class="card-container">
         <div class="title">
           <SvgIcon class="img" :svg="svg" />
@@ -23,6 +23,9 @@
       </div>
     </nuxt-link>
   </BaseCard>
+  <div v-else>
+    <FeedSkeleton />
+  </div>
 </template>
 
 <script>
@@ -33,21 +36,25 @@ import { getDataFeedStatus } from '@/utils/getDataFeedStatus'
 export default {
   name: 'FeedCard',
   props: {
+    empty: {
+      type: Boolean,
+      default: false,
+    },
     detailsPath: {
       type: Object,
-      required: true,
+      default: () => {},
     },
     decimals: {
       type: Number,
-      required: true,
+      default: 2,
     },
     name: {
       type: String,
-      required: true,
+      default: 'Name',
     },
     svg: {
       type: String,
-      required: true,
+      default: 'svg',
     },
     value: {
       type: String,
@@ -55,11 +62,11 @@ export default {
     },
     label: {
       type: String,
-      required: true,
+      default: 'label',
     },
     lastResultTimestamp: {
       type: String,
-      required: true,
+      default: 'lastResultTimestamp',
     },
     timeToUpdate: {
       type: Number,
@@ -67,11 +74,11 @@ export default {
     },
     network: {
       type: String,
-      required: true,
+      default: 'Network',
     },
     color: {
       type: String,
-      required: true,
+      default: 'color',
     },
   },
   computed: {
@@ -96,7 +103,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .nuxt-link-exact-active {
   color: var(--value-color);
 }

From 6b805d5ba8169774ccd635246ba860a425cf1308 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Tue, 28 May 2024 11:08:36 +0200
Subject: [PATCH 4/7] fix(style): update empty feeds state btn width

---
 packages/ui/components/DataFeeds.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/components/DataFeeds.vue b/packages/ui/components/DataFeeds.vue
index 776d14ec..1758362e 100644
--- a/packages/ui/components/DataFeeds.vue
+++ b/packages/ui/components/DataFeeds.vue
@@ -115,7 +115,6 @@ onMounted(async () => {
   grid-gap: 16px;
   width: 100%;
   grid-template-rows: 1fr;
-  justify-content: flex-start;
   align-items: center;
   padding-bottom: 16px;
 }

From 37a18aa6af10a0c60181b725a0b9bd962e7065ae Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Wed, 5 Jun 2024 17:17:41 +0200
Subject: [PATCH 5/7] fix(style): run lintfix

---
 packages/api/src/readDataFeeds.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/readDataFeeds.ts b/packages/api/src/readDataFeeds.ts
index 2fb5e257..90788dcb 100644
--- a/packages/api/src/readDataFeeds.ts
+++ b/packages/api/src/readDataFeeds.ts
@@ -5,8 +5,8 @@ import { RouterDataFeedsConfig, FeedInfo, FeedInfoConfig } from '../types'
 import { normalizeConfig } from './utils'
 
 const CONFIG_URL = process.env.TEST_BRANCH
-? `https://raw.github.com/witnet/data-feeds-explorer/${process.env.TEST_BRANCH}/packages/api/src/dataFeedsRouter.json`
-: `https://raw.github.com/witnet/data-feeds-explorer/main/packages/api/src/dataFeedsRouter.json`
+  ? `https://raw.github.com/witnet/data-feeds-explorer/${process.env.TEST_BRANCH}/packages/api/src/dataFeedsRouter.json`
+  : `https://raw.github.com/witnet/data-feeds-explorer/main/packages/api/src/dataFeedsRouter.json`
 
 function isRouterDataFeedsConfig(val: any): val is RouterDataFeedsConfig {
   return val?.contracts && val?.chains && val.conditions && val.currencies

From 842f9ffe9e751f359222fdd2e96eed9772f4caa4 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 6 Jun 2024 10:44:04 +0200
Subject: [PATCH 6/7] fix: update tally form link

---
 packages/ui/components/RequestDataFeedBtn.vue | 2 +-
 packages/ui/constants.ts                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/RequestDataFeedBtn.vue b/packages/ui/components/RequestDataFeedBtn.vue
index 85873705..a6064ffa 100644
--- a/packages/ui/components/RequestDataFeedBtn.vue
+++ b/packages/ui/components/RequestDataFeedBtn.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :href="urls.requestDataFeed" target="_blank">
+  <a :href="urls.requestDataFeed" target="_blank" rel="nofollow">
     <CustomButton class="btn">{{
       $t('navbar.request_data_feed')
     }}</CustomButton>
diff --git a/packages/ui/constants.ts b/packages/ui/constants.ts
index 28c761dc..3c65cd05 100644
--- a/packages/ui/constants.ts
+++ b/packages/ui/constants.ts
@@ -47,7 +47,7 @@ export const urls = {
   randomness: 'https://docs.witnet.io/smart-contracts/witnet-randomness-oracle',
   getPostRequest:
     'https://docs.witnet.io/smart-contracts/apis-and-http-get-post-oracle',
-  requestDataFeed: 'https://tally.so/r/wMZDAn',
+  requestDataFeed: 'https://tally.so/r/mOP09R',
   integrateDirectly:
     'https://docs.witnet.io/smart-contracts/witnet-data-feeds/using-witnet-data-feeds#reading-last-price-and-timestamp-from-a-price-feed-contract-serving-a-specific-pair',
   integrateThroughProxy:

From 1b742ab2a7de8d47531e565bc14568b46bf65a6e Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Fri, 7 Jun 2024 11:22:02 +0200
Subject: [PATCH 7/7] fix: update copies

---
 packages/api/src/readDataFeeds.ts | 2 +-
 packages/ui/locales/en-US.json    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/readDataFeeds.ts b/packages/api/src/readDataFeeds.ts
index 90788dcb..44cc27cc 100644
--- a/packages/api/src/readDataFeeds.ts
+++ b/packages/api/src/readDataFeeds.ts
@@ -13,7 +13,7 @@ function isRouterDataFeedsConfig(val: any): val is RouterDataFeedsConfig {
 }
 
 export async function fetchDataFeedsRouterConfig(): Promise<RouterDataFeedsConfig | null> {
-  console.log('CONFIG URL', CONFIG_URL)
+  console.log('Reading configuration file from:', CONFIG_URL)
   return await axios
     .get(CONFIG_URL)
     .then((res) => {
diff --git a/packages/ui/locales/en-US.json b/packages/ui/locales/en-US.json
index 3b541026..e2a5fcf2 100644
--- a/packages/ui/locales/en-US.json
+++ b/packages/ui/locales/en-US.json
@@ -102,7 +102,7 @@
       "title": "Users and Partners"
     }
   },
-  "empty_feeds": "There are no active feeds in {0}. Request new price feed!",
+  "empty_feeds": "There are no active feeds in {0}. Request a new price feed!",
   "feeds": "feeds",
   "data_feeds": "Data feeds",
   "networks": "Networks",