Fix order and price (#1375)

* fix loading

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* add order fee

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix opc

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* remove cache from urql

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* update urlq dep

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* update urlq dep

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix lock

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix states

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

src/@context/Pool/_queries.ts

@@ -11,7 +11,6 @@ export const poolDataQuery = gql`
       id
       totalShares
       liquidityProviderSwapFee
-      opcFee
       publishMarketSwapFee
       spotPrice
       baseToken {

src/@context/Pool/_types.ts

@@ -6,7 +6,6 @@ import {
 export interface PoolInfo {
   liquidityProviderSwapFee: string
   publishMarketSwapFee: string
-  opcFee: string
   weightBaseToken: string
   weightDt: string
   datatokenSymbol: string

src/@context/UrqlProvider.tsx

@@ -2,7 +2,6 @@ import {
   createClient,
   Provider,
   Client,
-  cacheExchange,
   dedupExchange,
   fetchExchange
 } from 'urql'
@@ -16,7 +15,7 @@ let urqlClient: Client
 function createUrqlClient(subgraphUri: string) {
   const client = createClient({
     url: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`,
-    exchanges: [dedupExchange, refocusExchange(), cacheExchange, fetchExchange]
+    exchanges: [dedupExchange, refocusExchange(), fetchExchange]
   })
   return client
 }

src/@utils/accessDetailsAndPricing.ts

@@ -22,6 +22,9 @@ const TokensPriceQuery = gql`
       id
       symbol
       name
+      publishMarketFeeAddress
+      publishMarketFeeToken
+      publishMarketFeeAmount
       orders(
         where: { consumer: $account }
         orderBy: createdTimestamp
@@ -46,6 +49,7 @@ const TokensPriceQuery = gql`
         id
         exchangeId
         price
+        publishMarketSwapFee
         baseToken {
           symbol
           name
@@ -83,6 +87,9 @@ const TokenPriceQuery = gql`
       id
       symbol
       name
+      publishMarketFeeAddress
+      publishMarketFeeToken
+      publishMarketFeeAmount
       orders(
         where: { consumer: $account }
         orderBy: createdTimestamp
@@ -107,6 +114,7 @@ const TokenPriceQuery = gql`
         id
         exchangeId
         price
+        publishMarketSwapFee
         baseToken {
           symbol
           name
@@ -139,7 +147,6 @@ const TokenPriceQuery = gql`
   }
 `
 
-// TODO: fill in fees after subgraph update
 function getAccessDetailsFromTokenPrice(
   tokenPrice: TokenPrice | TokensPrice,
   timeout?: number
@@ -157,7 +164,7 @@ function getAccessDetailsFromTokenPrice(
   }
 
   // TODO: fetch order fee from sub query
-  accessDetails.publisherMarketOrderFee = '0'
+  accessDetails.publisherMarketOrderFee = tokenPrice.publishMarketFeeAmount
 
   // free is always the best price
   if (tokenPrice.dispensers && tokenPrice.dispensers.length > 0) {
@@ -256,7 +263,6 @@ export async function getOrderPriceAndFees(
     asset?.services[0].serviceEndpoint
   )
   orderPriceAndFee.providerFee = initializeData.providerFee
-  if (!orderPriceAndFee.providerFee) return
 
   // fetch price and swap fees
   switch (asset?.accessDetails?.type) {

src/components/Asset/AssetActions/Download.tsx

@@ -61,37 +61,43 @@ export default function Download({
       if (
         asset?.accessDetails?.addressOrId === ZERO_ADDRESS ||
         asset?.accessDetails?.type === 'free' ||
-        (!poolData && asset?.accessDetails?.type === 'dynamic')
+        (!poolData && asset?.accessDetails?.type === 'dynamic') ||
+        isLoading
       )
         return
 
-      const params: CalcInGivenOutParams = {
+      !orderPriceAndFees && setIsLoading(true)
+      setStatusText('Refreshing price')
+      // this is needed just for pool
+      const paramsForPool: CalcInGivenOutParams = {
         tokenInLiquidity: poolData?.baseTokenLiquidity,
         tokenOutLiquidity: poolData?.datatokenLiquidity,
         tokenOutAmount: '1',
         opcFee: getOpcFeeForToken(
-          poolData?.baseToken?.address || asset?.accessDetails?.addressOrId,
+          asset?.accessDetails?.baseToken.address,
           asset?.chainId
         ),
         lpSwapFee: poolData?.liquidityProviderSwapFee,
-        publishMarketSwapFee: poolData?.publishMarketSwapFee,
+        publishMarketSwapFee: asset?.accessDetails?.publisherMarketOrderFee,
         consumeMarketSwapFee: '0'
       }
-
-      const orderPriceAndFees = await getOrderPriceAndFees(
+      const _orderPriceAndFees = await getOrderPriceAndFees(
         asset,
         ZERO_ADDRESS,
-        params
+        paramsForPool
       )
 
-      setOrderPriceAndFees(orderPriceAndFees)
+      setOrderPriceAndFees(_orderPriceAndFees)
+      !orderPriceAndFees && setIsLoading(false)
     }
 
     init()
     /**
      * we listen to the assets' changes to get the most updated price
-     * based on the asset and the poolData's information
+     * based on the asset and the poolData's information.
+     * Not adding isLoading and getOpcFeeForToken because we set these here. It is a compromise
      */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [asset, accountId, poolData, getOpcFeeForToken])
 
   useEffect(() => {

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

@@ -10,11 +10,12 @@ import Token from '../../../../@shared/Token'
 import content from '../../../../../../content/price.json'
 import styles from './index.module.css'
 import Update from './Update'
+import { useMarketMetadata } from '@context/MarketMetadata'
 
 export default function PoolSections() {
   const { asset } = useAsset()
   const { poolData, poolInfo, poolInfoUser, poolInfoOwner } = usePool()
-
+  const { getOpcFeeForToken } = useMarketMetadata()
   return (
     <>
       <PoolSection className={styles.dataToken}>
@@ -118,7 +119,10 @@ export default function PoolSections() {
         />
         <Token
           symbol="% OPC fee"
-          balance={poolInfo?.opcFee}
+          balance={getOpcFeeForToken(
+            poolInfo?.baseTokenAddress,
+            asset?.chainId
+          )}
           noIcon
           size="mini"
         />