> = ({
{item.visible && item.component}
)}
-
+
))}
)}
diff --git a/src/components/Table.old.tsx b/src/components/Table.old.tsx
deleted file mode 100644
index 2a4ea927..00000000
--- a/src/components/Table.old.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { ReactNode } from "react"
-import classNames from "classnames/bind"
-import { path } from "ramda"
-import styles from "./Table.module.scss"
-
-const cx = classNames.bind(styles)
-
-interface Table
-
-
- {colspan && (
-
-
- )
-}
-
-export default Table
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 587b462c..5a537be2 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import { useEffect } from "react"
import styled, { css } from "styled-components"
import {
useTable,
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index dde604f1..0bf1023c 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren } from "react"
+import { FC, PropsWithChildren } from "react"
import Tippy, { TippyProps } from "@tippyjs/react"
import classNames from "classnames"
import { isNil } from "ramda"
diff --git a/src/components/UnsupportedNetworkModal.tsx b/src/components/UnsupportedNetworkModal.tsx
new file mode 100644
index 00000000..4261bcd8
--- /dev/null
+++ b/src/components/UnsupportedNetworkModal.tsx
@@ -0,0 +1,141 @@
+import { useChainOptions } from "@terra-money/wallet-provider"
+import { AVAILABLE_CHAIN_ID_LIST } from "constants/networks"
+import { useNetwork } from "hooks"
+import { useMemo } from "react"
+import styled from "styled-components"
+import Button from "./Button"
+import Modal from "./Modal"
+
+const ModalContent = styled.div`
+ width: 100%;
+ max-width: calc(100vw - 32px);
+ margin: 0 auto;
+ border-radius: 20px;
+ box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.35);
+ background-color: #fff;
+ padding: 30px 0px;
+ color: #5c5c5c;
+ & > div {
+ position: relative;
+ width: 100%;
+ height: auto;
+ max-height: 80vh;
+ overflow-y: auto;
+ padding: 0 30px;
+
+ font-size: 14px;
+ font-weight: normal;
+ font-stretch: normal;
+ font-style: normal;
+ line-height: 1.71;
+ letter-spacing: normal;
+ text-align: center;
+ color: #5c5c5c;
+ }
+
+ @media screen and (max-width: ${({ theme }) => theme.breakpoint}) {
+ padding: 30px 0px;
+ & > div {
+ padding: 0 16px;
+ }
+ }
+`
+
+const ModalTitle = styled.div`
+ display: block;
+ font-size: 20px;
+ font-weight: bold;
+ font-stretch: normal;
+ font-style: normal;
+ line-height: 1.35;
+ letter-spacing: normal;
+ text-align: center;
+ color: #0222ba;
+ margin-bottom: 30px;
+`
+
+const UnsupportedNetworkModal: React.FC<{ isOpen?: boolean }> = ({
+ isOpen = false,
+}) => {
+ const network = useNetwork()
+ const chainOptions = useChainOptions()
+ const availableNetworks = useMemo(() => {
+ if (chainOptions?.walletConnectChainIds) {
+ const keys = Object.keys(chainOptions?.walletConnectChainIds).map(Number)
+ return keys
+ .filter((key) =>
+ AVAILABLE_CHAIN_ID_LIST.includes(
+ chainOptions?.walletConnectChainIds[key]?.chainID
+ )
+ )
+ .map((key) => chainOptions?.walletConnectChainIds[key])
+ }
+ return []
+ }, [chainOptions])
+
+ return (
+ | - {render?.(value, record, index) ?? value} - | - ) - } - - return ( -
+ Wrong network connection
+
+
+ Your wallet is connected to{" "}
+
+ {network.name}({network.chainID})
+
+ .
+ Please change your network setting of the wallet to +
+
+ {network?.name === "classic" && (
+
+ )}
+ + Please change your network setting of the wallet to +
+ {availableNetworks
+ .map(
+ (availableNetwork) =>
+ `${availableNetwork.name}(${
+ availableNetwork.chainID?.split("-")?.[0]
+ })`
+ )
+ .reverse()
+ .join(", ")}
+
+ - {formatTokenName?.(symbol) ?? lookupSymbol(symbol)} -
- - {name !== UST &&{name}
} -
-
-
-
- setValue(e.target.value)}
- autoComplete="off"
- autoFocus
- />
-
-
-
- )
-}
-
-export default Assets
diff --git a/src/forms/ConfirmDetails.tsx b/src/forms/ConfirmDetails.tsx
index ee436312..42e99854 100644
--- a/src/forms/ConfirmDetails.tsx
+++ b/src/forms/ConfirmDetails.tsx
@@ -1,4 +1,3 @@
-import React from "react"
import classNames from "classnames/bind"
import styles from "./ConfirmDetails.module.scss"
diff --git a/src/forms/Result.tsx b/src/forms/Result.tsx
index 76087df3..6252fefd 100644
--- a/src/forms/Result.tsx
+++ b/src/forms/Result.tsx
@@ -51,6 +51,7 @@ enum STATUS {
SUCCESS = "success",
LOADING = "loading",
FAILURE = "failure",
+ TIMEOUT = "timeout",
}
const Result = ({ response, error, onFailure, parserKey }: ResultProps) => {
@@ -72,18 +73,31 @@ const Result = ({ response, error, onFailure, parserKey }: ResultProps) => {
}, [network, txInfo])
const [status, setStatus] = useState-
- {list
- .filter(({ symbol, name }) =>
- // search result
- [symbol, name].some((text) =>
- text.toLowerCase().includes(value.toLowerCase())
- )
- )
- .sort(({ symbol: a }, { symbol: b }) => {
- const hasA = balanceKey && gt(find(balanceKey, a), 0) ? 1 : 0
- const hasB = balanceKey && gt(find(balanceKey, b), 0) ? 1 : 0
- return hasB - hasA
- })
- .map((item) => {
- const { symbol, price } = item
- const isSelected = symbol === selected
-
- return (
-
- - - - ) - })} -
{txInfo?.raw_log || message}
), + [STATUS.TIMEOUT]: ( + <> + {txInfo &&{MESSAGE.Result.TIMEOUT}
+
+
- ,
-
- {lookup(coin.amount.toString())}
-
-
- )
- }),
- }),
...insertIf(type === Type.SWAP && spread !== "", {
title:
-
+
-
-
- {assetElements ? (
-
+
+ setVerified(true)}>
+ verified
+
+ setVerified(false)}>
+ unverified
+
+
+
+
+ -
+ {assetElements && !isPairsLoading ? (
+ <>
+ {assetElements?.length ? (
+
:(
+
+ No available pairs yet.
+
+ We are looking forward to getting the first providing! +
+ + We are looking forward to getting the first providing! +
-
)}
-
-
-
-
-
-
- )}
-
- {routes()}
-
+
+
+
+
+
+
+ )}
+
{routes()}
+
-
-
-
-
-
-
-
- {pair?.token0?.symbol}-{pair?.token1?.symbol}
-
- {pair?.pairAddress}
-
-
-
-
-
-
- Provide Liquidity
-
-
-
-
- Provide Liquidity
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {pair?.token0?.symbol}
-
-
-
-
- 1 {pair?.token0?.symbol} ≈{" "}
- {Number(pair?.token0?.price).toFixed(2)}{" "}
- {pair?.token1?.symbol}
-
-
-
- {pair?.token0?.tokenAddress}
-
-
+//
+//
+//
+//
+//
+//
+//
+// {pair?.token0?.symbol}-{pair?.token1?.symbol}
+//
+// {pair?.pairAddress}
+//
+//
+//
+//
+//
+//
+// Provide Liquidity
+//
+//
+//
+//
+// Provide Liquidity
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// {pair?.token0?.symbol}
+//
+//
+//
+//
+// 1 {pair?.token0?.symbol} ≈{" "}
+// {Number(pair?.token0?.price).toFixed(2)}{" "}
+// {pair?.token1?.symbol}
+//
+//
+//
+// {pair?.token0?.tokenAddress}
+//
+//
-
-
-
-
-
-
-
-
-
-
-
-
- {pair?.token1?.symbol}
-
-
-
-
- 1 {pair?.token1?.symbol} ≈{" "}
- {Number(pair?.token1?.price).toFixed(2)}{" "}
- {pair?.token0?.symbol}
-
-
-
- {pair?.token1?.tokenAddress}
-
-
- Transaction Volume
-
- -
- Total Liquidity
-
- -
- Recent Transactions
-
-