refactor(apps-core, wallet-dashboard, wallet): move ValidatorLogo to …

…apps/core and use it in Unstake Details (#4475) * refactor: move ValidatorLogo * refactor: remove renderValidatorLogo * refactor: rename ValidatorLogo component to Validator and update imports * refactor: compare & join 2 Validators * refactor: rename property, use Validator from iota/core. * refactor: rename validatorAddress prop to address in Validator component usage * refactor(core): update onClick type and remove unused interface * refactor(dashboard): update Validator after merge conflicts * feat(core): enhance validator's loading state with skeleton components * fix(core): Import CardType from apps-ui-kit in UnstakeTransactionInfo component * feat(core): improve showApy property * refactor(core): remove unused React import from Validator component * fix(core): change activeEpoch type from string to number --------- Co-authored-by: Bran <[email protected]> Co-authored-by: JCNoguera <[email protected]> Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Jan 20, 2025 · 6d414cf · 6d414cf
1 parent 71fcd97
commit 6d414cf
Show file tree

Hide file tree

Showing 19 changed files with 58 additions and 180 deletions.
diff --git a/...nents/dialogs/staking/views/Validator.tsx → apps/core/src/components/Validator.tsx b/...nents/dialogs/staking/views/Validator.tsx → 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
@@ -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
@@ -9,23 +9,21 @@ 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';
 
 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}
                 </>

diff --git a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx b/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, 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;
 }
 
 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}>