From f7c2c6f1bf68f5b9eb09c989f1d5c21fe5b36812 Mon Sep 17 00:00:00 2001
From: Eugene P <panteleymonchuk@gmail.com>
Date: Thu, 7 Nov 2024 21:14:03 +0200
Subject: [PATCH] feat(tooling-wallet): enhance StakeDialog and
 SelectValidatorView with improved navigation and layout

---
 .../Dialogs/Staking/StakeDialog.tsx           | 20 +++----
 .../Staking/views/SelectValidatorView.tsx     | 57 ++++++++++++++++---
 2 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
index 7b3f339fb4b..be8331b865f 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
@@ -85,17 +85,12 @@ function StakeDialog({
 
     const validators = Object.keys(rollingAverageApys ?? {}) ?? [];
 
-    function handleNext(): void {
-        setView(StakeDialogView.EnterAmount);
-    }
-
     function handleBack(): void {
         setView(StakeDialogView.SelectValidator);
     }
 
     function handleValidatorSelect(validator: string): void {
         setSelectedValidator(validator);
-        handleNext();
     }
 
     function handleStake(): void {
@@ -135,10 +130,9 @@ function StakeDialog({
         setView(StakeDialogView.SelectValidator);
     }
 
-  const title = {
-    [View.SelectValidator]: 'Select Validator',
-    [View.EnterAmount]: 'Enter Amount',
-  };
+    function selectValidatorHandleNext() {
+        setView(StakeDialogView.EnterAmount);
+    }
 
     return (
         <Dialog open={isOpen} onOpenChange={() => handleClose()}>
@@ -151,7 +145,13 @@ function StakeDialog({
                 />
             )}
             {view === StakeDialogView.SelectValidator && (
-                <SelectValidatorView validators={validators} onSelect={handleValidatorSelect} />
+                <SelectValidatorView
+                    selectedValidator={selectedValidator}
+                    handleClose={handleClose}
+                    validators={validators}
+                    onSelect={handleValidatorSelect}
+                    onNext={selectValidatorHandleNext}
+                />
             )}
             {view === StakeDialogView.EnterAmount && (
                 <EnterAmountView
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
index ac3bdeb1a5f..73e25ef25d1 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
@@ -4,6 +4,8 @@
 import React from 'react';
 import { ImageIcon, ImageIconSize, formatPercentageDisplay } from '@iota/core';
 import {
+    Header,
+    Button,
     Card,
     CardBody,
     CardImage,
@@ -15,19 +17,53 @@ import {
 } from '@iota/apps-ui-kit';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { useValidatorInfo } from '@/hooks';
-
+import { Layout, LayoutFooter, LayoutBody } from './Layout';
 interface SelectValidatorViewProps {
     validators: string[];
     onSelect: (validator: string) => void;
+    handleClose: () => void;
+    onNext: () => void;
+    selectedValidator: string;
 }
 
-function SelectValidatorView({ validators, onSelect }: SelectValidatorViewProps): JSX.Element {
+function SelectValidatorView({
+    validators,
+    onSelect,
+    handleClose,
+    onNext,
+    selectedValidator,
+}: SelectValidatorViewProps): JSX.Element {
     return (
-        <div className="flex w-full flex-col items-start gap-2">
-            {validators.map((validator) => (
-                <Validator key={validator} address={validator} onClick={onSelect} />
-            ))}
-        </div>
+        <Layout>
+            <Header
+                title="Select Validator"
+                onClose={handleClose}
+                onBack={handleClose}
+                titleCentered
+            />
+            <LayoutBody>
+                <div className="flex w-full flex-col gap-md">
+                    {validators.map((validator) => (
+                        <Validator
+                            key={validator}
+                            address={validator}
+                            onClick={onSelect}
+                            isSelected={selectedValidator === validator}
+                        />
+                    ))}
+                </div>
+            </LayoutBody>
+            <LayoutFooter>
+                {!!selectedValidator && (
+                    <Button
+                        fullWidth
+                        data-testid="select-validator-cta"
+                        onClick={onNext}
+                        text="Next"
+                    />
+                )}
+            </LayoutFooter>
+        </Layout>
     );
 }
 
@@ -35,7 +71,9 @@ function Validator({
     address,
     showActiveStatus,
     onClick,
+    isSelected,
 }: {
+    isSelected: boolean;
     address: string;
     showActiveStatus?: boolean;
     onClick: (address: string) => void;
@@ -51,8 +89,11 @@ function Validator({
     ) : (
         formatAddress(address)
     );
+
+    const handleClick = onClick ? () => onClick(address) : undefined;
+
     return (
-        <Card type={CardType.Default} onClick={() => onClick(address)}>
+        <Card type={isSelected ? CardType.Filled : CardType.Default} onClick={handleClick}>
             <CardImage>
                 <ImageIcon src={null} label={name} fallback={name} size={ImageIconSize.Large} />
             </CardImage>