Swap to React 18 createRoot (#7397)

* Swap to React 18 createRoot

* npols\0

package.json

@@ -99,7 +99,7 @@
     "@polkadot/hw-ledger": "^9.0.1",
     "@polkadot/keyring": "^9.0.1",
     "@polkadot/networks": "^9.0.1",
-    "@polkadot/phishing": "^0.11.56",
+    "@polkadot/phishing": "^0.11.58",
     "@polkadot/rpc-augment": "^8.1.1",
     "@polkadot/rpc-core": "^8.1.1",
     "@polkadot/rpc-provider": "^8.1.1",

packages/apps-electron/src/index.tsx

@@ -7,7 +7,7 @@ import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/react-components/i18n';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import Root from '@polkadot/apps/Root';
 
@@ -23,10 +23,9 @@ if (!rootElement) {
 
 const store = new RemoteElectronStore(electronMainApi.accountStore);
 
-ReactDOM.render(
+createRoot(rootElement).render(
   <Root
     isElectron
     store={store}
-  />,
-  rootElement
+  />
 );

packages/apps/src/index.tsx

@@ -8,7 +8,7 @@ import '@polkadot/react-components/i18n';
 import '@polkadot/api-augment/substrate';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import Root from './Root';
 
@@ -19,7 +19,6 @@ if (!rootElement) {
   throw new Error(`Unable to find element with id '${rootId}'`);
 }
 
-ReactDOM.render(
-  <Root isElectron={false} />,
-  rootElement
+createRoot(rootElement).render(
+  <Root isElectron={false} />
 );

packages/page-accounts/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@polkadot/hw-ledger": "^9.0.1",
-    "@polkadot/phishing": "^0.11.56",
+    "@polkadot/phishing": "^0.11.58",
     "@polkadot/react-components": "^0.112.2-28",
     "@polkadot/react-hooks": "^0.112.2-28",
     "@polkadot/util": "^9.0.1",

packages/react-components/src/AccountName.tsx

@@ -32,7 +32,7 @@ interface Props {
 
 type AddrMatcher = (addr: unknown) => string | null;
 
-function createFullMatcher (partial: string, name: string): AddrMatcher {
+function createAllMatcher (partial: string, name: string): AddrMatcher {
   const test = registry.createType('AccountId', stringToU8a(`modlpy/${partial}`.padEnd(32, '\0')));
 
   return (addr: unknown) =>
@@ -58,10 +58,10 @@ function createU32Matcher (partial: string, name: string): AddrMatcher {
 }
 
 const MATCHERS: AddrMatcher[] = [
-  createFullMatcher('socie', 'Society'),
-  createFullMatcher('trsry', 'Treasury'),
+  createAllMatcher('socie', 'Society'),
+  createAllMatcher('trsry', 'Treasury'),
   createU32Matcher('cfund', 'Crowdloan'),
-  createU32Matcher('npols', 'Pool')
+  createU32Matcher('npols\0', 'Pool')
 ];
 
 const displayCache = new Map<string, React.ReactNode>();

packages/react-components/src/InputAddressMulti/SelectedDrag.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { Draggable, DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { PORTAL_ID } from '../../../apps/src/Apps';
 import AddressToggle from '../AddressToggle';
@@ -14,7 +14,7 @@ interface Props {
   onDeselect: (index: number) => void;
 }
 
-const portal = document.getElementById(PORTAL_ID) as Element;
+const portal = document.getElementById(PORTAL_ID) as HTMLElement;
 
 function Selected ({ address, index, onDeselect }: Props): React.ReactElement<Props> {
   return (
@@ -41,7 +41,7 @@ function Selected ({ address, index, onDeselect }: Props): React.ReactElement<Pr
         );
 
         return snapshot.isDragging
-          ? ReactDOM.createPortal(element, portal)
+          ? createRoot(portal).render(element) as unknown as React.ReactElement
           : element;
       }}
     </Draggable>

packages/react-components/src/Tooltip.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 
@@ -45,7 +45,7 @@ function Tooltip ({ className = '', clickable = false, effect = 'solid', offset,
     };
   }, [tooltipContainer]);
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <ReactTooltip
       className={`ui--Tooltip ${className}`}
       clickable={clickable}

yarn.lock

@@ -2666,7 +2666,7 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.17.9
     "@polkadot/hw-ledger": ^9.0.1
-    "@polkadot/phishing": ^0.11.56
+    "@polkadot/phishing": ^0.11.58
     "@polkadot/react-components": ^0.112.2-28
     "@polkadot/react-hooks": ^0.112.2-28
     "@polkadot/test-support": 0.112.2-28
@@ -3240,15 +3240,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/phishing@npm:^0.11.56":
-  version: 0.11.56
-  resolution: "@polkadot/phishing@npm:0.11.56"
+"@polkadot/phishing@npm:^0.11.58":
+  version: 0.11.58
+  resolution: "@polkadot/phishing@npm:0.11.58"
   dependencies:
     "@babel/runtime": ^7.17.9
     "@polkadot/util": ^9.0.1
     "@polkadot/util-crypto": ^9.0.1
     "@polkadot/x-fetch": ^9.0.1
-  checksum: c6b1a4a23f9267a0dc45efa8a5432c3c71b4701efd3c29d98fa3c91c49aba73db8c33d1ef04ff1f1d2510129b092d1da779a51f3093c102332ede7c025fdad94
+  checksum: 7d513ba6141e8619cbbe336e7b1c95f19c44e7735dccd40d4467fa57ad0b23d83dc5bd8b4325586a173db5facec138bf9606bc4c08d3f33da65b5a2b5da30983
   languageName: node
   linkType: hard