Update relay metadata in useUserStore.ts and DataTableMyRelays.vue

components/DataTableMyRelays.vue

@@ -52,48 +52,6 @@ const fingerprints = computed(() => {
   return allRelays.value.map((relay) => relay.fingerprint);
 });
 
-console.log('STAGE LOG: fingerprints', fingerprints);
-console.log('STAGE LOG: metricsStore', metricsStore);
-
-const relayMeta = computed(() => {
-  if (!userStore.userData) {
-    return null;
-  }
-  if (!allRelays.value) {
-    return null;
-  }
-  if (!metricsStore.relays.latest) {
-    return null;
-  }
-
-  return fingerprints.value.reduce(
-    // @ts-ignore
-    (acc, fp) => {
-      const myMetrics = metricsStore.relays.latest!.find(
-        ({ relay }) => fp === relay.fingerprint
-      );
-      const relay = myMetrics ? myMetrics.relay : null;
-
-      // @ts-ignore
-      acc[fp] = relay
-        ? {
-            ...relay,
-            consensus_weight: BigNumber(relay.consensus_weight).toFormat(),
-            observed_bandwidth:
-              BigNumber(relay.observed_bandwidth)
-                .dividedBy(Math.pow(1024, 2))
-                .toFormat(3) + ' MiB/s',
-          }
-        : { fingerprint: fp };
-
-      return acc;
-    },
-    {} as Record<string, RelayMeta>
-  );
-});
-
-console.log('STAGE LOG: relayMeta', relayMeta);
-
 const relayAction = async (action: FunctionName, fingerprint: string) => {
   //TODO: Sign the message
   // See: The following resources
@@ -171,6 +129,14 @@ const getVerifiedItems = (row: RelayRow) => [
 const handleTabChange = (key: string) => {
   currentTab.value = key;
 };
+
+const getObservedBandwidth = (fingerprint: string) => {
+  return (
+    BigNumber(userStore?.relaysMeta?.[fingerprint]?.observed_bandwidth)
+      .dividedBy(Math.pow(1024, 2))
+      .toFormat(3) + ' MiB/s'
+  );
+};
 </script>
 
 <template>
@@ -221,15 +187,13 @@ const handleTabChange = (key: string) => {
         </div>
       </template>
       <template #nickname-data="{ row }">
-        {{ relayMeta?.[row.fingerprint]?.nickname || '-' }}
+        {{ userStore?.relaysMeta?.[row.fingerprint]?.nickname || '-' }}
       </template>
 
       <template #active-data="{ row }">
-        <USkeleton v-if="metricsStore.relayMetricsPending" class="h-6 w-full" />
         <div
-          v-else
           :class="
-            relayMeta?.[row.fingerprint]?.running
+            userStore?.relaysMeta?.[row.fingerprint]?.running
               ? 'status-active'
               : 'status-inactive'
           "
@@ -253,13 +217,13 @@ const handleTabChange = (key: string) => {
       </template>
 
       <template #consensusWeight-data="{ row }">
-        <USkeleton v-if="metricsStore.relayMetricsPending" class="h-6 w-full" />
         <span
-          v-else-if="
-            relayMeta?.[row.fingerprint]?.consensus_weight !== undefined
+          v-if="
+            userStore?.relaysMeta?.[row.fingerprint]?.consensus_weight !==
+            undefined
           "
         >
-          {{ relayMeta?.[row.fingerprint]?.consensus_weight }}
+          {{ userStore?.relaysMeta?.[row.fingerprint]?.consensus_weight }}
         </span>
         <span v-else class="text-sm flex items-center gap-2">
           <Icon
@@ -270,14 +234,13 @@ const handleTabChange = (key: string) => {
         </span>
       </template>
       <template #observedBandwidth-data="{ row }">
-        <USkeleton v-if="metricsStore.relayMetricsPending" class="h-6 w-full" />
-
         <span
-          v-else-if="
-            relayMeta?.[row.fingerprint]?.observed_bandwidth !== undefined
+          v-if="
+            userStore?.relaysMeta?.[row.fingerprint]?.observed_bandwidth !==
+            undefined
           "
         >
-          {{ relayMeta?.[row.fingerprint]?.observed_bandwidth }}
+          {{ getObservedBandwidth(row.fingerprint) }}
         </span>
         <span v-else class="text-sm flex items-center gap-2">
           <Icon

nuxt.config.ts

@@ -47,11 +47,11 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       walletConnectProjectId: 'f5e29d36441ccd0e2f5e3473d5a2021b',
-      relayRegistryAddress: 'cQ5drDr3Na6m-_QthV4qbBY2wT7oEn8B3qCDg1owzxI',
-      facilitatorContract: '0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9',
-      sepoliaAtorTokenContract: '0x5D690a4C67925b5f73d405e59dda1425e1560fDf',
-      distributionContract: 'zOkPxTrRYVQ7IplTnEyTgt9iBDarhhWJjibm8UXI6Q0',
-      metricsDeployer: 'guDw5nBzO2zTpuYMnxkSpQ2qCQjL8gxB34GjPpZ2qpY',
+      relayRegistryAddress: 'wcbR5hkhk1boUq0V5OLf38cM0qVs45m6kK4B6Ejfdf4',
+      facilitatorContract: '0x21ad8F73c8E43C3cCf158AA2Af58cA19ed960fFF',
+      sepoliaAtorTokenContract: '0xe0E527318Fe1644a368b4eA5AaCcBFB3FE8737B0',
+      distributionContract: 'GeyCU06plVtWiudHxgXIu4863wwRByBmsP5AMBdhyj4',
+      metricsDeployer: 'x0cuVieEDTFjtxI5m5i22u2IMr-WpBiTS-Vir8U3dbw',
       warpGateway: 'https://gw.warp.cc/gateway/v2',
     },
   },

pages/index.vue

@@ -55,7 +55,7 @@ onMounted(() => {
 initRelayRegistry();
 initFacilitator();
 initDistribution();
-useMetricsStore().refresh();
+// useMetricsStore().refresh();
 
 watch(
   () => userStore.userData.address,

stores/useUserStore.ts

@@ -2,10 +2,12 @@ import { formatEther } from 'viem';
 import { useAccount } from 'use-wagmi';
 import { getBalance } from 'use-wagmi/actions';
 import { type GetBalanceReturnType } from 'use-wagmi/actions';
+import type { RelayMeta } from '@/types/relay';
 
 import { warpRead } from '@/utils/warp.read';
 import { config } from '@/config/wagmi.config';
 import { getAtorAddress } from '@/config/web3modal.config';
+import { getRelaysInfo } from '~/utils/relays';
 
 export type RelayRow = {
   fingerprint: string;
@@ -31,6 +33,7 @@ export const useUserStore = defineStore('user', {
     tokenBalanceUsd: 0,
     verifiedRelays: [] as RelayRow[],
     claimableRelays: [] as RelayRow[],
+    relaysMeta: {} as Record<string, RelayMeta>,
     claimableRewards: 0,
     claimedRewardsTotal: 0,
   }),
@@ -66,6 +69,13 @@ export const useUserStore = defineStore('user', {
       if (verified.status === 200) {
         const relays = await verified.json();
         this.verifiedRelays = relays.relays;
+        const meta = await getRelaysInfo(
+          relays.relays.map((relay: { fingerprint: any }) => relay.fingerprint)
+        );
+        this.relaysMeta = {
+          ...this.relaysMeta,
+          ...meta,
+        };
       }
     },
     // Get claimable relays using Warp
@@ -80,6 +90,13 @@ export const useUserStore = defineStore('user', {
       if (claimable.status === 200) {
         const relays = await claimable.json();
         this.claimableRelays = relays.relays;
+        const meta = await getRelaysInfo(
+          relays.relays.map((relay: { fingerprint: any }) => relay.fingerprint)
+        );
+        this.relaysMeta = {
+          ...this.relaysMeta,
+          ...meta,
+        };
       }
     },
     // TODO: Implement this method

utils/relays.ts

@@ -0,0 +1,33 @@
+import type { RelayMeta } from '@/types/relay';
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const getRelaysInfo = async (fingerPrints: string[]) => {
+  const relays = {} as Record<string, RelayMeta>;
+
+  for (const fingerPrint of fingerPrints) {
+    try {
+      const response = await fetch(
+        `https://api-live.dmz.ator.dev/relays/${fingerPrint}`
+      );
+
+      if (response.ok) {
+        const data = await response.json();
+        relays[fingerPrint] = {
+          nickname: data.nickname,
+          fingerprint: data.fingerprint,
+          consensus_weight: data.consensus_weight,
+          observed_bandwidth: data.observed_bandwidth,
+          running: data.running,
+          ator_address: data.ator_address,
+          consensus_weight_fraction: data.consensus_weight_fraction,
+        };
+        await wait(1000);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  return relays;
+};