From 727d28941399b8ef20436babf8ea1d4a33971ce9 Mon Sep 17 00:00:00 2001 From: Noah Zinsmeister Date: Fri, 14 Jun 2019 10:39:33 -0400 Subject: [PATCH] modal responsiveness, 1 token addition, token selection (#329) * improve modal responsiveness * add MATIC * fix modal min height reversion * add token population via route --- .gitignore | 2 ++ public/index.html | 2 +- src/components/CurrencyInputPanel/index.js | 4 +++- src/components/Modal/index.js | 12 +++++------ src/contexts/Tokens.js | 6 ++++++ src/pages/App.js | 25 ++++++++++++++++++++++ src/pages/Pool/ModeSelector.js | 1 - src/pages/Send/index.js | 20 +++++++++-------- src/pages/Swap/index.js | 20 +++++++++-------- src/theme/index.js | 10 --------- 10 files changed, 65 insertions(+), 37 deletions(-) diff --git a/.gitignore b/.gitignore index 51e4bad77b..ea837a7dea 100644 --- 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 index 2b4a87221f..b408592cc4 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + diff --git a/src/components/CurrencyInputPanel/index.js b/src/components/CurrencyInputPanel/index.js index 99defbd215..b3147869a5 100644 --- 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 ( - + diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js index 3af5773d0a..dd392fe912 100644 --- 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 index 030c4d1429..a7f8864437 100644 --- 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 index be7704cdbd..bc4ba97e1a 100644 --- 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() { + { + if (isAddress(match.params.tokenAddress)) { + return + } else { + return + } + }} + /> + { + if (isAddress(match.params.tokenAddress)) { + return + } else { + return + } + }} + /> { setModalIsOpen(false) }} - minHeight={null} > {poolTabOrder.map(({ path, textKey, regex }) => ( diff --git a/src/pages/Send/index.js b/src/pages/Send/index.js index 22280164d2..39c5b25b7a 100644 --- 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 index 73c5716f48..da34645ebf 100644 --- 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 index 04d0e0622d..b2559a54c6 100644 --- 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