diff --git a/packages/app-contracts/src/ABI.tsx b/packages/app-contracts/src/ABI.tsx index 5fc0f32eb5..a17245e209 100644 --- a/packages/app-contracts/src/ABI.tsx +++ b/packages/app-contracts/src/ABI.tsx @@ -55,20 +55,15 @@ class ABI extends React.PureComponent { }; } - public UNSAFE_componentWillReceiveProps ({ contractAbi, isError, isRequired }: Props): void { + public static getDerivedStateFromProps ({ contractAbi }: Props): Pick | null { if (contractAbi) { - this.setState({ + return { contractAbi, isAbiValid: true, isError: false - }); - } else if (this.props.contractAbi) { - this.setState({ - contractAbi: null, - isAbiValid: false, - isError: isError || isRequired || false - }); + }; } + return null; } public render (): React.ReactNode { @@ -173,6 +168,6 @@ class ABI extends React.PureComponent { } } -export default translate(styled(ABI)` +export default translate(styled(ABI as React.ComponentClass)` min-height: 4rem; `); diff --git a/packages/app-contracts/src/Deploy.tsx b/packages/app-contracts/src/Deploy.tsx index 7fafb44e91..927a6a1164 100644 --- a/packages/app-contracts/src/Deploy.tsx +++ b/packages/app-contracts/src/Deploy.tsx @@ -52,19 +52,69 @@ class Deploy extends ContractModal { endowment: new BN(0), isHashValid: false, params: [], - ...this.getCodeState(props.codeHash) + ...Deploy.getCodeState(props.codeHash) }; this.state = this.defaultState; } - public UNSAFE_componentWillReceiveProps (nextProps: Props, nextState: State): void { - super.UNSAFE_componentWillReceiveProps(nextProps, nextState); - - if (nextProps.codeHash && nextProps.codeHash !== this.props.codeHash) { - this.setState( - this.getCodeState(nextProps.codeHash) - ); + public static getDerivedStateFromProps (props: Props, state: State): Pick { + if (props.codeHash && (!state.codeHash || state.codeHash !== props.codeHash)) { + return Deploy.getCodeState(props.codeHash); } + return {}; + } + + private static getContractAbiState = (abi: string | null | undefined, contractAbi: Abi | null = null): Partial => { + if (contractAbi) { + const args = contractAbi.deploy.args.map(({ name, type }): string => `${name}: ${type}`); + const text = `deploy(${args.join(', ')})`; + + return { + abi, + constructOptions: [{ + key: 'deploy', + text, + value: 'deploy' + }], + contractAbi, + isAbiValid: !!contractAbi, + params: createValues( + contractAbi.deploy.args.map(({ name, type }): { type: TypeDef } => ({ + type: getTypeDef(type, name) + })) + ) + }; + } else { + return { + constructOptions: [] as ConstructOptions, + abi: null, + contractAbi: null, + isAbiSupplied: false, + isAbiValid: false, + params: [] as unknown[] + }; + } + } + + private static getCodeState = (codeHash: string | null = null): Pick => { + if (codeHash) { + const code = store.getCode(codeHash); + + if (code) { + const { contractAbi, json } = code; + + return { + codeHash, + isAbiSupplied: !!contractAbi, + name: `${json.name} (instance)`, + isHashValid: true, + isNameValid: true, + ...Deploy.getContractAbiState(json.abi, contractAbi) + }; + } + } + + return {}; } protected renderContent = (): React.ReactNode => { @@ -166,59 +216,6 @@ class Deploy extends ContractModal { ); } - private getContractAbiState = (abi: string | null | undefined, contractAbi: Abi | null = null): Partial => { - if (contractAbi) { - const args = contractAbi.deploy.args.map(({ name, type }): string => `${name}: ${type}`); - const text = `deploy(${args.join(', ')})`; - - return { - abi, - constructOptions: [{ - key: 'deploy', - text, - value: 'deploy' - }], - contractAbi, - isAbiValid: !!contractAbi, - params: createValues( - contractAbi.deploy.args.map(({ name, type }): { type: TypeDef } => ({ - type: getTypeDef(type, name) - })) - ) - }; - } else { - return { - constructOptions: [] as ConstructOptions, - abi: null, - contractAbi: null, - isAbiSupplied: false, - isAbiValid: false, - params: [] as unknown[] - }; - } - } - - private getCodeState = (codeHash: string | null = null): Pick => { - if (codeHash) { - const code = store.getCode(codeHash); - - if (code) { - const { contractAbi, json } = code; - - return { - codeHash, - isAbiSupplied: !!contractAbi, - name: `${json.name} (instance)`, - isHashValid: true, - isNameValid: true, - ...this.getContractAbiState(json.abi, contractAbi) - }; - } - } - - return {}; - } - private constructCall = (): any[] => { const { codeHash, contractAbi, endowment, gasLimit, params } = this.state; @@ -231,13 +228,13 @@ class Deploy extends ContractModal { protected onAddAbi = (abi: string | null | undefined, contractAbi?: Abi | null): void => { this.setState({ - ...(this.getContractAbiState(abi, contractAbi) as State) + ...(Deploy.getContractAbiState(abi, contractAbi) as State) }); } private onChangeCode = (codeHash: string): void => { this.setState( - this.getCodeState(codeHash) + Deploy.getCodeState(codeHash) ); } diff --git a/packages/app-contracts/src/Modal.tsx b/packages/app-contracts/src/Modal.tsx index 774c5f11da..e0e60c80a6 100644 --- a/packages/app-contracts/src/Modal.tsx +++ b/packages/app-contracts/src/Modal.tsx @@ -49,13 +49,6 @@ class ContractModal

protected isContract?: boolean; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - public UNSAFE_componentWillReceiveProps ({ isOpen }: P, prevState: S): void { - if (isOpen && !this.props.isOpen && !this.state.isBusy) { - this.reset(); - } - } - public render (): React.ReactNode { const { isOpen, t } = this.props; @@ -203,8 +196,12 @@ class ContractModal

protected onClose = (): void => { const { onClose } = this.props; + const { isBusy } = this.state; onClose && onClose(); + if (!isBusy) { + this.reset(); + } } protected onAddAbi = (abi: string | null | undefined, contractAbi: Abi | null = null, isAbiSupplied: boolean = false): void => { diff --git a/packages/app-sudo/src/SetKey.tsx b/packages/app-sudo/src/SetKey.tsx index b20f9b7b95..e934c3025a 100644 --- a/packages/app-sudo/src/SetKey.tsx +++ b/packages/app-sudo/src/SetKey.tsx @@ -36,10 +36,11 @@ class SetKey extends React.PureComponent { }; } - public UNSAFE_componentWillReceiveProps ({ sudoKey = this.props.sudoKey }): void { - if (sudoKey !== this.props.sudoKey) { - this.setState({ selected: sudoKey }); + public static getDerivedStateFromProps ({ sudoKey }: Props, state: State): Pick { + if (sudoKey && (!state.selected || sudoKey !== state.selected)) { + return { selected: sudoKey }; } + return {}; } public render (): React.ReactNode { @@ -110,7 +111,7 @@ class SetKey extends React.PureComponent { } } -export default translate(styled(SetKey)` +export default translate(styled(SetKey as React.ComponentClass)` align-items: flex-end; justify-content: center; diff --git a/packages/app-treasury/src/Overview/Proposal.tsx b/packages/app-treasury/src/Overview/Proposal.tsx index edf8a611a6..0869f0e135 100644 --- a/packages/app-treasury/src/Overview/Proposal.tsx +++ b/packages/app-treasury/src/Overview/Proposal.tsx @@ -44,10 +44,10 @@ class ProposalDisplay extends React.PureComponent { } } - public UNSAFE_componentWillReceiveProps ({ proposal }: Props): void { + public componentDidUpdate ({ proposal }: Props): void { const { onPopulate } = this.props; - if (proposal && !this.props.proposal) { + if (this.props.proposal && !proposal) { onPopulate(); } } diff --git a/packages/react-components/package.json b/packages/react-components/package.json index a676b4b8b1..bd5802ffc2 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -41,7 +41,7 @@ "react-router-dom": "^5.0.0", "react-tooltip": "^3.9.2", "semantic-ui-css": "^2.3.1", - "semantic-ui-react": "^0.87.1", + "semantic-ui-react": "^0.88.0", "store": "^2.0.12", "styled-theming": "^2.2.0" } diff --git a/yarn.lock b/yarn.lock index bf6b497d59..b3eb1b6f8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13549,18 +13549,18 @@ semantic-ui-css@^2.3.1: dependencies: jquery x.* -semantic-ui-react@^0.87.1: - version "0.87.3" - resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.87.3.tgz#59b6e1ca52b202bf6deed4c65e81b170b4a12bf6" - integrity sha512-YJgFYEheeFBMm/epZpIpWKF9glgSShdLPiY8zoUi+KJ0IKtLtbI8RbMD/ELbZkY+SO/IWbK/f/86pWt3PVvMVA== +semantic-ui-react@^0.88.0: + version "0.88.0" + resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.88.0.tgz#7048aad80190b8196efc6e77babde21c50557b83" + integrity sha512-+rr4bKAkJIK4fYdJVY/IcL2waPUHLShUmveQNqsQoT7EOKDEo+cNKkiQMjBQBv2q5OaVlrQAitkXkw5sejncNQ== dependencies: "@babel/runtime" "^7.1.2" "@semantic-ui-react/event-stack" "^3.1.0" classnames "^2.2.6" keyboard-key "^1.0.4" - lodash "^4.17.11" - prop-types "^15.6.2" - react-is "^16.7.0" + lodash "^4.17.15" + prop-types "^15.7.2" + react-is "^16.8.6" react-popper "^1.3.3" shallowequal "^1.1.0"