diff --git a/package.json b/package.json index 5a19a702..aeb06b62 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,8 @@ "devDependencies": { "@babel/core": "^7.8.7", "@babel/runtime": "^7.8.7", - "@polkadot/dev": "^0.50.31", - "@polkadot/ts": "^0.3.8", + "@polkadot/dev": "^0.50.32", + "@polkadot/ts": "^0.3.9", "babel-plugin-transform-vue-template": "^0.4.2", "empty": "^0.10.1", "react": "^16.13.0", diff --git a/packages/react-identicon/src/Identicon.tsx b/packages/react-identicon/src/Identicon.tsx index 5d3d5681..a7168475 100644 --- a/packages/react-identicon/src/Identicon.tsx +++ b/packages/react-identicon/src/Identicon.tsx @@ -60,7 +60,7 @@ const Wrapper = styled.div` } `; -export default class IdentityIcon extends React.PureComponent { +class BaseIcon extends React.PureComponent { public state: State = { address: '', publicKey: '0x' @@ -69,10 +69,10 @@ export default class IdentityIcon extends React.PureComponent { private static prefix?: Prefix = undefined; public static setDefaultPrefix (prefix: Prefix): void { - IdentityIcon.prefix = prefix; + BaseIcon.prefix = prefix; } - public static getDerivedStateFromProps ({ prefix = IdentityIcon.prefix, value }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ prefix = BaseIcon.prefix, value }: Props, prevState: State): State | null { try { const address = isU8a(value) || isHex(value) ? encodeAddress(value, prefix) @@ -140,3 +140,9 @@ export default class IdentityIcon extends React.PureComponent { } } } + +function Identicon (props: Props): React.ReactElement { + return ; +} + +export default React.memo(Identicon); diff --git a/packages/react-qr/src/DisplayAddress.tsx b/packages/react-qr/src/DisplayAddress.tsx index b063aff5..bcb11c5d 100644 --- a/packages/react-qr/src/DisplayAddress.tsx +++ b/packages/react-qr/src/DisplayAddress.tsx @@ -4,8 +4,7 @@ import { BaseProps } from './types'; -import React from 'react'; -import { xxhashAsHex } from '@polkadot/util-crypto'; +import React, { useEffect, useState } from 'react'; import { createAddressPayload } from './util'; import QrDisplay from './Display'; @@ -15,44 +14,26 @@ interface Props extends BaseProps { genesisHash: string; } -interface State { - data: Uint8Array | null; - dataHash: string | null; -} +function DisplayExtrinsic ({ address, className, genesisHash, size, style }: Props): React.ReactElement | null { + const [data, setData] = useState(null); -export default class DisplayExtrinsic extends React.PureComponent { - public state: State = { - data: null, - dataHash: null - }; + useEffect((): void => { + setData(createAddressPayload(address, genesisHash)); + }, [address, genesisHash]); - public static getDerivedStateFromProps ({ address, genesisHash }: Props, prevState: State): State | null { - const data = createAddressPayload(address, genesisHash); - const dataHash = xxhashAsHex(data); - - if (dataHash === prevState.dataHash) { - return null; - } - - return { data, dataHash }; + if (!data) { + return null; } - public render (): React.ReactNode { - const { className, size, style } = this.props; - const { data } = this.state; - - if (!data) { - return null; - } - - return ( - - ); - } + return ( + + ); } + +export default React.memo(DisplayExtrinsic); diff --git a/packages/react-qr/src/DisplayPayload.tsx b/packages/react-qr/src/DisplayPayload.tsx index 02d216ee..a96f4f05 100644 --- a/packages/react-qr/src/DisplayPayload.tsx +++ b/packages/react-qr/src/DisplayPayload.tsx @@ -4,8 +4,7 @@ import { BaseProps } from './types'; -import React from 'react'; -import { xxhashAsHex } from '@polkadot/util-crypto'; +import React, { useEffect, useState } from 'react'; import { createSignPayload } from './util'; import QrDisplay from './Display'; @@ -16,43 +15,25 @@ interface Props extends BaseProps { payload: Uint8Array; } -interface State { - data: Uint8Array | null; - dataHash: string | null; -} +function DisplayPayload ({ address, className, cmd, payload, size, style }: Props): React.ReactElement | null { + const [data, setData] = useState(null); -export default class DisplayPayload extends React.PureComponent { - public state: State = { - data: null, - dataHash: null - }; + useEffect((): void => { + setData(createSignPayload(address, cmd, payload)); + }, [address, cmd, payload]); - public static getDerivedStateFromProps ({ address, cmd, payload }: Props, prevState: State): State | null { - const data = createSignPayload(address, cmd, payload); - const dataHash = xxhashAsHex(data); - - if (dataHash === prevState.dataHash) { - return null; - } - - return { data, dataHash }; + if (!data) { + return null; } - public render (): React.ReactNode { - const { className, size, style } = this.props; - const { data } = this.state; - - if (!data) { - return null; - } - - return ( - - ); - } + return ( + + ); } + +export default React.memo(DisplayPayload); diff --git a/yarn.lock b/yarn.lock index be2c9413..212cac38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2862,9 +2862,9 @@ __metadata: languageName: node linkType: hard -"@polkadot/dev@npm:^0.50.31": - version: 0.50.31 - resolution: "@polkadot/dev@npm:0.50.31" +"@polkadot/dev@npm:^0.50.32": + version: 0.50.32 + resolution: "@polkadot/dev@npm:0.50.32" dependencies: "@babel/cli": ^7.8.4 "@babel/core": ^7.8.7 @@ -2946,7 +2946,7 @@ __metadata: polkadot-exec-typedoc: scripts/polkadot-exec-typedoc.js polkadot-exec-vuepress: scripts/polkadot-exec-vuepress.js polkadot-exec-webpack: scripts/polkadot-exec-webpack.js - checksum: 2/33b76f85de371410f6e44b5281ba4bfcf8d738cda393097cb1b0de213e0a819fa48c7efc177365f02371c079f72fd0b56146c31426d91d1de74e633be333b864 + checksum: 2/3db2d2d29ff45c9104e5e477f6f8423a61efef57cb87a12ae7354728b3ed825f1b08a4739a803744b205836811b550b6afe5c06393282e21b63076f492a9308e languageName: node linkType: hard @@ -2996,8 +2996,8 @@ __metadata: dependencies: "@babel/runtime": ^7.8.7 "@polkadot/keyring": ^2.6.2 - "@polkadot/ui-settings": 0.52.0-beta.7 - "@polkadot/ui-shared": 0.52.0-beta.7 + "@polkadot/ui-settings": 0.52.0-beta.8 + "@polkadot/ui-shared": 0.52.0-beta.8 "@polkadot/util": ^2.6.2 "@polkadot/util-crypto": ^2.6.2 "@types/react-copy-to-clipboard": ^4.3.0 @@ -3033,12 +3033,12 @@ __metadata: languageName: unknown linkType: soft -"@polkadot/reactnative-identicon@0.52.0-beta.7, @polkadot/reactnative-identicon@workspace:packages/reactnative-identicon": +"@polkadot/reactnative-identicon@0.52.0-beta.8, @polkadot/reactnative-identicon@workspace:packages/reactnative-identicon": version: 0.0.0-use.local resolution: "@polkadot/reactnative-identicon@workspace:packages/reactnative-identicon" dependencies: "@babel/runtime": ^7.8.7 - "@polkadot/ui-shared": 0.52.0-beta.7 + "@polkadot/ui-shared": 0.52.0-beta.8 "@polkadot/util-crypto": ^2.6.2 "@types/react-native": ^0.61.22 react-native-svg: ^12.0.3 @@ -3049,12 +3049,12 @@ __metadata: languageName: unknown linkType: soft -"@polkadot/ts@npm:^0.3.8": - version: 0.3.8 - resolution: "@polkadot/ts@npm:0.3.8" +"@polkadot/ts@npm:^0.3.9": + version: 0.3.9 + resolution: "@polkadot/ts@npm:0.3.9" dependencies: "@types/chrome": ^0.0.100 - checksum: 2/252e254c4f2fef159623c98dc4e1fe7f4f47ebff9ca6ae0b6682b944fdb1221e3d0cd2dd735b44b5ea65b8d1d7ec6a28ad01edad471d8fe5bb80928b01496024 + checksum: 2/d5c2b8ed941e08e10beca5ca117da60ad2aef68e469160eff7e669134050c906b0cab7d72371910b39a4013ea916fc99308f8bf3865c11cdea53ab7dcf0c58dd languageName: node linkType: hard @@ -3082,7 +3082,7 @@ __metadata: languageName: unknown linkType: soft -"@polkadot/ui-keyring@0.52.0-beta.7, @polkadot/ui-keyring@workspace:packages/ui-keyring": +"@polkadot/ui-keyring@0.52.0-beta.8, @polkadot/ui-keyring@workspace:packages/ui-keyring": version: 0.0.0-use.local resolution: "@polkadot/ui-keyring@workspace:packages/ui-keyring" dependencies: @@ -3109,7 +3109,7 @@ __metadata: languageName: unknown linkType: soft -"@polkadot/ui-settings@0.52.0-beta.7, @polkadot/ui-settings@workspace:packages/ui-settings": +"@polkadot/ui-settings@0.52.0-beta.8, @polkadot/ui-settings@workspace:packages/ui-settings": version: 0.0.0-use.local resolution: "@polkadot/ui-settings@workspace:packages/ui-settings" dependencies: @@ -3122,7 +3122,7 @@ __metadata: languageName: unknown linkType: soft -"@polkadot/ui-shared@0.52.0-beta.7, @polkadot/ui-shared@workspace:packages/ui-shared": +"@polkadot/ui-shared@0.52.0-beta.8, @polkadot/ui-shared@workspace:packages/ui-shared": version: 0.0.0-use.local resolution: "@polkadot/ui-shared@workspace:packages/ui-shared" dependencies: @@ -3175,7 +3175,7 @@ __metadata: resolution: "@polkadot/vue-identicon@workspace:packages/vue-identicon" dependencies: "@babel/runtime": ^7.8.7 - "@polkadot/ui-shared": 0.52.0-beta.7 + "@polkadot/ui-shared": 0.52.0-beta.8 "@polkadot/util-crypto": ^2.6.2 jdenticon: 2.2.0 vue: ^2.6.11 @@ -8814,9 +8814,9 @@ __metadata: "@babel/core": ^7.8.7 "@babel/runtime": ^7.8.7 "@polkadot/keyring": ^2.6.2 - "@polkadot/reactnative-identicon": 0.52.0-beta.7 - "@polkadot/ui-keyring": 0.52.0-beta.7 - "@polkadot/ui-settings": 0.52.0-beta.7 + "@polkadot/reactnative-identicon": 0.52.0-beta.8 + "@polkadot/ui-keyring": 0.52.0-beta.8 + "@polkadot/ui-settings": 0.52.0-beta.8 "@polkadot/util": ^2.6.2 "@polkadot/util-crypto": ^2.6.2 "@react-native-community/async-storage": ^1.8.1 @@ -17663,8 +17663,8 @@ __metadata: dependencies: "@babel/core": ^7.8.7 "@babel/runtime": ^7.8.7 - "@polkadot/dev": ^0.50.31 - "@polkadot/ts": ^0.3.8 + "@polkadot/dev": ^0.50.32 + "@polkadot/ts": ^0.3.9 babel-plugin-transform-vue-template: ^0.4.2 empty: ^0.10.1 react: ^16.13.0