fix: misc fixes (#1295)

dydxprotocol · Nov 15, 2024 · e8a8243 · e8a8243
1 parent fe84e82
commit e8a8243
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 36 deletions.
diff --git 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
diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx
@@ -169,13 +169,27 @@ export const TimeSeriesChart = <Datum extends {}>({
 
   const [zoomDomainAnimateTo, setZoomDomainAnimateTo] = useState<number | undefined>();
 
+  // 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
@@ -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
@@ -69,7 +69,7 @@ export const YourVaultDetailsCards = ({ className }: { className?: string }) =>
               <Output
                 value={myVaultMetadata.allTimeReturnUsdc}
                 type={OutputType.Fiat}
-                fractionDigits={0}
+                fractionDigits={Math.abs(myVaultMetadata.allTimeReturnUsdc) < 1 ? 2 : 0}
               />
             </div>
           </$ColoredReturn>
@@ -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: <MegaVaultYieldOutput />,
     },
     {
@@ -196,7 +197,9 @@ export const VaultHeader = ({ className }: { className?: string }) => {
           <React.Fragment key={item.key}>
             <$VerticalSeparator />
             <div key={item.key} tw="flexColumn gap-0.375 px-0.5 py-0.25 font-base-book">
-              <div tw="text-color-text-0">{item.label}</div>
+              <WithTooltip tooltip={item.tooltip} side="bottom">
+                <div tw="text-color-text-0">{item.label}</div>
+              </WithTooltip>
               <$DetailValue>{item.value}</$DetailValue>
             </div>
           </React.Fragment>

diff --git 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: (
         <WithTooltip tooltip="affiliate-commissions" side="right">
           {/* {stringGetter({ key: STRING_KEYS.AFFILIATE_COMISSIONS })} */}

diff --git 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,41 +37,33 @@ 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,
       field: TradeInputField.targetLeverage,
     });
   };
 
+  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);
           }}
         />
       </$InnerInputContainer>