dynamic beacocnha dashboard url

Author: mateumiralles

packages/admin-ui/src/hooks/useNetworkStats.ts

@@ -33,7 +33,7 @@ const networkFeatures: Record<DashboardSupportedNetwork, NetworkFeatures> = {
   [Network.Lukso]: {
     hasValidators: true,
     logo: LuksoLogo,
-    beaconExplorer: { url: "https://explorer.consensus.mainnet.lukso.network/", name: "Beacon Lukso Explorer" }
+    beaconExplorer: { url: "https://dora.explorer.mainnet.lukso.network/", name: "Beacon Lukso Explorer" }
   },
   [Network.Hoodi]: {
     hasValidators: true,
@@ -105,7 +105,8 @@ export function useNetworkStats() {
             balance,
             attesting,
             beaconError,
-            signerStatus
+            signerStatus,
+            pubKeys: validatorsActive?.validators || []
           }
         }
       : undefined;

packages/admin-ui/src/pages/dashboard_v2/components/NetworkCards.tsx

@@ -262,12 +262,25 @@ export const ValidatorsCard = ({
 
 export const RewardsCard = ({
   network,
-  beaconExplorer
+  beaconExplorer,
+  pubKeys
 }: {
   network: string;
   beaconExplorer: { [key: string]: string };
+  pubKeys?: string[];
 }) => {
-  console.log(network, "RewardsCard data:", beaconExplorer);
+  // Construct dynamic Beaconcha.in dashboard URL for networks that support it (Mainnet and Hoodi)
+  const getDashboardUrl = () => {
+    const baseUrl = beaconExplorer.url;
+
+    if (pubKeys && pubKeys.length > 0 && (network === Network.Mainnet || network === Network.Hoodi)) {
+      return `${baseUrl}dashboard?validators=${pubKeys.join(",")}`;
+    }
+
+    return baseUrl;
+  };
+
+  const dashboardUrl = getDashboardUrl();
 
   return (
     <NetworkCard title="REWARDS" icon={<RewardsIcon />}>
@@ -276,7 +289,7 @@ export const RewardsCard = ({
       >
         View your detailed validator rewards in the explorer.
       </div>
-      <Button href={beaconExplorer.url} fullwidth {...newTabProps} variant="outline-dappnode">
+      <Button href={dashboardUrl} fullwidth {...newTabProps} variant="outline-dappnode">
         <span>{`Visit ${beaconExplorer.name}`}</span>
       </Button>
     </NetworkCard>

packages/admin-ui/src/pages/dashboard_v2/components/NetworkStats.tsx

@@ -38,7 +38,13 @@ export default function NetworkStats() {
                     <ValidatorsCard network={network} validatorsLoading={validatorsLoading} data={data.validators} />
                   )}
 
-                  {data.beaconExplorer && <RewardsCard network={network} beaconExplorer={data.beaconExplorer} />}
+                  {data.beaconExplorer && (
+                    <RewardsCard
+                      network={network}
+                      beaconExplorer={data.beaconExplorer}
+                      pubKeys={data.validators?.pubKeys}
+                    />
+                  )}
                 </div>
               </div>
             );

packages/types/src/stakingDashboard.ts

@@ -29,6 +29,7 @@ export type NetworkStatus = {
     attesting: number;
     beaconError?: Error;
     signerStatus: SignerStatus;
+    pubKeys?: string[]; // Validator public keys used for beaconcha.in dynamic dashboard URLs
   };
   hasValidators: boolean; // Whether this network has validators
   beaconExplorer?: { url: string; name: string }; // Whether this network has a beacon explorer to redirect to for validator rewards