v0.9.3 Release

gnosis · Jun 18, 2021 · 63fa988 · 63fa988
2 parents 65e1909 + 2b0b683
commit 63fa988
Show file tree

Hide file tree

Showing 31 changed files with 5,220 additions and 3,862 deletions.
diff --git a/.github/workflows/deploy-production-with-staging-api.yml b/.github/workflows/deploy-production-with-staging-api.yml
@@ -1,4 +1,4 @@
-name: deploy-production
+name: deploy-production-with-staging-config
 on:
   push:
     tags: [d*]

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -1,4 +1,4 @@
-name: Deploy
+name: Deploy-staging
 
 # Run on every commit
 on:

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -4,6 +4,7 @@ module.exports = {
   semi: false,
   bracketSpacing: true,
   trailingComma: "all",
+  endOfLine: "auto",
   overrides: [
     {
       files: "*.sol",

diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@amcharts/amcharts4": "^4.10.13",
+    "@anxolin/walletconnect-connector": "6.1.9",
     "@babel/helper-define-map": "^7.12.13",
     "@babel/helper-regex": "^7.10.5",
     "@ethersproject/address": "^5.0.0-beta.134",
@@ -93,12 +94,13 @@
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.1.9",
     "@web3-react/portis-connector": "^6.1.9",
-    "@anxolin/walletconnect-connector": "6.1.9",
     "@web3-react/walletlink-connector": "^6.1.9",
     "ajv": "^6.12.3",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.2",
+    "csstype": "^3.0.8",
     "cypress": "^4.5.0",
+    "decimal.js": "^10.2.1",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",
@@ -107,14 +109,16 @@
     "jazzicon": "^1.5.0",
     "levenary": "^1.1.1",
     "lodash.flatmap": "^4.5.0",
+    "lodash.round": "^4.0.4",
     "logdown": "^3.3.1",
     "modali": "^1.2.0",
     "numbro": "^2.3.2",
-    "polished": "^3.3.2",
+    "polished": "^3.7.1",
     "qrcode.react": "^0.9.3",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.3",
+    "react-custom-scrollbars": "^4.2.1",
     "react-device-detect": "^1.6.2",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
@@ -128,7 +132,7 @@
     "react-scripts": "^4.0.1",
     "react-spring": "^8.0.27",
     "react-table": "^7.6.3",
-    "react-tooltip": "^4.2.14",
+    "react-tooltip": "^4.2.19",
     "react-use-gesture": "^6.0.14",
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",

diff --git a/src/components/auction/AuctionBody/index.tsx b/src/components/auction/AuctionBody/index.tsx
@@ -5,29 +5,45 @@ import { AuctionState, DerivedAuctionInfo } from '../../../state/orderPlacement/
 import { AuctionIdentifier } from '../../../state/orderPlacement/reducer'
 import { PageTitle } from '../../pureStyledComponents/PageTitle'
 import { AuctionNotStarted } from '../AuctionNotStarted'
-import { AuctionPending } from '../AuctionPending'
 import Claimer from '../Claimer'
 import OrderPlacement from '../OrderPlacement'
-import { OrderBook } from '../Orderbook'
+import { OrderBookContainer } from '../OrderbookContainer'
 import OrdersTable from '../OrdersTable'
 
-const SectionTitle = styled(PageTitle)`
-  margin-bottom: 16px;
-  margin-top: 0;
-`
-
 const Grid = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   row-gap: 20px;
   margin: 0 0 40px;
 
-  @media (min-width: ${({ theme }) => theme.themeBreakPoints.md}) {
+  @media (min-width: ${({ theme }) => theme.themeBreakPoints.xxl}) {
     column-gap: 18px;
     grid-template-columns: 1fr 1fr;
   }
 `
 
+const GridCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  justify-content: flex-end;
+  @media (max-width: ${({ theme }) => theme.themeBreakPoints.xxl}) {
+    overflow-x: auto;
+  }
+`
+
+const Wrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+`
+
+const SectionTitle = styled(PageTitle)`
+  margin-bottom: 0;
+  margin-top: 0;
+`
+
 interface AuctionBodyProps {
   auctionIdentifier: AuctionIdentifier
   derivedAuctionInfo: DerivedAuctionInfo
@@ -46,36 +62,33 @@ const AuctionBody = (props: AuctionBodyProps) => {
 
   return (
     <>
-      {auctionStarted && (
-        <SectionTitle as="h2">
-          {(auctionState === AuctionState.ORDER_PLACING ||
-            auctionState === AuctionState.ORDER_PLACING_AND_CANCELING) &&
-            'Place Order'}
-          {auctionState === AuctionState.CLAIMING && 'Claim Proceeds'}
-        </SectionTitle>
-      )}
       {auctionStarted && (
         <Grid>
-          {(auctionState === AuctionState.ORDER_PLACING ||
-            auctionState === AuctionState.ORDER_PLACING_AND_CANCELING) && (
-            <OrderPlacement
-              auctionIdentifier={auctionIdentifier}
-              derivedAuctionInfo={derivedAuctionInfo}
-            />
-          )}
-          {auctionState === AuctionState.CLAIMING && (
-            <Claimer
+          <GridCol>
+            <Wrap>
+              <SectionTitle as="h2">Place Order</SectionTitle>
+            </Wrap>
+            {(auctionState === AuctionState.ORDER_PLACING ||
+              auctionState === AuctionState.ORDER_PLACING_AND_CANCELING) && (
+              <OrderPlacement
+                auctionIdentifier={auctionIdentifier}
+                derivedAuctionInfo={derivedAuctionInfo}
+              />
+            )}
+            {auctionState === AuctionState.CLAIMING && (
+              <Claimer
+                auctionIdentifier={auctionIdentifier}
+                derivedAuctionInfo={derivedAuctionInfo}
+              />
+            )}
+          </GridCol>
+          <GridCol>
+            <OrderBookContainer
               auctionIdentifier={auctionIdentifier}
+              auctionState={auctionState}
               derivedAuctionInfo={derivedAuctionInfo}
             />
-          )}
-          {auctionState === AuctionState.PRICE_SUBMISSION && (
-            <AuctionPending>Auction closed. Pending on-chain price-calculation.</AuctionPending>
-          )}
-          <OrderBook
-            auctionIdentifier={auctionIdentifier}
-            derivedAuctionInfo={derivedAuctionInfo}
-          />
+          </GridCol>
         </Grid>
       )}
       {auctionState === AuctionState.NOT_YET_STARTED && <AuctionNotStarted />}

diff --git a/src/components/auction/AuctionDetails/index.tsx b/src/components/auction/AuctionDetails/index.tsx
@@ -31,7 +31,8 @@ import { ExtraDetailsItem, Props as ExtraDetailsItemProps } from '../ExtraDetail
 const DETAILS_HEIGHT = '120px'
 
 const Wrapper = styled.div`
-  margin: 0 0 30px;
+  margin: 0 0 32px;
+  min-height: ${TIMER_SIZE};
   position: relative;
 `
 
@@ -265,7 +266,8 @@ const AuctionDetails = (props: Props) => {
         onInvertPrices()
       }
     }
-  }, [derivedAuctionInfo?.auctioningToken, onInvertPrices, showPriceInverted])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [derivedAuctionInfo?.auctioningToken, onInvertPrices])
 
   const biddingTokenAddress = useMemo(
     () => getExplorerLink(chainId, derivedAuctionInfo?.biddingToken?.address, 'address'),
@@ -493,10 +495,7 @@ const AuctionDetails = (props: Props) => {
             itemKey={
               <>
                 <span>Total auctioned</span>
-                <Tooltip
-                  id="totalAuctioned"
-                  text={'Total amount of tokens available to be bought in the auction.'}
-                />
+                <Tooltip text={'Total amount of tokens available to be bought in the auction.'} />
               </>
             }
             itemValue={
@@ -529,10 +528,7 @@ const AuctionDetails = (props: Props) => {
             itemKey={
               <>
                 <span>Bidding with</span>
-                <Tooltip
-                  id="biddingWith"
-                  text={'This is the token that is accepted for bidding in the auction.'}
-                />
+                <Tooltip text={'This is the token that is accepted for bidding in the auction.'} />
               </>
             }
             itemValue={
@@ -563,7 +559,6 @@ const AuctionDetails = (props: Props) => {
               <>
                 <span>{titlePrice}</span>
                 <Tooltip
-                  id="auctionPrice"
                   text={
                     "This will be the auction's Closing Price if no more bids are submitted or canceled, OR it will be the auction's Clearing Price if the auction concludes without additional bids."
                   }
@@ -577,10 +572,7 @@ const AuctionDetails = (props: Props) => {
             itemKey={
               <>
                 <span>{showPriceInverted ? `Max Sell Price` : `Min Sell Price`}</span>
-                <Tooltip
-                  id="minSellPrice"
-                  text={'Minimum bidding price the auctioneer defined for participation.'}
-                />
+                <Tooltip text={'Minimum bidding price the auctioneer defined for participation.'} />
               </>
             }
             itemValue={
@@ -612,7 +604,6 @@ const AuctionDetails = (props: Props) => {
           <ExtraDetails ref={componentRef}>
             {extraDetails.map((item, index) => (
               <ExtraDetailsItem
-                id={`extraDetailsItem_${index}`}
                 key={index}
                 progress={item.progress}
                 showEmptyProgressColumn={showEmptyProgressColumn(index)}

diff --git a/src/components/auction/Charts/XYChart.ts b/src/components/auction/Charts/XYChart.ts
@@ -3,6 +3,7 @@ import { Token } from 'uniswap-xdai-sdk'
 import * as am4charts from '@amcharts/amcharts4/charts'
 import * as am4core from '@amcharts/amcharts4/core'
 import am4themesSpiritedaway from '@amcharts/amcharts4/themes/spiritedaway'
+import { Decimal } from 'decimal.js'
 
 import { ChainId, getTokenDisplay } from '../../../utils'
 
@@ -160,7 +161,11 @@ interface DrawInformation {
 }
 
 const formatNumberForChartTooltip = (n: number) => {
-  return numberFormatter.format(n, '###.00 a')
+  const d = new Decimal(n)
+  const nd = d.toSignificantDigits(6)
+  const digits = nd.decimalPlaces()
+  const decimalFormatPart = `.${'0'.repeat(digits)}`
+  return numberFormatter.format(nd.toNumber(), `###${digits > 0 ? decimalFormatPart : ''} a`)
 }
 
 export const drawInformation = (props: DrawInformation) => {

diff --git a/src/components/auction/Claimer/index.tsx b/src/components/auction/Claimer/index.tsx
@@ -28,6 +28,7 @@ const Wrapper = styled(BaseCard)`
   max-width: 100%;
   min-height: 352px;
   min-width: 100%;
+  height: calc(100% - 35px);
 `
 
 const ActionButton = styled(Button)`

diff --git a/src/components/auction/ExtraDetailsItem/index.tsx b/src/components/auction/ExtraDetailsItem/index.tsx
@@ -115,7 +115,6 @@ const Link = styled(ExternalLink)`
 `
 
 export interface Props {
-  id?: string
   progress?: string
   showEmptyProgressColumn?: boolean
   title: string
@@ -125,7 +124,7 @@ export interface Props {
 }
 
 export const ExtraDetailsItem: React.FC<Props> = (props) => {
-  const { id, progress, showEmptyProgressColumn, title, tooltip, url, value, ...restProps } = props
+  const { progress, showEmptyProgressColumn, title, tooltip, url, value, ...restProps } = props
 
   return (
     <Wrapper showProgressColumn={progress !== undefined || showEmptyProgressColumn} {...restProps}>
@@ -145,7 +144,7 @@ export const ExtraDetailsItem: React.FC<Props> = (props) => {
         </Value>
         <Title>
           <TitleText className="text">{title}</TitleText>
-          {tooltip && <Tooltip id={id} text={tooltip} />}
+          {tooltip && <Tooltip text={tooltip} />}
         </Title>
       </TextContents>
     </Wrapper>

diff --git a/src/components/auction/Orderbook/index.tsx b/src/components/auction/Orderbook/index.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components'
 
 import { NUMBER_OF_DIGITS_FOR_INVERSION } from '../../../constants/config'
 import { DerivedAuctionInfo } from '../../../state/orderPlacement/hooks'
-import { AuctionIdentifier, parseURL } from '../../../state/orderPlacement/reducer'
-import { useOrderbookDataCallback, useOrderbookState } from '../../../state/orderbook/hooks'
+import { parseURL } from '../../../state/orderPlacement/reducer'
+import { useOrderbookState } from '../../../state/orderbook/hooks'
 import { getInverse, showChartsInverted } from '../../../utils/prices'
 import { InlineLoading } from '../../common/InlineLoading'
 import { SpinnerSize } from '../../common/Spinner'
@@ -22,13 +22,11 @@ const Wrapper = styled(BaseCard)`
   min-width: 100%;
 `
 interface OrderbookProps {
-  auctionIdentifier: AuctionIdentifier
   derivedAuctionInfo: DerivedAuctionInfo
 }
 
 export const OrderBook: React.FC<OrderbookProps> = (props) => {
-  const { auctionIdentifier, derivedAuctionInfo } = props
-  useOrderbookDataCallback(auctionIdentifier)
+  const { derivedAuctionInfo } = props
   const {
     asks,
     auctionId: orderbookAuctionId,