From 0371d9402e06c758cd9701d7150f5d3a75c82651 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Wed, 21 Aug 2024 16:03:12 +0200
Subject: [PATCH] feat(wallet): rebrand staking amount screen (#1881)

* feat: update view and remove debris

* fix build

* feat: show - instead of ~0

* feat: update ui components

* feat: rebrand staking flow: amount screen

* fix type

* feat: update selected style

* feat: improvements
---
 .../atoms/key-value-info/KeyValueInfo.tsx     |  18 +-
 .../src/lib/components/atoms/panel/Panel.tsx  |   2 +-
 .../lib/components/atoms/tooltip/Tooltip.tsx  |   2 +-
 .../lib/components/molecules/input/Input.tsx  |   9 +-
 .../molecules/input/InputWrapper.tsx          |   2 +-
 .../stories/atoms/KeyValueInfo.stories.tsx    |  13 +-
 .../src/ui/app/staking/stake/StakeForm.tsx    | 159 ++++++++----------
 .../src/ui/app/staking/stake/StakingCard.tsx  |  96 +++++------
 .../app/staking/stake/ValidatorFormDetail.tsx | 116 +++++--------
 9 files changed, 181 insertions(+), 236 deletions(-)

diff --git a/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
index 972a53873bc..995a229b789 100644
--- a/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Info } from '@iota/ui-icons';
 import { ValueSize } from './keyValue.enums';
+import { Tooltip, TooltipPosition } from '../tooltip';
 
 interface KeyValueProps {
     /**
@@ -20,9 +21,13 @@ interface KeyValueProps {
      */
     valueLink?: string;
     /**
-     * Show info icon (optional).
+     * The tooltip position.
      */
-    showInfoIcon?: boolean;
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
     /**
      * The supporting label of the KeyValue (optional).
      */
@@ -36,7 +41,8 @@ interface KeyValueProps {
 export function KeyValueInfo({
     keyText,
     valueText,
-    showInfoIcon,
+    tooltipPosition,
+    tooltipText,
     supportingLabel,
     valueLink,
     size = ValueSize.Small,
@@ -45,7 +51,11 @@ export function KeyValueInfo({
         <div className="flex w-full flex-row items-center justify-between gap-2 py-xxs font-inter">
             <div className="flex w-full flex-row items-center gap-x-0.5">
                 <span className="text-body-md text-neutral-40 dark:text-neutral-60">{keyText}</span>
-                {showInfoIcon && <Info className="pl-xxxs text-neutral-60" />}
+                {tooltipText && (
+                    <Tooltip text={tooltipText} position={tooltipPosition}>
+                        <Info className="text-neutral-60 dark:text-neutral-40" />
+                    </Tooltip>
+                )}
             </div>
             <div className="flex w-full flex-row items-baseline justify-end gap-1">
                 {valueLink ? (
diff --git a/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx b/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx
index 901b12e3b1d..54cd58451d2 100644
--- a/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx
@@ -21,7 +21,7 @@ export function Panel({
     return (
         <div
             className={cx(
-                'flex flex-col rounded-xl bg-neutral-100 dark:bg-neutral-10',
+                'flex w-full flex-col rounded-xl bg-neutral-100 dark:bg-neutral-10',
                 borderClass,
             )}
         >
diff --git a/apps/ui-kit/src/lib/components/atoms/tooltip/Tooltip.tsx b/apps/ui-kit/src/lib/components/atoms/tooltip/Tooltip.tsx
index c1ab174d0e8..db0e6d878ed 100644
--- a/apps/ui-kit/src/lib/components/atoms/tooltip/Tooltip.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/tooltip/Tooltip.tsx
@@ -22,7 +22,7 @@ export function Tooltip({
             {children}
             <div
                 className={cx(
-                    'absolute z-50 w-max max-w-[200px] rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
+                    'absolute z-[999] hidden w-max max-w-[200px] rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:flex group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
                     tooltipPositionClass,
                 )}
                 role="tooltip"
diff --git a/apps/ui-kit/src/lib/components/molecules/input/Input.tsx b/apps/ui-kit/src/lib/components/molecules/input/Input.tsx
index 4d234ebf38e..69221d42a8b 100644
--- a/apps/ui-kit/src/lib/components/molecules/input/Input.tsx
+++ b/apps/ui-kit/src/lib/components/molecules/input/Input.tsx
@@ -89,6 +89,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     isVisibilityToggleEnabled ??= inputProps.type === InputType.Password;
     const inputRef = useRef<HTMLInputElement | null>(null);
 
+    const [hasBlurred, setHasBlurred] = useState<boolean>(false);
+
     const [isInputContentVisible, setIsInputContentVisible] = useState<boolean>(
         isContentVisible ?? inputProps.type !== InputType.Password,
     );
@@ -107,6 +109,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         }
     }
 
+    function handleBlur() {
+        setHasBlurred(true);
+    }
+
     function assignRefs(element: HTMLInputElement) {
         if (ref) {
             if (typeof ref === 'function') {
@@ -123,7 +129,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
             label={label}
             caption={caption}
             disabled={disabled}
-            errorMessage={errorMessage}
+            errorMessage={hasBlurred && errorMessage ? errorMessage : ''}
             amountCounter={amountCounter}
             required={inputProps.required}
         >
@@ -155,6 +161,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
                         INPUT_PLACEHOLDER_CLASSES,
                         INPUT_NUMBER_CLASSES,
                     )}
+                    onBlur={handleBlur}
                 />
 
                 {supportingText && <SecondaryText>{supportingText}</SecondaryText>}
diff --git a/apps/ui-kit/src/lib/components/molecules/input/InputWrapper.tsx b/apps/ui-kit/src/lib/components/molecules/input/InputWrapper.tsx
index 43f43b11d63..d356009d885 100644
--- a/apps/ui-kit/src/lib/components/molecules/input/InputWrapper.tsx
+++ b/apps/ui-kit/src/lib/components/molecules/input/InputWrapper.tsx
@@ -54,7 +54,7 @@ export function InputWrapper({
 }: React.PropsWithChildren<InputWrapperProps>) {
     return (
         <div
-            className={cx('group flex flex-col gap-y-2', {
+            className={cx('group flex w-full flex-col gap-y-2', {
                 'cursor-not-allowed opacity-40': disabled,
                 errored: errorMessage,
                 enabled: !disabled,
diff --git a/apps/ui-kit/src/storybook/stories/atoms/KeyValueInfo.stories.tsx b/apps/ui-kit/src/storybook/stories/atoms/KeyValueInfo.stories.tsx
index 1568a624aeb..1ae6f25a313 100644
--- a/apps/ui-kit/src/storybook/stories/atoms/KeyValueInfo.stories.tsx
+++ b/apps/ui-kit/src/storybook/stories/atoms/KeyValueInfo.stories.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { KeyValueInfo, ValueSize } from '@/components';
+import { KeyValueInfo, TooltipPosition, ValueSize } from '@/components';
 
 const meta: Meta<typeof KeyValueInfo> = {
     component: KeyValueInfo,
@@ -24,7 +24,6 @@ export const Default: Story = {
     args: {
         keyText: 'Label',
         valueText: 'Value',
-        showInfoIcon: false,
         supportingLabel: 'IOTA',
         size: ValueSize.Small,
     },
@@ -35,8 +34,14 @@ export const Default: Story = {
         valueText: {
             control: 'text',
         },
-        showInfoIcon: {
-            control: 'boolean',
+        tooltipText: {
+            control: 'text',
+        },
+        tooltipPosition: {
+            control: {
+                type: 'select',
+                options: Object.values(TooltipPosition),
+            },
         },
         supportingLabel: {
             control: 'text',
diff --git a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
index cf360401f31..ae4e98c5da3 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
@@ -2,28 +2,24 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Card } from '_app/shared/card';
-import { Text } from '_app/shared/text';
-import { NumberInput } from '_components';
 import {
     NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE,
     NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS,
 } from '_src/shared/constants';
-import { CountDownTimer } from '_src/ui/app/shared/countdown-timer';
 import {
     createStakeTransaction,
     parseAmount,
+    TimeUnit,
     useCoinMetadata,
     useFormatCoin,
     useGetTimeBeforeEpochNumber,
+    useTimeAgo,
 } from '@iota/core';
 import { Field, Form, useFormikContext } from 'formik';
 import { memo, useCallback, useMemo } from 'react';
-
 import { useActiveAddress, useTransactionGasBudget } from '../../hooks';
 import { type FormValues } from './StakingCard';
-
-const HIDE_MAX = true;
+import { Input, InputType, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
 
 export interface StakeFromProps {
     validatorAddress: string;
@@ -33,7 +29,7 @@ export interface StakeFromProps {
 }
 
 function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFromProps) {
-    const { values, setFieldValue } = useFormikContext<FormValues>();
+    const { values, setFieldValue, errors } = useFormikContext<FormValues>();
 
     const { data: metadata } = useCoinMetadata(coinType);
     const decimals = metadata?.decimals ?? 0;
@@ -41,6 +37,7 @@ function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFrom
 
     const transaction = useMemo(() => {
         if (!values.amount || !decimals) return null;
+        if (Number(values.amount) < 0) return null;
         const amountWithoutDecimals = parseAmount(values.amount, decimals);
         return createStakeTransaction(amountWithoutDecimals, validatorAddress);
     }, [values.amount, validatorAddress, decimals]);
@@ -63,100 +60,80 @@ function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFrom
     const { data: timeBeforeStakeRewardsStarts } =
         useGetTimeBeforeEpochNumber(startEarningRewardsEpoch);
 
+    const timeBeforeStakeRewardsStartsAgo = useTimeAgo({
+        timeFrom: timeBeforeStakeRewardsStarts,
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
+    const stakedRewardsStartEpoch =
+        timeBeforeStakeRewardsStarts > 0
+            ? `${timeBeforeStakeRewardsStartsAgo === '--' ? '' : 'in'} ${timeBeforeStakeRewardsStartsAgo}`
+            : epoch
+              ? `Epoch #${Number(startEarningRewardsEpoch)}`
+              : '--';
+
     const { data: timeBeforeStakeRewardsRedeemable } =
         useGetTimeBeforeEpochNumber(redeemableRewardsEpoch);
+    const timeBeforeStakeRewardsRedeemableAgo = useTimeAgo({
+        timeFrom: timeBeforeStakeRewardsRedeemable,
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
+    const timeBeforeStakeRewardsRedeemableAgoDisplay =
+        timeBeforeStakeRewardsRedeemable > 0
+            ? `${timeBeforeStakeRewardsRedeemableAgo === '--' ? '' : 'in'} ${timeBeforeStakeRewardsRedeemableAgo}`
+            : epoch
+              ? `Epoch #${Number(redeemableRewardsEpoch)}`
+              : '--';
 
     return (
-        <Form className="flex flex-1 flex-col flex-nowrap items-center" autoComplete="off">
-            <div className="mb-3 mt-3.5 flex w-full flex-col items-center justify-between gap-1.5">
-                <Text variant="caption" color="gray-85" weight="semibold">
-                    Enter the amount of IOTA to stake
-                </Text>
-                <Text variant="bodySmall" color="steel" weight="medium">
-                    Available - {maxToken} {symbol}
-                </Text>
-            </div>
-            <Card
-                variant="gray"
-                titleDivider
-                header={
-                    <div className="flex w-full bg-white p-2.5">
-                        <Field
-                            data-testid="stake-amount-input"
-                            component={NumberInput}
-                            allowNegative={false}
-                            name="amount"
-                            className="text-hero-dark placeholder:text-gray-70 w-full border-none bg-white text-heading4 font-semibold placeholder:font-semibold"
-                            decimals
-                            suffix={` ${symbol}`}
-                            autoFocus
-                        />
-                        {!HIDE_MAX ? (
+        <Form
+            className="flex w-full flex-1 flex-col flex-nowrap items-center gap-md"
+            autoComplete="off"
+        >
+            <Field
+                name="amount"
+                render={({ field }: { field: FormValues }) => (
+                    <Input
+                        {...field}
+                        type={InputType.Number}
+                        name="amount"
+                        placeholder="0 IOTA"
+                        caption={coinBalance ? `${maxToken} ${symbol} Available` : ''}
+                        trailingElement={
                             <button
-                                className="border-gray-60 text-steel-darker hover:border-steel-dark hover:text-steel-darker flex h-6 w-11 cursor-pointer items-center justify-center rounded-2xl border border-solid bg-white text-bodySmall font-medium disabled:cursor-auto disabled:opacity-50"
                                 onClick={setMaxToken}
-                                disabled={queryResult.isPending}
                                 type="button"
+                                disabled={queryResult.isPending}
+                                className="flex items-center justify-center rounded-xl border border-neutral-70 px-sm text-body-md text-neutral-40"
                             >
                                 Max
                             </button>
-                        ) : null}
-                    </div>
-                }
-                footer={
-                    <div className="flex w-full justify-between py-px">
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            Gas Fees
-                        </Text>
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            {gasBudget} {symbol}
-                        </Text>
-                    </div>
-                }
-            >
-                <div className="flex w-full justify-between pb-3.75">
-                    <Text variant="body" weight="medium" color="steel-darker">
-                        Staking Rewards Start
-                    </Text>
-                    {timeBeforeStakeRewardsStarts > 0 ? (
-                        <CountDownTimer
-                            timestamp={timeBeforeStakeRewardsStarts}
-                            variant="body"
-                            color="steel-darker"
-                            weight="semibold"
-                            label="in"
-                            endLabel="--"
-                        />
-                    ) : (
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            {epoch ? `Epoch #${Number(startEarningRewardsEpoch)}` : '--'}
-                        </Text>
-                    )}
-                </div>
-                <div className="item-center flex w-full justify-between pb-3.75">
-                    <div className="flex-1">
-                        <Text variant="pBody" weight="medium" color="steel-darker">
-                            Staking Rewards Redeemable
-                        </Text>
-                    </div>
-                    <div className="flex flex-1 items-center justify-end gap-1">
-                        {timeBeforeStakeRewardsRedeemable > 0 ? (
-                            <CountDownTimer
-                                timestamp={timeBeforeStakeRewardsRedeemable}
-                                variant="body"
-                                color="steel-darker"
-                                weight="semibold"
-                                label="in"
-                                endLabel="--"
-                            />
-                        ) : (
-                            <Text variant="body" weight="medium" color="steel-darker">
-                                {epoch ? `Epoch #${Number(redeemableRewardsEpoch)}` : '--'}
-                            </Text>
-                        )}
-                    </div>
+                        }
+                        errorMessage={errors.amount}
+                        label="Amount"
+                    />
+                )}
+            />
+            <Panel hasBorder>
+                <div className="gap-y-sm p-md">
+                    <KeyValueInfo
+                        keyText="Staking Rewards Start"
+                        valueText={stakedRewardsStartEpoch}
+                    />
+                    <KeyValueInfo
+                        keyText="Redeem Rewards"
+                        valueText={timeBeforeStakeRewardsRedeemableAgoDisplay}
+                    />
+                    <KeyValueInfo
+                        keyText="Gas fee"
+                        valueText={gasBudget}
+                        supportingLabel={symbol}
+                    />
                 </div>
-            </Card>
+            </Panel>
         </Form>
     );
 }
diff --git a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
index a6dfae7b77d..9d4db883105 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
@@ -2,11 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import BottomMenuLayout, { Content, Menu } from '_app/shared/bottom-menu-layout';
-import { Button } from '_app/shared/ButtonUI';
-import { Collapsible } from '_app/shared/collapse';
-import { Text } from '_app/shared/text';
-import { Loading, Alert } from '_components';
+import { Loading } from '_components';
 import { Coin } from '_redux/slices/iota-objects/Coin';
 import { ampli } from '_src/shared/analytics/ampli';
 import { MIN_NUMBER_IOTA_TO_STAKE } from '_src/shared/constants';
@@ -23,9 +19,8 @@ import {
     DELEGATED_STAKES_QUERY_STALE_TIME,
 } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
-import { ArrowLeft16 } from '@iota/icons';
 import type { StakeObject } from '@iota/iota-sdk/client';
-import { NANO_PER_IOTA, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { NANO_PER_IOTA, IOTA_TYPE_ARG, formatAddress } from '@iota/iota-sdk/utils';
 // import * as Sentry from '@sentry/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Formik } from 'formik';
@@ -33,7 +28,6 @@ import type { FormikHelpers } from 'formik';
 import { useCallback, useMemo } from 'react';
 import { toast } from 'react-hot-toast';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
-
 import { getSignerOperationErrorMessage } from '../../helpers/errorMessages';
 import { useActiveAccount } from '../../hooks/useActiveAccount';
 import { useSigner } from '../../hooks/useSigner';
@@ -43,6 +37,8 @@ import StakeForm from './StakeForm';
 import { UnStakeForm } from './UnstakeForm';
 import { createValidationSchema } from './utils/validation';
 import { ValidatorFormDetail } from './ValidatorFormDetail';
+import { Button, ButtonType, Card, CardBody, CardImage, CardType } from '@iota/apps-ui-kit';
+import { ImageIcon } from '../../shared/image-icon';
 
 const INITIAL_VALUES = {
     amount: '',
@@ -73,6 +69,15 @@ function StakingCard() {
     const { data: system, isPending: validatorsisPending } = useIotaClientQuery(
         'getLatestIotaSystemState',
     );
+    const validatorMeta = useMemo(() => {
+        if (!system) return null;
+
+        return (
+            system.activeValidators.find(
+                (validator) => validator.iotaAddress === validatorAddress,
+            ) || null
+        );
+    }, [validatorAddress, system]);
 
     const totalTokenBalance = useMemo(() => {
         if (!allDelegation) return 0n;
@@ -265,7 +270,7 @@ function StakingCard() {
         return <Navigate to="/" replace={true} />;
     }
     return (
-        <div className="flex w-full flex-grow flex-col flex-nowrap">
+        <div className="flex h-full w-full flex-grow flex-col flex-nowrap">
             <Loading loading={isPending || validatorsisPending || loadingIotaBalances}>
                 <Formik
                     initialValues={INITIAL_VALUES}
@@ -273,16 +278,26 @@ function StakingCard() {
                     onSubmit={onSubmit}
                     validateOnMount
                 >
-                    {({ isSubmitting, isValid, submitForm, errors, touched }) => (
-                        <BottomMenuLayout>
-                            <Content>
-                                <div className="mb-4">
-                                    <ValidatorFormDetail
-                                        validatorAddress={validatorAddress}
-                                        unstake={unstake}
+                    {({ isSubmitting, isValid, submitForm }) => (
+                        <>
+                            <div className="flex h-full flex-col gap-md overflow-auto">
+                                <Card type={CardType.Filled}>
+                                    <CardImage>
+                                        <ImageIcon
+                                            src={null}
+                                            label={validatorMeta?.name || ''}
+                                            fallback={validatorMeta?.name || ''}
+                                        />
+                                    </CardImage>
+                                    <CardBody
+                                        title={validatorMeta?.name || ''}
+                                        subtitle={formatAddress(validatorAddress)}
                                     />
-                                </div>
-
+                                </Card>
+                                <ValidatorFormDetail
+                                    validatorAddress={validatorAddress}
+                                    unstake={unstake}
+                                />
                                 {unstake ? (
                                     <UnStakeForm
                                         stakedIotaId={stakeIotaIdParams!}
@@ -299,52 +314,19 @@ function StakingCard() {
                                         epoch={system?.epoch}
                                     />
                                 )}
-
-                                {(unstake || touched.amount) && errors.amount ? (
-                                    <div className="mt-2 flex flex-col flex-nowrap">
-                                        <Alert>{errors.amount}</Alert>
-                                    </div>
-                                ) : null}
-
-                                {!unstake && (
-                                    <div className="mt-7.5 flex-1">
-                                        <Collapsible title="Staking Rewards" defaultOpen>
-                                            <Text
-                                                variant="pSubtitle"
-                                                color="steel-dark"
-                                                weight="normal"
-                                            >
-                                                Staked IOTA starts counting as validator’s stake at
-                                                the end of the Epoch in which it was staked. Rewards
-                                                are earned separately for each Epoch and become
-                                                available at the end of each Epoch.
-                                            </Text>
-                                        </Collapsible>
-                                    </div>
-                                )}
-                            </Content>
-
-                            <Menu stuckClass="staked-cta" className="mx-0 w-full px-0 pb-0">
-                                <Button
-                                    size="tall"
-                                    variant="secondary"
-                                    to="/stake"
-                                    disabled={isSubmitting}
-                                    before={<ArrowLeft16 />}
-                                    text="Back"
-                                />
+                            </div>
+                            <div className="pt-sm">
                                 <Button
-                                    size="tall"
-                                    variant="primary"
+                                    type={ButtonType.Primary}
+                                    fullWidth
                                     onClick={submitForm}
                                     disabled={
                                         !isValid || isSubmitting || (unstake && !delegationId)
                                     }
-                                    loading={isSubmitting}
                                     text={unstake ? 'Unstake Now' : 'Stake Now'}
                                 />
-                            </Menu>
-                        </BottomMenuLayout>
+                            </div>
+                        </>
                     )}
                 </Formik>
             </Loading>
diff --git a/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx b/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx
index 26b49932bda..e4be6021431 100644
--- a/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx
@@ -2,10 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Card } from '_app/shared/card';
 import { Alert, LoadingIndicator } from '_components';
-import { Text } from '_src/ui/app/shared/text';
-import { IconTooltip } from '_src/ui/app/shared/tooltip';
 import {
     calculateStakeShare,
     formatPercentageDisplay,
@@ -13,16 +10,16 @@ import {
     useGetValidatorsApy,
     DELEGATED_STAKES_QUERY_REFETCH_INTERVAL,
     DELEGATED_STAKES_QUERY_STALE_TIME,
+    useFormatCoin,
 } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
-
 import { useActiveAddress } from '../../hooks/useActiveAddress';
 import { getStakeIotaByIotaId } from '../getStakeIotaByIotaId';
 import { getTokenStakeIotaForValidator } from '../getTokenStakeIotaForValidator';
-import { StakeAmount } from '../home/StakeAmount';
-import { ValidatorLogo } from '../validators/ValidatorLogo';
+import { KeyValueInfo, Panel, TooltipPosition } from '@iota/apps-ui-kit';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 interface ValidatorFormDetailProps {
     validatorAddress: string;
@@ -31,7 +28,6 @@ interface ValidatorFormDetailProps {
 
 export function ValidatorFormDetail({ validatorAddress, unstake }: ValidatorFormDetailProps) {
     const accountAddress = useActiveAddress();
-
     const [searchParams] = useSearchParams();
     const stakeIdParams = searchParams.get('staked');
     const {
@@ -88,6 +84,11 @@ export function ValidatorFormDetail({ validatorAddress, unstake }: ValidatorForm
     const { apy, isApyApproxZero } = rollingAverageApys?.[validatorAddress] ?? {
         apy: null,
     };
+    const [totalValidatorStakeFormatted, totalValidatorStakeSymbol] = useFormatCoin(
+        totalValidatorStake,
+        IOTA_TYPE_ARG,
+    );
+    const [totalStakeFormatted, totalStakeSymbol] = useFormatCoin(totalStake, IOTA_TYPE_ARG);
 
     if (isPending || loadingValidators) {
         return (
@@ -111,75 +112,38 @@ export function ValidatorFormDetail({ validatorAddress, unstake }: ValidatorForm
 
     return (
         <div className="w-full">
-            {validatorData && (
-                <Card
-                    titleDivider
-                    header={
-                        <div className="flex items-center gap-2 px-3.75 py-2.5">
-                            <ValidatorLogo validatorAddress={validatorAddress} size="body" />
-                        </div>
-                    }
-                    footer={
-                        !unstake && (
-                            <>
-                                <Text variant="body" weight="medium" color="steel-darker">
-                                    Your Staked IOTA
-                                </Text>
-
-                                <StakeAmount balance={totalStake} variant="body" />
-                            </>
-                        )
-                    }
-                >
-                    <div className="flex flex-col gap-3.5">
-                        <div className="flex items-center justify-between gap-2">
-                            <div className="text-steel flex items-center gap-1">
-                                <Text variant="body" weight="medium" color="steel-darker">
-                                    Staking APY
-                                </Text>
-                                <IconTooltip
-                                    noFullWidth
-                                    tip="This is the Annualized Percentage Yield of the a specific validator’s past operations. Note there is no guarantee this APY will be true in the future."
-                                />
-                            </div>
-
-                            <Text variant="body" weight="semibold" color="gray-90">
-                                {formatPercentageDisplay(apy, '--', isApyApproxZero)}
-                            </Text>
-                        </div>
-                        <div className="flex items-center justify-between gap-2">
-                            <div className="text-steel flex items-center gap-1">
-                                <Text variant="body" weight="medium" color="steel-darker">
-                                    Stake Share
-                                </Text>
-                                <IconTooltip
-                                    noFullWidth
-                                    tip="The percentage of total stake managed by this validator"
-                                />
-                            </div>
-
-                            <Text variant="body" weight="semibold" color="gray-90">
-                                {formatPercentageDisplay(totalStakePercentage)}
-                            </Text>
-                        </div>
-
-                        {!unstake && (
-                            <div className="mb-3.5 flex items-center justify-between gap-2">
-                                <div className="text-steel flex items-center gap-1">
-                                    <Text variant="body" weight="medium" color="steel-darker">
-                                        Total Staked
-                                    </Text>
-                                    <IconTooltip
-                                        noFullWidth
-                                        tip="The total IOTA staked on the network by this validator and its delegators, to validate the network and earn rewards."
-                                    />
-                                </div>
-                                <StakeAmount balance={totalValidatorStake} variant="body" />
-                            </div>
-                        )}
-                    </div>
-                </Card>
-            )}
+            <Panel hasBorder>
+                <div className="flex flex-col gap-y-sm p-md">
+                    <KeyValueInfo
+                        keyText="APY"
+                        tooltipPosition={TooltipPosition.Right}
+                        tooltipText="Annualized percentage yield based on past validator performance. Future APY may vary"
+                        valueText={formatPercentageDisplay(apy, '--', isApyApproxZero)}
+                    />
+                    <KeyValueInfo
+                        keyText="Stake shared"
+                        tooltipPosition={TooltipPosition.Right}
+                        tooltipText="Stake percentage managed by this validator."
+                        valueText={formatPercentageDisplay(totalStakePercentage)}
+                    />
+                    {!unstake && (
+                        <KeyValueInfo
+                            keyText="Total Staked"
+                            tooltipPosition={TooltipPosition.Right}
+                            tooltipText="Stake percentage managed by this validator."
+                            valueText={totalValidatorStakeFormatted}
+                            supportingLabel={totalValidatorStakeSymbol}
+                        />
+                    )}
+                    <KeyValueInfo
+                        keyText="Your Staked IOTA"
+                        tooltipPosition={TooltipPosition.Right}
+                        tooltipText="Your current staked balance."
+                        valueText={totalStakeFormatted}
+                        supportingLabel={totalStakeSymbol}
+                    />
+                </div>
+            </Panel>
         </div>
     );
 }