diff --git a/packages/app-accounts/src/Banner.tsx b/packages/app-accounts/src/Banner.tsx index b74536adb1..d2dad1eeb9 100644 --- a/packages/app-accounts/src/Banner.tsx +++ b/packages/app-accounts/src/Banner.tsx @@ -86,18 +86,20 @@ function Banner ({ className, t }: Props): React.ReactElement | null { ); } -export default translate(styled(Banner)` - padding: 0 0.5rem 0.5rem; +export default translate( + styled(Banner)` + padding: 0 0.5rem 0.5rem; - .box { - background: #fff6e5; - border-left: 0.25rem solid darkorange; - border-radius: 0 0.25rem 0.25rem 0; - box-sizing: border-box; - padding: 1rem 1.5rem; + .box { + background: #fff6e5; + border-left: 0.25rem solid darkorange; + border-radius: 0 0.25rem 0.25rem 0; + box-sizing: border-box; + padding: 1rem 1.5rem; - .info { - max-width: 50rem; + .info { + max-width: 50rem; + } } - } -`); + ` +); diff --git a/packages/app-accounts/src/Vanity/Match.tsx b/packages/app-accounts/src/Vanity/Match.tsx index 9613010d87..3c7510715f 100644 --- a/packages/app-accounts/src/Vanity/Match.tsx +++ b/packages/app-accounts/src/Vanity/Match.tsx @@ -4,7 +4,7 @@ import { BareProps } from '@polkadot/react-components/types'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import { Button, IdentityIcon } from '@polkadot/react-components'; import { u8aToHex } from '@polkadot/util'; @@ -18,73 +18,51 @@ interface Props extends BareProps { seed: Uint8Array; } -interface State { - hexSeed: string; -} +function Match ({ address, className, count, offset, onCreateToggle, onRemove, seed }: Props): React.ReactElement { + const [hexSeed, setHexSeed] = useState(''); + const _onCreate = (): void => onCreateToggle(hexSeed); + const _onRemove = (): void => onRemove(address); -class Match extends React.PureComponent { - public state: State = { hexSeed: '' }; + useEffect((): void => { + setHexSeed(u8aToHex(seed)); + }, [seed]); - public static getDerivedStateFromProps ({ seed }: Props): State { - return { - hexSeed: u8aToHex(seed) - }; - } - - public render (): React.ReactNode { - const { address, className, count, offset } = this.props; - const { hexSeed } = this.state; - - return ( -
-
- -
-
- {address.slice(0, offset)}{address.slice(offset, count + offset)}{address.slice(count + offset)} -
-
- {hexSeed} -
+ return ( +
+
+ +
+
+ {address.slice(0, offset)}{address.slice(offset, count + offset)}{address.slice(count + offset)}
-
-
+
+
- ); - } - - private onCreate = (): void => { - const { onCreateToggle } = this.props; - const { hexSeed } = this.state; - - onCreateToggle(hexSeed); - } - - private onRemove = (): void => { - const { address, onRemove } = this.props; - - onRemove(address); - } +
+ ); } -export default styled(Match as React.ComponentClass)` +export default styled(Match)` text-align: center; &:hover { diff --git a/packages/app-explorer/src/BlockHeader/index.tsx b/packages/app-explorer/src/BlockHeader/index.tsx index 4f1da9fe29..024e294f4d 100644 --- a/packages/app-explorer/src/BlockHeader/index.tsx +++ b/packages/app-explorer/src/BlockHeader/index.tsx @@ -44,7 +44,7 @@ const renderDetails = ({ number: blockNumber, extrinsicsRoot, parentHash, stateR ); }; -function BlockHeader ({ isSummary, value, withExplorer, withLink }: Props): React.ReactElement | null { +export default function BlockHeader ({ isSummary, value, withExplorer, withLink }: Props): React.ReactElement | null { if (!value) { return null; } @@ -82,5 +82,3 @@ function BlockHeader ({ isSummary, value, withExplorer, withLink }: Props): Reac ); } - -export default BlockHeader; diff --git a/packages/app-toolbox/src/Rpc/Results.tsx b/packages/app-toolbox/src/Rpc/Results.tsx index 7c8fb294c9..270da65084 100644 --- a/packages/app-toolbox/src/Rpc/Results.tsx +++ b/packages/app-toolbox/src/Rpc/Results.tsx @@ -13,7 +13,7 @@ interface Props extends BareProps { queue: QueueTx[]; } -function Results ({ queue = [] }: Props): React.ReactElement | null { +export default function Results ({ queue = [] }: Props): React.ReactElement | null { const filtered = queue .filter(({ error, result }): boolean => !isUndefined(error) || !isUndefined(result) @@ -41,5 +41,3 @@ function Results ({ queue = [] }: Props): React.ReactElement | null { ); } - -export default Results; diff --git a/packages/app-treasury/src/Overview/Proposals.tsx b/packages/app-treasury/src/Overview/Proposals.tsx index 37d23c8b3f..68462df216 100644 --- a/packages/app-treasury/src/Overview/Proposals.tsx +++ b/packages/app-treasury/src/Overview/Proposals.tsx @@ -115,4 +115,5 @@ const Proposals = withMulti( ); export default Proposals; + export const Approvals = (): JSX.Element => ; diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx index 4d30e3aa94..e988caee82 100644 --- a/packages/react-components/src/Call.tsx +++ b/packages/react-components/src/Call.tsx @@ -24,15 +24,6 @@ export interface Props extends I18nProps, BareProps { tip?: BN; } -const Wrapper = styled.div` - .hash .ui--Static { - overflow: hidden; - text-overflow: ellipsis; - word-break: unset; - word-wrap: unset; - } -`; - function Call ({ children, className, style, mortality, tip, value, withHash, t }: Props): React.ReactElement { const params = GenericCall.filterOrigin(value.meta).map(({ name, type }): { name: string; type: TypeDef } => ({ name: name.toString(), @@ -47,54 +38,51 @@ function Call ({ children, className, style, mortality, tip, value, withHash, t : null; return ( - {children} - { - hash - ? ( - - {hash.toHex()} - - ) - : null - } - { - mortality - ? ( - - {mortality} - - ) - : null - } - { - (tip && tip.gtn(0)) - ? ( - - {formatBalance(tip)} - - ) - : null - } + {hash && ( + + {hash.toHex()} + + )} + {mortality && ( + + {mortality} + + )} + {tip && tip.gtn(0) && ( + + {formatBalance(tip)} + + )} - +
); } -export default translate(Call); +export default translate( + styled(Call)` + .hash .ui--Static { + overflow: hidden; + text-overflow: ellipsis; + word-break: unset; + word-wrap: unset; + } + ` +); diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx index 86d020a494..f1f548dd31 100644 --- a/packages/react-components/src/CopyButton.tsx +++ b/packages/react-components/src/CopyButton.tsx @@ -2,48 +2,39 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { QueueAction$Add } from './Status/types'; import { BareProps, I18nProps } from './types'; -import React from 'react'; +import React, { useContext } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { QueueConsumer } from './Status/Context'; +import QueueContext from './Status/Context'; import Button from './Button'; import translate from './translate'; import styled from 'styled-components'; -interface Props extends BareProps { +interface Props extends BareProps, I18nProps { children?: React.ReactNode; icon?: string; isAddress?: boolean; value?: any; } -type InnerProps = Props & I18nProps & { - queueAction: QueueAction$Add; -}; +function CopyButton ({ children, className, icon = 'copy', isAddress = false, t, value }: Props): React.ReactElement { + const { queueAction } = useContext(QueueContext); -function onCopy ({ isAddress = false, queueAction, t, value }: InnerProps): () => void { - return (): void => { - if (isAddress && queueAction) { - queueAction({ - account: value, - action: t('clipboard'), - status: 'queued', - message: t('address copied') - }); - } + const _onCopy = (): void => { + isAddress && queueAction && queueAction({ + account: value, + action: t('clipboard'), + status: 'queued', + message: t('address copied') + }); }; -} - -function CopyButtonInner (props: InnerProps): React.ReactElement { - const { children, className, icon = 'copy', value } = props; return (
@@ -62,34 +53,16 @@ function CopyButtonInner (props: InnerProps): React.ReactElement { ); } -const CopyButtonI18n = translate(CopyButtonInner); - -function CopyButton (props: Props): React.ReactElement { - return ( - - {({ queueAction }): React.ReactNode => ( - - )} - - ); -} - -export default styled(CopyButton)` - width: 100%; - cursor: copy; - - button.ui.mini.icon.primary.button.iconButton { +export default translate( + styled(CopyButton)` cursor: copy; - } - .copySpan { - white-space: nowrap; - } - .copyContainer { - display: flex; - text-overflow: ellipsis; - } -`; + button.ui.mini.icon.primary.button.iconButton { + cursor: copy; + } + + .copySpan { + white-space: nowrap; + } + ` +); diff --git a/packages/react-components/src/CryptoType.tsx b/packages/react-components/src/CryptoType.tsx index e47e98708a..f03f81226a 100644 --- a/packages/react-components/src/CryptoType.tsx +++ b/packages/react-components/src/CryptoType.tsx @@ -5,7 +5,7 @@ import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces'; import { BareProps } from './types'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import keyring from '@polkadot/ui-keyring'; import { classes } from './util'; @@ -16,23 +16,27 @@ interface Props extends BareProps { } export default function CryptoType ({ accountId, className, label = '' }: Props): React.ReactElement { - let type = 'unknown'; + const [type, setType] = useState('unknown'); - try { - const current = accountId - ? keyring.getPair(accountId.toString()) - : null; + useEffect((): void => { + try { + const current = accountId + ? keyring.getPair(accountId.toString()) + : null; - if (current) { - type = current.meta.isInjected - ? 'injected' - : current.meta.isExternal - ? 'external' - : current.type; + if (current) { + setType( + current.meta.isInjected + ? 'injected' + : current.meta.isExternal + ? 'external' + : current.type + ); + } + } catch (error) { + // cannot determine, keep unknown } - } catch (error) { - // cannot determine, keep unknown - } + }, [accountId]); return (
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx index 378d211b54..d79f2d9bf1 100644 --- a/packages/react-components/src/Forget.tsx +++ b/packages/react-components/src/Forget.tsx @@ -65,28 +65,9 @@ function getHeaderText ({ mode = 'account', t }: Props): string { } } -function renderButtons ({ onClose, onForget, t }: Props): React.ReactNode { - return ( - - -