refresh on summary component load + fix rewards layout without migrate

src/constants/abacus.ts

@@ -209,6 +209,9 @@ export const RestrictionType = Abacus.exchange.dydx.abacus.output.Restriction;
 const restrictionTypes = [...RestrictionType.values()] as const;
 export type RestrictionTypes = (typeof restrictionTypes)[number];
 
+// ------ Api data ------ //
+export const ApiData = Abacus.exchange.dydx.abacus.state.manager.ApiData;
+
 // ------ Enum Conversions ------ //
 type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
   ? A

src/lib/abacus/index.ts

@@ -25,6 +25,7 @@ import {
   CoroutineTimer,
   TransferType,
   AbacusAppConfig,
+  ApiData,
 } from '@/constants/abacus';
 
 import { DEFAULT_MARKETID } from '@/constants/markets';
@@ -233,6 +234,9 @@ class AbacusStateManager {
     this.stateManager.historicalTradingRewardPeriod = period;
   };
 
+  refreshHistoricalTradingRewards = () =>
+    this.stateManager.refresh(ApiData.HISTORICAL_TRADING_REWARDS);
+
   switchNetwork = (network: DydxNetwork) => {
     this.stateManager.environmentId = network;
 

src/pages/rewards/RewardsPage.tsx

@@ -36,7 +36,10 @@ const RewardsPage = () => {
           {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
         </Styled.MobileHeader>
       )}
-      <Styled.GridLayout showTradingRewards={testFlags.showTradingRewards}>
+      <Styled.GridLayout
+        showTradingRewards={testFlags.showTradingRewards}
+        showMigratePanel={import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet}
+      >
         {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <Styled.MigratePanel />}
 
         {isTablet ? (
@@ -105,7 +108,7 @@ Styled.MobileHeader = styled.header`
   background-color: var(--color-layer-2);
 `;
 
-Styled.GridLayout = styled.div<{ showTradingRewards?: boolean }>`
+Styled.GridLayout = styled.div<{ showTradingRewards?: boolean; showMigratePanel?: boolean }>`
   --gap: 1.5rem;
   display: grid;
   grid-template-columns: 2fr 1fr;
@@ -115,26 +118,40 @@ Styled.GridLayout = styled.div<{ showTradingRewards?: boolean }>`
     gap: var(--gap);
   }
 
-  grid-template-areas:
-    'migrate migrate'
-    'incentives balance'
-    'other other';
-
-  ${({ showTradingRewards }) =>
-    showTradingRewards &&
-    css`
-      grid-template-areas:
-        'migrate migrate'
-        'incentives balance'
-        'rewards other';
-    `}
+  ${({ showTradingRewards, showMigratePanel }) =>
+    showTradingRewards && showMigratePanel
+      ? css`
+          grid-template-areas:
+            'migrate migrate'
+            'incentives balance'
+            'rewards other';
+        `
+      : showTradingRewards
+      ? css`
+          grid-template-areas: 'incentives balance' 'rewards other';
+        `
+      : showMigratePanel
+      ? css`
+          grid-template-areas: 'migrate migrate' 'incentives balance' 'other other';
+        `
+      : css`
+          grid-template-areas: 'incentives balance' 'other other';
+        `};
 
   @media ${breakpoints.tablet} {
     --gap: 1rem;
     grid-template-columns: 1fr;
-    grid-template-areas:
-      'incentives'
-      'rewards';
+
+    ${({ showTradingRewards }) =>
+      showTradingRewards
+        ? css`
+            grid-template-areas:
+              'incentives'
+              'rewards';
+          `
+        : css`
+            grid-template-areas: 'incentives';
+          `}
   }
 `;
 

src/pages/rewards/TradingRewardsSummaryPanel.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
@@ -12,10 +13,16 @@ import { Panel } from '@/components/Panel';
 
 import { getHistoricalTradingRewardsForCurrentWeek } from '@/state/accountSelectors';
 
+import abacusStateManager from '@/lib/abacus';
+
 export const TradingRewardsSummaryPanel = () => {
   const stringGetter = useStringGetter();
   const { chainTokenLabel } = useTokenConfigs();
-  const currentWeekTradingReward = useSelector(getHistoricalTradingRewardsForCurrentWeek);
+  const currentWeekTradingReward = useSelector(getHistoricalTradingRewardsForCurrentWeek, shallowEqual);
+
+  useEffect(() => {
+    abacusStateManager.refreshHistoricalTradingRewards();
+  }, []);
 
   return !currentWeekTradingReward ? null : (
     <Panel