modal responsiveness, 1 token addition, token selection (#329)

* improve modal responsiveness * add MATIC * fix modal min height reversion * add token population via route

modal responsiveness, 1 token addition, token selection (#329)
* improve modal responsiveness * add MATIC * fix modal min height reversion * add token population via route
727d2894 · Noah Zinsmeister · GitHub · 58804714 · 727d2894 · 727d2894
Commit 727d2894 authored Jun 14, 2019 by Noah Zinsmeister Committed by GitHub Jun 14, 2019
10 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,8 @@
 .env.test.local
 .env.production.local
+/.netlify
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

--- a/public/index.html
+++ b/public/index.html
-<!DOCTYPE html />
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />

--- a/src/components/CurrencyInputPanel/index.js
+++ b/src/components/CurrencyInputPanel/index.js
@@ -7,6 +7,7 @@ import escapeStringRegex from 'escape-string-regexp'
 import { lighten, darken } from 'polished'
 import Tooltip from '@reach/tooltip'
 import '@reach/tooltip/styles.css'
+import { isMobile } from 'react-device-detect'
 import { BorderlessInput } from '../../theme'
 import { useTokenContract } from '../../hooks'
@@ -166,6 +167,7 @@ const TokenList = styled.div`
  flex-grow: 1;
  height: 100%;
  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 `
 const TokenModalRow = styled.div`
@@ -427,7 +429,7 @@ function CurrencySelectModal({ isOpen, onDismiss, onTokenSelect }) {
  }
  return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} initialFocusRef={inputRef}>
+    <Modal isOpen={isOpen} onDismiss={onDismiss} minHeight={50} initialFocusRef={isMobile ? undefined : inputRef}>
      <TokenModal>
        <SearchContainer>
          <StyledBorderlessInput ref={inputRef} type="text" placeholder={t('searchOrPaste')} onChange={onInput} />

--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
@@ -24,16 +24,16 @@ const StyledDialogContent = styled(FilteredDialogContent)`
    padding: 0;
    width: 50vw;
    max-width: 650px;
-    ${({ theme }) => theme.mediaWidth.upToMedium`width: 75vw;`}
+    ${({ theme }) => theme.mediaWidth.upToMedium`width: 65vw;`}
-    ${({ theme }) => theme.mediaWidth.upToSmall`width: 90vw;`}
+    ${({ theme }) => theme.mediaWidth.upToSmall`width: 80vw;`}
+    max-height: 50vh;
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
-    max-height: 50vh;
+    ${({ theme }) => theme.mediaWidth.upToMedium`max-height: 65vh;`}
-    ${({ theme }) => theme.mediaHeight.upToMedium`max-height: 75vh;`}
+    ${({ theme }) => theme.mediaWidth.upToSmall`max-height: 80vh;`}
-    ${({ theme }) => theme.mediaHeight.upToSmall`max-height: 90vh;`}
    display: flex;
    overflow: hidden;
    border-radius: 1.5rem;
@@ -48,7 +48,7 @@ const HiddenCloseButton = styled.button`
  border: none;
 `
-export default function Modal({ isOpen, onDismiss, minHeight = 50, initialFocusRef, children }) {
+export default function Modal({ isOpen, onDismiss, minHeight = false, initialFocusRef, children }) {
  const transitions = useTransition(isOpen, null, {
    config: { duration: 125 },
    from: { opacity: 0 },

--- a/src/contexts/Tokens.js
+++ b/src/contexts/Tokens.js
@@ -167,6 +167,12 @@ const INITIAL_TOKENS_CONTEXT = {
      [DECIMALS]: 18,
      [EXCHANGE_ADDRESS]: '0xC6581Ce3A005e2801c1e0903281BBd318eC5B5C2'
    },
+    '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0': {
+      [NAME]: 'Matic Token',
+      [SYMBOL]: 'MATIC',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0x9a7A75E66B325a3BD46973B2b57c9b8d9D26a621'
+    },
    '0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2': {
      [NAME]: 'Maker',
      [SYMBOL]: 'MKR',

--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -5,6 +5,7 @@ import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
 import Web3ReactManager from '../components/Web3ReactManager'
 import Header from '../components/Header'
 import NavigationTabs from '../components/NavigationTabs'
+import { isAddress } from '../utils'
 const Swap = lazy(() => import('./Swap'))
 const Send = lazy(() => import('./Send'))
@@ -46,7 +47,31 @@ export default function App() {
                <Suspense fallback={null}>
                  <Switch>
                    <Route exact strict path="/swap" component={Swap} />
+                    <Route
+                      exact
+                      strict
+                      path="/swap/:tokenAddress?"
+                      render={({ match }) => {
+                        if (isAddress(match.params.tokenAddress)) {
+                          return <Swap initialCurrency={isAddress(match.params.tokenAddress)} />
+                        } else {
+                          return <Redirect to={{ pathname: '/swap' }} />
+                        }
+                      }}
+                    />
                    <Route exact strict path="/send" component={Send} />
+                    <Route
+                      exact
+                      strict
+                      path="/send/:tokenAddress?"
+                      render={({ match }) => {
+                        if (isAddress(match.params.tokenAddress)) {
+                          return <Send initialCurrency={isAddress(match.params.tokenAddress)} />
+                        } else {
+                          return <Redirect to={{ pathname: '/send' }} />
+                        }
+                      }}
+                    />
                    <Route
                      path={[
                        '/add-liquidity',

--- a/src/pages/Pool/ModeSelector.js
+++ b/src/pages/Pool/ModeSelector.js
@@ -116,7 +116,6 @@ function ModeSelector({ location: { pathname }, history }) {
        onDismiss={() => {
          setModalIsOpen(false)
        }}
-        minHeight={null}
      >
        <PoolModal>
          {poolTabOrder.map(({ path, textKey, regex }) => (

--- a/src/pages/Send/index.js
+++ b/src/pages/Send/index.js
@@ -123,12 +123,14 @@ function calculateEtherTokenInputFromOutput(outputAmount, inputReserve, outputRe
  return numerator.div(denominator).add(ethers.constants.One)
 }
-const initialSwapState = {
+function getInitialSwapState(outputCurrency) {
-  independentValue: '', // this is a user input
+  return {
-  dependentValue: '', // this is a calculated number
+    independentValue: '', // this is a user input
-  independentField: INPUT,
+    dependentValue: '', // this is a calculated number
-  inputCurrency: 'ETH',
+    independentField: INPUT,
-  outputCurrency: ''
+    inputCurrency: 'ETH',
+    outputCurrency: outputCurrency ? outputCurrency : ''
+  }
 }
 function swapStateReducer(state, action) {
@@ -180,7 +182,7 @@ function swapStateReducer(state, action) {
      }
    }
    default: {
-      return initialSwapState
+      return getInitialSwapState()
    }
  }
 }
@@ -236,7 +238,7 @@ function getMarketRate(
  }
 }
-export default function Swap() {
+export default function Swap({ initialCurrency }) {
  const { t } = useTranslation()
  const { account } = useWeb3Context()
@@ -248,7 +250,7 @@ export default function Swap() {
  }, [])
  // core swap state
-  const [swapState, dispatchSwapState] = useReducer(swapStateReducer, initialSwapState)
+  const [swapState, dispatchSwapState] = useReducer(swapStateReducer, initialCurrency, getInitialSwapState)
  const { independentValue, dependentValue, independentField, inputCurrency, outputCurrency } = swapState
  const [recipient, setRecipient] = useState({ address: '', name: '' })

--- a/src/pages/Swap/index.js
+++ b/src/pages/Swap/index.js
@@ -122,12 +122,14 @@ function calculateEtherTokenInputFromOutput(outputAmount, inputReserve, outputRe
  return numerator.div(denominator).add(ethers.constants.One)
 }
-const initialSwapState = {
+function getInitialSwapState(outputCurrency) {
-  independentValue: '', // this is a user input
+  return {
-  dependentValue: '', // this is a calculated number
+    independentValue: '', // this is a user input
-  independentField: INPUT,
+    dependentValue: '', // this is a calculated number
-  inputCurrency: 'ETH',
+    independentField: INPUT,
-  outputCurrency: ''
+    inputCurrency: 'ETH',
+    outputCurrency: outputCurrency ? outputCurrency : ''
+  }
 }
 function swapStateReducer(state, action) {
@@ -180,7 +182,7 @@ function swapStateReducer(state, action) {
      }
    }
    default: {
-      return initialSwapState
+      return getInitialSwapState()
    }
  }
 }
@@ -236,7 +238,7 @@ function getMarketRate(
  }
 }
-export default function Swap() {
+export default function Swap({ initialCurrency }) {
  const { t } = useTranslation()
  const { account } = useWeb3Context()
@@ -248,7 +250,7 @@ export default function Swap() {
  }, [])
  // core swap state
-  const [swapState, dispatchSwapState] = useReducer(swapStateReducer, initialSwapState)
+  const [swapState, dispatchSwapState] = useReducer(swapStateReducer, initialCurrency, getInitialSwapState)
  const { independentValue, dependentValue, independentField, inputCurrency, outputCurrency } = swapState
  // get swap type from the currency types

--- a/src/theme/index.js
+++ b/src/theme/index.js
@@ -18,15 +18,6 @@ const mediaWidthTemplates = Object.keys(MEDIA_WIDTHS).reduce((accumulator, size)
  return accumulator
 }, {})
-const mediaHeightTemplates = Object.keys(MEDIA_WIDTHS).reduce((accumulator, size) => {
-  accumulator[size] = (...args) => css`
-    @media (max-height: ${MEDIA_WIDTHS[size] / (16 / 9)}px) {
-      ${css(...args)}
-    }
-  `
-  return accumulator
-}, {})
 const flexColumnNoWrap = css`
  display: flex;
  flex-flow: column nowrap;
@@ -64,7 +55,6 @@ const theme = {
  connectedGreen: '#27AE60',
  // media queries
  mediaWidth: mediaWidthTemplates,
-  mediaHeight: mediaHeightTemplates,
  // css snippets
  flexColumnNoWrap,
  flexRowNoWrap