From fdc511d4c3611aaea9a9c746830367f5e606f241 Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Thu, 12 Dec 2024 14:36:43 +0200 Subject: [PATCH 01/10] refactor: move ValidatorLogo --- .../validators => core/src/components}/ValidatorLogo.tsx | 2 +- apps/core/src/components/index.ts | 1 + apps/wallet/src/ui/app/components/receipt-card/index.tsx | 2 +- .../ui/app/staking/delegation-detail/DelegationDetailCard.tsx | 2 +- apps/wallet/src/ui/app/staking/stake/StakingCard.tsx | 2 +- .../src/ui/app/staking/validators/SelectValidatorCard.tsx | 3 +-- 6 files changed, 6 insertions(+), 6 deletions(-) rename apps/{wallet/src/ui/app/staking/validators => core/src/components}/ValidatorLogo.tsx (98%) diff --git a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx b/apps/core/src/components/ValidatorLogo.tsx similarity index 98% rename from apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx rename to apps/core/src/components/ValidatorLogo.tsx index bf8d05a97b6..837c3704694 100644 --- a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx +++ b/apps/core/src/components/ValidatorLogo.tsx @@ -14,7 +14,7 @@ import { 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'; +import { formatPercentageDisplay, useGetValidatorsApy, ImageIcon, ImageIconSize } from '../'; interface ValidatorLogoProps { validatorAddress: string; diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts index 01683e56bb0..458e7a84eae 100644 --- a/apps/core/src/components/index.ts +++ b/apps/core/src/components/index.ts @@ -12,3 +12,4 @@ export * from './buttons'; export * from './collapsible'; export * from './providers'; export * from './stake'; +export * from './ValidatorLogo'; 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 3bba1a45a7f..7fa3d6898c2 100644 --- a/apps/wallet/src/ui/app/components/receipt-card/index.tsx +++ b/apps/wallet/src/ui/app/components/receipt-card/index.tsx @@ -8,11 +8,11 @@ import { TransactionReceipt, ExplorerLinkType, ViewTxnOnExplorerButton, + ValidatorLogo, } 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'; 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 d55abd8b0b7..74b5a11fd27 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, + ValidatorLogo, } 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 { diff --git a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx index a4f94a5de47..f079f569e92 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, + ValidatorLogo, } from '@iota/core'; import { useIotaClientQuery } from '@iota/dapp-kit'; import type { StakeObject } from '@iota/iota-sdk/client'; @@ -43,7 +44,6 @@ import { InfoBoxStyle, InfoBoxType, } from '@iota/apps-ui-kit'; -import { ValidatorLogo } from '../validators/ValidatorLogo'; import { Info, Loader } from '@iota/ui-icons'; const INITIAL_VALUES = { diff --git a/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx b/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx index 015463bc23d..dccde4811ea 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, ValidatorLogo } 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/ui-icons'; type Validator = { From 756a4b18cb8e624cf72255a5262c82c586aa308e Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Thu, 12 Dec 2024 15:43:17 +0200 Subject: [PATCH 02/10] refactor: remove renderValidatorLogo --- .../src/components/transaction/TransactionReceipt.tsx | 6 +----- .../transaction/details/StakeTransactionDetails.tsx | 10 +++++----- .../transaction/info/UnstakeTransactionInfo.tsx | 11 ++++++----- apps/core/src/types/renderComponent.ts | 2 -- .../components/Dialogs/TransactionDialog.tsx | 2 -- .../components/transactions/TransactionTile.tsx | 2 -- .../src/ui/app/components/receipt-card/index.tsx | 10 ---------- 7 files changed, 12 insertions(+), 31 deletions(-) diff --git a/apps/core/src/components/transaction/TransactionReceipt.tsx b/apps/core/src/components/transaction/TransactionReceipt.tsx index 99cac6112af..ebb146889c8 100644 --- a/apps/core/src/components/transaction/TransactionReceipt.tsx +++ b/apps/core/src/components/transaction/TransactionReceipt.tsx @@ -10,14 +10,13 @@ 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, 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 c9e247f3d12..6e8d637bd5a 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 } 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 { ValidatorLogo } 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 json = event.parsedJson as { @@ -43,10 +43,10 @@ export function StakeTransactionDetails({
{validatorAddress && ( )} {stakedAmount && ( diff --git a/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx index bb69cf69226..5132dbe2c2e 100644 --- a/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx +++ b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx @@ -3,18 +3,18 @@ // SPDX-License-Identifier: Apache-2.0 import React from 'react'; +import { CardType } from '@iota/apps-ui-kit'; 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 { GasSummary, ValidatorLogo } from '../../..'; interface UnstakeTransactionInfoProps { activeAddress: string | null; event: IotaEvent; - renderValidatorLogo: RenderValidatorLogo; renderExplorerLink: RenderExplorerLink; gasSummary?: GasSummaryType; } @@ -23,7 +23,6 @@ export function UnstakeTransactionInfo({ activeAddress, event, gasSummary, - renderValidatorLogo: ValidatorLogo, renderExplorerLink, }: UnstakeTransactionInfoProps) { const json = event.parsedJson as { @@ -40,7 +39,9 @@ export function UnstakeTransactionInfo({ return (
- {validatorAddress && } + {validatorAddress && ( + + )} {totalAmount && ( )} 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; 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 c1b6a845b01..e4d8877c64c 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} /> ) : ( diff --git a/apps/wallet-dashboard/components/transactions/TransactionTile.tsx b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx index 405a02e76c6..945d787fcea 100644 --- a/apps/wallet-dashboard/components/transactions/TransactionTile.tsx +++ b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx @@ -32,7 +32,6 @@ import { import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { useCurrentAccount } from '@iota/dapp-kit'; import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../Dialogs/layout'; -import { Validator } from '../Dialogs/Staking/views/Validator'; interface TransactionTileProps { transaction: ExtendedTransaction; @@ -120,7 +119,6 @@ function ActivityDetailsDialog({ activeAddress={address} summary={summary} renderExplorerLink={ExplorerLink} - renderValidatorLogo={Validator} /> 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 7fa3d6898c2..45cf1433926 100644 --- a/apps/wallet/src/ui/app/components/receipt-card/index.tsx +++ b/apps/wallet/src/ui/app/components/receipt-card/index.tsx @@ -8,11 +8,9 @@ import { TransactionReceipt, ExplorerLinkType, ViewTxnOnExplorerButton, - ValidatorLogo, } from '@iota/core'; import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client'; -import { CardType } from '@iota/apps-ui-kit'; 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 }) => ( - - )} />
From 68f6d1902e7f369180c5a127537ca9a3cec5ccee Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Thu, 12 Dec 2024 16:00:21 +0200 Subject: [PATCH 03/10] refactor: rename ValidatorLogo component to Validator and update imports --- apps/core/src/components/{ValidatorLogo.tsx => Validator.tsx} | 2 +- apps/core/src/components/index.ts | 2 +- .../transaction/details/StakeTransactionDetails.tsx | 4 ++-- .../components/transaction/info/UnstakeTransactionInfo.tsx | 4 ++-- .../ui/app/staking/delegation-detail/DelegationDetailCard.tsx | 4 ++-- apps/wallet/src/ui/app/staking/stake/StakingCard.tsx | 4 ++-- .../src/ui/app/staking/validators/SelectValidatorCard.tsx | 4 ++-- 7 files changed, 12 insertions(+), 12 deletions(-) rename apps/core/src/components/{ValidatorLogo.tsx => Validator.tsx} (99%) diff --git a/apps/core/src/components/ValidatorLogo.tsx b/apps/core/src/components/Validator.tsx similarity index 99% rename from apps/core/src/components/ValidatorLogo.tsx rename to apps/core/src/components/Validator.tsx index 837c3704694..1d3d9aadad1 100644 --- a/apps/core/src/components/ValidatorLogo.tsx +++ b/apps/core/src/components/Validator.tsx @@ -25,7 +25,7 @@ interface ValidatorLogoProps { onClick?(): void; } -export function ValidatorLogo({ +export function Validator({ validatorAddress, type, showApy, diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts index 458e7a84eae..08ec0f2d601 100644 --- a/apps/core/src/components/index.ts +++ b/apps/core/src/components/index.ts @@ -12,4 +12,4 @@ export * from './buttons'; export * from './collapsible'; export * from './providers'; export * from './stake'; -export * from './ValidatorLogo'; +export * from './Validator'; diff --git a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx index 6e8d637bd5a..43479885226 100644 --- a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx +++ b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx @@ -8,7 +8,7 @@ import { useGetValidatorsApy } from '../../../hooks'; import { TransactionAmount } from '../amount'; import { StakeTransactionInfo } from '../info'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; -import { ValidatorLogo } from '../../../'; +import { Validator } from '../../../'; import type { GasSummaryType, RenderExplorerLink } from '../../../types'; interface StakeTransactionDetailsProps { @@ -42,7 +42,7 @@ export function StakeTransactionDetails({ return (
{validatorAddress && ( - {validatorAddress && ( - + )} {totalAmount && ( 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 74b5a11fd27..fbb3461a709 100644 --- a/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx +++ b/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx @@ -14,7 +14,7 @@ import { useFormatCoin, formatPercentageDisplay, MIN_NUMBER_IOTA_TO_STAKE, - ValidatorLogo, + Validator, } from '@iota/core'; import { useIotaClientQuery } from '@iota/dapp-kit'; import { Network, type StakeObject } from '@iota/iota-sdk/client'; @@ -153,7 +153,7 @@ export function DelegationDetailCard({ validatorAddress, stakedId }: DelegationD return (
- + {hasInactiveValidatorDelegation ? ( ( <>
- diff --git a/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx b/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx index dccde4811ea..fe4d0cb0f9e 100644 --- a/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx +++ b/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: Apache-2.0 import { ampli } from '_src/shared/analytics/ampli'; -import { calculateStakeShare, useGetValidatorsApy, ValidatorLogo } 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'; @@ -95,7 +95,7 @@ export function SelectValidatorCard() { })} key={validator.address} > - { From 491d74589885af6daa51417526f6207b36644ca4 Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Thu, 12 Dec 2024 16:17:40 +0200 Subject: [PATCH 04/10] refactor: compare & join 2 Validators --- apps/core/src/components/Validator.tsx | 118 ++++++++++++------------- 1 file changed, 57 insertions(+), 61 deletions(-) diff --git a/apps/core/src/components/Validator.tsx b/apps/core/src/components/Validator.tsx index 1d3d9aadad1..4744e61d9fd 100644 --- a/apps/core/src/components/Validator.tsx +++ b/apps/core/src/components/Validator.tsx @@ -1,101 +1,97 @@ // Copyright (c) Mysten Labs, Inc. // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 +import React from 'react'; +import { ImageIcon, ImageIconSize, formatPercentageDisplay, useValidatorInfo } from '../'; import { - Badge, - BadgeType, Card, - CardAction, - CardActionType, CardBody, CardImage, - type CardType, + CardAction, + CardActionType, + CardType, + Badge, + BadgeType, } 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 '../'; -interface ValidatorLogoProps { +interface ValidatorProps { + isSelected?: boolean; validatorAddress: string; type?: CardType; showApy?: boolean; showActiveStatus?: boolean; - activeEpoch?: string; onClick?(): void; + showAction?: boolean; + activeEpoch?: string; } export function Validator({ - validatorAddress, + validatorAddress: address, 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); + isSelected, + showAction = true, + activeEpoch, +}: ValidatorProps) { + const { + name: validatorName, + newValidator, + isAtRisk, + apy, + isApyApproxZero, + validatorSummary, + system, + isPendingValidators, + } = useValidatorInfo({ + validatorAddress: address, + }); - if (isPending) { + if (isPendingValidators) { return
...
; } // for inactive validators, show the epoch number const fallBackText = activeEpoch ? `Staked ${Number(system?.epoch) - Number(activeEpoch)} epochs ago` : ''; - const validatorName = validatorMeta?.name || fallBackText; + + const validatorDisplayName = validatorName || fallBackText; const subtitle = showActiveStatus ? (
- {formatAddress(validatorAddress)} + {formatAddress(address)} {newValidator && } {isAtRisk && }
) : ( - formatAddress(validatorAddress) + formatAddress(address) ); return ( - <> - - - - - - {showApy && ( - - )} - - + + + + + + {showApy && ( + + )} + {showAction && ( + + )} + ); } From 608b1f7f0d171273de874aaf479e4b968a3f2528 Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Thu, 12 Dec 2024 16:23:19 +0200 Subject: [PATCH 05/10] refactor: rename property, use Validator from iota/core. --- apps/core/src/components/Validator.tsx | 4 +- .../details/StakeTransactionDetails.tsx | 2 +- .../info/UnstakeTransactionInfo.tsx | 4 +- .../Dialogs/Staking/views/EnterAmountView.tsx | 3 +- .../views/EnterTimelockedAmountView.tsx | 3 +- .../Staking/views/SelectValidatorView.tsx | 4 +- .../Dialogs/Staking/views/Validator.tsx | 84 ------------------- 7 files changed, 8 insertions(+), 96 deletions(-) delete mode 100644 apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx diff --git a/apps/core/src/components/Validator.tsx b/apps/core/src/components/Validator.tsx index 4744e61d9fd..926127c7bff 100644 --- a/apps/core/src/components/Validator.tsx +++ b/apps/core/src/components/Validator.tsx @@ -17,7 +17,7 @@ import { formatAddress } from '@iota/iota-sdk/utils'; interface ValidatorProps { isSelected?: boolean; - validatorAddress: string; + address: string; type?: CardType; showApy?: boolean; showActiveStatus?: boolean; @@ -27,7 +27,7 @@ interface ValidatorProps { } export function Validator({ - validatorAddress: address, + address, type, showApy, showActiveStatus = false, diff --git a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx index 43479885226..7470f93b10f 100644 --- a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx +++ b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx @@ -43,7 +43,7 @@ export function StakeTransactionDetails({
{validatorAddress && ( - {validatorAddress && ( - - )} + {validatorAddress && } {totalAmount && ( )} diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx index b3869faed2b..0e5c1a6c46f 100644 --- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx +++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx @@ -9,6 +9,7 @@ import { parseAmount, useCoinMetadata, useStakeTxnInfo, + Validator, } from '@iota/core'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { @@ -27,8 +28,6 @@ import { import { Field, type FieldProps, useFormikContext } from 'formik'; import { Exclamation } from '@iota/ui-icons'; import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit'; - -import { Validator } from './Validator'; import { StakedInfo } from './StakedInfo'; import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout'; diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx index 9eaeb41b6a2..fbf751583be 100644 --- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx +++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import React from 'react'; -import { useFormatCoin, CoinFormat, useStakeTxnInfo } from '@iota/core'; +import { useFormatCoin, CoinFormat, useStakeTxnInfo, Validator } from '@iota/core'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { Button, @@ -21,7 +21,6 @@ import { Field, type FieldProps, useFormikContext } from 'formik'; import { Exclamation, Loader } from '@iota/ui-icons'; import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit'; -import { Validator } from './Validator'; import { StakedInfo } from './StakedInfo'; import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout'; diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx index 626cbf05990..a0a6e6baf02 100644 --- a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx +++ b/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({ onSelect(validator)} isSelected={selectedValidator === validator} /> ))} diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx deleted file mode 100644 index a76ed05db57..00000000000 --- a/apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx +++ /dev/null @@ -1,84 +0,0 @@ -// Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 -import { ImageIcon, ImageIconSize, formatPercentageDisplay, useValidatorInfo } from '@iota/core'; -import { - Card, - CardBody, - CardImage, - CardAction, - CardActionType, - CardType, - Badge, - BadgeType, -} from '@iota/apps-ui-kit'; -import { formatAddress } from '@iota/iota-sdk/utils'; - -interface ValidatorProps { - isSelected: boolean; - address: string; - showActiveStatus?: boolean; - onClick?: (address: string) => void; - showAction?: boolean; - activeEpoch?: string; -} - -export function Validator({ - address, - showActiveStatus, - onClick, - isSelected, - showAction = true, - activeEpoch, -}: ValidatorProps) { - const { - name: validatorName, - newValidator, - isAtRisk, - apy, - isApyApproxZero, - validatorSummary, - system, - } = useValidatorInfo({ - validatorAddress: address, - }); - - // for inactive validators, show the epoch number - const fallBackText = activeEpoch - ? `Staked ${Number(system?.epoch) - Number(activeEpoch)} epochs ago` - : ''; - - const validatorDisplayName = validatorName || fallBackText; - - const subtitle = showActiveStatus ? ( -
- {formatAddress(address)} - {newValidator && } - {isAtRisk && } -
- ) : ( - formatAddress(address) - ); - - const handleClick = onClick ? () => onClick(address) : undefined; - - return ( - - - - - - {showAction && ( - - )} - - ); -} From ddee854dcd184e18565548860d9c00d4c90dfe88 Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Thu, 12 Dec 2024 17:07:21 +0200 Subject: [PATCH 06/10] refactor: rename validatorAddress prop to address in Validator component usage --- .../app/staking/delegation-detail/DelegationDetailCard.tsx | 2 +- apps/wallet/src/ui/app/staking/stake/StakingCard.tsx | 5 +---- .../src/ui/app/staking/validators/SelectValidatorCard.tsx | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) 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 fbb3461a709..d91a474ef8c 100644 --- a/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx +++ b/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx @@ -153,7 +153,7 @@ export function DelegationDetailCard({ validatorAddress, stakedId }: DelegationD return (
- + {hasInactiveValidatorDelegation ? ( ( <>
- + { selectValidator(validator); From 39306785cf6b62b20c0bbc7fac6a84a3280475c7 Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Fri, 13 Dec 2024 16:08:25 +0200 Subject: [PATCH 07/10] refactor(core): update onClick type and remove unused interface --- apps/core/src/components/Validator.tsx | 2 +- apps/core/src/interfaces/index.ts | 1 - apps/core/src/interfaces/validatorLogo.interfaces.ts | 9 --------- 3 files changed, 1 insertion(+), 11 deletions(-) delete mode 100644 apps/core/src/interfaces/validatorLogo.interfaces.ts diff --git a/apps/core/src/components/Validator.tsx b/apps/core/src/components/Validator.tsx index 926127c7bff..59d6cacd3b8 100644 --- a/apps/core/src/components/Validator.tsx +++ b/apps/core/src/components/Validator.tsx @@ -21,7 +21,7 @@ interface ValidatorProps { type?: CardType; showApy?: boolean; showActiveStatus?: boolean; - onClick?(): void; + onClick?: () => void; showAction?: boolean; activeEpoch?: string; } diff --git a/apps/core/src/interfaces/index.ts b/apps/core/src/interfaces/index.ts index 3194d2ae0a1..6b7810baaea 100644 --- a/apps/core/src/interfaces/index.ts +++ b/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'; 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; -} From 2e38e2dafc28c8425e4c39f074b83f828f1cdb2b Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Tue, 17 Dec 2024 19:57:36 +0200 Subject: [PATCH 08/10] refactor(dashboard): update Validator after merge conflicts --- .../components/Dialogs/transaction/TransactionDetailsLayout.tsx | 2 -- .../Dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx | 2 +- .../components/Dialogs/unstake/views/UnstakeView.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/wallet-dashboard/components/Dialogs/transaction/TransactionDetailsLayout.tsx b/apps/wallet-dashboard/components/Dialogs/transaction/TransactionDetailsLayout.tsx index 44bc9474a6a..67f0fece19d 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} /> diff --git a/apps/wallet-dashboard/components/Dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx b/apps/wallet-dashboard/components/Dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx index 45e34ee5cf0..67d9909c2ac 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, useNotifications } 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 5d07eadcec3..be484f563c2 100644 --- a/apps/wallet-dashboard/components/Dialogs/unstake/views/UnstakeView.tsx +++ b/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, useNotifications } from '@/hooks'; import { IotaSignAndExecuteTransactionOutput } from '@iota/wallet-standard'; import { NotificationType } from '@/stores/notificationStore'; From fe9ca29aa7934e09cb3669db38348f9b022b5c0f Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Wed, 18 Dec 2024 16:03:18 +0200 Subject: [PATCH 09/10] feat(core): enhance validator's loading state with skeleton components --- apps/core/src/components/Validator.tsx | 17 ++++++++++++++++- .../Staking/views/EnterAmountDialogLayout.tsx | 4 +--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/apps/core/src/components/Validator.tsx b/apps/core/src/components/Validator.tsx index 59d6cacd3b8..38cf4745f8f 100644 --- a/apps/core/src/components/Validator.tsx +++ b/apps/core/src/components/Validator.tsx @@ -12,6 +12,8 @@ import { CardType, Badge, BadgeType, + ImageShape, + Skeleton, } from '@iota/apps-ui-kit'; import { formatAddress } from '@iota/iota-sdk/utils'; @@ -50,7 +52,20 @@ export function Validator({ }); if (isPendingValidators) { - return
...
; + return ( + + + + +
+ + +
+
+ +
+ + ); } // for inactive validators, show the epoch number const fallBackText = activeEpoch diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx index 9ec233b1838..26cef542124 100644 --- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx +++ b/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'; From 8e650d6f8d8ce9e7cf6c5a0f6e048634f59f667f Mon Sep 17 00:00:00 2001 From: Panteleymonchuk Date: Mon, 23 Dec 2024 11:41:21 +0200 Subject: [PATCH 10/10] fix(core): Import CardType from apps-ui-kit in UnstakeTransactionInfo component --- .../src/components/transaction/info/UnstakeTransactionInfo.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx index 8f19a3265c5..10df05910d4 100644 --- a/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx +++ b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx @@ -3,13 +3,12 @@ // SPDX-License-Identifier: Apache-2.0 import React from 'react'; -import { CardType } from '@iota/apps-ui-kit'; 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 } from '../../../types'; import { useFormatCoin } from '../../../hooks'; -import { Divider, KeyValueInfo, Panel } from '@iota/apps-ui-kit'; +import { Divider, KeyValueInfo, Panel, CardType } from '@iota/apps-ui-kit'; import { GasSummary, Validator } from '../../..'; interface UnstakeTransactionInfoProps {