Merge branch 'v4' into feature/v4-c2d

package-lock.json

@@ -13,7 +13,7 @@
         "@coingecko/cryptoformat": "^0.4.4",
         "@loadable/component": "^5.15.2",
         "@oceanprotocol/art": "^3.2.0",
-        "@oceanprotocol/lib": "^1.0.0-next.29",
+        "@oceanprotocol/lib": "^1.0.0-next.32",
         "@oceanprotocol/typographies": "^0.1.0",
         "@portis/web3": "^4.0.7",
         "@tippyjs/react": "^4.2.6",
@@ -3404,9 +3404,9 @@
       }
     },
     "node_modules/@oceanprotocol/lib": {
-      "version": "1.0.0-next.29",
+      "version": "1.0.0-next.32",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.29.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.32.tgz",
-      "integrity": "sha512-/QualMxcT8XvnhZ/ixtShI7MVQn6Arkg0R9f8lMeQw4Dyykh7ZuIlfJxvIjzsMeSavdAgt2BIy1slzr6Z5VtyA==",
+      "integrity": "sha512-J+4A2rIE8IAXLCGBhyXuWM+0gwJxXf3JG/3XBZEhjMvWUNFEGeJLD26fr7evQY13Oy9mXHyUpp6rQxxHvE2/zA==",
       "dependencies": {
         "@oceanprotocol/contracts": "1.0.0-alpha.26",
         "bignumber.js": "^9.0.2",
@@ -26719,16 +26719,15 @@
       }
     },
     "@oceanprotocol/lib": {
-      "version": "1.0.0-next.29",
+      "version": "1.0.0-next.32",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.29.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.32.tgz",
-      "integrity": "sha512-/QualMxcT8XvnhZ/ixtShI7MVQn6Arkg0R9f8lMeQw4Dyykh7ZuIlfJxvIjzsMeSavdAgt2BIy1slzr6Z5VtyA==",
+      "integrity": "sha512-J+4A2rIE8IAXLCGBhyXuWM+0gwJxXf3JG/3XBZEhjMvWUNFEGeJLD26fr7evQY13Oy9mXHyUpp6rQxxHvE2/zA==",
       "requires": {
         "@oceanprotocol/contracts": "1.0.0-alpha.26",
         "bignumber.js": "^9.0.2",
         "cross-fetch": "^3.1.5",
         "crypto-js": "^4.1.1",
         "decimal.js": "^10.3.1",
-        "web3": "^1.7.1",
         "web3-core": "^1.7.1",
         "web3-eth-contract": "^1.7.1"
       }
@@ -26831,7 +26830,6 @@
       "integrity": "sha512-5vwpq6kbvwkQwKqAoOU3L72GZ3Ta8RRrewKj9OJRolx28KLJJ8Dg9Rf7obRwt5jQA9bkYd8gqzMTrI7H3xLfaw==",
       "dev": true,
       "requires": {
-        "@oclif/config": "^1.15.1",
         "@oclif/errors": "^1.3.3",
         "@oclif/parser": "^3.8.3",
         "@oclif/plugin-help": "^3",

package.json

@@ -21,7 +21,7 @@
     "@coingecko/cryptoformat": "^0.4.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.0.0-next.29",
+    "@oceanprotocol/lib": "^1.0.0-next.32",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.7",
     "@tippyjs/react": "^4.2.6",

src/@context/Pool/index.tsx

@@ -56,7 +56,13 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
   // const [fetchInterval, setFetchInterval] = useState<NodeJS.Timeout>()
 
   const fetchAllData = useCallback(async () => {
-    if (!asset?.chainId || !asset?.accessDetails?.addressOrId || !owner) return
+    if (
+      !accountId ||
+      !asset?.chainId ||
+      !asset?.accessDetails?.addressOrId ||
+      !owner
+    )
+      return
 
     const response = await getPoolData(
       asset.chainId,
@@ -64,6 +70,7 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
       owner,
       accountId || ''
     )
+
     if (!response) return
 
     setPoolData(response.poolData)

src/@utils/constants.ts

@@ -1 +1 @@
-export const MAX_DECIMALS = 5
+export const MAX_DECIMALS = 6

src/components/@shared/FormFields/FilesInput/index.tsx

@@ -65,7 +65,7 @@ export default function FilesInput(props: InputProps): ReactElement {
 
   return (
     <>
-      {field.value[0].valid !== undefined ? (
+      {field?.value && field?.value[0]?.valid !== undefined ? (
         <FileInfo file={field.value[0]} handleClose={handleClose} />
       ) : (
         <UrlInput

src/components/@shared/PoolTransactions/index.tsx

@@ -23,7 +23,7 @@ const txHistoryQueryByPool = gql`
     poolTransactions(
       orderBy: timestamp
       orderDirection: desc
-      where: { pool: $pool }
+      where: { pool: $pool, user: $user }
       first: 1000
     ) {
       baseToken {
@@ -40,6 +40,9 @@ const txHistoryQueryByPool = gql`
       tx
       timestamp
       pool {
+        datatoken {
+          id
+        }
         id
       }
     }
@@ -67,6 +70,9 @@ const txHistoryQuery = gql`
       tx
       timestamp
       pool {
+        datatoken {
+          id
+        }
         id
       }
     }
@@ -124,7 +130,7 @@ export default function PoolTransactions({
   accountId
 }: {
   poolAddress?: string
-  poolChainId?: number[]
+  poolChainId?: number
   minimal?: boolean
   accountId: string
 }): ReactElement {
@@ -146,7 +152,7 @@ export default function PoolTransactions({
     const result = await fetchDataForMultipleChains(
       poolAddress ? txHistoryQueryByPool : txHistoryQuery,
       variables,
-      poolAddress ? poolChainId : chainIds
+      poolAddress ? [poolChainId] : chainIds
     )
 
     for (let i = 0; i < result.length; i++) {
@@ -166,24 +172,24 @@ export default function PoolTransactions({
         return
       }
       const poolTransactions: PoolTransaction[] = []
-      const dtList: string[] = []
+      let dtList: string[] = []
-
-      for (let i = 0; i < data.length; i++) {
-        dtList.push(data[i]?.datatoken?.address)
-      }
 
+      dtList = [...new Set(data.map((item) => item.pool.datatoken.id))]
       if (dtList.length === 0) {
         setTransactions([])
         setIsLoading(false)
         return
       }
-      const ddoList = await getAssetsFromDtList(dtList, chainIds, cancelToken)
+      const ddoList = !minimal
-
+        ? await getAssetsFromDtList(dtList, chainIds, cancelToken)
+        : []
       for (let i = 0; i < data.length; i++) {
         poolTransactions.push({
           ...data[i],
-          networkId: getAsset(ddoList, data[i].datatoken.address).chainId,
+          networkId: !minimal
-          asset: getAsset(ddoList, data[i].datatoken.address)
+            ? getAsset(ddoList, data[i].pool.datatoken.id).chainId
+            : poolChainId,
+          asset: !minimal ? getAsset(ddoList, data[i].pool.datatoken.id) : null
         })
       }
       const sortedTransactions = poolTransactions.sort(

src/components/@shared/atoms/Button.module.css

@@ -26,6 +26,7 @@
 
 .button:last-child {
   margin-right: 0;
+  min-width: auto;
 }
 
 .button:hover,
@@ -33,8 +34,8 @@
   color: var(--brand-white);
   background: var(--brand-grey-light);
   text-decoration: none;
-  transform: translate3d(0, -0.05rem, 0);
   box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.1);
+  transform: translate3d(0, -0.05rem, 0);
 }
 
 .button:active {

src/components/Asset/AssetActions/Pool/Graph/_utils.ts

@@ -25,7 +25,7 @@ export function getOptions(
         borderColor: isDarkMode ? `#41474e` : `#e2e2e2`,
         callbacks: {
           label: (tooltipItem: TooltipItem<any>) =>
-            `${formatPrice(`${tooltipItem.formattedValue}`, locale)} ${symbol}`
+            `${tooltipItem.formattedValue} ${symbol}`
         }
       }
     },

src/components/Asset/AssetActions/Pool/Remove/index.module.css

@@ -31,13 +31,17 @@
 
 .maximum {
   position: absolute;
-  right: -2rem;
+  right: 0;
-  bottom: 2rem;
+  bottom: 2.5rem;
   font-size: var(--font-size-mini);
   min-width: 5rem;
   text-align: center;
 }
 
+.maximum:hover {
+  transform: none;
+}
+
 .toggle {
   margin-top: calc(var(--spacer) / 2);
   margin-bottom: 0;

src/components/Asset/AssetActions/Pool/Remove/index.tsx

@@ -67,11 +67,16 @@ export default function Remove({
         minOceanAmount
       )
       setTxId(result?.transactionHash)
+      // fetch new data
       fetchAllData()
     } catch (error) {
       LoggerInstance.error(error.message)
       toast.error(error.message)
     } finally {
+      // reset slider after transaction
+      setAmountPercent('0')
+      setAmountOcean('0')
+      setMinOceanAmount('0')
       setIsLoading(false)
     }
   }
@@ -80,8 +85,10 @@ export default function Remove({
     if (!accountId || !poolTokens) return
 
     async function getMax() {
+      const poolTokensAmount =
+        !poolTokens || poolTokens === '0' ? '1' : poolTokens
       const maxTokensToRemoveFromPool = calcMaxExactOut(totalPoolTokens)
-      const poolTokensDecimal = new Decimal(poolTokens)
+      const poolTokensDecimal = new Decimal(poolTokensAmount)
       const maxTokensToRemoveForUser = maxTokensToRemoveFromPool.greaterThan(
         poolTokensDecimal
       )
@@ -105,6 +112,7 @@ export default function Remove({
         tokenOutAddress,
         newAmountPoolShares
       )
+
       setAmountOcean(newAmountOcean)
     }, 150)
   )
@@ -116,6 +124,11 @@ export default function Remove({
   }, [amountPoolShares, accountId, poolTokens, poolAddress, totalPoolTokens])
 
   useEffect(() => {
+    if (!amountOcean || amountPercent === '0') {
+      setMinOceanAmount('0')
+      return
+    }
+
     const minOceanAmount = new Decimal(amountOcean)
       .mul(new Decimal(100).minus(new Decimal(slippage)))
       .dividedBy(100)
@@ -220,7 +233,12 @@ export default function Remove({
         actionName={content.pool.remove.action}
         action={handleRemoveLiquidity}
         successMessage="Successfully removed liquidity."
-        isDisabled={!isAssetNetwork || amountOcean === '0'}
+        isDisabled={
+          !isAssetNetwork ||
+          amountPercent === '0' ||
+          amountOcean === '0' ||
+          poolTokens === '0'
+        }
         txId={txId}
         tokenAddress={tokenOutAddress}
         tokenSymbol={tokenOutSymbol}

src/components/Asset/AssetActions/Pool/index.tsx

@@ -208,7 +208,7 @@ export default function Pool(): ReactElement {
               <PoolTransactions
                 accountId={accountId}
                 poolAddress={asset?.accessDetails?.addressOrId}
-                poolChainId={[asset?.chainId]}
+                poolChainId={asset?.chainId}
                 minimal
               />
             </AssetActionHistoryTable>

src/components/Publish/Pricing/Price.tsx

@@ -34,7 +34,13 @@ export default function Price({
         <>
           <div className={styles.grid}>
             <div className={styles.form}>
-              <Input type="number" prefix="OCEAN" {...field} />
+              <Input
+                type="number"
+                min="1"
+                placeholder="0"
+                prefix="OCEAN"
+                {...field}
+              />
               <Error meta={meta} />
             </div>
             <div className={styles.datatoken}>

src/components/Publish/_utils.ts

@@ -207,7 +207,7 @@ export async function createTokensAndPricing(
   const ercParams: Erc20CreateParams = {
     templateIndex: values.pricing.type === 'dynamic' ? 1 : 2,
     minter: accountId,
-    feeManager: accountId,
+    paymentCollector: accountId,
     mpFeeAddress: appConfig.marketFeeAddress,
     feeToken: config.oceanTokenAddress,
     feeAmount: appConfig.publisherMarketOrderFee,

src/components/Publish/_validation.ts

@@ -1,8 +1,10 @@
+import { MAX_DECIMALS } from '@utils/constants'
 import * as Yup from 'yup'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required
 // hint, hint: https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema
+
 const validationMetadata = {
   type: Yup.string()
     .matches(/dataset|algorithm/g, { excludeEmptyString: true })
@@ -54,25 +56,53 @@ const validationService = {
   })
 }
 
+const maxDecimalsValidation = new RegExp(
+  '^\\d+(\\.\\d{1,' + MAX_DECIMALS + '})?$'
+)
+
 const validationPricing = {
   type: Yup.string()
     .matches(/fixed|dynamic|free/g, { excludeEmptyString: true })
     .required('Required'),
   // https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema
+
   price: Yup.number()
     .min(1, (param: { min: number }) => `Must be more or equal to ${param.min}`)
+    .max(
+      1000000,
+      (param: { max: number }) => `Must be less than or equal to ${param.max}`
+    )
+    .test(
+      'maxDigitsAfterDecimal',
+      `Must have maximum ${MAX_DECIMALS} decimal digits`,
+      (param) => maxDecimalsValidation.test(param?.toString())
+    )
     .required('Required'),
   amountDataToken: Yup.number()
     .min(50, (param) => `Must be more or equal to ${param.min}`)
     .required('Required'),
   amountOcean: Yup.number()
     .min(50, (param) => `Must be more or equal to ${param.min}`)
+    .max(
+      1000000,
+      (param: { max: number }) => `Must be less than or equal to ${param.max}`
+    )
+    .test(
+      'maxDigitsAfterDecimal',
+      `Must have maximum ${MAX_DECIMALS} decimal digits`,
+      (param) => maxDecimalsValidation.test(param?.toString())
+    )
     .required('Required'),
   weightOnDataToken: Yup.string().required('Required'),
   weightOnOcean: Yup.string().required('Required'),
   swapFee: Yup.number()
     .min(0.1, (param) => `Must be more or equal to ${param.min}`)
     .max(10, 'Maximum is 10%')
+    .test(
+      'maxDigitsAfterDecimal',
+      `Must have maximum ${MAX_DECIMALS} decimal digits`,
+      (param) => maxDecimalsValidation.test(param?.toString())
+    )
     .required('Required')
 }