diff --git a/package.json b/package.json index 20688d5f4..9637afd50 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "@datadog/browser-logs": "^5.23.3", "@dydxprotocol/v4-abacus": "1.13.31", "@dydxprotocol/v4-client-js": "1.12.2", - "@dydxprotocol/v4-localization": "^1.1.245", + "@dydxprotocol/v4-localization": "^1.1.247", "@dydxprotocol/v4-proto": "^7.0.0-dev.0", "@funkit/connect": "^3.4.9", "@emotion/is-prop-valid": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 340b77383..d513a7a17 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,8 +36,8 @@ dependencies: specifier: 1.12.2 version: 1.12.2 '@dydxprotocol/v4-localization': - specifier: ^1.1.245 - version: 1.1.245 + specifier: ^1.1.247 + version: 1.1.247 '@dydxprotocol/v4-proto': specifier: ^7.0.0-dev.0 version: 7.0.0-dev.0 @@ -3320,8 +3320,8 @@ packages: - utf-8-validate dev: false - /@dydxprotocol/v4-localization@1.1.245: - resolution: {integrity: sha512-zOOtVUNVCdXnbI3g2vYSO9YN8OTSGfSST27ewE51sl93qP/4Oa+L/uUz0+P+Nw+qhiIv/7BvlZiGYHLq8epNZw==} + /@dydxprotocol/v4-localization@1.1.247: + resolution: {integrity: sha512-RSs87ZnDw04qSoi/Py10m76hB206dP2sh0zb0HcR5H5rP16QbgRVzoxqiRe6sBfvhCswdpUpsv74WTXASN+ZfA==} dev: false /@dydxprotocol/v4-proto@7.0.0-dev.0: diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx index 517cfa372..c48507b13 100644 --- a/src/components/visx/TimeSeriesChart.tsx +++ b/src/components/visx/TimeSeriesChart.tsx @@ -169,13 +169,27 @@ export const TimeSeriesChart = ({ const [zoomDomainAnimateTo, setZoomDomainAnimateTo] = useState(); + // handle someone changing defaultZoomDomain useEffect(() => { if (defaultZoomDomain) { const clampedZoomDomain = getClampedZoomDomain(defaultZoomDomain); setZoomDomain(clampedZoomDomain); setZoomDomainAnimateTo(clampedZoomDomain); } - }, [defaultZoomDomain, getClampedZoomDomain]); + }, [defaultZoomDomain]); + + // Handle data changing somehow + useEffect(() => { + // hack: if we are zoomed all the way in, it's probably because there was no data before, let's use default + const zoomDomainToUse = + zoomDomain === minZoomDomain ? defaultZoomDomain : zoomDomain ?? defaultZoomDomain ?? null; + + if (zoomDomainToUse) { + const clampedZoomDomain = getClampedZoomDomain(zoomDomainToUse); + setZoomDomain(clampedZoomDomain); + setZoomDomainAnimateTo(clampedZoomDomain); + } + }, [getClampedZoomDomain]); useEffect(() => { onZoom?.({ zoomDomain }); diff --git a/src/constants/tooltips/vault.ts b/src/constants/tooltips/vault.ts index 5ef583cc2..b8023eb5d 100644 --- a/src/constants/tooltips/vault.ts +++ b/src/constants/tooltips/vault.ts @@ -16,4 +16,7 @@ export const vaultTooltips = { 'vault-all-time-pnl': ({ stringGetter }) => ({ body: stringGetter({ key: TOOLTIP_STRING_KEYS.YOUR_ALL_TIME_PNL_BODY }), }), + 'vault-apr': ({ stringGetter }) => ({ + body: stringGetter({ key: TOOLTIP_STRING_KEYS.VAULT_APR_BODY }), + }), } satisfies TooltipStrings; diff --git a/src/pages/vaults/VaultInfoSections.tsx b/src/pages/vaults/VaultInfoSections.tsx index b7b9b8a12..c16a0eb12 100644 --- a/src/pages/vaults/VaultInfoSections.tsx +++ b/src/pages/vaults/VaultInfoSections.tsx @@ -69,7 +69,7 @@ export const YourVaultDetailsCards = ({ className }: { className?: string }) => @@ -166,7 +166,8 @@ export const VaultHeader = ({ className }: { className?: string }) => { const detailItems = [ { key: '30d-apr', - label: stringGetter({ key: STRING_KEYS.VAULT_THIRTY_DAY_APR }), + label: stringGetter({ key: STRING_KEYS.EST_APR_PLAIN }), + tooltip: 'vault-apr' as const, value: , }, { @@ -196,7 +197,9 @@ export const VaultHeader = ({ className }: { className?: string }) => { <$VerticalSeparator />
-
{item.label}
+ +
{item.label}
+
<$DetailValue>{item.value}
diff --git a/src/views/Affiliates/CriteriaDialog.tsx b/src/views/Affiliates/CriteriaDialog.tsx index bbbed38d0..5d0d2fa7d 100644 --- a/src/views/Affiliates/CriteriaDialog.tsx +++ b/src/views/Affiliates/CriteriaDialog.tsx @@ -259,8 +259,7 @@ const CriteriaTable = ({ }, { columnKey: 'affiliate-earn-rate', - allowsSorting: true, - getCellValue: (row: ITierDefinition) => row.affiliateEarnRate, + allowsSorting: false, label: ( {/* {stringGetter({ key: STRING_KEYS.AFFILIATE_COMISSIONS })} */} diff --git a/src/views/forms/TradeForm/TargetLeverageInput.tsx b/src/views/forms/TradeForm/TargetLeverageInput.tsx index 57204a750..fb374263c 100644 --- a/src/views/forms/TradeForm/TargetLeverageInput.tsx +++ b/src/views/forms/TradeForm/TargetLeverageInput.tsx @@ -1,12 +1,10 @@ -import { useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; -import { debounce } from 'lodash'; import { NumberFormatValues } from 'react-number-format'; import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; import { TradeInputField } from '@/constants/abacus'; -import { QUICK_DEBOUNCE_MS } from '@/constants/debounce'; import { STRING_KEYS } from '@/constants/localization'; import { LEVERAGE_DECIMALS } from '@/constants/numbers'; @@ -39,34 +37,22 @@ export const TargetLeverageInput = () => { const [leverage, setLeverage] = useState(targetLeverage?.toString() ?? ''); + useEffect(() => { + setLeverage(targetLeverage?.toString() ?? ''); + }, [targetLeverage]); + const maxLeverage = useMemo(() => { return calculateMarketMaxLeverage({ initialMarginFraction, effectiveInitialMarginFraction }); }, [initialMarginFraction, effectiveInitialMarginFraction]); - // Debounced slightly to avoid excessive updates to Abacus while still providing a smooth slide - const debouncedSetAbacusLeverage = useMemo( - () => - debounce( - (newLeverage: number | string) => - abacusStateManager.setTradeValue({ - value: newLeverage, - field: TradeInputField.targetLeverage, - }), - QUICK_DEBOUNCE_MS - ), - [] - ); - const onSliderDrag = ([newLeverage]: number[]) => { setLeverage(newLeverage!.toString()); - debouncedSetAbacusLeverage(newLeverage!); }; - const onValueCommit = ([newLeverage]: number[]) => { - setLeverage(newLeverage!.toString()); - - // Ensure Abacus is updated with the latest, committed value - debouncedSetAbacusLeverage.cancel(); + const commitLeverage = (newLeverage: number | undefined) => { + if (newLeverage != null) { + setLeverage(newLeverage.toString()); + } abacusStateManager.setTradeValue({ value: newLeverage, @@ -74,6 +60,10 @@ export const TargetLeverageInput = () => { }); }; + const onValueCommit = ([newLeverage]: number[]) => { + commitLeverage(newLeverage); + }; + return ( <$InputContainer> <$WithLabel @@ -107,8 +97,7 @@ export const TargetLeverageInput = () => { value={leverage} max={maxLeverage} onChange={({ floatValue }: NumberFormatValues) => { - setLeverage(floatValue?.toString() ?? ''); - debouncedSetAbacusLeverage(floatValue ?? ''); + commitLeverage(floatValue); }} />