If no Underdog, lower stake become one

Author: mraveux

src/components/prestaking/PrestakingValidatorPage.vue

@@ -21,12 +21,15 @@
             <div class="validator-list" ref="validatorList$">
                 <div class="scroll-mask top"></div>
                 <LoadingList v-if="!stakeFetched" :length="4" :type="LoadingListType.VALIDATOR" />
-                <ValidatorListItem v-else
-                    v-for="validator in sortedList" :key="validator.address"
-                    :validator="validator"
-                    :container="validatorList$"
-                    @click.native="selectValidator(validator)"
-                />
+                <template v-else>
+                    <ValidatorListItem
+                        v-for="validator in sortedList"
+                        :key="validator.address"
+                        :validator="validator"
+                        :container="validatorList$"
+                        @click.native="selectValidator(validator)"
+                    />
+                </template>
                 <div class="scroll-mask bottom"></div>
             </div>
         </PageBody>
@@ -121,7 +124,18 @@ export default defineComponent({
                             if (cmp) return cmp;
                             return a.address < b.address ? -1 : 1;
                         });
-                    return list;
+
+                    // Calculate underdog status
+                    const poolsWithStake = list.filter((v) => 'label' in v && v.stake !== null);
+                    const totalStake = poolsWithStake.reduce((sum, v) => sum + (v.stake || 0), 0);
+                    const hasUnderdog = poolsWithStake.some((v) => (v.stake || 0) / totalStake < 0.1);
+
+                    return list.map((validator) => ({
+                        ...validator,
+                        isUnderdog: 'label' in validator
+                            && ((validator.stake || 0) / totalStake < 0.1
+                                || (!hasUnderdog && validator === poolsWithStake[0])),
+                    }));
                 }
             }
         });

src/components/prestaking/ValidatorListItem.vue

@@ -24,7 +24,7 @@
                     <div v-if="validator.stake !== null" class="validator-stake">
                         {{ $t('Stake: {validatorStake}%', { validatorStake: validatorStakePercentage }) }}
                     </div>
-                    <template v-if="isUnderdog">
+                    <template v-if="validator.isUnderdog">
                         <strong class="dot">&middot;</strong>
                         <div class="validator-underdog">
                             {{ $t('Underdog') }}
@@ -43,7 +43,7 @@
                 </div>
             </div>
             <!-- <ValidatorRewardBubble v-if="'reward' in validator" :reward="validator.reward" /> -->
-            <div v-if="isUnderdog" class="underdog-info flex-row">
+            <div v-if="validator.isUnderdog" class="underdog-info flex-row">
                 <img src="../../assets/prestaking/underdog-icon.svg" alt="Underdog" class="underdog-icon">
                 <div class="points-pill">{{ $t('5x points') }}</div>
             </div>
@@ -64,7 +64,7 @@ export default defineComponent({
     props: {
         container: HTMLElement,
         validator: {
-            type: Object as () => Validator,
+            type: Object as () => Validator & { isUnderdog?: boolean },
             required: true,
         },
     },
@@ -83,13 +83,11 @@ export default defineComponent({
             () => Math.round(((props.validator.stake || 0) / globalStake.value) * 1000) / 10,
         );
 
-        const isUnderdog = computed(() => props.validator.stake !== null && validatorStakePercentage.value < 10);
         const hasHighStake = computed(() => props.validator.stake !== null && validatorStakePercentage.value >= 20);
 
         return {
             // payoutText,
             validatorStakePercentage,
-            isUnderdog,
             hasHighStake,
         };
     },