From 40dcf58f97ea5f9c4bf4a0e4830a0f2da3ea587b Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Wed, 20 Nov 2024 05:02:59 -0600
Subject: [PATCH 1/4] feat: improve validator fetch logic

---
 src/network.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/network.ts b/src/network.ts
index a5f2f9b5e..5e37081a3 100644
--- a/src/network.ts
+++ b/src/network.ts
@@ -217,7 +217,12 @@ export async function launchNetwork() {
         network$.peerCount = peerCount;
     });
 
+    let lastValidatorRequest = { epoch: Infinity, ts: 0 };
     async function updateValidators() {
+        const now = Date.now();
+        if (currentEpoch === lastValidatorRequest.epoch || now - lastValidatorRequest.ts < 60000) return;
+        lastValidatorRequest = { epoch: currentEpoch, ts: now };
+
         await client.waitForConsensusEstablished();
         const contract = (await retry(
             () => client.getAccount(STAKING_CONTRACT_ADDRESS) as Promise<PlainStakingContract>,
@@ -251,8 +256,9 @@ export async function launchNetwork() {
         };
 
         const { config } = useConfig();
-        const apiValidators = await fetch(config.staking.validatorsEndpoint)
-            .then((res) => res.json()).catch(() => []) as ApiValidator[];
+        const apiValidators = await retry<ApiValidator[]>(
+            () => fetch(config.staking.validatorsEndpoint).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) {

From 78ccb1a325ab4cfbc57979fc313febba3e4605a6 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Wed, 20 Nov 2024 08:31:04 -0600
Subject: [PATCH 2/4] feat: update validator logo handling and API endpoint
 configuration

---
 src/components/staking/ValidatorIcon.vue | 11 ++++++++++-
 src/config/config.local.ts               |  2 +-
 src/config/config.mainnet.ts             |  2 +-
 src/config/config.testnet.ts             |  2 +-
 src/network.ts                           |  6 ++++--
 src/stores/Staking.ts                    |  5 +++--
 6 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/staking/ValidatorIcon.vue b/src/components/staking/ValidatorIcon.vue
index 0662a0bdc..2650754f5 100644
--- a/src/components/staking/ValidatorIcon.vue
+++ b/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,
     },
diff --git a/src/config/config.local.ts b/src/config/config.local.ts
index 7f24db96c..6d06c1d5d 100644
--- a/src/config/config.local.ts
+++ b/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'),
diff --git a/src/config/config.mainnet.ts b/src/config/config.mainnet.ts
index 797592da7..becec2ec2 100644
--- a/src/config/config.mainnet.ts
+++ b/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'),
diff --git a/src/config/config.testnet.ts b/src/config/config.testnet.ts
index 6cfc31760..038028caa 100644
--- a/src/config/config.testnet.ts
+++ b/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'),
diff --git a/src/network.ts b/src/network.ts
index 5e37081a3..bc24726a0 100644
--- a/src/network.ts
+++ b/src/network.ts
@@ -242,7 +242,8 @@ export async function launchNetwork() {
             payoutType: 'none' | 'direct' | 'restake',
             payoutSchedule: string,
             isMaintainedByNimiq: boolean,
-            icon?: string,
+            logo?: string,
+            logoPath?: string,
             hasDefaultIcon: boolean,
             accentColor: string,
             website: string | null,
@@ -256,8 +257,9 @@ export async function launchNetwork() {
         };
 
         const { config } = useConfig();
+        const url = `${config.staking.validatorsEndpoint}/api/v1/validators?only-known=false`;
         const apiValidators = await retry<ApiValidator[]>(
-            () => fetch(config.staking.validatorsEndpoint).then((res) => res.json()).catch(() => []), 1000, 3,
+            () => fetch(url).then((res) => res.json()).catch(() => []), 1000, 3,
         );
         // TODO: Make it work even in the case this request fails
         const validatorData: Record<string, ApiValidator> = {};
diff --git a/src/stores/Staking.ts b/src/stores/Staking.ts
index e81480e49..17c756731 100644
--- a/src/stores/Staking.ts
+++ b/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;

From 5d078b2ab1e4f766c0259b744dc1e8a3f36e10e2 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Wed, 20 Nov 2024 15:21:49 -0600
Subject: [PATCH 3/4] feat: enhance validator update logic with request
 aborting and timestamp

---
 src/network.ts | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/network.ts b/src/network.ts
index bc24726a0..24338bc06 100644
--- a/src/network.ts
+++ b/src/network.ts
@@ -217,11 +217,26 @@ export async function launchNetwork() {
         network$.peerCount = peerCount;
     });
 
-    let lastValidatorRequest = { epoch: Infinity, ts: 0 };
+    let currentValidatorRequest: { epoch: number, ts: Date, controller: AbortController } | undefined;
+    const maxValidatorRequestAge = 60000;
+
     async function updateValidators() {
-        const now = Date.now();
-        if (currentEpoch === lastValidatorRequest.epoch || now - lastValidatorRequest.ts < 60000) return;
-        lastValidatorRequest = { epoch: currentEpoch, ts: now };
+        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(
@@ -244,7 +259,7 @@ export async function launchNetwork() {
             isMaintainedByNimiq: boolean,
             logo?: string,
             logoPath?: string,
-            hasDefaultIcon: boolean,
+            hasDefaultLogo: boolean,
             accentColor: string,
             website: string | null,
             contact: Record<string, string> | null,
@@ -259,7 +274,9 @@ export async function launchNetwork() {
         const { config } = useConfig();
         const url = `${config.staking.validatorsEndpoint}/api/v1/validators?only-known=false`;
         const apiValidators = await retry<ApiValidator[]>(
-            () => fetch(url).then((res) => res.json()).catch(() => []), 1000, 3,
+            () => 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> = {};

From a4f73ca1abf6c37c4423cd009787d904f794f664 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Wed, 20 Nov 2024 15:22:09 -0600
Subject: [PATCH 4/4] feat: update FatSearchIcon to use currentColor

---
 src/components/icons/Staking/FatSearchIcon.vue | 4 ++--
 src/components/staking/ValidatorFilter.vue     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/icons/Staking/FatSearchIcon.vue b/src/components/icons/Staking/FatSearchIcon.vue
index d8f9d91d5..c1b638018 100644
--- a/src/components/icons/Staking/FatSearchIcon.vue
+++ b/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>
diff --git a/src/components/staking/ValidatorFilter.vue b/src/components/staking/ValidatorFilter.vue
index 4925a44b2..b9bf9a673 100644
--- a/src/components/staking/ValidatorFilter.vue
+++ b/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;
                 }
             }