Skip to content

Commit

Permalink
feat: 🎸 accordion effect on tp/sl on TradeTab
Browse files Browse the repository at this point in the history 
✅ Closes: #1198
  • Loading branch information
@arealclimber
arealclimber committed Sep 25, 2023
1 parent c29f3fc commit 1862dda
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 47 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "src",
"version": "0.8.0+51.1",
"version": "0.8.0+51.2",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
84 changes: 38 additions & 46 deletions src/components/trade_tab/trade_tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -899,8 +899,8 @@ const TradeTab = () => {
const displayedExpectedLongProfit = (
<div
className={`${
longTpToggle ? `translate-y-2` : `invisible translate-y-0`
} lg:-mt-5 transition-all duration-150 ease-in-out`}
longTpToggle ? `translate-y-2 lg:h-30px` : `invisible translate-y-0`
} transition-all duration-150 ease-in-out`}
>
<div className="text-xs text-lightWhite">
* {t('TRADE_PAGE.TRADE_TAB_EXPECTED_PROFIT')}: {estimatedLongProfitValueRef.current.symbol}{' '}
Expand Down Expand Up @@ -937,7 +937,7 @@ const TradeTab = () => {
const displayedExpectedLongLoss = (
<div
className={`${
longSlToggle ? `translate-y-2` : `invisible translate-y-0`
longSlToggle ? `translate-y-2 lg:h-20px` : `invisible translate-y-0`
} items-center transition-all`}
>
<div className="text-xs text-lightWhite">
Expand All @@ -955,8 +955,8 @@ const TradeTab = () => {
const longGuaranteedStop = (
<div
className={`${
longSlToggle ? `translate-y-5` : `invisible translate-y-0`
} lg:mb-10 lg:mt-0 flex items-center transition-all duration-150 ease-in-out`}
longSlToggle ? `translate-y-5 lg:h-70px` : `invisible translate-y-0`
} lg:mb-10 lg:mt-0 flex items-start transition-all duration-150 ease-in-out`}
>
<input
type="checkbox"
Expand Down Expand Up @@ -1045,8 +1045,8 @@ const TradeTab = () => {
const displayedExpectedShortProfit = (
<div
className={`${
shortTpToggle ? `translate-y-2` : `invisible translate-y-0`
} lg:-mt-5 transition-all`}
shortTpToggle ? `translate-y-2 lg:h-30px` : `invisible translate-y-0`
} transition-all`}
>
<div className="text-xs text-lightWhite">
* {t('TRADE_PAGE.TRADE_TAB_EXPECTED_PROFIT')}: {estimatedShortProfitValueRef.current.symbol}{' '}
Expand Down Expand Up @@ -1083,7 +1083,7 @@ const TradeTab = () => {
const displayedExpectedShortLoss = (
<div
className={`${
shortSlToggle ? `translate-y-2` : `invisible translate-y-0`
shortSlToggle ? `translate-y-2 lg:h-20px` : `invisible translate-y-0`
} items-center transition-all`}
>
<div className="text-xs text-lightWhite">
Expand All @@ -1101,7 +1101,7 @@ const TradeTab = () => {
const shortGuaranteedStop = (
<div
className={`${
shortSlToggle ? `translate-y-5` : `invisible translate-y-0`
shortSlToggle ? `translate-y-5 lg:h-70px` : `invisible translate-y-0`
} lg:mb-10 lg:mt-0 mb-10 mt-0 items-center transition-all`}
>
<div className="mt-0 flex items-center">
Expand Down Expand Up @@ -1201,7 +1201,7 @@ const TradeTab = () => {
}
};

const longSetting = (
const mobileLongSetting = (
<div
className={`${
isActiveTabLong ? 'flex' : 'hidden'
Expand Down Expand Up @@ -1232,7 +1232,7 @@ const TradeTab = () => {
</div>
);

const shortSetting = (
const mobileShortSetting = (
<div
className={`${
isActiveTabLong ? 'hidden' : 'flex'
Expand Down Expand Up @@ -1330,8 +1330,8 @@ const TradeTab = () => {
)}
</div>
</div>
{longSetting}
{shortSetting}
{mobileLongSetting}
{mobileShortSetting}
</div>
</div>
</div>
Expand Down Expand Up @@ -1386,16 +1386,14 @@ const TradeTab = () => {
<div className="relative mx-auto my-6 w-auto max-w-xl">
{' '}
<div className={`relative`}>
{/* ---sidebar self--- */}
{/* Info: (20230925 - Shirley) ---sidebar self--- */}
<div
className={`pointer-events-auto ${tabBodyWidth} h-screen overflow-y-auto bg-darkGray p-5 text-white transition-all duration-300`}
>
{/* <h1 className="pl-5 text-2xl font-bold">Start to trade</h1> */}

{/* ---target input area--- */}
{/* Info: (20230925 - Shirley) ---target input area--- */}
{displayedTargetAmountSetting}

{/* ---universal trading info area--- */}
{/* Info: (20230925 - Shirley) ---universal trading info area--- */}
<div className="mt-2 text-lightGray">
<div className="flex justify-center text-xs">{ticker}</div>
<div className="mt-2">
Expand All @@ -1406,17 +1404,17 @@ const TradeTab = () => {
</div>
</div>

{/* ---Long Section--- */}
{/* Info: (20230925 - Shirley) ---Long Section--- */}
<div className="">
{/* ---custom trading info area--- */}
{/* Info: (20230925 - Shirley) ---custom trading info area--- */}
<div className="mt-2 flex justify-center text-center text-base tracking-normal">
<div className="w-1/2 space-y-1">
<div className="text-sm text-lightGray">
{t('TRADE_PAGE.TRADE_TAB_REQUIRED_MARGIN')}
</div>
{displayedRequiredMarginLongStyle}
</div>
{/* Left Divider */}
{/* Info: (20230925 - Shirley) Left Divider */}
<div className="mx-2 h-14 justify-center border-r-1px border-lightGray"></div>

<div className="w-1/2 space-y-1">
Expand All @@ -1432,9 +1430,9 @@ const TradeTab = () => {
</div>

<div className="">
{/* Take Profit Setting */}
<div className="h-60px">
<div className="mb-5 mt-3 flex h-25px items-center justify-between">
{/* Info: (20230925 - Shirley) Take Profit Setting */}
<div className="">
<div className="flex items-center justify-between">
<div className="text-sm text-lightGray">
{t('TRADE_PAGE.TRADE_TAB_TP_SETTING')}
</div>
Expand All @@ -1445,9 +1443,9 @@ const TradeTab = () => {
{displayedExpectedLongProfit}
</div>

{/* Stop Loss Setting */}
{/* Info: (20230925 - Shirley) Stop Loss Setting */}
<div>
<div className="flex h-25px items-center justify-between">
<div className="flex items-center justify-between">
<div className="text-sm text-lightGray">
{t('TRADE_PAGE.TRADE_TAB_SL_SETTING')}
</div>
Expand All @@ -1457,13 +1455,13 @@ const TradeTab = () => {

{displayedExpectedLongLoss}

{/* Guaranteed stop */}
{/* Info: (20230925 - Shirley) Guaranteed stop */}
{longGuaranteedStop}
</div>
</div>

{/* Long Button */}
<div className="flex justify-center">
{/* Info: (20230925 - Shirley) Long Button */}
<div className={`flex justify-center -mt-14`}>
<RippleButton
disabled={marginWarningLongRef.current || longBtnDisabledRef.current}
onClick={longOrderSubmitHandler}
Expand All @@ -1482,25 +1480,19 @@ const TradeTab = () => {
</div>
</div>

{/* Divider: border-bottom */}
<div className="mt-3 border-b-1px border-lightGray"></div>

{/* Divider between long and short */}
{/* <span
className={`${isDisplayedDividerSpacing} absolute top-420px my-auto h-px w-7/8 rounded bg-white/50`}
></span> */}

{/* ---Short Section--- */}
{/* Info: (20230925 - Shirley) ---Short Section--- */}
<div className="pb-24">
{/* ---custom trading info--- */}
{/* Info: (20230925 - Shirley) ---custom trading info--- */}
<div className="mt-5 flex justify-center text-center text-base tracking-normal">
<div className="w-1/2 space-y-1">
<div className="text-sm text-lightGray">
{t('TRADE_PAGE.TRADE_TAB_REQUIRED_MARGIN')}
</div>
{displayedRequiredMarginShortStyle}
</div>
{/* Left Divider */}
{/* Info: (20230925 - Shirley) Left Divider */}
<div className="mx-2 h-14 justify-center border-r-1px border-lightGray"></div>

<div className="w-1/2 space-y-1">
Expand All @@ -1516,9 +1508,9 @@ const TradeTab = () => {
</div>

<div className="">
{/* Take Profit Setting */}
<div className="h-60px">
<div className="mb-5 mt-3 flex h-25px items-center justify-between">
{/* Info: (20230925 - Shirley) Take Profit Setting */}
<div className="">
<div className="flex items-center justify-between">
<div className="text-sm text-lightGray">
{t('TRADE_PAGE.TRADE_TAB_TP_SETTING')}
</div>
Expand All @@ -1528,9 +1520,9 @@ const TradeTab = () => {
{displayedExpectedShortProfit}
</div>

{/* Stop Loss Setting */}
{/* Info: (20230925 - Shirley) Stop Loss Setting */}
<div>
<div className="flex h-25px items-center justify-between">
<div className="flex items-center justify-between">
<div className="text-sm text-lightGray">
{t('TRADE_PAGE.TRADE_TAB_SL_SETTING')}
</div>
Expand All @@ -1541,13 +1533,13 @@ const TradeTab = () => {

{displayedExpectedShortLoss}

{/* Guaranteed stop */}
{/* Info: (20230925 - Shirley) Guaranteed stop */}
{shortGuaranteedStop}
</div>
</div>

{/* Short Button */}
<div className="flex justify-center">
{/* Info: (20230925 - Shirley) Short Button */}
<div className={`flex justify-center -mt-14`}>
<RippleButton
disabled={marginWarningShortRef.current || shortBtnDisabledRef.current}
onClick={shortOrderSubmitHandler}
Expand Down

0 comments on commit 1862dda

Please sign in to comment.