Skip to content

Commit

Permalink
swap revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
@viet-nv
viet-nv committed Apr 15, 2024
1 parent e7998f4 commit 6d3d195
Show file tree
Hide file tree
Showing 14 changed files with 142 additions and 422 deletions.
21 changes: 20 additions & 1 deletion src/components/SwapForm/TradeSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { NavLink, useSearchParams } from 'react-router-dom'
import { Flex, Text } from 'rebass'
import styled from 'styled-components'

import { ReactComponent as RoutingIcon } from 'assets/svg/routing-icon.svg'
import { ButtonLight } from 'components/Button'
import { AutoColumn } from 'components/Column'
import { RowBetween, RowFixed } from 'components/Row'
Expand All @@ -28,6 +29,16 @@ type WrapperProps = {
$visible: boolean
$disabled: boolean
}

export const RoutingIconWrapper = styled(RoutingIcon)`
height: 16px;
width: 16px;
cursor: pointer;
path {
fill: ${({ theme }) => theme.text} !important;
}
`

const Wrapper = styled.div.attrs<WrapperProps>(props => ({
'data-visible': props.$visible,
'data-disabled': props.$disabled,
Expand Down Expand Up @@ -135,8 +146,9 @@ type Props = {
slippage: number
disableRefresh: boolean
refreshCallback: () => void
toggleRoute: () => void
}
const TradeSummary: React.FC<Props> = ({ routeSummary, slippage, disableRefresh, refreshCallback }) => {
const TradeSummary: React.FC<Props> = ({ routeSummary, slippage, disableRefresh, refreshCallback, toggleRoute }) => {
const { account, chainId } = useActiveWeb3React()
const theme = useTheme()
const { gasRefundPercentage } = useGasRefundTier()
Expand Down Expand Up @@ -271,6 +283,13 @@ const TradeSummary: React.FC<Props> = ({ routeSummary, slippage, disableRefresh,
</NavLink>
</RowBetween>
)}

<RowBetween>
<Text fontSize={12} fontWeight={400} color={theme.subText}>
Routing
</Text>
<RoutingIconWrapper role="button" onClick={toggleRoute} />
</RowBetween>
<SwapFee />
</AutoColumn>
</Wrapper>
Expand Down
51 changes: 50 additions & 1 deletion src/components/SwapForm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
import { Trans } from '@lingui/macro'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { X } from 'react-feather'
import { useSearchParams } from 'react-router-dom'
import { Box, Flex } from 'rebass'
import { Box, Flex, Text } from 'rebass'
import { parseGetRouteResponse } from 'services/route/utils'
import styled from 'styled-components'

import { ReactComponent as RoutingIcon } from 'assets/svg/routing-icon.svg'
import AddressInputPanel from 'components/AddressInputPanel'
import FeeControlGroup from 'components/FeeControlGroup'
import Modal from 'components/Modal'
import { NetworkSelector } from 'components/NetworkSelector'
import SlippageWarningNote from 'components/SlippageWarningNote'
import InputCurrencyPanel from 'components/SwapForm/InputCurrencyPanel'
Expand All @@ -18,20 +23,33 @@ import useCheckStablePairSwap from 'components/SwapForm/hooks/useCheckStablePair
import useGetInputError from 'components/SwapForm/hooks/useGetInputError'
import useGetRoute from 'components/SwapForm/hooks/useGetRoute'
import useParsedAmount from 'components/SwapForm/hooks/useParsedAmount'
import TradeRouting from 'components/TradeRouting'
import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
import { Wrapper } from 'components/swapv2/styleds'
import { useActiveWeb3React } from 'hooks'
import { useAllTokens } from 'hooks/Tokens'
import useTheme from 'hooks/useTheme'
import useWrapCallback, { WrapType } from 'hooks/useWrapCallback'
import useUpdateSlippageInStableCoinSwap from 'pages/SwapV3/useUpdateSlippageInStableCoinSwap'
import { Field } from 'state/swap/actions'
import { useSwapActionHandlers, useSwapState } from 'state/swap/hooks'
import { DetailedRouteSummary } from 'types/route'
import { getTradeComposition } from 'utils/aggregationRouting'

import MultichainKNCNote from './MultichainKNCNote'
import ReverseTokenSelectionButton from './ReverseTokenSelectionButton'
import SwapActionButton from './SwapActionButton'
import TradeSummary from './TradeSummary'

export const RoutingIconWrapper = styled(RoutingIcon)`
height: 20px;
width: 20px;
margin-right: 10px;
path {
fill: ${({ theme }) => theme.text} !important;
}
`

export type SwapFormProps = {
hidden: boolean

Expand Down Expand Up @@ -142,6 +160,16 @@ const SwapForm: React.FC<SwapFormProps> = props => {
setRouteSummary(routeSummary)
}, [routeSummary, setRouteSummary])

const theme = useTheme()
const [showRoute, setShowRoute] = useState(false)
const toggleRoute = useCallback(() => setShowRoute(prev => !prev), [])

const defaultTokens = useAllTokens()

const tradeRouteComposition = useMemo(() => {
return getTradeComposition(chainId, routeSummary?.parsedAmountIn, undefined, routeSummary?.route, defaultTokens)
}, [chainId, defaultTokens, routeSummary])

return (
<SwapFormContextProvider
slippage={slippage}
Expand Down Expand Up @@ -210,6 +238,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
slippage={slippage}
disableRefresh={!parsedAmount || parsedAmount.equalTo(0) || isProcessingSwap}
refreshCallback={getRoute}
toggleRoute={toggleRoute}
/>
)}

Expand All @@ -234,6 +263,26 @@ const SwapForm: React.FC<SwapFormProps> = props => {
/>
</Flex>
</Box>
<Modal isOpen={showRoute} onDismiss={() => setShowRoute(false)} width="100%" maxWidth="1000px">
<Flex width="100%" flexDirection="column" padding="1rem">
<Flex justifyContent="space-between">
<Flex alignItems={'center'}>
<RoutingIconWrapper />
<Text fontSize={16} fontWeight={500} color={theme.text}>
<Trans>Your trade route</Trans>
</Text>
</Flex>
<X role="button" onClick={toggleRoute} />
</Flex>
<TradeRouting
tradeComposition={tradeRouteComposition}
currencyIn={currencyIn}
currencyOut={currencyOut}
inputAmount={routeSummary?.parsedAmountIn}
outputAmount={routeSummary?.parsedAmountOut}
/>
</Flex>
</Modal>
</SwapFormContextProvider>
)
}
Expand Down
83 changes: 1 addition & 82 deletions src/components/swapv2/SwapSettingsPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,13 @@ import { Trans, t } from '@lingui/macro'
import { rgba } from 'polished'
import React, { RefObject, useRef, useState } from 'react'
import { ChevronLeft } from 'react-feather'
import { Box, Flex, Text } from 'rebass'
import { Box, Flex } from 'rebass'
import styled from 'styled-components'

import { AutoColumn } from 'components/Column'
import { RowBetween, RowFixed } from 'components/Row'
import Toggle from 'components/Toggle'
import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
import { APP_PATHS } from 'constants/index'
import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
import { useOnClickOutside } from 'hooks/useOnClickOutside'
import useTheme from 'hooks/useTheme'
import { useShowLiveChart, useShowTradeRoutes, useToggleLiveChart, useToggleTradeRoutes } from 'state/user/hooks'

import DegenModeSetting from './DegenModeSetting'
import GasPriceTrackerSetting from './GasPriceTrackerSetting'
Expand All @@ -27,7 +21,6 @@ type Props = {
onBack: () => void
onClickGasPriceTracker: () => void
onClickLiquiditySources: () => void
isLimitOrder?: boolean
isSwapPage?: boolean
isCrossChainPage?: boolean
swapActionsRef: RefObject<HTMLDivElement>
Expand All @@ -40,7 +33,6 @@ const BackText = styled.span`
`

const SettingsPanel: React.FC<Props> = ({
isLimitOrder,
isSwapPage,
isCrossChainPage,
className,
Expand All @@ -51,38 +43,11 @@ const SettingsPanel: React.FC<Props> = ({
}) => {
const theme = useTheme()

const { mixpanelHandler } = useMixpanel()
const isShowTradeRoutes = useShowTradeRoutes()
const isShowLiveChart = useShowLiveChart()
const toggleLiveChart = useToggleLiveChart()
const toggleTradeRoutes = useToggleTradeRoutes()

const handleToggleLiveChart = () => {
mixpanelHandler(MIXPANEL_TYPE.LIVE_CHART_ON_OFF, { live_chart_on_or_off: !isShowLiveChart })
mixpanelHandler(isLimitOrder ? MIXPANEL_TYPE.LO_DISPLAY_SETTING_CLICK : MIXPANEL_TYPE.SWAP_DISPLAY_SETTING_CLICK, {
display_setting: isShowLiveChart ? 'Live Chart Off' : 'Live Chart On',
})
toggleLiveChart()
}
const handleToggleTradeRoute = () => {
mixpanelHandler(MIXPANEL_TYPE.TRADING_ROUTE_ON_OFF, {
trading_route_on_or_off: !isShowTradeRoutes,
})
mixpanelHandler(MIXPANEL_TYPE.SWAP_DISPLAY_SETTING_CLICK, {
display_setting: isShowTradeRoutes ? 'Trade Route Off' : 'Trade Route On',
})
toggleTradeRoutes()
}

const [showConfirmation, setShowConfirmation] = useState(false)

const containerRef = useRef<HTMLDivElement>(null)
useOnClickOutside([containerRef, swapActionsRef], () => !showConfirmation && onBack())

const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP)
// TODO: Hardcode to hide live chart
const showLiveChartSetting = !isPartnerSwap && 1 + 1 > 2

return (
<Box width="100%" className={className} id={TutorialIds.TRADING_SETTING_CONTENT} ref={containerRef}>
<Flex width={'100%'} flexDirection={'column'} marginBottom="4px">
Expand Down Expand Up @@ -116,52 +81,6 @@ const SettingsPanel: React.FC<Props> = ({
)}
</>
)}
<Flex
sx={{
flexDirection: 'column',
rowGap: '12px',
paddingTop: '16px',
borderTop: `1px solid ${theme.border}`,
}}
>
<Text
as="span"
sx={{
fontSize: '16px',
fontWeight: 500,
}}
>
<Trans>Display Settings</Trans>
</Text>
<AutoColumn gap="md">
{showLiveChartSetting && (
<RowBetween>
<RowFixed>
<TextDashed fontSize={12} fontWeight={400} color={theme.subText} underlineColor={theme.border}>
<MouseoverTooltip text={<Trans>Turn on to display live chart.</Trans>} placement="right">
<Trans>Live Chart</Trans>
</MouseoverTooltip>
</TextDashed>
</RowFixed>
<Toggle isActive={isShowLiveChart} toggle={handleToggleLiveChart} />
</RowBetween>
)}
{(isSwapPage || isCrossChainPage) && (
<>
<RowBetween>
<RowFixed>
<TextDashed fontSize={12} fontWeight={400} color={theme.subText} underlineColor={theme.border}>
<MouseoverTooltip text={<Trans>Turn on to display trade route.</Trans>} placement="right">
<Trans>Trade Route</Trans>
</MouseoverTooltip>
</TextDashed>
</RowFixed>
<Toggle isActive={isShowTradeRoutes} toggle={handleToggleTradeRoute} />
</RowBetween>
</>
)}
</AutoColumn>
</Flex>
</Flex>
</Flex>
</Box>
Expand Down
18 changes: 4 additions & 14 deletions src/pages/CrossChain/TransfersHistory/TabSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,12 @@ export enum CrossChainTab {
HISTORY = 'history',
}

const TabSelector = ({
activeTab,
setTab,
isShowTradeRoutes,
}: {
activeTab: CrossChainTab
setTab: (v: CrossChainTab) => void
isShowTradeRoutes: boolean
}) => {
const TabSelector = ({ activeTab, setTab }: { activeTab: CrossChainTab; setTab: (v: CrossChainTab) => void }) => {
return (
<Row gap="4px">
{isShowTradeRoutes && (
<TabItem isActive={activeTab === CrossChainTab.ROUTE} onClick={() => setTab(CrossChainTab.ROUTE)}>
<Trans>Trade Route</Trans>
</TabItem>
)}
<TabItem isActive={activeTab === CrossChainTab.ROUTE} onClick={() => setTab(CrossChainTab.ROUTE)}>
<Trans>Trade Route</Trans>
</TabItem>
<TabItem isActive={activeTab === CrossChainTab.HISTORY} onClick={() => setTab(CrossChainTab.HISTORY)}>
<Trans>Transaction History</Trans>
</TabItem>
Expand Down
6 changes: 2 additions & 4 deletions src/pages/CrossChain/TransfersHistory/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { APP_PATHS } from 'constants/index'
import { MIXPANEL_TYPE } from 'hooks/useMixpanel'
import useParsedQueryString from 'hooks/useParsedQueryString'
import useTheme from 'hooks/useTheme'
import { useShowTradeRoutes } from 'state/user/hooks'

import HistoryCrossChain from './History'
import TabSelector, { CrossChainTab } from './TabSelector'
Expand All @@ -25,7 +24,6 @@ const BridgeHistory: React.FC<Props> = ({ className }) => {
const navigate = useNavigate()
const theme = useTheme()
const qs = useParsedQueryString<{ tab: CrossChainTab }>()
const isShowTradeRoutes = useShowTradeRoutes()
const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP)

const [activeTab, setTab] = useState<CrossChainTab>(
Expand All @@ -42,15 +40,15 @@ const BridgeHistory: React.FC<Props> = ({ className }) => {
return (
<div className={className}>
<RowBetween>
<TabSelector activeTab={activeTab} setTab={onClickTab} isShowTradeRoutes={isShowTradeRoutes} />
<TabSelector activeTab={activeTab} setTab={onClickTab} />
{!isPartnerSwap && (
<SubscribeNotificationButton
subscribeTooltip={t`Subscribe to receive notifications on your cross-chain transaction.`}
trackingEvent={MIXPANEL_TYPE.CROSS_CHAIN_CLICK_SUBSCRIBE}
/>
)}
</RowBetween>
{activeTab === CrossChainTab.HISTORY || !isShowTradeRoutes ? (
{activeTab === CrossChainTab.HISTORY ? (
<HistoryCrossChain />
) : (
<Suspense
Expand Down
Loading

0 comments on commit 6d3d195

Please sign in to comment.