refactor(core, dashboard, wallet): move ValidatorLogo to apps/core and use it in Unstake Details

apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx → apps/core/src/components/Validator.tsx

@@ -1,6 +1,8 @@
-// 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 React from 'react';
+import { ImageIcon, ImageIconSize, formatPercentageDisplay, useValidatorInfo } from '../';
 import {
     Card,
     CardBody,
@@ -10,21 +12,27 @@ 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;
+    showApy?: boolean;
     showActiveStatus?: boolean;
-    onClick?: (address: string) => void;
+    onClick?: () => void;
     showAction?: boolean;
     activeEpoch?: string;
 }
 
 export function Validator({
     address,
-    showActiveStatus,
+    type,
+    showApy,
+    showActiveStatus = false,
     onClick,
     isSelected,
     showAction = true,
@@ -38,10 +46,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 +83,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,6 +94,12 @@ export function Validator({
                 />
             </CardImage>
             <CardBody title={validatorDisplayName} subtitle={subtitle} isTextTruncated />
+            {showApy && (
+                <CardAction
+                    type={CardActionType.SupportingText}
+                    title={formatPercentageDisplay(apy, '-', isApyApproxZero)}
+                />
+            )}
             {showAction && (
                 <CardAction
                     type={CardActionType.SupportingText}

apps/core/src/components/index.ts

@@ -12,3 +12,4 @@ export * from './buttons';
 export * from './collapsible';
 export * from './providers';
 export * from './stake';
+export * from './Validator';

apps/core/src/components/transaction/TransactionReceipt.tsx

@@ -10,22 +10,20 @@ 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';
 
 interface TransactionReceiptProps {
     txn: IotaTransactionBlockResponse;
     activeAddress: string | null;
     summary: Exclude<ReturnType<typeof useTransactionSummary>, null>;
-    renderValidatorLogo: RenderValidatorLogo;
     renderExplorerLink: RenderExplorerLink;
 }
 
 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}
                 </>

apps/core/src/components/transaction/details/StakeTransactionDetails.tsx

@@ -1,27 +1,27 @@
 // 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 } 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;
 }
 
 export function StakeTransactionDetails({
     event,
     gasSummary,
     activeAddress,
-    renderValidatorLogo: ValidatorLogo,
     renderExplorerLink,
 }: StakeTransactionDetailsProps) {
     const json = event.parsedJson as {
@@ -42,11 +42,11 @@ export function StakeTransactionDetails({
     return (
         <div className="flex flex-col gap-y-md">
             {validatorAddress && (
-                <ValidatorLogo
+                <Validator
                     address={validatorAddress}
                     showActiveStatus
                     activeEpoch={json.epoch}
-                    isSelected
+                    type={CardType.Filled}
                 />
             )}
             {stakedAmount && (

apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx

@@ -6,15 +6,14 @@ import React from 'react';
 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 } from '../../..';
+import { Divider, KeyValueInfo, Panel, CardType } from '@iota/apps-ui-kit';
+import { GasSummary, Validator } from '../../..';
 
 interface UnstakeTransactionInfoProps {
     activeAddress: string | null;
     event: IotaEvent;
-    renderValidatorLogo: RenderValidatorLogo;
     renderExplorerLink: RenderExplorerLink;
     gasSummary?: GasSummaryType;
 }
@@ -23,7 +22,6 @@ export function UnstakeTransactionInfo({
     activeAddress,
     event,
     gasSummary,
-    renderValidatorLogo: ValidatorLogo,
     renderExplorerLink,
 }: UnstakeTransactionInfoProps) {
     const json = event.parsedJson as {
@@ -40,7 +38,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" />
             )}

apps/core/src/interfaces/index.ts

@@ -1,5 +1,4 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './validatorLogo.interfaces';
 export * from './balanceChange.interfaces';

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;

apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { useFormatCoin, useStakeTxnInfo } from '@iota/core';
+import { useFormatCoin, useStakeTxnInfo, Validator } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import {
     Button,
@@ -20,8 +20,6 @@ import {
 import { Field, type FieldProps, useFormikContext } from 'formik';
 import { Exclamation, Loader } from '@iota/ui-icons';
 import { useIotaClientQuery } from '@iota/dapp-kit';
-
-import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 

apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 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 {
@@ -32,7 +32,7 @@ function SelectValidatorView({
                             <Validator
                                 key={validator}
                                 address={validator}
-                                onClick={onSelect}
+                                onClick={() => onSelect(validator)}
                                 isSelected={selectedValidator === validator}
                             />
                         ))}

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">

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>

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,

apps/wallet-dashboard/components/Dialogs/unstake/views/UnstakeView.tsx

@@ -17,13 +17,13 @@ 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/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';

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}>

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';
@@ -35,7 +36,6 @@ import {
     LoadingIndicator,
 } from '@iota/apps-ui-kit';
 import { useNavigate } from 'react-router-dom';
-import { ValidatorLogo } from '../validators/ValidatorLogo';
 import { Warning } from '@iota/ui-icons';
 
 interface DelegationDetailCardProps {
@@ -153,7 +153,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}