Merge branch 'main' into fix/minor-improvements

Author: portdeveloper

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

@@ -8,6 +8,7 @@ import { usePublicClient } from "wagmi";
 import { useAddressStore } from "~~/services/store/store";
 
 const GNOSIS_SAFE_BYTECODE_PATTERN = "0x608060405273ffffffffffffffffffffffffffffffffffffffff600054167fa619486e";
+const EOF_SIGNATURE = "0xef01";
 
 const SAFE_ABI = [
   {
@@ -31,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();
@@ -42,14 +49,16 @@ export const ButtonsCard = () => {
     setIsGnosisSafe(false);
     setSafeOwners([]);
     setSafeThreshold(0);
+    setIsValidator(false);
+    setValidatorInfo(null);
   }, [address]);
 
   useEffect(() => {
     const checkGnosisSafe = async () => {
       if (!address || !client) return;
       try {
         const bytecode = await client.getCode({ address });
-        const isContract = bytecode && bytecode.length > 2;
+        const isContract = bytecode && bytecode.length > 2 && !bytecode.startsWith(EOF_SIGNATURE);
 
         setIsContractAddress(isContract || false);
 
@@ -77,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) {
@@ -96,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">

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

@@ -12,15 +12,16 @@ export const TokensTable = ({ tokens }: { tokens: Token[] }) => {
     const divisor = BigInt(Math.pow(10, decimals));
     const integerPart = balanceBigInt / divisor;
     const fractionalPart = balanceBigInt % divisor;
-    const formattedFractionalPart = fractionalPart.toString().padStart(decimals, "0").slice(0, 2);
+    const decimalDigits = integerPart === 0n ? 6 : integerPart < 10n ? 4 : 2;
+    const formattedFractionalPart = fractionalPart.toString().padStart(decimals, "0").slice(0, decimalDigits);
 
     const integerPartStr = integerPart.toString();
 
     if (integerPartStr.length > 10) {
       return `${integerPartStr.slice(0, 10)}...`;
-    } else {
-      return `${integerPartStr}.${formattedFractionalPart}`;
     }
+    const formatted = `${integerPartStr}.${formattedFractionalPart}`;
+    return formatted === "0.000000" ? "0" : formatted;
   };
 
   if (tokens.length === 0) {