feat: chain-specific ttls (#3228)

src/lib/components/Swap/Settings/TransactionTtlInput.tsx

 import { Trans } from '@lingui/macro'
-import { useAtom } from 'jotai'
-import { TRANSACTION_TTL_DEFAULT, transactionTtlAtom } from 'lib/state/settings'
+import { useDefaultTransactionTtl, useTransactionTtl } from 'lib/hooks/useTransactionDeadline'
 import styled, { ThemedText } from 'lib/theme'
 import { useRef } from 'react'
 
@@ -11,14 +10,14 @@ import { Label } from './components'
 
 const tooltip = <Trans>Your transaction will revert if it has been pending for longer than this period of time.</Trans>
 
-const placeholder = TRANSACTION_TTL_DEFAULT.toString()
-
 const Input = styled(Row)`
   ${inputCss}
 `
 
 export default function TransactionTtlInput() {
-  const [transactionTtl, setTransactionTtl] = useAtom(transactionTtlAtom)
+  const [ttl, setTtl] = useTransactionTtl()
+  const defaultTtl = useDefaultTransactionTtl()
+  const placeholder = defaultTtl.toString()
   const input = useRef<HTMLInputElement>(null)
   return (
     <Column gap={0.75}>
@@ -27,9 +26,9 @@ export default function TransactionTtlInput() {
         <Input justify="start" onClick={() => input.current?.focus()}>
           <IntegerInput
             placeholder={placeholder}
-            value={transactionTtl?.toString() ?? ''}
-            onChange={(value) => setTransactionTtl(value ? parseFloat(value) : 0)}
-            size={Math.max(transactionTtl?.toString().length || 0, placeholder.length)}
+            value={ttl?.toString() ?? ''}
+            onChange={(value) => setTtl(value ? parseFloat(value) : 0)}
+            size={Math.max(ttl?.toString().length || 0, placeholder.length)}
             ref={input}
           />
           <Trans>minutes</Trans>

src/lib/hooks/useTransactionDeadline.ts

 import { BigNumber } from '@ethersproject/bignumber'
 import { L2_CHAIN_IDS } from 'constants/chains'
-import { L2_DEADLINE_FROM_NOW } from 'constants/misc'
+import { DEFAULT_DEADLINE_FROM_NOW, L2_DEADLINE_FROM_NOW } from 'constants/misc'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
-import { useAtomValue } from 'jotai/utils'
-import { TRANSACTION_TTL_DEFAULT, transactionTtlAtom } from 'lib/state/settings'
+import { useAtom } from 'jotai'
+import { transactionTtlAtom } from 'lib/state/settings'
 import { useMemo } from 'react'
 
 import useActiveWeb3React from './useActiveWeb3React'
 
+/** Returns the default transaction TTL for the chain, in minutes. */
+export function useDefaultTransactionTtl(): number {
+  const { chainId } = useActiveWeb3React()
+  if (chainId && L2_CHAIN_IDS.includes(chainId)) return L2_DEADLINE_FROM_NOW / 60
+  return DEFAULT_DEADLINE_FROM_NOW / 60
+}
+
+/** Returns the user-inputted transaction TTL, in minutes. */
+export function useTransactionTtl(): [number | undefined, (ttl?: number) => void] {
+  return useAtom(transactionTtlAtom)
+}
+
 // combines the block timestamp with the user setting to give the deadline that should be used for any submitted transaction
 export default function useTransactionDeadline(): BigNumber | undefined {
-  const { chainId } = useActiveWeb3React()
-  const userDeadline: number = useAtomValue(transactionTtlAtom) || TRANSACTION_TTL_DEFAULT
+  const [ttl] = useTransactionTtl()
+  const defaultTtl = useDefaultTransactionTtl()
+
   const blockTimestamp = useCurrentBlockTimestamp()
   return useMemo(() => {
-    if (blockTimestamp && chainId && L2_CHAIN_IDS.includes(chainId)) return blockTimestamp.add(L2_DEADLINE_FROM_NOW)
-    //@TODO(ianlapham): update this to be stored as seconds
-    if (blockTimestamp && userDeadline) return blockTimestamp.add(userDeadline * 60) // adjust for seconds
-    return undefined
-  }, [blockTimestamp, chainId, userDeadline])
+    if (!blockTimestamp) return undefined
+    return blockTimestamp.add((ttl || defaultTtl) /* in seconds */ * 60)
+  }, [blockTimestamp, defaultTtl, ttl])
 }

src/lib/state/settings.ts

@@ -6,13 +6,9 @@ import { pickAtom, setTogglable } from './atoms'
 export const MAX_VALID_SLIPPAGE = new Percent(1, 2)
 export const MIN_HIGH_SLIPPAGE = new Percent(1, 100)
 
-// transaction deadline in minutes, needs to be adjusted to seconds before use
-// @TODO(ianlapham): update this to be stored as seconds
-export const TRANSACTION_TTL_DEFAULT = 30
-
 interface Settings {
   maxSlippage: Percent | 'auto' // auto will cause slippage to resort to default calculation
-  transactionTtl: number | undefined
+  transactionTtl: number | undefined // transaction ttl in minutes
   integratorFee: number | undefined
   mockTogglable: boolean
   clientSideRouter: boolean // whether to use the client-side router or query the remote API