consolidate asset edit form actions

src/components/organisms/AssetActions/Edit/FormActions.module.css

@@ -0,0 +1,20 @@
+.actions {
+  margin-left: -2rem;
+  margin-right: -2rem;
+  border-top: 1px solid var(--border-color);
+  padding: calc(var(--spacer) / 2) var(--spacer) 0;
+  display: flex;
+  justify-content: center;
+}
+
+@media (min-width: 40rem) {
+  .actions {
+    padding-top: var(--spacer);
+  }
+}
+
+.actions a,
+.actions button {
+  margin-left: calc(var(--spacer) / 2);
+  margin-right: calc(var(--spacer) / 2);
+}

src/components/organisms/AssetActions/Edit/FormActions.tsx

@@ -0,0 +1,37 @@
+import { FormikContextType, useFormikContext } from 'formik'
+import React, { ReactElement } from 'react'
+import { AdvancedSettingsForm } from '../../../../models/FormEditCredential'
+import { useAsset } from '../../../../providers/Asset'
+import { useOcean } from '../../../../providers/Ocean'
+import { useWeb3 } from '../../../../providers/Web3'
+import Button from '../../../atoms/Button'
+import styles from './FormActions.module.css'
+
+export default function FormActions({
+  setShowEdit,
+  handleClick
+}: {
+  setShowEdit: (show: boolean) => void
+  handleClick?: () => void
+}): ReactElement {
+  const { accountId } = useWeb3()
+  const { ocean } = useOcean()
+  const { isAssetNetwork } = useAsset()
+  const { isValid }: FormikContextType<Partial<AdvancedSettingsForm>> =
+    useFormikContext()
+
+  return (
+    <footer className={styles.actions}>
+      <Button
+        style="primary"
+        disabled={!ocean || !accountId || !isValid || !isAssetNetwork}
+        onClick={handleClick}
+      >
+        Submit
+      </Button>
+      <Button style="text" onClick={() => setShowEdit(false)}>
+        Cancel
+      </Button>
+    </footer>
+  )
+}

src/components/organisms/AssetActions/Edit/FormAdvancedSettings.tsx

@@ -1,13 +1,10 @@
 import React, { ChangeEvent, ReactElement } from 'react'
 import styles from './FormEditMetadata.module.css'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
-import Button from '../../../atoms/Button'
 import Input from '../../../atoms/Input'
 import { FormFieldProps } from '../../../../@types/Form'
-import { useOcean } from '../../../../providers/Ocean'
-import { useWeb3 } from '../../../../providers/Web3'
 import { AdvancedSettingsForm } from '../../../../models/FormEditCredential'
-import { useAsset } from '../../../../providers/Asset'
+import FormActions from './FormActions'
 
 export default function FormAdvancedSettings({
   data,
@@ -16,11 +13,7 @@ export default function FormAdvancedSettings({
   data: FormFieldProps[]
   setShowEdit: (show: boolean) => void
 }): ReactElement {
-  const { accountId } = useWeb3()
-  const { isAssetNetwork } = useAsset()
-  const { ocean, config } = useOcean()
   const {
-    isValid,
     validateField,
     setFieldValue
   }: FormikContextType<Partial<AdvancedSettingsForm>> = useFormikContext()
@@ -47,17 +40,8 @@ export default function FormAdvancedSettings({
           }
         />
       ))}
-      <footer className={styles.actions}>
+
-        <Button
+      <FormActions setShowEdit={setShowEdit} />
-          style="primary"
-          disabled={!ocean || !accountId || !isValid || !isAssetNetwork}
-        >
-          Submit
-        </Button>
-        <Button style="text" onClick={() => setShowEdit(false)}>
-          Cancel
-        </Button>
-      </footer>
     </Form>
   )
 }

src/components/organisms/AssetActions/Edit/FormEditComputeDataset.tsx

@@ -1,9 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
-import Button from '../../../atoms/Button'
 import Input from '../../../atoms/Input'
-import { useOcean } from '../../../../providers/Ocean'
-import { useWeb3 } from '../../../../providers/Web3'
 import { FormFieldProps } from '../../../../@types/Form'
 import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
 import stylesIndex from './index.module.css'
@@ -17,6 +14,7 @@ import { ComputePrivacyForm } from '../../../../models/FormEditComputeDataset'
 import { publisherTrustedAlgorithm as PublisherTrustedAlgorithm } from '@oceanprotocol/lib'
 import axios from 'axios'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+import FormActions from './FormActions'
 
 export default function FormEditComputeDataset({
   data,
@@ -28,11 +26,8 @@ export default function FormEditComputeDataset({
   setShowEdit: (show: boolean) => void
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const { accountId } = useWeb3()
+  const { ddo } = useAsset()
-  const { ocean } = useOcean()
+  const { values }: FormikContextType<ComputePrivacyForm> = useFormikContext()
-  const { ddo, isAssetNetwork } = useAsset()
-  const { isValid, values }: FormikContextType<ComputePrivacyForm> =
-    useFormikContext()
   const [allAlgorithms, setAllAlgorithms] = useState<AssetSelectionAsset[]>()
 
   const { publisherTrustedAlgorithms } =
@@ -87,17 +82,8 @@ export default function FormEditComputeDataset({
           component={Input}
         />
       ))}
-      <footer className={styles.actions}>
+
-        <Button
+      <FormActions setShowEdit={setShowEdit} />
-          style="primary"
-          disabled={!ocean || !accountId || !isValid || !isAssetNetwork}
-        >
-          Submit
-        </Button>
-        <Button style="text" onClick={() => setShowEdit(false)}>
-          Cancel
-        </Button>
-      </footer>
     </Form>
   )
 }

src/components/organisms/AssetActions/Edit/FormEditMetadata.module.css

@@ -2,27 +2,6 @@
   composes: box from '../../../atoms/Box.module.css';
 }
 
-.actions {
+.form select[multiple] {
-  margin-left: -2rem;
-  margin-right: -2rem;
-  border-top: 1px solid var(--border-color);
-  padding: calc(var(--spacer) / 2) var(--spacer) 0;
-  display: flex;
-  justify-content: center;
-}
-
-@media (min-width: 40rem) {
-  .actions {
-    padding-top: var(--spacer);
-  }
-}
-
-.actions a,
-.actions button {
-  margin-left: calc(var(--spacer) / 2);
-  margin-right: calc(var(--spacer) / 2);
-}
-
-select[multiple] {
   height: 130px;
 }

src/components/organisms/AssetActions/Edit/FormEditMetadata.tsx

@@ -1,14 +1,12 @@
 import React, { ChangeEvent, ReactElement } from 'react'
-import styles from './FormEditMetadata.module.css'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
-import Button from '../../../atoms/Button'
+import { useOcean } from '../../../../providers/Ocean'
 import Input from '../../../atoms/Input'
 import { FormFieldProps } from '../../../../@types/Form'
 import { MetadataPublishFormDataset } from '../../../../@types/MetaData'
 import { checkIfTimeoutInPredefinedValues } from '../../../../utils/metadata'
-import { useOcean } from '../../../../providers/Ocean'
+import FormActions from './FormActions'
-import { useWeb3 } from '../../../../providers/Web3'
+import styles from './FormEditMetadata.module.css'
-import { useAsset } from '../../../../providers/Asset'
 
 function handleTimeoutCustomOption(
   data: FormFieldProps[],
@@ -57,11 +55,8 @@ export default function FormEditMetadata({
   values: Partial<MetadataPublishFormDataset>
   showPrice: boolean
 }): ReactElement {
-  const { accountId } = useWeb3()
+  const { config } = useOcean()
-  const { ocean, config } = useOcean()
-  const { isAssetNetwork } = useAsset()
   const {
-    isValid,
     validateField,
     setFieldValue
   }: FormikContextType<Partial<MetadataPublishFormDataset>> = useFormikContext()
@@ -98,18 +93,10 @@ export default function FormEditMetadata({
           )
       )}
 
-      <footer className={styles.actions}>
+      <FormActions
-        <Button
+        setShowEdit={setShowEdit}
-          style="primary"
+        handleClick={() => setTimeoutStringValue(values.timeout)}
-          disabled={!ocean || !accountId || !isValid || !isAssetNetwork}
+      />
-          onClick={() => setTimeoutStringValue(values.timeout)}
-        >
-          Submit
-        </Button>
-        <Button style="text" onClick={() => setShowEdit(false)}>
-          Cancel
-        </Button>
-      </footer>
     </Form>
   )
 }