prepare disabling button based on form validation

src/components/atoms/Button.module.scss

@@ -37,10 +37,9 @@
     }
 
     &:disabled {
-        color: rgba($brand-white, .7);
         cursor: not-allowed;
         pointer-events: none;
-        opacity: .8;
+        opacity: .5;
     }
 }
 

src/components/atoms/Button.tsx

@@ -9,6 +9,7 @@ interface ButtonProps {
     link?: boolean
     href?: string
     onClick?: any
+    disabled?: boolean
 }
 
 export default class Button extends PureComponent<ButtonProps, any> {

src/routes/Publish/Step.tsx

@@ -26,7 +26,17 @@ interface StepProps {
     content?: string
 }
 
-export default class Step extends PureComponent<StepProps, {}> {
+interface StepState {
+    inputInvalid: boolean
+}
+
+export default class Step extends PureComponent<StepProps, StepState> {
+    public state = {
+        // TODO: manipulate with some form validation for every step,
+        // should be 'true' by default here
+        inputInvalid: false
+    }
+
     public previousButton() {
         let { currentStep, prev } = this.props
 
@@ -42,9 +52,14 @@ export default class Step extends PureComponent<StepProps, {}> {
 
     public nextButton() {
         let { currentStep, next, totalSteps } = this.props
+        const { inputInvalid } = this.state
 
         if (currentStep < totalSteps) {
-            return <Button onClick={next}>Next →</Button>
+            return (
+                <Button disabled={inputInvalid} onClick={next}>
+                    Next →
+                </Button>
+            )
         }
         return null
     }

src/routes/Publish/index.tsx

@@ -108,7 +108,8 @@ class Publish extends Component<{}, PublishState> {
             publishingError: '',
             isPublishing: true
         })
-        const account = await this.context.ocean.getAccounts()
+        const { ocean } = this.context
+        const account = await ocean.getAccounts()
         const newAsset = {
             // OEP-08 Attributes
             // https://github.com/oceanprotocol/OEPs/tree/master/8
@@ -138,10 +139,7 @@ class Publish extends Component<{}, PublishState> {
         }
 
         try {
-            const asset = await this.context.ocean.registerAsset(
-                newAsset,
-                account[0]
-            )
+            const asset = await ocean.registerAsset(newAsset, account[0])
             this.setState({
                 publishedDid: asset.id,
                 isPublished: true