diff --git a/apps/wallet-dashboard/components/dialogs/staking/views/Validator.tsx b/apps/core/src/components/Validator.tsx
similarity index 63%
rename from apps/wallet-dashboard/components/dialogs/staking/views/Validator.tsx
rename to apps/core/src/components/Validator.tsx
index a76ed05db57..3161fe8a812 100644
--- a/apps/wallet-dashboard/components/dialogs/staking/views/Validator.tsx
+++ b/apps/core/src/components/Validator.tsx
@@ -1,6 +1,7 @@
-// Copyright (c) 2024 IOTA Stiftung
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { ImageIcon, ImageIconSize, formatPercentageDisplay, useValidatorInfo } from '@iota/core';
+import { ImageIcon, ImageIconSize, formatPercentageDisplay, useValidatorInfo } from '../';
 import {
     Card,
     CardBody,
@@ -10,24 +11,28 @@ import {
     CardType,
     Badge,
     BadgeType,
+    ImageShape,
+    Skeleton,
 } from '@iota/apps-ui-kit';
 import { formatAddress } from '@iota/iota-sdk/utils';
 
 interface ValidatorProps {
-    isSelected: boolean;
+    isSelected?: boolean;
     address: string;
+    type?: CardType;
     showActiveStatus?: boolean;
-    onClick?: (address: string) => void;
-    showAction?: boolean;
-    activeEpoch?: string;
+    onClick?: () => void;
+    showApy?: boolean;
+    activeEpoch?: number;
 }
 
 export function Validator({
     address,
-    showActiveStatus,
+    type,
+    showActiveStatus = false,
     onClick,
     isSelected,
-    showAction = true,
+    showApy = true,
     activeEpoch,
 }: ValidatorProps) {
     const {
@@ -38,10 +43,27 @@ export function Validator({
         isApyApproxZero,
         validatorSummary,
         system,
+        isPendingValidators,
     } = useValidatorInfo({
         validatorAddress: address,
     });
 
+    if (isPendingValidators) {
+        return (
+            <Card>
+                <CardImage shape={ImageShape.Rounded}>
+                    <Skeleton widthClass="w-10" heightClass="h-10" />
+                </CardImage>
+                <div className="flex flex-col gap-y-xs">
+                    <Skeleton widthClass="w-40" heightClass="h-3.5" />
+                    <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
+                </div>
+                <div className="ml-auto flex flex-col gap-y-xs">
+                    <Skeleton widthClass="w-20" heightClass="h-3.5" />
+                </div>
+            </Card>
+        );
+    }
     // for inactive validators, show the epoch number
     const fallBackText = activeEpoch
         ? `Staked ${Number(system?.epoch) - Number(activeEpoch)} epochs ago`
@@ -58,11 +80,8 @@ export function Validator({
     ) : (
         formatAddress(address)
     );
-
-    const handleClick = onClick ? () => onClick(address) : undefined;
-
     return (
-        <Card type={isSelected ? CardType.Filled : CardType.Default} onClick={handleClick}>
+        <Card type={type || isSelected ? CardType.Filled : CardType.Default} onClick={onClick}>
             <CardImage>
                 <ImageIcon
                     src={validatorSummary?.imageUrl ?? null}
@@ -72,7 +91,7 @@ export function Validator({
                 />
             </CardImage>
             <CardBody title={validatorDisplayName} subtitle={subtitle} isTextTruncated />
-            {showAction && (
+            {showApy && (
                 <CardAction
                     type={CardActionType.SupportingText}
                     title={formatPercentageDisplay(apy, '--', isApyApproxZero)}
diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts
index c57d1b78008..b24e104851f 100644
--- a/apps/core/src/components/index.ts
+++ b/apps/core/src/components/index.ts
@@ -12,5 +12,6 @@ export * from './buttons';
 export * from './collapsible';
 export * from './providers';
 export * from './stake';
+export * from './Validator';
 export * from './kiosk';
 export * from './nft';
diff --git a/apps/core/src/components/transaction/TransactionReceipt.tsx b/apps/core/src/components/transaction/TransactionReceipt.tsx
index 71e792732c1..82326d56a30 100644
--- a/apps/core/src/components/transaction/TransactionReceipt.tsx
+++ b/apps/core/src/components/transaction/TransactionReceipt.tsx
@@ -9,7 +9,7 @@ import { STAKING_REQUEST_EVENT, UNSTAKING_REQUEST_EVENT } from '../../constants'
 import { StakeTransactionDetails } from './details';
 import { UnstakeTransactionInfo } from './info';
 import { TransactionSummary } from './summary';
-import { RenderExplorerLink, RenderValidatorLogo } from '../../types';
+import { RenderExplorerLink } from '../../types';
 import { GasFees } from '../gas';
 import { formatDate } from '../../utils';
 
@@ -17,7 +17,6 @@ interface TransactionReceiptProps {
     txn: IotaTransactionBlockResponse;
     activeAddress: string | null;
     summary: Exclude<ReturnType<typeof useTransactionSummary>, null>;
-    renderValidatorLogo: RenderValidatorLogo;
     renderExplorerLink: RenderExplorerLink;
 }
 
@@ -25,7 +24,6 @@ export function TransactionReceipt({
     txn,
     activeAddress,
     summary,
-    renderValidatorLogo,
     renderExplorerLink,
 }: TransactionReceiptProps) {
     const { events } = txn;
@@ -49,7 +47,6 @@ export function TransactionReceipt({
                             activeAddress={activeAddress}
                             event={stakeTypeTransaction}
                             gasSummary={summary?.gas}
-                            renderValidatorLogo={renderValidatorLogo}
                             renderExplorerLink={renderExplorerLink}
                         />
                     ) : null}
@@ -60,7 +57,6 @@ export function TransactionReceipt({
                             event={unstakeTypeTransaction}
                             gasSummary={summary?.gas}
                             renderExplorerLink={renderExplorerLink}
-                            renderValidatorLogo={renderValidatorLogo}
                         />
                     ) : null}
                 </>
diff --git a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx
index 57f7c62deea..47182a18668 100644
--- a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx
+++ b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx
@@ -1,19 +1,20 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { CardType } from '@iota/apps-ui-kit';
 import { IotaEvent } from '@iota/iota-sdk/client';
 import { formatPercentageDisplay, getStakeDetailsFromEvent } from '../../../utils';
 import { useGetValidatorsApy } from '../../../hooks';
 import { TransactionAmount } from '../amount';
 import { StakeTransactionInfo } from '../info';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import type { GasSummaryType, RenderExplorerLink, RenderValidatorLogo } from '../../../types';
+import { Validator } from '../../../';
+import type { GasSummaryType, RenderExplorerLink } from '../../../types';
 
 interface StakeTransactionDetailsProps {
     event: IotaEvent;
     activeAddress: string | null;
     renderExplorerLink: RenderExplorerLink;
-    renderValidatorLogo: RenderValidatorLogo;
     gasSummary?: GasSummaryType;
 }
 
@@ -21,7 +22,6 @@ export function StakeTransactionDetails({
     event,
     gasSummary,
     activeAddress,
-    renderValidatorLogo: ValidatorLogo,
     renderExplorerLink,
 }: StakeTransactionDetailsProps) {
     const { stakedAmount, validatorAddress, epoch } = getStakeDetailsFromEvent(event);
@@ -34,10 +34,11 @@ export function StakeTransactionDetails({
     return (
         <div className="flex flex-col gap-y-md">
             {validatorAddress && (
-                <ValidatorLogo
+                <Validator
                     address={validatorAddress}
                     showActiveStatus
-                    activeEpoch={epoch.toString()}
+                    type={CardType.Filled}
+                    activeEpoch={epoch}
                     isSelected
                 />
             )}
diff --git a/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx
index f31705966ed..932fa20d5fc 100644
--- a/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx
+++ b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx
@@ -5,15 +5,14 @@
 import { TransactionAmount } from '../amount';
 import type { IotaEvent } from '@iota/iota-sdk/client';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import type { GasSummaryType, RenderExplorerLink, RenderValidatorLogo } from '../../../types';
+import type { GasSummaryType, RenderExplorerLink } from '../../../types';
 import { useFormatCoin } from '../../../hooks';
-import { Divider, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
-import { GasSummary, getUnstakeDetailsFromEvent } from '../../..';
+import { Divider, KeyValueInfo, Panel, CardType } from '@iota/apps-ui-kit';
+import { GasSummary, getUnstakeDetailsFromEvent, Validator } from '../../..';
 
 interface UnstakeTransactionInfoProps {
     activeAddress: string | null;
     event: IotaEvent;
-    renderValidatorLogo: RenderValidatorLogo;
     renderExplorerLink: RenderExplorerLink;
     gasSummary?: GasSummaryType;
 }
@@ -22,7 +21,6 @@ export function UnstakeTransactionInfo({
     activeAddress,
     event,
     gasSummary,
-    renderValidatorLogo: ValidatorLogo,
     renderExplorerLink,
 }: UnstakeTransactionInfoProps) {
     const { principalAmount, rewardAmount, totalAmount, validatorAddress } =
@@ -33,7 +31,7 @@ export function UnstakeTransactionInfo({
 
     return (
         <div className="flex flex-col gap-y-md">
-            {validatorAddress && <ValidatorLogo address={validatorAddress} isSelected />}
+            {validatorAddress && <Validator address={validatorAddress} type={CardType.Filled} />}
             {totalAmount !== 0n && (
                 <TransactionAmount amount={totalAmount} coinType={IOTA_TYPE_ARG} subtitle="Total" />
             )}
diff --git a/apps/core/src/interfaces/index.ts b/apps/core/src/interfaces/index.ts
index 4781308fa2b..226be390797 100644
--- a/apps/core/src/interfaces/index.ts
+++ b/apps/core/src/interfaces/index.ts
@@ -1,7 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './validatorLogo.interfaces';
 export * from './balanceChange.interfaces';
 export * from './transactions.interfaces';
 export * from './stakeEvent.interfaces';
diff --git a/apps/core/src/interfaces/validatorLogo.interfaces.ts b/apps/core/src/interfaces/validatorLogo.interfaces.ts
deleted file mode 100644
index 26b2d558ff2..00000000000
--- a/apps/core/src/interfaces/validatorLogo.interfaces.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export interface ValidatorLogoProps {
-    address: string;
-    isSelected: boolean;
-    showActiveStatus?: boolean;
-    activeEpoch?: string;
-}
diff --git a/apps/core/src/types/renderComponent.ts b/apps/core/src/types/renderComponent.ts
index 3059aa3f24d..b28b83ce439 100644
--- a/apps/core/src/types/renderComponent.ts
+++ b/apps/core/src/types/renderComponent.ts
@@ -3,8 +3,6 @@
 
 import type { PropsWithChildren, JSX } from 'react';
 import type { ExplorerLinkConfig } from '../utils/getExplorerLink';
-import type { ValidatorLogoProps } from '../interfaces';
 
 export type RenderExplorerLinkProps = PropsWithChildren<ExplorerLinkConfig>;
 export type RenderExplorerLink = (props: RenderExplorerLinkProps) => JSX.Element;
-export type RenderValidatorLogo = (props: ValidatorLogoProps) => JSX.Element;
diff --git a/apps/wallet-dashboard/components/dialogs/TransactionDialog.tsx b/apps/wallet-dashboard/components/dialogs/TransactionDialog.tsx
index 1bf34569416..71418f1b673 100644
--- a/apps/wallet-dashboard/components/dialogs/TransactionDialog.tsx
+++ b/apps/wallet-dashboard/components/dialogs/TransactionDialog.tsx
@@ -11,7 +11,6 @@ import {
     ViewTxnOnExplorerButton,
 } from '@iota/core';
 import { useCurrentAccount } from '@iota/dapp-kit';
-import { Validator } from './staking/views/Validator';
 
 interface SharedProps {
     txDigest?: string | null;
@@ -43,7 +42,6 @@ export function TransactionDialogView({
                         activeAddress={activeAddress}
                         summary={summary}
                         renderExplorerLink={ExplorerLink}
-                        renderValidatorLogo={Validator}
                     />
                 ) : (
                     <div className="flex h-full w-full justify-center">
diff --git a/apps/wallet-dashboard/components/dialogs/staking/views/EnterAmountDialogLayout.tsx b/apps/wallet-dashboard/components/dialogs/staking/views/EnterAmountDialogLayout.tsx
index c9b7a1555b3..dc59e18ac07 100644
--- a/apps/wallet-dashboard/components/dialogs/staking/views/EnterAmountDialogLayout.tsx
+++ b/apps/wallet-dashboard/components/dialogs/staking/views/EnterAmountDialogLayout.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFormatCoin, useStakeTxnInfo } from '@iota/core';
+import { useFormatCoin, useStakeTxnInfo, Validator } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import {
     Button,
@@ -19,8 +19,6 @@ import {
 import { Field, type FieldProps, useFormikContext } from 'formik';
 import { Exclamation, Loader } from '@iota/apps-ui-icons';
 import { useIotaClientQuery } from '@iota/dapp-kit';
-
-import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 
@@ -72,7 +70,7 @@ export function EnterAmountDialogLayout({
                 <div className="flex w-full flex-col justify-between">
                     <div>
                         <div className="mb-md">
-                            <Validator address={selectedValidator} isSelected showAction={false} />
+                            <Validator address={selectedValidator} isSelected showApy={false} />
                         </div>
                         <StakedInfo
                             validatorAddress={selectedValidator}
diff --git a/apps/wallet-dashboard/components/dialogs/staking/views/SelectValidatorView.tsx b/apps/wallet-dashboard/components/dialogs/staking/views/SelectValidatorView.tsx
index 06dbcbc2d06..75032c10690 100644
--- a/apps/wallet-dashboard/components/dialogs/staking/views/SelectValidatorView.tsx
+++ b/apps/wallet-dashboard/components/dialogs/staking/views/SelectValidatorView.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Button, Header } from '@iota/apps-ui-kit';
-import { Validator } from './Validator';
+import { Validator } from '@iota/core';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 
 interface SelectValidatorViewProps {
@@ -30,7 +30,7 @@ export function SelectValidatorView({
                             <Validator
                                 key={validator}
                                 address={validator}
-                                onClick={onSelect}
+                                onClick={() => onSelect(validator)}
                                 isSelected={selectedValidator === validator}
                             />
                         ))}
diff --git a/apps/wallet-dashboard/components/dialogs/transaction/TransactionDetailsLayout.tsx b/apps/wallet-dashboard/components/dialogs/transaction/TransactionDetailsLayout.tsx
index 0bcc27565d8..8b7d9cfa6a2 100644
--- a/apps/wallet-dashboard/components/dialogs/transaction/TransactionDetailsLayout.tsx
+++ b/apps/wallet-dashboard/components/dialogs/transaction/TransactionDetailsLayout.tsx
@@ -13,7 +13,6 @@ import {
 } from '@iota/core';
 import { useCurrentAccount, useIotaClientContext } from '@iota/dapp-kit';
 import { DialogLayoutBody, DialogLayoutFooter } from '../layout';
-import { Validator } from '../staking/views/Validator';
 import { Network } from '@iota/iota-sdk/client';
 
 interface TransactionDialogDetailsProps {
@@ -42,7 +41,6 @@ export function TransactionDetailsLayout({ transaction, onClose }: TransactionDi
                     activeAddress={address}
                     summary={summary}
                     renderExplorerLink={ExplorerLink}
-                    renderValidatorLogo={Validator}
                 />
             </DialogLayoutBody>
             <DialogLayoutFooter>
diff --git a/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx b/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx
index 1ccb65e2fd1..d023d8528b2 100644
--- a/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx
+++ b/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx
@@ -3,7 +3,7 @@
 
 import { StakeRewardsPanel, ValidatorStakingData } from '@/components';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
-import { Validator } from '../../staking/views/Validator';
+import { Validator } from '@iota/core';
 import { useNewUnstakeTimelockedTransaction } from '@/hooks';
 import {
     Collapsible,
diff --git a/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeView.tsx b/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeView.tsx
index a547d4b3b3a..41e5d3b11f4 100644
--- a/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeView.tsx
+++ b/apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeView.tsx
@@ -17,13 +17,14 @@ import {
     GAS_SYMBOL,
     useFormatCoin,
     useGetStakingValidatorDetails,
+    Validator,
 } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { Warning } from '@iota/apps-ui-icons';
 import { StakeRewardsPanel, ValidatorStakingData } from '@/components';
 import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
-import { Validator } from '../../staking/views/Validator';
+
 import { useNewUnstakeTransaction } from '@/hooks';
 import { IotaSignAndExecuteTransactionOutput } from '@iota/wallet-standard';
 import toast from 'react-hot-toast';
diff --git a/apps/wallet/src/ui/app/components/receipt-card/index.tsx b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
index 45119b9470e..2c8e6a82c51 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/index.tsx
+++ b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
@@ -11,8 +11,6 @@ import {
 } from '@iota/core';
 import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 
-import { CardType } from '@iota/apps-ui-kit';
-import { ValidatorLogo } from '../../staking/validators/ValidatorLogo';
 import { ExplorerLinkHelper } from '../ExplorerLinkHelper';
 import { ExplorerLink } from '../explorer-link';
 
@@ -40,14 +38,6 @@ export function ReceiptCard({ txn, activeAddress }: ReceiptCardProps) {
                 summary={summary}
                 activeAddress={activeAddress}
                 renderExplorerLink={ExplorerLinkHelper}
-                renderValidatorLogo={({ address, showActiveStatus, activeEpoch, isSelected }) => (
-                    <ValidatorLogo
-                        validatorAddress={address}
-                        showActiveStatus={showActiveStatus}
-                        activeEpoch={activeEpoch}
-                        type={isSelected ? CardType.Filled : CardType.Outlined}
-                    />
-                )}
             />
             <div className="pt-sm">
                 <ExplorerLink transactionID={digest ?? ''} type={ExplorerLinkType.Transaction}>
diff --git a/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx b/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx
index 8d007ffab9c..4ed1e6df5fa 100644
--- a/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx
+++ b/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx
@@ -14,6 +14,7 @@ import {
     useFormatCoin,
     formatPercentageDisplay,
     MIN_NUMBER_IOTA_TO_STAKE,
+    Validator,
 } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { Network, type StakeObject } from '@iota/iota-sdk/client';
@@ -34,7 +35,6 @@ import {
     LoadingIndicator,
 } from '@iota/apps-ui-kit';
 import { useNavigate } from 'react-router-dom';
-import { ValidatorLogo } from '../validators/ValidatorLogo';
 import { Warning } from '@iota/apps-ui-icons';
 import toast from 'react-hot-toast';
 
@@ -143,7 +143,7 @@ export function DelegationDetailCard({ validatorAddress, stakedId }: DelegationD
     return (
         <div className="flex h-full w-full flex-col justify-between">
             <div className="flex flex-col gap-y-md">
-                <ValidatorLogo validatorAddress={validatorAddress} type={CardType.Filled} />
+                <Validator address={validatorAddress} type={CardType.Filled} />
                 {hasInactiveValidatorDelegation ? (
                     <InfoBox
                         type={InfoBoxType.Error}
diff --git a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
index e7d750591c9..f9ecb3dfdd2 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
@@ -17,6 +17,7 @@ import {
     getStakeIotaByIotaId,
     createValidationSchema,
     MIN_NUMBER_IOTA_TO_STAKE,
+    Validator,
 } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import type { StakeObject } from '@iota/iota-sdk/client';
@@ -42,7 +43,6 @@ import {
     InfoBoxStyle,
     InfoBoxType,
 } from '@iota/apps-ui-kit';
-import { ValidatorLogo } from '../validators/ValidatorLogo';
 import { Info, Loader } from '@iota/apps-ui-icons';
 
 const INITIAL_VALUES = {
@@ -284,10 +284,7 @@ export function StakingCard() {
                     {({ isSubmitting, isValid, submitForm }) => (
                         <>
                             <div className="flex h-full flex-col gap-md overflow-auto">
-                                <ValidatorLogo
-                                    validatorAddress={validatorAddress}
-                                    type={CardType.Filled}
-                                />
+                                <Validator address={validatorAddress} type={CardType.Filled} />
                                 <ValidatorFormDetail
                                     validatorAddress={validatorAddress}
                                     unstake={unstake}
diff --git a/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx b/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx
index c3a7e9deffd..ed14f2a16db 100644
--- a/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx
+++ b/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx
@@ -3,13 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ampli } from '_src/shared/analytics/ampli';
-import { calculateStakeShare, useGetValidatorsApy } from '@iota/core';
+import { calculateStakeShare, useGetValidatorsApy, Validator } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import cl from 'clsx';
 import { useMemo, useState } from 'react';
 import { Button, InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
 import { useNavigate } from 'react-router-dom';
-import { ValidatorLogo } from './ValidatorLogo';
 import { Warning } from '@iota/apps-ui-icons';
 
 type Validator = {
@@ -96,9 +95,8 @@ export function SelectValidatorCard() {
                             })}
                             key={validator.address}
                         >
-                            <ValidatorLogo
-                                validatorAddress={validator.address}
-                                showApy
+                            <Validator
+                                address={validator.address}
                                 onClick={() => {
                                     selectValidator(validator);
                                 }}
diff --git a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx b/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx
deleted file mode 100644
index ce7d889291e..00000000000
--- a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-import {
-    Badge,
-    BadgeType,
-    Card,
-    CardAction,
-    CardActionType,
-    CardBody,
-    CardImage,
-    type CardType,
-} from '@iota/apps-ui-kit';
-import { useIotaClientQuery } from '@iota/dapp-kit';
-import { formatAddress } from '@iota/iota-sdk/utils';
-import { useMemo } from 'react';
-import { formatPercentageDisplay, useGetValidatorsApy, ImageIcon, ImageIconSize } from '@iota/core';
-
-interface ValidatorLogoProps {
-    validatorAddress: string;
-    type?: CardType;
-    showApy?: boolean;
-    showActiveStatus?: boolean;
-    activeEpoch?: string;
-    onClick?(): void;
-}
-
-export function ValidatorLogo({
-    validatorAddress,
-    type,
-    showApy,
-    showActiveStatus = false,
-    activeEpoch,
-    onClick,
-}: ValidatorLogoProps) {
-    const { data: system, isPending } = useIotaClientQuery('getLatestIotaSystemState');
-    const { data: rollingAverageApys } = useGetValidatorsApy();
-    const { apy, isApyApproxZero } = rollingAverageApys?.[validatorAddress] ?? {
-        apy: null,
-    };
-
-    const validatorMeta = useMemo(() => {
-        if (!system) return null;
-
-        return (
-            system.activeValidators.find(
-                (validator) => validator.iotaAddress === validatorAddress,
-            ) || null
-        );
-    }, [validatorAddress, system]);
-
-    const stakingPoolActivationEpoch = Number(validatorMeta?.stakingPoolActivationEpoch || 0);
-    const currentEpoch = Number(system?.epoch || 0);
-
-    // flag as new validator if the validator was activated in the last epoch
-    // for genesis validators, this will be false
-    const newValidator = currentEpoch - stakingPoolActivationEpoch <= 1 && currentEpoch !== 0;
-
-    // flag if the validator is at risk of being removed from the active set
-    const isAtRisk = system?.atRiskValidators.some((item) => item[0] === validatorAddress);
-
-    if (isPending) {
-        return <div className="flex items-center justify-center">...</div>;
-    }
-    // for inactive validators, show the epoch number
-    const fallBackText = activeEpoch
-        ? `Staked ${Number(system?.epoch) - Number(activeEpoch)} epochs ago`
-        : '--';
-    const validatorName = validatorMeta?.name || fallBackText;
-
-    const subtitle = validatorAddress ? (
-        showActiveStatus ? (
-            <div className="flex items-center gap-1">
-                {formatAddress(validatorAddress)}
-                {newValidator && <Badge label="New" type={BadgeType.PrimarySoft} />}
-                {isAtRisk && <Badge label="At Risk" type={BadgeType.PrimarySolid} />}
-            </div>
-        ) : (
-            formatAddress(validatorAddress)
-        )
-    ) : (
-        '--'
-    );
-    return (
-        <>
-            <Card type={type} onClick={onClick}>
-                <CardImage>
-                    <ImageIcon
-                        src={validatorMeta?.imageUrl ?? null}
-                        label={validatorName}
-                        fallback={validatorName}
-                        size={ImageIconSize.Large}
-                    />
-                </CardImage>
-                <CardBody title={validatorName} subtitle={subtitle} isTextTruncated />
-                {showApy && (
-                    <CardAction
-                        type={CardActionType.SupportingText}
-                        title={formatPercentageDisplay(apy, '-', isApyApproxZero)}
-                    />
-                )}
-            </Card>
-        </>
-    );
-}