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>
This commit is contained in:
Thibaut Sardan 2020-08-13 10:01:31 +02:00 committed by GitHub
parent 96c8eb9d8c
commit b3c8877b2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 3 deletions

View File

@ -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>

View File

@ -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;
}
}