[WIP] feat: improve validator fetch logic

src/components/icons/Staking/FatSearchIcon.vue

@@ -1,6 +1,6 @@
 <template functional>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
-        <circle cx="8.25" cy="8.25" r="4.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.0"/>
-        <line x1="16.25" y1="16.25" x2="11.75" y2="11.75" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.0"/>
+        <circle cx="8.25" cy="8.25" r="4.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.0"/>
+        <line x1="16.25" y1="16.25" x2="11.75" y2="11.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.0"/>
     </svg>
 </template>

src/components/staking/ValidatorFilter.vue

@@ -112,6 +112,7 @@ export default defineComponent({
             border: 0;
             background: transparent;
             box-shadow: none;
+            color: rgb(31, 35, 72);
 
             svg {
                 width: 2.375rem;
@@ -122,7 +123,6 @@ export default defineComponent({
                 }
 
                 line, circle {
-                    stroke: rgb(31, 35, 72);
                     stroke-width: 2.0;
                 }
             }

src/components/staking/ValidatorIcon.vue

@@ -1,11 +1,12 @@
 <template>
-    <img class="validator-icon" v-if="'logo' in validator" :src="validator.logo" :alt="validator.name" />
+    <img class="validator-icon" v-if="src" :src="src" :alt="validator.name" loading="lazy" />
     <Identicon class="validator-icon" v-else :address="validator.address"/>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
 import { Identicon } from '@nimiq/vue-components';
+import { useConfig } from '@/composables/useConfig';
 import { Validator } from '../../stores/Staking';
 
 export default defineComponent({
@@ -15,6 +16,14 @@ export default defineComponent({
             required: true,
         },
     },
+    setup(props) {
+        const { config } = useConfig();
+
+        return {
+            src: 'logoPath' in props.validator
+                ? `${config.staking.validatorsEndpoint}}/${props.validator.logoPath}` : undefined,
+        };
+    },
     components: {
         Identicon,
     },

src/config/config.local.ts

@@ -24,7 +24,7 @@ export default {
         prestakingStartBlock: 3_023_730,
         prestakingEndBlock: 3_028_050,
         transitionBlock: 3_032_010,
-        validatorsEndpoint: 'https://validators-api-testnet.nuxt.dev/api/v1/validators?only-known=false',
+        validatorsEndpoint: 'https://validators-api-testnet.nuxt.dev',
         genesis: {
             height: 3032010,
             date: new Date('2024-11-13T20:00:00Z'),

src/config/config.mainnet.ts

@@ -34,7 +34,7 @@ export default {
         prestakingStartBlock: 3_392_200, // 2024-10-06T02:53:18Z
         prestakingEndBlock: 3_456_000, // ~2024-11-19T16:00:00Z
         transitionBlock: 3_456_000,
-        validatorsEndpoint: 'https://validators-api-mainnet.nuxt.dev/api/v1/validators?only-known=false',
+        validatorsEndpoint: 'https://validators-api-mainnet.nuxt.dev',
         genesis: {
             height: 3456000,
             date: new Date('2024-11-19T16:00:00Z'),

src/config/config.testnet.ts

@@ -22,7 +22,7 @@ export default {
         prestakingStartBlock: 3_023_730,
         prestakingEndBlock: 3_028_050,
         transitionBlock: 3_032_010,
-        validatorsEndpoint: 'https://validators-api-testnet.nuxt.dev/api/v1/validators?with-scores=true',
+        validatorsEndpoint: 'https://validators-api-testnet.nuxt.dev',
         genesis: {
             height: 3032010,
             date: new Date('2024-11-13T20:00:00Z'),

src/network.ts

@@ -217,7 +217,27 @@ export async function launchNetwork() {
         network$.peerCount = peerCount;
     });
 
+    let currentValidatorRequest: { epoch: number, ts: Date, controller: AbortController } | undefined;
+    const maxValidatorRequestAge = 60000;
+
     async function updateValidators() {
+        const now = new Date();
+
+        // Abort previous request if it exists
+        if (currentValidatorRequest?.controller) {
+            currentValidatorRequest.controller.abort();
+        }
+
+        // Check if we should skip the update
+        if (currentValidatorRequest?.epoch === currentEpoch
+            || (currentValidatorRequest?.ts
+                && now.getTime() - currentValidatorRequest.ts.getTime() < maxValidatorRequestAge)) {
+            return;
+        }
+
+        const controller = new AbortController();
+        currentValidatorRequest = { epoch: currentEpoch, ts: now, controller };
+
         await client.waitForConsensusEstablished();
         const contract = (await retry(
             () => client.getAccount(STAKING_CONTRACT_ADDRESS) as Promise<PlainStakingContract>,
@@ -237,8 +257,9 @@ export async function launchNetwork() {
             payoutType: 'none' | 'direct' | 'restake',
             payoutSchedule: string,
             isMaintainedByNimiq: boolean,
-            icon?: string,
-            hasDefaultIcon: boolean,
+            logo?: string,
+            logoPath?: string,
+            hasDefaultLogo: boolean,
             accentColor: string,
             website: string | null,
             contact: Record<string, string> | null,
@@ -251,8 +272,12 @@ export async function launchNetwork() {
         };
 
         const { config } = useConfig();
-        const apiValidators = await fetch(config.staking.validatorsEndpoint)
-            .then((res) => res.json()).catch(() => []) as ApiValidator[];
+        const url = `${config.staking.validatorsEndpoint}/api/v1/validators?only-known=false`;
+        const apiValidators = await retry<ApiValidator[]>(
+            () => fetch(url, { signal: controller.signal }).then((res) => res.json()).catch(() => []),
+            1000,
+            3,
+        );
         // TODO: Make it work even in the case this request fails
         const validatorData: Record<string, ApiValidator> = {};
         for (const apiValidator of apiValidators) {

src/stores/Staking.ts

@@ -34,6 +34,7 @@ export type RegisteredValidator = RawValidator & {
     payoutSchedule: string,
     isMaintainedByNimiq: boolean,
     logo?: string,
+    logoPath?: string,
     hasDefaultIcon: boolean,
     accentColor: string,
     website: string | null,
@@ -167,7 +168,7 @@ export const useStakingStore = createStore({
             };
         },
         setStakes(stakes: Stake[]) {
-            const newStakes: {[address: string]: Stake} = {};
+            const newStakes: { [address: string]: Stake } = {};
 
             for (const stake of stakes) {
                 newStakes[stake.address] = stake;
@@ -197,7 +198,7 @@ export const useStakingStore = createStore({
             };
         },
         setValidators(validators: Validator[]) {
-            const newValidators: {[address: string]: Validator} = {};
+            const newValidators: { [address: string]: Validator } = {};
 
             for (const validator of validators) {
                 newValidators[validator.address] = validator;