Merge branch 'main' into feature/compute

.env.example

@@ -4,4 +4,6 @@ GATSBY_NETWORK="rinkeby"
 #GATSBY_INFURA_PROJECT_ID="xxx"
 #GATSBY_MARKET_FEE_ADDRESS="0xxx"
 #GATSBY_ANALYTICS_ID="xxx"
-#GATSBY_PORTIS_ID="xxx"
+#GATSBY_PORTIS_ID="xxx"
+#GATSBY_ALLOW_FIXED_PRICING="true"
+#GATSBY_ALLOW_DYNAMIC_PRICING="true"

app.config.js

@@ -38,5 +38,10 @@ module.exports = {
   },
 
   // Wallets
-  portisId: process.env.GATSBY_PORTIS_ID || 'xxx'
+  portisId: process.env.GATSBY_PORTIS_ID || 'xxx',
+
+  // Used to show or hide the fixed and dynamic price options
+  // tab to publishers during the price creation.
+  allowFixedPricing: process.env.GATSBY_ALLOW_FIXED_PRICING || 'true',
+  allowDynamicPricing: process.env.GATSBY_ALLOW_DYNAMIC_PRICING || 'true'
 }

src/components/molecules/Wallet/Details.module.css

@@ -75,3 +75,12 @@
   margin-top: calc(var(--spacer) / 4);
   min-width: 6rem;
 }
+
+.walletInfo{
+  display: flex;
+  flex-direction: column;
+}
+
+.walletInfo button{
+  margin-top: calc(var(--spacer) / 5) !important;
+}

src/components/molecules/Wallet/Details.tsx

@@ -8,10 +8,11 @@ import Conversion from '../../atoms/Price/Conversion'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { useWeb3 } from '../../../providers/Web3'
+import { Logger } from '@oceanprotocol/lib'
 
 export default function Details(): ReactElement {
-  const { web3Provider, connect, logout, networkData, networkId } = useWeb3()
-  const { balance } = useOcean()
+  const { web3Provider, connect, logout, networkData } = useWeb3()
+  const { balance, config } = useOcean()
   const { locale } = useUserPreferences()
 
   const [providerInfo, setProviderInfo] = useState<IProviderInfo>()
@@ -26,6 +27,39 @@ export default function Details(): ReactElement {
     setProviderInfo(providerInfo)
   }, [web3Provider])
 
+  async function addOceanToWallet() {
+    const tokenMetadata = {
+      type: 'ERC20',
+      options: {
+        address: config.oceanTokenAddress,
+        symbol: config.oceanTokenSymbol,
+        decimals: 18,
+        image:
+          'https://raw.githubusercontent.com/oceanprotocol/art/main/logo/token.png'
+      }
+    }
+    web3Provider.sendAsync(
+      {
+        method: 'wallet_watchAsset',
+        params: tokenMetadata,
+        id: Math.round(Math.random() * 100000)
+      },
+      (err: string, added: any) => {
+        if (err || 'error' in added) {
+          Logger.error(
+            `Couldn't add ${tokenMetadata.options.symbol} (${
+              tokenMetadata.options.address
+            }) to MetaMask, error: ${err || added.error}`
+          )
+        } else {
+          Logger.log(
+            `Added ${tokenMetadata.options.symbol} (${tokenMetadata.options.address}) to MetaMask`
+          )
+        }
+      }
+    )
+  }
+
   useEffect(() => {
     if (!networkData) return
 
@@ -48,11 +82,7 @@ export default function Details(): ReactElement {
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
             <span className={styles.symbol}>
-              {key === 'eth'
-                ? mainCurrency
-                : key === 'ocean' && networkId === 137
-                ? 'mOCEAN'
-                : key.toUpperCase()}
+              {key === 'eth' ? mainCurrency : config.oceanTokenSymbol}
             </span>{' '}
             {formatCurrency(Number(value), '', locale, false, {
               significantFigures: 4
@@ -62,9 +92,11 @@ export default function Details(): ReactElement {
         ))}
 
         <li className={styles.actions}>
-          <span title="Connected provider">
-            <img className={styles.walletLogo} src={providerInfo?.logo} />
-            {providerInfo?.name}
+          <div title="Connected provider" className={styles.walletInfo}>
+            <span>
+              <img className={styles.walletLogo} src={providerInfo?.logo} />
+              {providerInfo?.name}
+            </span>
             {/* {providerInfo?.name === 'Portis' && (
               <InputElement
                 name="network"
@@ -75,7 +107,18 @@ export default function Details(): ReactElement {
                 onChange={handlePortisNetworkChange}
               />
             )} */}
-          </span>
+            {providerInfo?.name === 'MetaMask' && (
+              <Button
+                style="text"
+                size="small"
+                onClick={() => {
+                  addOceanToWallet()
+                }}
+              >
+                {`Add ${config.oceanTokenSymbol}`}
+              </Button>
+            )}
+          </div>
           <p>
             {providerInfo?.name === 'Portis' && (
               <Button

src/components/molecules/Wallet/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import Account from './Account'
 import Details from './Details'
 import Tooltip from '../../atoms/Tooltip'

src/components/organisms/AssetActions/Pool/Add/Output.module.css

@@ -8,6 +8,7 @@
 .output p {
   font-weight: var(--font-weight-bold);
   margin-bottom: calc(var(--spacer) / 8);
+  font-size: var(--font-size-small);
 }
 
 .output div:first-child [class*='token'] {

src/components/organisms/AssetActions/Pool/Remove.module.css

@@ -60,3 +60,11 @@
 .output figure[class*='pool shares'] {
   display: none;
 }
+
+.output p {
+  font-size: var(--font-size-small);
+}
+
+.slippage {
+  composes: slippage from '../Trade/Slippage.module.css';
+}

src/components/organisms/AssetActions/Pool/Remove.tsx

@@ -18,6 +18,7 @@ import { getMaxPercentRemove } from './utils'
 import { graphql, useStaticQuery } from 'gatsby'
 import debounce from 'lodash.debounce'
 import UserLiquidity from '../../../atoms/UserLiquidity'
+import InputElement from '../../../atoms/Input/InputElement'
 import { useOcean } from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
 
@@ -64,6 +65,7 @@ export default function Remove({
   const data = useStaticQuery(contentQuery)
   const content = data.content.edges[0].node.childContentJson.pool.remove
 
+  const slippagePresets = ['5', '10', '15', '25', '50']
   const { accountId } = useWeb3()
   const { ocean } = useOcean()
   const [amountPercent, setAmountPercent] = useState('0')
@@ -74,23 +76,27 @@ export default function Remove({
   const [isAdvanced, setIsAdvanced] = useState(false)
   const [isLoading, setIsLoading] = useState<boolean>()
   const [txId, setTxId] = useState<string>()
+  const [slippage, setSlippage] = useState<string>('5')
+  const [minOceanAmount, setMinOceanAmount] = useState<string>('0')
+  const [minDatatokenAmount, setMinDatatokenAmount] = useState<string>('0')
 
   async function handleRemoveLiquidity() {
     setIsLoading(true)
-
     try {
       const result =
         isAdvanced === true
           ? await ocean.pool.removePoolLiquidity(
               accountId,
               poolAddress,
-              amountPoolShares
+              amountPoolShares,
+              minDatatokenAmount,
+              minOceanAmount
             )
-          : await ocean.pool.removeOceanLiquidity(
+          : await ocean.pool.removeOceanLiquidityWithMinimum(
               accountId,
               poolAddress,
-              amountOcean,
-              amountPoolShares
+              amountPoolShares,
+              minOceanAmount
             )
 
       setTxId(result?.transactionHash)
@@ -149,6 +155,23 @@ export default function Remove({
     totalPoolTokens
   ])
 
+  async function calculateAmountOfOceansRemoved(amountPoolShares: string) {
+    const oceanAmount = await ocean.pool.getOceanRemovedforPoolShares(
+      poolAddress,
+      amountPoolShares
+    )
+    setAmountOcean(oceanAmount)
+  }
+
+  useEffect(() => {
+    const minOceanAmount =
+      (Number(amountOcean) * (100 - Number(slippage))) / 100
+    const minDatatokenAmount =
+      (Number(amountDatatoken) * (100 - Number(slippage))) / 100
+    setMinOceanAmount(`${minOceanAmount}`)
+    setMinDatatokenAmount(`${minDatatokenAmount}`)
+  }, [slippage, amountOcean, amountDatatoken, isAdvanced])
+
   // Set amountPoolShares based on set slider value
   function handleAmountPercentChange(e: ChangeEvent<HTMLInputElement>) {
     setAmountPercent(e.target.value)
@@ -156,6 +179,7 @@ export default function Remove({
 
     const amountPoolShares = (Number(e.target.value) / 100) * Number(poolTokens)
     setAmountPoolShares(`${amountPoolShares}`)
+    calculateAmountOfOceansRemoved(`${amountPoolShares}`)
   }
 
   function handleMaxButton(e: ChangeEvent<HTMLInputElement>) {
@@ -165,6 +189,7 @@ export default function Remove({
     const amountPoolShares =
       (Number(amountMaxPercent) / 100) * Number(poolTokens)
     setAmountPoolShares(`${amountPoolShares}`)
+    calculateAmountOfOceansRemoved(`${amountPoolShares}`)
   }
 
   function handleAdvancedButton(e: FormEvent<HTMLButtonElement>) {
@@ -174,19 +199,25 @@ export default function Remove({
     setAmountPoolShares('0')
     setAmountPercent('0')
     setAmountOcean('0')
+    setSlippage('5')
+    setMinOceanAmount('0')
+    setMinDatatokenAmount('0')
 
     if (isAdvanced === true) {
       setAmountDatatoken('0')
     }
   }
 
+  function handleSlippageChange(e: ChangeEvent<HTMLSelectElement>) {
+    setSlippage(e.target.value)
+  }
+
   return (
     <div className={styles.remove}>
       <Header title={content.title} backAction={() => setShowRemove(false)} />
 
       <form className={styles.removeInput}>
         <UserLiquidity amount={poolTokens} symbol="pool shares" />
-
         <div className={styles.range}>
           <h3>{amountPercent}%</h3>
           <div className={styles.slider}>
@@ -220,21 +251,36 @@ export default function Remove({
           </Button>
         </div>
       </form>
-
       <div className={styles.output}>
         <div>
           <p>{content.output.titleIn}</p>
           <Token symbol="pool shares" balance={amountPoolShares} noIcon />
         </div>
         <div>
-          <p>{content.output.titleOut}</p>
-          <Token symbol="OCEAN" balance={amountOcean} />
-          {isAdvanced === true && (
-            <Token symbol={dtSymbol} balance={amountDatatoken} />
+          <p>{content.output.titleOut} minimum</p>
+          {isAdvanced === true ? (
+            <>
+              <Token symbol="OCEAN" balance={minOceanAmount} />
+              <Token symbol={dtSymbol} balance={minDatatokenAmount} />
+            </>
+          ) : (
+            <Token symbol="OCEAN" balance={minOceanAmount} />
           )}
         </div>
       </div>
-
+      <div className={styles.slippage}>
+        <strong>Expected price impact</strong>
+        <InputElement
+          name="slippage"
+          type="select"
+          size="mini"
+          postfix="%"
+          sortOptions={false}
+          options={slippagePresets}
+          value={slippage}
+          onChange={handleSlippageChange}
+        />
+      </div>
       <Actions
         isLoading={isLoading}
         loaderMessage="Removing Liquidity..."

src/components/organisms/AssetActions/Trade/Output.module.css

@@ -1,6 +1,7 @@
 .output {
   border-top: 1px solid var(--border-color);
   padding: var(--spacer);
+  padding-bottom: calc(var(--spacer) / 1.5);
   display: grid;
   gap: var(--spacer);
   grid-template-columns: 1fr 1fr;
@@ -11,6 +12,7 @@
 .output p {
   font-weight: var(--font-weight-bold);
   margin-bottom: calc(var(--spacer) / 8);
+  font-size: var(--font-size-small);
 }
 
 .output [class*='token'] {

src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx

@@ -9,6 +9,7 @@ import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import Button from '../../../../atoms/Button'
 import { DDO } from '@oceanprotocol/lib'
 import FormHelp from '../../../../atoms/Input/Help'
+import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
 
 export default function FormPricing({
   ddo,
@@ -20,6 +21,7 @@ export default function FormPricing({
   content: any
 }): ReactElement {
   const { debug } = useUserPreferences()
+  const { appConfig } = useSiteMetadata()
 
   // Connect with form
   const { values, setFieldValue, submitForm } = useFormikContext()
@@ -49,15 +51,19 @@ export default function FormPricing({
   }, [price, oceanAmount, weightOnOcean, weightOnDataToken, type])
 
   const tabs = [
-    {
-      title: content.fixed.title,
-      content: <Fixed content={content.fixed} ddo={ddo} />
-    },
-    {
-      title: content.dynamic.title,
-      content: <Dynamic content={content.dynamic} ddo={ddo} />
-    }
-  ]
+    appConfig.allowFixedPricing === 'true'
+      ? {
+          title: content.fixed.title,
+          content: <Fixed content={content.fixed} ddo={ddo} />
+        }
+      : undefined,
+    appConfig.allowDynamicPricing === 'true'
+      ? {
+          title: content.dynamic.title,
+          content: <Dynamic content={content.dynamic} ddo={ddo} />
+        }
+      : undefined
+  ].filter((tab) => tab !== undefined)
 
   return (
     <>

src/hooks/useSiteMetadata.ts

@@ -22,6 +22,8 @@ const query = graphql`
           marketFeeAddress
           currencies
           portisId
+          allowFixedPricing
+          allowDynamicPricing
         }
       }
     }

src/providers/Asset.tsx

@@ -45,6 +45,7 @@ const freQuery = gql`
   query FrePrice($datatoken: String) {
     fixedRateExchanges(orderBy: id, where: { datatoken: $datatoken }) {
       rate
+      id
     }
   }
 `
@@ -79,7 +80,7 @@ function AssetProvider({
     data: frePrice
   } = useQuery<FrePrice>(freQuery, {
     variables,
-    skip: true
+    skip: false
   })
   const {
     refetch: refetchPool,
@@ -87,31 +88,43 @@ function AssetProvider({
     data: poolPrice
   } = useQuery<PoolPrice>(poolQuery, {
     variables,
-    skip: true
+    skip: false
   })
 
-  useEffect(() => {
-    if (!ddo || !variables) return
-    if (ddo.price.type === 'exchange') {
-      refetchFre(variables)
-      startPollingFre(refreshInterval)
-    } else {
-      refetchPool(variables)
-      startPollingPool(refreshInterval)
-    }
-  }, [ddo, variables])
+  // this is not working as expected, thus we need to fetch both pool and fre
+  // useEffect(() => {
+  //   if (!ddo || !variables || variables === '') return
+
+  //   if (ddo.price.type === 'exchange') {
+  //     refetchFre(variables)
+  //     startPollingFre(refreshInterval)
+  //   } else {
+  //     refetchPool(variables)
+  //     startPollingPool(refreshInterval)
+  //   }
+  // }, [ddo, variables])
 
   useEffect(() => {
-    if (!frePrice || frePrice.fixedRateExchanges.length === 0) return
-    price.value = frePrice.fixedRateExchanges[0].rate
-    setPrice(price)
+    if (
+      !frePrice ||
+      frePrice.fixedRateExchanges.length === 0 ||
+      price.type !== 'exchange'
+    )
+      return
+    setPrice((prevState) => ({
+      ...prevState,
+      value: frePrice.fixedRateExchanges[0].rate,
+      address: frePrice.fixedRateExchanges[0].id
+    }))
   }, [frePrice])
 
   useEffect(() => {
-    if (!poolPrice || poolPrice.pools.length === 0) return
-    price.value = poolPrice.pools[0].spotPrice
-    price.value = 3222222
-    setPrice(price)
+    if (!poolPrice || poolPrice.pools.length === 0 || price.type !== 'pool')
+      return
+    setPrice((prevState) => ({
+      ...prevState,
+      value: poolPrice.pools[0].spotPrice
+    }))
   }, [poolPrice])
 
   const fetchDdo = async (token?: CancelToken) => {

src/providers/Ocean.tsx

@@ -21,7 +21,7 @@ const refreshInterval = 20000 // 20 sec.
 
 interface OceanProviderValue {
   ocean: Ocean
-  config: ConfigHelperConfig | Config
+  config: ConfigHelperConfig
   account: Account
   balance: UserBalance
   connect: (config?: Config) => Promise<void>

src/utils/ocean.ts

@@ -1,4 +1,4 @@
-import { Account, Config, Logger, Ocean } from '@oceanprotocol/lib'
+import { Account, Logger, Ocean } from '@oceanprotocol/lib'
 import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json'
 import {
   ConfigHelper,
@@ -10,11 +10,11 @@ import { UserBalance } from '../@types/TokenBalance'
 
 export function getOceanConfig(
   network: ConfigHelperNetworkName | ConfigHelperNetworkId
-): Config {
+): ConfigHelperConfig {
   return new ConfigHelper().getConfig(
     network,
     process.env.GATSBY_INFURA_PROJECT_ID
-  )
+  ) as ConfigHelperConfig
 }
 
 export function getDevelopmentConfig(): Partial<ConfigHelperConfig> {