feat: created selector for beaconcha base url and added it to validat…

…or row and modal

src/components/BeaconChaLink/BeaconChaLink.tsx

@@ -1,21 +1,16 @@
-import { BeaconChaValidatorUrl, GoerliBeaconChaValidatorUrl } from '../../constants/constants'
 import Typography from '../Typography/Typography'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRecoilValue } from 'recoil'
-import { selectBnChain } from '../../recoil/selectors/selectBnChain'
-import { Network } from '../../constants/enums'
+import { selectBeaconChaBaseUrl } from '../../recoil/selectors/selectBeaconChaBaseUrl'
 
 export interface BeaconChaLinkProps {
   index: number
 }
 
 const BeaconChaLink: FC<BeaconChaLinkProps> = ({ index }) => {
   const { t } = useTranslation()
-  const bnNetwork = useRecoilValue(selectBnChain)
-
-  const baseUrl =
-    bnNetwork === Network.Mainnet ? BeaconChaValidatorUrl : GoerliBeaconChaValidatorUrl
+  const baseUrl = useRecoilValue(selectBeaconChaBaseUrl)
 
   return (
     <a target='_blank' rel='noreferrer' href={`${baseUrl}/${index}`}>

src/components/ValidatorTable/ValidatorRow.tsx

@@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next'
 import formatEthAddress from '../../utilities/formatEthAddress'
 import { TableView } from './ValidatorTable'
 import ValidatorActionIcon from '../ValidatorActionIcon/ValidatorActionIcon'
-import { useSetRecoilState } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { dashView, validatorIndex } from '../../recoil/atoms'
 import { ContentView } from '../../constants/enums'
 import StatusIcon from '../StatusIcon/StatusIcon'
-import { BeaconChaValidatorUrl } from '../../constants/constants'
 import formatBalanceColor from '../../utilities/formatBalanceColor'
 import IdenticonIcon from '../IdenticonIcon/IdenticonIcon'
 import DisabledTooltip from '../DisabledTooltip/DisabledTooltip'
+import { selectBeaconChaBaseUrl } from '../../recoil/selectors/selectBeaconChaBaseUrl'
 
 export interface ValidatorRowProps {
   validator: ValidatorInfo
@@ -26,6 +26,7 @@ const ValidatorRow: FC<ValidatorRowProps> = ({ validator, view }) => {
   const setValidatorIndex = useSetRecoilState(validatorIndex)
   const { name, pubKey, index, balance, rewards, status } = validator
   const rewardColor = formatBalanceColor(rewards)
+  const baseUrl = useRecoilValue(selectBeaconChaBaseUrl)
 
   const viewValidator = () => {
     setValidatorIndex(index)
@@ -141,7 +142,7 @@ const ValidatorRow: FC<ValidatorRowProps> = ({ validator, view }) => {
       )}
       <th className='border-r-style500 px-2'>
         <div className='w-full flex justify-center'>
-          <a target='_blank' rel='noreferrer' href={`${BeaconChaValidatorUrl}/${index}`}>
+          <a target='_blank' rel='noreferrer' href={`${baseUrl}/${index}`}>
             <ValidatorActionIcon icon='bi-box-arrow-in-up-right' />
           </a>
         </div>

src/recoil/selectors/selectBeaconChaBaseUrl.ts

@@ -0,0 +1,13 @@
+import { selector } from 'recoil'
+import { Network } from '../../constants/enums'
+import { selectBnChain } from './selectBnChain'
+import { BeaconChaValidatorUrl, GoerliBeaconChaValidatorUrl } from '../../constants/constants'
+
+export const selectBeaconChaBaseUrl = selector({
+  key: 'selectBeaconChaBaseUrl',
+  get: ({ get }) => {
+    return get(selectBnChain) === Network.Mainnet
+      ? BeaconChaValidatorUrl
+      : GoerliBeaconChaValidatorUrl
+  },
+})