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

fix most conflicts

Browse Source
This commit is contained in:
ian-jh 2019-07-29 16:01:07 -04:00
commit ab3faaa277
6 changed files with 107 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/locales/en.json
View File

@ -27,7 +27,7 @@
"noLiquidity": "No liquidity.", "noLiquidity": "No liquidity.",
"insufficientLiquidity": "Insufficient liquidity.", "insufficientLiquidity": "Insufficient liquidity.",
"unlockTokenCont": "Please unlock token to continue.", "unlockTokenCont": "Please unlock token to continue.",
"transactionDetails": "Transaction Details", "transactionDetails": "Advanced Details",
"hideDetails": "Hide Details", "hideDetails": "Hide Details",
"slippageWarning": "Slippage Warning", "slippageWarning": "Slippage Warning",
"highSlippageWarning": "High Slippage Warning", "highSlippageWarning": "High Slippage Warning",
@ -81,5 +81,5 @@
"decimals": "Decimals", "decimals": "Decimals",
"enterTokenCont": "Enter a token address to continue", "enterTokenCont": "Enter a token address to continue",
"priceChange": "Expected price slippage", "priceChange": "Expected price slippage",
"forAtLeast" : "for at least " "forAtLeast": "for at least "
} }

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

@ -51,8 +51,8 @@ class ContextualInfo extends Component {
} }
static defaultProps = { static defaultProps = {
openDetailsText: 'Transaction Details', openDetailsText: 'Advanced Details',
closeDetailsText: 'Hide Details', closeDetailsText: 'Hide Advanced',
renderTransactionDetails() {}, renderTransactionDetails() {},
contextualInfo: '', contextualInfo: '',
isError: false isError: false

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

@ -86,8 +86,8 @@ const ColoredDropdown = styled(WrappedDropdown)`
` `
export default function ContextualInfo({ export default function ContextualInfo({
openDetailsText = 'Transaction Details', openDetailsText = 'Advanced Details',
closeDetailsText = 'Hide Details', closeDetailsText = 'Hide Advanced',
contextualInfo = '', contextualInfo = '',
allowExpand = false, allowExpand = false,
isError = false, isError = false,

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

@ -34,6 +34,7 @@ const SubCurrencySelect = styled.button`
outline: none; outline: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
` `
const InputRow = styled.div` const InputRow = styled.div`
@ -70,7 +71,7 @@ const CurrencySelect = styled.button`
} }
:focus { :focus {
box-shadow: 0 0 1px 1px ${({ theme }) => theme.malibuBlue}; border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)};
} }
:active { :active {

145
src/components/TransactionDetails/index.js
View File

@ -1,9 +1,12 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import ReactGA from 'react-ga' import ReactGA from 'react-ga'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import styled from 'styled-components' import styled, { css, keyframes } from 'styled-components'
import { isAddress, amountFormatter } from '../../utils' import { darken, lighten } from 'polished'
import questionMark from '../../assets/images/question-mark.svg' import { amountFormatter } from '../../utils'
import { useDebounce } from '../../hooks'
import question from '../../assets/images/question.svg'
import NewContextualInfo from '../../components/ContextualInfoNew' import NewContextualInfo from '../../components/ContextualInfoNew'
@ -55,26 +58,46 @@ const Popup = styled(Flex)`
font-style: italic; font-style: italic;
` `
const Option = styled(Flex)` const Option = styled(FancyButton)`
align-items: center; margin-right: 8px;
min-width: 55px; margin-top: 6px;
height: 24px;
margin-right: 4px;
border-radius: 36px;
border: 1px solid #f2f2f2;
${({ active }) => :hover {
active &&
`
background-color: #2f80ed;
color: white;
border: 1px solid #2f80ed;
`}
&:hover {
cursor: pointer; cursor: pointer;
} }
${({ active, theme }) =>
active &&
css`
background-color: ${({ theme }) => theme.royalBlue};
color: ${({ theme }) => theme.white};
border: none;
:hover {
border: none;
box-shadow: none;
background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
}
:focus {
border: none;
box-shadow: none;
background-color: ${({ theme }) => lighten(0.05, theme.royalBlue)};
}
:active {
background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
}
:hover:focus {
background-color: ${({ theme }) => theme.royalBlue};
}
:hover:focus:active {
background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
}
`}
` `
const Input = styled.input` const Input = styled.input`
width: 123.27px; width: 123.27px;
@ -127,11 +150,21 @@ const BottomError = styled.div`
`} `}
` `
const Break = styled.div` const OptionCustom = styled(FancyButton)`
border: 1px solid #f2f2f2; height: 2rem;
width: 100%; position: relative;
margin-top: 1rem; width: 120px;
` margin-top: 6px;
padding: 0 0.75rem;
${({ active }) =>
active &&
css`
border: 1px solid ${({ theme }) => theme.royalBlue};
:hover {
border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)};
}
`}
const OptionLarge = styled(Option)` const OptionLarge = styled(Option)`
width: 120px; width: 120px;
@ -142,7 +175,7 @@ const Bold = styled.span`
` `
const LastSummaryText = styled.div` const LastSummaryText = styled.div`
margin-top: 0.6rem; padding-top: 0.5rem;
` `
const SlippageSelector = styled.div` const SlippageSelector = styled.div`
@ -181,6 +214,14 @@ const ErrorEmoji = styled.span`
position: absolute; position: absolute;
` `
const ValueWrapper = styled.span`
padding: 0.125rem 0.3rem 0.1rem 0.3rem;
background-color: ${({ theme }) => darken(0.04, theme.concreteGray)};
border-radius: 12px;
font-variant: tabular-nums;
vertical
`
export default function TransactionDetails(props) { export default function TransactionDetails(props) {
const { t } = useTranslation() const { t } = useTranslation()
@ -453,25 +494,29 @@ export default function TransactionDetails(props) {
<div> <div>
<div> <div>
{t('youAreSelling')}{' '} {t('youAreSelling')}{' '}
{b( <ValueWrapper>
`${amountFormatter( {b(
props.independentValueParsed, `${amountFormatter(
props.independentDecimals, props.independentValueParsed,
Math.min(4, props.independentDecimals) props.independentDecimals,
)} ${props.inputSymbol}` Math.min(4, props.independentDecimals)
)}{' '} )} ${props.inputSymbol}`
{t('forAtLeast')} )}
{b( </ValueWrapper>{' '}
`${amountFormatter( {t('forAtLeast')}{' '}
props.dependentValueMinumum, <ValueWrapper>
props.dependentDecimals, {b(
Math.min(4, props.dependentDecimals) `${amountFormatter(
)} ${props.outputSymbol}` props.dependentValueMinumum,
)} props.dependentDecimals,
Math.min(4, props.dependentDecimals)
)} ${props.outputSymbol}`
)}
</ValueWrapper>
. .
</div> </div>
<LastSummaryText> <LastSummaryText>
{t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}. {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>
</LastSummaryText> </LastSummaryText>
</div> </div>
) )
@ -507,13 +552,15 @@ export default function TransactionDetails(props) {
<div> <div>
<div> <div>
{t('youAreBuying')}{' '} {t('youAreBuying')}{' '}
{b( <ValueWrapper>
`${amountFormatter( {b(
props.independentValueParsed, `${amountFormatter(
props.independentDecimals, props.independentValueParsed,
Math.min(4, props.independentDecimals) props.independentDecimals,
)} ${props.outputSymbol}` Math.min(4, props.independentDecimals)
)} )} ${props.outputSymbol}`
)}
</ValueWrapper>
. .
</div> </div>
<LastSummaryText> <LastSummaryText>
@ -527,7 +574,7 @@ export default function TransactionDetails(props) {
)}{' '} )}{' '}
</LastSummaryText> </LastSummaryText>
<LastSummaryText> <LastSummaryText>
{t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}. {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>
</LastSummaryText> </LastSummaryText>
</div> </div>
) )

6
src/theme/components.js
View File

@ -1,5 +1,5 @@
import styled, { keyframes } from 'styled-components' import styled, { keyframes } from 'styled-components'
import { lighten, darken } from 'polished' import { darken } from 'polished'
export const Button = styled.button.attrs(({ warning, theme }) => ({ export const Button = styled.button.attrs(({ warning, theme }) => ({
backgroundColor: warning ? theme.salmonRed : theme.royalBlue backgroundColor: warning ? theme.salmonRed : theme.royalBlue
@ -18,11 +18,11 @@ export const Button = styled.button.attrs(({ warning, theme }) => ({
:hover, :hover,
:focus { :focus {
background-color: ${({ backgroundColor }) => lighten(0.05, backgroundColor)}; background-color: ${({ backgroundColor }) => darken(0.05, backgroundColor)};
} }
:active { :active {
background-color: ${({ backgroundColor }) => darken(0.05, backgroundColor)}; background-color: ${({ backgroundColor }) => darken(0.1, backgroundColor)};
} }
:disabled { :disabled {