Skip to content

Commit

Permalink
feat(ohlc): create toggle for ohlc on trade chart (#853)
Browse files Browse the repository at this point in the history
  • Loading branch information
moo-onthelawn authored Jul 24, 2024
1 parent b4d9824 commit fa7e2b4
Show file tree
Hide file tree
Showing 11 changed files with 146 additions and 48 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"@cosmjs/tendermint-rpc": "^0.32.1",
"@dydxprotocol/v4-abacus": "1.8.54",
"@dydxprotocol/v4-client-js": "^1.1.27",
"@dydxprotocol/v4-localization": "^1.1.160",
"@dydxprotocol/v4-localization": "^1.1.163",
"@ethersproject/providers": "^5.7.2",
"@hugocxl/react-to-image": "^0.0.9",
"@js-joda/core": "^5.5.3",
Expand Down
9 changes: 5 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 32 additions & 16 deletions public/configs/v1/env.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-dev-2": {
Expand Down Expand Up @@ -348,7 +349,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-dev-3": {
Expand Down Expand Up @@ -387,7 +389,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-dev-4": {
Expand Down Expand Up @@ -426,7 +429,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-dev-5": {
Expand Down Expand Up @@ -463,7 +467,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-staging": {
Expand Down Expand Up @@ -501,7 +506,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": true
}
},
"dydxprotocol-staging-forced-update": {
Expand Down Expand Up @@ -551,7 +557,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-staging-west": {
Expand Down Expand Up @@ -589,7 +596,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-testnet": {
Expand Down Expand Up @@ -635,7 +643,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-testnet-dydx": {
Expand Down Expand Up @@ -673,7 +682,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-testnet-nodefleet": {
Expand Down Expand Up @@ -712,7 +722,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-testnet-kingnodes": {
Expand Down Expand Up @@ -750,7 +761,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-testnet-liquify": {
Expand Down Expand Up @@ -789,7 +801,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-testnet-polkachu": {
Expand Down Expand Up @@ -828,7 +841,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-testnet-bware": {
Expand Down Expand Up @@ -867,7 +881,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
},
"dydxprotocol-mainnet": {
Expand Down Expand Up @@ -906,7 +921,8 @@
"CCTPWithdrawalOnly": true,
"CCTPDepositOnly": true,
"isSlTpEnabled": true,
"isSlTpLimitOrdersEnabled": false
"isSlTpLimitOrdersEnabled": false,
"isOhlcEnabled": false
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/constants/tooltips/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { generalTooltips } from './general';
import { portfolioTooltips } from './portfolio';
import { stakeTooltips } from './stake';
import { tradeTooltips } from './trade';
import { tradeChartTooltips } from './tradeChart';
import { triggersTooltips } from './triggers';
import { withdrawTooltips } from './withdraw';

Expand All @@ -14,6 +15,7 @@ export const tooltipStrings: TooltipStrings = {
...portfolioTooltips,
...stakeTooltips,
...tradeTooltips,
...tradeChartTooltips,
...triggersTooltips,
...withdrawTooltips,
} as const;
8 changes: 8 additions & 0 deletions src/constants/tooltips/tradeChart.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { TOOLTIP_STRING_KEYS, type TooltipStrings } from '@/constants/localization';

export const tradeChartTooltips: TooltipStrings = {
ohlc: ({ stringGetter }) => ({
title: stringGetter({ key: TOOLTIP_STRING_KEYS.OHLC_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.OHLC_BODY }),
}),
} as const;
19 changes: 10 additions & 9 deletions src/hooks/tradingView/useChartLines.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,15 @@ import { useStringGetter } from '../useStringGetter';

export const useChartLines = ({
tvWidget,
displayButton,
orderLineToggle,
isChartReady,
}: {
tvWidget: TvWidget | null;
displayButton: HTMLElement | null;
orderLineToggle: HTMLElement | null;
isChartReady: boolean;
}) => {
const [showOrderLines, setShowOrderLines] = useState(true);

const [initialWidget, setInitialWidget] = useState<TvWidget | null>(null);
const [lastMarket, setLastMarket] = useState<string | undefined>(undefined);

Expand Down Expand Up @@ -256,22 +257,22 @@ export const useChartLines = ({
// Effects

useEffect(() => {
// Initialize onClick for chart line toggle
if (isChartReady && displayButton) {
displayButton.onclick = () => setShowOrderLines((prev) => !prev);
// Initialize onClick for order line toggle
if (isChartReady && orderLineToggle) {
orderLineToggle.onclick = () => setShowOrderLines((prev) => !prev);
}
}, [isChartReady, displayButton]);
}, [isChartReady, orderLineToggle]);

useEffect(
// Update display button on toggle
() => {
if (showOrderLines) {
displayButton?.classList?.add('order-lines-active');
orderLineToggle?.classList?.add('order-lines-active');
} else {
displayButton?.classList?.remove('order-lines-active');
orderLineToggle?.classList?.remove('order-lines-active');
}
},
[showOrderLines, displayButton?.classList]
[showOrderLines, orderLineToggle?.classList]
);

useEffect(
Expand Down
34 changes: 34 additions & 0 deletions src/hooks/tradingView/useOhlcCandles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useEffect, useState } from 'react';

/**
* @description Hook to handle drawing candles with OHLC or orderbook price
*/

export const useOhlcCandles = ({
ohlcToggle,
isChartReady,
}: {
ohlcToggle: HTMLElement | null;
isChartReady: boolean;
}) => {
const [useOhlc, setUseOhlc] = useState(true);

useEffect(() => {
// Initialize onClick for ohlc toggle
if (isChartReady && ohlcToggle) {
ohlcToggle.onclick = () => setUseOhlc((prev) => !prev);
}
}, [isChartReady, ohlcToggle]);

useEffect(
// Update ohlc button on toggle
() => {
if (useOhlc) {
ohlcToggle?.classList?.add('ohlc-active');
} else {
ohlcToggle?.classList?.remove('ohlc-active');
}
},
[useOhlc, ohlcToggle?.classList]
);
};
Loading

0 comments on commit fa7e2b4

Please sign in to comment.