Remove unsafe React methods (#1520)

* unsafe react methods

* Update sui to 0.88.0

packages/app-contracts/src/ABI.tsx

@@ -55,20 +55,15 @@ class ABI extends React.PureComponent<Props, State> {
     };
   }
 
-  public UNSAFE_componentWillReceiveProps ({ contractAbi, isError, isRequired }: Props): void {
+  public static getDerivedStateFromProps ({ contractAbi }: Props): Pick<State, never> | 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<Props, State> {
   }
 }
 
-export default translate(styled(ABI)`
+export default translate(styled(ABI as React.ComponentClass<Props, State>)`
   min-height: 4rem;
 `);

packages/app-contracts/src/Deploy.tsx

@@ -52,19 +52,69 @@ class Deploy extends ContractModal<Props, State> {
       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<State, never> {
+    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<State> => {
+    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<State, never> => {
+    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<Props, State> {
     );
   }
 
-  private getContractAbiState = (abi: string | null | undefined, contractAbi: Abi | null = null): Partial<State> => {
-    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<State, never> => {
-    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<Props, State> {
 
   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)
     );
   }
 

packages/app-contracts/src/Modal.tsx

@@ -49,13 +49,6 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
 
   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<P extends ContractModalProps, S extends ContractModalState>
 
   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 => {

packages/app-sudo/src/SetKey.tsx

@@ -36,10 +36,11 @@ class SetKey extends React.PureComponent<Props, State> {
     };
   }
 
-  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<State, never> {
+    if (sudoKey && (!state.selected || sudoKey !== state.selected)) {
+      return { selected: sudoKey };
     }
+    return {};
   }
 
   public render (): React.ReactNode {
@@ -110,7 +111,7 @@ class SetKey extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(styled(SetKey)`
+export default translate(styled(SetKey as React.ComponentClass<Props, State>)`
   align-items: flex-end;
   justify-content: center;
 

packages/app-treasury/src/Overview/Proposal.tsx

@@ -44,10 +44,10 @@ class ProposalDisplay extends React.PureComponent<Props, State> {
     }
   }
 
-  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();
     }
   }

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"
   }

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"