Skip to content

I
interface
Commit a73e8141 authored by vignesh mohankumar's avatar vignesh mohankumar Committed by GitHub
Browse files
Options

fix: swap hover states (#4771) 

* Swap component tweaks

* Fix spacing issues and update swap arrows icon

* px

* fix ternaries

* 20px

* create a separate OutputWrapper

* variable

* update border radius case

* fix type

* use right variable

* move the containers around

* rename to swap section

* swapdetailssection

* remove unnecessary autocolumn

* border radius

* remove unnecessary wrapping div

* wrap the output swap stuff

* inherit border-radius

* update overlay styles

* remove floating bg

* fix ungated version

* fix background colors

* trying this out

* separate blocks

* accent action on the buttons

* undo

* show unselected state properly

* show on expert mode

* 0 not none

* handle margintop

* flag font size

* undo reverse icon change

* fix build
Co-authored-by: default avatarCallil Capuozzo <callil.capuozzo@gmail.com>
parent 7125562c
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 278 deletions
src/assets/svg/swap-arrows.svg 0 → 100644
View file @ a73e8141
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.80333 4.8863C7.51044 5.17919 7.51044 5.65406 7.80333 5.94696C8.09622 6.23985 8.5711 6.23985 8.86399 5.94696L7.80333 4.8863ZM12.0837 1.66663L12.614 1.1363C12.3211 0.843403 11.8462 0.843403 11.5533 1.1363L12.0837 1.66663ZM15.3033 5.94696C15.5962 6.23985 16.0711 6.23985 16.364 5.94696C16.6569 5.65406 16.6569 5.17919 16.364 4.8863L15.3033 5.94696ZM11.3337 9.99996C11.3337 10.4142 11.6694 10.75 12.0837 10.75C12.4979 10.75 12.8337 10.4142 12.8337 9.99996H11.3337ZM12.1973 15.1136C12.4902 14.8207 12.4902 14.3459 12.1973 14.053C11.9044 13.7601 11.4296 13.7601 11.1367 14.053L12.1973 15.1136ZM7.91699 18.3333L7.38666 18.8636C7.52731 19.0043 7.71808 19.0833 7.91699 19.0833C8.1159 19.0833 8.30667 19.0043 8.44732 18.8636L7.91699 18.3333ZM4.69732 14.053C4.40443 13.7601 3.92956 13.7601 3.63666 14.053C3.34377 14.3459 3.34377 14.8207 3.63666 15.1136L4.69732 14.053ZM8.66699 10.8333C8.66699 10.4191 8.33121 10.0833 7.91699 10.0833C7.50278 10.0833 7.16699 10.4191 7.16699 10.8333H8.66699ZM8.86399 5.94696L12.614 2.19696L11.5533 1.1363L7.80333 4.8863L8.86399 5.94696ZM11.5533 2.19696L15.3033 5.94696L16.364 4.8863L12.614 1.1363L11.5533 2.19696ZM11.3337 1.66663V9.99996H12.8337V1.66663H11.3337ZM11.1367 14.053L7.38666 17.803L8.44732 18.8636L12.1973 15.1136L11.1367 14.053ZM8.44732 17.803L4.69732 14.053L3.63666 15.1136L7.38666 18.8636L8.44732 17.803ZM8.66699 18.3333L8.66699 10.8333H7.16699L7.16699 18.3333H8.66699Z" fill="currentColor"/>
</svg>
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View file @ a73e8141
......@@ -11,7 +11,7 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import { Lock } from 'react-feather'
import styled, { useTheme } from 'styled-components/macro'
import styled, { css, useTheme } from 'styled-components/macro'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
......@@ -50,7 +50,7 @@ const FixedContainer = styled.div<{ redesignFlag: boolean }>`
`
const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
min-height: ${({ redesignFlag }) => redesignFlag && '69px'};
min-height: ${({ redesignFlag }) => redesignFlag && '44px'};
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg0)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
......@@ -77,7 +77,7 @@ const CurrencySelect = styled(ButtonGray)<{
background-color: ${({ selected, theme, redesignFlag }) =>
redesignFlag
? selected
? theme.stateOverlayPressed
? theme.backgroundInteractive
: theme.accentAction
: selected
? theme.deprecated_bg2
......@@ -100,23 +100,47 @@ const CurrencySelect = styled(ButtonGray)<{
justify-content: space-between;
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
&:hover {
background-color: ${({ selected, theme, redesignFlag }) =>
redesignFlag
? theme.stateOverlayHover
: selected
? darken(0.05, theme.deprecated_primary1)
: theme.deprecated_bg3};
}
${({ redesignFlag, selected }) =>
!redesignFlag &&
css`
&:hover {
background-color: ${({ theme }) => (selected ? darken(0.05, theme.deprecated_primary1) : theme.deprecated_bg3)};
}
&:active {
background-color: ${({ selected, theme, redesignFlag }) =>
redesignFlag
? theme.stateOverlayPressed
: selected
? darken(0.05, theme.deprecated_primary1)
: theme.deprecated_bg3};
}
&:active {
background-color: ${({ theme }) => (selected ? darken(0.05, theme.deprecated_primary1) : theme.deprecated_bg3)};
}
`}
${({ redesignFlag, selected }) =>
redesignFlag &&
css`
&:hover,
&:active {
background-color: ${({ theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
}
&:before {
background-size: 100%;
border-radius: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
}
&:hover:before {
background-color: ${({ theme }) => theme.stateOverlayHover};
}
&:active:before {
background-color: ${({ theme }) => theme.stateOverlayPressed};
}
`}
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
`
......@@ -135,7 +159,7 @@ const LabelRow = styled.div<{ redesignFlag: boolean }>`
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
font-size: 0.75rem;
line-height: 1rem;
padding: 0 1rem 1rem;
padding: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0 1rem 1rem')};
span:hover {
cursor: pointer;
......@@ -145,8 +169,8 @@ const LabelRow = styled.div<{ redesignFlag: boolean }>`
const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
justify-content: flex-end;
min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
min-height: ${({ redesignFlag }) => redesignFlag && '20px'};
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px 0px 0px'};
height: ${({ redesignFlag }) => !redesignFlag && '24px'};
`
......@@ -170,7 +194,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boole
const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
font-size: ${({ active }) => (active ? '18px' : '18px')};
font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '18px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
`
......
src/components/CurrencyInputPanel/index.tsx
View file @ a73e8141
......@@ -140,7 +140,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
const StyledTokenName = styled.span<{ active?: boolean }>`
${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
font-size: ${({ active }) => (active ? '18px' : '18px')};
font-size: 20px;
`
const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
......
src/components/swap/SwapDetailsDropdown.tsx
View file @ a73e8141
......@@ -23,9 +23,13 @@ import { ResponsiveTooltipContainer } from './styleds'
import SwapRoute from './SwapRoute'
import TradePrice from './TradePrice'
const Wrapper = styled(Row)`
const Wrapper = styled(Row)<{ redesignFlag: boolean }>`
width: 100%;
justify-content: center;
border-radius: ${({ redesignFlag }) => redesignFlag && 'inherit'};
padding: ${({ redesignFlag }) => redesignFlag && '8px 12px'};
margin-top: ${({ redesignFlag }) => (redesignFlag ? '0px' : '4px')} !important;
min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
`
const StyledInfoIcon = styled(Info)`
......@@ -41,14 +45,11 @@ const StyledCard = styled(OutlineCard)<{ redesignFlag: boolean }>`
`
const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; redesignFlag: boolean }>`
padding: ${({ redesignFlag }) => (redesignFlag ? '8px 0px 0px 0px' : '4px 8px')};
padding: ${({ redesignFlag }) => (redesignFlag ? '0' : '4px 8px')};
background-color: ${({ open, theme, redesignFlag }) =>
open && !redesignFlag ? theme.deprecated_bg1 : 'transparent'};
align-items: center;
border-top: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
margin-top: ${({ redesignFlag }) => redesignFlag && '8px'};
cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
min-height: 40px;
border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
`
......@@ -133,7 +134,7 @@ export default function SwapDetailsDropdown({
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
return (
<Wrapper style={{ marginTop: '8px' }}>
<Wrapper style={{ marginTop: redesignFlagEnabled ? '0' : '8px' }} redesignFlag={redesignFlagEnabled}>
<AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
<TraceEvent
events={[Event.onClick]}
......
src/components/swap/styleds.tsx
View file @ a73e8141
......@@ -36,15 +36,14 @@ export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; red
`
export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boolean }>`
padding: 4px;
border-radius: 12px;
height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
position: relative;
margin-top: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
margin-bottom: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
left: calc(50% - 16px);
/* transform: rotate(90deg); */
margin-left: auto;
margin-right: auto;
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundInteractive : theme.deprecated_bg1)};
border: 4px solid;
border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
......
src/pages/Swap/index.tsx
View file @ a73e8141
......@@ -27,7 +27,7 @@ import useTransactionDeadline from 'hooks/useTransactionDeadline'
import JSBI from 'jsbi'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { ReactNode } from 'react'
import { ArrowDown, ArrowUp, CheckCircle, HelpCircle } from 'react-feather'
import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather'
import { useNavigate } from 'react-router-dom'
import { Text } from 'rebass'
import { useToggleWalletModal } from 'state/application/hooks'
......@@ -73,19 +73,17 @@ import { supportedChainId } from '../../utils/supportedChainId'
const ArrowContainer = styled.div`
display: inline-block;
margin-left: 6%;
`
const ArrowDownWrapper = styled.div`
margin-top: -80%;
margin-left: 24%;
`
const ArrowUpWrapper = styled.div`
margin-left: 56%;
margin-top: -18%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
`
const InputWrapper = styled.div<{ redesignFlag: boolean }>`
visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
const SwapSection = styled.div<{ redesignFlag: boolean }>`
position: relative;
${({ redesignFlag }) =>
redesignFlag &&
css`
......@@ -96,9 +94,44 @@ const InputWrapper = styled.div<{ redesignFlag: boolean }>`
font-size: 14px;
line-height: 20px;
font-weight: 500;
&:before {
box-sizing: border-box;
background-size: 100%;
border-radius: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
border: 1px solid ${({ theme }) => theme.backgroundModule};
}
&:hover:before {
border-color: ${({ theme }) => theme.stateOverlayHover};
}
&:focus-within:before {
border-color: ${({ theme }) => theme.stateOverlayPressed};
}
`}
`
const OutputSwapSection = styled(SwapSection)<{ showDetailsDropdown: boolean }>`
border-bottom: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundSurface}`};
border-bottom-left-radius: ${({ redesignFlag, showDetailsDropdown }) => redesignFlag && showDetailsDropdown && '0'};
border-bottom-right-radius: ${({ redesignFlag, showDetailsDropdown }) => redesignFlag && showDetailsDropdown && '0'};
`
const DetailsSwapSection = styled(SwapSection)`
padding: 0;
border-top-left-radius: ${({ redesignFlag }) => redesignFlag && '0'};
border-top-right-radius: ${({ redesignFlag }) => redesignFlag && '0'};
`
export function getIsValidSwapQuote(
trade: InterfaceTrade<Currency, Currency, TradeType> | undefined,
tradeState: TradeState,
......@@ -500,6 +533,10 @@ export default function Swap() {
const approveTokenButtonDisabled =
approvalState !== ApprovalState.NOT_APPROVED || approvalSubmitted || signatureState === UseERC20PermitState.SIGNED
const showDetailsDropdown = Boolean(
!showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)
)
return (
<Trace page={PageName.SWAP_PAGE} shouldLogImpression>
<>
......@@ -540,238 +577,182 @@ export default function Swap() {
fiatValueOutput={fiatValueOutput}
/>
<AutoColumn gap={'0px'}>
<div style={{ display: 'relative' }}>
<InputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_INPUT_PANEL}>
<div style={{ display: 'relative' }}>
<SwapSection redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_INPUT_PANEL}>
<SwapCurrencyInputPanel
label={
independentField === Field.OUTPUT && !showWrap ? (
<Trans>From (at most)</Trans>
) : (
<Trans>From</Trans>
)
}
value={formattedAmounts[Field.INPUT]}
showMaxButton={showMaxButton}
currency={currencies[Field.INPUT] ?? null}
onUserInput={handleTypeInput}
onMax={handleMaxInput}
fiatValue={fiatValueInput ?? undefined}
onCurrencySelect={handleInputSelect}
otherCurrency={currencies[Field.OUTPUT]}
showCommonBases={true}
id={SectionName.CURRENCY_INPUT_PANEL}
loading={independentField === Field.OUTPUT && routeIsSyncing}
/>
</Trace>
</SwapSection>
<ArrowWrapper clickable={isSupportedChain(chainId)} redesignFlag={redesignFlagEnabled}>
<TraceEvent
events={[Event.onClick]}
name={EventName.SWAP_TOKENS_REVERSED}
element={ElementName.SWAP_TOKENS_REVERSE_ARROW_BUTTON}
>
<ArrowContainer
onClick={() => {
setApprovalSubmitted(false) // reset 2 step UI for approvals
onSwitchTokens()
}}
color={theme.textPrimary}
>
<ArrowDown
size="16"
color={
currencies[Field.INPUT] && currencies[Field.OUTPUT]
? theme.deprecated_text1
: theme.deprecated_text3
}
/>
</ArrowContainer>
</TraceEvent>
</ArrowWrapper>
</div>
<AutoColumn gap={redesignFlagEnabled ? '12px' : '8px'}>
<div>
<OutputSwapSection redesignFlag={redesignFlagEnabled} showDetailsDropdown={showDetailsDropdown}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
<SwapCurrencyInputPanel
value={formattedAmounts[Field.OUTPUT]}
onUserInput={handleTypeOutput}
label={
independentField === Field.OUTPUT && !showWrap ? (
<Trans>From (at most)</Trans>
) : (
<Trans>From</Trans>
)
independentField === Field.INPUT && !showWrap ? <Trans>To (at least)</Trans> : <Trans>To</Trans>
}
value={formattedAmounts[Field.INPUT]}
showMaxButton={showMaxButton}
currency={currencies[Field.INPUT] ?? null}
onUserInput={handleTypeInput}
onMax={handleMaxInput}
fiatValue={fiatValueInput ?? undefined}
onCurrencySelect={handleInputSelect}
otherCurrency={currencies[Field.OUTPUT]}
showMaxButton={false}
hideBalance={false}
fiatValue={fiatValueOutput ?? undefined}
priceImpact={stablecoinPriceImpact}
currency={currencies[Field.OUTPUT] ?? null}
onCurrencySelect={handleOutputSelect}
otherCurrency={currencies[Field.INPUT]}
showCommonBases={true}
id={SectionName.CURRENCY_INPUT_PANEL}
loading={independentField === Field.OUTPUT && routeIsSyncing}
id={SectionName.CURRENCY_OUTPUT_PANEL}
loading={independentField === Field.INPUT && routeIsSyncing}
/>
</Trace>
</InputWrapper>
<ArrowWrapper clickable={isSupportedChain(chainId)} redesignFlag={redesignFlagEnabled}>
{recipient !== null && !showWrap ? (
<>
<AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
<ArrowWrapper clickable={false} redesignFlag={redesignFlagEnabled}>
<ArrowDown size="16" color={theme.deprecated_text2} />
</ArrowWrapper>
<LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
<Trans>- Remove recipient</Trans>
</LinkStyledButton>
</AutoRow>
<AddressInputPanel id="recipient" value={recipient} onChange={onChangeRecipient} />
</>
) : null}
</OutputSwapSection>
{showDetailsDropdown && (
<DetailsSwapSection redesignFlag={redesignFlagEnabled}>
<SwapDetailsDropdown
trade={trade}
syncing={routeIsSyncing}
loading={routeIsLoading}
showInverted={showInverted}
setShowInverted={setShowInverted}
allowedSlippage={allowedSlippage}
/>
</DetailsSwapSection>
)}
</div>
{showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
<div>
{swapIsUnsupported ? (
<ButtonPrimary disabled={true}>
<ThemedText.DeprecatedMain mb="4px">
<Trans>Unsupported Asset</Trans>
</ThemedText.DeprecatedMain>
</ButtonPrimary>
) : !account ? (
<TraceEvent
events={[Event.onClick]}
name={EventName.SWAP_TOKENS_REVERSED}
element={ElementName.SWAP_TOKENS_REVERSE_ARROW_BUTTON}
name={EventName.CONNECT_WALLET_BUTTON_CLICKED}
properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }}
element={ElementName.CONNECT_WALLET_BUTTON}
>
{redesignFlagEnabled ? (
<ArrowContainer
onClick={() => {
setApprovalSubmitted(false) // reset 2 step UI for approvals
onSwitchTokens()
}}
color={theme.textPrimary}
>
<ArrowUpWrapper>
<ArrowUp size="12" stroke-width="3" />
</ArrowUpWrapper>
<ArrowDownWrapper>
<ArrowDown size="12" stroke-width="3" />
</ArrowDownWrapper>
</ArrowContainer>
) : (
<ArrowDown
size="16"
onClick={() => {
setApprovalSubmitted(false) // reset 2 step UI for approvals
onSwitchTokens()
}}
color={
currencies[Field.INPUT] && currencies[Field.OUTPUT]
? theme.deprecated_text1
: theme.deprecated_text3
}
/>
)}
<ButtonLight onClick={toggleWalletModal} redesignFlag={redesignFlagEnabled}>
<Trans>Connect Wallet</Trans>
</ButtonLight>
</TraceEvent>
</ArrowWrapper>
</div>
<div>
<AutoColumn gap={redesignFlagEnabled ? '12px' : '8px'}>
<InputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
<SwapCurrencyInputPanel
value={formattedAmounts[Field.OUTPUT]}
onUserInput={handleTypeOutput}
label={
independentField === Field.INPUT && !showWrap ? (
<Trans>To (at least)</Trans>
) : (
<Trans>To</Trans>
)
}
showMaxButton={false}
hideBalance={false}
fiatValue={fiatValueOutput ?? undefined}
priceImpact={stablecoinPriceImpact}
currency={currencies[Field.OUTPUT] ?? null}
onCurrencySelect={handleOutputSelect}
otherCurrency={currencies[Field.INPUT]}
showCommonBases={true}
id={SectionName.CURRENCY_OUTPUT_PANEL}
loading={independentField === Field.INPUT && routeIsSyncing}
/>
</Trace>
{recipient !== null && !showWrap ? (
<>
<AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
<ArrowWrapper clickable={false} redesignFlag={redesignFlagEnabled}>
<ArrowDown size="16" color={theme.deprecated_text2} />
</ArrowWrapper>
<LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
<Trans>- Remove recipient</Trans>
</LinkStyledButton>
</AutoRow>
<AddressInputPanel id="recipient" value={recipient} onChange={onChangeRecipient} />
</>
) : showWrap ? (
<ButtonPrimary disabled={Boolean(wrapInputError)} onClick={onWrap}>
{wrapInputError ? (
<WrapErrorText wrapInputError={wrapInputError} />
) : wrapType === WrapType.WRAP ? (
<Trans>Wrap</Trans>
) : wrapType === WrapType.UNWRAP ? (
<Trans>Unwrap</Trans>
) : null}
{!showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing) && (
<SwapDetailsDropdown
trade={trade}
syncing={routeIsSyncing}
loading={routeIsLoading}
showInverted={showInverted}
setShowInverted={setShowInverted}
allowedSlippage={allowedSlippage}
/>
)}
{showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
</InputWrapper>
<div>
{swapIsUnsupported ? (
<ButtonPrimary disabled={true}>
<ThemedText.DeprecatedMain mb="4px">
<Trans>Unsupported Asset</Trans>
</ThemedText.DeprecatedMain>
</ButtonPrimary>
) : !account ? (
<TraceEvent
events={[Event.onClick]}
name={EventName.CONNECT_WALLET_BUTTON_CLICKED}
properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }}
element={ElementName.CONNECT_WALLET_BUTTON}
</ButtonPrimary>
) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
<GreyCard style={{ textAlign: 'center' }}>
<ThemedText.DeprecatedMain mb="4px">
<Trans>Insufficient liquidity for this trade.</Trans>
</ThemedText.DeprecatedMain>
</GreyCard>
) : showApproveFlow ? (
<AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}>
<AutoColumn style={{ width: '100%' }} gap="12px">
<ButtonConfirmed
onClick={handleApprove}
disabled={approveTokenButtonDisabled}
width="100%"
altDisabledStyle={approvalState === ApprovalState.PENDING} // show solid button while waiting
confirmed={
approvalState === ApprovalState.APPROVED || signatureState === UseERC20PermitState.SIGNED
}
>
<ButtonLight onClick={toggleWalletModal} redesignFlag={redesignFlagEnabled}>
<Trans>Connect Wallet</Trans>
</ButtonLight>
</TraceEvent>
) : showWrap ? (
<ButtonPrimary disabled={Boolean(wrapInputError)} onClick={onWrap}>
{wrapInputError ? (
<WrapErrorText wrapInputError={wrapInputError} />
) : wrapType === WrapType.WRAP ? (
<Trans>Wrap</Trans>
) : wrapType === WrapType.UNWRAP ? (
<Trans>Unwrap</Trans>
) : null}
</ButtonPrimary>
) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
<GreyCard style={{ textAlign: 'center' }}>
<ThemedText.DeprecatedMain mb="4px">
<Trans>Insufficient liquidity for this trade.</Trans>
</ThemedText.DeprecatedMain>
</GreyCard>
) : showApproveFlow ? (
<AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}>
<AutoColumn style={{ width: '100%' }} gap="12px">
<ButtonConfirmed
onClick={handleApprove}
disabled={approveTokenButtonDisabled}
width="100%"
altDisabledStyle={approvalState === ApprovalState.PENDING} // show solid button while waiting
confirmed={
approvalState === ApprovalState.APPROVED || signatureState === UseERC20PermitState.SIGNED
}
>
<AutoRow justify="space-between" style={{ flexWrap: 'nowrap' }} height="20px">
<span style={{ display: 'flex', alignItems: 'center' }}>
{/* we need to shorten this string on mobile */}
{approvalState === ApprovalState.APPROVED ||
signatureState === UseERC20PermitState.SIGNED ? (
<Trans>You can now trade {currencies[Field.INPUT]?.symbol}</Trans>
) : (
<Trans>
Allow the Uniswap Protocol to use your {currencies[Field.INPUT]?.symbol}
</Trans>
)}
</span>
{approvalPending || approvalState === ApprovalState.PENDING ? (
<Loader stroke={theme.white} />
) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||
signatureState === UseERC20PermitState.SIGNED ? (
<CheckCircle size="20" color={theme.deprecated_green1} />
) : (
<MouseoverTooltip
text={
<Trans>
You must give the Uniswap smart contracts permission to use your{' '}
{currencies[Field.INPUT]?.symbol}. You only have to do this once per token.
</Trans>
}
>
<HelpCircle size="20" color={theme.deprecated_white} style={{ marginLeft: '8px' }} />
</MouseoverTooltip>
)}
</AutoRow>
</ButtonConfirmed>
<ButtonError
onClick={() => {
if (isExpertMode) {
handleSwap()
} else {
setSwapState({
tradeToConfirm: trade,
attemptingTxn: false,
swapErrorMessage: undefined,
showConfirm: true,
txHash: undefined,
})
<AutoRow justify="space-between" style={{ flexWrap: 'nowrap' }} height="20px">
<span style={{ display: 'flex', alignItems: 'center' }}>
{/* we need to shorten this string on mobile */}
{approvalState === ApprovalState.APPROVED ||
signatureState === UseERC20PermitState.SIGNED ? (
<Trans>You can now trade {currencies[Field.INPUT]?.symbol}</Trans>
) : (
<Trans>Allow the Uniswap Protocol to use your {currencies[Field.INPUT]?.symbol}</Trans>
)}
</span>
{approvalPending || approvalState === ApprovalState.PENDING ? (
<Loader stroke={theme.white} />
) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||
signatureState === UseERC20PermitState.SIGNED ? (
<CheckCircle size="20" color={theme.deprecated_green1} />
) : (
<MouseoverTooltip
text={
<Trans>
You must give the Uniswap smart contracts permission to use your{' '}
{currencies[Field.INPUT]?.symbol}. You only have to do this once per token.
</Trans>
}
}}
width="100%"
id="swap-button"
disabled={
!isValid ||
routeIsSyncing ||
routeIsLoading ||
(approvalState !== ApprovalState.APPROVED &&
signatureState !== UseERC20PermitState.SIGNED) ||
priceImpactTooHigh
}
error={isValid && priceImpactSeverity > 2}
>
<Text fontSize={16} fontWeight={500}>
{priceImpactTooHigh ? (
<Trans>High Price Impact</Trans>
) : trade && priceImpactSeverity > 2 ? (
<Trans>Swap Anyway</Trans>
) : (
<Trans>Swap</Trans>
)}
</Text>
</ButtonError>
</AutoColumn>
</AutoRow>
) : (
>
<HelpCircle size="20" color={theme.deprecated_white} style={{ marginLeft: '8px' }} />
</MouseoverTooltip>
)}
</AutoRow>
</ButtonConfirmed>
<ButtonError
onClick={() => {
if (isExpertMode) {
......@@ -786,30 +767,64 @@ export default function Swap() {
})
}
}}
width="100%"
id="swap-button"
disabled={
!isValid || routeIsSyncing || routeIsLoading || priceImpactTooHigh || !!swapCallbackError
!isValid ||
routeIsSyncing ||
routeIsLoading ||
(approvalState !== ApprovalState.APPROVED && signatureState !== UseERC20PermitState.SIGNED) ||
priceImpactTooHigh
}
error={isValid && priceImpactSeverity > 2 && !swapCallbackError}
error={isValid && priceImpactSeverity > 2}
>
<Text fontSize={20} fontWeight={500}>
{swapInputError ? (
swapInputError
) : routeIsSyncing || routeIsLoading ? (
<Trans>Swap</Trans>
) : priceImpactSeverity > 2 ? (
<Text fontSize={16} fontWeight={500}>
{priceImpactTooHigh ? (
<Trans>High Price Impact</Trans>
) : trade && priceImpactSeverity > 2 ? (
<Trans>Swap Anyway</Trans>
) : priceImpactTooHigh ? (
<Trans>Price Impact Too High</Trans>
) : (
<Trans>Swap</Trans>
)}
</Text>
</ButtonError>
)}
{isExpertMode && swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</div>
</AutoColumn>
</AutoColumn>
</AutoRow>
) : (
<ButtonError
onClick={() => {
if (isExpertMode) {
handleSwap()
} else {
setSwapState({
tradeToConfirm: trade,
attemptingTxn: false,
swapErrorMessage: undefined,
showConfirm: true,
txHash: undefined,
})
}
}}
id="swap-button"
disabled={!isValid || routeIsSyncing || routeIsLoading || priceImpactTooHigh || !!swapCallbackError}
error={isValid && priceImpactSeverity > 2 && !swapCallbackError}
>
<Text fontSize={20} fontWeight={500}>
{swapInputError ? (
swapInputError
) : routeIsSyncing || routeIsLoading ? (
<Trans>Swap</Trans>
) : priceImpactSeverity > 2 ? (
<Trans>Swap Anyway</Trans>
) : priceImpactTooHigh ? (
<Trans>Price Impact Too High</Trans>
) : (
<Trans>Swap</Trans>
)}
</Text>
</ButtonError>
)}
{isExpertMode && swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</div>
</AutoColumn>
</SwapWrapper>
......
src/theme/index.tsx
View file @ a73e8141
......@@ -77,6 +77,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
backgroundBackdrop: darkMode ? colorsDark.backgroundBackdrop : colorsLight.backgroundBackdrop,
backgroundSurface: darkMode ? colorsDark.backgroundSurface : colorsLight.backgroundSurface,
backgroundModule: darkMode ? colorsDark.backgroundModule : colorsLight.backgroundModule,
backgroundFloating: darkMode ? colorsDark.backgroundFloating : colorsLight.backgroundFloating,
backgroundInteractive: darkMode ? colorsDark.backgroundInteractive : colorsLight.backgroundInteractive,
backgroundOutline: darkMode ? colorsDark.backgroundOutline : colorsLight.backgroundOutline,
backgroundScrim: darkMode ? colorsDark.backgroundScrim : colorsLight.backgroundScrim,
......
src/theme/styled.d.ts
View file @ a73e8141
......@@ -9,6 +9,7 @@ export interface ThemeColors {
backgroundBackdrop: Color
backgroundSurface: Color
backgroundModule: Color
backgroundFloating: Color
backgroundInteractive: Color
backgroundOutline: Color
backgroundScrim: Color
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment