Adding Competition Solver tab to settlements page #590

0xaaiden · 2023-08-18T06:44:13Z

Summary

This pull request introduces a new feature to the settlements page - the "Competition Solver tab". This tab provides a detailed view of solver competitions, showing relevant data such as Auction ID, Auction Start Block, and more. The intention behind this tab is to give users a comprehensive overview of solver competitions, aiding in transparency and insight.

To Test

Access the Competition Solver tab:

Open the settlements page ../tx/{txid} .
Navigate to the new "Competition Solver tab".
Expectation: The tab should display data entries like Auction ID, Auction Start Block, Liquidity Collected Block, etc.
The data should be organized in rows with copy buttons, aiding easy sharing.

Interact with UI elements:

Try the copy button to check if data gets copied to clipboard efficiently.
Hover over the tooltips to see concise explanations.
Tooltips should provide a clear brief about each entry.

vercel · 2023-08-18T06:44:15Z

Someone is attempting to deploy a commit to the cow Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2023-08-22T10:30:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
explorer-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 28, 2023 9:46am

alfetopito · 2023-08-22T10:46:53Z

src/api/operator/operatorApi.ts

+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)
+}


This unfortunately doesn't work with prod batches in this PR, as it only queries the env corresponding to the page's env.

See for example this goerli batch

It returns a 404 for barn while it has the proper response on prod

But I think you'd be aware of that as it for sure happened while developing/testing.

Long story short, there are 2 databases, and we usually query the one corresponding to the loaded environment.
In some cases though, we need to query both.
Check for reference the implementation of getTxOrders:

https://github.com/cowprotocol/explorer/blob/develop/src/api/operator/operatorApi.ts#L104-L119

Also, this endpoint should be moved to the https://github.com/cowprotocol/cow-sdk/. I'll raise this internally and see that we include it in the next release. No action from your part on this regard, just mentioning it.

Upon further investigation, it seems that even batches which were made against barn still don't return anything in the solver endpoint for the same env, such as the one I intentionally created https://explorer-dev-git-fork-0xaaiden-feature-transacti-ee2e16-cowswap.vercel.app/gc/tx/0x540537ad6d2d7948a232f39ec7e91c66f2c0a476d5ca84617a2fec2d3eb5ce54?tab=solver

Looks like it's something on the backend side.

A quick fix would be to always query prod, although I don't think querying both requires much effort.

I'll reach out internally about this as well.

This is odd. The same query now is returning values properly o.O

https://explorer-dev-git-fork-0xaaiden-feature-transacti-ee2e16-cowswap.vercel.app/gc/tx/0x540537ad6d2d7948a232f39ec7e91c66f2c0a476d5ca84617a2fec2d3eb5ce54?tab=solver

Got an answer that clarifies why it suddenly became available.

Searching by hash takes 65 blocks to propagate (we wait for the block to be final). If you know the auction id you can search immediately using that identifier

I suggest you to watch for the current block and compare with the tx block.
While the different is < 65, don't bother querying the backend, and show some indication in the UI saying the data is not yet available.

alfetopito · 2023-08-22T11:13:39Z

One more feedback

On gchain, the native token name is xDai

There's a mapping for that https://github.com/cowprotocol/explorer/blob/develop/src/const.ts#L183

… instead of barn

alfetopito · 2023-08-24T14:03:37Z

src/api/currentblock/currentBlockchainApi.ts

That's not needed, the blocknumber can be fetched from the chain using the web3 api

explorer/src/apps/explorer/api.ts

Line 4 in 43af8ff

const web3 = createWeb3Api()

Just call web3.eth.getBlockNumber() https://docs.web3js.org/api/web3-eth/function/getBlockNumber/

You could add the blocknumber to the global state and have an updater running every ~15s.
Or have a more "local" state and instantiate the updater only when needed, which is when the tx details page is loaded & the block difference is < 65.

I'm going too far with ideas, I'll let you take your pick or propose something else.

Changes made as advertised, just trying to keep it simple and clear

alfetopito · 2023-08-25T16:55:43Z

webpack.config.js

-    OPERATOR_URL_STAGING_MAINNET: 'https://barn.api.cow.fi/mainnet/api',
-    OPERATOR_URL_STAGING_GOERLI: 'https://barn.api.cow.fi/goerli/api',
-    OPERATOR_URL_STAGING_XDAI: 'https://barn.api.cow.fi/xdai/api',
+    OPERATOR_URL_STAGING_MAINNET: 'https://api.cow.fi/mainnet/api',
+    OPERATOR_URL_STAGING_GOERLI: 'https://api.cow.fi/goerli/api',
+    OPERATOR_URL_STAGING_XDAI: 'https://api.cow.fi/xdai/api',


Please don't change that.

What you need is in this comment which still applies https://github.com/cowprotocol/explorer/pull/590/files#r1301457728

@alfetopito adressed

anxolin

As a meta-feedback, the PR introduces 1.2K new lines of code. This makes it hard for us to thoroughly review such a big PR.

Ideally, it should be a more iterative process.

Also, this PR define lots of types that should be part of the SDK

anxolin · 2023-08-28T10:10:54Z

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'


@fairlighteth any suggestion for the tab icon?

anxolin · 2023-08-28T10:14:20Z

src/components/common/Avatar/index.tsx

+}
+const BoringAvatar: React.FC<BoringAvatarProps> = ({ alt }) => {
+  const [colors] = useState<string[]>(
+    Array.from({ length: 6 }, () => Math.floor(Math.random() * 16777215).toString(16)),


Why this random logic?

also, nit, since you are creating a component call BoringAvatar, should you call the file with the same name?

Was getting a lot of close colors avatars without it.

anxolin · 2023-08-28T10:14:50Z

src/components/common/Avatar/index.tsx

+  )
+  return <Avatar alt={alt} src={`https://source.boringavatars.com/pixel/120/${alt}?colors=${colors.join(',')}`} />
+}
+export default BoringAvatar


nit: I would avoid default export. With named one is enough

anxolin · 2023-08-28T10:17:24Z

src/components/transaction/SolverCompetition/ClearingPrices.tsx

+      [o.sellTokenAddress]: o.sellToken,
+    })),
+  )
+  console.log(tokens)


delete console logs

anxolin · 2023-08-28T10:18:03Z

src/components/transaction/SolverCompetition/ClearingPrices.tsx

+const ClearingPrices: React.FC<Props> = (props) => {
+  const { orders, prices } = props
+  const networkId = useNetworkId() ?? undefined
+  const tokens: { [p: string]: TokenErc20 | null | undefined } = Object.assign(


should this be meoized?

anxolin · 2023-08-28T10:21:58Z

src/components/transaction/SolverCompetition/SolutionsTable.tsx

+  const { ranking, solver, solverAddress } = solution ?? {}
+  const [open, setOpen] = useState<boolean>(false)
+  const isMobile = useMediaBreakpoint(['xs', 'sm'])
+  const network = useNetworkId() || 1


no magic numbers. We probably have some defaults already

anxolin · 2023-08-28T10:22:49Z

src/components/transaction/SolverCompetition/SolutionsTable.tsx

+            Fees <HelpTooltip tooltip={tooltip.surplus} />
+          </HeaderTitle>
+          <HeaderValue>
+            {formatNumbers(fees)} {NATIVE_TOKEN_PER_NETWORK[network].symbol}


there's a lot of repetition. Just create consts

anxolin · 2023-08-28T10:23:08Z

src/components/transaction/SolverCompetition/SolutionsTable.tsx

+        <td>
+          <IconButton className={'mediumUp'} aria-label="expand row" size="small" onClick={(): void => setOpen(!open)}>
+            {open ? (
+              <FontAwesomeIcon color={'#ffffff'} icon={faChevronUp} />


hardcoded colors

anxolin · 2023-08-28T10:24:06Z

src/components/transaction/SolverCompetition/index.tsx

+                  <RowWithCopyButton
+                    textToCopy={data.auctionStartBlock.toString()}
+                    contentsToDisplay={data.auctionStartBlock.toString()}
+                    onCopy={(): void => onCopy('auctionId')}


avoid repetition

alfetopito · 2023-08-28T15:19:36Z

src/api/operator/operatorApi.ts

+    `[getSolverCompetitionByTx] Fetching Solver Competition on network ${networkId} with filters: tx_hash=${txHash}`,
+  )
+
+  const queryString = '/solver_competition/by_tx_hash/' + txHash


Just noticed, this endpoint is available from orderBookSDK since version https://github.com/cowprotocol/cow-sdk/releases/tag/v2.3.0

Update to the latest and you can use it directly.

You will still HAVE TO query both barn and prod envs, like it's done here: https://github.com/cowprotocol/explorer/blob/develop/src/api/operator/operatorApi.ts#L104-L119

vicebas · 2023-08-29T04:25:09Z

As a meta-feedback, the PR introduces 1.2K new lines of code. This makes it hard for us to thoroughly review such a big PR.

Ideally, it should be a more iterative process.

Also, this PR define lots of types that should be part of the SDK

The types on the SDK are missing the auctionStartBlock, for some reason

shoom3301 · 2023-08-29T05:05:11Z

src/api/operator/operatorMock.ts

+
+export async function getSolverCompetitionByTx(params: GetTxSolverCompetitionParams): Promise<RawSolverCompetition[]> {
+  const { txHash } = params
+  const solverCompetition = { ...RAW_SOLVER_COMPETITION }


Nitpick:

return [{ ...RAW_SOLVER_COMPETITION, transactionHash: txHash || solverCompetition.transactionHash }]

shoom3301 · 2023-08-29T05:06:18Z

src/components/transaction/SolverCompetition/ClearingPrices.tsx

+  const { token, network, amount } = props
+
+  const [invertedPrice, setInvertedPrice] = useState<boolean>(false)
+  console.log(token, amount.toNumber())


console.log should be removed

shoom3301 · 2023-08-29T05:07:11Z

src/components/transaction/SolverCompetition/ClearingPrices.tsx

+
+  const [invertedPrice, setInvertedPrice] = useState<boolean>(false)
+  console.log(token, amount.toNumber())
+  const calculatedPrice = amount.div(TEN_BIG_NUMBER.exponentiatedBy(36 - token.decimals.valueOf()))


What is 36? Would be great to move it to a const with an appropriate name + comment

shoom3301 · 2023-08-29T05:07:48Z

src/components/transaction/SolverCompetition/ClearingPrices.tsx

+    </PricesCard>
+  )
+}
+export default ClearingPrices


Please, use named exports instead of default

shoom3301 · 2023-08-29T05:08:39Z

src/components/transaction/SolverCompetition/index.tsx

+    }
+    getCurrentBlock()
+  }, [web3])
+  if (isLoadingTransactionData || !currentBlock) {


Ubernit:
Please, add a blank line between useEffect() and if() to improve the code readability

shoom3301 · 2023-08-29T05:11:07Z

src/hooks/useErc20.ts

@@ -32,9 +38,15 @@ async function _fetchErc20FromNetwork(params: {
    // Causing the caller to never know we got the token it was looking for
    return { ...nativeToken, address }
  }
-
+  const cacheKey = `${networkId}-${address}`
+  const cachedData = getCachedData(cacheKey, ERC20_INFO_CACHE)


getCachedData looks redundant. Bellow we just use ERC20_INFO_CACHE.set() I think here we also can just ERC20_INFO_CACHE.get()

shoom3301 · 2023-08-29T05:11:31Z

src/utils/env.ts

@@ -12,7 +12,7 @@ function checkEnvironment(host: string): EnvsFlags {
  const domainStagingRegex = getRegex(process.env.EXPLORER_APP_DOMAIN_REGEX_STAGING)
  const domainProdRegex = getRegex(process.env.EXPLORER_APP_DOMAIN_REGEX_PROD)
  const domainBarnRegex = getRegex(process.env.EXPLORER_APP_DOMAIN_REGEX_BARN)
-
+  console.log('host', domainStagingRegex, domainStagingRegex?.test(host), host)


console.log

shoom3301 · 2023-08-29T05:11:37Z

src/hooks/useSolverCompetitionData.ts

+        setSolverCompetition(cachedData)
+      } else {
+        const solverCompetition = await getSolverCompetitionByTx({ networkId: network, txHash: _txHash })
+        console.log('solverCompetition', solverCompetition)


console.log

shoom3301

This is amazing and huge work! Thank you!
The changes need some polishing.

alfetopito · 2023-08-29T08:46:17Z

As a meta-feedback, the PR introduces 1.2K new lines of code. This makes it hard for us to thoroughly review such a big PR.
Ideally, it should be a more iterative process.
Also, this PR define lots of types that should be part of the SDK

The types on the SDK are missing the auctionStartBlock, for some reason

That is true. I checked and the SDK version is outdated. Check this comment #590 (comment)

shoom3301 · 2024-01-08T14:30:51Z

Hi!
We don't see any activity in the PR for a long time.
Unfortunately, we have to close the PR since we are moving to another repo: cowprotocol/cowswap#3579.
We will be happy if you continue the work here.
Thank you!

vicebas and others added 23 commits August 7, 2023 00:39

create the SolverCompetition screen

b67c3b1

update Design

c0c8fdf

update Design

27605de

update Design

b083b62

update Design

439a82b

update Design

1b938a4

update Design

1dad41b

Create Clearing Prices

857783f

Create Clearing Prices

63c6676

Fixes on the description screen

56f76c6

add cache to Erc20

d655359

add mobile capacities

616ebae

fix solutions prices and executed orders

84eae43

fix small issues

a9d0509

fix formatting issues

e450c8a

avatar boring colors

5d6362a

fix prices issues

08bb57e

Update webpack.config.js

a5efe4a

Merge branch 'cowprotocol:develop' into feature/transactionScreens

9647448

fix prices issues with decimals

20685c5

Changes in display + tooltip info

3a26f19

Changes in display + tooltip info

4640729

Change staging API back to barn

4ff36d0

alfetopito requested a review from a team August 22, 2023 10:34

vercel bot deployed to Preview August 22, 2023 10:35 View deployment

alfetopito reviewed Aug 22, 2023

View reviewed changes

fix native token per network

4b87d3c

vercel bot deployed to Preview August 23, 2023 08:46 View deployment

vicebas and others added 4 commits August 24, 2023 01:08

add blockchain check before loading solvers

8b22c10

add blockchain check before loading solvers

0a2da0b

Update webpack.config.js to redirect staging api to use prod endpoint…

5f05d1b

… instead of barn

add blockchain check before loading solvers

ef5ceca

alfetopito reviewed Aug 24, 2023

View reviewed changes

vicebas and others added 4 commits August 24, 2023 11:14

add blockchain check before loading solvers

9594f68

change api being used to get currentBlock

657e099

change api being used to get currentBlock

7a3a8bb

Update webpack.config.js

2a761b6

vercel bot deployed to Preview August 25, 2023 10:17 View deployment

alfetopito reviewed Aug 25, 2023

View reviewed changes

undo webpack changes

6d9e2e2

vercel bot deployed to Preview August 28, 2023 09:46 View deployment

anxolin reviewed Aug 28, 2023

View reviewed changes

alfetopito reviewed Aug 28, 2023

View reviewed changes

shoom3301 reviewed Aug 29, 2023

View reviewed changes

shoom3301 suggested changes Aug 29, 2023

View reviewed changes

shoom3301 closed this Jan 8, 2024

alfetopito added the solver label Jan 12, 2024

Adding Competition Solver tab to settlements page #590

Adding Competition Solver tab to settlements page #590

Conversation

0xaaiden commented Aug 18, 2023

Summary

To Test

vercel bot commented Aug 18, 2023

vercel bot commented Aug 22, 2023 • edited by github-actions bot Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alfetopito commented Aug 22, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anxolin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vicebas commented Aug 29, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shoom3301 left a comment

Choose a reason for hiding this comment

alfetopito commented Aug 29, 2023

shoom3301 commented Jan 8, 2024

vercel bot commented Aug 22, 2023 •

edited by github-actions bot

Loading