feat(wallet-dashboard): add staking confirmation screen

apps/core/src/components/coin/CoinIcon.tsx

@@ -3,10 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { useCoinMetadata } from '../../hooks';
+import { useCoinMetadata, ImageIcon, ImageIconSize } from '../../index';
 import { IotaLogoMark } from '@iota/ui-icons';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { ImageIcon, ImageIconSize } from '../icon';
 import cx from 'clsx';
 
 interface NonIotaCoinProps {

apps/core/src/constants/staking.constants.ts

@@ -6,3 +6,6 @@ export const UNSTAKING_REQUEST_EVENT = '0x3::validator::UnstakingRequestEvent';
 
 export const DELEGATED_STAKES_QUERY_STALE_TIME = 10_000;
 export const DELEGATED_STAKES_QUERY_REFETCH_INTERVAL = 30_000;
+
+export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE = 2;
+export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS = 1;

apps/core/src/hooks/stake/index.ts

@@ -4,3 +4,5 @@
 export * from './useGetDelegatedStake';
 export * from './useTotalDelegatedRewards';
 export * from './useTotalDelegatedStake';
+export * from './useValidatorInfo';
+export * from './useStakeTxnInfo';

apps/core/src/hooks/stake/useStakeTxnInfo.ts

@@ -0,0 +1,52 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import {
+    useGetTimeBeforeEpochNumber,
+    useTimeAgo,
+    TimeUnit,
+    NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE,
+    NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS,
+} from '../../index';
+
+export function useStakeTxnInfo(startEpoch?: string | number) {
+    const startEarningRewardsEpoch =
+        Number(startEpoch || 0) + NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS;
+
+    const redeemableRewardsEpoch =
+        Number(startEpoch || 0) + NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE;
+
+    const { data: timeBeforeStakeRewardsStarts } =
+        useGetTimeBeforeEpochNumber(startEarningRewardsEpoch);
+    const timeBeforeStakeRewardsStartsAgo = useTimeAgo({
+        timeFrom: timeBeforeStakeRewardsStarts,
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
+    const stakedRewardsStartEpoch =
+        timeBeforeStakeRewardsStarts > 0
+            ? `in ${timeBeforeStakeRewardsStartsAgo}`
+            : startEpoch
+              ? `Epoch #${Number(startEarningRewardsEpoch)}`
+              : '--';
+
+    const { data: timeBeforeStakeRewardsRedeemable } =
+        useGetTimeBeforeEpochNumber(redeemableRewardsEpoch);
+    const timeBeforeStakeRewardsRedeemableAgo = useTimeAgo({
+        timeFrom: timeBeforeStakeRewardsRedeemable,
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
+    const timeBeforeStakeRewardsRedeemableAgoDisplay =
+        timeBeforeStakeRewardsRedeemable > 0
+            ? `in ${timeBeforeStakeRewardsRedeemableAgo}`
+            : startEpoch
+              ? `Epoch #${Number(redeemableRewardsEpoch)}`
+              : '--';
+
+    return {
+        stakedRewardsStartEpoch,
+        timeBeforeStakeRewardsRedeemableAgoDisplay,
+    };
+}

apps/core/src/hooks/stake/useValidatorInfo.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useIotaClientQuery } from '@iota/dapp-kit';
+import { useGetValidatorsApy } from '../';
+import { getTotalValidatorStake } from '../../utils';
+
+export function useValidatorInfo({ validatorAddress }: { validatorAddress: string }) {
+    const {
+        data: system,
+        isPending: isPendingValidators,
+        isError: errorValidators,
+    } = useIotaClientQuery('getLatestIotaSystemState');
+    const { data: rollingAverageApys } = useGetValidatorsApy();
+
+    const validatorSummary =
+        system?.activeValidators.find((validator) => validator.iotaAddress === validatorAddress) ||
+        null;
+
+    const currentEpoch = Number(system?.epoch || 0);
+
+    const totalValidatorStake = getTotalValidatorStake(validatorSummary);
+
+    const stakingPoolActivationEpoch = Number(validatorSummary?.stakingPoolActivationEpoch || 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);
+
+    const { apy, isApyApproxZero } = rollingAverageApys?.[validatorAddress] ?? {
+        apy: null,
+    };
+
+    const commission = validatorSummary ? Number(validatorSummary.commissionRate) / 100 : 0;
+
+    return {
+        system,
+        isPendingValidators,
+        errorValidators,
+
+        currentEpoch,
+        validatorSummary,
+        name: validatorSummary?.name || '',
+        stakingPoolActivationEpoch,
+        commission,
+        newValidator,
+        isAtRisk,
+        apy,
+        isApyApproxZero,
+        totalValidatorStake,
+    };
+}

apps/core/src/hooks/useGetValidatorsApy.ts

@@ -13,11 +13,13 @@ import { roundFloat } from '../utils/roundFloat';
 
 const DEFAULT_APY_DECIMALS = 2;
 
+export interface ValidatorApyData {
+    apy: number;
+    isApyApproxZero: boolean;
+}
+
 export interface ApyByValidator {
-    [validatorAddress: string]: {
-        apy: number;
-        isApyApproxZero: boolean;
-    };
+    [validatorAddress: string]: ValidatorApyData;
 }
 // For small APY, show ~0% instead of 0%
 // If APY falls below 0.001, show ~0% instead of 0% since we round to 2 decimal places

apps/core/src/utils/formatApy.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function formatApy(apy: number, isApyApproxZero: boolean = false): string {
+    return isApyApproxZero ? '~0%' : `${apy}%`;
+}

apps/core/src/utils/index.ts

@@ -21,6 +21,7 @@ export * from './getDelegationDataByStakeId';
 export * from './api-env';
 export * from './getExplorerPaths';
 export * from './getExplorerLink';
+export * from './formatApy';
 
 export * from './stake';
 export * from './transaction';

apps/wallet/src/ui/app/staking/stake/utils/validation.ts → apps/core/src/utils/stake/createValidationSchema.ts

@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { CoinFormat, formatBalance } from '@iota/core';
+import { CoinFormat, formatBalance } from '../../index';
 import BigNumber from 'bignumber.js';
 import { mixed, object } from 'yup';
 

apps/core/src/utils/stake/getTotalValidatorStake.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IotaValidatorSummary } from '@iota/iota-sdk/client';
+
+//TODO: verify this is the correct validator stake balance
+export function getTotalValidatorStake(validatorSummary: IotaValidatorSummary | null) {
+    return validatorSummary?.stakingPoolIotaBalance || 0;
+}

apps/core/src/utils/stake/index.ts

@@ -6,3 +6,5 @@ export * from './formatDelegatedStake';
 export * from './createStakeTransaction';
 export * from './createTimelockedUnstakeTransaction';
 export * from './createTimelockedStakeTransaction';
+export * from './createValidationSchema';
+export * from './getTotalValidatorStake';

apps/wallet-dashboard/app/(protected)/staking/page.tsx

@@ -4,7 +4,8 @@
 'use client';
 
 import { AmountBox, Box, StakeCard, StakeDialog, Button } from '@/components';
-import { StakeDetailsDialog } from '@/components/Dialogs';
+import { useStakeDialog } from '@/components/Dialogs/Staking/hooks/useStakeDialog';
+
 import {
     ExtendedDelegatedStake,
     formatDelegatedStake,
@@ -17,12 +18,22 @@ import {
 } from '@iota/core';
 import { useCurrentAccount } from '@iota/dapp-kit';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { useState } from 'react';
+import { StakeDialogView } from '@/components/Dialogs/Staking/StakeDialog';
 
 function StakingDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
-    const [isDialogStakeOpen, setIsDialogStakeOpen] = useState(false);
-    const [selectedStake, setSelectedStake] = useState<ExtendedDelegatedStake | null>(null);
+
+    const {
+        isDialogStakeOpen,
+        stakeDialogView,
+        setStakeDialogView,
+        selectedStake,
+        setSelectedStake,
+        selectedValidator,
+        setSelectedValidator,
+        handleCloseStakeDialog,
+        handleNewStake,
+    } = useStakeDialog();
 
     const { data: delegatedStakeData } = useGetDelegatedStake({
         address: account?.address || '',
@@ -43,13 +54,10 @@ function StakingDashboardPage(): JSX.Element {
     );
 
     const viewStakeDetails = (extendedStake: ExtendedDelegatedStake) => {
+        setStakeDialogView(StakeDialogView.Details);
         setSelectedStake(extendedStake);
     };
 
-    function handleNewStake() {
-        setIsDialogStakeOpen(true);
-    }
-
     return (
         <>
             <div className="flex flex-col items-center justify-center gap-4 pt-12">
@@ -79,12 +87,15 @@ function StakingDashboardPage(): JSX.Element {
                 </Box>
                 <Button onClick={handleNewStake}>New Stake</Button>
             </div>
-            <StakeDialog isOpen={isDialogStakeOpen} setOpen={setIsDialogStakeOpen} />;
-            {selectedStake && (
-                <StakeDetailsDialog
-                    extendedStake={selectedStake}
-                    handleClose={() => setSelectedStake(null)}
-                    showActiveStatus
+            {isDialogStakeOpen && stakeDialogView && (
+                <StakeDialog
+                    stakedDetails={selectedStake}
+                    isOpen={isDialogStakeOpen}
+                    handleClose={handleCloseStakeDialog}
+                    view={stakeDialogView}
+                    setView={setStakeDialogView}
+                    selectedValidator={selectedValidator}
+                    setSelectedValidator={setSelectedValidator}
                 />
             )}
         </>