feat: add l2 chain logo to modal (#6575)

* test: swap flow cypress tests

* fix: use default parameter

* feat: use Swap Component on TDP

* feat: auto nav for TDP tokens

* chore: merge

* chore: merge

* chore: merge

* chore: merge

* fix: remove extra inputCurrency URL parsing logic

* fix: undo last change

* fix: pass expected chain id to swap component

* fix: search for default tokens on unconnected networks if needed

* test: e2e test for l2 token

* fix: delete irrelevant tests

* fix: address comments

* fix: lint error

* test: update TDP e2e tests

* fix: use pageChainId for filter

* fix: rename chainId

* fix: typecheck

* fix: chainId bug

* fix: chainId required fixes

* fix: bad merge in e2e test

* fix: remove unused test util

* fix: remove unnecessary variable

* fix: token defaults

* fix: address comments

* fix: address comments and fix tests

* fix: e2e test formatting, remove Maybe<>

* fix: remove unused variable

* fix: use feature flag for swap component on TDP

* fix: back button

* feat: copy review screen UI from widgetg

* fix: modal padding

* feat: add final detail row

* fix: remove widget comment

* fix: update unit tests

* fix: code style consistency

* fix: remove padding from AutoColumn

* fix: update snapshots

* fix: use semantic gaps

* fix: more px and gaps

* fix: design feedbacks

* fix: button radius in summary modal

* fix: design nits

* feat: update design of summary modal

* fix: font weight and vertical spacing

* fix: update snapshots

* fix: css nits

* wip: move approval to summary modal

* wip: not working

* feat: working

* fix: fix flow

* feat: simplify states and build new modal UI

* feat: todos and differs fix

* feat: update tx status modal

* feat: split up approve and permit

* feat: error state

* feat: update success and error states

* feat: undo changes to TxConfirmationModal

* feat: re-order functions

* wip: move approval to summary modal

* wip: not working

* feat: update permit2 e2e tests

* feat: tests passing

* fix: swap test

* fix: bad merge

* wip: move approval to summary modal

* wip: not working

* feat: PendingModalContent tests

* feat: useMaxAmountIn

* fix: bad merge

* fix: naming

* fix: modal flicker when refetching trade

* wip: move approval to summary modal

* wip: not working

* feat: working

* fix: fix flow

* feat: simplify states and build new modal UI

* feat: todos and differs fix

* feat: update tx status modal

* feat: split up approve and permit

* feat: error state

* feat: update success and error states

* feat: undo changes to TxConfirmationModal

* feat: remove step indicators when only one step

* feat: move content into PendingModalContent component

* fix: lint

* chore: merge

* fix: update tests for new modal

* feat: add l2 chain logo to modal

* feat: add unit test

* fix: correct modal state when moving between steps

* fix: comments

* fix: code style improvements

* feat: require trade to be defined

* fix: remove extra props from ThemedTexts

* fix: one more trans

* fix: remove unused export

* feat: remove undefined checks and other fixes

* fix: update test

* fix: add missing dollar sign

* fix: remove null check and update test

* fix: remove max width from detail row value

* fix: remove isOpen prop

* fix: isopen

* feat: refactor approval flow into a hook

* fix: testid fix

* fix: tradeMeaningfullyDiffers improvement and prepareFlow fix

* fix: address  comments

* fix: headerContent prop

* feat: add comments explaining async state

* fix: test updates

* fix: nits

* fix: reduce nesting

* fix: address comments

* test: remove line from test for debugging

* fix: update tests

* fix: address  comments

* fix: update tests

* fix: more nesting in test

* fix: update test

* fix: reorganize test code

src/components/TransactionConfirmationModal/ConfirmationModalContent.test.tsx

+import { render, screen } from 'test-utils/render'
+import noop from 'utils/noop'
+
+import { ConfirmationModalContent } from '.'
+
+describe('ConfirmationModalContent', () => {
+  it('should render the L2 icon for optimism', () => {
+    render(
+      <ConfirmationModalContent
+        title="title"
+        onDismiss={noop}
+        topContent={() => <div>topContent</div>}
+        bottomContent={() => <div>bottomContent</div>}
+        headerContent={() => <div data-testid="confirmation-modal-chain-icon">headerContent</div>}
+      />
+    )
+    expect(screen.getByTestId('confirmation-modal-chain-icon')).toBeInTheDocument()
+  })
+
+  it('should not render a chain icon', () => {
+    render(
+      <ConfirmationModalContent
+        title="title"
+        onDismiss={jest.fn()}
+        topContent={() => <div>topContent</div>}
+        bottomContent={() => <div>bottomContent</div>}
+      />
+    )
+    expect(screen.queryByTestId('confirmation-modal-chain-icon')).not.toBeInTheDocument()
+  })
+})

src/components/TransactionConfirmationModal/index.tsx

@@ -39,7 +39,7 @@ const ConfirmedIcon = styled(ColumnCenter)<{ inline?: boolean }>`
   padding: ${({ inline }) => (inline ? '20px 0' : '32px 0;')};
 `
 
-const StyledLogo = styled.img`
+export const StyledLogo = styled.img`
   height: 16px;
   width: 16px;
   margin-left: 6px;
@@ -173,16 +173,19 @@ export function ConfirmationModalContent({
   bottomContent,
   onDismiss,
   topContent,
+  headerContent,
 }: {
   title: ReactNode
   onDismiss: () => void
   topContent: () => ReactNode
-  bottomContent?: () => ReactNode | undefined
+  bottomContent?: () => ReactNode
+  headerContent?: () => ReactNode
 }) {
   return (
     <Wrapper>
       <AutoColumn gap="sm">
         <Row>
+          {headerContent?.()}
           <Row justify="center" marginLeft="24px">
             <ThemedText.SubHeader>{title}</ThemedText.SubHeader>
           </Row>

src/components/swap/ConfirmSwapModal.tsx

@@ -8,18 +8,22 @@ import {
 } from '@uniswap/analytics-events'
 import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import Badge from 'components/Badge'
 import Modal, { MODAL_TRANSITION_DURATION } from 'components/Modal'
+import { RowFixed } from 'components/Row'
+import { getChainInfo } from 'constants/chainInfo'
 import { useMaxAmountIn } from 'hooks/useMaxAmountIn'
 import { Allowance, AllowanceState } from 'hooks/usePermit2Allowance'
 import usePrevious from 'hooks/usePrevious'
 import { getPriceUpdateBasisPoints } from 'lib/utils/analytics'
 import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
+import { isL2ChainId } from 'utils/chains'
 import { formatSwapPriceUpdatedEventProperties } from 'utils/loggingFormatters'
 import { didUserReject } from 'utils/swapErrorToUserReadableMessage'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
 
-import { ConfirmationModalContent } from '../TransactionConfirmationModal'
+import { ConfirmationModalContent, StyledLogo } from '../TransactionConfirmationModal'
 import {
   ErrorModalContent,
   PendingConfirmModalState,
@@ -173,6 +177,7 @@ export default function ConfirmSwapModal({
   fiatValueInput: { data?: number; isLoading: boolean }
   fiatValueOutput: { data?: number; isLoading: boolean }
 }) {
+  const { chainId } = useWeb3React()
   const doesTradeDiffer = originalTrade && tradeMeaningfullyDiffers(trade, originalTrade, allowedSlippage)
   const { startSwapFlow, onCancel, confirmModalState, approvalError, pendingModalSteps, prepareSwapFlow } =
     useConfirmModalState({
@@ -265,6 +270,21 @@ export default function ConfirmSwapModal({
     startSwapFlow,
   ])
 
+  const l2Badge = () => {
+    if (isL2ChainId(chainId) && confirmModalState !== ConfirmModalState.REVIEWING) {
+      const info = getChainInfo(chainId)
+      return (
+        <Badge>
+          <RowFixed data-testid="confirmation-modal-chain-icon" gap="sm">
+            <StyledLogo src={info.logoUrl} />
+            {info.label}
+          </RowFixed>
+        </Badge>
+      )
+    }
+    return undefined
+  }
+
   return (
     <Trace modal={InterfaceModalName.CONFIRM_SWAP}>
       <Modal isOpen $scrollOverlay onDismiss={onModalDismiss} maxHeight={90}>
@@ -279,6 +299,7 @@ export default function ConfirmSwapModal({
             onDismiss={onModalDismiss}
             topContent={modalHeader}
             bottomContent={modalBottom}
+            headerContent={l2Badge}
           />
         )}
       </Modal>