435/share invert price fills tab (#454)

* Using single state for inverting the whole fills tab * Invert all prices on order details at once * Fix storybook
cowprotocol · Apr 20, 2023 · e7b3b00 · e7b3b00
1 parent 5337640
commit e7b3b00
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 21 deletions.
diff --git a/src/components/orders/DetailsTable/DetailsTable.stories.tsx b/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 }

diff --git a/src/components/orders/DetailsTable/index.tsx b/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}
                   />
                 ) : (
                   '-'

diff --git a/src/components/orders/FilledProgress/index.tsx b/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
 }
@@ -158,6 +160,8 @@ export function FilledProgress(props: Props): JSX.Element {
   const {
     lineBreak = false,
     fullView = false,
+    isPriceInverted,
+    invertPrice,
     order: {
       executedFeeAmount,
       filledAmount,
@@ -253,6 +257,8 @@ export function FilledProgress(props: Props): JSX.Element {
               sellAmount={sellAmount}
               sellToken={sellToken}
               showInvertButton
+              isPriceInverted={isPriceInverted}
+              invertPrice={invertPrice}
             />
           )}
         </p>

diff --git a/src/components/orders/OrderDetails/FillsTable.tsx b/src/components/orders/OrderDetails/FillsTable.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React 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,9 @@ 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 onInvert = useCallback(() => {
-    setIsPriceInverted((value) => !value)
-  }, [])
+  const { trades, order, tableState, isPriceInverted, invertPrice, showBorderTable = false } = props
 
-  const invertButton = <Icon icon={faExchangeAlt} onClick={onInvert} />
+  const invertButton = <Icon icon={faExchangeAlt} onClick={invertPrice} />
 
   const tradeItems = (items: Trade[] | undefined): JSX.Element => {
     if (!items || items.length === 0) {
@@ -360,7 +357,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={

diff --git a/src/components/orders/OrderDetails/FillsTableWithData.tsx b/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}
+    />
   )
 }
diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
@@ -83,6 +83,8 @@ const tabItems = (
   areTradesLoading: boolean,
   isOrderLoading: boolean,
   onChangeTab: (tab: TabView) => void,
+  isPriceInverted: boolean,
+  invertPrice: () => void,
 ): TabItemInterface[] => {
   const order = getOrderWithTxHash(_order, trades)
   const areTokensLoaded = order?.buyToken && order?.sellToken
@@ -101,6 +103,8 @@ const tabItems = (
             showFillsButton={showFills}
             viewFills={(): void => onChangeTab(TabView.FILLS)}
             areTradesLoading={areTradesLoading}
+            isPriceInverted={isPriceInverted}
+            invertPrice={invertPrice}
           />
         )}
         {!isOrderLoading && order && !areTokensLoaded && <p>Not able to load tokens</p>}
@@ -120,7 +124,14 @@ const tabItems = (
   const fillsTab = {
     id: TabView.FILLS,
     tab: <>{filledPercentage ? <span>Fills ({filledPercentage})</span> : <span>Fills</span>}</>,
-    content: <FillsTableWithData order={order} areTokensLoaded={!!areTokensLoaded} />,
+    content: (
+      <FillsTableWithData
+        order={order}
+        areTokensLoaded={!!areTokensLoaded}
+        isPriceInverted={isPriceInverted}
+        invertPrice={invertPrice}
+      />
+    ),
   }
 
   return [detailsTab, fillsTab]
@@ -151,6 +162,9 @@ export const OrderDetails: React.FC<Props> = (props) => {
     handleNextPage,
     handlePreviousPage,
   } = useTable({ initialState: { pageOffset: 0, pageSize: RESULTS_PER_PAGE } })
+  const [isPriceInverted, setIsPriceInverted] = useState(false)
+  const invertPrice = useCallback((): void => setIsPriceInverted((prev) => !prev), [])
+
   const [redirectTo, setRedirectTo] = useState(false)
   const history = useHistory()
 
@@ -212,7 +226,15 @@ export const OrderDetails: React.FC<Props> = (props) => {
       >
         <StyledExplorerTabs
           className={`orderDetails-tab--${TabView[tabViewSelected].toLowerCase()}`}
-          tabItems={tabItems(order, trades, areTradesLoading, isOrderLoading, onChangeTab)}
+          tabItems={tabItems(
+            order,
+            trades,
+            areTradesLoading,
+            isOrderLoading,
+            onChangeTab,
+            isPriceInverted,
+            invertPrice,
+          )}
           defaultTab={tabViewSelected}
           onChange={(key: number): void => onChangeTab(key)}
           extra={ExtraComponentNode}

diff --git a/src/components/orders/OrderPriceDisplay/index.tsx b/src/components/orders/OrderPriceDisplay/index.tsx
@@ -38,6 +38,7 @@ export type Props = {
   sellAmount: string | BigNumber
   sellToken: TokenErc20
   isPriceInverted?: boolean
+  invertPrice?: () => void
   showInvertButton?: boolean
 }
 
@@ -47,12 +48,16 @@ export function OrderPriceDisplay(props: Props): JSX.Element {
     buyToken,
     sellAmount,
     sellToken,
-    isPriceInverted: initialInvertedPrice = false,
+    isPriceInverted: parentIsInvertedPrice,
+    invertPrice: parentInvertPrice,
     showInvertButton = false,
   } = props
 
-  const [isPriceInverted, setIsPriceInverted] = useState(initialInvertedPrice)
-  const invert = (): void => setIsPriceInverted((curr) => !curr)
+  const [innerIsPriceInverted, setInnerIsPriceInverted] = useState(parentIsInvertedPrice)
+
+  // Use external state management if available, otherwise use inner one
+  const isPriceInverted = parentIsInvertedPrice ?? innerIsPriceInverted
+  const invert = parentInvertPrice ?? ((): void => setInnerIsPriceInverted((curr) => !curr))
 
   const calculatedPrice = calculatePrice({
     denominator: { amount: buyAmount, decimals: buyToken.decimals },