diff --git a/packages/concordia-app/src/components/LoadingContainer.jsx b/packages/concordia-app/src/components/LoadingContainer.jsx
index 0260132..f8cda5f 100644
--- a/packages/concordia-app/src/components/LoadingContainer.jsx
+++ b/packages/concordia-app/src/components/LoadingContainer.jsx
@@ -1,167 +1,152 @@
-import React, { Children, Component } from 'react';
-import { connect } from 'react-redux';
-
+import React, { Children } from 'react';
import { breezeConstants } from '@ezerous/breeze';
-
+import { useSelector } from 'react-redux';
import LoadingComponent from './LoadingComponent';
// CSS
import '../assets/css/loading-component.css';
-class LoadingContainer extends Component {
- render() {
- const {
- web3: {
- status, networkId, networkFailed, accountsFailed,
- },
- drizzleStatus: {
- initializing,
- failed,
- },
- contractInitialized, contractDeployed, ipfsStatus, orbitStatus, userFetched, children,
- } = this.props;
-
- if ((status === 'initializing' || !networkId)
- && !networkFailed) {
- return (
-
- );
- }
+const LoadingContainer = ({ children }) => {
+ const initializing = useSelector((state) => state.drizzleStatus.initializing);
+ const failed = useSelector((state) => state.drizzleStatus.failed);
+ const ipfsStatus = useSelector((state) => state.ipfs.status);
+ const orbitStatus = useSelector((state) => state.orbit.status);
+ const web3Status = useSelector((state) => state.web3.status);
+ const web3NetworkId = useSelector((state) => state.web3.networkId);
+ const web3NetworkFailed = useSelector((state) => state.web3.networkFailed);
+ const web3AccountsFailed = useSelector((state) => state.web3.accountsFailed);
+ const contractInitialized = useSelector((state) => state.contracts.Forum.initialized);
+ const contractDeployed = useSelector((state) => state.contracts.Forum.deployed);
+ const userFetched = useSelector((state) => state.user.address);
+
+ if ((web3Status === 'initializing' || !web3NetworkId)
+ && !web3NetworkFailed) {
+ return (
+
+ );
+ }
- if (status === 'failed' || networkFailed) {
- return (
-
- );
- }
+ if (web3Status === 'failed' || web3NetworkFailed) {
+ return (
+
+ );
+ }
- if (status === 'initialized' && accountsFailed) {
- return (
-
- );
- }
+ if (web3Status === 'initialized' && web3AccountsFailed) {
+ return (
+
+ );
+ }
- if (initializing
+ if (initializing
|| (!failed && !contractInitialized && contractDeployed)) {
- return (
-
- );
- }
-
- if (!contractDeployed) {
- return (
-
- );
- }
+ return (
+
+ );
+ }
- if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
- return (
-
- );
- }
+ if (!contractDeployed) {
+ return (
+
+ );
+ }
- if (ipfsStatus === breezeConstants.STATUS_FAILED) {
- return (
-
- );
- }
+ if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
+ return (
+
+ );
+ }
- if (orbitStatus === breezeConstants.STATUS_INITIALIZING) {
- const message = process.env.NODE_ENV === 'development'
- ? 'If needed, please sign the transaction in MetaMask to create the databases.'
- : 'Please sign the transaction in MetaMask to create the databases.';
- return (
-
- );
- }
+ if (ipfsStatus === breezeConstants.STATUS_FAILED) {
+ return (
+
+ );
+ }
- if (orbitStatus === breezeConstants.STATUS_FAILED) {
- return (
-
- );
- }
+ if (orbitStatus === breezeConstants.STATUS_INITIALIZING) {
+ const message = process.env.NODE_ENV === 'development'
+ ? 'If needed, please sign the transaction in MetaMask to create the databases.'
+ : 'Please sign the transaction in MetaMask to create the databases.';
+ return (
+
+ );
+ }
- if (!userFetched) {
- return (
-
- );
- }
+ if (orbitStatus === breezeConstants.STATUS_FAILED) {
+ return (
+
+ );
+ }
- return Children.only(children);
+ if (!userFetched) {
+ return (
+
+ );
}
-}
-const mapStateToProps = (state) => ({
- drizzleStatus: state.drizzleStatus,
- breezeStatus: state.breezeStatus,
- ipfsStatus: state.ipfs.status,
- orbitStatus: state.orbit.status,
- web3: state.web3,
- accounts: state.accounts,
- contractInitialized: state.contracts.Forum.initialized,
- contractDeployed: state.contracts.Forum.deployed,
- userFetched: state.user.address,
-});
+ return Children.only(children);
+};
-export default connect(mapStateToProps)(LoadingContainer);
+export default LoadingContainer;