display dynamic fee without input (Kwenta#1700)

* Show dynamic fee without input * Cleaned the code * Changed the way to add dynamic fee * Removed unnecessary code * Cleaned the code
candlenetwork · Dec 1, 2022 · 34d8e87 · 34d8e87
1 parent 49ca713
commit 34d8e87
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 33 deletions.
diff --git a/hooks/useFuturesData.ts b/hooks/useFuturesData.ts
@@ -47,6 +47,7 @@ import {
 	isAdvancedOrderState,
 	aboveMaxLeverageState,
 	crossMarginAccountOverviewState,
+	dynamicFeeRateState,
 } from 'store/futures';
 import { computeMarketFee } from 'utils/costCalculations';
 import { zeroBN, floorNumber, weiToString } from 'utils/formatters/number';
@@ -92,6 +93,7 @@ const useFuturesData = () => {
 		crossMarginMarginDeltaState
 	);
 	const [tradeFees, setTradeFees] = useRecoilState(tradeFeesState);
+	const [dynamicFeeRate, setDynamicFeeRate] = useRecoilState(dynamicFeeRateState);
 	const leverageSide = useRecoilValue(leverageSideState);
 	const [orderType, setOrderType] = useRecoilState(orderTypeState);
 	const feeCap = useRecoilValue(orderFeeCapState);
@@ -225,42 +227,22 @@ const useFuturesData = () => {
 
 	const totalFeeRate = useCallback(
 		async (sizeDelta: Wei) => {
-			const [dynamicFeeRate] = await Promise.all([
-				synthetixjs.contracts.Exchanger.dynamicFeeRateForExchange(
-					ethers.utils.formatBytes32String('sUSD'),
-					ethers.utils.formatBytes32String(marketAsset)
-				),
-			]);
 			const staticRate = computeMarketFee(market, sizeDelta);
 
-			let total = crossMarginTradeFee
-				.add(dynamicFeeRate.feeRate)
-				.add(staticRate)
-				.add(advancedOrderFeeRate);
+			let total = crossMarginTradeFee.add(dynamicFeeRate).add(staticRate).add(advancedOrderFeeRate);
 
 			return total;
 		},
-		[
-			market,
-			marketAsset,
-			crossMarginTradeFee,
-			advancedOrderFeeRate,
-			synthetixjs.contracts.Exchanger,
-		]
+		[market, crossMarginTradeFee, dynamicFeeRate, advancedOrderFeeRate]
 	);
 
 	const calculateFees = useCallback(
 		async (susdSizeDelta: Wei, nativeSizeDelta: Wei) => {
 			if (!synthetixjs) return ZERO_FEES;
 
-			const volatilityFeeRate = await synthetixjs.contracts.Exchanger.dynamicFeeRateForExchange(
-				ethers.utils.formatBytes32String('sUSD'),
-				ethers.utils.formatBytes32String(marketAsset)
-			);
-			const volatilityFeeWei = wei(volatilityFeeRate.feeRate);
 			const susdSize = susdSizeDelta.abs();
 			const staticRate = computeMarketFee(market, nativeSizeDelta);
-			const tradeFee = susdSize.mul(staticRate).add(susdSize.mul(volatilityFeeWei));
+			const tradeFee = susdSize.mul(staticRate).add(susdSize.mul(dynamicFeeRate));
 
 			const currentDeposit =
 				orderType === 'limit' || orderType === 'stop market'
@@ -278,7 +260,7 @@ const useFuturesData = () => {
 			const fees = {
 				staticFee: tradeFeeWei,
 				crossMarginFee: crossMarginFee,
-				dynamicFeeRate: volatilityFeeWei,
+				dynamicFeeRate,
 				keeperEthDeposit: requiredDeposit,
 				limitStopOrderFee: limitStopOrderFee,
 				total: tradeFeeWei.add(crossMarginFee).add(limitStopOrderFee),
@@ -287,15 +269,15 @@ const useFuturesData = () => {
 			return fees;
 		},
 		[
-			crossMarginTradeFee,
-			selectedAccountType,
-			marketAsset,
 			synthetixjs,
-			orderType,
 			market,
+			dynamicFeeRate,
+			orderType,
+			getCrossMarginEthBal,
+			selectedAccountType,
+			crossMarginTradeFee,
 			calculateCrossMarginFee,
 			setTradeFees,
-			getCrossMarginEthBal,
 		]
 	);
 
@@ -624,6 +606,18 @@ const useFuturesData = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dispatch, router.query.accountType]);
 
+	useEffect(() => {
+		const getDynamicFee = async () => {
+			if (!synthetixjs) return;
+			const dynamicFeeRate = await synthetixjs.contracts.Exchanger.dynamicFeeRateForExchange(
+				ethers.utils.formatBytes32String('sUSD'),
+				ethers.utils.formatBytes32String(marketAsset)
+			);
+			setDynamicFeeRate(wei(dynamicFeeRate.feeRate));
+		};
+		getDynamicFee();
+	}, [marketAsset, setDynamicFeeRate, synthetixjs]);
+
 	return {
 		onLeverageChange,
 		onTradeAmountChange,

diff --git a/sections/futures/FeeInfoBox/FeeInfoBox.tsx b/sections/futures/FeeInfoBox/FeeInfoBox.tsx
@@ -15,13 +15,15 @@ import {
 	sizeDeltaState,
 	futuresAccountTypeState,
 	crossMarginSettingsState,
+	dynamicFeeRateState,
 } from 'store/futures';
 import { computeNPFee, computeMarketFee } from 'utils/costCalculations';
 import { formatCurrency, formatDollars, formatPercent, zeroBN } from 'utils/formatters/number';
 
 const FeeInfoBox: React.FC = () => {
 	const orderType = useRecoilValue(orderTypeState);
 	const fees = useRecoilValue(tradeFeesState);
+	const dynamicFeeRate = useRecoilValue(dynamicFeeRateState);
 	const sizeDelta = useRecoilValue(sizeDeltaState);
 	const accountType = useRecoilValue(futuresAccountTypeState);
 	const { tradeFee: crossMarginTradeFee, limitOrderFee, stopOrderFee } = useRecoilValue(
@@ -57,17 +59,17 @@ const FeeInfoBox: React.FC = () => {
 		() => (
 			<>
 				{formatPercent(staticRate ?? zeroBN)}
-				{fees.dynamicFeeRate?.gt(0) && (
+				{dynamicFeeRate?.gt(0) && (
 					<>
 						{' + '}
 						<ToolTip>
-							<StyledDynamicFee>{formatPercent(fees.dynamicFeeRate)}</StyledDynamicFee>
+							<StyledDynamicFee>{formatPercent(dynamicFeeRate)}</StyledDynamicFee>
 						</ToolTip>
 					</>
 				)}
 			</>
 		),
-		[staticRate, fees.dynamicFeeRate]
+		[staticRate, dynamicFeeRate]
 	);
 
 	const feesInfo = useMemo<Record<string, DetailedInfo | null | undefined>>(() => {

diff --git a/store/futures/index.ts b/store/futures/index.ts
@@ -215,7 +215,7 @@ export const tradeFeesState = atom<TradeFees>({
 
 export const dynamicFeeRateState = atom({
 	key: getFuturesKey('dynamicFeeRate'),
-	default: null,
+	default: zeroBN,
 });
 
 export const leverageValueCommittedState = atom({