diff --git a/package.json b/package.json
index 7cbfc6e6e5..983a9b3986 100644
--- a/package.json
+++ b/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",
diff --git a/packages/apps-electron/src/index.tsx b/packages/apps-electron/src/index.tsx
index 9505bfa2bb..465e86f72a 100644
--- a/packages/apps-electron/src/index.tsx
+++ b/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(
,
- rootElement
+ />
);
diff --git a/packages/apps/src/index.tsx b/packages/apps/src/index.tsx
index ecc2ddb0ee..5619f15f40 100644
--- a/packages/apps/src/index.tsx
+++ b/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(
- ,
- rootElement
+createRoot(rootElement).render(
+
);
diff --git a/packages/page-accounts/package.json b/packages/page-accounts/package.json
index c903e22328..e02869f72a 100644
--- a/packages/page-accounts/package.json
+++ b/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",
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 2bf7b3e3e0..5b670ae593 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/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();
diff --git a/packages/react-components/src/InputAddressMulti/SelectedDrag.tsx b/packages/react-components/src/InputAddressMulti/SelectedDrag.tsx
index b940b43c7c..c9092a6999 100644
--- a/packages/react-components/src/InputAddressMulti/SelectedDrag.tsx
+++ b/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 {
return (
@@ -41,7 +41,7 @@ function Selected ({ address, index, onDeselect }: Props): React.ReactElement
diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx
index e2efb54026..df3600140f 100644
--- a/packages/react-components/src/Tooltip.tsx
+++ b/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(