Skip to content

Commit

Permalink
fix: add limit as option
Browse files Browse the repository at this point in the history
  • Loading branch information
@EchoDex
EchoDex committed Feb 20, 2024
1 parent 2b9e7d7 commit 5ef4d1e
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 80 deletions.
16 changes: 8 additions & 8 deletions spark-frontend/src/components/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,24 @@ import { Column } from "./Flex";
import Text, { TEXT_TYPES, TEXT_TYPES_MAP } from "./Text";
import Tooltip from "./Tooltip";

interface IOption {
key: string;
interface IOption<T = string> {
key: T;
title: string;
disabled?: boolean;
}

interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
options: IOption[];
selected?: string;
onSelect: (option: IOption, index: number) => void;
interface IProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
options: IOption<T>[];
selected?: T;
onSelect: (option: IOption<T>, index: number) => void;
label?: string;
}

const Select: React.FC<IProps> = ({ options, selected, onSelect, label, ...rest }) => {
const Select = <T,>({ options, selected, onSelect, label, ...rest }: IProps<T>) => {
const [isVisible, setIsVisible] = useState(false);
const selectedOption = options.find(({ key }) => selected === key);

const handleSelectClick = (v: IOption, index: number) => {
const handleSelectClick = (v: IOption<T>, index: number) => {
onSelect(v, index);
setIsVisible(false);
};
Expand Down
124 changes: 62 additions & 62 deletions ...eens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const MAX_TABLE_HEIGHT = {
const TABS = [
{ title: "ORDERS", disabled: false },
{ title: "BALANCES", disabled: false },
{ title: "HISTORY", disabled: false },
// { title: "HISTORY", disabled: false },
];

const TABLE_SIZES_CONFIG = [
Expand Down Expand Up @@ -124,26 +124,26 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
),
}));

const getHistoryData = () =>
vm.myOrdersHistory.map((order) => ({
date: order.timestamp.format("DD MMM YY, HH:mm"),
pair: order.marketSymbol,
type: (
<TableText color={order.type === "SELL" ? theme.colors.redLight : theme.colors.greenLight}>
{order.type}
</TableText>
),
amount: (
<SmartFlex center="y" gap="4px">
<TableText primary>{order.baseSizeUnits.toSignificant(2)}</TableText>
<TokenBadge>
<Text>{order.baseToken.symbol}</Text>
</TokenBadge>
</SmartFlex>
),
price: toCurrency(order.priceUnits.toSignificant(2)),
filled: BN.ZERO.toString(),
}));
// const getHistoryData = () =>
// vm.myOrdersHistory.map((order) => ({
// date: order.timestamp.format("DD MMM YY, HH:mm"),
// pair: order.marketSymbol,
// type: (
// <TableText color={order.type === "SELL" ? theme.colors.redLight : theme.colors.greenLight}>
// {order.type}
// </TableText>
// ),
// amount: (
// <SmartFlex center="y" gap="4px">
// <TableText primary>{order.baseSizeUnits.toSignificant(2)}</TableText>
// <TokenBadge>
// <Text>{order.baseToken.symbol}</Text>
// </TokenBadge>
// </SmartFlex>
// ),
// price: toCurrency(order.priceUnits.toSignificant(2)),
// filled: BN.ZERO.toString(),
// }));

const getBalanceData = () =>
Array.from(balanceStore.balances)
Expand Down Expand Up @@ -207,45 +207,45 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
</MobileTableOrderRow>
));

const orderHistoryData = vm.myOrdersHistory.map((ord, i) => (
<MobileTableOrderRow key={i + "mobile-history-row"}>
<MobileTableRowColumn>
<Text color={theme.colors.textPrimary} type={TEXT_TYPES.BUTTON_SECONDARY}>
{ord.marketSymbol}
</Text>
<SmartFlex gap="2px" column>
<Text type={TEXT_TYPES.SUPPORTING}>Amount</Text>
<SmartFlex center="y" gap="4px">
<Text color={theme.colors.textPrimary}>{ord.baseSizeUnits.toSignificant(2)}</Text>
<TokenBadge>
<Text>{ord.baseToken.symbol}</Text>
</TokenBadge>
</SmartFlex>
</SmartFlex>
</MobileTableRowColumn>
<MobileTableRowColumn>
<Text color={theme.colors.textPrimary}>Active</Text>
<SmartFlex gap="2px" column>
<SmartFlex center="y" gap="4px">
<Text type={TEXT_TYPES.SUPPORTING}>Side:</Text>
<TableText color={ord.type === "SELL" ? theme.colors.redLight : theme.colors.greenLight}>
{ord.type}
</TableText>
</SmartFlex>
<SmartFlex center="y">
<Text type={TEXT_TYPES.SUPPORTING}>Filled:</Text>
<Text color={theme.colors.textPrimary}>-</Text>
</SmartFlex>
</SmartFlex>
</MobileTableRowColumn>
<MobileTableRowColumn>
<SmartFlex alignItems="flex-end" gap="2px" column>
<Text type={TEXT_TYPES.SUPPORTING}>Price:</Text>
<Text color={theme.colors.textPrimary}>{toCurrency(ord.priceUnits.toSignificant(2))}</Text>
</SmartFlex>
</MobileTableRowColumn>
</MobileTableOrderRow>
));
// const orderHistoryData = vm.myOrdersHistory.map((ord, i) => (
// <MobileTableOrderRow key={i + "mobile-history-row"}>
// <MobileTableRowColumn>
// <Text color={theme.colors.textPrimary} type={TEXT_TYPES.BUTTON_SECONDARY}>
// {ord.marketSymbol}
// </Text>
// <SmartFlex gap="2px" column>
// <Text type={TEXT_TYPES.SUPPORTING}>Amount</Text>
// <SmartFlex center="y" gap="4px">
// <Text color={theme.colors.textPrimary}>{ord.baseSizeUnits.toSignificant(2)}</Text>
// <TokenBadge>
// <Text>{ord.baseToken.symbol}</Text>
// </TokenBadge>
// </SmartFlex>
// </SmartFlex>
// </MobileTableRowColumn>
// <MobileTableRowColumn>
// <Text color={theme.colors.textPrimary}>Active</Text>
// <SmartFlex gap="2px" column>
// <SmartFlex center="y" gap="4px">
// <Text type={TEXT_TYPES.SUPPORTING}>Side:</Text>
// <TableText color={ord.type === "SELL" ? theme.colors.redLight : theme.colors.greenLight}>
// {ord.type}
// </TableText>
// </SmartFlex>
// <SmartFlex center="y">
// <Text type={TEXT_TYPES.SUPPORTING}>Filled:</Text>
// <Text color={theme.colors.textPrimary}>-</Text>
// </SmartFlex>
// </SmartFlex>
// </MobileTableRowColumn>
// <MobileTableRowColumn>
// <SmartFlex alignItems="flex-end" gap="2px" column>
// <Text type={TEXT_TYPES.SUPPORTING}>Price:</Text>
// <Text color={theme.colors.textPrimary}>{toCurrency(ord.priceUnits.toSignificant(2))}</Text>
// </SmartFlex>
// </MobileTableRowColumn>
// </MobileTableOrderRow>
// ));

const balanceData = Array.from(balanceStore.balances)
.filter(([, balance]) => balance && balance.gt(0))
Expand Down Expand Up @@ -275,7 +275,7 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
);
});

const tabToData = [orderData, balanceData, orderHistoryData];
const tabToData = [orderData, balanceData];

return (
<SmartFlex width="100%" column>
Expand Down Expand Up @@ -318,7 +318,7 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
};

useEffect(() => {
const tabToData = [getOrderData, getBalanceData, getHistoryData];
const tabToData = [getOrderData, getBalanceData];
setData(tabToData[tabIndex]());
}, [tabIndex, vm.myOrders, balanceStore.balances]);

Expand Down
50 changes: 40 additions & 10 deletions spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpot.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ComponentProps } from "react";
import React, { ComponentProps, useState } from "react";
import styled from "@emotion/styled";
import { Accordion } from "@szhsin/react-accordion";
import { observer } from "mobx-react";
Expand All @@ -20,13 +20,22 @@ import { useStores } from "@stores";

interface IProps extends ComponentProps<any> {}

const orderTypes = [
{ title: "Market", key: "market" },
{ title: "Limit", key: "limit", disabled: true },
{ title: "Stop Market", key: "stopmarket", disabled: true },
{ title: "Stop Limit", key: "stoplimit", disabled: true },
{ title: "Take Profit", key: "takeprofit", disabled: true },
{ title: "Take Profit Limit", key: "takeprofitlimit", disabled: true },
enum ORDER_TYPE {
Market,
Limit,
StopMarket,
StopLimit,
TakeProfit,
TakeProfitLimit,
}

const ORDER_OPTIONS = [
{ title: "Market", key: ORDER_TYPE.Market },
{ title: "Limit", key: ORDER_TYPE.Limit },
{ title: "Stop Market", key: ORDER_TYPE.StopMarket, disabled: true },
{ title: "Stop Limit", key: ORDER_TYPE.StopLimit, disabled: true },
{ title: "Take Profit", key: ORDER_TYPE.TakeProfit, disabled: true },
{ title: "Take Profit Limit", key: ORDER_TYPE.TakeProfitLimit, disabled: true },
];

const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
Expand All @@ -38,6 +47,8 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {

const isButtonDisabled = vm.loading || !vm.canProceed;

const [orderType, setOrderType] = useState(ORDER_OPTIONS[0].key);

if (!market) return null;

const { baseToken, quoteToken } = market;
Expand All @@ -56,6 +67,14 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
vm.setInputTotal(value, true);
};

const handleSetPrice = (amount: BN) => {
if (orderType === ORDER_TYPE.Market) return;

vm.setInputPrice(amount);
};

const isInputPriceDisabled = orderType !== ORDER_TYPE.Limit;

return (
<Root {...rest}>
<ButtonGroup>
Expand All @@ -69,7 +88,12 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
<SizedBox height={16} />
<Row>
<Column crossAxisSize="max">
<Select label="Order type" options={orderTypes} selected={orderTypes[0].key} onSelect={() => null} />
<Select
label="Order type"
options={ORDER_OPTIONS}
selected={orderType}
onSelect={(option) => setOrderType(option.key)}
/>
<SizedBox height={2} />
<Row alignItems="center">
<StyledInfoIcon />
Expand All @@ -79,7 +103,13 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
</Row>
</Column>
<SizedBox width={8} />
<TokenInput amount={vm.inputPrice} decimals={9} label="Price" disabled />
<TokenInput
amount={vm.inputPrice}
decimals={9}
disabled={isInputPriceDisabled}
label="Price"
setAmount={handleSetPrice}
/>
</Row>
<SizedBox height={2} />
<Row alignItems="flex-end">
Expand Down

0 comments on commit 5ef4d1e

Please sign in to comment.