feat(tooling-wallet): enhance StakeDialog and SelectValidatorView wit…

…h improved navigation and layout
iotaledger · Nov 7, 2024 · dc319da · dc319da
1 parent 953a33e
commit dc319da
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 18 deletions.
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
@@ -86,17 +86,12 @@ function StakeDialog({
 
     const validators = Object.keys(rollingAverageApys ?? {}) ?? [];
 
-    function handleNext(): void {
-        setView(View.EnterAmount);
-    }
-
     function handleBack(): void {
         setView(View.SelectValidator);
     }
 
     function handleValidatorSelect(validator: string): void {
         setSelectedValidator(validator);
-        handleNext();
     }
 
     function handleStake(): void {
@@ -136,10 +131,9 @@ function StakeDialog({
         setView(View.SelectValidator);
     }
 
-  const title = {
-    [View.SelectValidator]: 'Select Validator',
-    [View.EnterAmount]: 'Enter Amount',
-  };
+    function selectValidatorHandleNext() {
+        setView(View.EnterAmount);
+    }
 
     return (
         <Dialog open={isOpen} onOpenChange={() => handleClose()}>
@@ -152,7 +146,13 @@ function StakeDialog({
                 />
             )}
             {view === View.SelectValidator && (
-                <SelectValidatorView validators={validators} onSelect={handleValidatorSelect} />
+                <SelectValidatorView
+                    selectedValidator={selectedValidator}
+                    handleClose={handleClose}
+                    validators={validators}
+                    onSelect={handleValidatorSelect}
+                    onNext={selectValidatorHandleNext}
+                />
             )}
             {view === View.EnterAmount && (
                 <EnterAmountView

diff --git 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,27 +17,63 @@ 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>
     );
 }
 
 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>