neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display accountIndex on SideBar (as available) (#3140)

Browse Source 
* Display accountIndex on SideBar (as available)

* accountIndex cache

* Cleanup accountIndex re-renders

* Unneeded accountIndex effect dep
This commit is contained in:
Jaco Greeff 2020-07-08 00:17:59 +02:00 committed by GitHub
parent 051b28119f
commit 7531f01a39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/page-accounts/src/Sidebar/Sidebar.tsx
View File

@ -24,7 +24,7 @@ interface Props {
function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { flags, identity, isEditingName, isEditingTags, meta, name, onForgetAddress, onSaveName, onSaveTags, setName, setTags, tags, toggleIsEditingName, toggleIsEditingTags } = useAccountInfo(address);
const { accountIndex, flags, identity, isEditingName, isEditingTags, meta, name, onForgetAddress, onSaveName, onSaveTags, setName, setTags, tags, toggleIsEditingName, toggleIsEditingTags } = useAccountInfo(address);
const [isHoveringButton, toggleIsHoveringButton] = useToggle();
const [isTransferOpen, toggleIsTransferOpen] = useToggle();
@ -61,6 +61,11 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
<div className='ui--AddressMenu-addr'>
{address}
</div>
{accountIndex && (
<div className='ui--AddressMenu-addr'>
{accountIndex}
</div>
)}
<AccountName
onClick={(flags.isEditable && !isEditingName) ? toggleIsEditingName : undefined}
override={
@ -233,10 +238,15 @@ export default React.memo(styled(Sidebar)`
font-family: monospace;
margin: 0.5rem 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
width: 100%;
}
.ui--AddressMenu-addr+.ui--AddressMenu-addr {
margin-top: -0.25rem;
}
section {
&:not(:last-child) {
margin-bottom: 1.4rem;

13
packages/react-hooks/src/useAccountInfo.ts
View File

@ -57,11 +57,14 @@ export default function useAccountInfo (value: string | null, isContract = false
}, [accountFlags]);
useEffect((): void => {
const { accountIndex: anAccountIndex, identity, nickname } = accountInfo || {};
const { accountIndex, identity, nickname } = accountInfo || {};
const newIndex = accountIndex?.toString();
if (anAccountIndex && accountIndex !== anAccountIndex.toString()) {
setAccountIndex(anAccountIndex.toString());
}
setAccountIndex((oldIndex) =>
oldIndex !== newIndex
? newIndex
: oldIndex
);
let name;
@ -97,7 +100,7 @@ export default function useAccountInfo (value: string | null, isContract = false
} else {
setIdentity(undefined);
}
}, [accountIndex, accountInfo, api]);
}, [accountInfo, api]);
useEffect((): void => {
if (value) {