Move delegation column to badge (#3202)

* move delegation column to badge

* lint

* Update packages/page-accounts/src/Accounts/Account.tsx

* add previous rather than _

* fix x0.1 bug reseting to x1

* ? on a new line

packages/page-accounts/src/Accounts/Account.tsx

@@ -16,7 +16,6 @@ import { ApiPromise } from '@polkadot/api';
 import { getLedger } from '@polkadot/react-api';
 import { AddressInfo, AddressMini, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components';
 import { useAccountInfo, useApi, useCall, useToggle } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
 import keyring from '@polkadot/ui-keyring';
 import { BN_ZERO, formatBalance, formatNumber } from '@polkadot/util';
@@ -258,6 +257,14 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             info='0'
           />
         )}
+        {delegation?.accountDelegated && (
+          <Badge
+            color='blue'
+            hover={t<string>('This account has a governance delegation')}
+            icon='calendar-check'
+            onClick={toggleDelegate}
+          />
+        )}
       </td>
       <td className='address'>
         <AddressSmall value={address} />
@@ -268,6 +275,16 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             onClose={toggleBackup}
           />
         )}
+        {isDelegateOpen && (
+          <DelegateModal
+            key='modal-delegate'
+            onClose={toggleDelegate}
+            previousAmount={delegation?.amount}
+            previousConviction={delegation?.conviction}
+            previousDelegatedAccount={delegation?.accountDelegated}
+            previousDelegatingAccount={address}
+          />
+        )}
         {isDeriveOpen && (
           <Derive
             from={address}
@@ -335,44 +352,19 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             onClose={toggleRecoverSetup}
           />
         )}
+        {isUndelegateOpen && (
+          <UndelegateModal
+            accountDelegating={address}
+            key='modal-delegate'
+            onClose={toggleUndelegate}
+          />
+        )}
       </td>
       <td className='address ui--media-1200'>
         {meta.parentAddress && (
           <AddressMini value={meta.parentAddress} />
         )}
       </td>
-      {api.api.query.democracy?.votingOf && (
-        <td className='address ui--media-1500'>
-          {isDelegateOpen && (
-            <DelegateModal
-              amount={delegation?.amount}
-              conviction={delegation?.conviction}
-              delegatedAccount={delegation?.accountDelegated}
-              delegatingAccount={address}
-              key='modal-delegate'
-              onClose={toggleDelegate}
-            />
-          )}
-          {isUndelegateOpen && (
-            <UndelegateModal
-              accountDelegating={address}
-              key='modal-delegate'
-              onClose={toggleUndelegate}
-            />
-          )}
-          {delegation && (
-            <AddressMini
-              summary={
-                <div>
-                  <FormatBalance value={delegation.amount} />
-                  <div>{delegation.conviction.toString()}</div>
-                </div>
-              }
-              value={delegation.accountDelegated}
-            />
-          )}
-        </td>
-      )}
       <td className='number'>
         <CryptoType accountId={address} />
       </td>

packages/page-accounts/src/Accounts/index.tsx

@@ -124,20 +124,18 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
   const header = useMemo(() => [
     [t('accounts'), 'start', 3],
     [t('parent'), 'address ui--media-1200'],
-    api.query.democracy?.votingOf && [t('delegation'), 'address ui--media-1500'],
     [t('type')],
     [t('tags'), 'start'],
     [t('transactions'), 'ui--media-1500'],
     [t('balances')],
     [],
     [undefined, 'mini ui--media-1400']
-  ], [api, t]);
+  ], [t]);
 
   const footer = useMemo(() => (
     <tr>
       <td colSpan={3} />
       <td className='ui--media-1200' />
-      {api.query.democracy?.votingOf && <td className='ui--media-1500' />}
       <td colSpan={2} />
       <td className='ui--media-1500' />
       <td className='number'>
@@ -146,7 +144,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
       <td />
       <td className='ui--media-1400' />
     </tr>
-  ), [api, balanceTotal]);
+  ), [balanceTotal]);
 
   const filter = useMemo(() => (
     <div className='filter--tags'>

packages/page-accounts/src/Accounts/modals/Delegate.tsx

@@ -15,26 +15,37 @@ import { useTranslation } from '../../translate';
 import ValidateAmount from './InputValidateAmount';
 
 interface Props {
-  amount?: BN;
-  conviction?: Conviction;
-  delegatedAccount?: string;
-  delegatingAccount?: string;
   onClose: () => void;
+  previousAmount?: BN;
+  previousConviction?: Conviction;
+  previousDelegatedAccount?: string;
+  previousDelegatingAccount?: string;
 }
 
-function Delegate ({ amount: _amount, conviction: _conviction, delegatedAccount: _delegatedAccount, delegatingAccount: _delegatingAccount, onClose }: Props): React.ReactElement<Props> {
+function Delegate ({ onClose, previousAmount, previousConviction, previousDelegatedAccount, previousDelegatingAccount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [amountError, setAmountError] = useState<AmountValidateState | null>(null);
   const [maxBalance] = useState<BN | undefined>();
-  const [amount, setAmount] = useState<BN | undefined>(_amount);
-  const [delegatingAccount, setDelegatingAccount] = useState<string | null>(_delegatingAccount || null);
-  const [delegatedAccount, setDelegatedAccount] = useState<string | null>(_delegatedAccount || null);
-  const [conviction, setConviction] = useState(_conviction?.toNumber() || 1);
+  const [amount, setAmount] = useState<BN | undefined>(previousAmount);
+  const [delegatingAccount, setDelegatingAccount] = useState<string | null>(previousDelegatingAccount || null);
+  const [delegatedAccount, setDelegatedAccount] = useState<string | null>(previousDelegatedAccount || null);
+  const defaultConviction = previousConviction === undefined
+    ? 1
+    : previousConviction.toNumber();
+  const [conviction, setConviction] = useState(defaultConviction);
+
+  const isDirty = amount?.toString() !== previousAmount?.toString() ||
+    delegatedAccount !== previousDelegatedAccount ||
+    delegatingAccount !== previousDelegatingAccount ||
+    conviction !== previousConviction?.toNumber();
 
   return (
     <Modal
       className='staking--Delegate'
-      header= {t<string>('Delegate democracy vote')}
+      header={previousDelegatedAccount
+        ? t<string>('democracy vote delegation')
+        : t<string>('delegate democracy vote')
+      }
       size='large'
     >
       <Modal.Content>
@@ -92,12 +103,26 @@ function Delegate ({ amount: _amount, conviction: _conviction, delegatedAccount:
         </Modal.Columns>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
+        {previousDelegatedAccount && (
+          <TxButton
+            accountId={delegatingAccount}
+            icon='trash-alt'
+            isNegative
+            label={t<string>('Undelegate')}
+            onStart={onClose}
+            params={[]}
+            tx='democracy.undelegate'
+          />
+        )}
         <TxButton
           accountId={delegatingAccount}
           icon='sign-in-alt'
-          isDisabled={!amount?.gt(BN_ZERO) || !!amountError?.error}
+          isDisabled={!amount?.gt(BN_ZERO) || !!amountError?.error || !isDirty}
           isPrimary
-          label={t<string>('Delegate')}
+          label={previousDelegatedAccount
+            ? t<string>('Save delegation')
+            : t<string>('Delegate')
+          }
           onStart={onClose}
           params={[delegatedAccount, conviction, amount]}
           tx='democracy.delegate'