Merge pull request #3638 from cowprotocol/develop

chore: add three fixes to the release

apps/explorer/README.md

@@ -1,4 +1,6 @@
-# Explorer
+# CoW Protocol Explorer
+
+Allows you to explore the protocol orders and trades.
 
 ## 🏃‍♀️ Run it locally
 

apps/explorer/src/components/AppData/DecodeAppData.tsx

@@ -7,6 +7,7 @@ import Spinner from 'components/common/Spinner'
 import { DEFAULT_IPFS_READ_URI, IPFS_INVALID_APP_IDS } from 'const'
 import { appDataHexToCid, fetchDocFromAppDataHex } from 'hooks/useAppData'
 import useSafeState from 'hooks/useSafeState'
+import { decodeFullAppData } from 'utils/decodeFullAppData'
 
 type Props = {
   appData: string
@@ -17,12 +18,12 @@ type Props = {
 async function _getDecodedAppData(
   appData: string,
   isLegacyAppDataHex: boolean,
-  fullAppData?: string,
+  fullAppData?: string
 ): Promise<{ decodedAppData?: void | AnyAppDataDocVersion; isError: boolean }> {
   // If the full appData is available, we try to parse it as JSON
   if (fullAppData) {
     try {
-      const decodedAppData = JSON.parse(fullAppData)
+      const decodedAppData = decodeFullAppData(fullAppData, true)
       return { decodedAppData, isError: false }
     } catch (error) {
       console.error('Error parsing fullAppData from the API', { fullAppData }, error)
@@ -94,7 +95,7 @@ const DecodeAppData = (props: Props): JSX.Element => {
       setShowDecodedAppData,
       showDecodedAppData,
       isLegacyAppDataHex,
-    ],
+    ]
   )
 
   useEffect(() => {

apps/explorer/src/components/orders/DetailsTable/index.tsx

@@ -25,6 +25,7 @@ import { sendEvent } from 'components/analytics'
 import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
 import DecodeAppData from 'components/AppData/DecodeAppData'
 import { TAB_QUERY_PARAM_KEY } from '../../../explorer/const'
+import { getUiOrderType } from 'utils/getUiOrderType'
 
 const Table = styled(SimpleTable)`
   > tbody > tr {
@@ -301,7 +302,8 @@ export function DetailsTable(props: Props): JSX.Element | null {
               <HelpTooltip tooltip={tooltip.type} /> Type
             </td>
             <td>
-              {capitalize(kind)} {order.class} order {partiallyFillable ? '(Partially fillable)' : '(Fill or Kill)'}
+              {capitalize(kind)} {getUiOrderType(order).toLowerCase()} order{' '}
+              {partiallyFillable ? '(Partially fillable)' : '(Fill or Kill)'}
             </td>
           </tr>
           <tr>

apps/explorer/src/state/network/NetworkUpdater.tsx

@@ -10,7 +10,7 @@ import { CHAIN_ID_TO_URL_PREFIX, NETWORK_PREFIXES } from '../../consts/network'
 
 const MAINNET_PREFIX = CHAIN_ID_TO_URL_PREFIX[SupportedChainId.MAINNET]
 const NETWORK_PREFIXES_RAW: [SupportedChainId, string][] = Object.keys(CHAIN_ID_TO_URL_PREFIX).map((key) => [
-  key as unknown as SupportedChainId,
+  +key, // SupportedChainId is a number enum
   CHAIN_ID_TO_URL_PREFIX[key],
 ])
 const NETWORK_ID_BY_PREFIX: Map<string, SupportedChainId> = new Map(

apps/explorer/src/utils/decodeFullAppData.ts

@@ -0,0 +1,28 @@
+import { AnyAppDataDocVersion } from '@cowprotocol/app-data'
+
+/**
+ * Decode appData from a string to a AnyAppDataDocVersion instance
+ * Keep in mind it can be a valid JSON but not necessarily a valid AppDataDoc
+ *
+ * Returns undefined if the given appData is not a valid JSON
+ * When `throwOnError` is true, it will throw an error if the given appData is not a valid JSON
+ */
+export function decodeFullAppData(
+  appData: string | null | undefined,
+  throwOnError?: true,
+): AnyAppDataDocVersion | undefined {
+  if (!appData) {
+    return undefined
+  }
+
+  try {
+    return JSON.parse(appData)
+  } catch (e) {
+    if (throwOnError) {
+      throw e
+    }
+
+    console.info('[decodeFullAppData] given appData is not a valid JSON', appData)
+    return undefined
+  }
+}

apps/explorer/src/utils/getUiOrderType.ts

@@ -0,0 +1,43 @@
+import { latest } from '@cowprotocol/app-data'
+import { OrderClass } from '@cowprotocol/cow-sdk'
+import { Order } from 'api/operator'
+import { decodeFullAppData } from 'utils/decodeFullAppData'
+
+/**
+ * UiOrderType based on appData, falling back to backend order class.
+ *
+ * Similar to CoW Swap, but not exactly like it.
+ *
+ * Here, MARKET remains as MARKET, while on CoW Swap it's translated to SWAP.
+ * Also, we keep the LIQUIDITY order type as it, while there it's translated to LIMIT.
+ *
+ * In summary, it matches 1:1 appData.metadata.orderClass.orderClass enum
+ */
+export enum UiOrderType {
+  MARKET = 'MARKET',
+  LIMIT = 'LIMIT',
+  LIQUIDITY = 'LIQUIDITY',
+  TWAP = 'TWAP',
+}
+
+const API_ORDER_CLASS_TO_UI_ORDER_TYPE_MAP: Record<OrderClass, UiOrderType> = {
+  [OrderClass.MARKET]: UiOrderType.MARKET,
+  [OrderClass.LIMIT]: UiOrderType.LIMIT,
+  [OrderClass.LIQUIDITY]: UiOrderType.LIQUIDITY,
+}
+
+export function getUiOrderType({ fullAppData, class: orderClass }: Order): UiOrderType {
+  const appData = decodeFullAppData(fullAppData)
+
+  const appDataOrderClass = appData?.metadata?.orderClass as latest.OrderClass | undefined
+  const typeFromAppData = UiOrderType[appDataOrderClass?.orderClass.toUpperCase() || '']
+
+  // 1. AppData info has priority as it's what's more precise
+  if (typeFromAppData) {
+    return typeFromAppData
+  }
+
+  // 3. Fallback to API classification.
+  // Least precise as it doesn't distinguish twap type and uses backend logic which doesn't match frontend's classification
+  return API_ORDER_CLASS_TO_UI_ORDER_TYPE_MAP[orderClass]
+}

libs/tokens/src/hooks/tokens/useSearchToken.ts

@@ -72,7 +72,7 @@ export function useSearchToken(input: string | null): TokenSearchResponse {
 
   useEffect(() => {
     setIsLoading(true)
-  }, [input])
+  }, [inputLowerCase])
 
   useEffect(() => {
     // When there are results from toke lists, then we don't need to wait for the rest