From 9f4d97839a95b984374999fdf673fabf9fcc1111 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sat, 28 Mar 2020 10:29:45 +0100 Subject: [PATCH] Some small UI adjustments (#2471) --- packages/apps/src/Content/index.tsx | 2 +- .../page-accounts/src/Accounts/Account.tsx | 133 ++++++++++-------- .../page-accounts/src/Contacts/Address.tsx | 2 +- .../src/Overview/DispatchQueue.tsx | 2 +- .../page-explorer/src/BlockInfo/ByHash.tsx | 6 +- .../page-explorer/src/BlockInfo/ByNumber.tsx | 3 +- packages/react-components/src/Spinner.tsx | 2 +- 7 files changed, 83 insertions(+), 67 deletions(-) diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index 341129f19a..ec1748cda5 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -52,7 +52,7 @@ function Content ({ className }: Props): React.ReactElement { {needsApi && (!isApiReady || !isApiConnected) ? (
- +
) : ( diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index 5c609c4d4a..8c1562b147 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -100,68 +100,83 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr } }, [accName, filter, tags]); + const _onFavorite = useCallback( + (): void => toggleFavorite(address), + [address, toggleFavorite] + ); + const _onGenesisChange = useCallback( + (genesisHash: string | null): void => { + const account = keyring.getPair(address); + + account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash }); + + setGenesisHash(genesisHash); + }, + [address] + ); + const _saveName = useCallback( + (): void => { + toggleEditName(); + + const meta = { name: accName, whenEdited: Date.now() }; + + if (address) { + try { + const currentKeyring = keyring.getPair(address); + + currentKeyring && keyring.saveAccountMeta(currentKeyring, meta); + } catch (error) { + keyring.saveAddress(address, meta); + } + } + }, + [accName, address, toggleEditName] + ); + const _saveTags = useCallback( + (): void => { + toggleEditTags(); + + const meta = { tags, whenEdited: Date.now() }; + + if (address) { + try { + const currentKeyring = keyring.getPair(address); + + currentKeyring && keyring.saveAccountMeta(currentKeyring, meta); + } catch (error) { + keyring.saveAddress(address, meta); + } + } + }, + [address, tags, toggleEditTags] + ); + const _onForget = useCallback( + (): void => { + if (!address) { + return; + } + + const status: Partial = { + account: address, + action: 'forget' + }; + + try { + keyring.forgetAccount(address); + status.status = 'success'; + status.message = t('account forgotten'); + } catch (error) { + status.status = 'error'; + status.message = error.message; + } + }, + [address, t] + ); + if (!isVisible) { return null; } - const _saveName = (): void => { - toggleEditName(); - - const meta = { name: accName, whenEdited: Date.now() }; - - if (address) { - try { - const currentKeyring = keyring.getPair(address); - - currentKeyring && keyring.saveAccountMeta(currentKeyring, meta); - } catch (error) { - keyring.saveAddress(address, meta); - } - } - }; - const _saveTags = (): void => { - toggleEditTags(); - - const meta = { tags, whenEdited: Date.now() }; - - if (address) { - try { - const currentKeyring = keyring.getPair(address); - - currentKeyring && keyring.saveAccountMeta(currentKeyring, meta); - } catch (error) { - keyring.saveAddress(address, meta); - } - } - }; - const _onForget = (): void => { - if (!address) { - return; - } - - const status: Partial = { - account: address, - action: 'forget' - }; - - try { - keyring.forgetAccount(address); - status.status = 'success'; - status.message = t('account forgotten'); - } catch (error) { - status.status = 'error'; - status.message = error.message; - } - }; - const _onGenesisChange = (genesisHash: string | null): void => { - const account = keyring.getPair(address); - - account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash }); - - setGenesisHash(genesisHash); - }; - const _onFavorite = (): void => toggleFavorite(address); - return ( @@ -290,7 +305,7 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr /> )} - + {isEditingTags ? ( )} - + {isEditingTags ? ( | null ) - : t('nothing queued for execution') + : t('Nothing queued for execution') : } diff --git a/packages/page-explorer/src/BlockInfo/ByHash.tsx b/packages/page-explorer/src/BlockInfo/ByHash.tsx index 8fe556cf92..cf5a421bfb 100644 --- a/packages/page-explorer/src/BlockInfo/ByHash.tsx +++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx @@ -8,7 +8,7 @@ import { EventRecord, SignedBlock } from '@polkadot/types/interfaces'; import React from 'react'; import styled from 'styled-components'; import { HeaderExtended } from '@polkadot/api-derive'; -import { Columar } from '@polkadot/react-components'; +import { Columar, Spinner } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import BlockHeader from '../BlockHeader'; @@ -21,14 +21,14 @@ interface Props { value: string; } -function BlockByHash ({ className, value }: Props): React.ReactElement | null { +function BlockByHash ({ className, value }: Props): React.ReactElement { const { api } = useApi(); const events = useCall(api.query.system.events.at as any, [value], { isSingle: true }); const getBlock = useCall(api.rpc.chain.getBlock as any, [value], { isSingle: true }); const getHeader = useCall(api.derive.chain.getHeader as any, [value]); if (!getBlock || getBlock.isEmpty || !getHeader || getHeader.isEmpty) { - return null; + return ; } return ( diff --git a/packages/page-explorer/src/BlockInfo/ByNumber.tsx b/packages/page-explorer/src/BlockInfo/ByNumber.tsx index 4d6054520d..35fca12af5 100644 --- a/packages/page-explorer/src/BlockInfo/ByNumber.tsx +++ b/packages/page-explorer/src/BlockInfo/ByNumber.tsx @@ -6,6 +6,7 @@ import { Hash } from '@polkadot/types/interfaces'; import React from 'react'; +import { Spinner } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import BlockByHash from './ByHash'; @@ -19,7 +20,7 @@ function BlockByNumber ({ value }: Props): React.ReactElement | null { const getBlockHash = useCall(api.rpc.chain.getBlockHash as any, [value]); if (!getBlockHash) { - return null; + return ; } return ( diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx index 6d176d6408..0cf971ed25 100644 --- a/packages/react-components/src/Spinner.tsx +++ b/packages/react-components/src/Spinner.tsx @@ -49,7 +49,7 @@ export default React.memo(styled(Spinner)` .loader { position: relative; margin: 0 auto; - width: 64px; + width: 56px; &:before { content: '';