feat: showing warning for top validators on staking (#1448)

apps/namadillo/src/App/Common/IconTooltip.tsx

@@ -0,0 +1,30 @@
+import { Tooltip } from "@namada/components";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+type IconTooltipProps = {
+  icon: React.ReactNode;
+  text: string;
+  className?: string;
+};
+
+export const IconTooltip = ({
+  icon,
+  text,
+  className,
+}: IconTooltipProps): JSX.Element => {
+  return (
+    <i
+      className={twMerge(
+        clsx(
+          "group/tooltip bg-neutral-600 inline-flex not-italic text-[8px]",
+          "w-3.5 h-3.5 rounded-full items-center justify-center",
+          className
+        )
+      )}
+    >
+      {icon}
+      <Tooltip className="z-50 w-68">{text}</Tooltip>
+    </i>
+  );
+};

apps/namadillo/src/App/Staking/IncrementBondingTable.tsx

@@ -1,9 +1,13 @@
 import { TableRow } from "@namada/components";
 import { formatPercentage } from "@namada/utils";
+import { IconTooltip } from "App/Common/IconTooltip";
 import { NamCurrency } from "App/Common/NamCurrency";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
+import { getTopValidatorsAddresses } from "lib/staking";
+import { useMemo } from "react";
+import { FaExclamation } from "react-icons/fa6";
 import { Validator } from "types";
 import { AmountField } from "./AmountField";
 import { ValidatorCard } from "./ValidatorCard";
@@ -29,6 +33,10 @@ export const IncrementBondingTable = ({
     stakedAmountByAddress,
   });
 
+  const topValidatorsByRank = useMemo(() => {
+    return getTopValidatorsAddresses(validators);
+  }, [validators]);
+
   const headers = [
     { children: "Validator" },
     "Amount to Stake",
@@ -73,8 +81,18 @@ export const IncrementBondingTable = ({
         // Amount Text input
         <div
           key={`increment-bonding-new-amounts-${validator.address}`}
-          className="min-w-[24ch]"
+          className="min-w-[24ch] relative"
         >
+          {topValidatorsByRank.includes(validator.address) ?
+            <IconTooltip
+              className={clsx(
+                "hidden absolute -left-6 bg-fail text-black top-1/2 -translate-y-1/2 z-50",
+                { "inline-flex": updatedAmountByAddress[validator.address] }
+              )}
+              icon={<FaExclamation />}
+              text="Consider staking to validators outside of the top 10 to increase decentralization"
+            />
+          : null}
           <AmountField
             placeholder="Select to increase stake"
             value={updatedAmountByAddress[validator.address]}

apps/namadillo/src/lib/staking.ts

@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import { RedelegateChange } from "types";
+import { RedelegateChange, Validator } from "types";
 
 export const getReducedAmounts = (
   stakedAmounts: Record<string, BigNumber>,
@@ -17,6 +17,20 @@ export const getReducedAmounts = (
   return reducedAmounts;
 };
 
+export const getTopValidatorsAddresses = (
+  validators: Validator[],
+  topNumber = 10
+): string[] => {
+  return validators
+    .sort((v1: Validator, v2: Validator): number => {
+      if (!v1.votingPowerInNAM) return -1;
+      if (!v2.votingPowerInNAM) return 1;
+      return v1.votingPowerInNAM.gt(v2.votingPowerInNAM) ? -1 : 1;
+    })
+    .slice(0, topNumber)
+    .map((validator) => validator.address);
+};
+
 export const getIncrementedAmounts = (
   stakedAmounts: Record<string, BigNumber>,
   updatedAmounts: Record<string, BigNumber>