address nits

src/constants/localization.ts

@@ -96,7 +96,7 @@ export type TooltipStrings = {
     urlConfigs?: LinksConfigs;
   }) => {
     title?: string;
-    body?: string;
+    body: string;
     learnMoreLink?: string;
   };
 };

src/lib/abacus/index.ts

@@ -3,15 +3,14 @@ import type { LocalWallet } from '@dydxprotocol/v4-client-js';
 import type {
   ClosePositionInputFields,
   Nullable,
+  HistoricaTradingRewardsPeriod,
+  HistoricaTradingRewardsPeriods,
   HumanReadablePlaceOrderPayload,
   HumanReadableCancelOrderPayload,
   TradeInputFields,
   TransferInputFields,
   HistoricalPnlPeriods,
   ParsingError,
-  HistoricaTradingRewardsPeriods,
-  HistoricaTradingRewardsPeriod,
-  HistoricalTradingReward,
 } from '@/constants/abacus';
 
 import {
@@ -36,8 +35,6 @@ import type { RootStore } from '@/state/_store';
 import { setTradeFormInputs } from '@/state/inputs';
 import { getInputTradeOptions, getTransferInputs } from '@/state/inputsSelectors';
 
-import { testFlags } from '@/lib/testFlags';
-
 import AbacusRest from './rest';
 import AbacusAnalytics from './analytics';
 import AbacusWebsocket from './websocket';

src/pages/rewards/RewardHistoryPanel.tsx

@@ -1,8 +1,6 @@
 import { useCallback, useState } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 
-import breakpoints from '@/styles/breakpoints';
-import { layoutMixins } from '@/styles/layoutMixins';
 import { useStringGetter } from '@/hooks';
 
 import {
@@ -12,13 +10,15 @@ import {
 } from '@/constants/abacus';
 
 import { STRING_KEYS } from '@/constants/localization';
+import breakpoints from '@/styles/breakpoints';
+import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Panel } from '@/components/Panel';
 import { ToggleGroup } from '@/components/ToggleGroup';
+import { WithTooltip } from '@/components/WithTooltip';
 import { TradingRewardHistoryTable } from '@/views/tables/TradingRewardHistoryTable';
 
 import abacusStateManager from '@/lib/abacus';
-import { WithTooltip } from '@/components/WithTooltip';
 
 export const RewardHistoryPanel = () => {
   const stringGetter = useStringGetter();

src/pages/rewards/TradingRewardsSummaryPanel.tsx

@@ -22,55 +22,51 @@ export const TradingRewardsSummaryPanel = () => {
   );
   const currentWeekTradingReward = currentWeekTradingRewards?.firstOrNull();
 
-  return (
-    currentWeekTradingReward && (
-      <Panel
-        slotHeader={
-          <Styled.Header>
-            {stringGetter({ key: STRING_KEYS.TRADING_REWARDS_SUMMARY })}
-          </Styled.Header>
-        }
-      >
-        <Styled.Content>
-          <Styled.TradingRewardsDetails
-            layout="grid"
-            items={[
-              {
-                key: 'week',
-                label: (
-                  <Styled.Label>
-                    <h4>{stringGetter({ key: STRING_KEYS.THIS_WEEK })}</h4>
-                  </Styled.Label>
-                ),
-                value: (
-                  <Styled.Column>
+  return !currentWeekTradingReward ? null : (
+    <Panel
+      slotHeader={
+        <Styled.Header>{stringGetter({ key: STRING_KEYS.TRADING_REWARDS_SUMMARY })}</Styled.Header>
+      }
+    >
+      <Styled.Content>
+        <Styled.TradingRewardsDetails
+          layout="grid"
+          items={[
+            {
+              key: 'week',
+              label: (
+                <Styled.Label>
+                  <h4>{stringGetter({ key: STRING_KEYS.THIS_WEEK })}</h4>
+                </Styled.Label>
+              ),
+              value: (
+                <Styled.Column>
+                  <Output
+                    slotRight={<Styled.AssetIcon symbol={chainTokenLabel} />}
+                    type={OutputType.Asset}
+                    value={currentWeekTradingReward.amount}
+                  />
+                  <Styled.TimePeriod>
                     <Output
-                      slotRight={<Styled.AssetIcon symbol={chainTokenLabel} />}
-                      type={OutputType.Asset}
-                      value={currentWeekTradingReward.amount}
+                      type={OutputType.Date}
+                      value={currentWeekTradingReward.startedAtInMilliseconds}
+                      timeOptions={{ useUTC: true }}
                     />
-                    <Styled.TimePeriod>
-                      <Output
-                        type={OutputType.Date}
-                        value={currentWeekTradingReward.startedAtInMilliseconds}
-                        timeOptions={{ useUTC: true }}
-                      />
-                      →
-                      <Output
-                        type={OutputType.Date}
-                        value={currentWeekTradingReward.endedAtInMilliseconds}
-                        timeOptions={{ useUTC: true }}
-                      />
-                    </Styled.TimePeriod>
-                  </Styled.Column>
-                ),
-              },
-              // TODO(@aforaleka): add all-time when supported
-            ]}
-          />
-        </Styled.Content>
-      </Panel>
-    )
+                    →
+                    <Output
+                      type={OutputType.Date}
+                      value={currentWeekTradingReward.endedAtInMilliseconds}
+                      timeOptions={{ useUTC: true }}
+                    />
+                  </Styled.TimePeriod>
+                </Styled.Column>
+              ),
+            },
+            // TODO(@aforaleka): add all-time when supported
+          ]}
+        />
+      </Styled.Content>
+    </Panel>
   );
 };
 

src/state/accountSelectors.ts

@@ -1,3 +1,4 @@
+import type { Nullable, kollections } from '@dydxprotocol/v4-abacus';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { createSelector } from 'reselect';
 
@@ -365,8 +366,13 @@ export const getHistoricalTradingRewards = (state: RootState) =>
  * @returns account historical trading rewards for the specified perid
  */
 export const getHistoricalTradingRewardsForPeriod = (period: string) =>
-  createSelector([getHistoricalTradingRewards], (historicalTradingRewards: any) =>
-    historicalTradingRewards?.get(period)
+  createSelector(
+    [getHistoricalTradingRewards],
+    (
+      historicalTradingRewards: Nullable<
+        kollections.Map<string, kollections.List<HistoricalTradingReward>>
+      >
+    ) => historicalTradingRewards?.get(period)
   );
 
 /**

src/views/tables/TradingRewardHistoryTable.tsx

@@ -1,7 +1,7 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
-import { HistoricaTradingRewardsPeriods } from '@/constants/abacus';
+import { HistoricaTradingRewardsPeriods, HistoricalTradingReward } from '@/constants/abacus';
 import { STRING_KEYS, StringGetterFunction } from '@/constants/localization';
 import { useStringGetter, useTokenConfigs } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -25,7 +25,7 @@ const getTradingRewardHistoryTableColumnDef = ({
   key: TradingRewardHistoryTableColumnKey;
   chainTokenLabel: string;
   stringGetter: StringGetterFunction;
-}): ColumnDef<any> => ({
+}): ColumnDef<HistoricalTradingReward> => ({
   ...(
     {
       [TradingRewardHistoryTableColumnKey.Event]: {
@@ -72,7 +72,7 @@ const getTradingRewardHistoryTableColumnDef = ({
           />
         ),
       },
-    } as Record<TradingRewardHistoryTableColumnKey, ColumnDef<any>>
+    } as Record<TradingRewardHistoryTableColumnKey, ColumnDef<HistoricalTradingReward>>
   )[key],
 });