Merge branch 'develop' of https://github.com/gnosis/ido-ux into feature/

#574-chart-legend

src/assets/links/kycLinks.json

@@ -0,0 +1,3 @@
+{
+"0x0C033bb39e67eB598D399C06A8A519498dA1Cec9": "https://qualify.swarm.markets"
+}

src/components/auction/AuctionDetails/index.tsx

@@ -14,7 +14,7 @@ import {
 } from '../../../state/orderPlacement/hooks'
 import { AuctionIdentifier } from '../../../state/orderPlacement/reducer'
 import { useOrderbookState } from '../../../state/orderbook/hooks'
-import { getExplorerLink, getTokenDisplay } from '../../../utils'
+import { getExplorerLink, getTokenDisplay, shortenAddress } from '../../../utils'
 import { abbreviation } from '../../../utils/numeral'
 import { showChartsInverted } from '../../../utils/prices'
 import { KeyValue } from '../../common/KeyValue'
@@ -330,6 +330,7 @@ const AuctionDetails = (props: Props) => {
   const toggleExtraDetails = () => {
     setShowMoreDetails(!showMoreDetails)
   }
+  const zeroAddress = '0x0000000000000000000000000000000000000000'
 
   const tokenSold = useMemo(
     () =>
@@ -429,20 +430,20 @@ const AuctionDetails = (props: Props) => {
       {
         title: 'Allow List Contract',
         tooltip: 'Address of the contract managing the allow-list for participation',
-        url: `https://etherscan.io/address/${auctionDetails?.allowListManager}`,
+        url: getExplorerLink(chainId, auctionDetails?.allowListManager, 'address'),
         value: `${
-          auctionDetails && auctionDetails.allowListManager == ''
-            ? auctionDetails.allowListManager.substr(0, 6).concat('...')
+          auctionDetails && auctionDetails.allowListManager !== zeroAddress
+            ? shortenAddress(auctionDetails.allowListManager)
             : 'None'
         }`,
       },
       {
         title: 'Signer Address',
         tooltip: 'Signer Address',
-        url: `https://etherscan.io/address/${auctionDetails?.allowListSigner}`,
+        url: getExplorerLink(chainId, auctionDetails?.allowListSigner, 'address'),
         value: `${
-          auctionDetails && auctionDetails.allowListSigner == ''
-            ? auctionDetails.allowListSigner.substr(0, 6).concat('...')
+          auctionDetails && auctionDetails.allowListSigner !== zeroAddress
+            ? shortenAddress(auctionDetails.allowListSigner)
             : 'None'
         }`,
       },

src/components/auction/OrderPlacement/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { Fraction, TokenAmount } from 'uniswap-xdai-sdk'
 
+import kycLinks from '../../../assets/links/kycLinks.json'
 import { NUMBER_OF_DIGITS_FOR_INVERSION } from '../../../constants/config'
 import { useActiveWeb3React } from '../../../hooks'
 import { ApprovalState, useApproveCallback } from '../../../hooks/useApproveCallback'
@@ -44,6 +45,22 @@ import { BaseCard } from '../../pureStyledComponents/BaseCard'
 import { EmptyContentText } from '../../pureStyledComponents/EmptyContent'
 import { InfoType } from '../../pureStyledComponents/FieldRow'
 
+const LinkCSS = css`
+  color: ${({ theme }) => theme.text1};
+  text-decoration: none;
+  transition: color 0.05s linear;
+  font-size: 1.5em;
+  font-weight: bold;
+
+  &:hover {
+    color: ${({ theme }) => theme.primary2};
+  }
+`
+
+const ExternalLink = styled.a`
+  ${LinkCSS}
+`
+
 const Wrapper = styled(BaseCard)`
   max-width: 100%;
   min-height: 392px;
@@ -326,19 +343,35 @@ const OrderPlacement: React.FC<OrderPlacementProps> = (props) => {
     !!account &&
     !!biddingToken.address
 
+  const auctioningTokenAddress = auctioningToken && auctioningToken?.address
+  const linkForKYC = auctioningTokenAddress ? kycLinks[auctioningTokenAddress] : null
   return (
     <>
       <Wrapper>
         {auctionInfoLoading && <InlineLoading size={SpinnerSize.small} />}
         {!auctionInfoLoading && isPrivate && !signatureAvailable && (
-          <PrivateWrapper>
-            <LockBig />
-            <TextBig>Private auction</TextBig>
-            <EmptyContentTextNoMargin>
-              You are not allowed to place an order.
-            </EmptyContentTextNoMargin>
-            <EmptyContentTextSmall>Ask the auctioneer to get allow-listed.</EmptyContentTextSmall>
-          </PrivateWrapper>
+          <>
+            <PrivateWrapper>
+              <LockBig />
+              <TextBig>Private auction</TextBig>
+              {account !== null && (
+                <EmptyContentTextNoMargin>
+                  You need to get allowed to participate.
+                </EmptyContentTextNoMargin>
+              )}
+            </PrivateWrapper>
+            {account == null ? (
+              <ActionButton onClick={toggleWalletModal}>Connect Wallet</ActionButton>
+            ) : (
+              <EmptyContentTextSmall>
+                {linkForKYC ? (
+                  <ExternalLink href={linkForKYC}>Get Allowed ↗</ExternalLink>
+                ) : (
+                  <>Ask the auctioneer to get allow-listed.</>
+                )}{' '}
+              </EmptyContentTextSmall>
+            )}
+          </>
         )}
         {!auctionInfoLoading && (!isPrivate || signatureAvailable) && (
           <>

src/components/auction/OrdersTable/index.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
+import * as CSS from 'csstype'
+
 import { NUMBER_OF_DIGITS_FOR_INVERSION } from '../../../constants/config'
 import { useCancelOrderCallback } from '../../../hooks/useCancelOrderCallback'
 import {
@@ -16,7 +18,6 @@ import { abbreviation } from '../../../utils/numeral'
 import { getInverse } from '../../../utils/prices'
 import { getChainName } from '../../../utils/tools'
 import { Button } from '../../buttons/Button'
-import { KeyValue } from '../../common/KeyValue'
 import { Tooltip } from '../../common/Tooltip'
 import { InfoIcon } from '../../icons/InfoIcon'
 import { OrderPending } from '../../icons/OrderPending'
@@ -39,13 +40,41 @@ const Title = styled(PageTitle)`
   margin-bottom: 16px;
   margin-top: 0;
 `
+interface RowProps {
+  hiddenMd?: boolean
+}
 
-const Row = styled(CellRow)`
+const Row = styled(CellRow)<Partial<CSS.Properties & RowProps>>`
   grid-template-columns: 1fr 1fr;
   row-gap: 15px;
+  color: ${({ theme }) => theme.dropdown.item.color};
+  ${(props) => props.hiddenMd && 'display : none'};
+  align-items: center;
+  font-size: 16px;
+  p {
+    display: flex;
+    margin: 0;
+    align-items: center;
+  }
+  p + span {
+    display: flex;
+    svg {
+      margin-left: 6px;
+    }
+  }
+  .tooltipComponent {
+    margin-left: 6px;
+  }
 
   @media (min-width: ${({ theme }) => theme.themeBreakPoints.md}) {
     grid-template-columns: ${(props) => getColumns(props.columns)};
+    ${(props) => props.hiddenMd && 'display : grid'};
+    > span {
+      line-height: 1;
+    }
+    p {
+      display: none;
+    }
   }
 `
 
@@ -78,6 +107,16 @@ const ActionButton = styled(Button)`
   }
 `
 
+const StyledCell = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.dropdown.item.color};
+  font-size: 14px;
+  > *:first-child {
+    padding-right: 6px;
+  }
+`
+
 interface OrdersTableProps {
   auctionIdentifier: AuctionIdentifier
   derivedAuctionInfo: DerivedAuctionInfo
@@ -171,58 +210,54 @@ const OrdersTable: React.FC<OrdersTableProps> = (props) => {
       )}
       {!ordersEmpty && (
         <TableWrapper>
+          <Row columns={hideCancelButton ? 4 : 5} hiddenMd>
+            <StyledCell>
+              <div>Amount</div>
+              <Tooltip text={'The amount of bidding token committed to the order.'} />
+            </StyledCell>
+            <StyledCell>
+              <div>Limit Price</div>
+              <Tooltip text={priceExplainer} />
+            </StyledCell>
+            <StyledCell>
+              <div>Status</div>
+            </StyledCell>
+            <StyledCell>
+              <div>Network</div>
+            </StyledCell>
+          </Row>
           {ordersSortered.map((order) => (
             <Row columns={hideCancelButton ? 4 : 5} key={order.id}>
               <Cell>
-                <KeyValue
-                  align="flex-start"
-                  itemKey={
-                    <>
-                      <span>Amount</span>
-                      <Tooltip text={'The amount of bidding token committed to the order.'} />
-                    </>
-                  }
-                  itemValue={abbreviation(order.sellAmount)}
-                />
+                <p>
+                  <span>Amount</span>
+                  <Tooltip text={'The amount of bidding token committed to the order.'} />
+                </p>
+                <span>{abbreviation(order.sellAmount)}</span>
               </Cell>
               <Cell>
-                <KeyValue
-                  align="flex-start"
-                  itemKey={
-                    <>
-                      <span>Limit Price</span>
-                      <Tooltip text={priceExplainer} />
-                    </>
-                  }
-                  itemValue={abbreviation(
+                <p>
+                  <span>Limit Price</span>
+                  <Tooltip text={priceExplainer} />
+                </p>
+                <span>
+                  {abbreviation(
                     showPriceInverted
                       ? getInverse(order.price, NUMBER_OF_DIGITS_FOR_INVERSION)
                       : order.price,
                   )}
-                />
+                </span>
               </Cell>
               <Cell>
-                <KeyValue
-                  align="flex-start"
-                  itemKey={<span>Status</span>}
-                  itemValue={
-                    <>
-                      <span>{orderStatusText[order.status]}</span>
-                      {order.status === OrderStatus.PLACED ? <OrderPlaced /> : <OrderPending />}
-                    </>
-                  }
-                />
+                <p>Status</p>
+                <span>
+                  <span>{orderStatusText[order.status]}</span>
+                  {order.status === OrderStatus.PLACED ? <OrderPlaced /> : <OrderPending />}
+                </span>
               </Cell>
               <Cell>
-                <KeyValue
-                  align="flex-start"
-                  itemKey={<span>Network</span>}
-                  itemValue={
-                    <>
-                      <span>{getChainName(order.chainId)}</span>
-                    </>
-                  }
-                />
+                <p>Network</p>
+                <span>{getChainName(order.chainId)}</span>
               </Cell>
               {!hideCancelButton && (
                 <ButtonCell>