Execution time for trades table (#425)

* Execution time for trades table * TradesTimestamps type * Fix type * Fix type * Cache for fetchTradesTimestamps() * Fixed blinking of fills table isFirstLoading - seems to be excessive, because we should display loader only once at start and areTokensLoaded is enough * Fixed lint errors and remove node version restriction * Rollback node restriction * Changed isLoading flag meaning in useOrderTrades() Now it actually means isFirstLoading * Fix lint errors (#426)
cowprotocol · Apr 6, 2023 · f8996df · f8996df
1 parent fbebb04
commit f8996df
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 121 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,15 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[{*.ts,*.tsx}]
+ij_typescript_force_quote_style = true
+ij_typescript_use_double_quotes = false
+ij_typescript_use_semicolon_after_statement = false
diff --git a/src/api/operator/types.ts b/src/api/operator/types.ts
@@ -66,7 +66,7 @@ export type Trade = Pick<RawTrade, 'blockNumber' | 'logIndex' | 'owner' | 'txHas
   buyTokenAddress: string
   sellToken?: TokenErc20 | null
   sellTokenAddress: string
-  executionTime: Date
+  executionTime: Date | null
   surplusAmount?: BigNumber
   surplusPercentage?: BigNumber
 }

diff --git a/src/components/orders/FilledProgress/index.tsx b/src/components/orders/FilledProgress/index.tsx
@@ -43,18 +43,22 @@ const TableHeading = styled.div`
   padding: 1.6rem;
   display: flex;
   gap: 2rem;
+
   ${media.mobile} {
     flex-direction: column;
     gap: 1rem;
   }
+
   .title {
     text-transform: uppercase;
     font-size: 1.1rem;
   }
+
   .fillNumber {
     font-size: 3.2rem;
     margin: 1.5rem 0 1rem 0;
     color: ${({ theme }): string => theme.green};
+
     ${media.mobile} {
       font-size: 2.8rem;
     }
@@ -63,9 +67,11 @@ const TableHeading = styled.div`
   .priceNumber {
     font-size: 2.2rem;
     margin: 1rem 0;
+
     ${media.mobile} {
       font-size: 1.8rem;
     }
+
     span {
       line-height: 1;
     }
@@ -77,12 +83,15 @@ const TableHeadingContent = styled.div`
   flex-direction: column;
   justify-content: center;
   width: 27rem;
+
   ${media.mobile} {
     flex-direction: column;
   }
+
   .progress-line {
     width: 100%;
   }
+
   &.limit-price {
     width: 38rem;
   }
@@ -147,14 +156,14 @@ export function FilledProgress(props: Props): JSX.Element {
       <OrderAssetsInfoWrapper>
         <b>
           {/* Executed part (bought/sold tokens) */}
-          <TokenAmount amount={filledAmountWithFee} token={mainToken} symbol={mainSymbol}/>
+          <TokenAmount amount={filledAmountWithFee} token={mainToken} symbol={mainSymbol} />
         </b>{' '}
         {!fullyFilled && (
           // Show the total amount to buy/sell. Only for orders that are not 100% executed
           <>
             of{' '}
             <b>
-              <TokenAmount amount={mainAmount} token={mainToken} symbol={mainSymbol}/>
+              <TokenAmount amount={mainAmount} token={mainToken} symbol={mainSymbol} />
             </b>{' '}
           </>
         )}
@@ -166,7 +175,7 @@ export function FilledProgress(props: Props): JSX.Element {
           <>
             for a total of{' '}
             <b>
-              <TokenAmount amount={swappedAmountWithFee} token={swappedToken} symbol={swappedSymbol}/>
+              <TokenAmount amount={swappedAmountWithFee} token={swappedToken} symbol={swappedSymbol} />
             </b>
           </>
         )}

diff --git a/src/components/orders/OrderDetails/FillsTable.tsx b/src/components/orders/OrderDetails/FillsTable.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExchangeAlt, faProjectDiagram } from '@fortawesome/free-solid-svg-icons'
@@ -24,20 +24,25 @@ import Icon from 'components/Icon'
 import { calculatePrice, TokenErc20 } from '@gnosis.pm/dex-js'
 import { TEN_BIG_NUMBER } from 'const'
 import BigNumber from 'bignumber.js'
+import ShimmerBar from 'apps/explorer/components/common/ShimmerBar'
 
 const Wrapper = styled(StyledUserDetailsTable)`
   > thead {
     > tr > th:first-child {
       padding: 0 2rem;
     }
   }
+
   > tbody {
     min-height: 37rem;
     border-bottom: 0.1rem solid ${({ theme }): string => theme.tableRowBorder};
+
     > tr {
       min-height: 7.4rem;
+
       &.header-row {
         display: none;
+
         ${media.mobile} {
           display: flex;
           background: transparent;
@@ -46,61 +51,74 @@ const Wrapper = styled(StyledUserDetailsTable)`
           margin: 0;
           box-shadow: none;
           min-height: 2rem;
+
           td {
             padding: 0;
             margin: 0;
             margin-top: 1rem;
+
             .mobile-header {
               margin: 0;
             }
           }
         }
       }
     }
+
     > tr > td:first-child {
       padding: 0 2rem;
     }
   }
+
   > thead > tr,
   > tbody > tr {
-    grid-template-columns: 4fr 2fr 3fr 3fr 3fr 4fr 4fr;
+    grid-template-columns: 4fr 2fr 3fr 3fr 3.5fr 3fr 4fr;
   }
+
   > tbody > tr > td:nth-child(8),
   > thead > tr > th:nth-child(8) {
     justify-content: center;
   }
+
   tr > td {
     span.span-inside-tooltip {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
+
       img {
         padding: 0;
       }
     }
   }
+
   ${media.mobile} {
     > thead > tr {
       display: none;
+
       > th:first-child {
         padding: 0 1rem;
       }
     }
+
     > tbody > tr {
       grid-template-columns: none;
       border: 0.1rem solid ${({ theme }): string => theme.tableRowBorder};
       box-shadow: 0px 4px 12px ${({ theme }): string => theme.boxShadow};
       border-radius: 6px;
       margin-top: 10px;
       padding: 12px;
+
       &:hover {
         background: none;
         backdrop-filter: none;
       }
+
       td:first-child {
         padding: 0 1rem;
       }
     }
+
     tr > td {
       display: flex;
       flex: 1;
@@ -109,14 +127,17 @@ const Wrapper = styled(StyledUserDetailsTable)`
       margin: 0;
       margin-bottom: 18px;
       min-height: 32px;
+
       span.span-inside-tooltip {
         align-items: flex-end;
         flex-direction: column;
+
         img {
           margin-left: 0;
         }
       }
     }
+
     > tbody > tr > td,
     > thead > tr > th {
       :nth-child(4),
@@ -127,39 +148,47 @@ const Wrapper = styled(StyledUserDetailsTable)`
         justify-content: space-between;
       }
     }
+
     .header-value {
       flex-wrap: wrap;
       text-align: end;
     }
+
     .span-copybtn-wrap {
       display: flex;
       flex-wrap: nowrap;
+
       span {
         display: flex;
         align-items: center;
       }
+
       .copy-text {
         display: none;
       }
     }
   }
+
   overflow: auto;
 `
 
 const HeaderTitle = styled.span`
   display: none;
+
   ${media.mobile} {
     font-weight: 600;
     align-items: center;
     display: flex;
     margin-right: 3rem;
+
     svg {
       margin-left: 5px;
     }
   }
 `
 const HeaderValue = styled.span<{ captionColor?: 'green' | 'red1' | 'grey' }>`
   color: ${({ theme, captionColor }): string => (captionColor ? theme[captionColor] : theme.textPrimary1)};
+
   ${media.mobile} {
     flex-wrap: wrap;
     text-align: end;
@@ -182,6 +211,11 @@ const StyledLinkButton = styled(LinkButton)`
   }
 `
 
+const StyledShimmerBar = styled(ShimmerBar)`
+  min-height: 20px;
+  min-width: 100px;
+`
+
 export type Props = StyledUserDetailsTableProps & {
   trades: Trade[] | undefined
   order: Order | null
@@ -200,7 +234,7 @@ function calculateExecutionPrice(
   sellAmount: BigNumber,
   buyAmount: BigNumber,
   sellToken?: TokenErc20 | null,
-  buyToken?: TokenErc20 | null
+  buyToken?: TokenErc20 | null,
 ): BigNumber | null {
   if (!sellToken || !buyToken) return null
 
@@ -210,9 +244,7 @@ function calculateExecutionPrice(
   return calculatePrice({
     numerator: isPriceInverted ? buyData : sellData,
     denominator: isPriceInverted ? sellData : buyData,
-  }).multipliedBy(
-    TEN_BIG_NUMBER.exponentiatedBy((isPriceInverted ? buyToken : sellToken).decimals)
-  )
+  }).multipliedBy(TEN_BIG_NUMBER.exponentiatedBy((isPriceInverted ? buyToken : sellToken).decimals))
 }
 
 const RowFill: React.FC<RowProps> = ({ trade, isPriceInverted, invertButton }) => {
@@ -225,8 +257,6 @@ const RowFill: React.FC<RowProps> = ({ trade, isPriceInverted, invertButton }) =
   const buyToken = tokens[buyTokenAddress]
   const sellToken = tokens[sellTokenAddress]
 
-  const executionTimeFormatted =
-    executionTime instanceof Date && !isNaN(Date.parse(executionTime.toString())) ? executionTime : new Date()
   const executionPrice = calculateExecutionPrice(isPriceInverted, sellAmount, buyAmount, sellToken, buyToken)
   const executionToken = isPriceInverted ? buyToken : sellToken
 
@@ -256,24 +286,24 @@ const RowFill: React.FC<RowProps> = ({ trade, isPriceInverted, invertButton }) =
       <td>
         <HeaderTitle>Buy amount</HeaderTitle>
         <HeaderValue>
-          <TokenAmount amount={buyAmount} token={buyToken}/>
+          <TokenAmount amount={buyAmount} token={buyToken} />
         </HeaderValue>
       </td>
       <td>
         <HeaderTitle>Sell amount</HeaderTitle>
         <HeaderValue>
-          <TokenAmount amount={sellAmount} token={sellToken}/>
+          <TokenAmount amount={sellAmount} token={sellToken} />
         </HeaderValue>
       </td>
       <td>
         <HeaderTitle>Execution price {invertButton}</HeaderTitle>
-        <HeaderValue>
-            {executionPrice && <TokenAmount amount={executionPrice} token={executionToken}/>}
-        </HeaderValue>
+        <HeaderValue>{executionPrice && <TokenAmount amount={executionPrice} token={executionToken} />}</HeaderValue>
       </td>
       <td>
         <HeaderTitle>Execution time</HeaderTitle>
-        <HeaderValue>{<DateDisplay date={executionTimeFormatted} showIcon={true} />}</HeaderValue>
+        <HeaderValue>
+          {executionTime ? <DateDisplay date={executionTime} showIcon={true} /> : <StyledShimmerBar />}
+        </HeaderValue>
       </td>
       <td>
         <HeaderTitle></HeaderTitle>
@@ -292,7 +322,11 @@ const FillsTable: React.FC<Props> = (props) => {
   const { trades, order, tableState, showBorderTable = false } = props
   const [isPriceInverted, setIsPriceInverted] = useState(false)
 
-  const invertButton = <Icon icon={faExchangeAlt} onClick={() => setIsPriceInverted(value => !value)} />
+  const onInvert = useCallback(() => {
+    setIsPriceInverted((value) => !value)
+  }, [])
+
+  const invertButton = <Icon icon={faExchangeAlt} onClick={onInvert} />
 
   const tradeItems = (items: Trade[] | undefined): JSX.Element => {
     if (!items || items.length === 0) {
@@ -306,15 +340,16 @@ const FillsTable: React.FC<Props> = (props) => {
         </tr>
       )
     } else {
-        return (
+      return (
         <>
           {items.map((item, i) => (
             <RowFill
               key={item.txHash}
               index={i + tableState.pageOffset}
               trade={item}
               invertButton={invertButton}
-              isPriceInverted={isPriceInverted} />
+              isPriceInverted={isPriceInverted}
+            />
           ))}
         </>
       )