diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx index 05cd84459..375318abc 100644 --- a/src/components/atoms/Input/InputElement.tsx +++ b/src/components/atoms/Input/InputElement.tsx @@ -4,7 +4,6 @@ import styles from './InputElement.module.css' import { InputProps } from '.' import FilesInput from '../../molecules/FormFields/FilesInput' import Terms from '../../molecules/FormFields/Terms' -import Price from '../../molecules/FormFields/Price' import Datatoken from '../../molecules/FormFields/Datatoken' const DefaultInput = ({ @@ -88,8 +87,6 @@ export default function InputElement({ ) case 'files': return - case 'price': - return case 'datatoken': return case 'terms': diff --git a/src/components/molecules/FormFields/Price/Coin.module.css b/src/components/organisms/AssetContent/Price/Coin.module.css similarity index 100% rename from src/components/molecules/FormFields/Price/Coin.module.css rename to src/components/organisms/AssetContent/Price/Coin.module.css diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/organisms/AssetContent/Price/Coin.tsx similarity index 95% rename from src/components/molecules/FormFields/Price/Coin.tsx rename to src/components/organisms/AssetContent/Price/Coin.tsx index 667b5c16b..d3e6fdde5 100644 --- a/src/components/molecules/FormFields/Price/Coin.tsx +++ b/src/components/organisms/AssetContent/Price/Coin.tsx @@ -20,6 +20,7 @@ export default function Coin({ readOnly?: boolean }): ReactElement { const [field, meta] = useField(name) + console.log(field) return (
@@ -41,6 +42,8 @@ export default function Coin({ readOnly={readOnly} prefix={datatokenOptions?.symbol || 'DT'} min="1" + name={name} + value={field.value} {...field} /> {datatokenOptions?.symbol === 'OCEAN' && ( diff --git a/src/components/molecules/FormFields/Price/Dynamic.module.css b/src/components/organisms/AssetContent/Price/Dynamic.module.css similarity index 100% rename from src/components/molecules/FormFields/Price/Dynamic.module.css rename to src/components/organisms/AssetContent/Price/Dynamic.module.css diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/organisms/AssetContent/Price/Dynamic.tsx similarity index 80% rename from src/components/molecules/FormFields/Price/Dynamic.tsx rename to src/components/organisms/AssetContent/Price/Dynamic.tsx index d5e322b07..63d065700 100644 --- a/src/components/molecules/FormFields/Price/Dynamic.tsx +++ b/src/components/organisms/AssetContent/Price/Dynamic.tsx @@ -1,32 +1,28 @@ import { DataTokenOptions, useOcean } from '@oceanprotocol/react' import PriceUnit from '../../../atoms/Price/PriceUnit' import React, { ReactElement, useEffect, useState } from 'react' -import { PriceOptionsMarket } from '../../../../@types/MetaData' import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' import { isCorrectNetwork } from '../../../../utils/wallet' import Alert from '../../../atoms/Alert' import FormHelp from '../../../atoms/Input/Help' import Tooltip from '../../../atoms/Tooltip' -import Wallet from '../../Wallet' +import Wallet from '../../../molecules/Wallet' import Coin from './Coin' import styles from './Dynamic.module.css' import Fees from './Fees' import stylesIndex from './index.module.css' +import { useFormikContext } from 'formik' export default function Dynamic({ - ocean, - priceOptions, datatokenOptions, content }: { - ocean: number - priceOptions: PriceOptionsMarket datatokenOptions: DataTokenOptions content: any }): ReactElement { const { appConfig } = useSiteMetadata() const { account, balance, networkId, refreshBalance } = useOcean() - const { weightOnDataToken } = priceOptions + const { values } = useFormikContext() const [error, setError] = useState() const correctNetwork = isCorrectNetwork(networkId) @@ -40,12 +36,19 @@ export default function Dynamic({ setError(`No account connected. Please connect your Web3 wallet.`) } else if (!correctNetwork) { setError(`Wrong Network. Please connect to ${desiredNetworkName}.`) - } else if (Number(balance.ocean) < Number(ocean)) { - setError(`Insufficient balance. You need at least ${ocean} OCEAN`) + } else if (Number(balance.ocean) < Number(values.price)) { + setError(`Insufficient balance. You need at least ${values.price} OCEAN`) } else { setError(undefined) } - }, [ocean, networkId, account, balance, correctNetwork, desiredNetworkName]) + }, [ + values.price, + networkId, + account, + balance, + correctNetwork, + desiredNetworkName + ]) // refetch balance periodically useEffect(() => { @@ -57,7 +60,7 @@ export default function Dynamic({ return () => { clearInterval(balanceInterval) } - }, [ocean, networkId, account]) + }, [networkId, account]) return (
@@ -81,14 +84,14 @@ export default function Dynamic({
diff --git a/src/components/molecules/FormFields/Price/Error.tsx b/src/components/organisms/AssetContent/Price/Error.tsx similarity index 100% rename from src/components/molecules/FormFields/Price/Error.tsx rename to src/components/organisms/AssetContent/Price/Error.tsx diff --git a/src/components/molecules/FormFields/Price/Fees.module.css b/src/components/organisms/AssetContent/Price/Fees.module.css similarity index 100% rename from src/components/molecules/FormFields/Price/Fees.module.css rename to src/components/organisms/AssetContent/Price/Fees.module.css diff --git a/src/components/molecules/FormFields/Price/Fees.tsx b/src/components/organisms/AssetContent/Price/Fees.tsx similarity index 89% rename from src/components/molecules/FormFields/Price/Fees.tsx rename to src/components/organisms/AssetContent/Price/Fees.tsx index 5537ea38a..5009ffa8c 100644 --- a/src/components/molecules/FormFields/Price/Fees.tsx +++ b/src/components/organisms/AssetContent/Price/Fees.tsx @@ -1,7 +1,6 @@ import React, { ReactElement } from 'react' import Tooltip from '../../../atoms/Tooltip' import styles from './Fees.module.css' -import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' import { useField } from 'formik' import Input from '../../../atoms/Input' import Error from './Error' @@ -11,8 +10,7 @@ export default function Fees({ }: { tooltips: { [key: string]: string } }): ReactElement { - const { appConfig } = useSiteMetadata() - const [field, meta] = useField('price.swapFee') + const [field, meta] = useField('swapFee') return ( <> diff --git a/src/components/molecules/FormFields/Price/Fixed.module.css b/src/components/organisms/AssetContent/Price/Fixed.module.css similarity index 100% rename from src/components/molecules/FormFields/Price/Fixed.module.css rename to src/components/organisms/AssetContent/Price/Fixed.module.css diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/organisms/AssetContent/Price/Fixed.tsx similarity index 93% rename from src/components/molecules/FormFields/Price/Fixed.tsx rename to src/components/organisms/AssetContent/Price/Fixed.tsx index 8ec57ea25..ca46042f6 100644 --- a/src/components/molecules/FormFields/Price/Fixed.tsx +++ b/src/components/organisms/AssetContent/Price/Fixed.tsx @@ -8,7 +8,7 @@ import Input from '../../../atoms/Input' import Error from './Error' export default function Fixed({ content }: { content: any }): ReactElement { - const [field, meta] = useField('price.price') + const [field, meta] = useField('price') return (
@@ -19,7 +19,7 @@ export default function Fixed({ content }: { content: any }): ReactElement { () + const { values, setFieldValue } = useFormikContext() + const { price, weightOnDataToken, type } = values as PriceOptionsMarket function handleTabChange(tabName: string) { const type = tabName.toLowerCase() - helpers.setValue({ ...field.value, type }) + setFieldValue('type', type) } - // Always update everything when amountOcean changes + // Always update everything when price changes useEffect(() => { - const tokensToMint = Number(price) * Number(field.value.weightOnDataToken) - setTokensToMint(tokensToMint) - helpers.setValue({ ...field.value, tokensToMint }) + const dtAmount = Number(price) * Number(weightOnDataToken) + setFieldValue('dtAmount', dtAmount) }, [price]) const tabs = [ @@ -69,9 +66,7 @@ export default function Price(props: InputProps): ReactElement { title: content.dynamic.title, content: ( ) @@ -83,11 +78,11 @@ export default function Price(props: InputProps): ReactElement { {debug === true && (
-          {JSON.stringify(field.value, null, 2)}
+          {JSON.stringify(values, null, 2)}
         
)}
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx index c3232263e..f779f6fc1 100644 --- a/src/components/organisms/AssetContent/Pricing.tsx +++ b/src/components/organisms/AssetContent/Pricing.tsx @@ -7,6 +7,7 @@ import { usePricing } from '@oceanprotocol/react' import { PriceOptionsMarket } from '../../../@types/MetaData' import Alert from '../../atoms/Alert' import styles from './Pricing.module.css' +import Price from './Price' export default function Pricing({ ddo }: { ddo: DDO }): ReactElement { const { createPricing } = usePricing(ddo) @@ -32,27 +33,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement { setSubmitting(false) }} > - {() => ( - <> - - {({ - field, - form - }: { - field: FieldInputProps - form: any - }) => ( - - )} - - - )} + {(props) => } ) : ( ({ price: Yup.number().min(1, 'Must be greater than 0').required('Required'), - tokensToMint: Yup.number() - .min(1, 'Must be greater than 0') - .required('Required'), + dtAmount: Yup.number().min(1, 'Must be greater than 0').required('Required'), type: Yup.string() .matches(/fixed|dynamic/g) .required('Required'), @@ -20,7 +18,7 @@ export const validationSchema = Yup.object().shape({ export const initialValues: Partial = { price: 1, type: 'dynamic', - tokensToMint: 1, + dtAmount: 1, weightOnDataToken: '9', // 90% on data token swapFee: 0.1 // in % }