From 2bf56dbf11f80e3b387fdf5655bcf5fcd2746c9e Mon Sep 17 00:00:00 2001 From: Jaco Date: Sun, 15 Jan 2023 19:53:55 +0200 Subject: [PATCH] Adjust styled injection (final round) (#8814) * Adjust styled injection (final round) * Fix (some) build issues * Fix (some more) build errors * ... it builds (... ship it!) --- .../src/modals/CreateEthDerivationPath.tsx | 30 ++++---- packages/page-bounties/src/VotersColumn.tsx | 5 +- .../src/Overview/ReferendumVotes.tsx | 22 +++--- packages/page-gilt/src/Overview/BidAdd.tsx | 4 +- .../page-referenda/src/Referenda/Submit.tsx | 8 +-- packages/page-signing/src/Sign.tsx | 10 +-- packages/page-signing/src/Verify.tsx | 10 +-- .../page-society/src/Candidates/BidType.tsx | 10 +-- packages/page-society/src/Overview/Member.tsx | 10 +-- .../page-society/src/Overview/Summary.tsx | 10 +-- packages/page-society/src/Overview/index.tsx | 10 +-- packages/page-staking/src/Pools/Pool.tsx | 4 +- packages/page-storage/src/Query.tsx | 10 +-- .../page-storage/src/Selection/Modules.tsx | 10 +-- packages/page-storage/src/index.tsx | 10 +-- packages/page-sudo/src/SetKey.tsx | 10 +-- packages/page-sudo/src/Sudo.tsx | 10 +-- packages/page-sudo/src/index.tsx | 1 - packages/page-treasury/src/Tips/Tip.tsx | 10 +-- packages/page-treasury/src/Tips/Tips.tsx | 10 +-- packages/page-utilities/src/Convert.tsx | 10 ++- packages/react-components/src/AddressInfo.tsx | 4 +- .../react-components/src/BatchWarning.tsx | 2 +- packages/react-components/src/ChainImg.tsx | 8 ++- packages/react-components/src/ChainLock.tsx | 8 ++- packages/react-components/src/Checkbox.tsx | 12 ++-- packages/react-components/src/CopyButton.tsx | 21 ++++-- .../react-components/src/DemocracyLocks.tsx | 10 +-- packages/react-components/src/Dropdown.tsx | 19 ++--- packages/react-components/src/EditButton.tsx | 12 ++-- packages/react-components/src/Editor.tsx | 8 ++- packages/react-components/src/Event.tsx | 4 +- .../react-components/src/ExpandButton.tsx | 12 ++-- packages/react-components/src/Expander.tsx | 12 ++-- .../react-components/src/ExpanderScroll.tsx | 12 ++-- packages/react-components/src/FilterInput.tsx | 12 ++-- .../react-components/src/FilterOverlay.tsx | 10 +-- packages/react-components/src/Flag.tsx | 8 ++- packages/react-components/src/Forget.tsx | 5 +- packages/react-components/src/HelpOverlay.tsx | 10 +-- packages/react-components/src/Icon.tsx | 8 ++- packages/react-components/src/IconLink.tsx | 16 +++-- .../src/IdentityIcon/index.tsx | 2 +- .../react-components/src/InfoForInput.tsx | 10 +-- .../src/InputAddress/index.tsx | 70 ++++++++++--------- .../src/InputAddressSimple.tsx | 10 +-- packages/react-components/src/InputFile.tsx | 10 +-- packages/react-components/src/InputNumber.tsx | 20 +++--- packages/react-components/src/InputTags.tsx | 8 ++- packages/react-components/src/Inset.tsx | 10 +-- packages/react-components/src/Inspect.tsx | 12 ++-- .../react-components/src/Menu/Divider.tsx | 2 +- .../react-components/src/ParentAccount.tsx | 4 +- packages/react-components/src/Popup/index.tsx | 2 +- packages/react-components/src/Tag.tsx | 2 +- packages/react-components/src/ToggleGroup.tsx | 2 +- .../react-components/src/TreasuryProposal.tsx | 4 +- packages/react-components/src/types.ts | 3 +- packages/react-params/src/Param/Amount.tsx | 5 +- .../src/Param/BasicAccountIdBase.tsx | 4 +- 60 files changed, 348 insertions(+), 259 deletions(-) diff --git a/packages/page-accounts/src/modals/CreateEthDerivationPath.tsx b/packages/page-accounts/src/modals/CreateEthDerivationPath.tsx index 508936ff36..ee6213461f 100644 --- a/packages/page-accounts/src/modals/CreateEthDerivationPath.tsx +++ b/packages/page-accounts/src/modals/CreateEthDerivationPath.tsx @@ -1,11 +1,13 @@ // Copyright 2017-2023 @polkadot/app-accounts authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { BN } from '@polkadot/util'; + import React, { ReactNode, useEffect, useRef, useState } from 'react'; import { Checkbox, Dropdown, Input, InputNumber, MarkError, MarkWarning, Modal } from '@polkadot/react-components'; import { useToggle } from '@polkadot/react-hooks'; -import { BN } from '@polkadot/util'; +import { BN_ZERO } from '@polkadot/util'; import { useTranslation } from '../translate'; import { DeriveValidationOutput } from '../types'; @@ -21,21 +23,21 @@ interface Props { export const ETH_DEFAULT_PATH = "m/44'/60'/0'/0/0"; -function CreateEthDerivationPath ({ className, - derivePath, - deriveValidation, - onChange, - seedType }: Props): React.ReactElement { +function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onChange, seedType }: Props): React.ReactElement { const { t } = useTranslation(); const [addIndex, setAddIndex] = useState(0); - const [customIndex, setCustomIndex] = useState(new BN(0)); - const [addressList] = useState<{ key: number; text: ReactNode; value: number; }[]>(new Array(10).fill(0).map((_, i) => ({ - key: i, - text: t('Address index {{index}}', { - replace: { index: i } - }), - value: i - }))); + const [customIndex, setCustomIndex] = useState(BN_ZERO); + const [addressList] = useState<{ key: number; text: ReactNode; value: number; }[]>( + () => new Array(10) + .fill(0) + .map((_, i) => ({ + key: i, + text: t('Address index {{index}}', { + replace: { index: i } + }), + value: i + })) + ); const [useCustomPath, toggleCustomPath] = useToggle(); const [useCustomIndex, toggleCustomIndex] = useToggle(); diff --git a/packages/page-bounties/src/VotersColumn.tsx b/packages/page-bounties/src/VotersColumn.tsx index e54869bb1b..fd9bcb4c70 100644 --- a/packages/page-bounties/src/VotersColumn.tsx +++ b/packages/page-bounties/src/VotersColumn.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2023 @polkadot/app-bounties authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { IconName } from '@fortawesome/fontawesome-svg-core'; import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; import type { BountyStatus } from '@polkadot/types/interfaces'; @@ -19,10 +20,10 @@ interface Props { status: BountyStatus; } -const icons = { +const icons: Record = { ayes: 'check', nays: 'times' -}; +} as const; function VotersColumn ({ className, option, proposals, status }: Props): React.ReactElement { const { t } = useTranslation(); diff --git a/packages/page-democracy/src/Overview/ReferendumVotes.tsx b/packages/page-democracy/src/Overview/ReferendumVotes.tsx index 99753a3e0b..fb8371b858 100644 --- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx +++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx @@ -25,7 +25,7 @@ interface Props { const LOCKS = [1, 10, 20, 30, 40, 50, 60]; -function ReferendumVotes ({ change, className, count, isAye, isWinning, total, votes }: Props): React.ReactElement | null { +function ReferendumVotes ({ className, count, isAye, total, votes }: Props): React.ReactElement | null { const { t } = useTranslation(); const sorted = useMemo( @@ -52,16 +52,16 @@ function ReferendumVotes ({ change, className, count, isAye, isWinning, total, v ('No voters')} - help={change.gtn(0) && ( - <> - -

{isWinning - ? t('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.') - : t('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.') - }

- - )} - helpIcon={isWinning ? 'arrow-circle-down' : 'arrow-circle-up'} + // help={change.gtn(0) && ( + // <> + // + //

{isWinning + // ? t('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.') + // : t('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.') + // }

+ // + // )} + // helpIcon={isWinning ? 'arrow-circle-down' : 'arrow-circle-up'} renderChildren={votes.length ? renderVotes : undefined} summary={ <> diff --git a/packages/page-gilt/src/Overview/BidAdd.tsx b/packages/page-gilt/src/Overview/BidAdd.tsx index df13d38ded..c52ab62bd9 100644 --- a/packages/page-gilt/src/Overview/BidAdd.tsx +++ b/packages/page-gilt/src/Overview/BidAdd.tsx @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/app-gilt authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { u128 } from '@polkadot/types'; +import type { u32, u128 } from '@polkadot/types'; import type { BN } from '@polkadot/util'; import React, { useMemo, useState } from 'react'; @@ -101,7 +101,7 @@ function Bid ({ className, isDisabled, proxies }: Props): React.ReactElement ('maximum lock periods')} /> diff --git a/packages/page-referenda/src/Referenda/Submit.tsx b/packages/page-referenda/src/Referenda/Submit.tsx index c0d1ff889a..0744dab130 100644 --- a/packages/page-referenda/src/Referenda/Submit.tsx +++ b/packages/page-referenda/src/Referenda/Submit.tsx @@ -74,8 +74,8 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }: const [{ imageHash, isImageHashValid }, setImageHash] = useState({ imageHash: null, isImageHashValid: false }); const [{ imageLen, imageLenDefault, isImageLenValid }, setImageLen] = useState({ imageLen: BN_ZERO, isImageLenValid: false }); const [enactIndex, setEnactIndex] = useState(0); - const [afterBlocks, setAfterBlocks] = useState(BN_HUNDRED); - const [atBlock, setAtBlock] = useState(BN_ONE); + const [afterBlocks, setAfterBlocks] = useState(BN_HUNDRED); + const [atBlock, setAtBlock] = useState(BN_ONE); const [initialAt, setInitialAt] = useState(); const preimage = usePreimage(imageHash); @@ -170,8 +170,8 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }: ); const _onChangeImageLen = useCallback( - (value: BN): void => { - setImageLen((prev) => ({ + (value?: BN): void => { + value && setImageLen((prev) => ({ imageLen: value, imageLenDefault: prev.imageLenDefault, isImageLenValid: !value.isZero() diff --git a/packages/page-signing/src/Sign.tsx b/packages/page-signing/src/Sign.tsx index bac26a24fa..093a1719c5 100644 --- a/packages/page-signing/src/Sign.tsx +++ b/packages/page-signing/src/Sign.tsx @@ -119,7 +119,7 @@ function Sign ({ className = '' }: Props): React.ReactElement { ); return ( -
+
{ onClick={_onSign} /> -
+ ); } -export default React.memo(styled(Sign)` +const StyledDiv = styled.div` .toolbox--Sign-input { position: relative; width: 100%; @@ -243,4 +243,6 @@ export default React.memo(styled(Sign)` } } } -`); +`; + +export default React.memo(Sign); diff --git a/packages/page-signing/src/Verify.tsx b/packages/page-signing/src/Verify.tsx index 36247a63da..29b671c881 100644 --- a/packages/page-signing/src/Verify.tsx +++ b/packages/page-signing/src/Verify.tsx @@ -75,7 +75,7 @@ function Verify ({ className = '' }: Props): React.ReactElement { ); return ( -
+
-
+ ); } -export default React.memo(styled(Verify)` +const StyledDiv = styled.div` .ui--AlignedIconContainer { position: absolute; z-index: 1; @@ -142,4 +142,6 @@ export default React.memo(styled(Verify)` position: relative; top: 1.25rem; } -`); +`; + +export default React.memo(Verify); diff --git a/packages/page-society/src/Candidates/BidType.tsx b/packages/page-society/src/Candidates/BidType.tsx index 0e54bccea3..fe75fbc258 100644 --- a/packages/page-society/src/Candidates/BidType.tsx +++ b/packages/page-society/src/Candidates/BidType.tsx @@ -22,14 +22,14 @@ function BidType ({ className, value }: Props): React.ReactElement { ); return ( -
+
{value && value.type}
{vouchId && } -
+ ); } -export default React.memo(styled(BidType)` +const StyledDiv = styled.div` align-items: center; display: flex; flex-wrap: no-wrap; @@ -41,4 +41,6 @@ export default React.memo(styled(BidType)` padding-right: 1.5rem; } } -`); +`; + +export default React.memo(BidType); diff --git a/packages/page-society/src/Overview/Member.tsx b/packages/page-society/src/Overview/Member.tsx index 8736812500..4cb164930f 100644 --- a/packages/page-society/src/Overview/Member.tsx +++ b/packages/page-society/src/Overview/Member.tsx @@ -74,7 +74,7 @@ function Member ({ bestNumber, className = '', value: { accountId, isCandidateVo ); return ( - +
@@ -145,11 +145,11 @@ function Member ({ bestNumber, className = '', value: { accountId, isCandidateVo - + ); } -export default React.memo(styled(Member)` +const StyledTr = styled.tr` .payoutExpander { .payout+.payout { margin-top: 0.5rem; @@ -173,4 +173,6 @@ export default React.memo(styled(Member)` } } } -`); +`; + +export default React.memo(Member); diff --git a/packages/page-society/src/Overview/Summary.tsx b/packages/page-society/src/Overview/Summary.tsx index 782f4b8a25..81cad33cc1 100644 --- a/packages/page-society/src/Overview/Summary.tsx +++ b/packages/page-society/src/Overview/Summary.tsx @@ -33,7 +33,7 @@ function Summary ({ className = '', info, payoutTotal }: Props): React.ReactElem ); return ( - +
{info && members && ( ('members')}> @@ -83,11 +83,11 @@ function Summary ({ className = '', info, payoutTotal }: Props): React.ReactElem )}
- + ); } -export default React.memo(styled(Summary)` +const StyledSummaryBox = styled(SummaryBox)` .society--header--account { white-space: nowrap; @@ -99,4 +99,6 @@ export default React.memo(styled(Summary)` margin-right: 0.5rem; } } -`); +`; + +export default React.memo(Summary); diff --git a/packages/page-society/src/Overview/index.tsx b/packages/page-society/src/Overview/index.tsx index bb3b53b64c..abed983164 100644 --- a/packages/page-society/src/Overview/index.tsx +++ b/packages/page-society/src/Overview/index.tsx @@ -23,7 +23,7 @@ interface Props { function Overview ({ className, info, isMember, mapMembers, ownMembers, payoutTotal }: Props): React.ReactElement { return ( -
+ -
+ ); } -export default React.memo(styled(Overview)` +const StyledDiv = styled.div` .overviewSection { margin-bottom: 1.5rem; } -`); +`; + +export default React.memo(Overview); diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx index fea1cef39d..f758838baa 100644 --- a/packages/page-staking/src/Pools/Pool.tsx +++ b/packages/page-staking/src/Pools/Pool.tsx @@ -29,7 +29,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props): const [isExpanded, toggleExpanded] = useToggle(false); const renderMembers = useCallback( - () => members.map(({ accountId, member }, count) => ( + () => members.map(({ accountId, member }, count): React.ReactNode => ( info && info.nominating.map((stashId, count) => ( + () => info && info.nominating.map((stashId, count): React.ReactNode => ( +
-
+ ); } -export default React.memo(styled(Query)` +const StyledDiv = styled.div` margin-bottom: 0.25em; label { @@ -223,4 +223,6 @@ export default React.memo(styled(Query)` .storage--actionrow-buttons { margin-top: -0.25rem; /* offset parent spacing for buttons */ } -`); +`; + +export default React.memo(Query); diff --git a/packages/page-storage/src/Selection/Modules.tsx b/packages/page-storage/src/Selection/Modules.tsx index b53c39f3b3..70948a0971 100644 --- a/packages/page-storage/src/Selection/Modules.tsx +++ b/packages/page-storage/src/Selection/Modules.tsx @@ -211,7 +211,7 @@ function Modules ({ className = '', onAdd }: Props): React.ReactElement { const { creator: { method, section } } = key; return ( -
+
{ onClick={_onAdd} />
-
+ ); } -export default React.memo(styled(Modules)` +const StyledSection = styled.section` .ui--Column:last-child .ui--Labelled { padding-left: 0.5rem; @@ -274,4 +274,6 @@ export default React.memo(styled(Modules)` left: 2.05rem; /* 3.55 - 1.5 (diff from padding above) */ } } -`); +`; + +export default React.memo(Modules); diff --git a/packages/page-storage/src/index.tsx b/packages/page-storage/src/index.tsx index 8f87728e0f..001f6965e5 100644 --- a/packages/page-storage/src/index.tsx +++ b/packages/page-storage/src/index.tsx @@ -24,7 +24,7 @@ function StorageApp ({ basePath, className = '' }: Props): React.ReactElement + - + ); } -export default React.memo(styled(StorageApp)` +const StyledMain = styled.main` .storage--actionrow { align-items: flex-start; display: flex; @@ -66,4 +66,6 @@ export default React.memo(styled(StorageApp)` flex: 0; padding: 0.5rem 0.25rem; } -`); +`; + +export default React.memo(StorageApp); diff --git a/packages/page-sudo/src/SetKey.tsx b/packages/page-sudo/src/SetKey.tsx index b2d5a6a059..ed3737c32d 100644 --- a/packages/page-sudo/src/SetKey.tsx +++ b/packages/page-sudo/src/SetKey.tsx @@ -32,7 +32,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React return (
-
+ {isMine ? ( <> @@ -64,7 +64,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React ) } -
+ {willLose && (
{t('You will no longer have sudo access')}
@@ -74,7 +74,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React ); } -export default React.memo(styled(SetKey)` +const StyledSection = styled.section` align-items: flex-end; justify-content: center; @@ -89,4 +89,6 @@ export default React.memo(styled(SetKey)` .sudoLabelled { align-items: center; } -`); +`; + +export default React.memo(SetKey); diff --git a/packages/page-sudo/src/Sudo.tsx b/packages/page-sudo/src/Sudo.tsx index 8961a351af..c91bd47c5f 100644 --- a/packages/page-sudo/src/Sudo.tsx +++ b/packages/page-sudo/src/Sudo.tsx @@ -38,7 +38,7 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement return isMine ? ( -
+ ('submit the following change')} @@ -84,7 +84,7 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement } /> -
+ ) : (
@@ -96,9 +96,11 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement ); } -export default React.memo(styled(Sudo)` +const StyledSection = styled.section` .sudoToggle { width: 100%; text-align: right; } -`); +`; + +export default React.memo(Sudo); diff --git a/packages/page-sudo/src/index.tsx b/packages/page-sudo/src/index.tsx index 4c0cf0b683..89001e0de9 100644 --- a/packages/page-sudo/src/index.tsx +++ b/packages/page-sudo/src/index.tsx @@ -47,7 +47,6 @@ function SudoApp ({ basePath }: Props): React.ReactElement { diff --git a/packages/page-treasury/src/Tips/Tip.tsx b/packages/page-treasury/src/Tips/Tip.tsx index c4fac9f107..58d6dbeb98 100644 --- a/packages/page-treasury/src/Tips/Tip.tsx +++ b/packages/page-treasury/src/Tips/Tip.tsx @@ -122,7 +122,7 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members, const recipient = who.toString(); return ( - + @@ -208,13 +208,15 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members, type='tip' /> - + ); } -export default React.memo(styled(Tip)` +const StyledTr = styled.tr` .closingTimer { display: inline-block; padding: 0 0.5rem; } -`); +`; + +export default React.memo(Tip); diff --git a/packages/page-treasury/src/Tips/Tips.tsx b/packages/page-treasury/src/Tips/Tips.tsx index dd6a528612..d4e7d99f94 100644 --- a/packages/page-treasury/src/Tips/Tips.tsx +++ b/packages/page-treasury/src/Tips/Tips.tsx @@ -73,7 +73,7 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onSelectT ]); return ( - ('No open tips')} filter={isMember && ( @@ -100,11 +100,11 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onSelectT tip={tip} /> ))} -
+ ); } -export default React.memo(styled(Tips)` +const StyledTable = styled(Table)` .tipsFilter { text-align: right; @@ -113,4 +113,6 @@ export default React.memo(styled(Tips)` margin-top: 0.75rem; } } -`); +`; + +export default React.memo(Tips); diff --git a/packages/page-utilities/src/Convert.tsx b/packages/page-utilities/src/Convert.tsx index 134d90d708..edf13193fa 100644 --- a/packages/page-utilities/src/Convert.tsx +++ b/packages/page-utilities/src/Convert.tsx @@ -1,8 +1,6 @@ // Copyright 2017-2023 @polkadot/app-utilities authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { Option } from '@polkadot/apps-config/settings/types'; - import React, { useCallback, useMemo, useState } from 'react'; import { createOption } from '@polkadot/app-settings/util'; @@ -24,11 +22,11 @@ interface State { inputSS58: number; } -function getState (input: string): State { +function getState (input: string | null): State { let address: string | null = null; let inputSS58 = 42; - if (isAddress(input)) { + if (input && isAddress(input)) { const decoded = base58Decode(input); const [,,, ss58Decoded] = checkAddressChecksum(decoded); @@ -49,13 +47,13 @@ function Addresses ({ className }: Props): React.ReactElement { const [prefix, setPrefix] = useState(-1); const setAddress = useCallback( - (address: string) => + (address: string | null) => setState(getState(address)), [] ); const prefixOptions = useMemo( - (): (Option | React.ReactNode)[] => { + () => { const network = allNetworks.find(({ prefix }) => prefix === chainSS58); return createSs58(t).map((o) => diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx index d96c907049..b1a89469eb 100644 --- a/packages/react-components/src/AddressInfo.tsx +++ b/packages/react-components/src/AddressInfo.tsx @@ -12,16 +12,18 @@ import React, { useRef } from 'react'; import styled from 'styled-components'; import { withCalls, withMulti } from '@polkadot/react-api/hoc'; -import { Expander, Icon, Tooltip } from '@polkadot/react-components'; import { useBestNumber } from '@polkadot/react-hooks'; import { BlockToTime, FormatBalance } from '@polkadot/react-query'; import { BN_MAX_INTEGER, BN_ZERO, bnMax, formatBalance, formatNumber, isObject } from '@polkadot/util'; import CryptoType from './CryptoType'; import DemocracyLocks from './DemocracyLocks'; +import Expander from './Expander'; +import Icon from './Icon'; import Label from './Label'; import StakingRedeemable from './StakingRedeemable'; import StakingUnbonding from './StakingUnbonding'; +import Tooltip from './Tooltip'; import { useTranslation } from './translate'; // true to display, or (for bonded) provided values [own, ...all extras] diff --git a/packages/react-components/src/BatchWarning.tsx b/packages/react-components/src/BatchWarning.tsx index 1a1a46d9f7..e65b2c77f3 100644 --- a/packages/react-components/src/BatchWarning.tsx +++ b/packages/react-components/src/BatchWarning.tsx @@ -3,10 +3,10 @@ import React from 'react'; -import { MarkWarning } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { isFunction } from '@polkadot/util'; +import MarkWarning from './MarkWarning'; import { useTranslation } from './translate'; function BatchWarning (): React.ReactElement | null { diff --git a/packages/react-components/src/ChainImg.tsx b/packages/react-components/src/ChainImg.tsx index 47f341fb3e..1fa4c74815 100644 --- a/packages/react-components/src/ChainImg.tsx +++ b/packages/react-components/src/ChainImg.tsx @@ -30,7 +30,7 @@ function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props }, [logo, specName, systemChain, systemName]); return ( - chain logo('only this network')} @@ -64,6 +64,8 @@ function ChainLock ({ className = '', genesisHash, isDisabled, onChange }: Props ); } -export default React.memo(styled(ChainLock)` +const StyledToggle = styled(Toggle)` text-align: right; -`); +`; + +export default React.memo(ChainLock); diff --git a/packages/react-components/src/Checkbox.tsx b/packages/react-components/src/Checkbox.tsx index 5fcfaf0bfa..76156799d2 100644 --- a/packages/react-components/src/Checkbox.tsx +++ b/packages/react-components/src/Checkbox.tsx @@ -9,7 +9,7 @@ import Icon from './Icon'; interface Props { className?: string; isDisabled?: boolean; - label: React.ReactNode; + label?: React.ReactNode; onChange?: (isChecked: boolean) => void; value?: boolean; } @@ -23,7 +23,7 @@ function Checkbox ({ className = '', isDisabled, label, onChange, value }: Props ); return ( -
@@ -32,11 +32,11 @@ function Checkbox ({ className = '', isDisabled, label, onChange, value }: Props icon='check' /> {label && } -
+ ); } -export default React.memo(styled(Checkbox)` +const StyledDiv = styled.div` display: inline-block; cursor: pointer; @@ -66,4 +66,6 @@ export default React.memo(styled(Checkbox)` border: 1px solid var(--color-checkbox); border-radius: 0.125rem; } -`); +`; + +export default React.memo(Checkbox); diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx index 36cf251da7..6f69f5096d 100644 --- a/packages/react-components/src/CopyButton.tsx +++ b/packages/react-components/src/CopyButton.tsx @@ -8,6 +8,7 @@ import CopyToClipboard from 'react-copy-to-clipboard'; import styled from 'styled-components'; import { useQueue } from '@polkadot/react-hooks'; +import { isString } from '@polkadot/util'; import Button from './Button'; import { useTranslation } from './translate'; @@ -19,12 +20,12 @@ interface Props { label?: React.ReactNode; type?: string; isMnemonic?: boolean; - value: string; + value?: React.ReactNode | null; } const NOOP = () => undefined; -function CopyButton ({ children, className = '', icon = 'copy', label, type, value }: Props): React.ReactElement { +function CopyButton ({ children, className = '', icon = 'copy', label, type, value }: Props): React.ReactElement | null { const { t } = useTranslation(); const { queueAction } = useQueue(); @@ -39,11 +40,15 @@ function CopyButton ({ children, className = '', icon = 'copy', label, type, val [type, queueAction, t] ); + if (!isString(value)) { + return null; + } + return ( -
+
{children} @@ -58,12 +63,14 @@ function CopyButton ({ children, className = '', icon = 'copy', label, type, val
-
+ ); } -export default React.memo(styled(CopyButton)` +const StyledDiv = styled.div` .copySpan { white-space: nowrap; } -`); +`; + +export default React.memo(CopyButton); diff --git a/packages/react-components/src/DemocracyLocks.tsx b/packages/react-components/src/DemocracyLocks.tsx index ab278379df..e8006879c6 100644 --- a/packages/react-components/src/DemocracyLocks.tsx +++ b/packages/react-components/src/DemocracyLocks.tsx @@ -109,7 +109,7 @@ function DemocracyLocks ({ className = '', value }: Props): React.ReactElement

+ ))} -

+ ); } -export default React.memo(styled(DemocracyLocks)` +const StyledDiv = styled.div` white-space: nowrap; .ui--FormatBalance { display: inline-block; } -`); +`; + +export default React.memo(DemocracyLocks); diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx index 533f94bae1..688652abfc 100644 --- a/packages/react-components/src/Dropdown.tsx +++ b/packages/react-components/src/Dropdown.tsx @@ -29,7 +29,7 @@ interface Props