From c726ac737ca3a8b3c089bb4f2fd6bf2833f63040 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 25 Nov 2019 10:47:59 +0100
Subject: [PATCH] Check for controller availability (unlock)

---
 packages/react-components/src/AddressInfo.tsx | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index 43ef88ffd74b..3879607df81c 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import { formatBalance, formatNumber, isObject } from '@polkadot/util';
 import { Icon, Tooltip, TxButton } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
+import { useAccounts } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import CryptoType from './CryptoType';
@@ -224,7 +225,7 @@ function renderValidatorPrefs ({ stakingInfo, t, withValidatorPrefs = false }: P
   );
 }
 
-function renderBalances (props: Props): React.ReactNode {
+function renderBalances (props: Props, allAccounts: string[]): React.ReactNode {
   const { balancesAll, stakingInfo, t, withBalance = true } = props;
   const balanceDisplay = withBalance === true
     ? DEFAULT_BALANCES
@@ -235,6 +236,7 @@ function renderBalances (props: Props): React.ReactNode {
   }
 
   const [ownBonded, otherBonded] = calcBonded(stakingInfo, balanceDisplay.bonded);
+  const controllerId = stakingInfo?.controllerId?.toString();
 
   return (
     <>
@@ -256,7 +258,7 @@ function renderBalances (props: Props): React.ReactNode {
           />
         </>
       )}
-      {balancesAll && balanceDisplay.vested && balancesAll.isVesting && (
+      {balanceDisplay.vested && balancesAll?.isVesting && (
         <>
           <Label label={t('vested')} />
           <FormatBalance
@@ -265,7 +267,7 @@ function renderBalances (props: Props): React.ReactNode {
           />
         </>
       )}
-      {balancesAll && balanceDisplay.locked && balancesAll.lockedBalance && balancesAll.lockedBalance.gtn(0) && (
+      {balanceDisplay.locked && balancesAll?.lockedBalance?.gtn(0) && (
         <>
           <Label label={t('locked')} />
           <FormatBalance
@@ -274,7 +276,7 @@ function renderBalances (props: Props): React.ReactNode {
           />
         </>
       )}
-      {balancesAll && balanceDisplay.reserved && balancesAll.reservedBalance && balancesAll.reservedBalance.gtn(0) && (
+      {balanceDisplay.reserved && balancesAll?.reservedBalance?.gtn(0) && (
         <>
           <Label label={t('reserved')} />
           <FormatBalance
@@ -298,16 +300,16 @@ function renderBalances (props: Props): React.ReactNode {
           </FormatBalance>
         </>
       )}
-      {balanceDisplay.redeemable && stakingInfo && stakingInfo.redeemable && stakingInfo.redeemable.gtn(0) && (
+      {balanceDisplay.redeemable && stakingInfo?.redeemable?.gtn(0) && (
         <>
           <Label label={t('redeemable')} />
           <FormatBalance
             className='result'
             value={stakingInfo.redeemable}
           >
-            {stakingInfo.controllerId && (
+            {controllerId && allAccounts.includes(controllerId) && (
               <TxButton
-                accountId={stakingInfo.controllerId.toString()}
+                accountId={controllerId}
                 className='icon-button'
                 icon='lock'
                 size='small'
@@ -321,7 +323,7 @@ function renderBalances (props: Props): React.ReactNode {
           </FormatBalance>
         </>
       )}
-      {balanceDisplay.unlocking && stakingInfo && stakingInfo.unlocking && (
+      {balanceDisplay.unlocking && stakingInfo?.unlocking && (
         <>
           <Label label={t('unbonding')} />
           <div className='result'>
@@ -334,12 +336,13 @@ function renderBalances (props: Props): React.ReactNode {
 }
 
 function AddressInfo (props: Props): React.ReactElement<Props> {
+  const { allAccounts } = useAccounts();
   const { className, children, extraInfo, stakingInfo, t, withHexSessionId, withRewardDestination } = props;
 
   return (
     <div className={className}>
       <div className='column'>
-        {renderBalances(props)}
+        {renderBalances(props, allAccounts)}
         {withHexSessionId && (
           <>
             <Label label={t('session keys')} />