From 2752bedc6e1a36f4de85a1f38af6089852cd0f3a Mon Sep 17 00:00:00 2001 From: kwingram25 Date: Thu, 29 Aug 2019 17:45:02 +0200 Subject: [PATCH] Functional components (app-*) (#1559) * Functional components (app-*) * refactor * refactor * refactor * refactor * refactor * Revert "refactor" This reverts commit 300a12ed7de5b1000f32f5269dff67f5ee1c1515. * onRemove --- packages/app-123code/src/Summary.tsx | 22 ++-- packages/app-accounts/src/Account.tsx | 2 +- packages/app-accounts/src/Banner.tsx | 68 +++++----- packages/app-accounts/src/Vanity/Match.tsx | 2 +- packages/app-accounts/src/modals/Transfer.tsx | 2 +- packages/app-contracts/src/Codes/Code.tsx | 2 +- .../app-contracts/src/Codes/ValidateCode.tsx | 2 +- packages/app-contracts/src/Codes/index.tsx | 2 +- .../app-contracts/src/Contracts/Contract.tsx | 17 +-- .../src/Contracts/ValidateAddr.tsx | 2 +- packages/app-contracts/src/RemoveABI.tsx | 86 ++++--------- packages/app-council/src/Motions/index.tsx | 44 +++---- .../app-council/src/Overview/Candidate.tsx | 25 ++-- packages/app-council/src/Overview/Member.tsx | 20 ++- packages/app-council/src/Overview/Members.tsx | 61 +++++---- packages/app-council/src/Overview/Summary.tsx | 51 ++++---- packages/app-council/src/Overview/index.tsx | 28 ++--- packages/app-dashboard/src/Entry.tsx | 32 +++-- .../app-democracy/src/Overview/Proposal.tsx | 96 +++++++-------- .../app-democracy/src/Overview/Proposals.tsx | 50 +++----- .../src/Overview/Referendums.tsx | 48 +++----- .../app-democracy/src/Overview/Summary.tsx | 68 +++++----- packages/app-democracy/src/Overview/index.tsx | 26 ++-- packages/app-explorer/src/BestHash.tsx | 30 ++--- .../app-explorer/src/BlockHeader/index.tsx | 116 +++++++++--------- packages/app-explorer/src/BlockHeaders.tsx | 28 +++-- .../app-explorer/src/BlockInfo/ByHash.tsx | 48 ++++---- .../app-explorer/src/BlockInfo/ByNumber.tsx | 18 ++- .../app-explorer/src/BlockInfo/Events.tsx | 36 +++--- packages/app-explorer/src/Events.tsx | 99 ++++++++------- packages/app-explorer/src/Main.tsx | 34 +++-- packages/app-explorer/src/NodeInfo/Peers.tsx | 96 +++++++-------- packages/app-explorer/src/Summary.tsx | 70 +++++------ packages/app-explorer/src/SummarySession.tsx | 110 ++++++++--------- packages/app-extrinsics/src/Balance.tsx | 24 ++-- packages/app-extrinsics/src/index.tsx | 36 +++--- packages/app-js/src/Output.tsx | 28 ++--- packages/app-js/src/index.tsx | 18 ++- .../app-parachains/src/Overview/Parachain.tsx | 52 ++++---- .../src/Overview/Parachains.tsx | 34 +++-- .../app-parachains/src/Overview/Summary.tsx | 32 +++-- packages/app-staking/src/Overview/Summary.tsx | 66 +++++----- packages/app-staking/src/Overview/index.tsx | 81 ++++++------ packages/app-storage/src/Queries.tsx | 34 +++-- packages/app-toolbox/src/Rpc/Results.tsx | 56 ++++----- packages/app-toolbox/src/Rpc/index.tsx | 27 ++-- packages/app-transfer/src/index.tsx | 14 +-- .../app-treasury/src/Overview/Proposals.tsx | 2 +- .../app-treasury/src/Overview/Summary.tsx | 54 ++++---- 49 files changed, 905 insertions(+), 1094 deletions(-) diff --git a/packages/app-123code/src/Summary.tsx b/packages/app-123code/src/Summary.tsx index aa225d3eb7..3bd84f13db 100644 --- a/packages/app-123code/src/Summary.tsx +++ b/packages/app-123code/src/Summary.tsx @@ -11,19 +11,15 @@ interface Props extends BareProps { children: React.ReactNode; } -class Summary extends React.PureComponent { - public render (): React.ReactNode { - const { children, className, style } = this.props; - - return ( -
- {children} -
- ); - } +function Summary ({ children, className, style }: Props): React.ReactElement { + return ( +
+ {children} +
+ ); } export default styled(Summary)` diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index 5892f41b9b..d7cadb785a 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -27,7 +27,7 @@ interface State { isTransferOpen: boolean; } -class Account extends React.PureComponent { +class Account extends React.PureComponent { public state: State; public constructor (props: Props) { diff --git a/packages/app-accounts/src/Banner.tsx b/packages/app-accounts/src/Banner.tsx index f3da70249e..b74536adb1 100644 --- a/packages/app-accounts/src/Banner.tsx +++ b/packages/app-accounts/src/Banner.tsx @@ -49,45 +49,41 @@ const browserInfo = detect(); const browserName: Browser | null = (browserInfo && (browserInfo.name as Browser)) || null; const isSupported = browserName && Object.keys(available).includes(browserName); -class Banner extends React.PureComponent { - public render (): React.ReactNode { - const { className, t } = this.props; +function Banner ({ className, t }: Props): React.ReactElement | null { + if (isWeb3Injected || !isSupported || !browserName) { + return null; + } - if (isWeb3Injected || !isSupported || !browserName) { - return null; - } - - return ( -
-
-
-

{t('It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -', { - replace: { - yourBrowser: stringUpperFirst(browserName) - } - })}

-
    {available[browserName].map(({ desc, name, link }): React.ReactNode => ( -
  • - - {name} - ({desc}) -
    • - )) - }
-

{t('Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.')} {t('Learn more...')}

-
+ return ( +
+
+
+

{t('It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -', { + replace: { + yourBrowser: stringUpperFirst(browserName) + } + })}

+
    {available[browserName].map(({ desc, name, link }): React.ReactNode => ( +
  • + + {name} + ({desc}) +
    • + )) + }
+

{t('Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.')} {t('Learn more...')}

- ); - } +
+ ); } export default translate(styled(Banner)` diff --git a/packages/app-accounts/src/Vanity/Match.tsx b/packages/app-accounts/src/Vanity/Match.tsx index c9f70817ff..9613010d87 100644 --- a/packages/app-accounts/src/Vanity/Match.tsx +++ b/packages/app-accounts/src/Vanity/Match.tsx @@ -84,7 +84,7 @@ class Match extends React.PureComponent { } } -export default styled(Match as React.ComponentClass)` +export default styled(Match as React.ComponentClass)` text-align: center; &:hover { diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx index 247e6837af..66377cf5b4 100644 --- a/packages/app-accounts/src/modals/Transfer.tsx +++ b/packages/app-accounts/src/modals/Transfer.tsx @@ -40,7 +40,7 @@ interface State { const ZERO = new BN(0); -class Transfer extends React.PureComponent { +class Transfer extends React.PureComponent { public state: State; public constructor (props: Props) { diff --git a/packages/app-contracts/src/Codes/Code.tsx b/packages/app-contracts/src/Codes/Code.tsx index 2a1d70f129..e97976021c 100644 --- a/packages/app-contracts/src/Codes/Code.tsx +++ b/packages/app-contracts/src/Codes/Code.tsx @@ -35,7 +35,7 @@ const CodeCard = styled(Card)` } `; -class Contract extends React.PureComponent { +class Contract extends React.PureComponent { public state: State = { isForgetOpen: false, isRemoveABIOpen: false diff --git a/packages/app-contracts/src/Codes/ValidateCode.tsx b/packages/app-contracts/src/Codes/ValidateCode.tsx index 7aa80c221d..aef6edc572 100644 --- a/packages/app-contracts/src/Codes/ValidateCode.tsx +++ b/packages/app-contracts/src/Codes/ValidateCode.tsx @@ -27,7 +27,7 @@ interface State { isValid: boolean; } -class ValidateCode extends React.PureComponent { +class ValidateCode extends React.PureComponent { public state: State = { isStored: false, isValidHex: false, diff --git a/packages/app-contracts/src/Codes/index.tsx b/packages/app-contracts/src/Codes/index.tsx index 74801c2781..d4518bde6a 100644 --- a/packages/app-contracts/src/Codes/index.tsx +++ b/packages/app-contracts/src/Codes/index.tsx @@ -22,7 +22,7 @@ interface State { isUploadOpen: boolean; } -class Codes extends React.PureComponent { +class Codes extends React.PureComponent { public state: State = { isAddOpen: false, isUploadOpen: false diff --git a/packages/app-contracts/src/Contracts/Contract.tsx b/packages/app-contracts/src/Contracts/Contract.tsx index d699dc1f59..44e9bddb25 100644 --- a/packages/app-contracts/src/Contracts/Contract.tsx +++ b/packages/app-contracts/src/Contracts/Contract.tsx @@ -27,17 +27,12 @@ interface State { isPasswordOpen: boolean; } -class Contract extends React.PureComponent { - public state: State; - - public constructor (props: Props) { - super(props); - this.state = { - isBackupOpen: false, - isForgetOpen: false, - isPasswordOpen: false - }; - } +class Contract extends React.PureComponent { + public state: State = { + isBackupOpen: false, + isForgetOpen: false, + isPasswordOpen: false + }; public render (): React.ReactNode { const { address, onCall } = this.props; diff --git a/packages/app-contracts/src/Contracts/ValidateAddr.tsx b/packages/app-contracts/src/Contracts/ValidateAddr.tsx index 9207872637..55e1a8d36d 100644 --- a/packages/app-contracts/src/Contracts/ValidateAddr.tsx +++ b/packages/app-contracts/src/Contracts/ValidateAddr.tsx @@ -27,7 +27,7 @@ interface State { isValid: boolean; } -class ValidateAddr extends React.PureComponent { +class ValidateAddr extends React.PureComponent { public state: State = { isStored: false, isValidAddr: false, diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx index 0c873fb718..e737dfe0d0 100644 --- a/packages/app-contracts/src/RemoveABI.tsx +++ b/packages/app-contracts/src/RemoveABI.tsx @@ -16,42 +16,30 @@ interface Props extends I18nProps { onRemove: () => void; } -class RemoveABI extends React.PureComponent { - public render (): React.ReactNode { - const { onClose, t } = this.props; - return ( - - - {t('Confirm ABI removal')} - - - {this.renderContent()} - - {this.renderButtons()} - - ); - } - - private content = (): React.ReactNode => { - const { t } = this.props; - - return ( - <> -

{t('You are about to remove this code\'s ABI. Once completed, should you need to access it again, you will have to manually re-upload it.')}

-

{t('This operaion does not impact the associated on-chain code or any of its contracts.')}

- - ); - } - - private renderButtons (): React.ReactNode { - const { onClose, t } = this.props; - - return ( +function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement { + const _onRemove = (): void => { + onClose && onClose(); + onRemove(); + }; + return ( + + + {t('Confirm ABI removal')} + + + +

{t('You are about to remove this code\'s ABI. Once completed, should you need to access it again, you will have to manually re-upload it.')}

+

{t('This operaion does not impact the associated on-chain code or any of its contracts.')}

+ +
} - defaultName='council member' - value={address} - /> - ); - } +function Member ({ address, block, t }: Props): React.ReactElement { + return ( + #{formatNumber(block)}
} + defaultName={t('council member')} + value={address} + /> + ); } export default translate(Member); diff --git a/packages/app-council/src/Overview/Members.tsx b/packages/app-council/src/Overview/Members.tsx index c06e8175e8..4869f3e7ab 100644 --- a/packages/app-council/src/Overview/Members.tsx +++ b/packages/app-council/src/Overview/Members.tsx @@ -15,39 +15,34 @@ import Member from './Member'; interface Props extends I18nProps, ComponentProps {} -class Members extends React.PureComponent { - public render (): React.ReactNode { - const { electionsInfo, t } = this.props; - const { members, candidates } = electionsInfo; - - return ( - - - {Object.entries(members).map(([address, block]): React.ReactNode => ( - - ))} - - - {candidates.map((address): React.ReactNode => ( - - ))} - - - ); - } +function Members ({ electionsInfo: { candidates, members }, t }: Props): React.ReactElement { + return ( + + + {Object.entries(members).map(([address, block]): React.ReactNode => ( + + ))} + + + {candidates.map((address): React.ReactNode => ( + + ))} + + + ); } export default translate(Members); diff --git a/packages/app-council/src/Overview/Summary.tsx b/packages/app-council/src/Overview/Summary.tsx index 71e8198518..cca11629bc 100644 --- a/packages/app-council/src/Overview/Summary.tsx +++ b/packages/app-council/src/Overview/Summary.tsx @@ -14,35 +14,30 @@ import translate from '../translate'; interface Props extends I18nProps, ComponentProps {} -class Summary extends React.PureComponent { - public render (): React.ReactNode { - const { electionsInfo, t } = this.props; - const { members, candidateCount, desiredSeats, termDuration, voteCount } = electionsInfo; +function Summary ({ electionsInfo: { members, candidateCount, desiredSeats, termDuration, voteCount }, t }: Props): React.ReactElement { + return ( + +
+ + {formatNumber(Object.keys(members).length)}/{formatNumber(desiredSeats)} + + + {formatNumber(candidateCount)} + +
+
+ + #{formatNumber(voteCount)} + +
- return ( - -
- - {formatNumber(Object.keys(members).length)}/{formatNumber(desiredSeats)} - - - {formatNumber(candidateCount)} - -
-
- - #{formatNumber(voteCount)} - -
- -
- - {formatNumber(termDuration)} - -
- - ); - } +
+ + {formatNumber(termDuration)} + +
+ + ); } export default translate(Summary); diff --git a/packages/app-council/src/Overview/index.tsx b/packages/app-council/src/Overview/index.tsx index b9e259ade6..f66e04dd7f 100644 --- a/packages/app-council/src/Overview/index.tsx +++ b/packages/app-council/src/Overview/index.tsx @@ -27,22 +27,18 @@ const NULL_INFO: DerivedElectionsInfo = { voterCount: new BN(0) as SetIndex }; -class Overview extends React.PureComponent { - public render (): React.ReactNode { - const { electionsInfo = NULL_INFO } = this.props; - - return ( - <> - - - - - - - - - ); - } +function Overview ({ electionsInfo = NULL_INFO }: Props): React.ReactElement { + return ( + <> + + + + + + + + + ); } export default withCalls( diff --git a/packages/app-dashboard/src/Entry.tsx b/packages/app-dashboard/src/Entry.tsx index b6381fd9b5..a2edb126b3 100644 --- a/packages/app-dashboard/src/Entry.tsx +++ b/packages/app-dashboard/src/Entry.tsx @@ -16,24 +16,20 @@ interface Props extends I18nProps { route: Route; } -class Entry extends React.PureComponent { - public render (): React.ReactNode { - const { className, route: { i18n, icon, name }, t } = this.props; - - return ( -
- - -
- {t(`entry.${name}`, i18n)} -
- -
- ); - } +function Entry ({ className, route: { i18n, icon, name }, t }: Props): React.ReactElement { + return ( +
+ + +
+ {t(`entry.${name}`, i18n)} +
+ +
+ ); } export default translate(styled(Entry)` diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx index cb11ea3382..22196daf8a 100644 --- a/packages/app-democracy/src/Overview/Proposal.tsx +++ b/packages/app-democracy/src/Overview/Proposal.tsx @@ -3,7 +3,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { AccountId, Balance, Proposal } from '@polkadot/types/interfaces'; +import { AccountId, Balance, Proposal as ProposalType } from '@polkadot/types/interfaces'; import { I18nProps } from '@polkadot/react-components/types'; import BN from 'bn.js'; @@ -19,64 +19,60 @@ import Seconding from './Seconding'; interface Props extends I18nProps { democracy_depositOf?: [Balance, Vec] | null; idNumber: BN; - value: Proposal; + value: ProposalType; } -class ProposalDisplay extends React.PureComponent { - public render (): React.ReactNode { - const { className, democracy_depositOf, idNumber, value } = this.props; - const depositors = democracy_depositOf - ? democracy_depositOf[1] - : []; +function renderProposal ({ democracy_depositOf, t }: Props): React.ReactNode { + if (!democracy_depositOf) { + return null; + } - return ( - + + {addresses.map((address, index): React.ReactNode => ( + - } - > - {this.renderInfo()} - - ); - } + ))} + + + {formatBalance(balance)} + + + ); +} - private renderInfo (): React.ReactNode { - const { democracy_depositOf, t } = this.props; +function Proposal (props: Props): React.ReactElement { + const { className, democracy_depositOf, idNumber, value } = props; + const depositors = democracy_depositOf + ? democracy_depositOf[1] + : []; - if (!democracy_depositOf) { - return null; - } - - const [balance, addresses] = democracy_depositOf; - - return ( -
- - {addresses.map((address, index): React.ReactNode => ( - - ))} - - - {formatBalance(balance)} - -
- ); - } + return ( + + } + > + {renderProposal(props)} + + ); } export default withMulti( - ProposalDisplay, + Proposal, translate, withCalls( ['query.democracy.depositOf', { diff --git a/packages/app-democracy/src/Overview/Proposals.tsx b/packages/app-democracy/src/Overview/Proposals.tsx index 51d2056116..204beb78e6 100644 --- a/packages/app-democracy/src/Overview/Proposals.tsx +++ b/packages/app-democracy/src/Overview/Proposals.tsx @@ -18,39 +18,23 @@ interface Props extends I18nProps { democracy_publicProps?: [BN, Proposal][]; } -interface State { - isProposeOpen: boolean; -} - -class Proposals extends React.PureComponent { - public state: State = { - isProposeOpen: false - }; - - public render (): React.ReactNode { - const { t } = this.props; - - return ( - - {this.renderProposals()} - - ); - } - - private renderProposals (): React.ReactNode { - const { democracy_publicProps = [] } = this.props; - - return democracy_publicProps.map(([idNumber, proposal]): React.ReactNode => ( - - )); - } +function Proposals ({ democracy_publicProps = [], t }: Props): React.ReactElement { + return ( + + { + democracy_publicProps.map(([idNumber, proposal]): React.ReactNode => ( + + )) + } + + ); } export default withMulti( diff --git a/packages/app-democracy/src/Overview/Referendums.tsx b/packages/app-democracy/src/Overview/Referendums.tsx index 0acc7fd7aa..76eee00335 100644 --- a/packages/app-democracy/src/Overview/Referendums.tsx +++ b/packages/app-democracy/src/Overview/Referendums.tsx @@ -18,34 +18,26 @@ interface Props extends I18nProps { democracy_referendums?: Option[]; } -class Referendums extends React.PureComponent { - public render (): React.ReactNode { - const { t } = this.props; - - return ( - - {this.renderReferendums()} - - ); - } - - private renderReferendums (): React.ReactNode { - const { democracy_referendums = [] } = this.props; - const referendums = democracy_referendums - .filter((opt): boolean => opt.isSome) - .map((opt): ReferendumInfoExtended => opt.unwrap()); - - return referendums.map((referendum): React.ReactNode => ( - - )); - } +function Referendums ({ democracy_referendums = [], t }: Props): React.ReactElement { + return ( + + { + democracy_referendums + .filter((opt): boolean => opt.isSome) + .map((opt): ReferendumInfoExtended => opt.unwrap()) + .map((referendum): React.ReactNode => ( + + )) + } + + ); } export default translate( diff --git a/packages/app-democracy/src/Overview/Summary.tsx b/packages/app-democracy/src/Overview/Summary.tsx index 7a4043adca..8dc7a3a2b1 100644 --- a/packages/app-democracy/src/Overview/Summary.tsx +++ b/packages/app-democracy/src/Overview/Summary.tsx @@ -21,42 +21,40 @@ interface Props extends I18nProps { democracy_referendumCount?: BN; } -class Summary extends React.PureComponent { - public render (): React.ReactNode { - const { - chain_bestNumber = new BN(0), - democracy_launchPeriod = new BN(1), - democracy_nextTally = new BN(0), - democracy_publicPropCount, - democracy_referendumCount = new BN(0), - t - } = this.props; +function Summary (props: Props): React.ReactElement { + const { + chain_bestNumber = new BN(0), + democracy_launchPeriod = new BN(1), + democracy_nextTally = new BN(0), + democracy_publicPropCount, + democracy_referendumCount = new BN(0), + t + } = props; - return ( - -
- - {formatNumber(democracy_publicPropCount)} - - - {formatNumber(democracy_referendumCount)} - - - {formatNumber(democracy_referendumCount.sub(democracy_nextTally))} - -
-
- -
- - ); - } + return ( + +
+ + {formatNumber(democracy_publicPropCount)} + + + {formatNumber(democracy_referendumCount)} + + + {formatNumber(democracy_referendumCount.sub(democracy_nextTally))} + +
+
+ +
+ + ); } export default translate( diff --git a/packages/app-democracy/src/Overview/index.tsx b/packages/app-democracy/src/Overview/index.tsx index 59a5cbfdc8..a3db417920 100644 --- a/packages/app-democracy/src/Overview/index.tsx +++ b/packages/app-democracy/src/Overview/index.tsx @@ -2,8 +2,6 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types'; - import React from 'react'; import { Columar } from '@polkadot/react-components'; @@ -11,18 +9,14 @@ import Proposals from './Proposals'; import Referendums from './Referendums'; import Summary from './Summary'; -type Props = AppProps & BareProps & I18nProps; - -export default class Overview extends React.PureComponent { - public render (): React.ReactNode { - return ( - <> - - - - - - - ); - } +export default function Overview (): React.ReactElement { + return ( + <> + + + + + + + ); } diff --git a/packages/app-explorer/src/BestHash.tsx b/packages/app-explorer/src/BestHash.tsx index b4efa6d612..90fc3fbe47 100644 --- a/packages/app-explorer/src/BestHash.tsx +++ b/packages/app-explorer/src/BestHash.tsx @@ -14,23 +14,19 @@ interface Props extends BareProps, CallProps { chain_subscribeNewHeads?: Header; } -class BestHash extends React.PureComponent { - public render (): React.ReactNode { - const { className, label = '', style, chain_subscribeNewHeads } = this.props; - - return ( -
- {label}{ - chain_subscribeNewHeads - ? chain_subscribeNewHeads.hash.toHex() - : undefined - } -
- ); - } +function BestHash ({ className, label = '', style, chain_subscribeNewHeads }: Props): React.ReactElement { + return ( +
+ {label}{ + chain_subscribeNewHeads + ? chain_subscribeNewHeads.hash.toHex() + : undefined + } +
+ ); } export default withCalls('rpc.chain.subscribeNewHeads')(BestHash); diff --git a/packages/app-explorer/src/BlockHeader/index.tsx b/packages/app-explorer/src/BlockHeader/index.tsx index 780e62b9fc..4f1da9fe29 100644 --- a/packages/app-explorer/src/BlockHeader/index.tsx +++ b/packages/app-explorer/src/BlockHeader/index.tsx @@ -19,70 +19,68 @@ interface Props extends BareProps { withLink?: boolean; } -export default class BlockHeader extends React.PureComponent { - public render (): React.ReactNode { - const { isSummary, value, withExplorer, withLink } = this.props; +const renderDetails = ({ number: blockNumber, extrinsicsRoot, parentHash, stateRoot }: HeaderExtended): React.ReactNode => { + const parentHex = parentHash.toHex(); - if (!value) { - return null; - } + return ( +
+
+ + { + blockNumber.unwrap().gtn(1) + ? {parentHex} + : parentHex + } +
+
+ + {extrinsicsRoot.toHex()} +
+
+ + {stateRoot.toHex()} +
+
+ ); +}; - const hashHex = value.hash.toHex(); - const textNumber = formatNumber(value.number); - - return ( -
-
-
-
{ - withLink - ? {textNumber} - : textNumber - } 
-
{hashHex}
-
{ - value.author - ? - : undefined - }
-
-
- { - isSummary - ? undefined - : this.renderDetails(value) - } - { - withExplorer - ? - : undefined - } -
- ); +function BlockHeader ({ isSummary, value, withExplorer, withLink }: Props): React.ReactElement | null { + if (!value) { + return null; } - private renderDetails ({ number: blockNumber, extrinsicsRoot, parentHash, stateRoot }: HeaderExtended): React.ReactNode { - const parentHex = parentHash.toHex(); + const hashHex = value.hash.toHex(); + const textNumber = formatNumber(value.number); - return ( -
-
- - { - blockNumber.unwrap().gtn(1) - ? {parentHex} - : parentHex - } -
-
- - {extrinsicsRoot.toHex()} -
-
- - {stateRoot.toHex()} + return ( +
+
+
+
{ + withLink + ? {textNumber} + : textNumber + } 
+
{hashHex}
+
{ + value.author + ? + : undefined + }
- ); - } + { + isSummary + ? undefined + : renderDetails(value) + } + { + withExplorer + ? + : undefined + } +
+ ); } + +export default BlockHeader; diff --git a/packages/app-explorer/src/BlockHeaders.tsx b/packages/app-explorer/src/BlockHeaders.tsx index 0bcfe86b6c..90021cfa29 100644 --- a/packages/app-explorer/src/BlockHeaders.tsx +++ b/packages/app-explorer/src/BlockHeaders.tsx @@ -39,19 +39,21 @@ interface Props extends CallProps { headers?: HeaderExtended[]; } -class BlockHeaders extends React.PureComponent { - public render (): React.ReactNode { - const { headers = [] } = this.props; - - return headers.map((header, index): React.ReactNode => ( - - )); - } +function BlockHeaders ({ headers = [] }: Props): React.ReactElement { + return ( + <> + { + headers.map((header, index): React.ReactNode => ( + + )) + } + + ); } export default withCalls(['derive.chain.subscribeNewHeads', { diff --git a/packages/app-explorer/src/BlockInfo/ByHash.tsx b/packages/app-explorer/src/BlockInfo/ByHash.tsx index c2ab87e5c5..8b92ceca9c 100644 --- a/packages/app-explorer/src/BlockInfo/ByHash.tsx +++ b/packages/app-explorer/src/BlockInfo/ByHash.tsx @@ -25,33 +25,29 @@ type Props = ApiProps & I18nProps & { value: string; }; -class BlockByHash extends React.PureComponent { - public render (): React.ReactNode { - const { system_events, chain_getBlock, chain_getHeader } = this.props; - - if (!chain_getBlock || chain_getBlock.isEmpty || !chain_getHeader || chain_getHeader.isEmpty) { - return null; - } - - return ( - <> -
- -
- - - - - - - ); +function BlockByHash ({ system_events, chain_getBlock, chain_getHeader }: Props): React.ReactElement | null { + if (!chain_getBlock || chain_getBlock.isEmpty || !chain_getHeader || chain_getHeader.isEmpty) { + return null; } + + return ( + <> +
+ +
+ + + + + + + ); } export default translate( diff --git a/packages/app-explorer/src/BlockInfo/ByNumber.tsx b/packages/app-explorer/src/BlockInfo/ByNumber.tsx index 9a62032765..df6d6b5056 100644 --- a/packages/app-explorer/src/BlockInfo/ByNumber.tsx +++ b/packages/app-explorer/src/BlockInfo/ByNumber.tsx @@ -16,18 +16,14 @@ interface Props extends ApiProps { value: string; } -class BlockByNumber extends React.PureComponent { - public render (): React.ReactNode { - const { chain_getBlockHash } = this.props; - - if (!chain_getBlockHash) { - return null; - } - - return ( - - ); +function BlockByNumber ({ chain_getBlockHash }: Props): React.ReactElement | null { + if (!chain_getBlockHash) { + return null; } + + return ( + + ); } export default withCalls( diff --git a/packages/app-explorer/src/BlockInfo/Events.tsx b/packages/app-explorer/src/BlockInfo/Events.tsx index b374ff4f52..1b2e6125ab 100644 --- a/packages/app-explorer/src/BlockInfo/Events.tsx +++ b/packages/app-explorer/src/BlockInfo/Events.tsx @@ -15,27 +15,23 @@ interface Props extends I18nProps { value?: EventRecord[]; } -class Events extends React.PureComponent { - public render (): React.ReactNode { - const { t, value } = this.props; - - if (!value || !value.length) { - return null; - } - - const events = value.map((record, index): { key: string; record: EventRecord } => ({ - key: `${index}`, record - })); - - return ( - - - - ); +function Events ({ value, t }: Props): React.ReactElement | null { + if (!value || !value.length) { + return null; } + + return ( + + ({ + key: `${index}`, record + })) + } + /> + + ); } export default translate(Events); diff --git a/packages/app-explorer/src/Events.tsx b/packages/app-explorer/src/Events.tsx index 3151606ced..5b8e9fca57 100644 --- a/packages/app-explorer/src/Events.tsx +++ b/packages/app-explorer/src/Events.tsx @@ -18,57 +18,62 @@ interface Props extends I18nProps { withoutIndex?: boolean; } -class Events extends React.PureComponent { - public render (): React.ReactNode { - const { emptyLabel, events, t } = this.props; - - if (!events || events.length === 0) { - return
{emptyLabel || t('no events available')}
; - } - - return events.map(this.renderEvent); - } - - private renderEvent = ({ key, record: { event, phase } }: KeyedEvent): React.ReactNode => { - const { eventClassName, withoutIndex } = this.props; - const extIndex = !withoutIndex && phase.isApplyExtrinsic - ? phase.asApplyExtrinsic - : -1; - - if (!event.method || !event.section) { - return null; - } - +function Events ({ emptyLabel, eventClassName, events, withoutIndex, t }: Props): React.ReactElement { + if (!events || events.length === 0) { return ( -
-
-

- {event.section}.{event.method} { - extIndex !== -1 - ? `(#${formatNumber(extIndex)})` - : '' - } -

-
-
- - { - event.meta && event.meta.documentation - ? event.meta.documentation.join(' ') - : 'Details' - } - - -
+
+ {emptyLabel || t('no events available')}
); } + + return ( + <> + { + events.map( + ({ key, record: { event, phase } }: KeyedEvent): React.ReactNode => { + const extIndex = !withoutIndex && phase.isApplyExtrinsic + ? phase.asApplyExtrinsic + : -1; + + if (!event.method || !event.section) { + return null; + } + + return ( +
+
+

+ {event.section}.{event.method} { + extIndex !== -1 + ? `(#${formatNumber(extIndex)})` + : '' + } +

+
+
+ + { + event.meta && event.meta.documentation + ? event.meta.documentation.join(' ') + : 'Details' + } + + +
+
+ ); + } + ) + } + + ); } export default translate(Events); diff --git a/packages/app-explorer/src/Main.tsx b/packages/app-explorer/src/Main.tsx index 1f6aa42f6a..ed1379f830 100644 --- a/packages/app-explorer/src/Main.tsx +++ b/packages/app-explorer/src/Main.tsx @@ -18,25 +18,21 @@ interface Props extends I18nProps { events: KeyedEvent[]; } -class Main extends React.PureComponent { - public render (): React.ReactNode { - const { events, t } = this.props; - - return ( - <> - - - - - - - - - - - - ); - } +function Main ({ events, t }: Props): React.ReactElement { + return ( + <> + + + + + + + + + + + + ); } export default translate(Main); diff --git a/packages/app-explorer/src/NodeInfo/Peers.tsx b/packages/app-explorer/src/NodeInfo/Peers.tsx index 6a9671f266..21a7bba92c 100644 --- a/packages/app-explorer/src/NodeInfo/Peers.tsx +++ b/packages/app-explorer/src/NodeInfo/Peers.tsx @@ -14,63 +14,57 @@ interface Props extends I18nProps { peers?: PeerInfo[] | null; } -class Peers extends React.PureComponent { - public render (): React.ReactNode { - const { t } = this.props; +const renderPeer = (peer: PeerInfo): React.ReactNode => { + const peerId = peer.peerId.toString(); + return ( + + {peer.roles.toString().toLowerCase()} + {peerId} + {formatNumber(peer.bestNumber)} + {peer.bestHash.toHex()} + + ); +}; + +const renderPeers = ({ peers, t }: Props): React.ReactNode => { + if (!peers || !peers.length) { return ( -
-

{t('connected peers')}

- {this.renderPeers()} -
+
+ {t('no peers connected')} +
); } - private renderPeers (): React.ReactNode { - const { peers, t } = this.props; + return ( +
+ + + + + + + + + + + {peers + .sort((a, b): number => b.bestNumber.cmp(a.bestNumber)) + .map(renderPeer) + } + +
{t('role')}{t('peer id')}{t('best #')}{t('best hash')}
+
+ ); +}; - if (!peers || !peers.length) { - return ( -
- {t('no peers connected')} -
- ); - } - - return ( -
- - - - - - - - - - - {peers - .sort((a, b): number => b.bestNumber.cmp(a.bestNumber)) - .map(this.renderPeer) - } - -
{t('role')}{t('peer id')}{t('best #')}{t('best hash')}
-
- ); - } - - private renderPeer = (peer: PeerInfo): React.ReactNode => { - const peerId = peer.peerId.toString(); - - return ( - - {peer.roles.toString().toLowerCase()} - {peerId} - {formatNumber(peer.bestNumber)} - {peer.bestHash.toHex()} - - ); - } +function Peers (props: Props): React.ReactElement { + return ( +
+

{props.t('connected peers')}

+ {renderPeers(props)} +
+ ); } export default translate(Peers); diff --git a/packages/app-explorer/src/Summary.tsx b/packages/app-explorer/src/Summary.tsx index 0448f76550..c64f3ecdef 100644 --- a/packages/app-explorer/src/Summary.tsx +++ b/packages/app-explorer/src/Summary.tsx @@ -13,43 +13,39 @@ import translate from './translate'; type Props = I18nProps; -class Summary extends React.PureComponent { - public render (): React.ReactNode { - const { t } = this.props; - - return ( - -
- - - - - - - - - -
-
- -
-
- - - - - - -
- - ); - } +function Summary ({ t }: Props): React.ReactElement { + return ( + +
+ + + + + + + + + +
+
+ +
+
+ + + + + + +
+ + ); } export default translate(Summary); diff --git a/packages/app-explorer/src/SummarySession.tsx b/packages/app-explorer/src/SummarySession.tsx index 4d8672b0c4..9f7cfd5c09 100644 --- a/packages/app-explorer/src/SummarySession.tsx +++ b/packages/app-explorer/src/SummarySession.tsx @@ -19,69 +19,63 @@ interface Props extends I18nProps { withSession?: boolean; } -class SummarySession extends React.PureComponent { - public render (): React.ReactNode { - return ( - <> - {this.renderSession()} - {this.renderEra()} - +function renderSession ({ session_info, t, withSession = true }: Props): React.ReactNode { + if (!withSession || !session_info) { + return null; + } + + const label = session_info.isEpoch + ? t('epoch') + : t('session'); + + return session_info.sessionLength.gtn(0) + ? ( + + ) + : ( + + {formatNumber(session_info.currentIndex)} + ); +} + +function renderEra ({ session_info, t, withEra = true }: Props): React.ReactNode { + if (!withEra || !session_info) { + return null; } - private renderEra (): React.ReactNode { - const { session_info, t, withEra = true } = this.props; + const label = t('era'); - if (!withEra || !session_info) { - return null; - } + return session_info.sessionLength.gtn(0) + ? ( + + ) + : ( + + {formatNumber(session_info.currentEra)} + + ); +} - const label = t('era'); - - return session_info.sessionLength.gtn(0) - ? ( - - ) - : ( - - {formatNumber(session_info.currentEra)} - - ); - } - - private renderSession (): React.ReactNode { - const { session_info, t, withSession = true } = this.props; - - if (!withSession || !session_info) { - return null; - } - - const label = session_info.isEpoch - ? t('epoch') - : t('session'); - - return session_info.sessionLength.gtn(0) - ? ( - - ) - : ( - - {formatNumber(session_info.currentIndex)} - - ); - } +function SummarySession (props: Props): React.ReactElement { + return ( + <> + {renderSession(props)} + {renderEra(props)} + + ); } export default translate( diff --git a/packages/app-extrinsics/src/Balance.tsx b/packages/app-extrinsics/src/Balance.tsx index d3e44250f0..58722abe9e 100644 --- a/packages/app-extrinsics/src/Balance.tsx +++ b/packages/app-extrinsics/src/Balance.tsx @@ -15,20 +15,16 @@ interface Props extends BareProps, CallProps { label?: React.ReactNode; } -class BalanceDisplay extends React.PureComponent { - public render (): React.ReactNode { - const { className, label, style, balances_all } = this.props; - - return ( - - ); - } +function BalanceDisplay ({ className, label, style, balances_all }: Props): React.ReactElement { + return ( + + ); } export default withMulti( diff --git a/packages/app-extrinsics/src/index.tsx b/packages/app-extrinsics/src/index.tsx index 74e178559c..9c08d8cfb6 100644 --- a/packages/app-extrinsics/src/index.tsx +++ b/packages/app-extrinsics/src/index.tsx @@ -12,26 +12,22 @@ import translate from './translate'; type Props = AppProps & I18nProps; -class ExtrinsicsApp extends React.PureComponent { - public render (): React.ReactNode { - const { basePath, t } = this.props; - - return ( -
-
- -
- -
- ); - } +function ExtrinsicsApp ({ basePath, t }: Props): React.ReactElement { + return ( +
+
+ +
+ +
+ ); } export { ExtrinsicsApp }; diff --git a/packages/app-js/src/Output.tsx b/packages/app-js/src/Output.tsx index 5196c33aae..f919d7fc9b 100644 --- a/packages/app-js/src/Output.tsx +++ b/packages/app-js/src/Output.tsx @@ -35,21 +35,17 @@ const renderEntry = ({ args, type }: Log, index: number): React.ReactNode => (
); -export default class Output extends React.PureComponent { - public render (): React.ReactNode { - const { children, logs } = this.props; - - return ( -
-
-
- 
-              {logs.map(renderEntry)}
-
-
+export default function Output ({ children, logs }: Props): React.ReactElement { + return ( +
+
+
+ 
+            {logs.map(renderEntry)}
+
- {children} -
- ); - } +
+ {children} +
+ ); } diff --git a/packages/app-js/src/index.tsx b/packages/app-js/src/index.tsx index 362e4fed5f..d92c456c19 100644 --- a/packages/app-js/src/index.tsx +++ b/packages/app-js/src/index.tsx @@ -12,15 +12,11 @@ import Playground from './Playground'; type Props = AppProps & BareProps; -export default class AppJs extends React.PureComponent { - public render (): React.ReactNode { - const { basePath } = this.props; - - return ( - - - - - ); - } +export default function AppJs ({ basePath }: Props): React.ReactElement { + return ( + + + + + ); } diff --git a/packages/app-parachains/src/Overview/Parachain.tsx b/packages/app-parachains/src/Overview/Parachain.tsx index faebe12d61..2d1dd8647d 100644 --- a/packages/app-parachains/src/Overview/Parachain.tsx +++ b/packages/app-parachains/src/Overview/Parachain.tsx @@ -23,36 +23,32 @@ interface Props extends I18nProps { parachains_relayDispatchQueueSize?: [BN, BN]; } -class Parachain extends React.PureComponent { - public render (): React.ReactNode { - const { className, paraId, parachains_heads, parachains_relayDispatchQueueSize, t } = this.props; - - return ( - -
-
-
-

#{formatNumber(paraId)}

-
+function Parachain ({ className, paraId, parachains_heads, parachains_relayDispatchQueueSize, t }: Props): React.ReactElement { + return ( + +
+
+
+

#{formatNumber(paraId)}

- ')} - /> -
- - ); - } + ')} + /> + +
+ + ); } export default withMulti( diff --git a/packages/app-parachains/src/Overview/Parachains.tsx b/packages/app-parachains/src/Overview/Parachains.tsx index 2af4821985..e6de63a0fc 100644 --- a/packages/app-parachains/src/Overview/Parachains.tsx +++ b/packages/app-parachains/src/Overview/Parachains.tsx @@ -17,25 +17,21 @@ interface Props extends I18nProps { parachains_parachains?: BN[]; } -class Parachains extends React.PureComponent { - public render (): React.ReactNode { - const { parachains_parachains = [], t } = this.props; - - return ( - - { - parachains_parachains.length - ? parachains_parachains.map((paraId): React.ReactNode => - - ) - : null - } - - ); - } +function Parachains ({ parachains_parachains = [], t }: Props): React.ReactElement { + return ( + + { + parachains_parachains.length + ? parachains_parachains.map((paraId): React.ReactNode => + + ) + : null + } + + ); } export default translate( diff --git a/packages/app-parachains/src/Overview/Summary.tsx b/packages/app-parachains/src/Overview/Summary.tsx index db99fa5f4b..ef3f69a531 100644 --- a/packages/app-parachains/src/Overview/Summary.tsx +++ b/packages/app-parachains/src/Overview/Summary.tsx @@ -18,27 +18,23 @@ interface Props extends I18nProps { parachains_parachains?: BN[]; } -class Summary extends React.PureComponent { - public render (): React.ReactNode { - const { parachains_nextFreeId, parachains_parachains = [], t } = this.props; - - return ( - +function Summary ({ parachains_nextFreeId, parachains_parachains = [], t }: Props): React.ReactElement { + return ( + +
+ + {formatNumber(parachains_parachains.length)} + +
+ {parachains_nextFreeId && (
- - {formatNumber(parachains_parachains.length)} + + {formatNumber(parachains_nextFreeId)}
- {parachains_nextFreeId && ( -
- - {formatNumber(parachains_nextFreeId)} - -
- )} - - ); - } + )} + + ); } export default translate( diff --git a/packages/app-staking/src/Overview/Summary.tsx b/packages/app-staking/src/Overview/Summary.tsx index 24a6fc5280..d5608c8329 100644 --- a/packages/app-staking/src/Overview/Summary.tsx +++ b/packages/app-staking/src/Overview/Summary.tsx @@ -24,41 +24,39 @@ interface Props extends I18nProps { next: string[]; } -class Summary extends React.PureComponent { - public render (): React.ReactNode { - const { className, currentValidatorsControllersV1OrStashesV2, lastAuthor, lastBlock, next, style, staking_validatorCount, t } = this.props; +function Summary (props: Props): React.ReactElement { + const { className, currentValidatorsControllersV1OrStashesV2, lastAuthor, lastBlock, next, style, staking_validatorCount, t } = props; - return ( - -
- - {currentValidatorsControllersV1OrStashesV2.length}/{staking_validatorCount ? staking_validatorCount.toString() : '-'} - - - {next.length} - -
-
- - {lastAuthor && ( - - )} - {lastBlock} - -
-
- -
- - ); - } + return ( + +
+ + {currentValidatorsControllersV1OrStashesV2.length}/{staking_validatorCount ? staking_validatorCount.toString() : '-'} + + + {next.length} + +
+
+ + {lastAuthor && ( + + )} + {lastBlock} + +
+
+ +
+ + ); } export default withMulti( diff --git a/packages/app-staking/src/Overview/index.tsx b/packages/app-staking/src/Overview/index.tsx index dc7bcb9ce9..4329edc82e 100644 --- a/packages/app-staking/src/Overview/index.tsx +++ b/packages/app-staking/src/Overview/index.tsx @@ -20,50 +20,49 @@ interface Props extends ApiProps, BareProps, ComponentProps { chain_subscribeNewHeads?: HeaderExtended; } -class Overview extends React.PureComponent { - public render (): React.ReactNode { - const { chain_subscribeNewHeads, allControllers, allStashes, currentValidatorsControllersV1OrStashesV2, isSubstrateV2, recentlyOnline } = this.props; - let nextSorted: string[]; +// TODO: Switch to useState +function Overview (props: Props): React.ReactElement { + const { chain_subscribeNewHeads, allControllers, allStashes, currentValidatorsControllersV1OrStashesV2, isSubstrateV2, recentlyOnline } = props; + let nextSorted: string[]; - if (isSubstrateV2) { - // this is a V2 node currentValidatorsControllersV1OrStashesV2 is a list of stashes - nextSorted = allStashes.filter((address): boolean => - !currentValidatorsControllersV1OrStashesV2.includes(address) - ); - } else { - // this is a V1 node currentValidatorsControllersV1OrStashesV2 is a list of controllers - nextSorted = allControllers.filter((address): boolean => - !currentValidatorsControllersV1OrStashesV2.includes(address) - ); - } - - let lastBlock = '—'; - let lastAuthor: string | undefined; - - if (chain_subscribeNewHeads) { - lastBlock = formatNumber(chain_subscribeNewHeads.number); - lastAuthor = (chain_subscribeNewHeads.author || '').toString(); - } - - return ( -
- - -
+ if (isSubstrateV2) { + // this is a V2 node currentValidatorsControllersV1OrStashesV2 is a list of stashes + nextSorted = allStashes.filter((address): boolean => + !currentValidatorsControllersV1OrStashesV2.includes(address) + ); + } else { + // this is a V1 node currentValidatorsControllersV1OrStashesV2 is a list of controllers + nextSorted = allControllers.filter((address): boolean => + !currentValidatorsControllersV1OrStashesV2.includes(address) ); } + + let lastBlock = '—'; + let lastAuthor: string | undefined; + + if (chain_subscribeNewHeads) { + lastBlock = formatNumber(chain_subscribeNewHeads.number); + lastAuthor = (chain_subscribeNewHeads.author || '').toString(); + } + + return ( +
+ + +
+ ); } export default withMulti( diff --git a/packages/app-storage/src/Queries.tsx b/packages/app-storage/src/Queries.tsx index 40f94099a3..34fb7d98b8 100644 --- a/packages/app-storage/src/Queries.tsx +++ b/packages/app-storage/src/Queries.tsx @@ -14,24 +14,20 @@ interface Props extends BareProps { value?: QueryTypes[]; } -export default class Queries extends React.PureComponent { - public render (): React.ReactNode { - const { onRemove, value } = this.props; - - if (!value || !value.length) { - return null; - } - - return ( -
- {value.map((query): React.ReactNode => - - )} -
- ); +export default function Queries ({ onRemove, value }: Props): React.ReactElement | null { + if (!value || !value.length) { + return null; } + + return ( +
+ {value.map((query): React.ReactNode => + + )} +
+ ); } diff --git a/packages/app-toolbox/src/Rpc/Results.tsx b/packages/app-toolbox/src/Rpc/Results.tsx index d7bde6b105..7c8fb294c9 100644 --- a/packages/app-toolbox/src/Rpc/Results.tsx +++ b/packages/app-toolbox/src/Rpc/Results.tsx @@ -13,35 +13,33 @@ interface Props extends BareProps { queue: QueueTx[]; } -export default class Results extends React.PureComponent { - public render (): React.ReactNode { - const { queue = [] } = this.props; +function Results ({ queue = [] }: Props): React.ReactElement | null { + const filtered = queue + .filter(({ error, result }): boolean => + !isUndefined(error) || !isUndefined(result) + ) + .reverse(); - const filtered = queue - .filter(({ error, result }): boolean => - !isUndefined(error) || !isUndefined(result) - ) - .reverse(); - - if (!filtered.length) { - return null; - } - - return ( -
- {filtered.map(({ error, id, result, rpc: { section, method } }): React.ReactNode => ( - {JSON.stringify(result, null, 2)} - } - /> - ))} -
- ); + if (!filtered.length) { + return null; } + + return ( +
+ {filtered.map(({ error, id, result, rpc: { section, method } }): React.ReactNode => ( + {JSON.stringify(result, null, 2)} + } + /> + ))} +
+ ); } + +export default Results; diff --git a/packages/app-toolbox/src/Rpc/index.tsx b/packages/app-toolbox/src/Rpc/index.tsx index b50f0fa471..63b2b0fb43 100644 --- a/packages/app-toolbox/src/Rpc/index.tsx +++ b/packages/app-toolbox/src/Rpc/index.tsx @@ -2,7 +2,6 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { BareProps } from '@polkadot/react-components/types'; import { QueueProps } from '@polkadot/react-components/Status/types'; import React from 'react'; @@ -11,19 +10,15 @@ import { QueueConsumer } from '@polkadot/react-components/Status/Context'; import Results from './Results'; import Selection from './Selection'; -type Props = BareProps; - -export default class RpcApp extends React.PureComponent { - public render (): React.ReactNode { - return ( - - {({ txqueue, queueRpc }: QueueProps): React.ReactNode => ( - <> - - - - )} - - ); - } +export default function RpcApp (): React.ReactElement { + return ( + + {({ txqueue, queueRpc }: QueueProps): React.ReactNode => ( + <> + + + + )} + + ); } diff --git a/packages/app-transfer/src/index.tsx b/packages/app-transfer/src/index.tsx index 95c73a8bbb..92fe2da203 100644 --- a/packages/app-transfer/src/index.tsx +++ b/packages/app-transfer/src/index.tsx @@ -2,14 +2,12 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { AppProps } from '@polkadot/react-components/types'; - import React from 'react'; -type Props = AppProps; - -export default class App extends React.PureComponent { - public render (): React.ReactNode { - return 'Deprecated, now operates via modal'; - } +export default function App (): React.ReactElement { + return ( + <> + Deprecated, now operates via modal + + ); } diff --git a/packages/app-treasury/src/Overview/Proposals.tsx b/packages/app-treasury/src/Overview/Proposals.tsx index 2a5960ae55..12aad76694 100644 --- a/packages/app-treasury/src/Overview/Proposals.tsx +++ b/packages/app-treasury/src/Overview/Proposals.tsx @@ -28,7 +28,7 @@ interface State { proposalIndices: BN[]; } -class ProposalsBase extends React.PureComponent { +class ProposalsBase extends React.PureComponent { public state: State = { isEmpty: true, isProposeOpen: false, diff --git a/packages/app-treasury/src/Overview/Summary.tsx b/packages/app-treasury/src/Overview/Summary.tsx index 4c06c43296..5c1297f519 100644 --- a/packages/app-treasury/src/Overview/Summary.tsx +++ b/packages/app-treasury/src/Overview/Summary.tsx @@ -19,35 +19,33 @@ interface Props extends I18nProps { treasury_pot?: BN; } -class Summary extends React.PureComponent { - public render (): React.ReactNode { - const { treasury_proposalCount = new BN(0), treasury_approvals = [] as BN[], treasury_pot = new BN(0), t } = this.props; - const value = treasury_pot - ? treasury_pot.toString() - : null; +function Summary (props: Props): React.ReactElement { + const { treasury_proposalCount = new BN(0), treasury_approvals = [] as BN[], treasury_pot = new BN(0), t } = props; + const value = treasury_pot + ? treasury_pot.toString() + : null; - return ( - -
- - {formatNumber(treasury_proposalCount)} - - - {treasury_approvals ? treasury_approvals.length : '0'} - -
-
- - { - value - ? `${formatBalance(value, false)}${treasury_pot.gtn(0) ? formatBalance.calcSi(value).value : ''}` - : '-' - } - -
- - ); - } + return ( + +
+ + {formatNumber(treasury_proposalCount)} + + + {treasury_approvals ? treasury_approvals.length : '0'} + +
+
+ + { + value + ? `${formatBalance(value, false)}${treasury_pot.gtn(0) ? formatBalance.calcSi(value).value : ''}` + : '-' + } + +
+ + ); } export default translate(