Merge branch 'tu/abacus-ts-types' into tu/abacus-ts-2

dydxprotocol · Dec 12, 2024 · e27402c · e27402c
2 parents 59a27a0 + 41bb0af
commit e27402c
Show file tree

Hide file tree

Showing 50 changed files with 111 additions and 179 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.13.39",
     "@dydxprotocol/v4-client-js": "1.15.1",
-    "@dydxprotocol/v4-localization": "^1.1.254",
+    "@dydxprotocol/v4-localization": "^1.1.257",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/abacus-ts/lib/createStoreEffect.ts b/src/abacus-ts/lib/createStoreEffect.ts
@@ -10,12 +10,16 @@ export function createStoreEffect<T>(
   let lastValue = selector(store.getState());
   let lastCleanup = handleChange(lastValue);
 
-  return store.subscribe(() => {
+  const removeStoreListener = store.subscribe(() => {
     const thisValue = selector(store.getState());
     if (thisValue !== lastValue) {
       lastCleanup?.();
       lastValue = thisValue;
       lastCleanup = handleChange(thisValue);
     }
   });
+  return () => {
+    lastCleanup?.();
+    removeStoreListener();
+  };
 }
diff --git a/src/abacus-ts/rest/blockTradingRewards.ts b/src/abacus-ts/rest/blockTradingRewards.ts
@@ -37,6 +37,7 @@ export function setUpBlockTradingRewardsQuery(store: RootStore) {
         })
       );
     },
+    onNoQuery: () => store.dispatch(setAccountBlockTradingRewardsRaw(loadableIdle())),
   });
 
   return () => {

diff --git a/src/abacus-ts/rest/fills.ts b/src/abacus-ts/rest/fills.ts
@@ -31,6 +31,7 @@ export function setUpFillsQuery(store: RootStore) {
         })
       );
     },
+    onNoQuery: () => store.dispatch(setAccountFillsRaw(loadableIdle())),
   });
   return () => {
     cleanupListener();

diff --git a/src/abacus-ts/rest/lib/indexerQueryStoreEffect.ts b/src/abacus-ts/rest/lib/indexerQueryStoreEffect.ts
@@ -28,6 +28,7 @@ type QuerySetupConfig<T, R> = {
   getQueryKey: (selectorResult: NoInfer<T>) => any[];
   getQueryFn: (client: IndexerClient, selectorResult: NoInfer<T>) => (() => Promise<R>) | null;
   onResult: (result: NoInfer<QueryObserverResult<R, Error>>) => void;
+  onNoQuery: () => void;
 } & PassedQueryOptions<R>;
 
 const baseOptions: PassedQueryOptions<any> = {
@@ -61,6 +62,7 @@ export function createIndexerQueryStoreEffect<T, R>(
     const queryFn = config.getQueryFn(indexerClient, queryData);
     if (!queryFn) {
       IndexerClientManager.markDone(indexerClientConfig);
+      config.onNoQuery();
       return undefined;
     }
 

diff --git a/src/abacus-ts/rest/orders.ts b/src/abacus-ts/rest/orders.ts
@@ -46,6 +46,7 @@ export function setUpOrdersQuery(store: RootStore) {
         })
       );
     },
+    onNoQuery: () => store.dispatch(setAccountOrdersRaw(loadableIdle())),
   });
   return () => {
     cleanupListener();

diff --git a/src/abacus-ts/rest/transfers.ts b/src/abacus-ts/rest/transfers.ts
@@ -35,6 +35,7 @@ export function setUpTransfersQuery(store: RootStore) {
         })
       );
     },
+    onNoQuery: () => store.dispatch(setAccountTransfersRaw(loadableIdle())),
   });
 
   return () => {

diff --git a/src/abacus-ts/websocket/parentSubaccount.ts b/src/abacus-ts/websocket/parentSubaccount.ts
@@ -59,14 +59,14 @@ function freshChildSubaccount({
 function accountWebsocketValue(
   websocket: IndexerWebsocket,
   address: string,
-  parentSubaccount: string,
+  parentSubaccountNumber: string,
   onChange: (val: Loadable<ParentSubaccountData>) => void
 ) {
   return new WebsocketDerivedValue<Loadable<ParentSubaccountData>>(
     websocket,
     {
       channel: 'v4_parent_subaccounts',
-      id: `${address}/${parentSubaccount}`,
+      id: `${address}/${parentSubaccountNumber}`,
       handleBaseData: (baseMessage) => {
         const message = isWsParentSubaccountSubscribed(baseMessage);
         accountRefreshSignal.notify();

diff --git a/src/components/DetailsDialog.tsx b/src/components/DetailsDialog.tsx
@@ -36,8 +36,6 @@ export const DetailsDialog = ({ slotIcon, title, items, slotFooter, setIsOpen }:
 };
 const $Content = styled.div`
   ${layoutMixins.expandingColumnWithStickyFooter}
-  --stickyFooterBackdrop-outsetX: var(--dialog-paddingX);
-  --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom);
   gap: 1rem;
 `;
 const $Footer = styled.footer`

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -412,6 +412,7 @@ const $Header = styled.header<{ $withBorder: boolean; $withBlur: boolean }>`
       --stickyArea-backdropFilter: none;
     `};
 `;
+
 const $StackedHeaderTopRow = styled.div<{ $withBorder: boolean; $withBlur: boolean }>`
   ${layoutMixins.flexColumn}
   align-items: center;
@@ -452,6 +453,7 @@ const $Content = styled.div`
 
   isolation: isolate;
 `;
+
 const $Close = styled(Close)<{ $absolute?: boolean }>`
   width: 0.7813rem;
   height: 0.7813rem;
@@ -509,8 +511,6 @@ const $Description = tw(Description)`mt-0.5 text-color-text-0 font-base-book`;
 const $Footer = styled.footer<{ $withBorder: boolean }>`
   display: grid;
   ${layoutMixins.stickyFooter}
-  ${layoutMixins.withStickyFooterBackdrop}
-  --stickyFooterBackdrop-outsetX: var(--dialog-paddingX);
 
   ${({ $withBorder }) =>
     $withBorder &&

diff --git a/src/components/DropdownHeaderMenu.tsx b/src/components/DropdownHeaderMenu.tsx
@@ -65,7 +65,6 @@ export const DropdownHeaderMenu = <MenuItemValue extends string>({
 };
 const $Trigger = styled(Trigger)`
   ${popoverMixins.trigger}
-  ${popoverMixins.backdropOverlay}
 
   --trigger-padding: 0.33rem 0.5rem;
   --trigger-textColor: var(--color-text-2);

diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
@@ -124,7 +124,6 @@ const $Item = styled(Item)<{ $highlightColor?: 'accent' | 'create' | 'destroy' }
 
 const $Trigger = styled(Trigger)`
   ${popoverMixins.trigger}
-  ${popoverMixins.backdropOverlay}
 `;
 
 const $DropdownIcon = styled.span`

diff --git a/src/components/DropdownSelectMenu.tsx b/src/components/DropdownSelectMenu.tsx
@@ -126,7 +126,6 @@ const $Trigger = styled(Trigger)`
   gap: 1rem;
 
   ${popoverMixins.trigger}
-  ${popoverMixins.backdropOverlay}
 `;
 
 const $DropdownIcon = styled.span`

diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
@@ -285,7 +285,6 @@ const $Viewport = styled(Viewport)`
 
   &[data-orientation='vertical'] {
     left: 100%;
-    /* top: 100%; */
   }
 `;
 
@@ -312,11 +311,6 @@ const $Content = styled(Content)`
     max-height: 100vh;
 
     ${$List}[data-orientation="horizontal"] & {
-      /* position: absolute;
-      top: calc(100% + var(--submenu-side-offset));
-      left: 50%;
-      right: 50%; */
-
       position: relative;
       width: 0;
       left: 50%;

diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
@@ -82,7 +82,6 @@ export const Popover = ({
   );
 };
 const $Trigger = styled(Trigger)<{ $noBlur?: boolean; $triggerType: TriggerType }>`
-  ${popoverMixins.backdropOverlay}
   ${popoverMixins.trigger}
 
   ${({ $triggerType }) =>

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -321,14 +321,11 @@ const $Content = styled(Content)<{ $hide?: boolean; $withTransitions: boolean }>
     pointer-events: none;
   }
 
-  &[data-state='active'] {
-    z-index: var(--activeTab-zIndex);
-  }
-
   ${({ $hide }) =>
     $hide &&
     css`
       display: none;
+      opacity: 0;
     `}
 
   @media (prefers-reduced-motion: no-preference) {
@@ -340,7 +337,6 @@ const $Content = styled(Content)<{ $hide?: boolean; $withTransitions: boolean }>
             from {
               translate: 0 -0.25rem -1.5rem;
               opacity: 0;
-              /* filter: blur(3px); */
             }
           `} 0.2s var(--ease-out-expo);
         }
@@ -352,7 +348,6 @@ const $Content = styled(Content)<{ $hide?: boolean; $withTransitions: boolean }>
             to {
               translate: 0 -0.25rem -1.5rem;
               opacity: 0;
-              /* filter: blur(3px); */
             }
           `} 0.2s var(--ease-out-expo);
         }
@@ -366,6 +361,7 @@ const $DropdownTabTrigger = styled(Trigger)<{
   ${tabMixins.tabTriggerStyle}
   height: 100%;
   width: 100%;
+  --trigger-hover-filter: none;
 
   ${({ $withUnderline }) =>
     $withUnderline &&

diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
@@ -138,23 +138,17 @@ const $Root = styled(Root)`
       animation:
         ${keyframes`
           from {
-            /* scale: 0; */
             grid-template-rows: 0fr; // height transition
-            /* grid-template-rows: 0fr 0fr; // height transition */
-
             margin-top: calc(-1 * var(--toasts-gap));
           }
         `} var(--toast-transition-duration) var(--ease-out-expo),
         ${keyframes`
           from {
             opacity: 0;
-            /* filter: blur(1px); */
           }
         `} var(--toast-transition-duration) var(--ease-out-expo),
         ${keyframes`
           33% {
-            /* scale: 1.05; */
-            /* filter: brightness(120%); */
             filter: drop-shadow(0 0 var(--color-text-0));
           }
         `} calc(var(--toast-transition-duration) * 3) 0.1s;

diff --git a/src/constants/tooltips/vault.ts b/src/constants/tooltips/vault.ts
@@ -16,7 +16,8 @@ export const vaultTooltips = {
   'vault-all-time-pnl': ({ stringGetter }) => ({
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.YOUR_ALL_TIME_PNL_BODY }),
   }),
-  'vault-apr': ({ stringGetter }) => ({
+  'vault-apr': ({ stringGetter, urlConfigs }) => ({
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.VAULT_APR_BODY }),
+    learnMoreLink: urlConfigs?.vaultLearnMore,
   }),
 } satisfies TooltipStrings;
diff --git a/src/constants/wallets.ts b/src/constants/wallets.ts
@@ -186,7 +186,6 @@ export const KEPLR_MIPD_RDNS = 'app.keplr';
 export const COINBASE_MIPD_RDNS = 'com.coinbase.wallet';
 export const METAMASK_MIPD_RDNS = 'io.metamask';
 
-export const METAMASK_DOWNLOAD_LINK = 'https://metamask.io/download/';
 export const PHANTOM_DOWNLOAD_LINK = 'https://phantom.app/download';
 export const KEPLR_DOWNLOAD_LINK = 'https://www.keplr.app/get';
-Original file line number
+Diff line change
@@ Expand Up @@
             })
           );
         },
+        onNoQuery: () => store.dispatch(setAccountBlockTradingRewardsRaw(loadableIdle())),
       });
       return () => {
@@ Expand Down @@