feat: support transaction deadline

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "homepage": "https://app.terraswap.com",
   "repository": "github:terraswap/terraswap-web-app",
-  "author": "DELIGHT <[email protected]>",
+  "author": "DELIGHT LABS <[email protected]>",
   "license": "Apache-2.0",
   "dependencies": {
     "@apollo/client": "^3.2.4",

src/components/Card.module.scss

@@ -12,6 +12,13 @@
   }
 }
 
+.settings-on-mobile {
+  @include mobile {
+    max-width: 308px;
+    margin: 0 auto;
+  }
+}
+
 .shadow {
   box-shadow: 0 0 40px 0 fade-out(black, 0.7);
 }

src/components/Settings.module.scss

@@ -21,7 +21,7 @@
   letter-spacing: normal;
   text-align: left;
   color: $deepgray;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 .caption {
@@ -39,6 +39,7 @@
   color: $deepgray;
   max-height: 9999px;
   transition: all 0.2s ease-in-out;
+  padding-bottom: 16px;
 
   &--invisible {
     max-height: 0;
@@ -50,7 +51,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
 
   &__item {
     margin-right: 4px;
@@ -123,3 +124,57 @@
     }
   }
 }
+
+.text-input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  width: 100%;
+  min-height: 26px;
+  border: none;
+  border-radius: 8px;
+  background-color: #ffffff;
+  color: $blue;
+  border: 1px solid $blue;
+  font-size: 12px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: right;
+  padding: 4px 8px;
+
+  @include mobile {
+    min-height: 36px;
+  }
+
+  & input {
+    background-color: #ffffff;
+    color: $blue;
+    font-size: 12px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: right;
+    padding-right: 6px;
+  }
+
+  &:hover,
+  :focus {
+    background-color: $blue;
+    color: #ffffff;
+    & * {
+      background-color: $blue;
+      color: #ffffff;
+    }
+  }
+}
+
+.focused {
+  background-color: $blue;
+  color: #ffffff;
+}

src/components/Settings.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react"
 import { useForm } from "react-hook-form"
 import styles from "./Settings.module.scss"
+import classNames from "classnames/bind"
 
-type SettingKey = "slippage" | "custom"
+type SettingKey = "slippage" | "custom" | "txDeadline"
 
 export type SettingValues = {
   [K in SettingKey]: string
@@ -41,6 +42,7 @@ const Settings = ({ values, onChange }: SettingsProps) => {
       return current
     })
   })
+  const [inputFocused, setInputFocused] = useState(false)
 
   useEffect(() => {
     formData && onChange && onChange(formData)
@@ -72,13 +74,30 @@ const Settings = ({ values, onChange }: SettingsProps) => {
           </label>
         ))}
       </div>
+      {isDangerous && (
+        <div className={styles.caption}>Your transaction may fail.</div>
+      )}
+      <div className={styles.title}>Transaction Deadline</div>
       <div
-        className={[
-          styles.caption,
-          !isDangerous && styles["caption--invisible"],
-        ].join(" ")}
+        className={
+          inputFocused
+            ? classNames(styles["text-input"], styles["focused"])
+            : styles["text-input"]
+        }
       >
-        Your transaction may fail.
+        <input
+          type="number"
+          min={0}
+          placeholder="20"
+          {...form.register("txDeadline")}
+          onFocus={() => {
+            setInputFocused(true)
+          }}
+          onBlur={() => {
+            setInputFocused(false)
+          }}
+        />{" "}
+        min
       </div>
     </div>
   )

src/components/TabView.tsx

@@ -103,7 +103,9 @@ const TabView: FC<PropsWithChildren<TabViewProps>> = ({
                   url={""}
                   name={""}
                 >
-                  <Card shadow={shadow}>{item.visible && item.component}</Card>
+                  <Card shadow={shadow} className={"settings-on-mobile"}>
+                    {item.visible && item.component}
+                  </Card>
                 </Modal>
               )}
             </React.Fragment>

src/constants/constants.ts

@@ -91,10 +91,10 @@ export const DEFAULT_EXT_NETWORK: ExtNetworkConfig = {
 /* project */
 export const MEDIUM = ""
 export const DISCORD = ""
-export const TELEGRAM = ""
-export const WECHAT = ""
 export const GITHUB = "https://github.com/DELIGHT-LABS/terraswap-web-app"
 
+export const DEFAULT_TX_DEADLINE = 20
+
 export const socialMediaList = [
   {
     icon: iconGitHub,

src/forms/MigrateForm.tsx

@@ -5,7 +5,12 @@ import { SubmitHandler, useForm } from "react-hook-form"
 import Result from "./Result"
 import TabView from "components/TabView"
 import { useSearchParams } from "react-router-dom"
-import { UST, DEFAULT_MAX_SPREAD, ULUNA } from "constants/constants"
+import {
+  UST,
+  DEFAULT_MAX_SPREAD,
+  ULUNA,
+  DEFAULT_TX_DEADLINE,
+} from "constants/constants"
 import { useNetwork, useContract, useAddress, useConnectModal } from "hooks"
 import { lookup } from "libs/parse"
 import { PriceKey, BalanceKey, AssetInfoKey } from "hooks/contractKeys"
@@ -31,7 +36,9 @@ import { useContractsAddress } from "hooks/useContractsAddress"
 import Disclaimer from "components/MigrationDisclaimer"
 import styles from "./SwapFormGroup.module.scss"
 import { calcTax } from "./formHelpers"
-import { toAmount } from "libs/parse"
+import { SettingValues } from "../components/Settings"
+import useLocalStorage from "libs/useLocalStorage"
+
 enum Key {
   value1 = "value1",
   value2 = "value2",
@@ -95,6 +102,19 @@ const MigrateForm = ({ type }: { type?: Type }) => {
   const wallet = useWallet()
   const { terra } = useLCDClient()
   const [residue, setResidue] = useState("0")
+  const [txSettings, setTxSettings] = useLocalStorage<SettingValues>(
+    "settings",
+    {
+      slippage: `${DEFAULT_MAX_SPREAD}`,
+      custom: "",
+      txDeadline: `${DEFAULT_TX_DEADLINE}`,
+    }
+  )
+  const txDeadlineMinute = useMemo(() => {
+    return Number(
+      txSettings.txDeadline ? txSettings.txDeadline : DEFAULT_TX_DEADLINE
+    )
+  }, [txSettings])
 
   const form = useForm({
     defaultValues: {
@@ -286,7 +306,6 @@ const MigrateForm = ({ type }: { type?: Type }) => {
             const taxCap = await loadTaxInfo(token)
             const calculatedTax = calcTax(amount, taxCap, taxRate)
             newTax.set(token, calculatedTax)
-
           }
         })
       )
@@ -443,6 +462,7 @@ const MigrateForm = ({ type }: { type?: Type }) => {
             slippage: lte(provideSimulation.result?.totalShare || "", 0)
               ? undefined
               : DEFAULT_MAX_SPREAD / 100,
+            deadline: Number(txDeadlineMinute),
           })
         ).map((msg: any) => {
           return Array.isArray(msg) ? msg[0] : msg

src/forms/SwapForm.tsx

@@ -5,7 +5,12 @@ import { SubmitHandler, useForm, WatchObserver } from "react-hook-form"
 import Result from "./Result"
 import TabView from "components/TabView"
 import { useSearchParams } from "react-router-dom"
-import { UST, DEFAULT_MAX_SPREAD, ULUNA } from "constants/constants"
+import {
+  UST,
+  DEFAULT_MAX_SPREAD,
+  DEFAULT_TX_DEADLINE,
+  ULUNA,
+} from "constants/constants"
 import { useNetwork, useContract, useAddress, useConnectModal } from "hooks"
 import { lookup, decimal, toAmount } from "libs/parse"
 import calc from "helpers/calc"
@@ -27,7 +32,13 @@ import { TooltipIcon } from "components/Tooltip"
 import Tooltip from "lang/Tooltip.json"
 import useGasPrice from "rest/useGasPrice"
 import { hasTaxToken } from "helpers/token"
-import { Coins, CreateTxOptions, Fee, SignerInfo } from "@terra-money/terra.js"
+import {
+  Coins,
+  CreateTxOptions,
+  Fee,
+  Numeric,
+  SignerInfo,
+} from "@terra-money/terra.js"
 import { Type } from "pages/Swap"
 import usePool from "rest/usePool"
 import { insertIf } from "libs/utils"
@@ -102,21 +113,29 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
   const wallet = useWallet()
   const { terra } = useLCDClient()
   const settingsModal = useModal()
-  const [slippageSettings, setSlippageSettings] =
-    useLocalStorage<SettingValues>("slippage", {
+  const [txSettings, setTxSettings] = useLocalStorage<SettingValues>(
+    "settings",
+    {
       slippage: `${DEFAULT_MAX_SPREAD}`,
       custom: "",
-    })
+      txDeadline: `${DEFAULT_TX_DEADLINE}`,
+    }
+  )
   const slippageTolerance = useMemo(() => {
     // 1% = 0.01
     return `${(
       parseFloat(
-        (slippageSettings?.slippage === "custom"
-          ? slippageSettings.custom
-          : slippageSettings.slippage) || `${DEFAULT_MAX_SPREAD}`
+        (txSettings?.slippage === "custom"
+          ? txSettings.custom
+          : txSettings.slippage) || `${DEFAULT_MAX_SPREAD}`
       ) / 100
     ).toFixed(3)}`
-  }, [slippageSettings])
+  }, [txSettings])
+  const txDeadlineMinute = useMemo(() => {
+    return Number(
+      txSettings.txDeadline ? txSettings.txDeadline : DEFAULT_TX_DEADLINE
+    )
+  }, [txSettings])
 
   const { pairs, isLoading: isPairsLoading } = usePairs()
   const balanceKey = {
@@ -313,6 +332,7 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
     amount: formData[Key.value1],
     type: formState.isSubmitted ? undefined : type,
     slippageTolerance,
+    deadline: Number(txDeadlineMinute),
   })
 
   const { result: poolResult, poolLoading } = usePool(
@@ -878,12 +898,27 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
                 from: `${from}`,
                 to: `${to}`,
                 slippage: slippageTolerance,
+                deadline: Number(txDeadlineMinute),
               },
               [Type.WITHDRAW]: {
                 type: Type.WITHDRAW,
                 sender: `${walletAddress}`,
                 amount: `${value1}`,
                 lpAddr: `${lpContract}`,
+                minAssets: poolResult?.estimated
+                  .split("-")
+                  .map(
+                    (val, idx) =>
+                      Numeric.parse(val)
+                        .mul(
+                          Numeric.parse(
+                            (1 - Number(slippageTolerance)).toString()
+                          )
+                        )
+                        .toFixed(0) + (idx ? poolContract2 : poolContract1)
+                  )
+                  .join(","),
+                deadline: Number(txDeadlineMinute),
               },
             }[type] as any
           )
@@ -945,6 +980,7 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
       generateContractMessages,
       to,
       lpContract,
+      poolResult?.estimated,
     ]
   )
 
@@ -1014,9 +1050,9 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
               component: (
                 <Container sm>
                   <Settings
-                    values={slippageSettings}
+                    values={txSettings}
                     onChange={(settings) => {
-                      setSlippageSettings(settings)
+                      setTxSettings(settings)
                     }}
                   />
                 </Container>

src/libs/utils.ts

@@ -1,4 +1,5 @@
 import { is } from "ramda"
+import { DEFAULT_TX_DEADLINE } from "constants/constants"
 
 /* object */
 export const record = <T, V>(
@@ -28,3 +29,9 @@ export const insertIf = <T>(condition?: any, ...elements: T[]) =>
 export const getLength = (text: string) => new Blob([text]).size
 export const capitalize = (text: string) =>
   text[0].toUpperCase() + text.slice(1)
+
+export const getDeadlineSeconds = (
+  interval: number | undefined = DEFAULT_TX_DEADLINE
+) => {
+  return Number(Number((Date.now() / 1000).toFixed(0)) + interval * 60)
+}