feat(wallet-dashboard): add unstake timelocked objects flow

apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -57,6 +57,10 @@ interface KeyValueProps {
      * Reverse the KeyValue (optional).
      */
     isReverse?: boolean;
+    /**
+     * Text shown on value hover.
+     */
+    valueHoverTitle?: string;
 }
 
 export function KeyValueInfo({
@@ -72,6 +76,7 @@ export function KeyValueInfo({
     onCopyError,
     fullwidth,
     isReverse = false,
+    valueHoverTitle,
 }: KeyValueProps): React.JSX.Element {
     const flexDirectionClass = isReverse ? 'flex-row-reverse' : 'flex-row';
     async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
@@ -119,6 +124,7 @@ export function KeyValueInfo({
                 })}
             >
                 <span
+                    title={valueHoverTitle}
                     className={cx(
                         'text-neutral-10 dark:text-neutral-92',
                         size === ValueSize.Medium ? 'text-body-lg' : 'text-body-md',

apps/ui-kit/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx

@@ -18,16 +18,21 @@ export interface LoadingIndicatorProps {
      * The text to display next to the loading indicator.
      */
     text?: string;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
 }
 
 export function LoadingIndicator({
     color = 'text-primary-30 dark:text-primary-80',
     size = 'w-5 h-5',
     text,
+    testId,
 }: LoadingIndicatorProps): React.JSX.Element {
     return (
         <div className="flex items-center justify-center gap-xs">
-            <Loader className={cx('animate-spin', color, size)} />
+            <Loader className={cx('animate-spin', color, size)} data-testid={testId} />
             {text && <span className={cx('text-body-sm', color)}>{text}</span>}
         </div>
     );

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

@@ -3,7 +3,6 @@
 
 'use client';
 
-import { StartStaking } from '@/components/staking-overview/StartStaking';
 import {
     Button,
     ButtonSize,
@@ -16,7 +15,15 @@ import {
     Title,
     TitleSize,
 } from '@iota/apps-ui-kit';
-import { StakeDialog, StakeDialogView } from '@/components';
+import {
+    StakeDialog,
+    StakeDialogView,
+    UnstakeDialog,
+    useUnstakeDialog,
+    UnstakeDialogView,
+    useStakeDialog,
+    StartStaking,
+} from '@/components';
 import {
     ExtendedDelegatedStake,
     formatDelegatedStake,
@@ -32,8 +39,8 @@ import { useCurrentAccount, useIotaClient, useIotaClientQuery } from '@iota/dapp
 import { IotaSystemStateSummary } from '@iota/iota-sdk/client';
 import { Info } from '@iota/ui-icons';
 import { useMemo } from 'react';
-import { useStakeDialog } from '@/components/Dialogs/Staking/hooks/useStakeDialog';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { IotaSignAndExecuteTransactionOutput } from '@iota/wallet-standard';
 
 function StakingDashboardPage(): React.JSX.Element {
     const account = useCurrentAccount();
@@ -52,6 +59,14 @@ function StakingDashboardPage(): React.JSX.Element {
         handleCloseStakeDialog,
         handleNewStake,
     } = useStakeDialog();
+    const {
+        isOpen: isUnstakeDialogOpen,
+        openUnstakeDialog,
+        defaultDialogProps,
+        handleClose: handleCloseUnstakeDialog,
+        setView: setUnstakeDialogView,
+        setTxDigest,
+    } = useUnstakeDialog();
 
     const { data: delegatedStakeData, refetch: refetchDelegatedStakes } = useGetDelegatedStake({
         address: account?.address || '',
@@ -100,6 +115,34 @@ function StakingDashboardPage(): React.JSX.Element {
             .then(() => refetchDelegatedStakes());
     }
 
+    function handleUnstakeClick() {
+        setStakeDialogView(undefined);
+        openUnstakeDialog();
+    }
+
+    function handleUnstakeDialogBack() {
+        setStakeDialogView(StakeDialogView.Details);
+        handleCloseUnstakeDialog();
+    }
+
+    function handleOnUnstakeBack(view: UnstakeDialogView): (() => void) | undefined {
+        if (view === UnstakeDialogView.Unstake) {
+            return handleUnstakeDialogBack;
+        }
+    }
+
+    function handleOnUnstakeSuccess(tx: IotaSignAndExecuteTransactionOutput): void {
+        setUnstakeDialogView(UnstakeDialogView.TransactionDetails);
+        iotaClient
+            .waitForTransaction({
+                digest: tx.digest,
+            })
+            .then((tx) => {
+                refetchDelegatedStakes();
+                setTxDigest(tx.digest);
+            });
+    }
+
     return (
         <div className="flex justify-center">
             <div className="w-3/4">
@@ -171,16 +214,27 @@ function StakingDashboardPage(): React.JSX.Element {
                                 </div>
                             </div>
                         </div>
-                        <StakeDialog
-                            stakedDetails={selectedStake}
-                            onSuccess={handleOnStakeSuccess}
-                            isOpen={isDialogStakeOpen}
-                            handleClose={handleCloseStakeDialog}
-                            view={stakeDialogView}
-                            setView={setStakeDialogView}
-                            selectedValidator={selectedValidator}
-                            setSelectedValidator={setSelectedValidator}
-                        />
+                        {isDialogStakeOpen && (
+                            <StakeDialog
+                                stakedDetails={selectedStake}
+                                onSuccess={handleOnStakeSuccess}
+                                handleClose={handleCloseStakeDialog}
+                                view={stakeDialogView}
+                                setView={setStakeDialogView}
+                                selectedValidator={selectedValidator}
+                                setSelectedValidator={setSelectedValidator}
+                                onUnstakeClick={handleUnstakeClick}
+                            />
+                        )}
+
+                        {isUnstakeDialogOpen && selectedStake && (
+                            <UnstakeDialog
+                                extendedStake={selectedStake}
+                                onBack={handleOnUnstakeBack}
+                                onSuccess={handleOnUnstakeSuccess}
+                                {...defaultDialogProps}
+                            />
+                        )}
                     </Panel>
                 ) : (
                     <div className="flex h-[270px] p-lg">