Allow to set custom deadline (#543)

src/components/ExchangePage/index.jsx

@@ -32,7 +32,7 @@ const ALLOWED_SLIPPAGE_DEFAULT = 100
 const TOKEN_ALLOWED_SLIPPAGE_DEFAULT = 100
 
 // 15 minutes, denominated in seconds
-const DEADLINE_FROM_NOW = 60 * 15
+const DEFAULT_DEADLINE_FROM_NOW = 60 * 15
 
 // % above the calculated gas cost that we actually send, denominated in bips
 const GAS_MARGIN = ethers.utils.bigNumberify(1000)
@@ -266,6 +266,8 @@ export default function ExchangePage({ initialCurrency, sending = false, params
     return ''
   }
 
+  const [deadlineFromNow, setDeadlineFromNow] = useState(DEFAULT_DEADLINE_FROM_NOW)
+
   const [rawSlippage, setRawSlippage] = useState(() => initialSlippage())
   const [rawTokenSlippage, setRawTokenSlippage] = useState(() => initialSlippage(true))
 
@@ -553,8 +555,8 @@ export default function ExchangePage({ initialCurrency, sending = false, params
   const highSlippageWarning = percentSlippage && percentSlippage.gte(ethers.utils.parseEther('.2')) // [20+%
 
   const isValid = sending
-    ? exchangeRate && inputError === null && independentError === null && recipientError === null
-    : exchangeRate && inputError === null && independentError === null
+    ? exchangeRate && inputError === null && independentError === null && recipientError === null && deadlineFromNow
+    : exchangeRate && inputError === null && independentError === null && deadlineFromNow
 
   const estimatedText = `(${t('estimated')})`
   function formatBalance(value) {
@@ -562,7 +564,7 @@ export default function ExchangePage({ initialCurrency, sending = false, params
   }
 
   async function onSwap() {
-    const deadline = Math.ceil(Date.now() / 1000) + DEADLINE_FROM_NOW
+    const deadline = Math.ceil(Date.now() / 1000) + deadlineFromNow
 
     let estimate, method, args, value
     if (independentField === INPUT) {
@@ -759,6 +761,8 @@ export default function ExchangePage({ initialCurrency, sending = false, params
         rawSlippage={rawSlippage}
         slippageWarning={slippageWarning}
         highSlippageWarning={highSlippageWarning}
+        setDeadline={setDeadlineFromNow}
+        deadline={deadlineFromNow}
         inputError={inputError}
         independentError={independentError}
         inputCurrency={inputCurrency}

src/components/TransactionDetails/index.js

@@ -260,7 +260,7 @@ const LastSummaryText = styled.div`
 const SlippageSelector = styled.div`
   background-color: ${({ theme }) => darken(0.04, theme.concreteGray)};
   padding: 1rem 1.25rem 1rem 1.25rem;
-  border-radius: 12px;
+  border-radius: 12px 12px 0 0;
 `
 
 const Percent = styled.div`
@@ -294,6 +294,14 @@ const ValueWrapper = styled.span`
   font-variant: tabular-nums;
 `
 
+const DeadlineSelector = styled.div`
+  background-color: ${({ theme }) => darken(0.04, theme.concreteGray)};
+  padding: 1rem 1.25rem 1rem 1.25rem;
+  border-radius: 0 0 12px 12px;
+`
+const DeadlineRow = SlippageRow
+const DeadlineInput = OptionCustom
+
 export default function TransactionDetails(props) {
   const { t } = useTranslation()
 
@@ -314,6 +322,8 @@ export default function TransactionDetails(props) {
     }
   })
 
+  const [deadlineInput, setDeadlineInput] = useState('')
+
   function renderSummary() {
     let contextualInfo = ''
     let isError = false
@@ -492,6 +502,14 @@ export default function TransactionDetails(props) {
             </BottomError>
           </SlippageRow>
         </SlippageSelector>
+        <DeadlineSelector>
+          Set swap deadline (minutes from now)
+          <DeadlineRow wrap>
+            <DeadlineInput>
+              <Input placeholder={'Deadline'} value={deadlineInput} onChange={parseDeadlineInput} />
+            </DeadlineInput>
+          </DeadlineRow>
+        </DeadlineSelector>
       </>
     )
   }
@@ -507,6 +525,7 @@ export default function TransactionDetails(props) {
   const setRawSlippage = props.setRawSlippage
   const setRawTokenSlippage = props.setRawTokenSlippage
   const setcustomSlippageError = props.setcustomSlippageError
+  const setDeadline = props.setDeadline
 
   const updateSlippage = useCallback(
     newSlippage => {
@@ -604,6 +623,22 @@ export default function TransactionDetails(props) {
     }
   }
 
+  const [initialDeadline] = useState(props.deadline)
+
+  useEffect(() => {
+    setDeadlineInput(initialDeadline / 60)
+  }, [initialDeadline])
+
+  const parseDeadlineInput = e => {
+    const input = e.target.value
+
+    const acceptableValues = [/^$/, /^\d+$/]
+    if (acceptableValues.some(re => re.test(input))) {
+      setDeadlineInput(input)
+      setDeadline(parseInt(input) * 60)
+    }
+  }
+
   const b = text => <Bold>{text}</Bold>
 
   const renderTransactionDetails = () => {