Rebond modal (#6434)

* Rebond modal

* Fix modal open

packages/page-staking/src/Actions/Account/BondExtra.tsx

@@ -55,7 +55,6 @@ function BondExtra ({ controllerId, onClose, stakingInfo, stashId }: Props): Rea
 
   return (
     <Modal
-      className='staking--BondExtra'
       header= {t<string>('Bond more funds')}
       onClose={onClose}
       size='large'

packages/page-staking/src/Actions/Account/Rebond.tsx

@@ -0,0 +1,75 @@
+// Copyright 2017-2021 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveStakingAccount } from '@polkadot/api-derive/types';
+
+import BN from 'bn.js';
+import React, { useMemo, useState } from 'react';
+
+import { InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
+import { BN_ZERO } from '@polkadot/util';
+
+import { useTranslation } from '../../translate';
+import SenderInfo from '../partials/SenderInfo';
+
+interface Props {
+  controllerId: string | null;
+  onClose: () => void;
+  stakingInfo?: DeriveStakingAccount;
+  stashId: string;
+}
+
+// TODO we should check that the bonded amoutn, after the operation is >= ED
+function Rebond ({ controllerId, onClose, stakingInfo, stashId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const [maxAdditional, setMaxAdditional] = useState<BN | undefined>();
+
+  const startBalance = useMemo(
+    () => stakingInfo && stakingInfo.unlocking
+      ? stakingInfo.unlocking.reduce((total, { value }) => total.iadd(value), new BN(0))
+      : BN_ZERO,
+    [stakingInfo]
+  );
+
+  return (
+    <Modal
+      header= {t<string>('Bond more funds')}
+      onClose={onClose}
+      size='large'
+    >
+      <Modal.Content>
+        <SenderInfo
+          controllerId={controllerId}
+          stashId={stashId}
+        />
+        {startBalance && (
+          <Modal.Columns hint={t<string>('The amount the is to be rebonded from the value currently unlocking, i.e. previously unbonded')}>
+            <InputBalance
+              autoFocus
+              defaultValue={startBalance}
+              help={t<string>('Amount to add to the currently bonded funds. This is adjusted using the funds currently unlocking.')}
+              isError={!maxAdditional || maxAdditional.eqn(0) || maxAdditional.gt(startBalance)}
+              label={t<string>('rebonded amount')}
+              onChange={setMaxAdditional}
+            />
+          </Modal.Columns>
+        )}
+      </Modal.Content>
+      <Modal.Actions>
+        <TxButton
+          accountId={controllerId}
+          icon='sign-in-alt'
+          isDisabled={!maxAdditional || maxAdditional.isZero() || !startBalance || maxAdditional.gt(startBalance)}
+          label={t<string>('Rebond')}
+          onStart={onClose}
+          params={[maxAdditional]}
+          tx={api.tx.staking.rebond}
+        />
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default React.memo(Rebond);

packages/page-staking/src/Actions/Account/Unbond.tsx

@@ -15,14 +15,13 @@ import { useTranslation } from '../../translate';
 import useUnbondDuration from '../useUnbondDuration';
 
 interface Props {
-  className?: string;
   controllerId?: AccountId | null;
   onClose: () => void;
   stakingLedger?: StakingLedger;
   stashId: string;
 }
 
-function Unbond ({ className = '', controllerId, onClose, stakingLedger, stashId }: Props): React.ReactElement<Props> {
+function Unbond ({ controllerId, onClose, stakingLedger, stashId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const bondedBlocks = useUnbondDuration();
@@ -32,7 +31,6 @@ function Unbond ({ className = '', controllerId, onClose, stakingLedger, stashId
 
   return (
     <Modal
-      className={`staking--Unbond ${className}`}
       header={t<string>('Unbond funds')}
       onClose={onClose}
       size='large'

packages/page-staking/src/Actions/Account/index.tsx

@@ -23,6 +23,7 @@ import InjectKeys from './InjectKeys';
 import KickNominees from './KickNominees';
 import ListNominees from './ListNominees';
 import Nominate from './Nominate';
+import Rebond from './Rebond';
 import SetControllerAccount from './SetControllerAccount';
 import SetRewardDestination from './SetRewardDestination';
 import SetSessionKey from './SetSessionKey';
@@ -76,6 +77,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
   const [isInjectOpen, toggleInject] = useToggle();
   const [isKickOpen, toggleKick] = useToggle();
   const [isNominateOpen, toggleNominate] = useToggle();
+  const [isRebondOpen, toggleRebond] = useToggle();
   const [isRewardDestinationOpen, toggleRewardDestination] = useToggle();
   const [isSetControllerOpen, toggleSetController] = useToggle();
   const [isSetSessionOpen, toggleSetSession] = useToggle();
@@ -148,6 +150,14 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
             targets={targets}
           />
         )}
+        {isRebondOpen && (
+          <Rebond
+            controllerId={controllerId}
+            onClose={toggleRebond}
+            stakingInfo={stakingAccount}
+            stashId={stashId}
+          />
+        )}
         {isSetControllerOpen && controllerId && (
           <SetControllerAccount
             defaultControllerId={controllerId}
@@ -295,6 +305,12 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
                   >
                     {t<string>('Unbond funds')}
                   </Menu.Item>
+                  <Menu.Item
+                    isDisabled={!isOwnController || !stakingAccount || !stakingAccount.unlocking || !stakingAccount.unlocking.length}
+                    onClick={toggleRebond}
+                  >
+                    {t<string>('Rebond funds')}
+                  </Menu.Item>
                   <Menu.Item
                     isDisabled={!isOwnController || !stakingAccount || !stakingAccount.redeemable || !stakingAccount.redeemable.gtn(0)}
                     onClick={withdrawFunds}

packages/page-staking/src/Actions/partials/SenderInfo.tsx

@@ -9,13 +9,17 @@ import { useTranslation } from '../../translate';
 
 interface Props {
   className?: string;
-  controllerId: string;
-  stashId: string;
+  controllerId?: string | null;
+  stashId?: string | null;
 }
 
-function SenderInfo ({ className = '', controllerId, stashId }: Props): React.ReactElement<Props> {
+function SenderInfo ({ className = '', controllerId, stashId }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
+  if (!stashId || !controllerId) {
+    return null;
+  }
+
   return (
     <Modal.Columns
       className={className}