Release/2.21.0

.env.example

@@ -4,6 +4,9 @@ MOCK=true
 # Enables autoconnect for mock mode (default = true)
 AUTOCONNECT=true
 
+# Public IPFS gateway
+REACT_APP_IPFS_READ_URI=https://cloudflare-ipfs.com/ipfs
+
 # Sentry
 #REACT_APP_SENTRY_DSN='https://<url>'
 #REACT_APP_SENTRY_TRACES_SAMPLE_RATE="1.0"

.github/workflows/vercel.yml

@@ -40,6 +40,7 @@ jobs:
 
       - name: Build Project Artifacts
         run: >
+          REACT_APP_IPFS_READ_URI=${{ secrets.REACT_APP_IPFS_READ_URI }}
           REACT_APP_SENTRY_DSN=${{ secrets.SENTRY_DSN }}
           REACT_APP_SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
           GOOGLE_ANALYTICS_ID=${{ secrets.GOOGLE_ANALYTICS_ID }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/explorer",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,
@@ -46,7 +46,7 @@
   "author": "",
   "dependencies": {
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/app-data": "v0.1.0-alpha.0",
+    "@cowprotocol/app-data": "v0.1.0",
     "@cowprotocol/contracts": "1.3.1",
     "@cowprotocol/cow-sdk": "^2.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",

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

@@ -118,8 +118,8 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
       >
         <ExplorerTabs
           tabItems={tabItems(txBatchTrades, networkId)}
-          defaultTab={tabViewSelected}
-          onChange={(key: number): void => onChangeTab(key)}
+          selectedTab={tabViewSelected}
+          updateSelectedTab={(key: number): void => onChangeTab(key)}
         />
       </TransactionsTableContext.Provider>
     </>

src/apps/explorer/pages/AppData/config.tsx

@@ -116,6 +116,7 @@ const deleteAllPropertiesByName = (schema: JSONSchema7, property: string): void
     deletePropertyPath(schema, property)
   }
   if (!schema.properties) return
+
   for (const field in schema.properties) {
     deleteAllPropertiesByName(schema.properties[field] as JSONSchema7, property)
   }
@@ -138,7 +139,15 @@ export const deletePropertyPath = (obj: any, path: any): void => {
     }
   }
 
-  delete obj[path.pop()]
+  const propName = path.pop()
+  if (!propName) {
+    return
+  }
+
+  const propConfigurable = Object.getOwnPropertyDescriptor(obj, propName)?.configurable || false
+  if (propConfigurable) {
+    delete obj[propName]
+  }
 }
 
 const quoteDependencies = {

src/apps/explorer/pages/AppData/index.tsx

@@ -79,8 +79,8 @@ const AppDataPage: React.FC = () => {
         <StyledExplorerTabs
           className={`appData-tab--${TabView[tabViewSelected].toLowerCase()}`}
           tabItems={tabItems(tabData, setTabData, onChangeTab)}
-          defaultTab={tabViewSelected}
-          onChange={(key: number): void => onChangeTab(key)}
+          selectedTab={tabViewSelected}
+          updateSelectedTab={(key: number): void => onChangeTab(key)}
         />
       </Content>
     </Wrapper>

src/components/common/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 
 // Components
@@ -37,10 +37,10 @@ export interface Props {
   readonly className?: string
   readonly tabItems: TabItemInterface[]
   readonly tabTheme: TabTheme
-  readonly defaultTab?: TabId
+  readonly selectedTab?: TabId
   readonly extra?: TabBarExtraContent
   readonly extraPosition?: 'top' | 'bottom'
-  onChange?: (activeId: TabId) => void
+  readonly updateSelectedTab?: (activeId: TabId) => void
 }
 
 const Wrapper = styled.div`
@@ -90,37 +90,33 @@ const Tabs: React.FC<Props> = (props) => {
   const {
     tabTheme = DEFAULT_TAB_THEME,
     tabItems,
-    defaultTab = 1,
+    selectedTab: parentSelectedTab,
     extra: tabBarExtraContent,
     extraPosition = 'top',
-    onChange,
+    updateSelectedTab: parentUpdateSelectedTab,
   } = props
 
-  const [activeTab, setActiveTab] = useState(defaultTab)
-
-  const onTabClick = useCallback(
-    (key: TabId): void => {
-      setActiveTab(key)
-      onChange?.(key)
-    },
-    [onChange],
-  )
-
-  useEffect(() => {
-    if (activeTab !== defaultTab) {
-      onTabClick(defaultTab)
-    }
-  }, [activeTab, defaultTab, onTabClick])
+  const [innerSelectedTab, setInnerSelectedTab] = useState(1)
+  // Use parent state management if provided, otherwise use internal state
+  const selectedTab = parentSelectedTab ?? innerSelectedTab
+  const updateTab = parentUpdateSelectedTab ?? setInnerSelectedTab
 
   return (
     <Wrapper>
       <TabList role="tablist" className="tablist">
         {tabItems.map(({ tab, id }) => (
-          <TabItem key={id} id={id} tab={tab} onTabClick={onTabClick} isActive={activeTab === id} tabTheme={tabTheme} />
+          <TabItem
+            key={id}
+            id={id}
+            tab={tab}
+            onTabClick={updateTab}
+            isActive={selectedTab === id}
+            tabTheme={tabTheme}
+          />
         ))}
         {extraPosition === 'top' && <ExtraContent extra={tabBarExtraContent} />}
       </TabList>
-      <TabContent tabItems={tabItems} activeTab={activeTab} />
+      <TabContent tabItems={tabItems} activeTab={selectedTab} />
       {extraPosition === 'bottom' && <ExtraContent extra={tabBarExtraContent} />}
     </Wrapper>
   )

src/components/orders/DetailsTable/DetailsTable.stories.tsx

@@ -30,7 +30,14 @@ const order = {
   txHash: '0x489d8fd1efd43394c7c2b26216f36f1ab49b8d67623047e0fcb60efa2a2c420b',
 }
 
-const defaultProps: Props = { order, areTradesLoading: false, showFillsButton: false, viewFills: () => null }
+const defaultProps: Props = {
+  order,
+  areTradesLoading: false,
+  showFillsButton: false,
+  viewFills: () => null,
+  isPriceInverted: false,
+  invertPrice: () => null,
+}
 
 export const DefaultFillOrKill = Template.bind({})
 DefaultFillOrKill.args = { ...defaultProps }

src/components/orders/DetailsTable/index.tsx

@@ -167,10 +167,12 @@ export type Props = {
   showFillsButton: boolean | undefined
   areTradesLoading: boolean
   viewFills: () => void
+  isPriceInverted: boolean
+  invertPrice: () => void
 }
 
 export function DetailsTable(props: Props): JSX.Element | null {
-  const { order, areTradesLoading, showFillsButton, viewFills } = props
+  const { order, areTradesLoading, showFillsButton, viewFills, isPriceInverted, invertPrice } = props
   const {
     uid,
     shortId,
@@ -321,6 +323,8 @@ export function DetailsTable(props: Props): JSX.Element | null {
                 sellAmount={sellAmount}
                 sellToken={sellToken}
                 showInvertButton
+                isPriceInverted={isPriceInverted}
+                invertPrice={invertPrice}
               />
             </td>
           </tr>
@@ -337,6 +341,8 @@ export function DetailsTable(props: Props): JSX.Element | null {
                     sellAmount={executedSellAmount}
                     sellToken={sellToken}
                     showInvertButton
+                    isPriceInverted={isPriceInverted}
+                    invertPrice={invertPrice}
                   />
                 ) : (
                   '-'

src/components/orders/FilledProgress/index.tsx

@@ -10,6 +10,8 @@ import { SurplusComponent, Percentage, Amount } from 'components/common/SurplusC
 
 export type Props = {
   order: Order
+  isPriceInverted?: boolean
+  invertPrice?: () => void
   fullView?: boolean
   lineBreak?: boolean
 }
@@ -48,7 +50,7 @@ const Wrapper = styled.div`
 const TableHeading = styled.div`
   padding: 0 0 1rem;
   display: grid;
-  grid-template-columns: minmax(min-content, auto) auto auto;
+  grid-template-columns: minmax(min-content, auto) auto auto auto;
   justify-content: flex-start;
   gap: 1.6rem;
 
@@ -158,6 +160,8 @@ export function FilledProgress(props: Props): JSX.Element {
   const {
     lineBreak = false,
     fullView = false,
+    isPriceInverted,
+    invertPrice,
     order: {
       executedFeeAmount,
       filledAmount,
@@ -239,11 +243,27 @@ export function FilledProgress(props: Props): JSX.Element {
           <ProgressBar showLabel={false} percentage={formattedPercentage} />
         </FilledContainer>
       </TableHeadingContent>
+      <TableHeadingContent>
+        <p className="title">Avg. Execution Price</p>
+        <p className="priceNumber">
+          {buyToken && sellToken && (
+            <OrderPriceDisplay
+              buyAmount={executedBuyAmount}
+              buyToken={buyToken}
+              sellAmount={executedSellAmount}
+              sellToken={sellToken}
+              showInvertButton
+              isPriceInverted={isPriceInverted}
+              invertPrice={invertPrice}
+            />
+          )}
+        </p>
+      </TableHeadingContent>
       <TableHeadingContent className="surplus">
         <p className="title">Total Surplus</p>
         <StyledSurplusComponent surplus={surplus} token={surplusToken} showHidden />
       </TableHeadingContent>
-      <TableHeadingContent className="limit-price">
+      <TableHeadingContent>
         <p className="title">Limit Price</p>
         <p className="priceNumber">
           {buyToken && sellToken && (
@@ -253,6 +273,8 @@ export function FilledProgress(props: Props): JSX.Element {
               sellAmount={sellAmount}
               sellToken={sellToken}
               showInvertButton
+              isPriceInverted={isPriceInverted}
+              invertPrice={invertPrice}
             />
           )}
         </p>

src/components/orders/OrderDetails/FillsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useMemo } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { faExchangeAlt } from '@fortawesome/free-solid-svg-icons'
 import { useNetworkId } from 'state/network'
@@ -211,6 +211,8 @@ export type Props = StyledUserDetailsTableProps & {
   trades: Trade[] | undefined
   order: Order | null
   tableState: TableState
+  isPriceInverted: boolean
+  invertPrice: () => void
 }
 
 interface RowProps {
@@ -321,14 +323,13 @@ const RowFill: React.FC<RowProps> = ({ trade, isPriceInverted, invertButton }) =
 }
 
 const FillsTable: React.FC<Props> = (props) => {
-  const { trades, order, tableState, showBorderTable = false } = props
-  const [isPriceInverted, setIsPriceInverted] = useState(false)
+  const { trades, order, tableState, isPriceInverted, invertPrice, showBorderTable = false } = props
 
-  const onInvert = useCallback(() => {
-    setIsPriceInverted((value) => !value)
-  }, [])
+  const invertButton = <Icon icon={faExchangeAlt} onClick={invertPrice} />
 
-  const invertButton = <Icon icon={faExchangeAlt} onClick={onInvert} />
+  const currentPageTrades = useMemo(() => {
+    return trades?.slice(tableState.pageOffset, tableState.pageOffset + tableState.pageSize)
+  }, [tableState.pageOffset, tableState.pageSize, trades])
 
   const tradeItems = (items: Trade[] | undefined): JSX.Element => {
     if (!items || items.length === 0) {
@@ -360,7 +361,9 @@ const FillsTable: React.FC<Props> = (props) => {
 
   return (
     <MainWrapper>
-      {order && <FilledProgress lineBreak fullView order={order} />}
+      {order && (
+        <FilledProgress lineBreak fullView order={order} isPriceInverted={isPriceInverted} invertPrice={invertPrice} />
+      )}
       <Wrapper
         showBorderTable={showBorderTable}
         header={
@@ -375,7 +378,7 @@ const FillsTable: React.FC<Props> = (props) => {
             <th>Execution time</th>
           </tr>
         }
-        body={tradeItems(trades)}
+        body={tradeItems(currentPageTrades)}
       />
     </MainWrapper>
   )

src/components/orders/OrderDetails/FillsTableWithData.tsx

@@ -8,10 +8,14 @@ import useFirstRender from 'hooks/useFirstRender'
 import CowLoading from 'components/common/CowLoading'
 import FillsTable from './FillsTable'
 
-export const FillsTableWithData: React.FC<{ areTokensLoaded: boolean; order: Order | null }> = ({
-  areTokensLoaded,
-  order,
-}) => {
+type Props = {
+  areTokensLoaded: boolean
+  order: Order | null
+  isPriceInverted: boolean
+  invertPrice: () => void
+}
+
+export const FillsTableWithData: React.FC<Props> = ({ areTokensLoaded, order, isPriceInverted, invertPrice }) => {
   const { trades, tableState } = useContext(FillsTableContext)
   const isFirstRender = useFirstRender()
 
@@ -20,6 +24,12 @@ export const FillsTableWithData: React.FC<{ areTokensLoaded: boolean; order: Ord
       <CowLoading />
     </EmptyItemWrapper>
   ) : (
-    <FillsTable order={order} trades={trades} tableState={tableState} />
+    <FillsTable
+      order={order}
+      trades={trades}
+      tableState={tableState}
+      isPriceInverted={isPriceInverted}
+      invertPrice={invertPrice}
+    />
   )
 }