diff --git a/packages/admin-ui/src/pages/stakers/components/StakerNetwork.tsx b/packages/admin-ui/src/pages/stakers/components/StakerNetwork.tsx index 3fb0d0a81..623feeb7d 100644 --- a/packages/admin-ui/src/pages/stakers/components/StakerNetwork.tsx +++ b/packages/admin-ui/src/pages/stakers/components/StakerNetwork.tsx @@ -116,9 +116,29 @@ export default function StakerNetwork({ network, description }: { network: Netwo } } + // Determine which columns to show and construct the instructions dynamically + const showRemoteSigner: boolean = [ + Network.Mainnet, + Network.Prater, + Network.Gnosis, + Network.Lukso, + Network.Holesky, + Network.Hoodi + ].includes(network); + + const showMevBoost: boolean = [ + Network.Prater, + Network.Mainnet, + Network.Holesky, + Network.Hoodi + ].includes(network) && !!currentStakerConfigReq.data?.mevBoost; + + // Get dynamic setup instructions + const setupInstructions = getStakerSetupInstructions(showRemoteSigner, showMevBoost); + return ( <> - {network === "prater" && ( + {network === Network.Prater && (

The prater network is deprecated, please migrate to Hoodi. @@ -126,7 +146,7 @@ export default function StakerNetwork({ network, description }: { network: Netwo )} - {network === "holesky" && ( + {network === Network.Holesky && (

The holesky network is deprecated, please migrate to Hoodi. @@ -134,7 +154,7 @@ export default function StakerNetwork({ network, description }: { network: Netwo )} - {(network === "hoodi" || network === "mainnet") && ( + {(network === Network.Hoodi || network === Network.Mainnet) && (

@@ -154,19 +174,7 @@ export default function StakerNetwork({ network, description }: { network: Netwo {currentStakerConfigReq.data ? (

-

- Set up your Proof-of-Stake validator configuration for Ethereum and Ethereum-based chains. You will need - to:
- (1) Choose an Execution Layer client
- (2) Choose a Consensus Layer client (+ validator)
- (3) Install the web3signer, which will hold the validator keys and sign
- {network !== "gnosis" && network !== "lukso" && ( - <> - (4) Optional; delegate block-building capacities through the MEV Boost network and potentially - profit from MEV - - )} -

+

{description}

@@ -195,15 +203,18 @@ export default function StakerNetwork({ network, description }: { network: Netwo ))} - - Remote signer - - - {["prater", "mainnet", "holesky", "hoodi"].includes(network) && currentStakerConfigReq.data.mevBoost && ( + {showRemoteSigner && ( + + Remote signer + + + )} + + {showMevBoost && currentStakerConfigReq.data?.mevBoost && ( Mev Boost ); } + +/* ======================= + * Helper Functions + * ======================= */ + +function getStakerSetupInstructions(showRemoteSigner: boolean, showMevBoost: boolean) { + let instructions = ` + Set up your Proof-of-Stake validator configuration for Ethereum and Ethereum-based chains. You will need to:
+ (1) Choose an Execution Layer client
+ (2) Choose a Consensus Layer client (+ validator)
+ `; + + if (showRemoteSigner) { + instructions += `(3) Install the web3signer, which will hold the validator keys and sign transactions.
`; + } + + if (showMevBoost) { + instructions += `(4) Delegate block-building capacities through the MEV Boost network and potentially profit from MEV.`; + } + + return instructions; +}