add reward history tooltip

src/constants/localization.ts

@@ -95,8 +95,8 @@ export type TooltipStrings = {
     stringParams?: any;
     urlConfigs?: LinksConfigs;
   }) => {
-    title: string;
-    body: string;
+    title?: string;
+    body?: string;
     learnMoreLink?: string;
   };
 };

src/constants/tooltips/trade.ts

@@ -198,4 +198,7 @@ export const tradeTooltips: TooltipStrings = {
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.UNREALIZED_PNL_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.UNREALIZED_PNL_BODY }),
   }),
+  'reward-history': ({ stringGetter }) => ({
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REWARD_HISTORY_BODY }),
+  }),
 } as const;

src/pages/rewards/RewardHistoryPanel.tsx

@@ -18,6 +18,7 @@ import { ToggleGroup } from '@/components/ToggleGroup';
 import { TradingRewardHistoryTable } from '@/views/tables/TradingRewardHistoryTable';
 
 import abacusStateManager from '@/lib/abacus';
+import { WithTooltip } from '@/components/WithTooltip';
 
 export const RewardHistoryPanel = () => {
   const stringGetter = useStringGetter();
@@ -43,7 +44,9 @@ export const RewardHistoryPanel = () => {
       slotHeader={
         <Styled.Header>
           <Styled.Title>
-            <h3>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY })}</h3>
+            <WithTooltip tooltip="reward-history">
+              <h3>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY })}</h3>
+            </WithTooltip>
             <span>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION })}</span>
           </Styled.Title>
           <ToggleGroup
@@ -86,6 +89,7 @@ Styled.Header = styled.div`
 `;
 
 Styled.Title = styled.div`
+  ${layoutMixins.column}
   color: var(--color-text-0);
   font: var(--font-small-book);