Merge branch 'coolest-design-ever' into feature/#62

* coolest-design-ever:
  Fix small typo (#112)
  Add improvements for typings (#111)

# Conflicts:
#	src/components/AuctionHeader/index.tsx
#	src/components/CurrencyInputPanel/index.tsx
#	src/components/PriceInputPanel/index.tsx
#	src/state/orderPlacement/hooks.ts

.eslintrc.js

@@ -58,7 +58,7 @@ module.exports = {
       },
     ],
     semi: ['error', 'never'],
-    'no-warning-comments': 'warn',
+    'no-warning-comments': 0,
     'import/extensions': 0,
     'import/no-unresolved': 0,
     'import/no-extraneous-dependencies': [

.github/workflows/deploy.yml

@@ -9,7 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     env:
         REPO_NAME_SLUG: idoux
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v2

src/api/AdditionalServicesApi.ts

@@ -67,8 +67,8 @@ export interface AdditionalServicesEndpoint {
   url_production: string
   url_develop?: string
 }
-function getAdditionalServiceUrl(baseUlr: string): string {
-  return `${baseUlr}${baseUlr.endsWith('/') ? '' : '/'}api/v1/`
+function getAdditionalServiceUrl(baseUrl: string): string {
+  return `${baseUrl}${baseUrl.endsWith('/') ? '' : '/'}api/v1/`
 }
 
 export type AdditionalServicesApiParams = AdditionalServicesEndpoint[]
@@ -147,7 +147,7 @@ export class AdditionalServicesApiImpl implements AdditionalServicesApi {
     return url
   }
 
-  public async getAllAuctionDetails(): Promise<AuctionInfo[] | null> {
+  public async getAllAuctionDetails(): Promise<Maybe<AuctionInfo[]>> {
     try {
       const promises: Promise<Response>[] = []
       for (const networkId in this.urlsByNetwork) {
@@ -174,7 +174,7 @@ export class AdditionalServicesApiImpl implements AdditionalServicesApi {
   }
   public async getMostInterestingAuctionDetails(
     params: InterestingAuctionParams,
-  ): Promise<AuctionInfo[] | null> {
+  ): Promise<Maybe<AuctionInfo[]>> {
     try {
       const url = await this.getMostInterestingAuctionDetailsUrl(params)
 
@@ -314,7 +314,7 @@ export class AdditionalServicesApiImpl implements AdditionalServicesApi {
     }
   }
 
-  private async query<T>(networkId: number, queryString: string): Promise<T | null> {
+  private async query<T>(networkId: number, queryString: string): Promise<Maybe<T>> {
     const baseUrl = this._getBaseUrl(networkId)
 
     const url = baseUrl + queryString

src/components/OrderbookChart.tsx

@@ -22,7 +22,7 @@ export interface OrderBookChartProps {
   /**
    * price/volume data with asks and bids
    */
-  data: PricePointDetails[] | null
+  data: Maybe<PricePointDetails[]>
 }
 
 const Wrapper = styled.div`
@@ -94,10 +94,10 @@ export interface PricePointDetails {
   priceFormatted: string
   totalVolumeNumber: number
   totalVolumeFormatted: string
-  askValueY: number | null
-  bidValueY: number | null
-  newOrderValueY: number | null
-  clearingPriceValueY: number | null
+  askValueY: Maybe<number>
+  bidValueY: Maybe<number>
+  newOrderValueY: Maybe<number>
+  clearingPriceValueY: Maybe<number>
 }
 
 export const createChart = (chartElement: HTMLElement): am4charts.XYChart => {
@@ -224,7 +224,7 @@ export const drawLabels = ({ baseToken, chart, quoteToken }: DrawLabelsParams):
 const OrderBookChart: React.FC<OrderBookChartProps> = (props: OrderBookChartProps) => {
   const { baseToken, data, networkId, quoteToken } = props
   const mountPoint = useRef<HTMLDivElement>(null)
-  const chartRef = useRef<am4charts.XYChart | null>(null)
+  const chartRef = useRef<Maybe<am4charts.XYChart>>(null)
 
   useEffect(() => {
     if (!mountPoint.current) return

src/components/Popups/index.tsx

@@ -80,7 +80,7 @@ function PoolPopup({
   token0: { address?: string; symbol?: string }
   token1: { address?: string; symbol?: string }
 }) {
-  const pairAddress: string | null = useMemo(() => {
+  const pairAddress: Maybe<string> = useMemo(() => {
     if (!token0 || !token1) return null
     // just mock it out
     return Pair.getAddress(

src/components/auction/CurrencyInputPanel/index.tsx

@@ -36,7 +36,7 @@ const TokenSymbol = styled.div`
 interface CurrencyInputPanelProps {
   onMax?: () => void
   onUserSellAmountInput: (val: string) => void
-  token: Token | null
+  token: Maybe<Token>
   value: string
 }
 

src/components/auction/OrderbookChartSmall/index.tsx

@@ -76,7 +76,7 @@ const Wrapper = styled.div`
 const OrderBookChartSmall: React.FC<OrderBookChartProps> = (props: OrderBookChartProps) => {
   const { baseToken, data, networkId, quoteToken } = props
   const mountPoint = useRef<HTMLDivElement>(null)
-  const chartRef = useRef<am4charts.XYChart | null>(null)
+  const chartRef = useRef<Maybe<am4charts.XYChart>>(null)
 
   useEffect(() => {
     if (!mountPoint.current) return

src/components/form/CurrencyInputPanel/index.tsx

@@ -0,0 +1,226 @@
+import { darken } from 'polished'
+import React, { useContext } from 'react'
+import styled, { ThemeContext } from 'styled-components'
+import { Pair, Token } from 'uniswap-xdai-sdk'
+
+import { useTranslation } from 'react-i18next'
+
+import { useActiveWeb3React } from '../../hooks'
+import { useTokenBalance } from '../../state/wallet/hooks'
+import { CursorPointer, TYPE } from '../../theme'
+import DoubleLogo from '../DoubleLogo'
+import { Input as NumericalInput } from '../NumericalInput'
+import { RowBetween } from '../Row'
+import TokenLogo from '../TokenLogo'
+
+const InputRow = styled.div<{ selected: boolean }>`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  padding: ${({ selected }) =>
+    selected ? '0.75rem 0.5rem 0.75rem 1rem' : '0.75rem 0.75rem 0.75rem 1rem'};
+`
+
+const CurrencySelect = styled.button<{ selected: boolean }>`
+  align-items: center;
+  height: 2.2rem;
+  font-size: 20px;
+  font-weight: 500;
+  background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)};
+  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
+  border-radius: 12px;
+  box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  padding: 0 0.5rem;
+
+  :focus,
+  :hover {
+    background-color: ${({ selected, theme }) =>
+      selected ? theme.bg2 : darken(0.05, theme.primary1)};
+  }
+`
+
+const LabelRow = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  color: ${({ theme }) => theme.text1};
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding: 0.75rem 1rem 0 1rem;
+  height: 20px;
+  span:hover {
+    cursor: pointer;
+    color: ${({ theme }) => darken(0.2, theme.text2)};
+  }
+`
+
+const Aligner = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const InputPanel = styled.div<{ hideInput?: boolean }>`
+  ${({ theme }) => theme.flexColumnNoWrap}
+  position: relative;
+  border-radius: ${({ hideInput }) => (hideInput ? '8px' : '20px')};
+  background-color: ${({ theme }) => theme.bg2};
+  z-index: 1;
+`
+
+const Container = styled.div<{ hideInput: boolean }>`
+  border-radius: ${({ hideInput }) => (hideInput ? '8px' : '20px')};
+  border: 1px solid ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.bg1};
+`
+
+const StyledTokenName = styled.span<{ active?: boolean }>`
+  ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.75rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
+  font-size:  ${({ active }) => (active ? '20px' : '16px')};
+`
+
+const StyledBalanceMax = styled.button`
+  height: 28px;
+  background-color: ${({ theme }) => theme.primary5};
+  border: 1px solid ${({ theme }) => theme.primary5};
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+
+  font-weight: 500;
+  cursor: pointer;
+  margin-right: 0.5rem;
+  color: ${({ theme }) => theme.primaryText1};
+  :hover {
+    border: 1px solid ${({ theme }) => theme.primary1};
+  }
+  :focus {
+    border: 1px solid ${({ theme }) => theme.primary1};
+    outline: none;
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    margin-right: 0.5rem;
+  `};
+`
+
+interface CurrencyInputPanelProps {
+  value: string
+  onUserSellAmountInput: (val: string) => void
+  onMax?: () => void
+  showMaxButton: boolean
+  label?: string
+  onTokenSelection?: (tokenAddress: string) => void
+  token?: Maybe<Token>
+  disableTokenSelect?: boolean
+  hideBalance?: boolean
+  isExchange?: boolean
+  pair?: Maybe<Pair>
+  hideInput?: boolean
+  showSendWithSwap?: boolean
+  otherSelectedTokenAddress?: Maybe<string>
+  id: string
+}
+
+export default function CurrencyInputPanel({
+  disableTokenSelect = false,
+  hideBalance = false,
+  hideInput = false,
+  id,
+  isExchange = false,
+  label = 'Input',
+  onMax,
+  onUserSellAmountInput,
+  pair = null,
+  showMaxButton, // used for double token logo
+  token = null,
+  value,
+}: CurrencyInputPanelProps) {
+  const { t } = useTranslation()
+
+  const { account } = useActiveWeb3React()
+  const userTokenBalance = useTokenBalance(account, token)
+  const theme = useContext(ThemeContext)
+
+  return (
+    <InputPanel id={id}>
+      <Container hideInput={hideInput}>
+        {!hideInput && (
+          <LabelRow>
+            <RowBetween>
+              <TYPE.body color={theme.text2} fontSize={14} fontWeight={500}>
+                {label}
+              </TYPE.body>
+              {account && (
+                <CursorPointer>
+                  <TYPE.body
+                    color={theme.text2}
+                    fontSize={14}
+                    fontWeight={500}
+                    onClick={onMax}
+                    style={{ display: 'inline' }}
+                  >
+                    {!hideBalance && !!token && userTokenBalance
+                      ? 'Balance: ' + userTokenBalance?.toSignificant(6)
+                      : ' -'}
+                  </TYPE.body>
+                </CursorPointer>
+              )}
+            </RowBetween>
+          </LabelRow>
+        )}
+        <InputRow
+          selected={disableTokenSelect}
+          style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
+        >
+          {!hideInput && (
+            <>
+              <NumericalInput
+                className="token-amount-input"
+                onUserSellAmountInput={(val) => {
+                  onUserSellAmountInput(val)
+                }}
+                value={value}
+              />
+              {account && !!token?.address && showMaxButton && label !== 'To' && (
+                <StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>
+              )}
+            </>
+          )}
+          <CurrencySelect className="open-currency-select-button" selected={!!token}>
+            <Aligner>
+              {isExchange ? (
+                <DoubleLogo
+                  a0={pair?.token0.address}
+                  a1={pair?.token1.address}
+                  margin={true}
+                  size={24}
+                />
+              ) : token?.address ? (
+                <TokenLogo address={token?.address} size={'24px'} />
+              ) : null}
+              {isExchange ? (
+                <StyledTokenName className="pair-name-container">
+                  {pair?.token0.symbol}:{pair?.token1.symbol}
+                </StyledTokenName>
+              ) : (
+                <StyledTokenName
+                  active={Boolean(token && token.symbol)}
+                  className="token-symbol-container"
+                >
+                  {(token && token.symbol && token.symbol.length > 20
+                    ? token.symbol.slice(0, 4) +
+                      '...' +
+                      token.symbol.slice(token.symbol.length - 5, token.symbol.length)
+                    : token?.symbol) || t('selectToken')}
+                </StyledTokenName>
+              )}
+              {!disableTokenSelect}
+            </Aligner>
+          </CurrencySelect>
+        </InputRow>
+      </Container>
+    </InputPanel>
+  )
+}

src/components/form/PriceInputPanel/index.tsx

@@ -23,8 +23,8 @@ const TokenInfo = styled.div`
 `
 
 interface CurrencyInputPanelProps {
-  auctioningToken: Token | null
-  biddingToken: Token | null
+  auctioningToken: Maybe<Token>
+  biddingToken: Maybe<Token>
   label: string
   onUserPriceInput: (val: string) => void
   value: string

src/components/modals/TransactionsModal/index.tsx

@@ -82,7 +82,7 @@ const TransactionListWrapper = styled.div`
 interface Props {
   isOpen: boolean
   maxHeight?: number
-  minHeight?: number | null
+  minHeight?: Maybe<number>
   onDismiss: () => void
 }
 

src/components/modals/WalletModal/Option.tsx

@@ -101,13 +101,13 @@ export default function Option({
   size = null,
   subheader = null,
 }: {
-  link?: string | null
+  link?: Maybe<string>
   clickable?: boolean
-  size?: number | null
+  size?: Maybe<number>
   onClick?: null | (() => void)
   color: string
   header: React.ReactNode
-  subheader: React.ReactNode | null
+  subheader: Maybe<React.ReactNode>
   icon: string
   active?: boolean
   id: string

src/hooks/useAllAuctionInfos.ts

@@ -16,9 +16,9 @@ export interface AuctionInfo {
   chainId: String
 }
 
-export function useAllAuctionInfo(): AuctionInfo[] | null {
-  const [auctionInfo, setAllAuctions] = useState<AuctionInfo[] | null>(null)
-  const [error, setError] = useState<Error | null>(null)
+export function useAllAuctionInfo(): Maybe<AuctionInfo[]> {
+  const [auctionInfo, setAllAuctions] = useState<Maybe<AuctionInfo[]>>(null)
+  const [error, setError] = useState<Maybe<Error>>(null)
 
   useEffect(() => {
     let cancelled = false