icon-row0xe820
diff --git a/src/assets/fontIcon/opex-icon/font/opex-icon.eot b/src/assets/fontIcon/opex-icon/font/opex-icon.eot
index 5e9c2780..5a07673f 100644
Binary files a/src/assets/fontIcon/opex-icon/font/opex-icon.eot and b/src/assets/fontIcon/opex-icon/font/opex-icon.eot differ
diff --git a/src/assets/fontIcon/opex-icon/font/opex-icon.svg b/src/assets/fontIcon/opex-icon/font/opex-icon.svg
index a36d149f..e4cecd75 100644
--- a/src/assets/fontIcon/opex-icon/font/opex-icon.svg
+++ b/src/assets/fontIcon/opex-icon/font/opex-icon.svg
@@ -158,6 +158,8 @@
+
+
diff --git a/src/assets/fontIcon/opex-icon/font/opex-icon.ttf b/src/assets/fontIcon/opex-icon/font/opex-icon.ttf
index dd5767bf..dea39e80 100644
Binary files a/src/assets/fontIcon/opex-icon/font/opex-icon.ttf and b/src/assets/fontIcon/opex-icon/font/opex-icon.ttf differ
diff --git a/src/assets/fontIcon/opex-icon/font/opex-icon.woff b/src/assets/fontIcon/opex-icon/font/opex-icon.woff
index f3dbaf00..91ddbc94 100644
Binary files a/src/assets/fontIcon/opex-icon/font/opex-icon.woff and b/src/assets/fontIcon/opex-icon/font/opex-icon.woff differ
diff --git a/src/assets/fontIcon/opex-icon/font/opex-icon.woff2 b/src/assets/fontIcon/opex-icon/font/opex-icon.woff2
index 9afebb92..a914a9b2 100644
Binary files a/src/assets/fontIcon/opex-icon/font/opex-icon.woff2 and b/src/assets/fontIcon/opex-icon/font/opex-icon.woff2 differ
diff --git a/src/components/Layout/LayoutHeader/LayoutHeader.js b/src/components/Layout/LayoutHeader/LayoutHeader.js
index f1824ec2..14367c66 100644
--- a/src/components/Layout/LayoutHeader/LayoutHeader.js
+++ b/src/components/Layout/LayoutHeader/LayoutHeader.js
@@ -41,6 +41,7 @@ const LayoutHeader = () => {
{t("Landing.title")}}/>
+ {t("MarketTitle.easyTrading")}}/>
{t("commissions.title")}}/>
{t("aboutUs.title")}}/>
{t("transferFees.title")}}/>
@@ -59,10 +60,10 @@ const LayoutHeader = () => {
to={RoutesName.Landing}
className={({ isActive }) => isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
>{t("home")}
- {/* {t("MarketTitle.easyTrading")}*/}
+ isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
+ >{t("MarketTitle.easyTrading")}
isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.js
index 70133167..bafe4bab 100644
--- a/src/components/TextInput/TextInput.js
+++ b/src/components/TextInput/TextInput.js
@@ -38,7 +38,6 @@ const TextInput = (props) => {
if (state.isSelected) {
className = className + " " + classes.isSelected
}
- console.log("className", className)
return className;
}
diff --git a/src/main/Browser/Browser.js b/src/main/Browser/Browser.js
index 6d352777..5242bd7a 100644
--- a/src/main/Browser/Browser.js
+++ b/src/main/Browser/Browser.js
@@ -22,6 +22,7 @@ import TransferFees from "./Pages/Info/TransferFees/TransferFees";
import Guide from "./Pages/Info/Guide/Guide";
import Rules from "./Pages/Info/Rules/Rules";
import ContactUs from "./Pages/Info/ContactUs/ContactUs";
+import EasyTrading from "./Pages/EasyTrading/EasyTrading";
const Browser = () => {
const query = useQuery();
@@ -94,6 +95,7 @@ const Browser = () => {
}>
}/>
}/>
+ }/>
}/>
}/>
}/>
diff --git a/src/main/Browser/Pages/EasyTrading/EasyTrading.js b/src/main/Browser/Pages/EasyTrading/EasyTrading.js
new file mode 100644
index 00000000..fd46723c
--- /dev/null
+++ b/src/main/Browser/Pages/EasyTrading/EasyTrading.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import EasyOrder from "./components/EasyOrder/EasyOrder";
+
+const EasyTrading = () => {
+ return ;
+};
+
+export default EasyTrading;
diff --git a/src/main/Browser/Pages/EasyTrading/EasyTrading.module.css b/src/main/Browser/Pages/EasyTrading/EasyTrading.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/main/Browser/Pages/EasyTrading/components/EasyOrder/EasyOrder.js b/src/main/Browser/Pages/EasyTrading/components/EasyOrder/EasyOrder.js
new file mode 100644
index 00000000..0100ca9f
--- /dev/null
+++ b/src/main/Browser/Pages/EasyTrading/components/EasyOrder/EasyOrder.js
@@ -0,0 +1,437 @@
+import React, {useEffect, useState} from 'react';
+import classes from './EasyOrder.module.css'
+import {Trans, useTranslation} from "react-i18next";
+import {useDispatch, useSelector} from "react-redux";
+import {useGetUserAccount} from "../../../../../../queries/hooks/useGetUserAccount";
+import {BN, parsePriceString} from "../../../../../../utils/utils";
+import {useOrderBook} from "../../../../../../queries";
+import {toast} from "react-hot-toast";
+import {createOrder} from "js-api-client";
+import {setLastTransaction} from "../../../../../../store/actions/auth";
+import {images} from "../../../../../../assets/images";
+import TextInput from "../../../../../../components/TextInput/TextInput";
+import Icon from "../../../../../../components/Icon/Icon";
+import NumberInput from "../../../../../../components/NumberInput/NumberInput";
+import Button from "../../../../../../components/Button/Button";
+
+const EasyOrder = () => {
+
+ const {t} = useTranslation();
+ const dispatch = useDispatch();
+ const {data: userAccount} = useGetUserAccount()
+ const [isLoading, setIsLoading] = useState(false)
+ const isLogin = useSelector((state) => state.auth.isLogin)
+
+ const symbols = useSelector((state) => state.exchange.symbols)
+
+ const [alert, setAlert] = useState({
+ submit: false,
+ reqAmount: null,
+ totalPrice: null,
+ });
+
+ const [order, setOrder] = useState({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ });
+
+ const handleAvailableAssets = () => {
+ const availableAssets = [];
+ for (const symbol of symbols) {
+ if (!availableAssets.includes(symbol.baseAsset)) availableAssets.push(symbol.baseAsset)
+ if (!availableAssets.includes(symbol.quoteAsset)) availableAssets.push(symbol.quoteAsset)
+ }
+ return availableAssets;
+ }
+
+ const handleAvailableDest = (buy) => {
+ const dest = []
+ for (const symbol of symbols) {
+ if (symbol.baseAsset === buy) dest.push(symbol.quoteAsset)
+ if (symbol.quoteAsset === buy) dest.push(symbol.baseAsset)
+ }
+ return dest
+ }
+
+ const findPair = (buy, sell) => symbols?.find(s => ((s?.baseAsset === buy) && (s?.quoteAsset === sell)) || ((s?.baseAsset === sell) && (s?.quoteAsset === buy)))
+
+ const [selected, setSelected] = useState({
+ buy: symbols[0].baseAsset,
+ sell: symbols[0].quoteAsset,
+ pair: findPair(symbols[0].baseAsset, symbols[0].quoteAsset),
+ type: "ask"
+ })
+
+ const reversePair = () => {
+
+ setSelected({
+ ...selected,
+ buy: selected?.sell,
+ sell: selected?.buy,
+ type: selected?.type ==="ask" ? "bid" : "ask"
+ })
+
+ }
+
+ const [options, setOptions] = useState({
+ buy: handleAvailableAssets(),
+ sell: handleAvailableDest(handleAvailableAssets()[0]),
+ }
+ )
+
+ const {data: orderBook} = useOrderBook(selected.pair.symbol)
+
+ const bestPriceHandler = () => {
+ let bestPrice = 0;
+ if (orderBook && selected.type === "ask" && orderBook["asks"].length) {
+ bestPrice = orderBook["asks"][0][0]
+ }
+ if (orderBook && selected.type === "bid" && orderBook["bids"].length) {
+ bestPrice = orderBook["bids"][0][0];
+ }
+ setOrder({
+ ...order,
+ pricePerUnit: new BN(bestPrice)
+ })
+ }
+ useEffect(() => {
+ bestPriceHandler()
+ }, [orderBook, selected])
+
+
+ const buyPriceHandler = (value) => {
+ let newAlert = null
+ value = parsePriceString(value);
+ const reqAmount = new BN(value);
+ let range = "baseRange"
+ if (selected.type === "bid") range = "quoteRange"
+ if (reqAmount.isZero() && reqAmount.isLessThan(selected.pair[range].min)) {
+ newAlert =
+
+ }
+
+ if (reqAmount.isGreaterThan(selected.pair[range].max)) {
+ newAlert =
+ }
+
+ if (!reqAmount.mod(selected.pair[range].step).isZero()) {
+ newAlert =
+ }
+ setAlert({...alert, reqAmount: newAlert});
+
+ const price = selected.type === "ask" ? reqAmount.multipliedBy(order.pricePerUnit) : reqAmount.multipliedBy(order.pricePerUnit.pow(-1));
+ setOrder({
+ ...order,
+ reqAmount,
+ totalPrice: price,
+ });
+
+ };
+ const totalPriceHandler = (value) => {
+ let newAlert = null
+ value = parsePriceString(value);
+ const totalPrice = new BN(value);
+ let range = "quoteRange"
+ if (selected.type === "bid") range = "baseRange"
+
+ if (totalPrice.isZero() && totalPrice.isLessThan(selected.pair[range].min)) {
+ newAlert =
+
+ }
+
+ if (totalPrice.isGreaterThan(selected.pair[range].max)) {
+ newAlert =
+ }
+
+ if (!totalPrice.mod(selected.pair[range].step).isZero()) {
+ newAlert =
+ }
+ setAlert({...alert, totalPrice: newAlert});
+
+ const reqAmount = selected.type === "ask" ? totalPrice.dividedBy(order.pricePerUnit) : totalPrice.dividedBy(order.pricePerUnit.pow(-1));
+ setOrder({
+ ...order,
+ totalPrice: totalPrice,
+ reqAmount
+ });
+ };
+
+ const fillBuyByWallet = () => {
+ if (order.pricePerUnit.isEqualTo(0)) return toast.error(t("orders.hasNoOffer"));
+ let totalPrice = new BN(userAccount?.wallets[selected?.sell]?.free);
+ let reqAmount = totalPrice.dividedBy(order.pricePerUnit)
+ if (!reqAmount.mod(selected.pair?.[selected.type === "ask" ? "baseRange" : "quoteRange"].step).isZero()) {
+ reqAmount = reqAmount.minus(reqAmount.mod(selected.pair?.[selected.type === "ask" ? "baseRange" : "quoteRange"].step));
+ }
+ buyPriceHandler(
+ reqAmount.toFormat(),
+ "reqAmount",
+ );
+
+ };
+
+ const submit = () => {
+ if (!isLogin) return
+ if (isLoading) return
+
+ setIsLoading(true)
+ const newOrder = {...order}
+ if (selected.type === "bid") {
+ newOrder.reqAmount = order.totalPrice.decimalPlaces(selected.pair?.baseAssetPrecision)
+ }
+ createOrder(selected.pair?.symbol, selected.type === "ask" ? "BUY" : "SELL", newOrder)
+ .then((res) => {
+ setOrder({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ })
+ toast.success();
+ dispatch(setLastTransaction(res.data.transactTime))
+ }).catch(() => {
+ toast.error(t("orders.error"));
+ setAlert({
+ ...alert, submit: true
+ })
+ }).finally(() => {
+ setIsLoading(false)
+ })
+ }
+
+ const submitButtonTextHandler = () => {
+ if (isLoading) return 
+ if (isLogin) return t("convert")
+ return t("pleaseLogin")
+ }
+
+
+ const isAllowed = ({floatValue}) => {
+ return floatValue < 10 ** 12;
+ }
+
+ const buyOnChangeHandler = (e) => {
+ const newBuy = e.value;
+ const sellOptions = handleAvailableDest(newBuy)
+
+ setOptions({
+ ...options,
+ "sell": sellOptions,
+ })
+ const sell = sellOptions.includes(selected.sell) ? selected.sell : sellOptions[0];
+ const pair = findPair(newBuy, sell)
+ setSelected({
+ buy: newBuy,
+ sell,
+ pair,
+ type: newBuy === pair.baseAsset ? "ask" : "bid"
+ })
+ setOrder({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ })
+ }
+ const sellOnChangeHandler = (e) => {
+ const newSell = e.value;
+ const pair = findPair(selected.buy, newSell)
+ setSelected({
+ ...selected,
+ sell: newSell,
+ pair,
+ type: selected.buy === pair.baseAsset ? "ask" : "bid"
+ })
+ setOrder({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ })
+ }
+ const showBestPrice = () => {
+ if (order.pricePerUnit.isZero()) return 0
+ if (selected.type === "ask") return order.pricePerUnit.toFormat()
+ return new BN(1).dividedBy(order.pricePerUnit).decimalPlaces(selected.pair?.baseAssetPrecision).toFormat()
+ }
+
+ useEffect(() => {
+ if (order.totalPrice.isGreaterThan(userAccount?.wallets[selected?.sell]?.free)) {
+ return setAlert({
+ ...alert,
+ totalPrice: t('orders.notEnoughBalance')
+ })
+ }
+ return setAlert({
+ ...alert,
+ totalPrice: null
+ })
+ }, [order.totalPrice])
+
+
+ return (
+
+
+
+ {t("MarketTitle.easyTrading")}
+
+
+
+
+
{
+ return {
+ value: o,
+ label:
+
+
{t('currency.' + o)}
+
+
{t("MarketInfo.lastPrice")}{" "} {t("currency." + selected?.buy)}:
+
{showBestPrice()}{" "}{t("currency." + selected?.sell)}
+
+ reversePair()}
+ />
+
+
+ {
+ return {
+ value: o,
+ label:
+
+
+
{t('currency.' + o)}
+
+
{t("orders.availableAmount")}:{" "}
+
{new BN(userAccount?.wallets[selected?.sell]?.free || 0).toFormat()}{" "}{t("currency." + selected?.sell)}
+
+
+
{t("transferFees.title")}
-
-
{t("aboutUs.title")}
diff --git a/src/main/Browser/Routes/routes.js b/src/main/Browser/Routes/routes.js
index 513db911..8554edd0 100644
--- a/src/main/Browser/Routes/routes.js
+++ b/src/main/Browser/Routes/routes.js
@@ -2,6 +2,7 @@ export const Landing = "/";
export const Panel = "/panel";
export const Login = "/login";
export const AllMarket = "/all-market";
+export const EasyTrading = "/easy-trading";
export const AboutUs = "/about-us";
export const Commission = "/commission";
export const TransferFees = "/transfer-fees";