Feat/validator check (#83)

* Check if the address searched is a validator

* Fix beaconchain link

* Remove console logs

* Revert one bad change

Author: portdeveloper

packages/nextjs/components/address-vision/ButtonsCard.tsx

@@ -32,6 +32,12 @@ export const ButtonsCard = () => {
   const [isGnosisSafe, setIsGnosisSafe] = useState<boolean>(false);
   const [safeOwners, setSafeOwners] = useState<Address[]>([]);
   const [safeThreshold, setSafeThreshold] = useState<number>(0);
+  const [isValidator, setIsValidator] = useState<boolean>(false);
+  const [validatorInfo, setValidatorInfo] = useState<{
+    totalDeposits: number;
+    totalETHStaked: string;
+    pubkeys: string[];
+  } | null>(null);
 
   const { resolvedAddress: address } = useAddressStore();
   const client = usePublicClient();
@@ -43,6 +49,8 @@ export const ButtonsCard = () => {
     setIsGnosisSafe(false);
     setSafeOwners([]);
     setSafeThreshold(0);
+    setIsValidator(false);
+    setValidatorInfo(null);
   }, [address]);
 
   useEffect(() => {
@@ -78,7 +86,54 @@ export const ButtonsCard = () => {
       }
     };
 
+    const checkValidator = async () => {
+      if (!address) return;
+      try {
+        const response = await fetch(`https://beaconcha.in/api/v1/validator/eth1/${address}`);
+
+        if (response.ok) {
+          const data = await response.json();
+
+          if (data.status === "OK" && data.data && data.data.length > 0) {
+            const validatorIndices = data.data.map((validator: any) => validator.validatorindex);
+
+            const validatorPromises = validatorIndices.map(async (index: number) => {
+              try {
+                const validatorResponse = await fetch(`https://beaconcha.in/api/v1/validator/${index}`);
+                if (validatorResponse.ok) {
+                  const validatorData = await validatorResponse.json();
+                  if (validatorData.status === "OK" && validatorData.data) {
+                    return {
+                      balance: parseFloat(validatorData.data.balance) / 1e9,
+                      pubkey: validatorData.data.pubkey,
+                    };
+                  }
+                }
+                return { balance: 0, pubkey: "" };
+              } catch (error) {
+                return { balance: 0, pubkey: "" };
+              }
+            });
+
+            const validators = await Promise.all(validatorPromises);
+            const totalBalance = validators.reduce((sum, validator) => sum + validator.balance, 0);
+            const pubkeys = validators.map(validator => validator.pubkey).filter(pubkey => pubkey !== "");
+
+            setIsValidator(true);
+            setValidatorInfo({
+              totalDeposits: data.data.length,
+              totalETHStaked: totalBalance.toFixed(4),
+              pubkeys: pubkeys,
+            });
+          }
+        }
+      } catch (error) {
+        console.error("Validator check failed:", error);
+      }
+    };
+
     checkGnosisSafe();
+    checkValidator();
   }, [address, client]);
 
   if (isContractAddress && !isGnosisSafe) {
@@ -97,6 +152,43 @@ export const ButtonsCard = () => {
     );
   }
 
+  if (isValidator) {
+    return (
+      <div className="card w-[370px] md:w-[425px] bg-base-100 shadow-xl">
+        <div className="card-body">
+          <h2 className="card-title">
+            <span className="text-2xl mr-2">🔗</span>
+            Ethereum Validator
+          </h2>
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <p className="m-0 font-semibold">Validators:</p>
+              <p className="m-0">{validatorInfo?.totalDeposits || 0}</p>
+            </div>
+            <div className="flex justify-between items-center">
+              <p className="m-0 font-semibold">Total Balance:</p>
+              <p className="m-0">{validatorInfo?.totalETHStaked || "0"} ETH</p>
+            </div>
+            <div className="mt-4">
+              <Link
+                href={
+                  validatorInfo?.pubkeys && validatorInfo.pubkeys.length === 1
+                    ? `https://beaconcha.in/validator/${validatorInfo.pubkeys[0]}`
+                    : `https://beaconcha.in/validators/eth1deposits?q=${address}`
+                }
+                className="btn btn-primary btn-sm rounded-full w-full"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View on Beaconcha.in
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (isContractAddress && isGnosisSafe) {
     return (
       <div className="card w-[370px] md:w-[425px] bg-base-100 shadow-xl">