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,22 +136,24 @@ export default class AssetFile extends PureComponent<
                 </ul>
 
                 {isLoading ? (
-                    <Spinner
+                    <Spinner message={messages[step]} />
-                        message={
-                            step === null ? messages.start : messages[step]
-                        }
-                    />
                 ) : (
-                    <Button
+                    <Market.Consumer>
-                        primary
+                        {market => (
-                        className={styles.buttonMain}
+                            <Button
-                        // weird 0 hack so TypeScript is happy
+                                primary
-                        onClick={() => this.purchaseAsset(ddo, index || 0)}
+                                className={styles.buttonMain}
-                        disabled={!isLogged}
+                                // weird 0 hack so TypeScript is happy
-                        name="Download"
+                                onClick={() =>
-                    >
+                                    this.purchaseAsset(ddo, index || 0)
-                        Get file
+                                }
-                    </Button>
+                                disabled={!isLogged || !market.networkMatch}
+                                name="Download"
+                            >
+                                Get file
+                            </Button>
+                        )}
+                    </Market.Consumer>
                 )}
 
                 {error !== '' && <div className={styles.error}>{error}</div>}
@@ -157,5 +161,3 @@ export default class AssetFile extends PureComponent<
         )
     }
 }
-
-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,23 +154,26 @@ export default class Step extends PureComponent<StepProps, {}> {
                     {this.nextButton()}
 
                     {lastStep && (
-                        <Button
+                        <Market.Consumer>
-                            disabled={
+                            {market => (
-                                !this.context.isLogged ||
+                                <Button
-                                this.props.state.isPublishing
+                                    disabled={
-                            }
+                                        !this.context.isLogged ||
-                            primary
+                                        !market.networkMatch ||
-                        >
+                                        this.props.state.isPublishing
-                            Register asset
+                                    }
-                        </Button>
+                                    primary
+                                >
+                                    Register asset
+                                </Button>
+                            )}
+                        </Market.Consumer>
                     )}
                 </div>
                 <div className={styles.account}>
-                    <Web3message />
+                    {!lastStep && <Web3message />}
                 </div>
             </>
         )
     }
 }
-
-Step.contextType = User