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

* improve modal responsiveness * add MATIC * fix modal min height reversion * add token population via route
rupiah-token · Jun 14, 2019 · 727d289 · 727d289
1 parent 5880471
commit 727d289
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,8 @@
 .env.test.local
 .env.production.local
 
+/.netlify
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html />
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git 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} />

diff --git 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.upToSmall`width: 90vw;`}
+    ${({ theme }) => theme.mediaWidth.upToMedium`width: 65vw;`}
+    ${({ theme }) => theme.mediaWidth.upToSmall`width: 80vw;`}
+    max-height: 50vh;
     ${({ minHeight }) =>
       minHeight &&
       css`
         min-height: ${minHeight}vh;
       `}
-    max-height: 50vh;
-    ${({ theme }) => theme.mediaHeight.upToMedium`max-height: 75vh;`}
-    ${({ theme }) => theme.mediaHeight.upToSmall`max-height: 90vh;`}
+    ${({ theme }) => theme.mediaWidth.upToMedium`max-height: 65vh;`}
+    ${({ theme }) => theme.mediaWidth.upToSmall`max-height: 80vh;`}
     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 },

diff --git 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',

diff --git 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',

diff --git 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 }) => (

diff --git 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 = {
-  independentValue: '', // this is a user input
-  dependentValue: '', // this is a calculated number
-  independentField: INPUT,
-  inputCurrency: 'ETH',
-  outputCurrency: ''
+function getInitialSwapState(outputCurrency) {
+  return {
+    independentValue: '', // this is a user input
+    dependentValue: '', // this is a calculated number
+    independentField: INPUT,
+    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: '' })

diff --git 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 = {
-  independentValue: '', // this is a user input
-  dependentValue: '', // this is a calculated number
-  independentField: INPUT,
-  inputCurrency: 'ETH',
-  outputCurrency: ''
+function getInitialSwapState(outputCurrency) {
+  return {
+    independentValue: '', // this is a user input
+    dependentValue: '', // this is a calculated number
+    independentField: INPUT,
+    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

diff --git 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