From 2581d41470fafa17321bf2f08069a45b8b7a9de5 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 30 Mar 2020 16:17:40 +0200 Subject: [PATCH] Adjust bonding, unbonding & redeemable displays (#2486) * Rework bonding amount layouts * icon buttons * Update redeem text --- .../src/Actions/Account/Unbond.tsx | 2 +- .../src/Actions/Account/index.tsx | 29 +++---- packages/page-staking/src/Actions/index.tsx | 4 +- packages/react-components/src/AddressInfo.tsx | 81 +++---------------- .../react-components/src/Button/Button.tsx | 25 ++++-- packages/react-components/src/Button/types.ts | 1 + .../react-components/src/StakingBonded.tsx | 30 +++++++ .../src/StakingRedeemable.tsx | 46 +++++++++++ .../react-components/src/StakingUnbonding.tsx | 67 +++++++++++++++ packages/react-components/src/Table.tsx | 2 +- packages/react-components/src/TxButton.tsx | 9 ++- packages/react-components/src/index.tsx | 3 + packages/react-components/src/styles/index.ts | 6 ++ packages/react-components/src/styles/theme.ts | 6 ++ packages/react-components/src/types.ts | 3 +- 15 files changed, 214 insertions(+), 100 deletions(-) create mode 100644 packages/react-components/src/StakingBonded.tsx create mode 100644 packages/react-components/src/StakingRedeemable.tsx create mode 100644 packages/react-components/src/StakingUnbonding.tsx diff --git a/packages/page-staking/src/Actions/Account/Unbond.tsx b/packages/page-staking/src/Actions/Account/Unbond.tsx index 5e39b2797c..7ad38cc755 100644 --- a/packages/page-staking/src/Actions/Account/Unbond.tsx +++ b/packages/page-staking/src/Actions/Account/Unbond.tsx @@ -76,7 +76,7 @@ class Unbond extends TxComponent { onStart={onClose} params={[maxUnbond]} tx='staking.unbond' - withSpinner + withSpinner={false} /> diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx index 77ad14e487..f67634fb78 100644 --- a/packages/page-staking/src/Actions/Account/index.tsx +++ b/packages/page-staking/src/Actions/Account/index.tsx @@ -12,7 +12,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { Trans } from 'react-i18next'; import styled from 'styled-components'; import { ApiPromise } from '@polkadot/api'; -import { AddressInfo, AddressMini, AddressSmall, Badge, Button, Expander, Menu, Popup, Spinner, StatusContext, TxButton } from '@polkadot/react-components'; +import { AddressInfo, AddressMini, AddressSmall, Badge, Button, Expander, Menu, Popup, Spinner, StakingBonded, StakingRedeemable, StakingUnbonding, StatusContext, TxButton } from '@polkadot/react-components'; import { useAccounts, useApi, useCall, useToggle } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; import { u8aConcat, u8aToHex } from '@polkadot/util'; @@ -46,7 +46,8 @@ interface Props { interface StakeState { controllerId: string | null; - destination: number; + destination?: string; + destinationId: number; exposure?: Exposure; hexSessionIdNext: string | null; hexSessionIdQueue: string | null; @@ -75,7 +76,8 @@ function getStakeState (allAccounts: string[], allStashes: string[] | undefined, return { controllerId, - destination: rewardDestination?.toNumber() || 0, + destination: rewardDestination?.toString().toLowerCase(), + destinationId: rewardDestination?.toNumber() || 0, exposure, hexSessionIdNext: u8aToHex(nextConcat, 48), hexSessionIdQueue: u8aToHex(currConcat.length ? currConcat : nextConcat, 48), @@ -118,7 +120,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar const balancesAll = useCall(api.derive.balances.all as any, [stashId]); const stakingAccount = useCall(api.derive.staking.account as any, [stashId]); const [[payoutRewards, payoutEras, payoutTotal], setStakingRewards] = useState<[DeriveStakerReward[], EraIndex[], BN]>([[], [], new BN(0)]); - const [{ controllerId, destination, hexSessionIdQueue, hexSessionIdNext, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState({ controllerId: null, destination: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] }); + const [{ controllerId, destination, destinationId, hexSessionIdQueue, hexSessionIdNext, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState({ controllerId: null, destinationId: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] }); const [activeNoms, setActiveNoms] = useState([]); const inactiveNoms = useInactives(stashId, nominees); const [isBondExtraOpen, toggleBondExtra] = useToggle(); @@ -244,7 +246,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar {isRewardDestinationOpen && controllerId && ( )} @@ -259,18 +261,11 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar - - + {destination} + + + + {isStashValidating ? ( diff --git a/packages/page-staking/src/Actions/index.tsx b/packages/page-staking/src/Actions/index.tsx index 0291d6d489..b9c0166a57 100644 --- a/packages/page-staking/src/Actions/index.tsx +++ b/packages/page-staking/src/Actions/index.tsx @@ -81,7 +81,9 @@ function Actions ({ allRewards, allStashes, className, isVisible, next, stakingO

{t('stashes')}

{t('controller')} -   + {t('rewards')} + {t('bonded')} +   {foundStashes?.map(([stashId, isOwnStash]): React.ReactNode => ( diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx index 4400d88ace..de7d2c33fb 100644 --- a/packages/react-components/src/AddressInfo.tsx +++ b/packages/react-components/src/AddressInfo.tsx @@ -10,11 +10,13 @@ import BN from 'bn.js'; import React from 'react'; import styled from 'styled-components'; import { formatBalance, formatNumber, isObject } from '@polkadot/util'; -import { Expander, Icon, Tooltip, TxButton } from '@polkadot/react-components'; +import { Expander, Icon, Tooltip } from '@polkadot/react-components'; import { withCalls, withMulti } from '@polkadot/react-api/hoc'; import { useAccounts } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; +import StakingRedeemable from './StakingRedeemable'; +import StakingUnbonding from './StakingUnbonding'; import CryptoType from './CryptoType'; import Label from './Label'; import { useTranslation } from './translate'; @@ -52,8 +54,8 @@ interface Props extends BareProps { withBalanceToggle?: false; withExtended?: boolean | CryptoActiveType; withHexSessionId?: (string | null)[]; - withRewardDestination?: boolean; withValidatorPrefs?: boolean | ValidatorPrefsType; + withoutLabel?: boolean; } const DEFAULT_BALANCES: BalanceActiveType = { @@ -93,10 +95,10 @@ function skipBalancesIf ({ withBalance = true, withExtended = false }: Props): b return true; } -function skipStakingIf ({ stakingInfo, withBalance = true, withRewardDestination = false, withValidatorPrefs = false }: Props): boolean { +function skipStakingIf ({ stakingInfo, withBalance = true, withValidatorPrefs = false }: Props): boolean { if (stakingInfo) { return true; - } else if (withBalance === true || withValidatorPrefs || withRewardDestination) { + } else if (withBalance === true || withValidatorPrefs) { return false; } else if (isObject(withBalance)) { if (withBalance.unlocking || withBalance.redeemable) { @@ -157,42 +159,6 @@ function renderExtended ({ balancesAll, address, withExtended }: Props, t: (key: ); } -function renderUnlocking ({ address, stakingInfo }: Props, t: (key: string, data: any) => string): React.ReactNode { - if (!stakingInfo || !stakingInfo.unlocking || !stakingInfo.unlocking.length) { - return null; - } - - const total = stakingInfo.unlocking.reduce((total, { value }): BN => total.add(value), new BN(0)); - - if (total.eqn(0)) { - return null; - } - - return ( -
- - - ( -
- {t('{{value}}, {{remaining}} blocks left', { - replace: { - remaining: formatNumber(remainingBlocks), - value: formatBalance(value, { forceUnit: '-' }) - } - })} -
- ))} - trigger={`${address}-unlocking-trigger`} - /> -
- ); -} - function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Props, t: (key: string) => string): React.ReactNode { const validatorPrefsDisplay = withValidatorPrefs === true ? DEFAULT_PREFS @@ -246,7 +212,6 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) = } const [ownBonded, otherBonded] = calcBonded(stakingInfo, balanceDisplay.bonded); - const controllerId = stakingInfo?.controllerId?.toString(); const isAllLocked = !!balancesAll && balancesAll.lockedBreakdown.some(({ amount }): boolean => amount.isMax()); const allItems = ( @@ -331,31 +296,17 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) = {balanceDisplay.redeemable && stakingInfo?.redeemable?.gtn(0) && ( <>