Address info expander (#2560)

* AddressInfo expander cleanups

* Mapping of BalanceLock reasons

packages/react-components/src/AddressInfo.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveBalancesAll, DeriveStakingAccount } from '@polkadot/api-derive/types';
-import { ValidatorPrefsTo145 } from '@polkadot/types/interfaces';
+import { LockIdentifier, ValidatorPrefsTo145 } from '@polkadot/types/interfaces';
 import { BareProps } from './types';
 
 import BN from 'bn.js';
@@ -77,6 +77,18 @@ const DEFAULT_PREFS = {
   validatorPayment: true
 };
 
+function lookupLock (lookup: Record<string, string>, lockId: LockIdentifier): string {
+  const lockHex = lockId.toHex();
+
+  try {
+    const lockName = hexToString(lockHex);
+
+    return lookup[lockName] || lockName;
+  } catch (error) {
+    return lockHex;
+  }
+}
+
 // skip balances retrieval of none of this matches
 function skipBalancesIf ({ withBalance = true, withExtended = false }: Props): boolean {
   if (withBalance === true || withExtended === true) {
@@ -213,10 +225,16 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
 
   const [ownBonded, otherBonded] = calcBonded(stakingInfo, balanceDisplay.bonded);
   const isAllLocked = !!balancesAll && balancesAll.lockedBreakdown.some(({ amount }): boolean => amount.isMax());
+  const lookup = {
+    democrac: t('via Democracy/Vote'),
+    phrelect: t('via Council/Vote'),
+    'staking ': t('via Staking/Bond'),
+    'vesting ': t('via Vesting')
+  };
 
   const allItems = (
     <>
-      {balancesAll && balanceDisplay.total && (
+      {!withBalanceToggle && balancesAll && balanceDisplay.total && (
         <>
           <Label label={t('total')} />
           <FormatBalance
@@ -261,7 +279,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
                   {amount.isMax()
                     ? t('everything')
                     : formatBalance(amount, { forceUnit: '-' })
-                  }{id && <div className='faded'>{hexToString(id.toHex())}</div>}<div className='faded'>{reasons.toString()}</div>
+                  }{id && <div className='faded'>{lookupLock(lookup, id)}</div>}<div className='faded'>{reasons.toString()}</div>
                 </div>
               ))}
               trigger={`${address}-locks-trigger`}
@@ -319,12 +337,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
   if (withBalanceToggle) {
     return (
       <>
-        <Expander summary={
-          <FormatBalance
-            className='summary'
-            value={balancesAll?.votingBalance}
-          />
-        }>
+        <Expander summary={<FormatBalance value={balancesAll?.votingBalance} />}>
           <div className='body column'>
             {allItems}
           </div>
@@ -403,12 +416,6 @@ export default withMulti(
       &.column--expander {
         width: 15rem;
 
-        .ui--Expander.isExpanded {
-          .summary {
-            opacity: 0;
-          }
-        }
-
         .ui--Expander {
           width: 100%;
 

packages/react-components/src/Expander.tsx

@@ -91,6 +91,10 @@ export default React.memo(styled(Expander)`
 
   &.isExpanded .ui--Expander-content {
     margin-top: 0.5rem;
+
+    .body.column {
+      justify-content: end;
+    }
   }
 
   &.hasContent .ui--Expander-summary {