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

Design tweaks (#717)

Browse Source 
* Prepare for V2 testing

* Bug fixes and tweaks

* Add form link

* Design tweaks

* higher quality favicon

* Favicon... again.

Co-authored-by: Ian Lapham <ianlapham@gmail.com>
This commit is contained in:
Callil Capuozzo 2020-05-06 15:34:06 -04:00 committed by GitHub
parent cdbf440e9c
commit e5ced44d75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 152 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 B

After

Width:  |  Height:  |  Size: 6.9 KiB

4
src/assets/images/question.svg
View File

@ -1,4 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8" fill="#E1E1E1"/>
<path d="M7.09618 9.67828H8.18831V9.60573C8.20358 8.72745 8.45561 8.33413 9.10477 7.93317C9.78831 7.52076 10.2084 6.94033 10.2084 6.08115C10.2084 4.8401 9.26897 4 7.86754 4C6.58067 4 5.54964 4.75227 5.5 6.12697H6.66086C6.70668 5.31742 7.28329 4.96229 7.86754 4.96229C8.51671 4.96229 9.04368 5.39379 9.04368 6.06969C9.04368 6.63866 8.68854 7.03962 8.23413 7.3222C7.52387 7.75752 7.10382 8.18902 7.09618 9.60573V9.67828ZM7.67279 12C8.08902 12 8.43652 11.6601 8.43652 11.2363C8.43652 10.82 8.08902 10.4764 7.67279 10.4764C7.25274 10.4764 6.90907 10.82 6.90907 11.2363C6.90907 11.6601 7.25274 12 7.67279 12Z" fill="#737373"/>
<circle cx="8" cy="8" r="8" fill="#EDEEF2"/>
<path d="M7.09618 9.67828H8.18831V9.60573C8.20358 8.72745 8.45561 8.33413 9.10477 7.93317C9.78831 7.52076 10.2084 6.94033 10.2084 6.08115C10.2084 4.8401 9.26897 4 7.86754 4C6.58067 4 5.54964 4.75227 5.5 6.12697H6.66086C6.70668 5.31742 7.28329 4.96229 7.86754 4.96229C8.51671 4.96229 9.04368 5.39379 9.04368 6.06969C9.04368 6.63866 8.68854 7.03962 8.23413 7.3222C7.52387 7.75752 7.10382 8.18902 7.09618 9.60573V9.67828ZM7.67279 12C8.08902 12 8.43652 11.6601 8.43652 11.2363C8.43652 10.82 8.08902 10.4764 7.67279 10.4764C7.25274 10.4764 6.90907 10.82 6.90907 11.2363C6.90907 11.6601 7.25274 12 7.67279 12Z" fill="#565A69"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 770 B

After

Width:  |  Height:  |  Size: 770 B

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

@ -167,7 +167,7 @@ export default function CurrencyInputPanel({
{!hideInput && (
<LabelRow>
<RowBetween>
<TYPE.body color={theme.text2} fontWeight={500} fontSize={16}>
<TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
{label}
</TYPE.body>
@ -176,7 +176,7 @@ export default function CurrencyInputPanel({
onClick={onMax}
color={theme.text2}
fontWeight={500}
fontSize={16}
fontSize={14}
style={{ display: 'inline' }}
>
{!hideBalance && !!token && userTokenBalance

108
src/components/ExchangePage/index.tsx
View File

@ -83,7 +83,7 @@ const SectionBreak = styled.div`
`
const BottomGrouping = styled.div`
margin-top: 20px;
margin-top: 12px;
position: relative;
`
@ -158,6 +158,12 @@ const StyledBalanceMaxMini = styled.button`
}
`
const TruncatedText = styled(Text)`
text-overflow: ellipsis;
width: 220px;
overflow: hidden;
`
// styles
const Dots = styled.span`
&::after {
@ -955,9 +961,10 @@ function ExchangePage({ sendingInput = false, history, params }) {
return (
<AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
<RowBetween align="flex-end">
<Text fontSize={24} fontWeight={500}>
{!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)}
</Text>
<TruncatedText fontSize={24} fontWeight={500}>
{!!formattedAmounts[Field.INPUT] && formattedAmounts[Field.INPUT]}
{/* {!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)} */}
</TruncatedText>
<RowFixed gap="4px">
<TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
@ -969,9 +976,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
<ArrowDown size="16" color={'#888D9B'} />
</RowFixed>
<RowBetween align="flex-end">
<Text fontSize={24} fontWeight={500} color={warningHigh ? '#FF6871' : ''}>
{!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)}
</Text>
<TruncatedText fontSize={24} fontWeight={500} color={warningHigh ? '#FF6871' : ''}>
{!!formattedAmounts[Field.OUTPUT] && formattedAmounts[Field.OUTPUT]}
{/* {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)} */}
</TruncatedText>
<RowFixed gap="4px">
<TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
@ -982,15 +991,19 @@ function ExchangePage({ sendingInput = false, history, params }) {
<AutoColumn justify="flex-start" gap="sm" padding={'20px 0 0 0px'}>
{independentField === Field.INPUT ? (
<TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
{`Output is estimated. You will receive at least ${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(
6
)} ${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
{`Output is estimated. You will receive at least `}
<b>
{slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(6)} {tokens[Field.OUTPUT]?.symbol}{' '}
</b>{' '}
{` or the transaction will revert.`}
</TYPE.italic>
) : (
<TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
{`Input is estimated. You will sell at most ${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} ${
tokens[Field.INPUT]?.symbol
} or the transaction will revert.`}
{`Input is estimated. You will sell at most `}{' '}
<b>
{slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} {tokens[Field.INPUT]?.symbol}
</b>
{` or the transaction will revert.`}
</TYPE.italic>
)}
</AutoColumn>
@ -1049,7 +1062,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
<TYPE.black fontSize={14} fontWeight={400}>
{independentField === Field.INPUT ? (sending ? 'Min sent' : 'Minimum received') : 'Maximum sold'}
</TYPE.black>
<QuestionHelper text="" />
<QuestionHelper text="A boundary is set so you are protected from large price movements after you submit your trade." />
</RowFixed>
<RowFixed>
<TYPE.black fontSize={14}>
@ -1077,9 +1090,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400}>
Slippage
Price impact
</TYPE.black>
<QuestionHelper text="" />
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed>
<ErrorText
fontWeight={500}
@ -1100,11 +1113,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
<TYPE.black fontSize={14} fontWeight={400}>
Liquidity Provider Fee
</TYPE.black>
<QuestionHelper text="A portion of each trade goes to liquidity providers to incentivize liquidity on the protocol." />
<QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
</RowFixed>
<TYPE.black fontSize={14}>
{feeTimesInputFormatted
? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
? feeTimesInputFormatted?.toSignificant(6) + ' ' + tokens[Field.INPUT]?.symbol
: '-'}
</TYPE.black>
</RowBetween>
@ -1155,8 +1168,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
: priceSlippage.toFixed(4) + '%'
: '-'}
</ErrorText>
<Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}>
Slippage
<Text fontWeight={500} fontSize={16} color={theme().text3} pt={1}>
Price Impact
</Text>
</AutoColumn>
</AutoRow>
@ -1268,13 +1281,13 @@ function ExchangePage({ sendingInput = false, history, params }) {
/>
{sendingWithSwap ? (
<ColumnCenter>
<RowBetween padding="0 8px">
<RowBetween padding="0 12px">
<ArrowWrapper onClick={onSwapTokens}>
<ArrowDown size="16" color="#ff007a" onClick={onSwapTokens} />
</ArrowWrapper>
<ArrowWrapper onClick={() => setSendingWithSwap(false)} style={{ marginRight: '20px' }}>
<StyledBalanceMaxMini onClick={() => setSendingWithSwap(false)} style={{ marginRight: '0px' }}>
<TYPE.blue>Remove Swap</TYPE.blue>
</ArrowWrapper>
</StyledBalanceMaxMini>
</RowBetween>
</ColumnCenter>
) : (
@ -1307,9 +1320,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
/>
{sendingWithSwap && (
<RowBetween padding="0 8px">
<RowBetween padding="0 12px">
<ArrowDown size="16" />
<div> </div>
</RowBetween>
)}
</>
@ -1337,19 +1349,19 @@ function ExchangePage({ sendingInput = false, history, params }) {
</AutoColumn>
)}
{!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
<Card padding={advanced ? '.25rem .75rem 0 .75rem' : '.25rem .75rem 0 .75rem'} borderRadius={'20px'}>
<Card padding={advanced ? '.25rem 1.25rem 0 .75rem' : '.25rem .7rem .25rem 1.25rem'} borderRadius={'20px'}>
{advanced ? (
<PriceBar />
) : (
<AutoColumn style={{ cursor: 'pointer' }} gap="sm">
<AutoColumn gap="4px">
{' '}
<RowBetween align="center" justify="center">
<Text fontWeight={500} fontSize={16} color={theme().text2}>
<Text fontWeight={500} fontSize={14} color={theme().text2}>
Price
</Text>
<Text
fontWeight={500}
fontSize={16}
fontSize={14}
color={theme().text2}
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
>
@ -1357,12 +1369,12 @@ function ExchangePage({ sendingInput = false, history, params }) {
? route.midPrice.invert().toSignificant(6) +
' ' +
tokens[Field.INPUT]?.symbol +
' / ' +
' per ' +
tokens[Field.OUTPUT]?.symbol
: route.midPrice.toSignificant(6) +
' ' +
tokens[Field.OUTPUT]?.symbol +
' / ' +
' per ' +
tokens[Field.INPUT]?.symbol}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
@ -1371,18 +1383,22 @@ function ExchangePage({ sendingInput = false, history, params }) {
</RowBetween>
{pair && (warningHigh || warningMedium) && (
<RowBetween>
<TYPE.main style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
<TYPE.main
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
fontSize={14}
>
Price Impact
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</TYPE.main>
<ErrorText fontWeight={500} fontSize={16} warningMedium={warningMedium} warningHigh={warningHigh}>
{priceSlippage
? priceSlippage.toFixed(4) === '0.0000'
? '<0.0001%'
: priceSlippage.toFixed(4) + '%'
: '-'}{' '}
⚠️
</ErrorText>
<RowFixed>
<ErrorText fontWeight={500} fontSize={14} warningMedium={warningMedium} warningHigh={warningHigh}>
{priceSlippage
? priceSlippage.toFixed(4) === '0.0000'
? '<0.0001%'
: priceSlippage.toFixed(4) + '%'
: '-'}{' '}
</ErrorText>
<QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
</RowFixed>
</RowBetween>
)}
</AutoColumn>
@ -1510,9 +1526,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400}>
Slippage
Price Impact
</TYPE.black>
<QuestionHelper text="The difference between the market price and your price due to trade size." />
<QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
</RowFixed>
<ErrorText
fontWeight={500}
@ -1533,11 +1549,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
<TYPE.black fontSize={14} fontWeight={400}>
Liquidity Provider Fee
</TYPE.black>
<QuestionHelper text="Price change due to trade size and LP fee" />
<QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
</RowFixed>
<TYPE.black fontSize={14}>
{feeTimesInputFormatted
? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
? feeTimesInputFormatted?.toSignificant(6) + ' ' + tokens[Field.INPUT]?.symbol
: '-'}
</TYPE.black>
</RowBetween>
@ -1547,7 +1563,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
<TYPE.black fontWeight={400} fontSize={14}>
Set front running resistance
</TYPE.black>
<QuestionHelper text="Your transaction will revert if the price changes more than this amount after your submit your trade." />
<QuestionHelper text="Your transaction will revert if the price changes more than this amount after you submit your trade." />
</RowFixed>
<SlippageTabs
rawSlippage={allowedSlippage}

9
src/components/Header/index.js
View File

@ -30,7 +30,9 @@ const HeaderFrame = styled.div`
${({ theme }) => theme.mediaWidth.upToExtraSmall`
padding: 10px;
width: calc(100% - 20px);
width: calc(100% - 12px);
position: relative;
`};
z-index: 2;
`
@ -121,6 +123,11 @@ const MigrateBanner = styled(AutoColumn)`
a {
color: ${({ theme }) => theme.pink2};
}
${({ theme }) => theme.mediaWidth.upToSmall`
padding: 0;
display: none;
`};
`
export default function Header() {

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

@ -105,7 +105,7 @@ function NavigationTabs({ location: { pathname }, history }) {
<>
{adding || removing ? (
<Tabs>
<RowBetween style={{ padding: '1rem' }}>
<RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
<Hover onClick={() => history.goBack()}>
<ArrowLink />
</Hover>
@ -114,7 +114,7 @@ function NavigationTabs({ location: { pathname }, history }) {
text={
adding
? 'When you add liqudiity, you are given pool tokens that represent your position in this pool. These tokens automatically earn fees proportional to your pool share and can be redeemed at any time.'
: 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts your receive.'
: 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts you receive.'
}
/>
</RowBetween>

6
src/components/NumericalInput/index.tsx
View File

@ -18,6 +18,12 @@ const StyledInput = styled.input`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0px;
-webkit-appearance: textfield;
::-webkit-search-decoration {
-webkit-appearance: none;
}
[type='number'] {
-moz-appearance: textfield;

2
src/components/Popups/index.js
View File

@ -39,7 +39,7 @@ const MobilePopupInner = styled.div`
const FixedPopupColumn = styled(AutoColumn)`
position: absolute;
top: 128px;
top: 112px;
right: 1rem;
width: 355px;

30
src/components/PositionCard/index.js
View File

@ -149,16 +149,18 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
<AutoColumn gap="8px">
<FixedHeightRow>
<RowFixed>
{!minimal && <TokenLogo size="20px" style={{ marginRight: '8px' }} address={token0?.address || ''} />}
<Text color="#888D9B" fontSize={16} fontWeight={500}>
<Text fontSize={16} fontWeight={500}>
Pooled {token0?.symbol}:
</Text>
</RowFixed>
{token0Deposited ? (
<RowFixed>
<Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
{token0Deposited?.toFixed(8)}
</Text>
{!minimal && (
<TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address || ''} />
)}
</RowFixed>
) : (
'-'
@ -167,35 +169,39 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
<FixedHeightRow>
<RowFixed>
{!minimal && <TokenLogo size="20px" style={{ marginRight: '8px' }} address={token1?.address || ''} />}
<Text color="#888D9B" fontSize={16} fontWeight={500}>
<Text fontSize={16} fontWeight={500}>
Pooled {token1?.symbol}:
</Text>
</RowFixed>
{token1Deposited ? (
<Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
{token1Deposited?.toFixed(8)}
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
{token1Deposited?.toFixed(8)}
</Text>
{!minimal && (
<TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address || ''} />
)}
</RowFixed>
) : (
'-'
)}
</FixedHeightRow>
{!minimal && (
<FixedHeightRow>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
<Text fontSize={16} fontWeight={500}>
Your pool tokens:
</Text>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
<Text fontSize={16} fontWeight={500}>
{userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
</Text>
</FixedHeightRow>
)}
{!minimal && (
<FixedHeightRow>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
<Text fontSize={16} fontWeight={500}>
Your pool share
</Text>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
<Text fontSize={16} fontWeight={500}>
{poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
</Text>
</FixedHeightRow>

9
src/components/SearchModal/index.js
View File

@ -115,7 +115,7 @@ const MenuItem = styled(PaddedItem)`
:hover {
background-color: ${({ theme, disabled }) => !disabled && theme.bg2};
}
opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
`
const BaseWrapper = styled(AutoRow)`
@ -349,7 +349,7 @@ function SearchModal({
filteredPairList.map((pairAddress, i) => {
const token0 = allTokens[allPairs[pairAddress].token0]
const token1 = allTokens[allPairs[pairAddress].token1]
// const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
return (
<MenuItem
key={i}
@ -367,14 +367,14 @@ function SearchModal({
</Text> */}
<ButtonPrimary
padding={'6px 8px'}
width={'56px'}
width={'fit-content'}
borderRadius={'12px'}
onClick={() => {
history.push('/add/' + token0.address + '-' + token1.address)
onDismiss()
}}
>
Join
{balance ? 'Manage' : 'Join'}
</ButtonPrimary>
</MenuItem>
)
@ -451,6 +451,7 @@ function SearchModal({
key={address}
onClick={() => (hiddenToken && hiddenToken === address ? () => {} : _onTokenSelect(address))}
disabled={hiddenToken && hiddenToken === address}
selected={otherSelectedTokenAddress === address}
>
<RowFixed>
<TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }} />

7
src/components/SlippageTabs/index.js
View File

@ -365,11 +365,14 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
<TYPE.body fontSize={14}>Deadline</TYPE.body>
<QuestionHelper text="Deadline in minutes. If your transaction takes longer than this it will revert." />
</RowFixed>
<RowBetween padding={'0 20px'}>
<RowFixed padding={'0 20px'}>
<OptionCustom style={{ width: '80px' }}>
<Input tabIndex={-1} placeholder={deadlineInput} value={deadlineInput} onChange={parseCustomDeadline} />
</OptionCustom>
</RowBetween>
<TYPE.body style={{ paddingLeft: '8px' }} fontSize={14}>
minutes
</TYPE.body>
</RowFixed>
</AutoColumn>
</>
)

5
src/pages/App.js
View File

@ -50,6 +50,10 @@ const BodyWrapper = styled.div`
width: 90%;
}
${({ theme }) => theme.mediaWidth.upToExtraSmall`
padding-top: 16px;
`};
z-index: 1;
`
@ -64,6 +68,7 @@ const Body = styled.div`
box-sizing: border-box;
padding: 1rem;
position: relative;
margin-bottom: 10rem;
`
const StyledRed = styled.div`

45
src/pages/Supply/AddLiquidity.tsx
View File

@ -48,6 +48,28 @@ const FixedBottom = styled.div`
width: 100%;
`
// styles
const Dots = styled.span`
&::after {
display: inline-block;
animation: ellipsis 1.25s infinite;
content: '.';
width: 1em;
text-align: left;
}
@keyframes ellipsis {
0% {
content: '.';
}
33% {
content: '..';
}
66% {
content: '...';
}
}
`
enum Field {
INPUT,
OUTPUT
@ -589,7 +611,7 @@ function AddLiquidity({ token0, token1, step = false }) {
{pair ? `${route.midPrice.toSignificant(6)} ` : '-'}
</Text>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
{tokens[Field.OUTPUT]?.symbol} / {tokens[Field.INPUT]?.symbol}
{tokens[Field.OUTPUT]?.symbol} per {tokens[Field.INPUT]?.symbol}
</Text>
</AutoColumn>
<AutoColumn justify="center">
@ -597,7 +619,7 @@ function AddLiquidity({ token0, token1, step = false }) {
{pair ? `${route.midPrice.invert().toSignificant(6)} ` : '-'}
</Text>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
{tokens[Field.INPUT]?.symbol} / {tokens[Field.OUTPUT]?.symbol}
{tokens[Field.INPUT]?.symbol} per {tokens[Field.OUTPUT]?.symbol}
</Text>
</AutoColumn>
<AutoColumn justify="center">
@ -645,11 +667,8 @@ function AddLiquidity({ token0, token1, step = false }) {
<ColumnCenter>
<BlueCard>
<AutoColumn gap="10px">
{/* {step && <TYPE.blue fontWeight={400}>Step 2.</TYPE.blue>} */}
<TYPE.blue fontWeight={400}>
<b>You are the first liquidity provider.</b> The ratio of tokens you add will set the price of this
pool.
</TYPE.blue>
<TYPE.blue fontWeight={600}>You are the first liquidity provider.</TYPE.blue>
<TYPE.blue fontWeight={400}>The ratio of tokens you add will set the price of this pool.</TYPE.blue>
<TYPE.blue fontWeight={400}>Once you are happy with the rate click supply to review.</TYPE.blue>
</AutoColumn>
</BlueCard>
@ -696,7 +715,11 @@ function AddLiquidity({ token0, token1, step = false }) {
approveAmount(Field.OUTPUT)
}}
>
{pendingApprovalOutput ? 'Waiting for approve' : 'Approve ' + tokens[Field.OUTPUT]?.symbol}
{pendingApprovalOutput ? (
<Dots>Approving {tokens[Field.OUTPUT]?.symbol}</Dots>
) : (
'Approve ' + tokens[Field.OUTPUT]?.symbol
)}
</ButtonLight>
) : showInputApprove ? (
<ButtonLight
@ -704,7 +727,11 @@ function AddLiquidity({ token0, token1, step = false }) {
approveAmount(Field.INPUT)
}}
>
{pendingApprovalInput ? 'Waiting for approve' : 'Approve ' + tokens[Field.INPUT]?.symbol}
{pendingApprovalInput ? (
<Dots>Approving {tokens[Field.INPUT]?.symbol}</Dots>
) : (
'Approve ' + tokens[Field.INPUT]?.symbol
)}
</ButtonLight>
) : (
<ButtonPrimary