diff --git a/src/components/organisms/AssetActions/Edit/FormActions.module.css b/src/components/organisms/AssetActions/Edit/FormActions.module.css new file mode 100644 index 000000000..67c39f9f6 --- /dev/null +++ b/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); +} diff --git a/src/components/organisms/AssetActions/Edit/FormActions.tsx b/src/components/organisms/AssetActions/Edit/FormActions.tsx new file mode 100644 index 000000000..d674578b9 --- /dev/null +++ b/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> = + useFormikContext() + + return ( + + ) +} diff --git a/src/components/organisms/AssetActions/Edit/FormAdvancedSettings.tsx b/src/components/organisms/AssetActions/Edit/FormAdvancedSettings.tsx index b15968554..02f261808 100644 --- a/src/components/organisms/AssetActions/Edit/FormAdvancedSettings.tsx +++ b/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> = useFormikContext() @@ -47,17 +40,8 @@ export default function FormAdvancedSettings({ } /> ))} -
- - -
+ + ) } diff --git a/src/components/organisms/AssetActions/Edit/FormEditComputeDataset.tsx b/src/components/organisms/AssetActions/Edit/FormEditComputeDataset.tsx index 5e7999b3f..5104fbf87 100644 --- a/src/components/organisms/AssetActions/Edit/FormEditComputeDataset.tsx +++ b/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 { ocean } = useOcean() - const { ddo, isAssetNetwork } = useAsset() - const { isValid, values }: FormikContextType = - useFormikContext() + const { ddo } = useAsset() + const { values }: FormikContextType = useFormikContext() const [allAlgorithms, setAllAlgorithms] = useState() const { publisherTrustedAlgorithms } = @@ -87,17 +82,8 @@ export default function FormEditComputeDataset({ component={Input} /> ))} -
- - -
+ + ) } diff --git a/src/components/organisms/AssetActions/Edit/FormEditMetadata.module.css b/src/components/organisms/AssetActions/Edit/FormEditMetadata.module.css index 4bb393ac4..b20a7a782 100644 --- a/src/components/organisms/AssetActions/Edit/FormEditMetadata.module.css +++ b/src/components/organisms/AssetActions/Edit/FormEditMetadata.module.css @@ -2,27 +2,6 @@ composes: box from '../../../atoms/Box.module.css'; } -.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); -} - -select[multiple] { +.form select[multiple] { height: 130px; } diff --git a/src/components/organisms/AssetActions/Edit/FormEditMetadata.tsx b/src/components/organisms/AssetActions/Edit/FormEditMetadata.tsx index 9816735b1..840e1d9e3 100644 --- a/src/components/organisms/AssetActions/Edit/FormEditMetadata.tsx +++ b/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 { useWeb3 } from '../../../../providers/Web3' -import { useAsset } from '../../../../providers/Asset' +import FormActions from './FormActions' +import styles from './FormEditMetadata.module.css' function handleTimeoutCustomOption( data: FormFieldProps[], @@ -57,11 +55,8 @@ export default function FormEditMetadata({ values: Partial showPrice: boolean }): ReactElement { - const { accountId } = useWeb3() - const { ocean, config } = useOcean() - const { isAssetNetwork } = useAsset() + const { config } = useOcean() const { - isValid, validateField, setFieldValue }: FormikContextType> = useFormikContext() @@ -98,18 +93,10 @@ export default function FormEditMetadata({ ) )} -
- - -
+ setTimeoutStringValue(values.timeout)} + /> ) }