Skip to content

Commit 79efd26

Browse files
TarnadasTarnadas
committed
bracket order
1 parent 6b56435 commit 79efd26

File tree

5 files changed

+72
-18
lines changed

5 files changed

+72
-18
lines changed

‎app/components/CreateOrder.tsx‎

Lines changed: 68 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useAccount, useOrderEntry, useSymbolsInfo, useWithdraw } from '@orderly.network/hooks';
2-
import { OrderlyOrder, OrderSide, OrderType } from '@orderly.network/types';
2+
import { AlgoOrderRootType, OrderlyOrder, OrderSide, OrderType } from '@orderly.network/types';
33
import { Separator } from '@radix-ui/themes';
44
import { useNotifications } from '@web3-onboard/react';
55
import { FC, useCallback, useState } from 'react';
@@ -93,7 +93,7 @@ export const CreateOrder: FC<{
9393

9494
return (
9595
<form
96-
className="flex flex-1 flex-col gap-6 min-w-[16rem] max-w-[24rem]"
96+
className="flex flex-1 flex-col gap-4 min-w-[16rem] max-w-[24rem]"
9797
onSubmit={(event) => {
9898
event.preventDefault();
9999
submitForm();
@@ -130,20 +130,29 @@ export const CreateOrder: FC<{
130130
<select
131131
className="flex flex-1 py-2 text-center font-bold"
132132
onChange={(event) => {
133-
setValue('order_type', event.target.value);
133+
if (event.target.value === 'BRACKET_MARKET') {
134+
setValue('order_type', OrderType.MARKET);
135+
setValue('algo_type', AlgoOrderRootType.BRACKET);
136+
} else {
137+
setValue('order_type', event.target.value);
138+
setValue('algo_type', undefined);
139+
}
134140
}}
135141
>
136142
<option value="MARKET">Market</option>
137143
<option value="LIMIT">Limit</option>
138144
<option value="STOP_LIMIT">Stop Limit</option>
145+
<option value="BRACKET_MARKET">Bracket Market</option>
139146
</select>
140147

141148
<label
142-
className={`flex-col ${match(formattedOrder.order_type)
143-
.with(OrderType.STOP_LIMIT, () => 'flex')
144-
.otherwise(() => 'hidden')}`}
149+
className={`flex flex-col max-h-fit overflow-hidden transition-duration-300 transition-property-[all] transition-ease-out ${match(
150+
formattedOrder.order_type
151+
)
152+
.with(OrderType.STOP_LIMIT, () => 'h-[6rem] my-0')
153+
.otherwise(() => 'h-0 my--2')}`}
145154
>
146-
<span className="font-bold font-size-5">Trigger Price ({quote})</span>
155+
<span className="font-bold font-size-4">Trigger Price ({quote})</span>
147156
<TokenInput
148157
className={`${hasError('trigger_price') ? 'border-[var(--color-red)]' : ''}`}
149158
decimals={quoteDecimals}
@@ -157,8 +166,14 @@ export const CreateOrder: FC<{
157166
{renderFormError(hasError('trigger_price'))}
158167
</label>
159168

160-
<label className="flex flex-col">
161-
<span className="font-bold font-size-5">Price ({quote})</span>
169+
<label
170+
className={`flex flex-col max-h-fit overflow-hidden transition-duration-300 transition-property-[all] transition-ease-out ${match(
171+
formattedOrder.order_type
172+
)
173+
.with(OrderType.MARKET, () => 'h-0 my--2')
174+
.otherwise(() => 'h-[6rem] my-0')}`}
175+
>
176+
<span className="font-bold font-size-4">Price ({quote})</span>
162177
<TokenInput
163178
className={`${hasError('price') ? 'border-[var(--color-red)]' : ''}`}
164179
decimals={quoteDecimals}
@@ -175,8 +190,50 @@ export const CreateOrder: FC<{
175190
{renderFormError(hasError('price'))}
176191
</label>
177192

193+
<label
194+
className={`flex flex-col max-h-fit overflow-hidden transition-duration-300 transition-property-[all] transition-ease-out ${match(
195+
formattedOrder.algo_type
196+
)
197+
.with(AlgoOrderRootType.BRACKET, () => 'h-[6rem] my-0')
198+
.otherwise(() => 'h-0 my--2')}`}
199+
>
200+
<span className="font-bold font-size-4">Take Profit Price ({quote})</span>
201+
<TokenInput
202+
className={`${hasError('tp_trigger_price') ? 'border-[var(--color-red)]' : ''}`}
203+
decimals={quoteDecimals}
204+
placeholder="Take Profit Price"
205+
name="tp_trigger_price"
206+
hasError={!!hasError('tp_trigger_price')}
207+
onValueChange={(value) => {
208+
setValue('tp_trigger_price', value.toString());
209+
}}
210+
/>
211+
{renderFormError(hasError('tp_trigger_price'))}
212+
</label>
213+
214+
<label
215+
className={`flex flex-col max-h-fit overflow-hidden transition-duration-300 transition-property-[all] transition-ease-out ${match(
216+
formattedOrder.algo_type
217+
)
218+
.with(AlgoOrderRootType.BRACKET, () => 'h-[6rem] my-0')
219+
.otherwise(() => 'h-0 my--2')}`}
220+
>
221+
<span className="font-bold font-size-4">Stop Loss Price ({quote})</span>
222+
<TokenInput
223+
className={`${hasError('sl_trigger_price') ? 'border-[var(--color-red)]' : ''}`}
224+
decimals={quoteDecimals}
225+
placeholder="Stop Loss Price"
226+
name="sl_trigger_price"
227+
hasError={!!hasError('sl_trigger_price')}
228+
onValueChange={(value) => {
229+
setValue('sl_trigger_price', value.toString());
230+
}}
231+
/>
232+
{renderFormError(hasError('sl_trigger_price'))}
233+
</label>
234+
178235
<label className="flex flex-col">
179-
<span className="font-bold font-size-5">Quantity ({base})</span>
236+
<span className="font-bold font-size-4">Quantity ({base})</span>
180237
<TokenInput
181238
className={`${hasError('order_quantity') ? 'border-[var(--color-red)]' : ''}`}
182239
decimals={baseDecimals}
@@ -212,7 +269,7 @@ export const CreateOrder: FC<{
212269
<button
213270
type="submit"
214271
disabled={loading}
215-
className={`relative py-2 font-size-5 bg-[var(--accent-9)] hover:bg-[var(--accent-10)] border-rd-1 border-0 ${account.address == null ? 'hidden' : ''}`}
272+
className={`relative py-2 font-size-4 bg-[var(--accent-9)] hover:bg-[var(--accent-10)] border-rd-1 border-0 ${account.address == null ? 'hidden' : ''}`}
216273
>
217274
{loading && <Spinner overlay={true} />} Create Order
218275
</button>

‎app/components/TokenInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const TokenInput: FC<
6262

6363
return (
6464
<input
65-
className={`${readonly ? 'cursor-default' : ''} ${className ?? ''} ${hasError ? 'error hover:border-[var(--color-light-red)]' : ''} line-height-10 font-size-5`}
65+
className={`${readonly ? 'cursor-default' : ''} ${className ?? ''} ${hasError ? 'error hover:border-[var(--color-light-red)]' : ''} line-height-8 font-size-4`}
6666
type="string"
6767
id={id}
6868
value={value}

‎app/global.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ input {
2626
color: white;
2727
border: none;
2828
outline: none;
29-
font-size: 1.1rem;
30-
border-radius: 0.5rem;
29+
border-radius: 0.3rem;
3130
padding: 0 0.6rem;
3231
border: 2px solid rgba(255, 255, 255, 0.7);
3332
}

‎app/routes/_index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function Index() {
3434
<LightweightChart symbol={symbol} />
3535
)}
3636
</div>
37-
<div className="flex flex-1 w-full flex-wrap items-stretch flex-justify-around gap-4">
37+
<div className="flex flex-1 w-full flex-wrap items-start flex-justify-around gap-4">
3838
<Orderbook symbol={symbol} />
3939
<CreateOrder symbol={symbol} />
4040
</div>

‎app/utils/form.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { FieldError } from 'react-hook-form';
2-
3-
export const renderFormError = (error?: FieldError) => {
1+
export const renderFormError = (error?: { message: string }) => {
42
return (
53
<span
64
className={`${error == null ? 'h-0' : 'h-[1.3rem]'} overflow-hidden color-[var(--color-light-red)] transition-duration-300 transition-property-[height] transition-ease-out`}

0 commit comments

Comments
 (0)