Adding Competition Solver tab to settlements page

src/api/operator/operatorApi.ts

@@ -2,7 +2,16 @@ import { Network } from 'types'
 import { buildSearchString } from 'utils/url'
 import { isProd, isStaging } from 'utils/env'
 
-import { GetOrderParams, GetOrdersParams, RawOrder, RawTrade, GetTxOrdersParams, WithNetworkId } from './types'
+import {
+  GetOrderParams,
+  GetOrdersParams,
+  RawOrder,
+  RawTrade,
+  GetTxOrdersParams,
+  WithNetworkId,
+  GetTxSolverCompetitionParams,
+  RawSolverCompetition,
+} from './types'
 import { fetchQuery } from 'api/baseApi'
 import { orderBookSDK } from 'cowSdk'
 import { Address, UID } from '@cowprotocol/cow-sdk'
@@ -150,6 +159,24 @@ export async function getTrades(
   return [...trades[0], ...trades[1]]
 }
 
+/**
+ * Gets information about solver competition By Transaction Hash
+ *  Required params:
+ *   - txHash: string
+ *
+ */
+export async function getSolverCompetitionByTx(params: GetTxSolverCompetitionParams): Promise<RawSolverCompetition> {
+  const { networkId, txHash } = params
+
+  console.log(
+    `[getSolverCompetitionByTx] Fetching Solver Competition on network ${networkId} with filters: tx_hash=${txHash}`,
+  )
+
+  const queryString = '/solver_competition/by_tx_hash/' + txHash
+
+  return _fetchQuery(networkId, queryString)
+}
+
 function _fetchQuery<T>(networkId: Network, queryString: string): Promise<T>
 function _fetchQuery<T>(networkId: Network, queryString: string, nullOn404: true): Promise<T | null>
 function _fetchQuery<T>(networkId: Network, queryString: string, nullOn404?: boolean): Promise<T | null> {

src/api/operator/operatorMock.ts

@@ -6,9 +6,11 @@ import {
   GetTradesParams,
   RawOrder,
   RawTrade,
+  GetTxSolverCompetitionParams,
+  RawSolverCompetition,
 } from './types'
 
-import { RAW_ORDER, RAW_TRADE } from '../../../test/data'
+import { RAW_ORDER, RAW_SOLVER_COMPETITION, RAW_TRADE } from '../../../test/data'
 import { GetAccountOrdersResponse } from './accountOrderUtils'
 
 export async function getOrder(params: GetOrderParams): Promise<RawOrder> {
@@ -57,3 +59,11 @@ export async function getTrades(params: GetTradesParams): Promise<RawTrade[]> {
 
   return [trade]
 }
+
+export async function getSolverCompetitionByTx(params: GetTxSolverCompetitionParams): Promise<RawSolverCompetition[]> {
+  const { txHash } = params
+  const solverCompetition = { ...RAW_SOLVER_COMPETITION }
+  solverCompetition.transactionHash = txHash || solverCompetition.transactionHash
+
+  return [solverCompetition]
+}

src/api/operator/types.ts

@@ -2,7 +2,8 @@ import BigNumber from 'bignumber.js'
 
 import { TokenErc20 } from '@gnosis.pm/dex-js'
 import { Network } from 'types'
-import { EnrichedOrder, OrderKind, Trade as TradeMetaData } from '@cowprotocol/cow-sdk'
+import { EnrichedOrder, OrderKind, Trade as TradeMetaData, SolverCompetitionResponse } from '@cowprotocol/cow-sdk'
+import { SolverSettlement } from '@cowprotocol/cow-sdk/dist/order-book/generated/models/SolverSettlement'
 
 export type TxHash = string
 
@@ -71,6 +72,23 @@ export type Trade = Pick<RawTrade, 'blockNumber' | 'logIndex' | 'owner' | 'txHas
   surplusPercentage?: BigNumber
 }
 
+export type Solution = SolverSettlement & {
+  ranking: number
+}
+
+/**
+ * Raw API SolverCompetition response type
+ */
+export type RawSolverCompetition = SolverCompetitionResponse & {
+  solutions: Solution[]
+  auctionStartBlock: number
+}
+
+/**
+ * Enriched SolverCompetition type
+ */
+export type SolverCompetition = RawSolverCompetition
+
 export type WithNetworkId = { networkId: Network }
 
 export type GetOrderParams = WithNetworkId & {
@@ -94,6 +112,10 @@ export type GetTxOrdersParams = WithNetworkId & {
   txHash: TxHash
 }
 
+export type GetTxSolverCompetitionParams = WithNetworkId & {
+  txHash: TxHash
+}
+
 export type GetTradesParams = WithNetworkId & {
   owner?: string
   orderId?: string

src/apps/explorer/components/TransactionsTableWidget/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { faListUl, faProjectDiagram } from '@fortawesome/free-solid-svg-icons'
+import { faListUl, faProjectDiagram, faHandshakeAngle } from '@fortawesome/free-solid-svg-icons'
 
 import { useQuery, useUpdateQueryString } from 'hooks/useQuery'
 import { BlockchainNetwork, TransactionsTableContext } from './context/TransactionsTableContext'
@@ -17,6 +17,7 @@ import { Notification } from 'components/Notification'
 import { TransactionBatchGraph } from 'apps/explorer/components/TransanctionBatchGraph'
 import CowLoading from 'components/common/CowLoading'
 import { TAB_QUERY_PARAM_KEY } from 'apps/explorer/const'
+import { SolverCompetition } from 'components/transaction/SolverCompetition'
 
 interface Props {
   txHash: string
@@ -27,6 +28,7 @@ interface Props {
 enum TabView {
   ORDERS = 1,
   GRAPH,
+  SOLVER = 3,
 }
 
 const DEFAULT_TAB = TabView[1]
@@ -48,6 +50,11 @@ const tabItems = (orders: Order[] | undefined, networkId: BlockchainNetwork, txH
       tab: <TabIcon title="Graph" iconFontName={faProjectDiagram} />,
       content: <TransactionBatchGraph orders={orders} networkId={networkId} txHash={txHash} />,
     },
+    {
+      id: TabView.SOLVER,
+      tab: <TabIcon title="Solver Competition" iconFontName={faHandshakeAngle} />,
+      content: <SolverCompetition orders={orders} networkId={networkId} txHash={txHash} />,
+    },
   ]
 }
 

src/components/common/Avatar/index.tsx

@@ -0,0 +1,13 @@
+import React, { useState } from 'react'
+import { Avatar } from '@material-ui/core'
+
+type BoringAvatarProps = {
+  alt?: string
+}
+const BoringAvatar: React.FC<BoringAvatarProps> = ({ alt }) => {
+  const [colors] = useState<string[]>(
+    Array.from({ length: 6 }, () => Math.floor(Math.random() * 16777215).toString(16)),
+  )
+  return <Avatar alt={alt} src={`https://source.boringavatars.com/pixel/120/${alt}?colors=${colors.join(',')}`} />
+}
+export default BoringAvatar

src/components/transaction/SolverCompetition/ClearingPrices.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { useNetworkId } from 'state/network'
+import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable'
+import { PricesCard } from 'components/transaction/SolverCompetition/styled'
+import { formatSmart, safeTokenName, TokenErc20 } from '@gnosis.pm/dex-js'
+import { Network } from 'types'
+import TokenImg from 'components/common/TokenImg'
+import { HIGH_PRECISION_SMALL_LIMIT, NO_ADJUSTMENT_NEEDED_PRECISION } from 'apps/explorer/const'
+import { getImageAddress } from 'utils'
+import { invertPrice } from '@gnosis.pm/dex-js/build-esm/utils/price'
+import Icon from 'components/Icon'
+import { faExchangeAlt } from '@fortawesome/free-solid-svg-icons'
+import BigNumber from 'bignumber.js'
+import { NATIVE_TOKEN_PER_NETWORK, TEN_BIG_NUMBER } from 'const'
+import { Order } from 'api/operator'
+import { AuctionPrices } from '@cowprotocol/cow-sdk'
+
+type Props = {
+  orders: Order[]
+  prices: AuctionPrices
+}
+
+type ItemProps = {
+  token: TokenErc20
+  amount: BigNumber
+  network: Network
+}
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const Item: React.FC<ItemProps> = (props) => {
+  const { token, network, amount } = props
+
+  const [invertedPrice, setInvertedPrice] = useState<boolean>(false)
+  console.log(token, amount.toNumber())
+  const calculatedPrice = amount.div(TEN_BIG_NUMBER.exponentiatedBy(36 - token.decimals.valueOf()))
+  const displayPrice = (invertedPrice ? invertPrice(calculatedPrice) : calculatedPrice).toString(10)
+  const formattedPrice = formatSmart({
+    amount: displayPrice,
+    precision: NO_ADJUSTMENT_NEEDED_PRECISION,
+    smallLimit: HIGH_PRECISION_SMALL_LIMIT,
+    decimals: 6,
+    isLocaleAware: false,
+  })
+
+  const tokenImage = getImageAddress(token?.address ?? '', network)
+  const tokenSymbol = token && safeTokenName(token)
+
+  const tokenNames = !invertedPrice
+    ? [tokenSymbol, NATIVE_TOKEN_PER_NETWORK[network].symbol]
+    : [NATIVE_TOKEN_PER_NETWORK[network].symbol, tokenSymbol]
+  return (
+    <div key={token?.address}>
+      <TokenImg address={tokenImage} />
+      {`1 ${tokenNames[0]}`} = {formattedPrice} {`${tokenNames[1]}`}
+      {<Icon icon={faExchangeAlt} onClick={(): void => setInvertedPrice(!invertedPrice)} />}
+    </div>
+  )
+}
+
+const ClearingPrices: React.FC<Props> = (props) => {
+  const { orders, prices } = props
+  const networkId = useNetworkId() ?? undefined
+  const tokens: { [p: string]: TokenErc20 | null | undefined } = Object.assign(
+    {},
+    ...orders.map((o): { [p: string]: TokenErc20 | null | undefined } => ({
+      [o.buyTokenAddress]: o.buyToken,
+      [o.sellTokenAddress]: o.sellToken,
+    })),
+  )
+  console.log(tokens)
+  if (!networkId) {
+    return <EmptyItemWrapper>{'Can&apos;t load details'}</EmptyItemWrapper>
+  }
+  return (
+    <PricesCard>
+      {Object.values(tokens).map((token, key) => {
+        return (
+          <>{token && <Item key={key} token={token} amount={BigNumber(prices[token.address])} network={networkId} />}</>
+        )
+      })}
+    </PricesCard>
+  )
+}
+export default ClearingPrices