From f09ded1a3f4798d62f6801311c98885bed705cf3 Mon Sep 17 00:00:00 2001 From: eddie <66155195+just-toby@users.noreply.github.com> Date: Tue, 10 Oct 2023 15:51:26 -0700 Subject: [PATCH 1/5] fix: user prop updater staging (#7443) fix: move user prop updater into statsigProvider --- src/pages/App.tsx | 110 +++++++++++++++++++++++++--------------------- 1 file changed, 59 insertions(+), 51 deletions(-) diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 89648990c7d..3f15ce0356a 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -97,12 +97,10 @@ export default function App() { const location = useLocation() const { pathname } = location const currentPage = getCurrentPageFromLocation(pathname) - const isDarkMode = useIsDarkMode() - const [routerPreference] = useRouterPreference() + const [scrollY, setScrollY] = useState(0) const scrolledState = scrollY > 0 - const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled() - const userOptedOutOfUniswapX = useUserOptedOutOfUniswapX() + const routerConfig = useRouterConfig() const originCountry = useAppSelector((state: AppState) => state.user.originCountry) @@ -122,53 +120,6 @@ export default function App() { } }, [searchParams, setShouldDisableNFTRoutes]) - useEffect(() => { - // User properties *must* be set before sending corresponding event properties, - // so that the event contains the correct and up-to-date user properties. - user.set(CustomUserProperties.USER_AGENT, navigator.userAgent) - user.set(CustomUserProperties.BROWSER, getBrowser()) - user.set(CustomUserProperties.SCREEN_RESOLUTION_HEIGHT, window.screen.height) - user.set(CustomUserProperties.SCREEN_RESOLUTION_WIDTH, window.screen.width) - user.set(CustomUserProperties.GIT_COMMIT_HASH, process.env.REACT_APP_GIT_COMMIT_HASH ?? 'unknown') - - // Service Worker analytics - const isServiceWorkerInstalled = Boolean(window.navigator.serviceWorker?.controller) - const isServiceWorkerHit = Boolean((window as any).__isDocumentCached) - const serviceWorkerProperty = isServiceWorkerInstalled ? (isServiceWorkerHit ? 'hit' : 'miss') : 'uninstalled' - - const pageLoadProperties = { service_worker: serviceWorkerProperty } - sendInitializationEvent(SharedEventName.APP_LOADED, pageLoadProperties) - const sendWebVital = - (metric: string) => - ({ delta }: Metric) => - sendAnalyticsEvent(SharedEventName.WEB_VITALS, { ...pageLoadProperties, [metric]: delta }) - getCLS(sendWebVital('cumulative_layout_shift')) - getFCP(sendWebVital('first_contentful_paint_ms')) - getFID(sendWebVital('first_input_delay_ms')) - getLCP(sendWebVital('largest_contentful_paint_ms')) - }, []) - - useEffect(() => { - user.set(CustomUserProperties.DARK_MODE, isDarkMode) - }, [isDarkMode]) - - useEffect(() => { - // If we're not in the transition period to UniswapX opt-out, set the router preference to whatever is specified. - if (!isUniswapXDefaultEnabled) { - user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) - return - } - - // In the transition period, override the stored API preference to UniswapX if the user hasn't opted out. - if (routerPreference === RouterPreference.API && !userOptedOutOfUniswapX) { - user.set(CustomUserProperties.ROUTER_PREFERENCE, RouterPreference.X) - return - } - - // Otherwise, the user has opted out or their preference is UniswapX/client, so set the preference to whatever is specified. - user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) - }, [routerPreference, isUniswapXDefaultEnabled, userOptedOutOfUniswapX]) - useEffect(() => { const scrollListener = () => { setScrollY(window.scrollY) @@ -221,6 +172,7 @@ export default function App() { api: process.env.REACT_APP_STATSIG_PROXY_URL, }} > + {renderUkBannner && } @@ -255,3 +207,59 @@ export default function App() { ) } + +function UserPropertyUpdater() { + const isDarkMode = useIsDarkMode() + + const [routerPreference] = useRouterPreference() + const userOptedOutOfUniswapX = useUserOptedOutOfUniswapX() + const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled() + + useEffect(() => { + // User properties *must* be set before sending corresponding event properties, + // so that the event contains the correct and up-to-date user properties. + user.set(CustomUserProperties.USER_AGENT, navigator.userAgent) + user.set(CustomUserProperties.BROWSER, getBrowser()) + user.set(CustomUserProperties.SCREEN_RESOLUTION_HEIGHT, window.screen.height) + user.set(CustomUserProperties.SCREEN_RESOLUTION_WIDTH, window.screen.width) + user.set(CustomUserProperties.GIT_COMMIT_HASH, process.env.REACT_APP_GIT_COMMIT_HASH ?? 'unknown') + + // Service Worker analytics + const isServiceWorkerInstalled = Boolean(window.navigator.serviceWorker?.controller) + const isServiceWorkerHit = Boolean((window as any).__isDocumentCached) + const serviceWorkerProperty = isServiceWorkerInstalled ? (isServiceWorkerHit ? 'hit' : 'miss') : 'uninstalled' + + const pageLoadProperties = { service_worker: serviceWorkerProperty } + sendInitializationEvent(SharedEventName.APP_LOADED, pageLoadProperties) + const sendWebVital = + (metric: string) => + ({ delta }: Metric) => + sendAnalyticsEvent(SharedEventName.WEB_VITALS, { ...pageLoadProperties, [metric]: delta }) + getCLS(sendWebVital('cumulative_layout_shift')) + getFCP(sendWebVital('first_contentful_paint_ms')) + getFID(sendWebVital('first_input_delay_ms')) + getLCP(sendWebVital('largest_contentful_paint_ms')) + }, []) + + useEffect(() => { + user.set(CustomUserProperties.DARK_MODE, isDarkMode) + }, [isDarkMode]) + + useEffect(() => { + // If we're not in the transition period to UniswapX opt-out, set the router preference to whatever is specified. + if (!isUniswapXDefaultEnabled) { + user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) + return + } + + // In the transition period, override the stored API preference to UniswapX if the user hasn't opted out. + if (routerPreference === RouterPreference.API && !userOptedOutOfUniswapX) { + user.set(CustomUserProperties.ROUTER_PREFERENCE, RouterPreference.X) + return + } + + // Otherwise, the user has opted out or their preference is UniswapX/client, so set the preference to whatever is specified. + user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) + }, [routerPreference, isUniswapXDefaultEnabled, userOptedOutOfUniswapX]) + return null +} From 48855f487f3e504a06b20b773ddacf455ba43f75 Mon Sep 17 00:00:00 2001 From: cartcrom <39385577+cartcrom@users.noreply.github.com> Date: Wed, 11 Oct 2023 09:23:28 -0400 Subject: [PATCH 2/5] feat: animated review expando (#7440) * feat: animated review expando * test: update snapshots * fix: pr comments + spacing --- src/assets/svg/expando-icon-closed.svg | 3 + src/assets/svg/expando-icon-opened.svg | 3 + src/components/AnimatedDropdown/index.tsx | 7 +- .../TransactionConfirmationModal/index.tsx | 2 +- src/components/swap/SwapLineItem.tsx | 22 +- src/components/swap/SwapModalFooter.tsx | 98 +- src/components/swap/SwapModalHeader.tsx | 15 +- src/components/swap/SwapModalHeaderAmount.tsx | 2 +- .../SwapDetailsDropdown.test.tsx.snap | 190 +- .../__snapshots__/SwapLineItem.test.tsx.snap | 4002 +++++++++-------- .../SwapModalFooter.test.tsx.snap | 636 ++- .../SwapModalHeader.test.tsx.snap | 84 +- 12 files changed, 2694 insertions(+), 2370 deletions(-) create mode 100644 src/assets/svg/expando-icon-closed.svg create mode 100644 src/assets/svg/expando-icon-opened.svg diff --git a/src/assets/svg/expando-icon-closed.svg b/src/assets/svg/expando-icon-closed.svg new file mode 100644 index 00000000000..63311a80e3e --- /dev/null +++ b/src/assets/svg/expando-icon-closed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/expando-icon-opened.svg b/src/assets/svg/expando-icon-opened.svg new file mode 100644 index 00000000000..4ea0cc9be84 --- /dev/null +++ b/src/assets/svg/expando-icon-opened.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/AnimatedDropdown/index.tsx b/src/components/AnimatedDropdown/index.tsx index a2492556030..02bc23b8bd8 100644 --- a/src/components/AnimatedDropdown/index.tsx +++ b/src/components/AnimatedDropdown/index.tsx @@ -1,11 +1,13 @@ -import { animated, useSpring } from 'react-spring' +import { animated, useSpring, UseSpringProps } from 'react-spring' import useResizeObserver from 'use-resize-observer' +type AnimatedDropdownProps = React.PropsWithChildren<{ open: boolean; springProps?: UseSpringProps }> /** * @param open conditional to show content or hide + * @param springProps additional props to include in spring animation * @returns Wrapper to smoothly hide and expand content */ -export default function AnimatedDropdown({ open, children }: React.PropsWithChildren<{ open: boolean }>) { +export default function AnimatedDropdown({ open, springProps, children }: AnimatedDropdownProps) { const { ref, height } = useResizeObserver() const props = useSpring({ @@ -20,6 +22,7 @@ export default function AnimatedDropdown({ open, children }: React.PropsWithChil clamp: true, velocity: 0.01, }, + ...springProps, }) return ( {topContent()} - {bottomContent && {bottomContent()}} + {bottomContent && {bottomContent()}} ) } diff --git a/src/components/swap/SwapLineItem.tsx b/src/components/swap/SwapLineItem.tsx index a4ad6400a5d..a1a6637e632 100644 --- a/src/components/swap/SwapLineItem.tsx +++ b/src/components/swap/SwapLineItem.tsx @@ -9,6 +9,7 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains' import useHoverProps from 'hooks/useHoverProps' import { useIsMobile } from 'nft/hooks' import React, { PropsWithChildren, useEffect, useState } from 'react' +import { animated, SpringValue } from 'react-spring' import { InterfaceTrade, TradeFillType } from 'state/routing/types' import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils' import { useUserSlippageTolerance } from 'state/user/hooks' @@ -238,11 +239,12 @@ function ValueWrapper({ children, lineItem, labelHovered, syncing }: ValueWrappe ) } -interface SwapLineItemProps { +export interface SwapLineItemProps { trade: InterfaceTrade syncing: boolean allowedSlippage: Percent type: SwapLineItemType + animatedOpacity?: SpringValue } function SwapLineItem(props: SwapLineItemProps) { @@ -252,14 +254,16 @@ function SwapLineItem(props: SwapLineItemProps) { if (!LineItem) return null return ( - - - - - - - - + + + + + + + + + + ) } diff --git a/src/components/swap/SwapModalFooter.tsx b/src/components/swap/SwapModalFooter.tsx index 86f5155c9df..e323e0d961f 100644 --- a/src/components/swap/SwapModalFooter.tsx +++ b/src/components/swap/SwapModalFooter.tsx @@ -2,28 +2,33 @@ import { Trans } from '@lingui/macro' import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events' import { Percent } from '@uniswap/sdk-core' import { TraceEvent } from 'analytics' +import AnimatedDropdown from 'components/AnimatedDropdown' import Column from 'components/Column' import SpinningLoader from 'components/Loader/SpinningLoader' import { SwapResult } from 'hooks/useSwapCallback' import useTransactionDeadline from 'hooks/useTransactionDeadline' -import { ReactNode } from 'react' +import ms from 'ms' +import { ReactNode, useState } from 'react' import { AlertTriangle } from 'react-feather' +import { easings, useSpring } from 'react-spring' import { InterfaceTrade, RouterPreference } from 'state/routing/types' import { isClassicTrade } from 'state/routing/utils' import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks' import styled, { useTheme } from 'styled-components' -import { ThemedText } from 'theme/components' +import { Separator, ThemedText } from 'theme/components' import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries' import { formatSwapButtonClickEventProperties } from 'utils/loggingFormatters' +import { ReactComponent as ExpandoIconClosed } from '../../assets/svg/expando-icon-closed.svg' +import { ReactComponent as ExpandoIconOpened } from '../../assets/svg/expando-icon-opened.svg' import { ButtonError, SmallButtonPrimary } from '../Button' import Row, { AutoRow, RowBetween, RowFixed } from '../Row' import { SwapCallbackError, SwapShowAcceptChanges } from './styled' -import { SwapLineItemType } from './SwapLineItem' +import { SwapLineItemProps, SwapLineItemType } from './SwapLineItem' import SwapLineItem from './SwapLineItem' const DetailsContainer = styled(Column)` - padding: 0 8px; + padding-bottom: 8px; ` const StyledAlertTriangle = styled(AlertTriangle)` @@ -33,9 +38,45 @@ const StyledAlertTriangle = styled(AlertTriangle)` const ConfirmButton = styled(ButtonError)` height: 56px; - margin-top: 10px; ` +const DropdownControllerWrapper = styled.div` + display: flex; + align-items: center; + margin-right: -6px; + + padding: 0 16px; + min-width: fit-content; + white-space: nowrap; +` + +const DropdownButton = styled.button` + padding: 0; + margin-top: 16px; + height: 28px; + text-decoration: none; + display: flex; + background: none; + border: none; + align-items: center; + cursor: pointer; +` + +function DropdownController({ open, onClick }: { open: boolean; onClick: () => void }) { + return ( + + + + + {open ? Show less : Show more} + + {open ? : } + + + + ) +} + export default function SwapModalFooter({ trade, allowedSlippage, @@ -66,17 +107,16 @@ export default function SwapModalFooter({ const [routerPreference] = useRouterPreference() const routes = isClassicTrade(trade) ? getRoutingDiagramEntries(trade) : undefined const theme = useTheme() + const [showMore, setShowMore] = useState(false) const lineItemProps = { trade, allowedSlippage, syncing: false } return ( <> + setShowMore(!showMore)} /> - - - - + @@ -141,3 +181,43 @@ export default function SwapModalFooter({ ) } + +function AnimatedLineItem(props: SwapLineItemProps & { open: boolean; delay: number }) { + const { open, delay } = props + + const animatedProps = useSpring({ + animatedOpacity: open ? 1 : 0, + config: { duration: ms('300ms'), easing: easings.easeOutSine }, + delay, + }) + + return +} + +function ExpandableLineItems(props: { trade: InterfaceTrade; allowedSlippage: Percent; open: boolean }) { + const { open, trade, allowedSlippage } = props + + if (!trade) return null + + const lineItemProps = { trade, allowedSlippage, syncing: false, open } + + return ( + + + + + + + + + ) +} diff --git a/src/components/swap/SwapModalHeader.tsx b/src/components/swap/SwapModalHeader.tsx index 2bd7c8e351a..084fedfa999 100644 --- a/src/components/swap/SwapModalHeader.tsx +++ b/src/components/swap/SwapModalHeader.tsx @@ -6,14 +6,10 @@ import { InterfaceTrade } from 'state/routing/types' import { isPreviewTrade } from 'state/routing/utils' import { Field } from 'state/swap/actions' import styled from 'styled-components' -import { Divider, ThemedText } from 'theme/components' +import { ThemedText } from 'theme/components' import { SwapModalHeaderAmount } from './SwapModalHeaderAmount' -const Rule = styled(Divider)` - margin: 16px 2px 24px 2px; -` - const HeaderContainer = styled(AutoColumn)` margin-top: 16px; ` @@ -50,7 +46,7 @@ export default function SwapModalHeader({ isLoading={isPreviewTrade(trade) && trade.tradeType === TradeType.EXACT_INPUT} tooltipText={ trade.tradeType === TradeType.EXACT_INPUT ? ( - + Output is estimated. You will receive at least{' '} @@ -58,9 +54,9 @@ export default function SwapModalHeader({ {' '} or the transaction will revert. - + ) : ( - + Input is estimated. You will sell at most{' '} @@ -68,12 +64,11 @@ export default function SwapModalHeader({ {' '} or the transaction will revert. - + ) } /> - ) } diff --git a/src/components/swap/SwapModalHeaderAmount.tsx b/src/components/swap/SwapModalHeaderAmount.tsx index 7c57c857b42..33513fb1858 100644 --- a/src/components/swap/SwapModalHeaderAmount.tsx +++ b/src/components/swap/SwapModalHeaderAmount.tsx @@ -61,7 +61,7 @@ export function SwapModalHeaderAmount({ - + diff --git a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap index c838b3cdeed..7422fdaeca8 100644 --- a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap @@ -327,108 +327,114 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
-
-
- Price impact -
+
-
-
- + Price impact +
+
+
+
- -105566.373% - + + -105566.373% + +
-
-
- Max. slippage -
+
-
-
+
+ Max. slippage +
+
+
- 2% + class="c2 c21" + > +
+ 2% +
-
-
- Network cost -
+
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - $1.00 + $1.00 +
@@ -437,26 +443,28 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
-
-
- Order routing -
+
-
-
+
+ Order routing +
+
+
- Uniswap Client +
+ Uniswap Client +
diff --git a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap index c1f7d1105b8..8c4cb6343ec 100644 --- a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap @@ -179,88 +179,90 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` } -
+
- Network cost -
-
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - $0.00 + $0.00 +
-
-
- The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. - - Learn more - + The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
-
.c0 { @@ -473,81 +475,83 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` } -
-
- Max. slippage -
+
-
-
+
+ Max. slippage +
+
+
- 2% + class="c0 c7" + > +
+ 2% +
-
-
- Receive at least +
+ Receive at least +
+
+ 0.0000000000000009 DEF +
- 0.0000000000000009 DEF + class="c13" + /> +
+ If the price moves so that you will receive less than 0.0000000000000009 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. + + Learn more +
-
-
- If the price moves so that you will receive less than 0.0000000000000009 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. - - Learn more - -
+
-
.c0 { @@ -690,43 +694,45 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` } -
-
- Receive at least -
+
-
-
- 0.0000000000000009 DEF +
+ Receive at least +
+
+
+
+ 0.0000000000000009 DEF +
-
-
- The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
-
.c0 { @@ -925,104 +931,106 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` } } -
+
- Order routing -
-
-
-
+
+ Order routing +
+
+
- - - - - - - - -
+ + + + + + + + +
- Uniswap X +
+ Uniswap X +
-
-
- UniswapX +
+ UniswapX +
+ aggregates liquidity sources for better prices and gas free swaps. + + Learn more +
- aggregates liquidity sources for better prices and gas free swaps. - - Learn more -
+
-
@@ -1203,88 +1211,90 @@ exports[`SwapLineItem.tsx exact input 1`] = ` color: #7D7D7D; } -
+
- Network cost -
-
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - $1.00 + $1.00 +
-
-
- The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. - - Learn more - + The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
-
.c0 { @@ -1423,47 +1433,49 @@ exports[`SwapLineItem.tsx exact input 1`] = ` color: #7D7D7D; } -
-
- Price impact -
+
-
-
- + Price impact +
+
+
+
- -105566.373% - + + -105566.373% + +
-
-
- The impact your trade has on the market price of this pool. +
+ The impact your trade has on the market price of this pool. +
+
-
.c0 { @@ -1672,81 +1684,83 @@ exports[`SwapLineItem.tsx exact input 1`] = ` content: 'Auto'; } -
+
- Max. slippage -
-
-
-
+
+ Max. slippage +
+
+
- 2% + class="c0 c7" + > +
+ 2% +
-
-
- Receive at least +
+ Receive at least +
+
+ 0.00000000000000098 DEF +
- 0.00000000000000098 DEF + class="c13" + /> +
+ If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. + + Learn more +
-
-
- If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. - - Learn more - -
+
-
.c0 { @@ -1885,43 +1899,45 @@ exports[`SwapLineItem.tsx exact input 1`] = ` color: #7D7D7D; } -
+
- Receive at least -
-
-
-
- 0.00000000000000098 DEF +
+ Receive at least +
+
+
+
+ 0.00000000000000098 DEF +
-
-
- The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
-
.c0 { @@ -2280,202 +2296,204 @@ exports[`SwapLineItem.tsx exact input 1`] = ` color: #7D7D7D; } -
-
- Order routing -
+
-
-
+
+ Order routing +
+
+
- Uniswap Client +
+ Uniswap Client +
-
-
-
- ABC logo -
-
-
- - dot_line.svg - + ABC logo +
-
- V3 -
+ dot_line.svg +
- 100% +
+
+ V3 +
+
+
+ 100% +
-
-
-
-
+
+
- DEF logo +
+ DEF logo +
-
-
- ABC logo +
+ ABC logo +
-
-
- 1% +
+ 1% +
-
-
- ABC/DEF 1% pool +
+ ABC/DEF 1% pool +
+
-
-
-
- DEF logo +
+ DEF logo +
-
-
- Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
-
@@ -2656,88 +2674,90 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` color: #7D7D7D; } -
-
- Network cost -
+
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - $1.00 + $1.00 +
-
-
- The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. - - Learn more - + The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
-
.c0 { @@ -2876,47 +2896,49 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` color: #7D7D7D; } -
+
- Price impact -
-
-
-
- + Price impact +
+
+
+
- -105566.373% - + + -105566.373% + +
-
-
- The impact your trade has on the market price of this pool. +
+ The impact your trade has on the market price of this pool. +
+
-
.c0 { @@ -3125,81 +3147,83 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` content: 'Auto'; } -
-
- Max. slippage -
+
-
-
+
+ Max. slippage +
+
+
- 2% + class="c0 c7" + > +
+ 2% +
-
-
- Receive at least +
+ Receive at least +
+
+ 0.00000000000000098 DEF +
- 0.00000000000000098 DEF + class="c13" + /> +
+ If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. + + Learn more +
-
-
- If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. - - Learn more - -
+
-
.c0 { @@ -3338,43 +3362,45 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` color: #7D7D7D; } -
-
- Receive at least -
+
-
-
- 0.00000000000000098 DEF +
+ Receive at least +
+
+
+
+ 0.00000000000000098 DEF +
-
-
- The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
-
.c0 { @@ -3733,202 +3759,204 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` color: #7D7D7D; } -
-
- Order routing -
+
-
-
+
+ Order routing +
+
+
- Uniswap API +
+ Uniswap API +
-
-
-
- ABC logo -
-
-
- - dot_line.svg - + ABC logo +
-
- V3 -
+ dot_line.svg +
- 100% -
-
-
-
-
+
+ V3 +
+
+
+ 100% +
+
+
+
+
- DEF logo +
+ DEF logo +
-
-
- ABC logo +
+ ABC logo +
-
-
- 1% +
+ 1% +
-
-
- ABC/DEF 1% pool +
+ ABC/DEF 1% pool +
+
-
-
-
- DEF logo +
+ DEF logo +
-
-
- Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
-
@@ -4109,88 +4137,90 @@ exports[`SwapLineItem.tsx exact output 1`] = ` color: #7D7D7D; } -
+
- Network cost -
-
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - - + - +
-
-
- The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. - - Learn more - + The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
-
.c0 { @@ -4329,47 +4359,49 @@ exports[`SwapLineItem.tsx exact output 1`] = ` color: #7D7D7D; } -
-
- Price impact -
+
-
-
- + Price impact +
+
+
+
- -105566.373% - + + -105566.373% + +
-
-
- The impact your trade has on the market price of this pool. +
+ The impact your trade has on the market price of this pool. +
+
-
.c0 { @@ -4578,81 +4610,83 @@ exports[`SwapLineItem.tsx exact output 1`] = ` content: 'Auto'; } -
+
- Max. slippage -
-
-
-
+
+ Max. slippage +
+
+
- 2% + class="c0 c7" + > +
+ 2% +
-
-
- Pay at most +
+ Pay at most +
+
+ 0.00000000000000102 ABC +
- 0.00000000000000102 ABC + class="c13" + /> +
+ If the price moves so that you will pay more than 0.00000000000000102 ABC, your transaction will be reverted. This is the maximum amount you are guaranteed to pay. + + Learn more +
-
-
- If the price moves so that you will pay more than 0.00000000000000102 ABC, your transaction will be reverted. This is the maximum amount you are guaranteed to pay. - - Learn more - -
+
-
.c0 { @@ -4791,43 +4825,45 @@ exports[`SwapLineItem.tsx exact output 1`] = ` color: #7D7D7D; } -
+
- Pay at most -
-
-
-
- 0.00000000000000102 ABC +
+ Pay at most +
+
+
+
+ 0.00000000000000102 ABC +
-
-
- The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert. +
+ The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert. +
+
-
.c0 { @@ -5186,202 +5222,204 @@ exports[`SwapLineItem.tsx exact output 1`] = ` color: #7D7D7D; } -
-
- Order routing -
+
-
-
+
+ Order routing +
+
+
- Uniswap Client +
+ Uniswap Client +
-
-
-
- ABC logo -
-
-
- - dot_line.svg - + ABC logo +
-
- V3 -
+ dot_line.svg +
- 100% +
+
+ V3 +
+
+
+ 100% +
-
-
-
-
+
+
- GHI logo +
+ GHI logo +
-
-
- ABC logo +
+ ABC logo +
-
-
- 0.3% +
+ 0.3% +
-
-
- ABC/GHI 0.3% pool +
+ ABC/GHI 0.3% pool +
+
-
-
-
- GHI logo +
+ GHI logo +
-
-
- This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+ This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
-
@@ -5562,88 +5600,90 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` color: #7D7D7D; } -
-
- Network cost -
+
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - $1.00 + $1.00 +
-
-
- The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. - - Learn more - + The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
-
.c0 { @@ -5801,55 +5841,57 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` color: #7D7D7D; } -
+
- DEF fee -
-
-
-
- + DEF fee +
+
+
+
- 3% - + + 3% + +
-
-
- Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. - - Learn more - + Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. + + Learn more + +
+
-
.c0 { @@ -5988,47 +6030,49 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` color: #7D7D7D; } -
+
- Price impact -
-
-
-
- + Price impact +
+
+
+
- -105566.373% - + + -105566.373% + +
-
-
- The impact your trade has on the market price of this pool. +
+ The impact your trade has on the market price of this pool. +
+
-
.c0 { @@ -6237,81 +6281,83 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` content: 'Auto'; } -
-
- Max. slippage -
+
-
-
+
+ Max. slippage +
+
+
- 2% + class="c0 c7" + > +
+ 2% +
-
-
- Receive at least +
+ Receive at least +
+
+ 0.000000000000000952 DEF +
- 0.000000000000000952 DEF + class="c13" + /> +
+ If the price moves so that you will receive less than 0.000000000000000952 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. + + Learn more +
-
-
- If the price moves so that you will receive less than 0.000000000000000952 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. - - Learn more - -
+
-
.c0 { @@ -6450,43 +6496,45 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` color: #7D7D7D; } -
-
- Receive at least -
+
-
-
- 0.000000000000000952 DEF +
+ Receive at least +
+
+
+
+ 0.000000000000000952 DEF +
-
-
- The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
-
.c0 { @@ -6845,202 +6893,204 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` color: #7D7D7D; } -
-
- Order routing -
+
-
-
+
+ Order routing +
+
+
- Uniswap API +
+ Uniswap API +
-
-
-
- ABC logo -
-
-
- - dot_line.svg - + ABC logo +
-
- V3 -
+ dot_line.svg +
- 100% +
+
+ V3 +
+
+
+ 100% +
-
-
-
-
+
+
- DEF logo +
+ DEF logo +
-
-
- ABC logo +
+ ABC logo +
-
-
- 1% +
+ 1% +
-
-
- ABC/DEF 1% pool +
+ ABC/DEF 1% pool +
+
-
-
-
- DEF logo +
+ DEF logo +
-
-
- Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
-
@@ -7221,88 +7271,90 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` color: #7D7D7D; } -
-
- Network cost -
+
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - $1.00 + $1.00 +
-
-
- The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. - - Learn more - + The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
-
.c0 { @@ -7460,55 +7512,57 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` color: #7D7D7D; } -
-
- ABC fee -
+
-
-
- + ABC fee +
+
+
+
- 3% - + + 3% + +
-
-
- Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. - - Learn more - + Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. + + Learn more + +
+
-
.c0 { @@ -7647,47 +7701,49 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` color: #7D7D7D; } -
-
- Price impact -
+
-
-
- + Price impact +
+
+
+
- -105566.373% - + + -105566.373% + +
-
-
- The impact your trade has on the market price of this pool. +
+ The impact your trade has on the market price of this pool. +
+
-
.c0 { @@ -7896,81 +7952,83 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` content: 'Auto'; } -
+
- Max. slippage -
-
-
-
+
+ Max. slippage +
+
+
- 2% + class="c0 c7" + > +
+ 2% +
-
-
- Receive at least +
+ Receive at least +
+
+ 0.000000000000000952 DEF +
- 0.000000000000000952 DEF + class="c13" + /> +
+ If the price moves so that you will receive less than 0.000000000000000952 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. + + Learn more +
-
-
- If the price moves so that you will receive less than 0.000000000000000952 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. - - Learn more - -
+
-
.c0 { @@ -8109,43 +8167,45 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` color: #7D7D7D; } -
-
- Receive at least -
+
-
-
- 0.000000000000000952 DEF +
+ Receive at least +
+
+
+
+ 0.000000000000000952 DEF +
-
-
- The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
-
.c0 { @@ -8504,202 +8564,204 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` color: #7D7D7D; } -
+
- Order routing -
-
-
-
+
+ Order routing +
+
+
- Uniswap API +
+ Uniswap API +
-
-
- ABC logo -
-
-
-
- - dot_line.svg - + ABC logo +
-
- V3 -
+ dot_line.svg +
- 100% +
+
+ V3 +
+
+
+ 100% +
-
-
-
-
+
+
- DEF logo +
+ DEF logo +
-
-
- ABC logo +
+ ABC logo +
-
-
- 1% +
+ 1% +
-
-
- ABC/DEF 1% pool +
+ ABC/DEF 1% pool +
+
-
-
-
- DEF logo +
+ DEF logo +
-
-
- Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
-
@@ -8875,60 +8937,62 @@ exports[`SwapLineItem.tsx preview exact in 1`] = ` color: #7D7D7D; } -
+
- Network cost -
-
-
-
+
+ Network cost +
+
+
+ class="c3 c6 css-142zc9n" + > +
+
-
-
- The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. - - Learn more - + The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
-
.c0 { @@ -9080,48 +9144,50 @@ exports[`SwapLineItem.tsx preview exact in 1`] = ` color: #7D7D7D; } -
+
- Price impact -
-
-
-
+
+ Price impact +
+
+
+ class="c3 c6 css-142zc9n" + > +
+
-
-
- The impact your trade has on the market price of this pool. +
+ The impact your trade has on the market price of this pool. +
+
-
.c0 { @@ -9330,81 +9396,83 @@ exports[`SwapLineItem.tsx preview exact in 1`] = ` content: 'Auto'; } -
-
- Max. slippage -
+
-
-
+
+ Max. slippage +
+
+
- 2% + class="c0 c7" + > +
+ 2% +
-
-
- Receive at least +
+ Receive at least +
+
+ 0.00000000000000098 DEF +
- 0.00000000000000098 DEF + class="c13" + /> +
+ If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. + + Learn more +
-
-
- If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. - - Learn more - -
+
-
.c0 { @@ -9543,43 +9611,45 @@ exports[`SwapLineItem.tsx preview exact in 1`] = ` color: #7D7D7D; } -
-
- Receive at least -
+
-
-
- 0.00000000000000098 DEF +
+ Receive at least +
+
+
+
+ 0.00000000000000098 DEF +
-
-
- The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
-
.c0 { @@ -9639,24 +9709,26 @@ exports[`SwapLineItem.tsx preview exact in 1`] = ` color: #7D7D7D; } -
-
- Order routing -
+
+ class="c3 c4 css-142zc9n" + data-testid="swap-li-label" + > + Order routing +
+
+
+
@@ -9716,21 +9788,23 @@ exports[`SwapLineItem.tsx syncing 1`] = ` color: #7D7D7D; } -
+
- Network cost +
+ Network cost +
+
-
.c0 { box-sizing: border-box; @@ -9784,21 +9858,23 @@ exports[`SwapLineItem.tsx syncing 1`] = ` color: #7D7D7D; } -
+
- Price impact +
+ Price impact +
+
-
.c0 { box-sizing: border-box; @@ -9852,21 +9928,23 @@ exports[`SwapLineItem.tsx syncing 1`] = ` color: #7D7D7D; } -
+
- Max. slippage +
+ Max. slippage +
+
-
.c0 { box-sizing: border-box; @@ -9920,21 +9998,23 @@ exports[`SwapLineItem.tsx syncing 1`] = ` color: #7D7D7D; } -
+
- Receive at least +
+ Receive at least +
+
-
.c0 { box-sizing: border-box; @@ -9988,21 +10068,23 @@ exports[`SwapLineItem.tsx syncing 1`] = ` color: #7D7D7D; } -
+
- Order routing +
+ Order routing +
+
-
`; diff --git a/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap b/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap index 093c9e8efb1..e319920c388 100644 --- a/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap @@ -2,6 +2,74 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ` + .c3 { + color: #7D7D7D; +} + +.c1 { + width: 100%; + height: 1px; + background-color: #22222212; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-right: -6px; + padding: 0 16px; + min-width: -webkit-fit-content; + min-width: -moz-fit-content; + min-width: fit-content; + white-space: nowrap; +} + +.c0 { + padding: 0; + margin-top: 16px; + height: 28px; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; +} + + .c2 { box-sizing: border-box; margin: 0; @@ -68,14 +136,14 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = justify-content: space-between; } -.c5 { - color: #222222; -} - .c11 { color: #7D7D7D; } +.c5 { + color: #222222; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -151,166 +219,192 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = } .c1 { - padding: 0 8px; + padding-bottom: 8px; }
-
+
- Rate -
-
-
-
-
+
+
+
-
- 1 DEF = 1.00 ABC -
- - +
+ 1 DEF = 1.00 ABC +
+ + +
-
- Price impact -
-
-
+
+
- - -105566.373% - +
+ Price impact +
+
+
+
+ + -105566.373% + +
+
+
+
-
-
-
-
-
- Max. slippage -
-
-
- 2% + class="c5 c6 css-142zc9n" + data-testid="swap-li-label" + > + Max. slippage +
+
+
+
+
+
+ 2% +
+
+
+
-
-
-
-
-
- Receive at least -
-
-
- 0.00000000000000098 DEF +
+
+ Receive at least +
+
+
+
+ 0.00000000000000098 DEF +
+
+
+
-
+
- Network cost -
-
-
-
+
+ Network cost +
+
+
- - - Ethereum logo - - - - ethereum.svg + + Ethereum logo + + + + + ethereum.svg + - - $1.00 + $1.00 +
@@ -467,7 +561,6 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = .c6 { height: 56px; - margin-top: 10px; }
+ .c3 { + color: #7D7D7D; +} + +.c1 { + width: 100%; + height: 1px; + background-color: #22222212; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-right: -6px; + padding: 0 16px; + min-width: -webkit-fit-content; + min-width: -moz-fit-content; + min-width: fit-content; + white-space: nowrap; +} + +.c0 { + padding: 0; + margin-top: 16px; + height: 28px; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; +} + +@media (max-width:960px) { + +} + + .c2 { box-sizing: border-box; margin: 0; @@ -538,14 +703,14 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission justify-content: space-between; } -.c5 { - color: #222222; -} - .c13 { color: #7D7D7D; } +.c5 { + color: #222222; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -639,7 +804,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission } .c1 { - padding: 0 8px; + padding-bottom: 8px; } @media (max-width:960px) { @@ -649,128 +814,154 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
-
+
- Rate -
-
-
- - +
+ 1 DEF = 1.00 ABC +
+ + +
-
- Price impact -
-
-
+
+
+ class="c2 c3 c4" + > +
+ Price impact +
+
+
+
+
+
+
+
+
-
-
-
-
-
- Max. slippage -
-
-
- 2% + class="c5 c9 css-142zc9n" + data-testid="swap-li-label" + > + Max. slippage +
+
+
+
+
+
+ 2% +
+
+
+
-
-
-
-
-
- Receive at least -
-
-
- 0.00000000000000098 DEF +
+
+ Receive at least +
+
+
+
+ 0.00000000000000098 DEF +
+
+
+
-
+
- Network cost -
-
-
-
+
+ Network cost +
+
+
+ class="c5 c7 css-142zc9n" + > +
+
@@ -977,7 +1168,6 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission .c6 { height: 56px; - margin-top: 10px; } @media (max-width:960px) { diff --git a/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap b/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap index bccad92baac..b0cf7d1fbe7 100644 --- a/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap @@ -34,14 +34,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] = color: #222222; } -.c13 { - width: 100%; - height: 1px; - border-width: 0; - margin: 0; - background-color: #22222212; -} - .c2 { display: -webkit-box; display: -webkit-flex; @@ -111,13 +103,14 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] = } .c9 { - cursor: help; color: #7D7D7D; margin-right: 8px; } -.c14 { - margin: 16px 2px 24px 2px; +.c13 { + cursor: help; + color: #7D7D7D; + margin-right: 8px; } .c1 { @@ -145,7 +138,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
You pay
@@ -192,7 +184,7 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] = >
You receive @@ -227,9 +219,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
-
`; @@ -268,14 +257,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s color: #222222; } -.c13 { - width: 100%; - height: 1px; - border-width: 0; - margin: 0; - background-color: #22222212; -} - .c2 { display: -webkit-box; display: -webkit-flex; @@ -345,13 +326,14 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s } .c9 { - cursor: help; color: #7D7D7D; margin-right: 8px; } -.c14 { - margin: 16px 2px 24px 2px; +.c13 { + cursor: help; + color: #7D7D7D; + margin-right: 8px; } .c1 { @@ -379,7 +361,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
You pay
@@ -426,7 +407,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s >
You receive @@ -461,9 +442,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
-
`; @@ -502,14 +480,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = ` color: #222222; } -.c13 { - width: 100%; - height: 1px; - border-width: 0; - margin: 0; - background-color: #22222212; -} - .c2 { display: -webkit-box; display: -webkit-flex; @@ -579,13 +549,14 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = ` } .c9 { - cursor: help; color: #7D7D7D; margin-right: 8px; } -.c14 { - margin: 16px 2px 24px 2px; +.c13 { + cursor: help; + color: #7D7D7D; + margin-right: 8px; } .c1 { @@ -613,7 +584,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
You pay
@@ -660,7 +630,7 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = ` >
You receive @@ -695,9 +665,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
-
`; @@ -736,14 +703,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = ` color: #222222; } -.c13 { - width: 100%; - height: 1px; - border-width: 0; - margin: 0; - background-color: #22222212; -} - .c2 { display: -webkit-box; display: -webkit-flex; @@ -813,13 +772,14 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = ` } .c9 { - cursor: help; color: #7D7D7D; margin-right: 8px; } -.c14 { - margin: 16px 2px 24px 2px; +.c13 { + cursor: help; + color: #7D7D7D; + margin-right: 8px; } .c1 { @@ -847,7 +807,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
You pay
@@ -894,7 +853,7 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = ` >
You receive @@ -929,9 +888,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
-
`; From 9f44e48cf1323738b6bf641db1ba525b8cc16abc Mon Sep 17 00:00:00 2001 From: Thomas Thachil Date: Wed, 11 Oct 2023 12:17:45 -0400 Subject: [PATCH 3/5] chore(): update deeplink package names (#7399) --- public/.well-known/assetlinks.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/.well-known/assetlinks.json b/public/.well-known/assetlinks.json index ff3eaba193f..dfcfe7ccd5e 100644 --- a/public/.well-known/assetlinks.json +++ b/public/.well-known/assetlinks.json @@ -3,27 +3,27 @@ "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", - "package_name": "com.uniswap", + "package_name": "com.uniswap.mobile", "sha256_cert_fingerprints": - ["97:A5:81:51:DA:AF:8F:6E:65:3A:90:1E:82:12:6C:FB:61:2D:36:C7:CF:20:61:6B:A3:4C:52:CA:BC:58:43:8E", "F9:E9:E3:F0:04:28:66:62:81:44:50:7E:D6:A9:5F:B9:65:39:02:70:1D:13:74:15:D3:E1:A3:1B:D4:38:3A:1F"] + ["49:D9:3D:5D:FB:AA:64:A4:64:80:85:0F:39:A8:C1:D9:25:D3:D4:BC:8E:6B:1F:45:0C:EA:AF:B1:0C:27:DF:B8", "F9:E9:E3:F0:04:28:66:62:81:44:50:7E:D6:A9:5F:B9:65:39:02:70:1D:13:74:15:D3:E1:A3:1B:D4:38:3A:1F"] } }, { "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", - "package_name": "com.uniswap.beta", + "package_name": "com.uniswap.mobile.beta", "sha256_cert_fingerprints": - ["E5:39:87:DC:4D:FD:4C:1B:A6:74:36:7D:3A:3B:6B:ED:9E:B3:66:89:92:8A:1B:B8:FC:1B:22:56:56:B4:46:A3", "54:4B:62:33:17:9B:5F:A8:E6:5D:D3:A6:E5:9D:80:5F:A5:02:7F:E2:14:B8:C1:7A:AC:4B:8D:E0:65:49:87:41"] + ["75:41:9C:2D:01:4A:88:4E:8D:C6:EF:E5:51:54:28:6B:99:05:31:43:AD:84:B4:EB:39:28:B8:C3:C4:CE:48:E3", "54:4B:62:33:17:9B:5F:A8:E6:5D:D3:A6:E5:9D:80:5F:A5:02:7F:E2:14:B8:C1:7A:AC:4B:8D:E0:65:49:87:41"] } }, { "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", - "package_name": "com.uniswap.dev", + "package_name": "com.uniswap.mobile.dev", "sha256_cert_fingerprints": - ["5A:6D:23:50:2F:1E:0D:01:DC:96:65:F3:3A:18:4C:4C:8C:67:E0:09:99:9B:B1:9B:BF:44:99:D0:D1:D0:FC:5E", "02:E6:1C:76:8C:75:C3:78:C8:8C:FE:7B:2E:8F:4B:E1:FA:47:F2:F6:1A:DB:57:69:4A:41:99:C6:71:2C:AB:E3", "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"] + ["45:F8:15:02:C5:4F:AD:82:E7:51:F0:9C:D1:CA:77:C8:C9:BF:06:A6:D9:5A:55:4F:9E:B8:5F:81:33:2B:D0:DB", "02:E6:1C:76:8C:75:C3:78:C8:8C:FE:7B:2E:8F:4B:E1:FA:47:F2:F6:1A:DB:57:69:4A:41:99:C6:71:2C:AB:E3", "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"] } } ] \ No newline at end of file From b75438bc8b4037a0ddd93101e7930da6d01bc356 Mon Sep 17 00:00:00 2001 From: Kristie Huang Date: Wed, 11 Oct 2023 12:53:01 -0400 Subject: [PATCH 4/5] fix: fix sitemaps routes test (#7441) * fix: fix sitemaps routes test * avoid checking all top-tokens paths --- src/pages/routes.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/routes.test.ts b/src/pages/routes.test.ts index 9920a9fef1a..5022f261fd2 100644 --- a/src/pages/routes.test.ts +++ b/src/pages/routes.test.ts @@ -9,12 +9,12 @@ describe('Routes', () => { const contents = fs.readFileSync('./public/sitemap.xml', 'utf8') const sitemap = await parseStringPromise(contents) - const sitemapPaths = sitemap.urlset.url.map((url: any) => new URL(url['$'].loc).pathname) + const sitemapPaths: string[] = sitemap.urlset.url.map((url: any) => new URL(url['$'].loc).pathname) - pathNames - .filter((p) => !p.includes(':') && !p.includes('*') && !p.includes('not-found')) + sitemapPaths + .filter((p) => !p.includes('/0x')) .forEach((path: string) => { - expect(sitemapPaths).toContain(path) + expect(pathNames).toContain(path) }) }) From d56030a92084ea080eb383fdb83fd322ab2ea479 Mon Sep 17 00:00:00 2001 From: gnewfield <18626088+gnewfield@users.noreply.github.com> Date: Wed, 11 Oct 2023 12:53:10 -0400 Subject: [PATCH 5/5] feat: add progress_indicator_v2 flag (#7445) * feat: add progress_indicator_v2 flag * rename flag hook --- src/components/FeatureFlagModal/FeatureFlagModal.tsx | 7 +++++++ src/featureFlags/flags/progressIndicatorV2.ts | 5 +++++ src/featureFlags/index.tsx | 1 + 3 files changed, 13 insertions(+) create mode 100644 src/featureFlags/flags/progressIndicatorV2.ts diff --git a/src/components/FeatureFlagModal/FeatureFlagModal.tsx b/src/components/FeatureFlagModal/FeatureFlagModal.tsx index caeb77d2c97..f141a3a839c 100644 --- a/src/components/FeatureFlagModal/FeatureFlagModal.tsx +++ b/src/components/FeatureFlagModal/FeatureFlagModal.tsx @@ -11,6 +11,7 @@ import { useInfoLiveViewsFlag } from 'featureFlags/flags/infoLiveViews' import { useInfoPoolPageFlag } from 'featureFlags/flags/infoPoolPage' import { useInfoTDPFlag } from 'featureFlags/flags/infoTDP' import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx' +import { useProgressIndicatorV2Flag } from 'featureFlags/flags/progressIndicatorV2' import { useQuickRouteMainnetFlag } from 'featureFlags/flags/quickRouteMainnet' import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc' import { useUniswapXDefaultEnabledFlag } from 'featureFlags/flags/uniswapXDefault' @@ -290,6 +291,12 @@ export default function FeatureFlagModal() { featureFlag={FeatureFlag.fotAdjustedmentsEnabled} label="Enable fee-on-transfer UI and slippage adjustments" /> +