set 5 min deadline on swaps and hide UI on L2 (#2081)

src/components/TransactionSettings/index.tsx

@@ -10,6 +10,8 @@ import { RowBetween, RowFixed } from '../Row'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
 import { darken } from 'polished'
 import { useSetUserSlippageTolerance, useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
+import { L2_CHAIN_IDS } from 'constants/chains'
+import { useActiveWeb3React } from 'hooks/web3'
 
 enum SlippageError {
   InvalidInput = 'InvalidInput',
@@ -92,6 +94,7 @@ interface TransactionSettingsProps {
 }
 
 export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
+  const { chainId } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
 
   const userSlippageTolerance = useUserSlippageTolerance()
@@ -151,6 +154,8 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
     }
   }
 
+  const showCustomDeadlineRow = Boolean(chainId && !L2_CHAIN_IDS.includes(chainId))
+
   return (
     <AutoColumn gap="md">
       <AutoColumn gap="sm">
@@ -221,37 +226,41 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
         ) : null}
       </AutoColumn>
 
-      <AutoColumn gap="sm">
-        <RowFixed>
-          <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
-            <Trans>Transaction deadline</Trans>
-          </TYPE.black>
-          <QuestionHelper text={t`Your transaction will revert if it is pending for more than this period of time.`} />
-        </RowFixed>
-        <RowFixed>
-          <OptionCustom style={{ width: '80px' }} warning={!!deadlineError} tabIndex={-1}>
-            <Input
-              placeholder={(DEFAULT_DEADLINE_FROM_NOW / 60).toString()}
-              value={
-                deadlineInput.length > 0
-                  ? deadlineInput
-                  : deadline === DEFAULT_DEADLINE_FROM_NOW
-                  ? ''
-                  : (deadline / 60).toString()
-              }
-              onChange={(e) => parseCustomDeadline(e.target.value)}
-              onBlur={() => {
-                setDeadlineInput('')
-                setDeadlineError(false)
-              }}
-              color={deadlineError ? 'red' : ''}
+      {showCustomDeadlineRow && (
+        <AutoColumn gap="sm">
+          <RowFixed>
+            <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
+              <Trans>Transaction deadline</Trans>
+            </TYPE.black>
+            <QuestionHelper
+              text={t`Your transaction will revert if it is pending for more than this period of time.`}
             />
-          </OptionCustom>
-          <TYPE.body style={{ paddingLeft: '8px' }} fontSize={14}>
-            <Trans>minutes</Trans>
-          </TYPE.body>
-        </RowFixed>
-      </AutoColumn>
+          </RowFixed>
+          <RowFixed>
+            <OptionCustom style={{ width: '80px' }} warning={!!deadlineError} tabIndex={-1}>
+              <Input
+                placeholder={(DEFAULT_DEADLINE_FROM_NOW / 60).toString()}
+                value={
+                  deadlineInput.length > 0
+                    ? deadlineInput
+                    : deadline === DEFAULT_DEADLINE_FROM_NOW
+                    ? ''
+                    : (deadline / 60).toString()
+                }
+                onChange={(e) => parseCustomDeadline(e.target.value)}
+                onBlur={() => {
+                  setDeadlineInput('')
+                  setDeadlineError(false)
+                }}
+                color={deadlineError ? 'red' : ''}
+              />
+            </OptionCustom>
+            <TYPE.body style={{ paddingLeft: '8px' }} fontSize={14}>
+              <Trans>minutes</Trans>
+            </TYPE.body>
+          </RowFixed>
+        </AutoColumn>
+      )}
     </AutoColumn>
   )
 }

src/state/user/hooks.tsx

 import { Percent, Token } from '@uniswap/sdk-core'
 import { computePairAddress, Pair } from '@uniswap/v2-sdk'
+import { L2_CHAIN_IDS } from 'constants/chains'
 import { SupportedLocale } from 'constants/locales'
+import { L2_DEADLINE_FROM_NOW } from 'constants/misc'
 import JSBI from 'jsbi'
 import flatMap from 'lodash.flatmap'
 import { useCallback, useMemo } from 'react'
@@ -182,10 +184,11 @@ export function useUserSlippageToleranceWithDefault(defaultSlippageTolerance: Pe
 }
 
 export function useUserTransactionTTL(): [number, (slippage: number) => void] {
+  const { chainId } = useActiveWeb3React()
   const dispatch = useAppDispatch()
-  const userDeadline = useAppSelector((state) => {
-    return state.user.userDeadline
-  })
+  const userDeadline = useAppSelector((state) => state.user.userDeadline)
+  const onL2 = Boolean(chainId && L2_CHAIN_IDS.includes(chainId))
+  const deadline = onL2 ? L2_DEADLINE_FROM_NOW : userDeadline
 
   const setUserDeadline = useCallback(
     (userDeadline: number) => {
@@ -194,7 +197,7 @@ export function useUserTransactionTTL(): [number, (slippage: number) => void] {
     [dispatch]
   )
 
-  return [userDeadline, setUserDeadline]
+  return [deadline, setUserDeadline]
 }
 
 export function useAddUserToken(): (token: Token) => void {