diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index 695c606885..730bab3515 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -465,7 +465,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt return ( <> - + - - + + - - + + - + ); } -export default React.memo(styled(Account)` +const StyledTr = styled.tr` .devBadge { - opacity: 0.65; + opacity: var(--opacity-light); } -`); +`; + +export default React.memo(Account); diff --git a/packages/page-accounts/src/Accounts/Banner.tsx b/packages/page-accounts/src/Accounts/Banner.tsx index 8930b63533..08fbdb2836 100644 --- a/packages/page-accounts/src/Accounts/Banner.tsx +++ b/packages/page-accounts/src/Accounts/Banner.tsx @@ -12,16 +12,18 @@ interface Props { function Banner ({ children, className = '', type }: Props): React.ReactElement | null { return ( -
+
{children}
-
+ ); } -export default React.memo(styled(Banner)` +const StyledArticle = styled.article` .box { padding: 0 0.5rem; } -`); +`; + +export default React.memo(Banner); diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx index ecbe776ace..0f119ed513 100644 --- a/packages/page-accounts/src/Accounts/index.tsx +++ b/packages/page-accounts/src/Accounts/index.tsx @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import type { ActionStatus } from '@polkadot/react-components/Status/types'; +import type { KeyringAddress } from '@polkadot/ui-keyring/types'; import type { BN } from '@polkadot/util'; import type { AccountBalance, Delegation, SortedAccount } from '../types'; @@ -127,7 +128,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen const accountsWithInfo = useMemo( () => allAccounts - .map((address, index): SortedAccount => { + .map((address, index): Omit & { account: KeyringAddress | undefined } => { const deleg = delegations && delegations[index]?.isDelegating && delegations[index]?.asDelegating; const delegation: Delegation | undefined = (deleg && { accountDelegated: deleg.target.toString(), @@ -141,7 +142,8 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen delegation, isFavorite: favoritesMap[address ?? ''] ?? false }; - }), + }) + .filter((a): a is SortedAccount => !!a.account), [allAccounts, favoritesMap, delegations] ); @@ -247,7 +249,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen const onSortDirectionChange = () => () => setSortBy({ sortBy, sortFromMax: !sortFromMax }); return ( -
+ {isCreateOpen && ( + ); } -export default React.memo(styled(Overview)` +const StyledDiv = styled.div` .ui--Dropdown { width: 15rem; } @@ -391,4 +393,6 @@ export default React.memo(styled(Overview)` margin-left: auto; } } -`); +`; + +export default React.memo(Overview); diff --git a/packages/page-accounts/src/Sidebar/AccountMenuButtons.tsx b/packages/page-accounts/src/Sidebar/AccountMenuButtons.tsx index 3d34367795..cf52457ccd 100644 --- a/packages/page-accounts/src/Sidebar/AccountMenuButtons.tsx +++ b/packages/page-accounts/src/Sidebar/AccountMenuButtons.tsx @@ -4,13 +4,14 @@ import React, { useCallback } from 'react'; import styled from 'styled-components'; -import Transfer from '@polkadot/app-accounts/modals/Transfer'; -import { useTranslation } from '@polkadot/app-accounts/translate'; import { Button } from '@polkadot/react-components'; import { useApi, useToggle } from '@polkadot/react-hooks'; import { AddressFlags } from '@polkadot/react-hooks/types'; import { isFunction } from '@polkadot/util'; +import Transfer from '../modals/Transfer'; +import { useTranslation } from '../translate'; + interface Props { className?: string; flags: AddressFlags; @@ -22,7 +23,7 @@ interface Props { onSaveName: () => void; onSaveTags: () => void; onForgetAddress: () => void; - onUpdateName: () => void; + onUpdateName?: (() => void) | null; recipientId: string; } @@ -69,7 +70,7 @@ function AccountMenuButtons ({ className = '', flags, isEditing, isEditingName, }, [isEditing, toggleIsEditing, updateName, onSaveTags]); return ( -
+ {isEditing ? ( @@ -127,11 +128,11 @@ function AccountMenuButtons ({ className = '', flags, isEditing, isEditingName, recipientId={recipientId} /> )} -
+ ); } -export default React.memo(styled(AccountMenuButtons)` +const StyledDiv = styled.div` width: 100%; .ui--Button-Group { @@ -140,4 +141,6 @@ export default React.memo(styled(AccountMenuButtons)` justify-content: space-around; margin-bottom: 0; } -`); +`; + +export default React.memo(AccountMenuButtons); diff --git a/packages/page-accounts/src/Sidebar/Balances.tsx b/packages/page-accounts/src/Sidebar/Balances.tsx index 9470123228..959bace9a4 100644 --- a/packages/page-accounts/src/Sidebar/Balances.tsx +++ b/packages/page-accounts/src/Sidebar/Balances.tsx @@ -19,7 +19,7 @@ function Balances ({ address, className }: Props): React.ReactElement | n const { t } = useTranslation(); return ( -
+
{t('balance')}
@@ -30,11 +30,11 @@ function Balances ({ address, className }: Props): React.ReactElement | n withBalance={WITH_BALANCE} withLabel /> -
+ ); } -export default React.memo(styled(Balances)` +const StyledSection = styled.section` .balanceExpander { justify-content: flex-start; @@ -52,4 +52,6 @@ export default React.memo(styled(Balances)` } } } -`); +`; + +export default React.memo(Balances); diff --git a/packages/page-accounts/src/Sidebar/Flags.tsx b/packages/page-accounts/src/Sidebar/Flags.tsx index b26792fb59..d4ff9e3c79 100644 --- a/packages/page-accounts/src/Sidebar/Flags.tsx +++ b/packages/page-accounts/src/Sidebar/Flags.tsx @@ -24,7 +24,7 @@ function Flags ({ className = '', flags: { isCouncil, isDevelopment, isExternal, } return ( -
+ { hasFlags && (
{t('Flags')}
@@ -102,12 +102,14 @@ function Flags ({ className = '', flags: { isCouncil, isDevelopment, isExternal, /> )}
-
+ ); } -export default React.memo(styled(Flags)` +const StyledDiv = styled.div` .ui--Tag { margin: 0.2rem 1rem 0.2rem 0.571rem; } -`); +`; + +export default React.memo(Flags); diff --git a/packages/page-accounts/src/Sidebar/Judgements.tsx b/packages/page-accounts/src/Sidebar/Judgements.tsx index f570ea88b1..0757ae33ce 100644 --- a/packages/page-accounts/src/Sidebar/Judgements.tsx +++ b/packages/page-accounts/src/Sidebar/Judgements.tsx @@ -38,7 +38,7 @@ function Judgements ({ address, className = '' }: Props): React.ReactElement @@ -48,11 +48,11 @@ function Judgements ({ address, className = '' }: Props): React.ReactElement )} - + ); } -export default React.memo(styled(Judgements)` +const StyledDiv = styled.div` margin-top: 0.714rem; &:not(.no-judgements) { @@ -60,4 +60,6 @@ export default React.memo(styled(Judgements)` cursor: pointer; } } -`); +`; + +export default React.memo(Judgements); diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx index 6c2e23c38f..f9114e12ba 100644 --- a/packages/page-accounts/src/Sidebar/Sidebar.tsx +++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx @@ -4,7 +4,8 @@ import React, { useRef, useState } from 'react'; import styled from 'styled-components'; -import { LinkExternal, Sidebar } from '@polkadot/react-components'; +import { LinkExternal } from '@polkadot/react-components'; +import Sidebar from '@polkadot/react-components/Sidebar'; import { colorLink } from '@polkadot/react-components/styles/theme'; import { useAccountInfo } from '@polkadot/react-hooks'; @@ -17,8 +18,8 @@ interface Props { address: string; className?: string; dataTestId?: string; - onClose: () => void; - onUpdateName: () => void; + onClose?: () => void; + onUpdateName?: (() => void) | null; } function FullSidebar ({ address, className = '', dataTestId, onClose, onUpdateName }: Props): React.ReactElement { @@ -28,7 +29,7 @@ function FullSidebar ({ address, className = '', dataTestId, onClose, onUpdateNa const ref = useRef(null); return ( - - + ); } -export default React.memo(styled(FullSidebar)` +const StyledSidebar = styled(Sidebar)` display: flex; flex-direction: column; background-color: var(--bg-sidebar); @@ -326,4 +327,6 @@ export default React.memo(styled(FullSidebar)` margin: 0 0.5rem; } } -`); +`; + +export default React.memo(FullSidebar); diff --git a/packages/page-accounts/src/Sidebar/SidebarEditableSection.tsx b/packages/page-accounts/src/Sidebar/SidebarEditableSection.tsx index 0ca5b8fd18..033cbc6825 100644 --- a/packages/page-accounts/src/Sidebar/SidebarEditableSection.tsx +++ b/packages/page-accounts/src/Sidebar/SidebarEditableSection.tsx @@ -15,7 +15,7 @@ interface Props { accountIndex: string | undefined; address: string; isBeingEdited: (arg: boolean) => void; - onUpdateName: () => void; + onUpdateName?: (() => void) | null; sidebarRef: React.RefObject; } diff --git a/packages/page-accounts/src/Vanity/Match.tsx b/packages/page-accounts/src/Vanity/Match.tsx index 4fd9d71d72..843d51d8cb 100644 --- a/packages/page-accounts/src/Vanity/Match.tsx +++ b/packages/page-accounts/src/Vanity/Match.tsx @@ -36,7 +36,7 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo ); return ( - + - + ); } -export default React.memo(styled(Match)` +const StyledTr = styled.tr` text-align: center; &:hover { @@ -107,4 +107,6 @@ export default React.memo(styled(Match)` opacity: 0.45; padding: 0 1rem; } -`); +`; + +export default React.memo(Match); diff --git a/packages/page-accounts/src/Vanity/index.tsx b/packages/page-accounts/src/Vanity/index.tsx index ee9cb2fd6b..6b4a94fb47 100644 --- a/packages/page-accounts/src/Vanity/index.tsx +++ b/packages/page-accounts/src/Vanity/index.tsx @@ -187,7 +187,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme ); return ( -
+
)} -
+ ); } -export default React.memo(styled(VanityApp)` +const StyledDiv = styled.div` .vanity--App-matches { overflow-x: auto; padding: 1em 0; @@ -275,4 +275,6 @@ export default React.memo(styled(VanityApp)` opacity: 0.45; text-align: center; } -`); +`; + +export default React.memo(VanityApp); diff --git a/packages/page-accounts/src/index.tsx b/packages/page-accounts/src/index.tsx index aacb840308..2428cf1603 100644 --- a/packages/page-accounts/src/index.tsx +++ b/packages/page-accounts/src/index.tsx @@ -44,16 +44,10 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement

- + - + diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx index 134ad244ba..4bd8d4861f 100644 --- a/packages/page-accounts/src/modals/Create.tsx +++ b/packages/page-accounts/src/modals/Create.tsx @@ -242,7 +242,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ ); return ( - ('Add an account via seed {{step}}/{{STEPS_COUNT}}', { replace: { STEPS_COUNT, step } })} onClose={onClose} @@ -435,11 +435,11 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ )} - + ); } -export default React.memo(styled(Create)` +const StyledModal = styled(Modal)` .accounts--Creator-advanced { margin-top: 1rem; overflow: visible; @@ -471,4 +471,6 @@ export default React.memo(styled(Create)` } } } -`); +`; + +export default React.memo(Create); diff --git a/packages/page-accounts/src/modals/IdentityMain.tsx b/packages/page-accounts/src/modals/IdentityMain.tsx index 32c8984d48..0ac34ab6b1 100644 --- a/packages/page-accounts/src/modals/IdentityMain.tsx +++ b/packages/page-accounts/src/modals/IdentityMain.tsx @@ -143,7 +143,7 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React }, [hasEmail, hasLegal, hasRiot, hasTwitter, hasWeb, valDisplay, valEmail, valLegal, valRiot, valTwitter, valWeb]); return ( - ('Register identity')} onClose={onClose} @@ -251,12 +251,14 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React tx={api.tx.identity.setIdentity} /> - + ); } -export default React.memo(styled(IdentityMain)` +const StyledModal = styled(Modal)` .toggle-Wrap { position: relative; } -`); +`; + +export default React.memo(IdentityMain); diff --git a/packages/page-accounts/src/modals/MultisigApprove.tsx b/packages/page-accounts/src/modals/MultisigApprove.tsx index c1b04ed658..6a0943df6b 100644 --- a/packages/page-accounts/src/modals/MultisigApprove.tsx +++ b/packages/page-accounts/src/modals/MultisigApprove.tsx @@ -163,7 +163,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }: const isAye = type === 'aye'; return ( - ('Pending call hashes')} onClose={onClose} @@ -284,13 +284,15 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }: onStart={onClose} /> - + ); } -export default React.memo(styled(MultisigApprove)` +const StyledModal = styled(Modal)` .tipToggle { width: 100%; text-align: right; } -`); +`; + +export default React.memo(MultisigApprove); diff --git a/packages/page-accounts/src/modals/MultisigCreate.tsx b/packages/page-accounts/src/modals/MultisigCreate.tsx index 9f3e2e5753..6ceaacc214 100644 --- a/packages/page-accounts/src/modals/MultisigCreate.tsx +++ b/packages/page-accounts/src/modals/MultisigCreate.tsx @@ -153,7 +153,7 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re const isValid = isNameValid && isThresholdValid; return ( - ('Add multisig')} onClose={onClose} @@ -252,13 +252,15 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re onClick={_createMultisig} /> - + ); } -export default React.memo(styled(Multisig)` +const StyledModal = styled(Modal)` .signaturesFileToggle { width: 100%; text-align: right; } -`); +`; + +export default React.memo(Multisig); diff --git a/packages/page-accounts/src/modals/ProxyOverview.tsx b/packages/page-accounts/src/modals/ProxyOverview.tsx index 839b61eae4..8f46555097 100644 --- a/packages/page-accounts/src/modals/ProxyOverview.tsx +++ b/packages/page-accounts/src/modals/ProxyOverview.tsx @@ -249,7 +249,7 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_ const isSameAdd = added.some(([accountId]) => accountId && accountId.eq(proxiedAccount)); return ( - ('Proxy overview')} onClose={onClose} @@ -323,11 +323,11 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_ onStart={onClose} /> - + ); } -export default React.memo(styled(ProxyOverview)` +const StyledModal = styled(Modal)` .proxy-container { display: grid; grid-column-gap: 0.5rem; @@ -343,4 +343,6 @@ export default React.memo(styled(ProxyOverview)` padding-top: 0.3rem; } } -`); +`; + +export default React.memo(ProxyOverview); diff --git a/packages/page-accounts/src/modals/Qr.tsx b/packages/page-accounts/src/modals/Qr.tsx index b5528a9757..10edec9622 100644 --- a/packages/page-accounts/src/modals/Qr.tsx +++ b/packages/page-accounts/src/modals/Qr.tsx @@ -117,7 +117,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea ); return ( - ('Add account via Qr')} onClose={onClose} @@ -178,13 +178,15 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea onClick={_onSave} /> - + ); } -export default React.memo(styled(QrModal)` +const StyledModal = styled(Modal)` .qr-wrapper { margin: 0 auto; max-width: 30rem; } -`); +`; + +export default React.memo(QrModal); diff --git a/packages/page-accounts/src/modals/Transfer.tsx b/packages/page-accounts/src/modals/Transfer.tsx index aaf7628994..75c16bbc51 100644 --- a/packages/page-accounts/src/modals/Transfer.tsx +++ b/packages/page-accounts/src/modals/Transfer.tsx @@ -9,7 +9,8 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import { checkAddress } from '@polkadot/phishing'; -import { InputAddress, InputBalance, MarkError, MarkWarning, Modal, Toggle, TxButton } from '@polkadot/react-components'; +import { InputAddress, InputBalance, MarkError, MarkWarning, Toggle, TxButton } from '@polkadot/react-components'; +import Modal from '@polkadot/react-components/Modal'; import { useApi, useCall } from '@polkadot/react-hooks'; import { Available } from '@polkadot/react-query'; import { BN_HUNDRED, BN_ZERO, isFunction, nextTick } from '@polkadot/util'; @@ -94,7 +95,7 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send const canToggleAll = !isProtected && balances && balances.accountId?.eq(propSenderId || senderId) && maxTransfer && noReference; return ( - ('Send funds')} onClose={onClose} @@ -218,11 +219,11 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send } /> - + ); } -export default React.memo(styled(Transfer)` +const StyledModal = styled(Modal)` .balance { margin-bottom: 0.5rem; text-align: right; @@ -244,4 +245,6 @@ export default React.memo(styled(Transfer)` .typeToggle+.typeToggle { margin-top: 0.375rem; } -`); +`; + +export default React.memo(Transfer); diff --git a/packages/page-accounts/src/types.ts b/packages/page-accounts/src/types.ts index da13292563..bf5bd24fe9 100644 --- a/packages/page-accounts/src/types.ts +++ b/packages/page-accounts/src/types.ts @@ -28,7 +28,7 @@ export interface Delegation { } export interface SortedAccount { - account?: KeyringAddress; + account: KeyringAddress; address: string; delegation?: Delegation; isFavorite: boolean; diff --git a/packages/page-accounts/test/pages/accountsPage.tsx b/packages/page-accounts/test/pages/accountsPage.tsx index fd6f61c5e5..cc9a7ab068 100644 --- a/packages/page-accounts/test/pages/accountsPage.tsx +++ b/packages/page-accounts/test/pages/accountsPage.tsx @@ -13,9 +13,16 @@ import { assertText, clickButton } from '@polkadot/test-support/utils/renderedSc import AccountOverview from '../../src/Accounts/index'; import { AccountRow } from '../pageElements/AccountRow'; +const NOOP_CHANGE = () => undefined; + export class AccountsPage extends Page { constructor () { - super(, 'Account-'); + super( + , + 'Account-' + ); } async getAccountRows (): Promise { diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx index 5b410c583b..42ff3bf13d 100644 --- a/packages/page-addresses/src/Contacts/Address.tsx +++ b/packages/page-addresses/src/Contacts/Address.tsx @@ -5,7 +5,6 @@ import type { ActionStatus } from '@polkadot/react-components/Status/types'; import type { KeyringAddress } from '@polkadot/ui-keyring/types'; import React, { useCallback, useEffect, useState } from 'react'; -import styled from 'styled-components'; import Transfer from '@polkadot/app-accounts/modals/Transfer'; import { AddressInfo, AddressSmall, Button, ChainLock, Columar, Forget, LinkExternal, Menu, Popup, Table, Tags } from '@polkadot/react-components'; @@ -280,5 +279,4 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite ); } -// FIXME: This is weird, if we remove the styled wrapper we have test failures... -export default React.memo(styled(Address)``); +export default React.memo(Address); diff --git a/packages/page-addresses/src/Contacts/index.tsx b/packages/page-addresses/src/Contacts/index.tsx index 78c1c038f0..44cf2a30c1 100644 --- a/packages/page-addresses/src/Contacts/index.tsx +++ b/packages/page-addresses/src/Contacts/index.tsx @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/app-addresses authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ComponentProps as Props } from '../types'; +import type { ActionStatus } from '@polkadot/react-components/Status/types'; import React, { useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; @@ -15,6 +15,11 @@ import Address from './Address'; type SortedAddress = { address: string; isFavorite: boolean }; +interface Props { + className?: string; + onStatusChange: (status: ActionStatus) => void; +} + const STORE_FAVS = 'accounts:favorites'; function Overview ({ className = '', onStatusChange }: Props): React.ReactElement { @@ -45,7 +50,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen }, [allAddresses, favorites]); return ( -

+ {isCreateOpen && ( ))} -
+ ); } -export default React.memo(styled(Overview)` +const StyledDiv = styled.div` .summary-box-contacts { align-items: center; } -`); +`; + +export default React.memo(Overview); diff --git a/packages/page-addresses/src/index.tsx b/packages/page-addresses/src/index.tsx index c5a932b1f7..385e93bbae 100644 --- a/packages/page-addresses/src/index.tsx +++ b/packages/page-addresses/src/index.tsx @@ -30,10 +30,7 @@ function AddressesApp ({ basePath, onStatusChange }: Props): React.ReactElement< /> - + diff --git a/packages/page-addresses/test/pages/addressesPage.tsx b/packages/page-addresses/test/pages/addressesPage.tsx index c6a3b223e2..8e5b6608eb 100644 --- a/packages/page-addresses/test/pages/addressesPage.tsx +++ b/packages/page-addresses/test/pages/addressesPage.tsx @@ -11,6 +11,8 @@ import { mockAccountHooks } from '@polkadot/test-support/utils/accountDefaults'; import AddressOverview from '../../src/Contacts/index'; +const NOOP_CHANGE = () => undefined; + jest.mock('@polkadot/react-hooks/useAddresses', () => ({ useAddresses: () => ({ allAddresses: mockAccountHooks.useAccounts.allAccounts, @@ -21,7 +23,12 @@ jest.mock('@polkadot/react-hooks/useAddresses', () => ({ export class AddressesPage extends Page { constructor () { - super(, 'Address-'); + super( + , + 'Address-' + ); } async getAddressesRows (): Promise {