feat: add to spread warning

src/components/Warning.module.scss

@@ -0,0 +1,92 @@
+@import "src/styles/mixins.module";
+@import "src/styles/variables.module";
+
+.component {
+  @include flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 490px;
+  border-radius: 20px;
+  font-family: $font-family-swap;
+  background-color: white;
+}
+
+.title {
+  margin-top: 30px;
+  font-family: OpenSans;
+  font-size: 20px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: #e64c57;
+}
+
+.spread {
+  margin-top: 30px;
+  margin-bottom: 10px;
+  font-family: OpenSans;
+  font-size: 18px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  text-align: center;
+  color: #e64c57;
+}
+
+.message {
+  margin-bottom: 30px;
+  font-family: OpenSans;
+  font-size: 18px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  text-align: center;
+  color: #5c5c5c;
+}
+
+.button {
+  width: 172px;
+  height: 50px;
+  margin-bottom: 30px;
+  padding: 14px 65px;
+  border-radius: 10px;
+  font-family: OpenSans;
+  font-size: 16px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: #fff;
+
+  &:not(.disabled):hover {
+    background-color: #0222ba;
+  }
+
+  &.disabled {
+    opacity: 0.3;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: lightgray;
+}
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}

src/components/Warning.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+
+import Modal from "components/Modal"
+
+import styles from "./Warning.module.scss"
+import MESSAGE from "../lang/MESSAGE.json"
+import Button from "components/Button"
+
+const WarningModal = (modal: Modal) => {
+  return (
+    <Modal {...modal}>
+      <div className={styles.component}>
+        <p className={styles.title}>{MESSAGE.Confirm.Title.Warning}</p>
+        <p className={styles.spread}>
+          {MESSAGE.Confirm.Warning.SpreadInfo + modal.name}
+        </p>
+        <p className={styles.message}>{MESSAGE.Confirm.Warning.Spread}</p>
+        <Button className={styles.button} onClick={() => modal.close()}>
+          {MESSAGE.Form.Button.Okay}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default WarningModal

src/forms/SwapForm.tsx

@@ -48,6 +48,7 @@ import useAutoRouter from "rest/useAutoRouter"
 import { useLCDClient } from "layouts/WalletConnectProvider"
 import useQueryString from "hooks/useQueryString"
 import { useContractsAddress } from "hooks/useContractsAddress"
+import WarningModal from "components/Warning"
 
 enum Key {
   token1 = "token1",
@@ -78,12 +79,15 @@ const Wrapper = styled.div`
 `
 
 const Warning = {
-  color: "red",
-  FontWeight: "bold",
+  color: "#e64c57",
+  fontWeight: "bold",
+  fontSize: "14px",
 }
 
 const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
   const connectModal = useConnectModal()
+  const [open, setOpen] = useState(false)
+  const warningModal = useModal()
   const { state } = useLocation<{ symbol: string }>()
   const [from, setFrom] = useQueryString<string>(
     "from",
@@ -344,7 +348,7 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
       : "0"
 
     const spread =
-      tokenInfo2 && poolResult?.estimated
+      tokenInfo2 && !isAutoRouterLoading && poolResult?.estimated
         ? div(
             minus(
               poolResult?.estimated,
@@ -354,6 +358,14 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
           )
         : ""
 
+    if (gte(spread, "0.01")) {
+      if (!open) {
+        warningModal.setInfo("", percent(spread))
+        warningModal.open()
+        setOpen(true)
+      }
+    }
+
     const taxs = tax.filter((coin) => !coin.amount.equals(0))
 
     return [
@@ -446,7 +458,15 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
         title: <TooltipIcon content={Tooltip.Swap.Spread}>Spread</TooltipIcon>,
         content: (
           <div style={gte(spread, "0.01") ? Warning : undefined}>
-            <Count format={(value) => `${percent(value)}`}>{spread}</Count>
+            <Count
+              format={(value) =>
+                `${
+                  (gte(spread, "0.01") ? "Low liquidity " : "") + percent(value)
+                }`
+              }
+            >
+              {spread}
+            </Count>
           </div>
         ),
       }),
@@ -733,6 +753,7 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
             lookup(`${profitableQuery?.simulatedAmount}`, data.token2)
           )
           trigger(Key.value2)
+          setOpen(false)
         }
         if (watchName === Key.value2) {
           setValue(
@@ -970,6 +991,7 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
         onSubmit={form.handleSubmit(handleSubmit, handleFailure)}
         style={{ display: formState.isSubmitted ? "none" : "block" }}
       >
+        <div>{open && <WarningModal {...warningModal} />}</div>
         <TabView
           {...tabs}
           extra={[

src/hooks/useWarning.ts

@@ -0,0 +1,4 @@
+import createContext from "./createContext"
+
+const warningModal = createContext<Modal>("warningModal")
+export const [useWarningModal] = warningModal

src/lang/MESSAGE.json

@@ -16,7 +16,8 @@
       "ConnectWallet": "Connect Wallet",
       "ConnectTheWallet": "Connect the Wallet",
       "SelectAsset": "Select an asset",
-      "SelectToken": "Token"
+      "SelectToken": "Token",
+      "Okay": "Okay"
     },
     "Migrate": {
       "Desc": "Balance of the asset(s) below will be changed due to a passed governance poll regarding a corporate event",
@@ -26,10 +27,13 @@
   },
   "Confirm": {
     "Title": {
-      "Confirm": "Confirm Transaction"
+      "Confirm": "Confirm Transaction",
+      "Warning": "Warning"
     },
     "Warning": {
-      "Vote": "Vote cannot be changed after submission."
+      "Vote": "Vote cannot be changed after submission.",
+      "SpreadInfo": "Your spreard: ",
+      "Spread": "Low liquidity may cause unexpected swap results."
     }
   },
   "Result": {