From b3c8877b2e94d1dea30e1db241e06eac988c2a5c Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 13 Aug 2020 10:01:31 +0200
Subject: [PATCH] Show sub accounts in sidebar if any (#3405)

* show childs

* s/child/sub

* Update packages/page-accounts/src/Sidebar/Identity.tsx

* Update packages/page-accounts/src/Sidebar/Sidebar.tsx

* move down

* with expander

* Update packages/page-accounts/src/Sidebar/Identity.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 .../page-accounts/src/Sidebar/Identity.tsx    | 27 +++++++++++++++++--
 .../page-accounts/src/Sidebar/Sidebar.tsx     |  6 ++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/page-accounts/src/Sidebar/Identity.tsx b/packages/page-accounts/src/Sidebar/Identity.tsx
index 783e32bd3c..c323b1a1bb 100644
--- a/packages/page-accounts/src/Sidebar/Identity.tsx
+++ b/packages/page-accounts/src/Sidebar/Identity.tsx
@@ -3,10 +3,11 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AddressIdentity } from '@polkadot/react-hooks/types';
+import { AccountId, BalanceOf } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { AddressMini, AvatarItem, Icon, IconLink, Tag } from '@polkadot/react-components';
-import { useApi, useRegistrars, useToggle } from '@polkadot/react-hooks';
+import { AddressMini, AvatarItem, Expander, Icon, IconLink, Tag } from '@polkadot/react-components';
+import { useApi, useCall, useRegistrars, useToggle } from '@polkadot/react-hooks';
 import { isHex } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -22,6 +23,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
   const { api } = useApi();
   const { isRegistrar, registrars } = useRegistrars();
   const [isJudgementOpen, toggleIsJudgementOpen] = useToggle();
+  const subs = useCall<[BalanceOf, AccountId[]]>(api.query.identity?.subsOf, [address])?.[1];
 
   if (!identity || !identity.isExistent || !api.query.identity?.identityOf) {
     return null;
@@ -156,6 +158,27 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
                 </div>
               </div>
             )}
+            {!!subs?.length && (
+              <div className='tr subs'>
+                {subs.length > 1
+                  ? <div className='th top'>{t<string>('subs')}</div>
+                  : <div className='th'>{t<string>('sub')}</div>
+                }
+                <div className='td'>
+                  <Expander summary={`(${subs.length})`}>
+                    <div className='body column'>
+                      {subs.map((sub) =>
+                        <AddressMini
+                          className='subs'
+                          isPadded={false}
+                          key={sub.toString()}
+                          value={sub}
+                        />
+                      )}
+                    </div>
+                  </Expander>
+                </div>
+              </div>)}
           </div>
         </div>
       </div>
diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx
index 4672374dce..afe6415230 100644
--- a/packages/page-accounts/src/Sidebar/Sidebar.tsx
+++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx
@@ -220,6 +220,10 @@ export default React.memo(styled(FullSidebar)`
           font-weight: bold;
           text-align: right;
           flex-basis: 20%;
+
+          &.top {
+            align-self: flex-start;
+          }
         }
 
         .td {
@@ -231,7 +235,7 @@ export default React.memo(styled(FullSidebar)`
       }
     }
 
-    .parent {
+    .parent, .subs {
       padding: 0 !important;
     }
   }