From 441e1b4039937defdf9f60f6ad99d3c90ff7d04e Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 22 Aug 2024 08:43:50 +0200
Subject: [PATCH] feat(wallet): rebrand unstake (#1882)

* 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: refine unstake view

* feat: improvements

* feat: refine views

* feat: update button style and text

* feat: add showBackButton
---
 .../src/ui/app/staking/stake/StakeForm.tsx    |   2 +-
 .../src/ui/app/staking/stake/StakingCard.tsx  |   4 +-
 .../src/ui/app/staking/stake/UnstakeForm.tsx  | 134 +++++++-----------
 .../app/staking/stake/ValidatorFormDetail.tsx |  34 ++---
 .../wallet/src/ui/app/staking/stake/index.tsx |   3 +-
 5 files changed, 75 insertions(+), 102 deletions(-)

diff --git a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
index ae4e98c5da3..36bb2358d71 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
@@ -118,7 +118,7 @@ function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFrom
                 )}
             />
             <Panel hasBorder>
-                <div className="gap-y-sm p-md">
+                <div className="flex flex-col gap-y-sm p-md">
                     <KeyValueInfo
                         keyText="Staking Rewards Start"
                         valueText={stakedRewardsStartEpoch}
diff --git a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
index 9d4db883105..86d88e6097c 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
@@ -317,13 +317,13 @@ function StakingCard() {
                             </div>
                             <div className="pt-sm">
                                 <Button
-                                    type={ButtonType.Primary}
+                                    type={unstake ? ButtonType.Secondary : ButtonType.Primary}
                                     fullWidth
                                     onClick={submitForm}
                                     disabled={
                                         !isValid || isSubmitting || (unstake && !delegationId)
                                     }
-                                    text={unstake ? 'Unstake Now' : 'Stake Now'}
+                                    text={unstake ? 'Unstake' : 'Stake'}
                                 />
                             </div>
                         </>
diff --git a/apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx b/apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx
index d02952eb831..a0c6d5e9522 100644
--- a/apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx
@@ -2,17 +2,20 @@
 // 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 { CountDownTimer } from '_src/ui/app/shared/countdown-timer';
-import { createUnstakeTransaction, useFormatCoin, useGetTimeBeforeEpochNumber } from '@iota/core';
+import {
+    createUnstakeTransaction,
+    TimeUnit,
+    useFormatCoin,
+    useGetTimeBeforeEpochNumber,
+    useTimeAgo,
+} from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { Form } from 'formik';
 import { useMemo } from 'react';
 
 import { useActiveAddress, useTransactionGasBudget } from '../../hooks';
 import { GAS_SYMBOL } from '../../redux/slices/iota-objects/Coin';
-import { Heading } from '../../shared/heading';
+import { Divider, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
 
 export interface StakeFromProps {
     stakedIotaId: string;
@@ -38,86 +41,53 @@ export function UnStakeForm({
     const { data: gasBudget } = useTransactionGasBudget(activeAddress, transaction);
 
     const { data: currentEpochEndTime } = useGetTimeBeforeEpochNumber(epoch + 1 || 0);
+    const currentEpochEndTimeAgo = useTimeAgo({
+        timeFrom: currentEpochEndTime,
+        endLabel: '--',
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
+
+    const currentEpochEndTimeFormatted =
+        currentEpochEndTime > 0 ? currentEpochEndTimeAgo : `Epoch #${epoch}`;
 
     return (
-        <Form className="flex flex-1 flex-col flex-nowrap" autoComplete="off" noValidate>
-            <Card
-                titleDivider
-                header={
-                    <div className="flex w-full justify-between bg-white px-4 py-3">
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            Current Epoch Ends
-                        </Text>
-                        <div className="ml-auto flex gap-0.5">
-                            {currentEpochEndTime > 0 ? (
-                                <CountDownTimer
-                                    timestamp={currentEpochEndTime}
-                                    variant="body"
-                                    color="steel-dark"
-                                    weight="medium"
-                                    endLabel="--"
-                                />
-                            ) : (
-                                <Text variant="body" weight="medium" color="steel-dark">
-                                    Epoch #{epoch}
-                                </Text>
-                            )}
-                        </div>
-                    </div>
-                }
-                footer={
-                    <div className="flex w-full justify-between gap-0.5">
-                        <Text variant="pBodySmall" weight="medium" color="steel-darker">
-                            Total unstaked IOTA
-                        </Text>
-                        <div className="ml-auto flex gap-0.5">
-                            <Heading
-                                variant="heading4"
-                                weight="semibold"
-                                color="steel-darker"
-                                leading="none"
-                            >
-                                {totalIota}
-                            </Heading>
-                            <Text variant="bodySmall" weight="medium" color="steel-dark">
-                                {GAS_SYMBOL}
-                            </Text>
-                        </div>
-                    </div>
-                }
-            >
-                <div className="flex w-full flex-col  gap-2 pb-3.75">
-                    <div className="flex w-full justify-between gap-0.5">
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            Your Stake
-                        </Text>
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            {tokenBalance} {GAS_SYMBOL}
-                        </Text>
-                    </div>
-                    <div className="flex w-full justify-between gap-0.5">
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            Staking Rewards Earned
-                        </Text>
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            {rewards} {rewardSymbol}
-                        </Text>
-                    </div>
+        <Form className="flex flex-1 flex-col flex-nowrap gap-y-md" autoComplete="off" noValidate>
+            <Panel hasBorder>
+                <div className="flex flex-col gap-y-sm p-md">
+                    <KeyValueInfo
+                        keyText="Current Epoch Ends"
+                        valueText={currentEpochEndTimeFormatted}
+                    />
+                    <Divider />
+                    <KeyValueInfo
+                        keyText="Your Stake"
+                        valueText={tokenBalance}
+                        supportingLabel={GAS_SYMBOL}
+                    />
+                    <KeyValueInfo
+                        keyText="Rewards Earned"
+                        valueText={rewards}
+                        supportingLabel={rewardSymbol}
+                    />
+                    <Divider />
+                    <KeyValueInfo
+                        keyText="Total unstaked IOTA"
+                        valueText={totalIota}
+                        supportingLabel={GAS_SYMBOL}
+                    />
                 </div>
-            </Card>
-            <div className="mt-4">
-                <Card variant="gray">
-                    <div className=" flex w-full justify-between">
-                        <Text variant="body" weight="medium" color="steel-darker">
-                            Gas Fees
-                        </Text>
-
-                        <Text variant="body" weight="medium" color="steel-dark">
-                            {gasBudget || '-'} {GAS_SYMBOL}
-                        </Text>
-                    </div>
-                </Card>
-            </div>
+            </Panel>
+            <Panel hasBorder>
+                <div className="flex flex-col gap-y-sm p-md">
+                    <KeyValueInfo
+                        keyText="Gas Fees"
+                        valueText={gasBudget || '-'}
+                        supportingLabel={GAS_SYMBOL}
+                    />
+                </div>
+            </Panel>
         </Form>
     );
 }
diff --git a/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx b/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx
index e4be6021431..e4da11992ff 100644
--- a/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx
@@ -115,33 +115,35 @@ export function ValidatorFormDetail({ validatorAddress, unstake }: ValidatorForm
             <Panel hasBorder>
                 <div className="flex flex-col gap-y-sm p-md">
                     <KeyValueInfo
-                        keyText="APY"
+                        keyText="Staking 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"
+                        keyText="Stake Share"
                         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="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}
+                            />
+                        </>
                     )}
-                    <KeyValueInfo
-                        keyText="Your Staked IOTA"
-                        tooltipPosition={TooltipPosition.Right}
-                        tooltipText="Your current staked balance."
-                        valueText={totalStakeFormatted}
-                        supportingLabel={totalStakeSymbol}
-                    />
                 </div>
             </Panel>
         </div>
diff --git a/apps/wallet/src/ui/app/staking/stake/index.tsx b/apps/wallet/src/ui/app/staking/stake/index.tsx
index 6edc1110fd2..4add0478403 100644
--- a/apps/wallet/src/ui/app/staking/stake/index.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/index.tsx
@@ -14,13 +14,14 @@ function StakePage() {
     const unstake = searchParams.get('unstake') === 'true';
 
     const navigate = useNavigate();
-    const stakingTitle = unstake ? 'Unstake IOTA' : 'Stake IOTA';
+    const stakingTitle = unstake ? 'Unstake' : 'Stake IOTA';
 
     return (
         <Overlay
             showModal={true}
             title={validatorAddress ? stakingTitle : 'Select a Validator'}
             closeOverlay={() => navigate('/')}
+            showBackButton
         >
             {validatorAddress ? <StakingCard /> : <SelectValidatorCard />}
         </Overlay>