prepare outputting more status messages from network

client/src/App.tsx

@@ -40,6 +40,7 @@ interface AppState {
     web3: Web3
     ocean: {}
     startLogin: () => void
+    message: string
 }
 
 class App extends Component<{}, AppState> {
@@ -94,7 +95,8 @@ class App extends Component<{}, AppState> {
         account: '',
         ocean: {},
         startLogin: this.startLogin,
-        requestFromFaucet: this.requestFromFaucet
+        requestFromFaucet: this.requestFromFaucet,
+        message: 'Connecting to Ocean...'
     }
 
     public async componentDidMount() {
@@ -185,7 +187,7 @@ class App extends Component<{}, AppState> {
                             <main className={styles.main}>
                                 {this.state.isLoading ? (
                                     <div className={styles.loader}>
-                                        <Spinner message="Connecting to Ocean..." />
+                                        <Spinner message={this.state.message} />
                                     </div>
                                 ) : (
                                     <Routes />

client/src/routes/Details/AssetFilesDetails.tsx

@@ -11,13 +11,26 @@ interface AssetFilesDetailsProps {
     ddo: any
 }
 
+interface AssetFilesDetailsState {
+    isLoading: boolean
+    error: string
+    message: string
+}
+
 export default class AssetFilesDetails extends PureComponent<
-    AssetFilesDetailsProps
+    AssetFilesDetailsProps,
+    AssetFilesDetailsState
 > {
-    public state = { isLoading: false, error: null }
+    public state = {
+        isLoading: false,
+        error: '',
+        message: 'Decrypting files, please sign with your wallet...'
+    }
+
+    private resetState = () => this.setState({ isLoading: true, error: '' })
 
     private purchaseAsset = async (ddo: any) => {
-        this.setState({ isLoading: true, error: null })
+        this.resetState()
 
         const { ocean } = this.context
         const accounts = await ocean.accounts.list()
@@ -69,7 +82,7 @@ export default class AssetFilesDetails extends PureComponent<
                 </div>
 
                 {this.state.isLoading ? (
-                    <Spinner message="Decrypting files, please sign with your wallet..." />
+                    <Spinner message={this.state.message} />
                 ) : (
                     <Button
                         primary
@@ -80,7 +93,7 @@ export default class AssetFilesDetails extends PureComponent<
                     </Button>
                 )}
 
-                {this.state.error && (
+                {this.state.error !== '' && (
                     <div className={styles.error}>{this.state.error}</div>
                 )}
             </>