From 264f1457086e6ccbe330d7972dd2f4e1704f8936 Mon Sep 17 00:00:00 2001 From: eddie <66155195+just-toby@users.noreply.github.com> Date: Thu, 3 Aug 2023 15:08:59 -0700 Subject: [PATCH] fix: Router label copy (#7060) --- .../RouterLabel/RouterLabel.test.tsx | 26 ++++++ .../RouterLabel/UniswapXRouterLabel.test.tsx | 16 ++++ .../UniswapXRouterLabel.test.tsx.snap | 84 +++++++++++++++++++ src/components/RouterLabel/index.tsx | 4 +- .../AdvancedSwapDetails.test.tsx.snap | 2 +- .../SwapDetailsDropdown.test.tsx.snap | 2 +- src/state/routing/types.ts | 2 - src/test-utils/constants.ts | 15 ++++ 8 files changed, 145 insertions(+), 6 deletions(-) create mode 100644 src/components/RouterLabel/RouterLabel.test.tsx create mode 100644 src/components/RouterLabel/UniswapXRouterLabel.test.tsx create mode 100644 src/components/RouterLabel/__snapshots__/UniswapXRouterLabel.test.tsx.snap diff --git a/src/components/RouterLabel/RouterLabel.test.tsx b/src/components/RouterLabel/RouterLabel.test.tsx new file mode 100644 index 0000000000..f43a33e36b --- /dev/null +++ b/src/components/RouterLabel/RouterLabel.test.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +import { + TEST_DUTCH_TRADE_ETH_INPUT, + TEST_TRADE_EXACT_INPUT, + TEST_TRADE_EXACT_INPUT_API, +} from '../../test-utils/constants' +import { render, screen } from '../../test-utils/render' +import RouterLabel from '.' + +describe('RouterLabel', () => { + it('renders correct label for UniswapX trade', () => { + render() + expect(screen.getByText('Uniswap X')).toBeInTheDocument() + }) + + it('renders correct label for classic trade with client routing', () => { + render() + expect(screen.getByText('Uniswap Client')).toBeInTheDocument() + }) + + it('renders correct label for classic trade with API routing', () => { + render() + expect(screen.getByText('Uniswap API')).toBeInTheDocument() + }) +}) diff --git a/src/components/RouterLabel/UniswapXRouterLabel.test.tsx b/src/components/RouterLabel/UniswapXRouterLabel.test.tsx new file mode 100644 index 0000000000..ef91dd2f82 --- /dev/null +++ b/src/components/RouterLabel/UniswapXRouterLabel.test.tsx @@ -0,0 +1,16 @@ +import { mocked } from 'test-utils/mocked' +import { render, screen } from 'test-utils/render' +import { v4 as uuid } from 'uuid' + +import UniswapXRouterLabel from './UniswapXRouterLabel' + +jest.mock('uuid') + +describe('UniswapXRouterLabel', () => { + it('matches snapshot', () => { + mocked(uuid).mockReturnValue('test-id') + const { asFragment } = render(test router label) + expect(screen.getByText('test router label')).toBeInTheDocument() + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/src/components/RouterLabel/__snapshots__/UniswapXRouterLabel.test.tsx.snap b/src/components/RouterLabel/__snapshots__/UniswapXRouterLabel.test.tsx.snap new file mode 100644 index 0000000000..7367eb36d2 --- /dev/null +++ b/src/components/RouterLabel/__snapshots__/UniswapXRouterLabel.test.tsx.snap @@ -0,0 +1,84 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UniswapXRouterLabel matches snapshot 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: auto; +} + +.c1 { + width: auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 4px; +} + +.c2 { + color: #4673fa; +} + +@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) { + .c2 { + background-image: linear-gradient(91.39deg,#4673fa -101.76%,#9646fa 101.76%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +
+ + + + + + + + + +
+ test router label +
+
+ +`; diff --git a/src/components/RouterLabel/index.tsx b/src/components/RouterLabel/index.tsx index d860d2dc06..66b1548dbe 100644 --- a/src/components/RouterLabel/index.tsx +++ b/src/components/RouterLabel/index.tsx @@ -1,4 +1,4 @@ -import { InterfaceTrade } from 'state/routing/types' +import { InterfaceTrade, QuoteMethod } from 'state/routing/types' import { isUniswapXTrade } from 'state/routing/utils' import { ThemedText } from 'theme' @@ -12,7 +12,7 @@ export default function RouterLabel({ trade }: { trade: InterfaceTrade }) { ) } - if (trade.fromClientRouter) { + if (trade.quoteMethod === QuoteMethod.CLIENT_SIDE || trade.quoteMethod === QuoteMethod.CLIENT_SIDE_FALLBACK) { return Uniswap Client } return Uniswap API diff --git a/src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap b/src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap index fd72ba1140..c5058671a9 100644 --- a/src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap +++ b/src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap @@ -190,7 +190,7 @@ exports[`AdvancedSwapDetails.tsx matches base snapshot 1`] = `
- Uniswap API + Uniswap Client
diff --git a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap index 7ab2bd6b21..57619b175f 100644 --- a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap @@ -391,7 +391,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
- Uniswap API + Uniswap Client
diff --git a/src/state/routing/types.ts b/src/state/routing/types.ts index fd86b8889c..0f5c9bc92a 100644 --- a/src/state/routing/types.ts +++ b/src/state/routing/types.ts @@ -119,7 +119,6 @@ export class ClassicTrade extends Trade { gasUseEstimateUSD?: number // gas estimate for swaps blockNumber: string | null | undefined isUniswapXBetter: boolean | undefined - fromClientRouter: boolean | undefined requestId: string | undefined quoteMethod: QuoteMethod @@ -138,7 +137,6 @@ export class ClassicTrade extends Trade { isUniswapXBetter?: boolean requestId?: string quoteMethod: QuoteMethod - fromClientRouter?: boolean approveInfo: ApproveInfo v2Routes: { routev2: V2Route diff --git a/src/test-utils/constants.ts b/src/test-utils/constants.ts index 5201e9ec0c..ce31a3dbe4 100644 --- a/src/test-utils/constants.ts +++ b/src/test-utils/constants.ts @@ -48,6 +48,21 @@ export const TEST_TRADE_EXACT_INPUT = new ClassicTrade({ quoteMethod: QuoteMethod.CLIENT_SIDE, }) +export const TEST_TRADE_EXACT_INPUT_API = new ClassicTrade({ + v3Routes: [ + { + routev3: new V3Route([TEST_POOL_12], TEST_TOKEN_1, TEST_TOKEN_2), + inputAmount: toCurrencyAmount(TEST_TOKEN_1, 1000), + outputAmount: toCurrencyAmount(TEST_TOKEN_2, 1000), + }, + ], + v2Routes: [], + tradeType: TradeType.EXACT_INPUT, + gasUseEstimateUSD: 1.0, + approveInfo: { needsApprove: false }, + quoteMethod: QuoteMethod.ROUTING_API, +}) + export const TEST_TRADE_EXACT_OUTPUT = new ClassicTrade({ v3Routes: [ {