Update fee display inside publish form (#1128)

* use fixed and pool swap fees from app config inside publish form price

* get opc fees from subgraph

* fixed undefined opcFees

* fixed get opc fees query

* removed logs, unused imports and added types

* remove unused import

* fetch opc fees from wallet network

* use fallback chainId and add chainId to dependencies array

* get app config from site metadata

* fixed getOpcFees typo

* changed community fee field value

src/@utils/subgraph.ts

@@ -17,6 +17,7 @@ import {
   OrdersData_orders_datatoken as OrdersDatatoken
 } from '../@types/subgraph/OrdersData'
 import { UserSalesQuery as UsersSalesList } from '../@types/subgraph/UserSalesQuery'
+import { OpcFeesQuery as OpcFeesData } from '../@types/subgraph/OpcFeesQuery'
 
 export interface UserLiquidity {
   price: string
@@ -188,6 +189,17 @@ const TopSalesQuery = gql`
   }
 `
 
+const OpcFeesQuery = gql`
+  query OpcFeesQuery($id: ID!) {
+    opc(id: $id) {
+      swapOceanFee
+      swapNonOceanFee
+      consumeFee
+      providerFee
+    }
+  }
+`
+
 export function getSubgraphUri(chainId: number): string {
   const config = getOceanConfig(chainId)
   return config.subgraphUri
@@ -242,6 +254,26 @@ export async function fetchDataForMultipleChains(
   return datas
 }
 
+export async function getOpcFees(chainId: number) {
+  let opcFees
+  const variables = {
+    id: 1
+  }
+  const context = getQueryContext(chainId)
+  try {
+    const response: OperationResult<OpcFeesData> = await fetchData(
+      OpcFeesQuery,
+      variables,
+      context
+    )
+    opcFees = response?.data?.opc
+  } catch (error) {
+    console.error('Error fetchData: ', error.message)
+    throw Error(error.message)
+  }
+  return opcFees
+}
+
 export async function getPreviousOrders(
   id: string,
   account: string,

src/components/Publish/Pricing/Fees.tsx

@@ -1,18 +1,24 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import Tooltip from '@shared/atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useField } from 'formik'
 import Input from '@shared/FormInput'
 import Error from './Error'
+import { getOpcFees } from '../../../@utils/subgraph'
+import { OpcFeesQuery_opc as OpcFeesData } from '../../../@types/subgraph/OpcFeesQuery'
+import { useWeb3 } from '@context/Web3'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
 
 const Default = ({
   title,
   name,
-  tooltip
+  tooltip,
+  value
 }: {
   title: string
   name: string
   tooltip: string
+  value: string
 }) => (
   <Input
     label={
@@ -21,7 +27,7 @@ const Default = ({
         <Tooltip content={tooltip} />
       </>
     }
-    value="0.1"
+    value={value}
     name={name}
     postfix="%"
     readOnly
@@ -37,6 +43,15 @@ export default function Fees({
   pricingType: 'dynamic' | 'fixed'
 }): ReactElement {
   const [field, meta] = useField('pricing.swapFee')
+  const [opcFees, setOpcFees] = useState<OpcFeesData>(undefined)
+  const { chainId } = useWeb3()
+  const { appConfig } = useSiteMetadata()
+
+  useEffect(() => {
+    getOpcFees(chainId || 1).then((response: OpcFeesData) => {
+      setOpcFees(response)
+    })
+  }, [chainId])
 
   return (
     <>
@@ -64,12 +79,18 @@ export default function Fees({
           title="Community Fee"
           name="communityFee"
           tooltip={tooltips.communityFee}
+          value={opcFees?.swapOceanFee || '0'}
         />
 
         <Default
           title="Marketplace Fee"
           name="marketplaceFee"
           tooltip={tooltips.marketplaceFee}
+          value={
+            pricingType === 'dynamic'
+              ? appConfig.publisherMarketPoolSwapFee
+              : appConfig.publisherMarketFixedSwapFee
+          }
         />
       </div>
     </>