block download/publish when connected to wrong network with MetaMask

client/src/components/templates/Asset/AssetFile.tsx

@@ -3,13 +3,13 @@ import { Logger, DDO, File } from '@oceanprotocol/squid'
 import filesize from 'filesize'
 import Button from '../../atoms/Button'
 import Spinner from '../../atoms/Spinner'
-import { User } from '../../../context'
+import { User, Market } from '../../../context'
 import styles from './AssetFile.module.scss'
 import ReactGA from 'react-ga'
 import cleanupContentType from '../../../utils/cleanupContentType'
 
-export const messages = {
+export const messages: any = {
-    start: 'Decrypting file URL...',
+    99: 'Decrypting file URL...',
     0: '1/3<br />Asking for agreement signature...',
     1: '1/3<br />Agreement initialized.',
     2: '2/3<br />Asking for two payment confirmations...',
@@ -25,24 +25,26 @@ interface AssetFileProps {
 interface AssetFileState {
     isLoading: boolean
     error: string
-    step: number | string | null
+    step: number
 }
 
 export default class AssetFile extends PureComponent<
     AssetFileProps,
     AssetFileState
 > {
+    public static contextType = User
+
     public state = {
         isLoading: false,
         error: '',
-        step: null
+        step: 99
     }
 
     private resetState = () =>
         this.setState({
             isLoading: true,
             error: '',
-            step: null
+            step: 99
         })
 
     private purchaseAsset = async (ddo: DDO, index: number) => {
@@ -134,28 +136,28 @@ export default class AssetFile extends PureComponent<
                 </ul>
 
                 {isLoading ? (
-                    <Spinner
+                    <Spinner message={messages[step]} />
-                        message={
-                            step === null ? messages.start : messages[step]
-                        }
-                    />
                 ) : (
+                    <Market.Consumer>
+                        {market => (
                             <Button
                                 primary
                                 className={styles.buttonMain}
                                 // weird 0 hack so TypeScript is happy
-                        onClick={() => this.purchaseAsset(ddo, index || 0)}
+                                onClick={() =>
-                        disabled={!isLogged}
+                                    this.purchaseAsset(ddo, index || 0)
+                                }
+                                disabled={!isLogged || !market.networkMatch}
                                 name="Download"
                             >
                                 Get file
                             </Button>
                         )}
+                    </Market.Consumer>
+                )}
 
                 {error !== '' && <div className={styles.error}>{error}</div>}
             </div>
         )
     }
 }
-
-AssetFile.contextType = User

client/src/routes/Publish/Step.tsx

@@ -3,7 +3,7 @@ import Input from '../../components/atoms/Form/Input'
 import Label from '../../components/atoms/Form/Label'
 import Row from '../../components/atoms/Form/Row'
 import Button from '../../components/atoms/Button'
-import { User } from '../../context'
+import { User, Market } from '../../context'
 import Files from './Files/'
 import StepRegisterContent from './StepRegisterContent'
 import styles from './Step.module.scss'
@@ -43,6 +43,8 @@ interface StepProps {
 }
 
 export default class Step extends PureComponent<StepProps, {}> {
+    public static contextType = User
+
     public previousButton() {
         const { currentStep, prev } = this.props
 
@@ -152,9 +154,12 @@ export default class Step extends PureComponent<StepProps, {}> {
                     {this.nextButton()}
 
                     {lastStep && (
+                        <Market.Consumer>
+                            {market => (
                                 <Button
                                     disabled={
                                         !this.context.isLogged ||
+                                        !market.networkMatch ||
                                         this.props.state.isPublishing
                                     }
                                     primary
@@ -162,13 +167,13 @@ export default class Step extends PureComponent<StepProps, {}> {
                                     Register asset
                                 </Button>
                             )}
+                        </Market.Consumer>
+                    )}
                 </div>
                 <div className={styles.account}>
-                    <Web3message />
+                    {!lastStep && <Web3message />}
                 </div>
             </>
         )
     }
 }
-
-Step.contextType = User