Assign keys to account menu dividers (#4829)

Author: jacogr

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

@@ -208,7 +208,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
   );
 
   const menuItems = useMemo(() => [
-    createMenuGroup([
+    createMenuGroup('identityGroup', [
       isFunction(api.api.tx.identity?.setIdentity) && !isHardware && (
         <Menu.Item
           key='identityMain'
@@ -242,7 +242,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         </Menu.Item>
       )
     ]),
-    createMenuGroup([
+    createMenuGroup('deriveGroup', [
       !(isExternal || isHardware || isInjected || isMultisig) && (
         <Menu.Item
           key='deriveAccount'
@@ -260,7 +260,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         </Menu.Item>
       )
     ]),
-    createMenuGroup([
+    createMenuGroup('backupGroup', [
       !(isExternal || isHardware || isInjected || isMultisig || isDevelopment) && (
         <Menu.Item
           key='backupJson'
@@ -286,7 +286,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         </Menu.Item>
       )
     ]),
-    isFunction(api.api.tx.recovery?.createRecovery) && createMenuGroup([
+    isFunction(api.api.tx.recovery?.createRecovery) && createMenuGroup('reoveryGroup', [
       !recoveryInfo && (
         <Menu.Item
           key='makeRecoverable'
@@ -302,7 +302,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         {t('Initiate recovery for another')}
       </Menu.Item>
     ]),
-    isFunction(api.api.tx.multisig?.asMulti) && isMultisig && createMenuGroup([
+    isFunction(api.api.tx.multisig?.asMulti) && isMultisig && createMenuGroup('multisigGroup', [
       <Menu.Item
         disabled={!multiInfos || !multiInfos.length}
         key='multisigApprovals'
@@ -311,7 +311,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         {t('Multisig approvals')}
       </Menu.Item>
     ]),
-    isFunction(api.api.query.democracy?.votingOf) && delegation?.accountDelegated && createMenuGroup([
+    isFunction(api.api.query.democracy?.votingOf) && delegation?.accountDelegated && createMenuGroup('undelegateGroup', [
       <Menu.Item
         key='changeDelegate'
         onClick={toggleDelegate}
@@ -325,15 +325,15 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         {t('Undelegate')}
       </Menu.Item>
     ]),
-    isFunction(api.api.query.democracy?.votingOf) && !delegation?.accountDelegated && createMenuGroup([
+    isFunction(api.api.query.democracy?.votingOf) && !delegation?.accountDelegated && createMenuGroup('delegateGroup', [
       <Menu.Item
         key='delegate'
         onClick={toggleDelegate}
       >
         {t('Delegate democracy votes')}
       </Menu.Item>
     ]),
-    isFunction(api.api.query.proxy?.proxies) && createMenuGroup([
+    isFunction(api.api.query.proxy?.proxies) && createMenuGroup('proxyGroup', [
       <Menu.Item
         key='proxy-overview'
         onClick={toggleProxyOverview}
@@ -344,7 +344,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         }
       </Menu.Item>
     ]),
-    isEditable && !api.isDevelopment && createMenuGroup([
+    isEditable && !api.isDevelopment && createMenuGroup('genesisGroup', [
       <ChainLock
         className='accounts--network-toggle'
         genesisHash={genesisHash}

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

@@ -240,7 +240,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
             delegation={delegation}
             filter={filterOn}
             isFavorite={isFavorite}
-            key={account.address}
+            key={`${index}:${account.address}`}
             proxy={proxies?.[index]}
             setBalance={_setBalance}
             toggleFavorite={toggleFavorite}

packages/page-accounts/src/util.tsx

@@ -9,11 +9,11 @@ import React from 'react';
 import { Menu } from '@polkadot/react-components';
 import { keyring } from '@polkadot/ui-keyring';
 
-export function createMenuGroup (items: (React.ReactNode | false | undefined | null)[]): React.ReactNode | null {
+export function createMenuGroup (key: string, items: (React.ReactNode | false | undefined | null)[]): React.ReactNode | null {
   const filtered = items.filter((item): item is React.ReactNode => !!item);
 
   return filtered.length
-    ? <><Menu.Divider />{filtered}</>
+    ? <React.Fragment key={key}><Menu.Divider />{filtered}</React.Fragment>
     : null;
 }