ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* improve modal responsiveness

* add MATIC

* fix modal min height reversion

* add token population via route
This commit is contained in:
Noah Zinsmeister 2019-06-14 10:39:33 -04:00 committed by GitHub
parent 58804714be
commit 727d289413
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 65 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -17,6 +17,8 @@
.env.test.local
.env.production.local
/.netlify
npm-debug.log*
yarn-debug.log*
yarn-error.log*

2
public/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
src/components/CurrencyInputPanel/index.js
View File

@ -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} />

12
src/components/Modal/index.js
View File

@ -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 },

6
src/contexts/Tokens.js
View File

@ -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',

25
src/pages/App.js
View File

@ -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',

1
src/pages/Pool/ModeSelector.js
View File

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

12
src/pages/Send/index.js
View File

@ -123,12 +123,14 @@ function calculateEtherTokenInputFromOutput(outputAmount, inputReserve, outputRe
return numerator.div(denominator).add(ethers.constants.One)
}
const initialSwapState = {
function getInitialSwapState(outputCurrency) {
return {
independentValue: '', // this is a user input
dependentValue: '', // this is a calculated number
independentField: INPUT,
inputCurrency: 'ETH',
outputCurrency: ''
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: '' })

12
src/pages/Swap/index.js
View File

@ -122,12 +122,14 @@ function calculateEtherTokenInputFromOutput(outputAmount, inputReserve, outputRe
return numerator.div(denominator).add(ethers.constants.One)
}
const initialSwapState = {
function getInitialSwapState(outputCurrency) {
return {
independentValue: '', // this is a user input
dependentValue: '', // this is a calculated number
independentField: INPUT,
inputCurrency: 'ETH',
outputCurrency: ''
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

10
src/theme/index.js
View File

@ -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