localize trading reward strings

package.json

@@ -41,7 +41,7 @@
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/v4-abacus": "^1.1.33",
     "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.9",
+    "@dydxprotocol/v4-localization": "^1.1.12",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

pnpm-lock.yaml

@@ -29,8 +29,8 @@ dependencies:
     specifier: ^1.0.11
     version: 1.0.11
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.9
-    version: 1.1.9
+    specifier: ^1.1.12
+    version: 1.1.12
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1019,8 +1019,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.9:
-    resolution: {integrity: sha512-3wvgiX7Phq20Rd4JWx1qzLl8mNw5AaTAvCa9Inos7U6oPmPOTnsajHHgsEJSKjBkmcCZsl+sSbf5o6rW9cr0UA==}
+  /@dydxprotocol/v4-localization@1.1.12:
+    resolution: {integrity: sha512-Mn6Nuosb2nwvxWMviz4emzyoxIOOkI3XJjzateBbOv++tXPxnbLtCLFOU6mMdUk5ZwFnjgb5SEFypXH69cw+xg==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.4.1:

src/pages/rewards/RewardHistoryPanel.tsx

@@ -19,6 +19,7 @@ import { TradingRewardHistoryTable } from '@/views/tables/TradingRewardHistoryTa
 
 import { getHistoricalTradingRewards } from '@/state/accountSelectors';
 import abacusStateManager from '@/lib/abacus';
+import { STRING_KEYS } from '@/constants/localization';
 
 export const RewardHistoryPanel = () => {
   const stringGetter = useStringGetter();
@@ -44,22 +45,22 @@ export const RewardHistoryPanel = () => {
       slotHeader={
         <Styled.Header>
           <Styled.Title>
-            <h3>Reward History</h3>
-            <span>Rewards are distrubted after every block.</span>
+            <h3>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY })}</h3>
+            <span>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION })}</span>
           </Styled.Title>
           <ToggleGroup
             items={[
               {
                 value: HistoricaTradingRewardsPeriod.MONTHLY.name,
-                label: 'Monthly',
+                label: stringGetter({ key: STRING_KEYS.MONTHLY }),
               },
               {
                 value: HistoricaTradingRewardsPeriod.WEEKLY.name,
-                label: 'Weekly',
+                label: stringGetter({ key: STRING_KEYS.WEEKLY }),
               },
               {
                 value: HistoricaTradingRewardsPeriod.DAILY.name,
-                label: 'Daily',
+                label: stringGetter({ key: STRING_KEYS.DAILY }),
               },
             ]}
             value={selectedPeriod.name}

src/pages/rewards/RewardsHelpPanel.tsx

@@ -30,18 +30,16 @@ export const RewardsHelpPanel = () => {
       <Accordion
         items={[
           {
-            header: 'Who is eligible for trading rewards?',
-            content: 'All traders are eligible for trading rewards.',
+            header: stringGetter({ key: STRING_KEYS.FAQ_WHO_IS_ELIGIBLE_QUESTION }),
+            content: stringGetter({ key: STRING_KEYS.FAQ_WHO_IS_ELIGIBLE_ANSWER }),
           },
           {
-            header: 'How do trading rewards work?',
-            content:
-              'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
+            header: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_TRADING_REWARDS_WORK_QUESTION }),
+            content: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_TRADING_REWARDS_WORK_ANSWER }),
           },
           {
-            header: 'How do I claim my rewards?',
-            content:
-              'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
+            header: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_QUESTION }),
+            content: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_ANSWER }),
           },
         ]}
       />

src/views/tables/TradingRewardHistoryTable.tsx

@@ -2,7 +2,8 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import { HistoricaTradingRewardsPeriods } from '@/constants/abacus';
-import { useTokenConfigs } from '@/hooks';
+import { STRING_KEYS, StringGetterFunction } from '@/constants/localization';
+import { useStringGetter, useTokenConfigs } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { AssetIcon } from '@/components/AssetIcon';
@@ -19,9 +20,11 @@ export enum TradingRewardHistoryTableColumnKey {
 const getTradingRewardHistoryTableColumnDef = ({
   key,
   chainTokenLabel,
+  stringGetter,
 }: {
   key: TradingRewardHistoryTableColumnKey;
   chainTokenLabel: string;
+  stringGetter: StringGetterFunction;
 }): ColumnDef<any> => ({
   ...(
     {
@@ -31,20 +34,28 @@ const getTradingRewardHistoryTableColumnDef = ({
         label: 'Event',
         renderCell: ({ startedAtInMilliseconds, endedAtInMilliseconds }) => (
           <TableCell stacked>
-            <Styled.Rewarded>Rewarded</Styled.Rewarded>
+            <Styled.Rewarded>{stringGetter({ key: STRING_KEYS.REWARDED })}</Styled.Rewarded>
             <Styled.TimePeriod>
-              For trading
-              <Output
-                type={OutputType.Date}
-                value={startedAtInMilliseconds}
-                timeOptions={{ useUTC: true }}
-              />
-              →
-              <Output
-                type={OutputType.Date}
-                value={endedAtInMilliseconds}
-                timeOptions={{ useUTC: true }}
-              />
+              {stringGetter({
+                key: STRING_KEYS.FOR_TRADING,
+                params: {
+                  PERIOD: (
+                    <>
+                      <Output
+                        type={OutputType.Date}
+                        value={startedAtInMilliseconds}
+                        timeOptions={{ useUTC: true }}
+                      />
+                      →
+                      <Output
+                        type={OutputType.Date}
+                        value={endedAtInMilliseconds}
+                        timeOptions={{ useUTC: true }}
+                      />
+                    </>
+                  ),
+                },
+              })}
             </Styled.TimePeriod>
           </TableCell>
         ),
@@ -52,7 +63,7 @@ const getTradingRewardHistoryTableColumnDef = ({
       [TradingRewardHistoryTableColumnKey.Earned]: {
         columnKey: TradingRewardHistoryTableColumnKey.Earned,
         getCellValue: (row) => row.amount,
-        label: 'Earned',
+        label: stringGetter({ key: STRING_KEYS.EARNED }),
         renderCell: ({ amount }) => (
           <Output
             type={OutputType.Asset}
@@ -81,6 +92,7 @@ export const TradingRewardHistoryTable = ({
   withOuterBorder,
   withInnerBorders = true,
 }: ElementProps & StyleProps) => {
+  const stringGetter = useStringGetter();
   const historicalTradingRewards = useSelector(getHistoricalTradingRewards, shallowEqual);
   const periodTradingRewards = historicalTradingRewards?.get(period.name) ?? [];
   const { chainTokenLabel } = useTokenConfigs();
@@ -94,6 +106,7 @@ export const TradingRewardHistoryTable = ({
         getTradingRewardHistoryTableColumnDef({
           key,
           chainTokenLabel,
+          stringGetter,
         })
       )}
       selectionBehavior="replace"