From 89b0cf9071d22f14b35e6127e29a743d10f68d9f Mon Sep 17 00:00:00 2001 From: Leandro Boscariol Date: Wed, 23 Mar 2022 13:51:40 -0700 Subject: [PATCH] Moving custom components to mod file to avoid circular dependencies/lazy loading issues (#2580) Co-authored-by: Leandro --- .../CurrencyInputPanelMod.tsx | 266 ++++++++++++++++- .../components/CurrencyInputPanel/index.tsx | 274 +----------------- src/custom/components/SwapWarnings/index.tsx | 2 +- .../SwapModalHeader/SwapModalHeaderMod.tsx | 2 +- .../components/swap/SwapModalHeader/index.tsx | 2 +- 5 files changed, 268 insertions(+), 278 deletions(-) diff --git a/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx b/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx index 4d033274a9..7c890e710e 100644 --- a/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx +++ b/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx @@ -6,7 +6,7 @@ import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/ import { darken } from 'polished' import { ReactNode, useCallback, useState } from 'react' import { Lock } from 'react-feather' -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' // import { formatCurrencyAmount } from 'utils/formatCurrencyAmount' import { ReactComponent as DropDown } from 'assets/images/dropdown.svg' @@ -15,7 +15,7 @@ import { useActiveWeb3React } from 'hooks/web3' import { useCurrencyBalance } from 'state/wallet/hooks' import { TYPE } from 'theme' import { ButtonGray } from 'components/Button' -import CurrencyLogo from 'components/CurrencyLogo' +import CurrencyLogo, { StyledLogo } from 'components/CurrencyLogo' import DoubleCurrencyLogo from 'components/DoubleLogo' import { Input as NumericalInput } from 'components/NumericalInput' import { RowBetween, RowFixed } from 'components/Row' @@ -26,7 +26,8 @@ import { FiatValue } from 'components/CurrencyInputPanel/FiatValue' import { WithClassName } from 'types' import { formatMax, formatSmart } from 'utils/format' import { AMOUNT_PRECISION } from 'constants/index' -import { AuxInformationContainer } from '.' // mod +import { FeeInformationTooltipWrapper } from 'components/swap/FeeInformationTooltip' +import { TextWrapper } from '@src/components/HoverInlineText' // mod export const InputPanel = styled.div<{ hideInput?: boolean }>` ${({ theme }) => theme.flexColumnNoWrap} @@ -61,6 +62,72 @@ export const Container = styled.div<{ hideInput: boolean; showAux?: boolean }>` } ` +// mod - due to circular dependencies and lazy loading +// mod - this custom component has to be here rather than ./index.tsx +export const AuxInformationContainer = styled(Container)<{ + margin?: string + borderColor?: string + borderWidth?: string +}>` + margin: ${({ margin = '0 auto' }) => margin}; + border-radius: 0 0 15px 15px; + + ${({ theme }) => theme.mediaWidth.upToSmall` + height: auto; + flex-flow: column wrap; + justify-content: flex-end; + align-items: flex-end; + `} + + > ${FeeInformationTooltipWrapper} { + align-items: center; + justify-content: space-between; + margin: 0 16px; + padding: 16px 0; + font-weight: 600; + font-size: 14px; + height: auto; + + ${({ theme }) => theme.mediaWidth.upToSmall` + flex-flow: column wrap; + width: 100%; + align-items: flex-start; + margin: 0; + padding: 16px; + `} + + > span { + font-size: 18px; + gap: 2px; + word-break: break-all; + text-align: right; + + ${({ theme }) => theme.mediaWidth.upToSmall` + text-align: left; + align-items: flex-start; + width: 100%; + `}; + } + + > span:first-child { + font-size: 14px; + display: flex; + align-items: center; + white-space: nowrap; + + ${({ theme }) => theme.mediaWidth.upToSmall` + margin: 0 0 10px; + `} + } + + > span > small { + opacity: 0.75; + font-size: 13px; + font-weight: 500; + } + } +` + export const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean; hideInput?: boolean }>` visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')}; align-items: center; @@ -156,6 +223,199 @@ export const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean } ${loadingOpacityMixin} ` +// mod - due to circular dependencies and lazy loading +// mod - this custom component has to be here rather than ./index.tsx +export const Wrapper = styled.div<{ selected: boolean; showLoader: boolean }>` + // CSS Override + + ${InputPanel} { + background: transparent; + color: ${({ theme }) => theme.currencyInput?.color}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + flex-flow: column wrap; + + > div > div > input { + width: 100%; + text-align: left; + padding: 0; + margin: 20px 0 8px; + word-break: break-all; + } + `}; + + &:hover { + color: ${({ theme }) => theme.currencyInput?.color}; + } + } + + ${LabelRow} { + color: ${({ theme }) => theme.currencyInput?.color}; + + span:hover { + color: ${({ theme }) => theme.currencyInput?.color}; + } + } + + ${InputRow} { + background: transparent; + + ${({ theme }) => theme.mediaWidth.upToSmall` + flex-flow: column wrap; + padding: 1rem 1rem 0 1rem; + `}; + + > input, + > input::placeholder { + background: transparent; + color: inherit; + } + + > input::placeholder { + opacity: 0.5; + } + } + + ${StyledBalanceMax} { + color: ${({ theme }) => theme.primary4}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + margin: 0 0 auto 0; + `}; + } + + ${Container} { + background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)}; + border: ${({ theme }) => + theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`}; + + &:hover { + border: ${({ theme }) => + theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`}; + } + } + + ${AuxInformationContainer} { + background-color: ${({ theme }) => darken(0.0, theme.bg1 || theme.bg3)}; + border-top: none; + + &:hover { + background-color: ${({ theme }) => darken(0.0, theme.bg1 || theme.bg3)}; + border-top: none; + } + } + + ${({ showLoader, theme }) => + showLoader && + css` + #swap-currency-output ${Container} { + position: relative; + display: inline-block; + + overflow: hidden; + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + background-image: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0, + ${theme.shimmer1} 20%, + ${theme.shimmer2} 60%, + rgba(255, 255, 255, 0) + ); + animation: shimmer 2s infinite; + content: ''; + } + + @keyframes shimmer { + 100% { + transform: translateX(100%); + } + } + } + `} + + ${CurrencySelect} { + z-index: 2; + color: ${({ selected, theme }) => + selected ? theme.buttonCurrencySelect.colorSelected : theme.buttonCurrencySelect.color}; + transition: background-color 0.2s ease-in-out; + + ${({ theme }) => theme.mediaWidth.upToSmall` + width: 100%; + `}; + + &:focus { + background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)}; + } + &:hover { + background-color: ${({ theme }) => darken(0.05, theme.primary1)}; + } + + path { + stroke: ${({ selected, theme }) => + selected ? theme.buttonCurrencySelect.colorSelected : theme.buttonCurrencySelect.color}; + stroke-width: 1.5px; + } + } + + ${RowBetween} { + color: ${({ theme }) => theme.currencyInput?.color}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + flex-flow: column wrap; + `} + + > div > div > span, + > div { + color: ${({ theme }) => theme.currencyInput?.color}; + } + + // Balance Wrapper + > div:first-of-type { + ${({ theme }) => theme.mediaWidth.upToSmall` + margin: 10px 0 0; + width: 100%; + opacity: 0.75; + `} + } + + // USD estimation + > div:last-of-type { + ${({ theme }) => theme.mediaWidth.upToSmall` + order: -1; + width: 100%; + text-align: left; + justify-content: flex-start; + display: flex; + `} + } + + // Balance text + ${({ theme }) => theme.mediaWidth.upToSmall` + > div > div { + word-break: break-all; + } + `} + } + + ${StyledLogo} { + background: ${({ theme }) => theme.bg1}; + } + + // Reset the cursor for the FIAT estimate & price impact + ${TextWrapper} { + &:hover, + + span:hover { + cursor: initial; + } + } +` + export interface CurrencyInputPanelProps extends WithClassName { value: string onUserInput: (value: string) => void diff --git a/src/custom/components/CurrencyInputPanel/index.tsx b/src/custom/components/CurrencyInputPanel/index.tsx index df798c30d5..9eb8b26b7f 100644 --- a/src/custom/components/CurrencyInputPanel/index.tsx +++ b/src/custom/components/CurrencyInputPanel/index.tsx @@ -1,25 +1,10 @@ -// import { darken } from 'polished' - -import styled, { css } from 'styled-components/macro' -import { darken } from 'polished' +import styled from 'styled-components/macro' import useLoadingWithTimeout from 'hooks/useLoadingWithTimeout' import { useIsQuoteRefreshing } from 'state/price/hooks' -import CurrencyInputPanelMod, { - CurrencyInputPanelProps, - CurrencySelect as CurrencySelectMod, - InputRow, - InputPanel, - LabelRow, - Container, - StyledBalanceMax, -} from './CurrencyInputPanelMod' +import CurrencyInputPanelMod, { CurrencyInputPanelProps, Wrapper } from './CurrencyInputPanelMod' import CurrencySearchModalUni from '@src/components/SearchModal/CurrencySearchModal' -import { RowBetween } from 'components/Row' -import { FeeInformationTooltipWrapper } from 'components/swap/FeeInformationTooltip' -import { TextWrapper } from 'components/HoverInlineText' -import { StyledLogo } from 'components/CurrencyLogo' import { LONG_LOAD_THRESHOLD } from 'constants/index' export const CurrencySearchModal = styled(CurrencySearchModalUni)` @@ -37,261 +22,6 @@ export const CurrencySearchModal = styled(CurrencySearchModalUni)` } ` -export const AuxInformationContainer = styled(Container)<{ - margin?: string - borderColor?: string - borderWidth?: string -}>` - margin: ${({ margin = '0 auto' }) => margin}; - border-radius: 0 0 15px 15px; - - ${({ theme }) => theme.mediaWidth.upToSmall` - height: auto; - flex-flow: column wrap; - justify-content: flex-end; - align-items: flex-end; - `} - - > ${FeeInformationTooltipWrapper} { - align-items: center; - justify-content: space-between; - margin: 0 16px; - padding: 16px 0; - font-weight: 600; - font-size: 14px; - height: auto; - - ${({ theme }) => theme.mediaWidth.upToSmall` - flex-flow: column wrap; - width: 100%; - align-items: flex-start; - margin: 0; - padding: 16px; - `} - - > span { - font-size: 18px; - gap: 2px; - word-break: break-all; - text-align: right; - - ${({ theme }) => theme.mediaWidth.upToSmall` - text-align: left; - align-items: flex-start; - width: 100%; - `}; - } - - > span:first-child { - font-size: 14px; - display: flex; - align-items: center; - white-space: nowrap; - - ${({ theme }) => theme.mediaWidth.upToSmall` - margin: 0 0 10px; - `} - } - - > span > small { - opacity: 0.75; - font-size: 13px; - font-weight: 500; - } - } -` - -export const Wrapper = styled.div<{ selected: boolean; showLoader: boolean }>` - // CSS Override - - ${InputPanel} { - background: transparent; - color: ${({ theme }) => theme.currencyInput?.color}; - - ${({ theme }) => theme.mediaWidth.upToSmall` - flex-flow: column wrap; - - > div > div > input { - width: 100%; - text-align: left; - padding: 0; - margin: 20px 0 8px; - word-break: break-all; - } - `}; - - &:hover { - color: ${({ theme }) => theme.currencyInput?.color}; - } - } - - ${LabelRow} { - color: ${({ theme }) => theme.currencyInput?.color}; - - span:hover { - color: ${({ theme }) => theme.currencyInput?.color}; - } - } - - ${InputRow} { - background: transparent; - - ${({ theme }) => theme.mediaWidth.upToSmall` - flex-flow: column wrap; - padding: 1rem 1rem 0 1rem; - `}; - - > input, - > input::placeholder { - background: transparent; - color: inherit; - } - - > input::placeholder { - opacity: 0.5; - } - } - - ${StyledBalanceMax} { - color: ${({ theme }) => theme.primary4}; - - ${({ theme }) => theme.mediaWidth.upToSmall` - margin: 0 0 auto 0; - `}; - } - - ${Container} { - background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)}; - border: ${({ theme }) => - theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`}; - - &:hover { - border: ${({ theme }) => - theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`}; - } - } - - ${AuxInformationContainer} { - background-color: ${({ theme }) => darken(0.0, theme.bg1 || theme.bg3)}; - border-top: none; - - &:hover { - background-color: ${({ theme }) => darken(0.0, theme.bg1 || theme.bg3)}; - border-top: none; - } - } - - ${({ showLoader, theme }) => - showLoader && - css` - #swap-currency-output ${Container} { - position: relative; - display: inline-block; - - overflow: hidden; - &::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transform: translateX(-100%); - background-image: linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0, - ${theme.shimmer1} 20%, - ${theme.shimmer2} 60%, - rgba(255, 255, 255, 0) - ); - animation: shimmer 2s infinite; - content: ''; - } - - @keyframes shimmer { - 100% { - transform: translateX(100%); - } - } - } - `} - - ${CurrencySelectMod} { - z-index: 2; - color: ${({ selected, theme }) => - selected ? theme.buttonCurrencySelect.colorSelected : theme.buttonCurrencySelect.color}; - transition: background-color 0.2s ease-in-out; - - ${({ theme }) => theme.mediaWidth.upToSmall` - width: 100%; - `}; - - &:focus { - background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)}; - } - &:hover { - background-color: ${({ theme }) => darken(0.05, theme.primary1)}; - } - - path { - stroke: ${({ selected, theme }) => - selected ? theme.buttonCurrencySelect.colorSelected : theme.buttonCurrencySelect.color}; - stroke-width: 1.5px; - } - } - - ${RowBetween} { - color: ${({ theme }) => theme.currencyInput?.color}; - - ${({ theme }) => theme.mediaWidth.upToSmall` - flex-flow: column wrap; - `} - - > div > div > span, - > div { - color: ${({ theme }) => theme.currencyInput?.color}; - } - - // Balance Wrapper - > div:first-of-type { - ${({ theme }) => theme.mediaWidth.upToSmall` - margin: 10px 0 0; - width: 100%; - opacity: 0.75; - `} - } - - // USD estimation - > div:last-of-type { - ${({ theme }) => theme.mediaWidth.upToSmall` - order: -1; - width: 100%; - text-align: left; - justify-content: flex-start; - display: flex; - `} - } - - // Balance text - ${({ theme }) => theme.mediaWidth.upToSmall` - > div > div { - word-break: break-all; - } - `} - } - - ${StyledLogo} { - background: ${({ theme }) => theme.bg1}; - } - - // Reset the cursor for the FIAT estimate & price impact - ${TextWrapper} { - &:hover, - + span:hover { - cursor: initial; - } - } -` - export function CurrencyInputPanel(props: CurrencyInputPanelProps) { const { currency } = props const isRefreshingQuote = useIsQuoteRefreshing() diff --git a/src/custom/components/SwapWarnings/index.tsx b/src/custom/components/SwapWarnings/index.tsx index 1c4c6e7574..1c097b9ef2 100644 --- a/src/custom/components/SwapWarnings/index.tsx +++ b/src/custom/components/SwapWarnings/index.tsx @@ -6,7 +6,7 @@ import { MouseoverTooltipContent } from 'components/Tooltip' import { StyledInfo } from 'pages/Swap/styleds' import { useHighFeeWarning } from 'state/swap/hooks' import TradeGp from 'state/swap/TradeGp' -import { AuxInformationContainer } from 'components/CurrencyInputPanel' +import { AuxInformationContainer } from 'components/CurrencyInputPanel/CurrencyInputPanelMod' import { darken } from 'polished' import useDebounce from 'hooks/useDebounce' diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx index c12049e019..7d74e95e73 100644 --- a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx +++ b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx @@ -28,7 +28,7 @@ import { AMOUNT_PRECISION, INPUT_OUTPUT_EXPLANATION } from 'constants/index' import { computeSlippageAdjustedAmounts } from 'utils/prices' import { Field } from 'state/swap/actions' import { formatMax, formatSmart } from 'utils/format' -import { AuxInformationContainer } from 'components/CurrencyInputPanel' +import { AuxInformationContainer } from 'components/CurrencyInputPanel/CurrencyInputPanelMod' import FeeInformationTooltip from '../FeeInformationTooltip' import { LightCardType } from '.' import { transparentize } from 'polished' diff --git a/src/custom/components/swap/SwapModalHeader/index.tsx b/src/custom/components/swap/SwapModalHeader/index.tsx index de5c2ab3f9..ff35a78ba8 100644 --- a/src/custom/components/swap/SwapModalHeader/index.tsx +++ b/src/custom/components/swap/SwapModalHeader/index.tsx @@ -4,7 +4,7 @@ import { AutoColumn } from 'components/Column' import styled from 'styled-components/macro' import { LightCard as LightCardUni } from 'components/Card' import { darken, transparentize } from 'polished' -import { AuxInformationContainer } from 'components/CurrencyInputPanel' +import { AuxInformationContainer } from 'components/CurrencyInputPanel/CurrencyInputPanelMod' import { HighFeeWarning as HighFeeWarningBase, NoImpactWarning as NoImpactWarningBase } from 'components/SwapWarnings' import { useWalletInfo } from 'hooks/useWalletInfo'