Rework accounts styled injection (#8800)

* Rework accounts styled injection

* Fix build

* Fix tests? (We've always known we have circular deps on these ones...)

* Remove unused prop

packages/page-accounts/src/Accounts/Account.tsx

@@ -465,7 +465,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
 
   return (
     <>
-      <tr className={`${className} isExpanded isFirst packedBottom`}>
+      <StyledTr className={`${className} isExpanded isFirst packedBottom`}>
         <Table.Column.Favorite
           address={address}
           isFavorite={isFavorite}
@@ -701,8 +701,8 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           isExpanded={isExpanded}
           toggle={toggleIsExpanded}
         />
-      </tr>
-      <tr className={`${className} isExpanded ${isExpanded ? '' : 'isLast'} packedTop`}>
+      </StyledTr>
+      <StyledTr className={`${className} isExpanded ${isExpanded ? '' : 'isLast'} packedTop`}>
         <td />
         <td
           className='balance all'
@@ -715,8 +715,8 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           />
         </td>
         <td />
-      </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
+      </StyledTr>
+      <StyledTr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
         <td />
         <td
           className='balance columar'
@@ -753,13 +753,15 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           </Columar>
         </td>
         <td />
-      </tr>
+      </StyledTr>
     </>
   );
 }
 
-export default React.memo(styled(Account)`
+const StyledTr = styled.tr`
   .devBadge {
-    opacity: 0.65;
+    opacity: var(--opacity-light);
   }
-`);
+`;
+
+export default React.memo(Account);

packages/page-accounts/src/Accounts/Banner.tsx

@@ -12,16 +12,18 @@ interface Props {
 
 function Banner ({ children, className = '', type }: Props): React.ReactElement<Props> | null {
   return (
-    <article className={`${className} ${type} centered`}>
+    <StyledArticle className={`${className} ${type} centered`}>
       <div className='box'>
         {children}
       </div>
-    </article>
+    </StyledArticle>
   );
 }
 
-export default React.memo(styled(Banner)`
+const StyledArticle = styled.article`
   .box {
     padding: 0 0.5rem;
   }
-`);
+`;
+
+export default React.memo(Banner);

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<SortedAccount, 'account'> & { 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 (
-    <div className={className}>
+    <StyledDiv className={className}>
       {isCreateOpen && (
         <CreateModal
           onClose={toggleCreate}
@@ -371,11 +373,11 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
             : null
         )
       }
-    </div>
+    </StyledDiv>
   );
 }
 
-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);

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 (
-    <div className={`${className} ui--AddressMenu-buttons`}>
+    <StyledDiv className={`${className} ui--AddressMenu-buttons`}>
       {isEditing
         ? (
           <Button.Group>
@@ -127,11 +128,11 @@ function AccountMenuButtons ({ className = '', flags, isEditing, isEditingName,
           recipientId={recipientId}
         />
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-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);

packages/page-accounts/src/Sidebar/Balances.tsx

@@ -19,7 +19,7 @@ function Balances ({ address, className }: Props): React.ReactElement<Props> | n
   const { t } = useTranslation();
 
   return (
-    <section className={className}>
+    <StyledSection className={className}>
       <div className='ui--AddressMenu-sectionHeader'>
         {t<string>('balance')}
       </div>
@@ -30,11 +30,11 @@ function Balances ({ address, className }: Props): React.ReactElement<Props> | n
         withBalance={WITH_BALANCE}
         withLabel
       />
-    </section>
+    </StyledSection>
   );
 }
 
-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);

packages/page-accounts/src/Sidebar/Flags.tsx

@@ -24,7 +24,7 @@ function Flags ({ className = '', flags: { isCouncil, isDevelopment, isExternal,
   }
 
   return (
-    <div className={`${className} ui--AddressMenu-flags`}>
+    <StyledDiv className={`${className} ui--AddressMenu-flags`}>
       {
         hasFlags && (
           <h5>{t<string>('Flags')}</h5>
@@ -102,12 +102,14 @@ function Flags ({ className = '', flags: { isCouncil, isDevelopment, isExternal,
           />
         )}
       </div>
-    </div>
+    </StyledDiv>
   );
 }
 
-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);

packages/page-accounts/src/Sidebar/Judgements.tsx

@@ -38,7 +38,7 @@ function Judgements ({ address, className = '' }: Props): React.ReactElement<Pro
   }
 
   return (
-    <div
+    <StyledDiv
       className={className}
       data-testid='judgements'
     >
@@ -48,11 +48,11 @@ function Judgements ({ address, className = '' }: Props): React.ReactElement<Pro
           key={`${address}${judgement.judgementName}`}
         />
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-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);

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<Props> {
@@ -28,7 +29,7 @@ function FullSidebar ({ address, className = '', dataTestId, onClose, onUpdateNa
   const ref = useRef<HTMLDivElement>(null);
 
   return (
-    <Sidebar
+    <StyledSidebar
       className={`${className}${inEditMode ? ' inEditMode' : ''}`}
       dataTestId={dataTestId}
       onClose={onClose}
@@ -65,11 +66,11 @@ function FullSidebar ({ address, className = '', dataTestId, onClose, onUpdateNa
           type='address'
         />
       </section>
-    </Sidebar>
+    </StyledSidebar>
   );
 }
 
-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);

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<HTMLDivElement>;
 }
 

packages/page-accounts/src/Vanity/Match.tsx

@@ -36,7 +36,7 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo
   );
 
   return (
-    <tr className={className}>
+    <StyledTr className={className}>
       <td
         className='number'
         colSpan={2}
@@ -65,11 +65,11 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo
           onClick={_onRemove}
         />
       </td>
-    </tr>
+    </StyledTr>
   );
 }
 
-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);

packages/page-accounts/src/Vanity/index.tsx

@@ -187,7 +187,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
   );
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <div className='ui--row'>
         <Input
           autoFocus
@@ -260,11 +260,11 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
           type={type}
         />
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-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);

packages/page-accounts/src/index.tsx

@@ -44,16 +44,10 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
       />
       <Switch>
         <Route path={`${basePath}/vanity`}>
-          <Vanity
-            basePath={basePath}
-            onStatusChange={onStatusChange}
-          />
+          <Vanity onStatusChange={onStatusChange} />
         </Route>
         <Route>
-          <Accounts
-            basePath={basePath}
-            onStatusChange={onStatusChange}
-          />
+          <Accounts onStatusChange={onStatusChange} />
         </Route>
       </Switch>
     </main>

packages/page-accounts/src/modals/Create.tsx

@@ -242,7 +242,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
   );
 
   return (
-    <Modal
+    <StyledModal
       className={className}
       header={t<string>('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
           </>
         )}
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-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);

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 (
-    <Modal
+    <StyledModal
       className={className}
       header={t<string>('Register identity')}
       onClose={onClose}
@@ -251,12 +251,14 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React
           tx={api.tx.identity.setIdentity}
         />
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-export default React.memo(styled(IdentityMain)`
+const StyledModal = styled(Modal)`
   .toggle-Wrap {
     position: relative;
   }
-`);
+`;
+
+export default React.memo(IdentityMain);

packages/page-accounts/src/modals/MultisigApprove.tsx

@@ -163,7 +163,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
   const isAye = type === 'aye';
 
   return (
-    <Modal
+    <StyledModal
       className={className}
       header={t<string>('Pending call hashes')}
       onClose={onClose}
@@ -284,13 +284,15 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
           onStart={onClose}
         />
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-export default React.memo(styled(MultisigApprove)`
+const StyledModal = styled(Modal)`
   .tipToggle {
     width: 100%;
     text-align: right;
   }
-`);
+`;
+
+export default React.memo(MultisigApprove);

packages/page-accounts/src/modals/MultisigCreate.tsx

@@ -153,7 +153,7 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
   const isValid = isNameValid && isThresholdValid;
 
   return (
-    <Modal
+    <StyledModal
       className={className}
       header={t<string>('Add multisig')}
       onClose={onClose}
@@ -252,13 +252,15 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
           onClick={_createMultisig}
         />
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-export default React.memo(styled(Multisig)`
+const StyledModal = styled(Modal)`
   .signaturesFileToggle {
     width: 100%;
     text-align: right;
   }
-`);
+`;
+
+export default React.memo(Multisig);

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 (
-    <Modal
+    <StyledModal
       className={className}
       header={t<string>('Proxy overview')}
       onClose={onClose}
@@ -323,11 +323,11 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_
           onStart={onClose}
         />
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-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);

packages/page-accounts/src/modals/Qr.tsx

@@ -117,7 +117,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
   );
 
   return (
-    <Modal
+    <StyledModal
       className={className}
       header={t<string>('Add account via Qr')}
       onClose={onClose}
@@ -178,13 +178,15 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
           onClick={_onSave}
         />
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-export default React.memo(styled(QrModal)`
+const StyledModal = styled(Modal)`
   .qr-wrapper {
     margin: 0 auto;
     max-width: 30rem;
   }
-`);
+`;
+
+export default React.memo(QrModal);

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 (
-    <Modal
+    <StyledModal
       className='app--accounts-Modal'
       header={t<string>('Send funds')}
       onClose={onClose}
@@ -218,11 +219,11 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
           }
         />
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-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);

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;

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(<AccountOverview />, 'Account-');
+    super(
+      <AccountOverview
+        onStatusChange={NOOP_CHANGE}
+      />,
+      'Account-'
+    );
   }
 
   async getAccountRows (): Promise<AccountRow[]> {

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);

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<Props> {
@@ -45,7 +50,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
   }, [allAddresses, favorites]);
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       {isCreateOpen && (
         <CreateModal
           onClose={toggleCreate}
@@ -84,12 +89,14 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           />
         ))}
       </Table>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Overview)`
+const StyledDiv = styled.div`
   .summary-box-contacts {
     align-items: center;
   }
-`);
+`;
+
+export default React.memo(Overview);

packages/page-addresses/src/index.tsx

@@ -30,10 +30,7 @@ function AddressesApp ({ basePath, onStatusChange }: Props): React.ReactElement<
       />
       <Switch>
         <Route>
-          <Contacts
-            basePath={basePath}
-            onStatusChange={onStatusChange}
-          />
+          <Contacts onStatusChange={onStatusChange} />
         </Route>
       </Switch>
     </main>

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(<AddressOverview />, 'Address-');
+    super(
+      <AddressOverview
+        onStatusChange={NOOP_CHANGE}
+      />,
+      'Address-'
+    );
   }
 
   async getAddressesRows (): Promise<Row[]> {