Adding Competition Solver tab to settlements page

src/api/currentblock/currentBlockchainApi.ts

 const web3 = createWeb3Api() 
 const web3 = createWeb3Api() 
@@ -0,0 +1,74 @@
+import BigNumber from 'bignumber.js'
+
+const ETH_BLOCKCHAIN_URL = 'https://api.blockcypher.com/v1/eth/main'
+const XDAI_BLOCKCHAIN_URL = 'https://gnosis.blockscout.com/api/v2/stats'
+
+type ETHCurrentBlock = {
+  name: string
+  height: number
+  hash: string
+  time: Date
+  latest_url: string
+  previous_hash: string
+  previous_url: string
+  peer_count: number
+  unconfirmed_count: number
+  high_gas_price: BigNumber
+  medium_gas_price: BigNumber
+  low_gas_price: BigNumber
+  high_priority_fee: BigNumber
+  medium_priority_fee: BigNumber
+  low_priority_fee: BigNumber
+  base_fee: BigNumber
+  last_fork_height: BigNumber
+  last_fork_hash: string
+}
+
+export interface XDAICurrentBlock {
+  average_block_time: number
+  coin_price: string
+  gas_prices: GasPrices
+  gas_used_today: BigNumber
+  market_cap: string
+  network_utilization_percentage: number
+  static_gas_price: BigNumber
+  total_addresses: BigNumber
+  total_blocks: number
+  total_gas_used: BigNumber
+  total_transactions: BigNumber
+  transactions_today: BigNumber
+}
+
+export interface GasPrices {
+  average: number
+  fast: number
+  slow: number
+}
+export interface CurrentBlockAPI {
+  getETHCurrentBlock(): Promise<ETHCurrentBlock>
+  getXDaiCurrentBlock(): Promise<XDAICurrentBlock>
+}
+
+export class CurrentBlockApiImpl {
+  public async getETHCurrentBlock(): Promise<ETHCurrentBlock> {
+    const response = await fetch(ETH_BLOCKCHAIN_URL, {
+      method: 'GET',
+      mode: 'no-cors',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    return response.json()
+  }
+
+  public async getXDaiCurrentBlock(): Promise<XDAICurrentBlock> {
+    const response = await fetch(XDAI_BLOCKCHAIN_URL, {
+      method: 'GET',
+      mode: 'no-cors',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    return response.json()
+  }
+}

src/api/currentblock/index.ts

@@ -0,0 +1,8 @@
+import { CurrentBlockAPI } from 'api/currentblock/currentBlockchainApi'
+import { CurrentBlockApiProxy } from 'api/currentblock/currentBlockApiProxy'
+
+export function createCurrentBlockchainAPI(): CurrentBlockAPI {
+  const CurrentBlockApi: CurrentBlockAPI = new CurrentBlockApiProxy()
+  window['CurrentBlockAPI'] = CurrentBlockApi
+  return CurrentBlockApi
+}

src/components/transaction/SolverCompetition/index.tsx

@@ -16,6 +16,8 @@ import { abbreviateString } from 'utils'
 import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
 import ClearingPrices from './ClearingPrices'
 import { Title } from 'apps/explorer/pages/styled'
+import { useCurrentBlock } from 'hooks/useCurrentBlock'
+import { useTransactionData } from 'hooks/useTransactionData'
 
 interface SolverCompetitionParams {
   txHash: string
@@ -34,10 +36,29 @@ const StatusIcon = ({ type }: StatusType): JSX.Element => {
 }
 
 export function SolverCompetition(params: SolverCompetitionParams): JSX.Element {
+  const { networkId, txHash } = params
+  const { isLoading, currentBlock } = useCurrentBlock()
+  const { isLoading: isLoadingTransactionData, trace } = useTransactionData(networkId, txHash)
+  if (isLoading || isLoadingTransactionData || !currentBlock) {
+    return (
+      <EmptyItemWrapper>
+        <CowLoading />
+      </EmptyItemWrapper>
+    )
+  }
+  if (!trace?.block_number || (trace?.block_number && trace?.block_number + 65 < currentBlock)) {
+    return (
+      <EmptyItemWrapper>
+        <p>Data not available yet</p>
+      </EmptyItemWrapper>
+    )
+  }
+  return <SolverCompetitionElement {...params} />
+}
+export function SolverCompetitionElement(params: SolverCompetitionParams): JSX.Element {
   const { networkId, txHash, orders } = params
   const { data, isLoading, error } = useGetSolverCompetition(txHash, networkId)
 
-  console.log(orders)
   const onCopy = (label: string): void =>
     sendEvent({
       category: 'Transaction Solve Competition screen',

src/hooks/useCurrentBlock.ts

@@ -0,0 +1,33 @@
+import { useNetworkId } from 'state/network'
+import { useEffect, useState } from 'react'
+import { NATIVE_TOKEN_PER_NETWORK, XDAI } from 'const'
+import { createCurrentBlockchainAPI } from 'api/currentblock'
+
+export const useCurrentBlock = (): { isLoading: boolean; currentBlock: number | void | undefined } => {
+  const network = useNetworkId() || undefined
+  const [isLoading, setLoading] = useState<boolean>(false)
+  const [currentBlock, setCurrentBlock] = useState<number | void>()
+  const currentBlockApi = createCurrentBlockchainAPI()
+
+  useEffect(() => {
+    async function getCurrentBlock(): Promise<void> {
+      if (network) {
+        setLoading(true)
+        try {
+          if (NATIVE_TOKEN_PER_NETWORK[network] == XDAI) {
+            const response = await currentBlockApi.getXDaiCurrentBlock()
+            setCurrentBlock(response.total_blocks)
+          } else {
+            const response = await currentBlockApi.getETHCurrentBlock()
+            setCurrentBlock(response.height)
+          }
+        } finally {
+          setLoading(false)
+        }
+      }
+    }
+    getCurrentBlock()
+  }, [network])
+
+  return { isLoading, currentBlock }
+}

webpack.config.js

@@ -12,7 +12,6 @@ const baseUrl = isProduction ? '' : '/'
 
 // FIXME: The apps right now depend on config they don't, se below attempt to check what was required. One example of something that is required but we don't need is --> for some reason "createTheGraphApi" it's being executed
 const CONFIG = loadConfig()
-
 const config = overrideEnvConfig(CONFIG)
 const EXPLORER_APP = {
   name: 'explorer',