fix: dismiss txn confirmation modal if on L2 (#2022)

* dismiss txn confirmation modal if on l2

* line up far right margin;

* remove submitted view on txns if on L2

* remove uneeded chainid

* wrap dismissal in useEffect

* update variable names

src/components/Header/NetworkCard.tsx

@@ -19,8 +19,8 @@ const BaseWrapper = css`
   position: relative;
   ${StopOverflowQuery} {
     position: absolute;
-    top: 80px;
-    right: 20px;
+    top: 66px;
+    right: 16px;
   }
   ${({ theme }) => theme.mediaWidth.upToMedium`
     margin-left: 12px;

src/components/Popups/index.tsx

@@ -4,6 +4,9 @@ import { AutoColumn } from '../Column'
 import PopupItem from './PopupItem'
 import ClaimPopup from './ClaimPopup'
 import { useURLWarningVisible } from '../../state/user/hooks'
+import { useActiveWeb3React } from 'hooks/web3'
+import { SupportedChainId } from 'constants/chains'
+import { MEDIA_WIDTHS } from 'theme'
 
 const MobilePopupWrapper = styled.div<{ height: string | number }>`
   position: relative;
@@ -30,7 +33,11 @@ const MobilePopupInner = styled.div`
   }
 `
 
-const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean }>`
+const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium + 1}px) and (max-width: ${
+  MEDIA_WIDTHS.upToMedium + 500
+}px)`
+
+const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding: boolean }>`
   position: fixed;
   top: ${({ extraPadding }) => (extraPadding ? '80px' : '88px')};
   right: 1rem;
@@ -41,6 +48,10 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean }>`
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
   `};
+
+  ${StopOverflowQuery} {
+    top: ${({ extraPadding, xlPadding }) => (xlPadding ? '112px' : extraPadding ? '80px' : '88px')};
+  }
 `
 
 export default function Popups() {
@@ -49,9 +60,13 @@ export default function Popups() {
 
   const urlWarningActive = useURLWarningVisible()
 
+  // need extra padding if network is not L1 Ethereum
+  const { chainId } = useActiveWeb3React()
+  const isNotOnMainnet = Boolean(chainId && chainId !== SupportedChainId.MAINNET)
+
   return (
     <>
-      <FixedPopupColumn gap="20px" extraPadding={urlWarningActive}>
+      <FixedPopupColumn gap="20px" extraPadding={urlWarningActive} xlPadding={isNotOnMainnet}>
         <ClaimPopup />
         {activePopups.map((item) => (
           <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />

src/components/TransactionConfirmationModal/index.tsx

 import { Currency } from '@uniswap/sdk-core'
-import { ReactNode, useContext } from 'react'
+import { ReactNode, useContext, useEffect } from 'react'
 import styled, { ThemeContext } from 'styled-components/macro'
 import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 import Modal from '../Modal'
@@ -15,6 +15,7 @@ import MetaMaskLogo from '../../assets/images/metamask.png'
 import { useActiveWeb3React } from '../../hooks/web3'
 import useAddTokenToMetamask from 'hooks/useAddTokenToMetamask'
 import { Trans } from '@lingui/macro'
+import { L2_CHAIN_IDS } from 'constants/chains'
 
 const Wrapper = styled.div`
   width: 100%;
@@ -227,12 +228,21 @@ export default function TransactionConfirmationModal({
 }: ConfirmationModalProps) {
   const { chainId } = useActiveWeb3React()
 
+  // if on L2 and txn is submitted, close automatically (if open)
+  useEffect(() => {
+    if (isOpen && chainId && L2_CHAIN_IDS.includes(chainId) && hash) {
+      onDismiss()
+    }
+  }, [chainId, hash, isOpen, onDismiss])
+
   if (!chainId) return null
 
   // confirmation screen
+  // if on L2 and submitted dont render content, as should auto dismiss
+  // need this to skip submitted view during state update ^^
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90}>
-      {attemptingTxn ? (
+      {L2_CHAIN_IDS.includes(chainId) && hash ? null : attemptingTxn ? (
         <ConfirmationPendingContent onDismiss={onDismiss} pendingText={pendingText} />
       ) : hash ? (
         <TransactionSubmittedContent

src/pages/AddLiquidity/index.tsx

@@ -235,7 +235,6 @@ export default function AddLiquidity({
             ...txn,
             gasLimit: calculateGasMargin(chainId, estimate),
           }
-
           return library
             .getSigner()
             .sendTransaction(newTxn)

src/pages/Swap/index.tsx

@@ -252,7 +252,6 @@ export default function Swap({ history }: RouteComponentProps) {
     swapCallback()
       .then((hash) => {
         setSwapState({ attemptingTxn: false, tradeToConfirm, showConfirm, swapErrorMessage: undefined, txHash: hash })
-
         ReactGA.event({
           category: 'Swap',
           action:
@@ -279,8 +278,8 @@ export default function Swap({ history }: RouteComponentProps) {
         })
       })
   }, [
-    priceImpact,
     swapCallback,
+    priceImpact,
     tradeToConfirm,
     showConfirm,
     recipient,