feat(wallet-dashboard): join enter amount screen from PR 3874

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

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

apps/wallet-dashboard/hooks/useValidatorInfo.tsx → apps/core/src/hooks/stake/useValidatorInfo.tsx

@@ -2,14 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useMemo } from 'react';
 import { useIotaClientQuery } from '@iota/dapp-kit';
-import { useGetValidatorsApy } from '@iota/core';
+import { useGetValidatorsApy } from '../';
 
-export function useValidatorInfo(validatorAddress: string) {
+export function useValidatorInfo({ validatorAddress }: { validatorAddress: string }) {
     const { data: system } = useIotaClientQuery('getLatestIotaSystemState');
     const { data: rollingAverageApys } = useGetValidatorsApy();
 
-    const currentEpoch = Number(system?.epoch || 0);
-
     const validatorSummary = useMemo(() => {
         if (!system) return null;
 
@@ -20,6 +18,11 @@ export function useValidatorInfo(validatorAddress: string) {
         );
     }, [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
@@ -34,6 +37,7 @@ export function useValidatorInfo(validatorAddress: string) {
     };
 
     return {
+        system,
         validatorSummary,
         name: validatorSummary?.name || '',
         stakingPoolActivationEpoch,
@@ -42,5 +46,6 @@ export function useValidatorInfo(validatorAddress: string) {
         isAtRisk,
         apy,
         isApyApproxZero,
+        totalValidatorStake,
     };
 }

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

@@ -21,7 +21,7 @@ import { useState } from 'react';
 
 function StakingDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
-    const [dialogStakeView, setDialogStakeView] = useState<StakeDialogView | undefined>();
+    const [stakeDialogView, setStakeDialogView] = useState<StakeDialogView | undefined>();
     const [selectedStake, setSelectedStake] = useState<ExtendedDelegatedStake | null>(null);
     const { data: delegatedStakeData } = useGetDelegatedStake({
         address: account?.address || '',
@@ -42,21 +42,21 @@ function StakingDashboardPage(): JSX.Element {
     );
 
     const viewStakeDetails = (extendedStake: ExtendedDelegatedStake) => {
-        setDialogStakeView(StakeDialogView.Details);
+        setStakeDialogView(StakeDialogView.Details);
         setSelectedStake(extendedStake);
     };
 
     function handleCloseStakeDialog() {
         setSelectedStake(null);
-        setDialogStakeView(undefined);
+        setStakeDialogView(undefined);
     }
 
     function handleNewStake() {
         setSelectedStake(null);
-        setDialogStakeView(undefined);
+        setStakeDialogView(StakeDialogView.SelectValidator);
     }
 
-    const isDialogStakeOpen = dialogStakeView !== undefined;
+    const isDialogStakeOpen = stakeDialogView !== undefined;
 
     return (
         <>
@@ -92,8 +92,8 @@ function StakingDashboardPage(): JSX.Element {
                     stakedDetails={selectedStake}
                     isOpen={isDialogStakeOpen}
                     handleClose={handleCloseStakeDialog}
-                    view={dialogStakeView}
-                    setView={setDialogStakeView}
+                    view={stakeDialogView}
+                    setView={setStakeDialogView}
                 />
             )}
         </>

apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx

@@ -2,26 +2,27 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useState } from 'react';
-import { EnterAmountView, SelectValidatorView, DetailsView } from './views';
+import { EnterAmountView, SelectValidatorView } from './views';
 import {
     useNotifications,
     useNewStakeTransaction,
     useGetCurrentEpochStartTimestamp,
 } from '@/hooks';
 import {
+    ExtendedDelegatedStake,
     GroupedTimelockObject,
     parseAmount,
     TIMELOCK_IOTA_TYPE,
     useCoinMetadata,
     useGetAllOwnedObjects,
     useGetValidatorsApy,
-    ExtendedDelegatedStake,
 } from '@iota/core';
 import { useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { NotificationType } from '@/stores/notificationStore';
 import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
 import { Dialog } from '@iota/apps-ui-kit';
+import { DetailsView, UnstakeView } from './views';
 
 export enum StakeDialogView {
     Details,
@@ -35,16 +36,16 @@ interface StakeDialogProps {
     onSuccess?: (digest: string) => void;
     isOpen: boolean;
     handleClose: () => void;
-    stakedDetails?: ExtendedDelegatedStake | null;
     view: StakeDialogView;
-    setView: (nextView: StakeDialogView) => void;
+    setView: (view: StakeDialogView) => void;
+    stakedDetails?: ExtendedDelegatedStake | null;
 }
 
 function StakeDialog({
     onSuccess,
     isTimelockedStaking,
     isOpen,
-    handleClose: handleClose,
+    handleClose,
     view,
     setView,
     stakedDetails,
@@ -93,6 +94,20 @@ function StakeDialog({
         setSelectedValidator(validator);
     }
 
+    function selectValidatorHandleNext(): void {
+        if (selectedValidator) {
+            setView(StakeDialogView.EnterAmount);
+        }
+    }
+
+    function detailsHandleUnstake() {
+        setView(StakeDialogView.Unstake);
+    }
+
+    function detailsHandleStake() {
+        setView(StakeDialogView.SelectValidator);
+    }
+
     function handleStake(): void {
         if (isTimelockedStaking && groupedTimelockObjects.length === 0) {
             addNotification('Invalid stake amount. Please try again.', NotificationType.Error);
@@ -122,18 +137,6 @@ function StakeDialog({
             });
     }
 
-    function detailsHandleUnstake() {
-        setView(StakeDialogView.Unstake);
-    }
-
-    function detailsHandleStake() {
-        setView(StakeDialogView.SelectValidator);
-    }
-
-    function selectValidatorHandleNext() {
-        setView(StakeDialogView.EnterAmount);
-    }
-
     return (
         <Dialog open={isOpen} onOpenChange={() => handleClose()}>
             {view === StakeDialogView.Details && stakedDetails && (
@@ -157,10 +160,17 @@ function StakeDialog({
                 <EnterAmountView
                     selectedValidator={selectedValidator}
                     amount={amount}
+                    handleClose={handleClose}
                     onChange={(e) => setAmount(e.target.value)}
                     onBack={handleBack}
                     onStake={handleStake}
-                    isStakeDisabled={!amount}
+                />
+            )}
+            {view === StakeDialogView.Unstake && stakedDetails && (
+                <UnstakeView
+                    extendedStake={stakedDetails}
+                    handleClose={handleClose}
+                    showActiveStatus
                 />
             )}
         </Dialog>