feat(wallet-dashboard): add staking confirmation screen

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

@@ -63,7 +63,7 @@ export function CoinIconWrapper({ children, size, hasBorder }: CoinIconWrapperPr
             className={cx(
                 size,
                 hasBorder && 'border border-shader-neutral-light-8',
-                'flex items-center justify-center rounded-full bg-neutral-100',
+                'flex items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-10',
             )}
         >
             {children}

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/core/src/utils/stake/getTotalValidatorStake.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IotaValidatorSummary } from '@iota/iota-sdk/client';
+
+export function getTotalValidatorStake(validatorSummary: IotaValidatorSummary | null) {
+    return validatorSummary?.stakingPoolIotaBalance || 0;
+}

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

@@ -28,6 +28,7 @@ import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
 import { Dialog } from '@iota/apps-ui-kit';
 import { DetailsView, UnstakeView } from './views';
 import { FormValues } from './views/EnterAmountView';
+import { FinishStakingView } from './views/FinishStaking';
 
 export const MIN_NUMBER_IOTA_TO_STAKE = 1;
 
@@ -36,6 +37,7 @@ export enum StakeDialogView {
     SelectValidator = 'SelectValidator',
     EnterAmount = 'EnterAmount',
     Unstake = 'Unstake',
+    TransactionDetails = 'TransactionDetails',
 }
 
 const INITIAL_VALUES = {
@@ -44,19 +46,16 @@ const INITIAL_VALUES = {
 
 interface StakeDialogProps {
     isTimelockedStaking?: boolean;
-    onSuccess?: (digest: string) => void;
     isOpen: boolean;
     handleClose: () => void;
     view: StakeDialogView;
-    setView?: (view: StakeDialogView) => void;
+    setView: (view: StakeDialogView) => void;
     stakedDetails?: ExtendedDelegatedStake | null;
-
     selectedValidator?: string;
     setSelectedValidator?: (validator: string) => void;
 }
 
 export function StakeDialog({
-    onSuccess,
     isTimelockedStaking,
     isOpen,
     handleClose,
@@ -125,8 +124,10 @@ export function StakeDialog({
 
     const validators = Object.keys(rollingAverageApys ?? {}) ?? [];
 
+    const validatorApy = rollingAverageApys?.[selectedValidator] ?? null;
+
     function handleBack(): void {
-        setView?.(StakeDialogView.SelectValidator);
+        setView(StakeDialogView.SelectValidator);
     }
 
     function handleValidatorSelect(validator: string): void {
@@ -135,16 +136,16 @@ export function StakeDialog({
 
     function selectValidatorHandleNext(): void {
         if (selectedValidator) {
-            setView?.(StakeDialogView.EnterAmount);
+            setView(StakeDialogView.EnterAmount);
         }
     }
 
     function detailsHandleUnstake() {
-        setView?.(StakeDialogView.Unstake);
+        setView(StakeDialogView.Unstake);
     }
 
     function detailsHandleStake() {
-        setView?.(StakeDialogView.SelectValidator);
+        setView(StakeDialogView.SelectValidator);
     }
 
     function handleStake(): void {
@@ -156,25 +157,21 @@ export function StakeDialog({
             addNotification('Stake transaction was not created', NotificationType.Error);
             return;
         }
+
         signAndExecuteTransaction(
             {
                 transaction: newStakeData?.transaction,
             },
             {
-                onSuccess: (tx) => {
-                    if (onSuccess) {
-                        onSuccess(tx.digest);
-                    }
+                onSuccess: () => {
+                    setView(StakeDialogView.TransactionDetails);
+                    addNotification('Stake transaction has been sent');
+                },
+                onError: () => {
+                    addNotification('Stake transaction was not sent', NotificationType.Error);
                 },
             },
-        )
-            .then(() => {
-                handleClose();
-                addNotification('Stake transaction has been sent');
-            })
-            .catch(() => {
-                addNotification('Stake transaction was not sent', NotificationType.Error);
-            });
+        );
     }
 
     function onSubmit(_: FormValues, { resetForm }: FormikHelpers<FormValues>) {
@@ -220,6 +217,18 @@ export function StakeDialog({
                             showActiveStatus
                         />
                     )}
+                    {view === StakeDialogView.TransactionDetails && (
+                        <FinishStakingView
+                            validatorAddress={selectedValidator}
+                            gasBudget={newStakeData?.gasBudget}
+                            onConfirm={handleClose}
+                            onClose={handleClose}
+                            amount={amount}
+                            symbol={metadata?.symbol}
+                            validatorApy={validatorApy}
+                            showActiveStatus
+                        />
+                    )}
                 </>
             </FormikProvider>
         </Dialog>

apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx

@@ -2,21 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import {
-    useFormatCoin,
-    useBalance,
-    CoinFormat,
-    parseAmount,
-    useCoinMetadata,
-    useStakeTxnInfo,
-} from '@iota/core';
+import { useFormatCoin, useBalance, CoinFormat, parseAmount, useCoinMetadata } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import {
     Button,
     ButtonType,
-    KeyValueInfo,
-    Panel,
-    Divider,
     Input,
     InputType,
     Header,
@@ -26,11 +16,8 @@ import {
 } from '@iota/apps-ui-kit';
 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 { Layout, LayoutBody, LayoutFooter } from './Layout';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { StakingRewardDetails, Validator, StakedInfo, Layout, LayoutBody, LayoutFooter } from './';
 
 export interface FormValues {
     amount: string;
@@ -46,7 +33,7 @@ interface EnterAmountViewProps {
     isTransactionLoading?: boolean;
 }
 
-function EnterAmountView({
+export function EnterAmountView({
     selectedValidator: selectedValidatorAddress,
     onBack,
     onStake,
@@ -64,12 +51,10 @@ function EnterAmountView({
     const { values, errors } = useFormikContext<FormValues>();
     const amount = values.amount;
 
-    const { data: system } = useIotaClientQuery('getLatestIotaSystemState');
     const { data: iotaBalance } = useBalance(accountAddress!);
     const coinBalance = BigInt(iotaBalance?.totalBalance || 0);
 
     const gasBudgetBigInt = BigInt(gasBudget ?? 0);
-    const [gas, symbol] = useFormatCoin(gasBudget, IOTA_TYPE_ARG);
 
     const maxTokenBalance = coinBalance - gasBudgetBigInt;
     const [maxTokenFormatted, maxTokenFormattedSymbol] = useFormatCoin(
@@ -82,10 +67,6 @@ function EnterAmountView({
         ? '--'
         : `${maxTokenFormatted} ${maxTokenFormattedSymbol} Available`;
 
-    const { stakedRewardsStartEpoch, timeBeforeStakeRewardsRedeemableAgoDisplay } = useStakeTxnInfo(
-        system?.epoch,
-    );
-
     const hasEnoughRemaingBalance =
         maxTokenBalance > parseAmount(values.amount, decimals) + BigInt(2) * gasBudgetBigInt;
     const shouldShowInsufficientRemainingFundsWarning =
@@ -124,7 +105,7 @@ function EnterAmountView({
                                             type={InputType.NumericFormat}
                                             label="Amount"
                                             value={amount}
-                                            suffix={` ${symbol}`}
+                                            suffix={` ${metadata?.symbol}`}
                                             placeholder="Enter amount to stake"
                                             errorMessage={
                                                 values.amount && meta.error ? meta.error : undefined
@@ -145,28 +126,7 @@ function EnterAmountView({
                                 </div>
                             ) : null}
                         </div>
-
-                        <Panel hasBorder>
-                            <div className="flex flex-col gap-y-sm p-md">
-                                <KeyValueInfo
-                                    keyText="Staking Rewards Start"
-                                    value={stakedRewardsStartEpoch}
-                                    fullwidth
-                                />
-                                <KeyValueInfo
-                                    keyText="Redeem Rewards"
-                                    value={timeBeforeStakeRewardsRedeemableAgoDisplay}
-                                    fullwidth
-                                />
-                                <Divider />
-                                <KeyValueInfo
-                                    keyText="Gas fee"
-                                    value={gas || '--'}
-                                    supportingLabel={symbol}
-                                    fullwidth
-                                />
-                            </div>
-                        </Panel>
+                        <StakingRewardDetails gasBudget={gasBudget} />
                     </div>
                 </div>
             </LayoutBody>
@@ -185,5 +145,3 @@ function EnterAmountView({
         </Layout>
     );
 }
-
-export default EnterAmountView;

apps/wallet-dashboard/components/Dialogs/Staking/views/FinishStaking.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+    Button,
+    ButtonType,
+    Card,
+    CardBody,
+    CardImage,
+    CardType,
+    Header,
+    ImageType,
+} from '@iota/apps-ui-kit';
+import { CoinIcon, ImageIconSize, ValidatorApyData } from '@iota/core';
+import { Validator } from './Validator';
+import { StakingRewardDetails } from './StakingRewardDetails';
+import { Layout, LayoutBody, LayoutFooter } from './Layout';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+
+interface FinishStakingViewProps {
+    validatorAddress: string;
+    gasBudget: string | number | null | undefined;
+    onConfirm: () => void;
+    amount: string;
+    symbol: string | undefined;
+    validatorApy?: ValidatorApyData | null;
+    onClose: () => void;
+    showActiveStatus?: boolean;
+}
+
+export function FinishStakingView({
+    validatorAddress,
+    onConfirm,
+    amount,
+    symbol,
+    onClose,
+    validatorApy,
+    gasBudget,
+    showActiveStatus,
+}: FinishStakingViewProps): React.JSX.Element {
+    return (
+        <Layout>
+            <Header title="Transaction" onClose={onClose} />
+            <LayoutBody>
+                <div className="flex flex-col gap-y-lg">
+                    <Validator
+                        address={validatorAddress}
+                        showActiveStatus={showActiveStatus}
+                        isSelected
+                        showAction={false}
+                    />
+
+                    <Card type={CardType.Outlined}>
+                        <CardImage type={ImageType.BgSolid}>
+                            <CoinIcon
+                                hasCoinWrapper
+                                coinType={IOTA_TYPE_ARG}
+                                rounded
+                                size={ImageIconSize.Small}
+                            />
+                        </CardImage>
+                        <CardBody title={`${amount} ${symbol}`} subtitle="Stake" />
+                    </Card>
+
+                    <StakingRewardDetails validatorApy={validatorApy} gasBudget={gasBudget} />
+                </div>
+            </LayoutBody>
+
+            <LayoutFooter>
+                <div className="flex w-full">
+                    <Button type={ButtonType.Primary} fullWidth onClick={onConfirm} text="Finish" />
+                </div>
+            </LayoutFooter>
+        </Layout>
+    );
+}