Skip to content

Commit

Permalink
feat(wallet): rebrand unstake (#1882)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@evavirseda
evavirseda authored Aug 22, 2024
1 parent 088b88f commit 441e1b4
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 102 deletions.
2 changes: 1 addition & 1 deletion apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down
134 changes: 52 additions & 82 deletions apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
);
}
34 changes: 18 additions & 16 deletions apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion apps/wallet/src/ui/app/staking/stake/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 441e1b4

Please sign in to comment.