feat(wallet-dashboard): add staking confirmation screen

apps/core/package.json

@@ -32,6 +32,7 @@
         "@sentry/react": "^7.59.2",
         "@tanstack/react-query": "^5.50.1",
         "bignumber.js": "^9.1.1",
+        "clsx": "^2.1.1",
         "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

apps/core/src/components/index.ts

@@ -3,3 +3,4 @@
 
 export * from './KioskClientProvider';
 export * from './QR';
+export * from './image-icon';

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,49 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useGetTimeBeforeEpochNumber, useTimeAgo, TimeUnit } from '../../index';
+
+export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE = 2;
+export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS = 1;
+
+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
+            ? `${timeBeforeStakeRewardsStartsAgo === '--' ? '' : '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
+            ? `${timeBeforeStakeRewardsRedeemableAgo === '--' ? '' : 'in'} ${timeBeforeStakeRewardsRedeemableAgo}`
+            : startEpoch
+              ? `Epoch #${Number(redeemableRewardsEpoch)}`
+              : '--';
+
+    return {
+        stakedRewardsStartEpoch,
+        timeBeforeStakeRewardsRedeemableAgoDisplay,
+    };
+}

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

@@ -0,0 +1,51 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useMemo } from 'react';
+import { useIotaClientQuery } from '@iota/dapp-kit';
+import { useGetValidatorsApy } from '../';
+
+export function useValidatorInfo({ validatorAddress }: { validatorAddress: string }) {
+    const { data: system } = useIotaClientQuery('getLatestIotaSystemState');
+    const { data: rollingAverageApys } = useGetValidatorsApy();
+
+    const validatorSummary = useMemo(() => {
+        if (!system) return null;
+
+        return (
+            system.activeValidators.find(
+                (validator) => validator.iotaAddress === validatorAddress,
+            ) || null
+        );
+    }, [validatorAddress, system]);
+
+    const currentEpoch = Number(system?.epoch || 0);
+
+    //TODO: verify this is the correct validator stake balance
+    const totalValidatorStake = validatorSummary?.stakingPoolIotaBalance || 0;
+
+    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,
+    };
+
+    return {
+        system,
+        validatorSummary,
+        name: validatorSummary?.name || '',
+        stakingPoolActivationEpoch,
+        commission: validatorSummary ? Number(validatorSummary.commissionRate) / 100 : 0,
+        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/index.ts

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

apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
 >(({ showCloseIcon, ...props }, ref) => (
     <RadixDialog.Overlay
         ref={ref}
-        className="absolute inset-0 z-[99998] bg-shader-neutral-light-48 backdrop-blur-md"
+        className="fixed inset-0 z-[99998] bg-shader-neutral-light-48 backdrop-blur-md"
         {...props}
     >
         <DialogClose className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}>
@@ -70,7 +70,7 @@ const DialogContent = React.forwardRef<
                 <RadixDialog.Content
                     ref={ref}
                     className={cx(
-                        'absolute z-[99999] flex flex-col justify-center overflow-hidden bg-primary-100 dark:bg-neutral-6 md:w-96',
+                        'fixed z-[99999] flex flex-col justify-center overflow-hidden bg-primary-100 dark:bg-neutral-6 md:w-96',
                         positionClass,
                     )}
                     {...props}

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

@@ -4,7 +4,7 @@
 'use client';
 
 import { AmountBox, Box, StakeCard, StakeDialog, Button } from '@/components';
-import { StakeDetailsDialog } from '@/components/Dialogs';
+import { StakeDialogView } from '@/components/Dialogs/Staking/StakeDialog';
 import {
     ExtendedDelegatedStake,
     formatDelegatedStake,
@@ -21,9 +21,9 @@ import { useState } from 'react';
 
 function StakingDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
-    const [isDialogStakeOpen, setIsDialogStakeOpen] = useState(false);
+    const [stakeDialogView, setStakeDialogView] = useState<StakeDialogView | undefined>();
     const [selectedStake, setSelectedStake] = useState<ExtendedDelegatedStake | null>(null);
-
+    const [selectedValidator, setSelectedValidator] = useState<string>('');
     const { data: delegatedStakeData } = useGetDelegatedStake({
         address: account?.address || '',
         staleTime: DELEGATED_STAKES_QUERY_STALE_TIME,
@@ -43,13 +43,23 @@ function StakingDashboardPage(): JSX.Element {
     );
 
     const viewStakeDetails = (extendedStake: ExtendedDelegatedStake) => {
+        setStakeDialogView(StakeDialogView.Details);
         setSelectedStake(extendedStake);
     };
 
+    function handleCloseStakeDialog() {
+        setSelectedValidator('');
+        setSelectedStake(null);
+        setStakeDialogView(undefined);
+    }
+
     function handleNewStake() {
-        setIsDialogStakeOpen(true);
+        setSelectedStake(null);
+        setStakeDialogView(StakeDialogView.SelectValidator);
     }
 
+    const isDialogStakeOpen = stakeDialogView !== undefined;
+
     return (
         <>
             <div className="flex flex-col items-center justify-center gap-4 pt-12">
@@ -79,12 +89,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 && (
+                <StakeDialog
+                    stakedDetails={selectedStake}
+                    isOpen={isDialogStakeOpen}
+                    handleClose={handleCloseStakeDialog}
+                    view={stakeDialogView}
+                    setView={setStakeDialogView}
+                    selectedValidator={selectedValidator}
+                    setSelectedValidator={setSelectedValidator}
                 />
             )}
         </>