diff --git a/src/@utils/subgraph.ts b/src/@utils/subgraph.ts index 71095e067..ec6048ba0 100644 --- a/src/@utils/subgraph.ts +++ b/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 = 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, diff --git a/src/components/Publish/Pricing/Fees.tsx b/src/components/Publish/Pricing/Fees.tsx index 88a7bc06c..3936dbcbf 100644 --- a/src/components/Publish/Pricing/Fees.tsx +++ b/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 }) => ( } - 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(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'} />