show trading rewards in testnet

package.json

@@ -42,7 +42,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.4.2",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.28",
+    "@dydxprotocol/v4-localization": "^1.1.29",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 overrides:
   follow-redirects: 1.15.3
 
@@ -36,8 +32,8 @@ dependencies:
     specifier: ^1.0.20
     version: 1.0.20
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.28
-    version: 1.1.28
+    specifier: ^1.1.29
+    version: 1.1.29
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1323,8 +1319,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.28:
-    resolution: {integrity: sha512-R8hGDbJvZb9HsI0jwYIYDS3aNM3T0aLlXOnogihGrRRibZs874XJy5fCGBW2aRXAyDu56nbjkyuOAQCkF3KP1Q==}
+  /@dydxprotocol/v4-localization@1.1.29:
+    resolution: {integrity: sha512-o9lxsYl5ObqO9OUyxiKuUxoBmYZk0qGDeNxGScY8uMRq4Ahhz3BPxAC7jUYypCNAMpieiQjVGxMnnhIbwEkm2w==}
     dev: false
 
   /@dydxprotocol/v4-proto@4.0.0-dev.0:
@@ -16053,3 +16049,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/constants/dialogs.ts

@@ -10,7 +10,6 @@ export enum DialogTypes {
   Help = 'Help',
   ExternalNavKeplr = 'ExternalNavKeplr',
   MnemonicExport = 'MnemonicExport',
-  MobileDownload = 'MobileDownload',
   MobileSignIn = 'MobileSignIn',
   Onboarding = 'Onboarding',
   OrderDetails = 'OrderDetails',

src/layout/DialogManager.tsx

@@ -62,7 +62,6 @@ export const DialogManager = () => {
     [DialogTypes.ExternalLink]: <ExternalLinkDialog {...modalProps} />,
     [DialogTypes.ExternalNavStride]: <ExternalNavStrideDialog {...modalProps} />,
     [DialogTypes.MnemonicExport]: <MnemonicExportDialog {...modalProps} />,
-    [DialogTypes.MobileDownload]: <MobilDownloadDialog {...modalProps} />,
     [DialogTypes.MobileSignIn]: <MobileSignInDialog {...modalProps} />,
     [DialogTypes.Onboarding]: <OnboardingDialog {...modalProps} />,
     [DialogTypes.OrderDetails]: <OrderDetailsDialog {...modalProps} />,

src/pages/token/rewards/RewardHistoryPanel.tsx

@@ -9,10 +9,13 @@ import {
   HistoricalTradingRewardsPeriods,
 } from '@/constants/abacus';
 
+import { isMainnet } from '@/constants/networks';
 import { STRING_KEYS } from '@/constants/localization';
+
 import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
+import { Output, OutputType } from '@/components/Output';
 import { Panel } from '@/components/Panel';
 import { ToggleGroup } from '@/components/ToggleGroup';
 import { WithTooltip } from '@/components/WithTooltip';
@@ -20,6 +23,9 @@ import { TradingRewardHistoryTable } from '@/views/tables/TradingRewardHistoryTa
 
 import abacusStateManager from '@/lib/abacus';
 
+// TODO: set in env featureFlag config
+const REWARDS_HISTORY_START_DATE_MS = isMainnet ? 1706486400000 : 1704844800000;
+
 export const RewardHistoryPanel = () => {
   const stringGetter = useStringGetter();
 
@@ -47,7 +53,20 @@ export const RewardHistoryPanel = () => {
             <WithTooltip tooltip="reward-history">
               <h3>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY })}</h3>
             </WithTooltip>
-            <span>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION })}</span>
+            <span>
+              {stringGetter({
+                key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION,
+                params: {
+                  REWARDS_HISTORY_START_DATE: (
+                    <Styled.Output
+                      type={OutputType.Date}
+                      value={REWARDS_HISTORY_START_DATE_MS}
+                      timeOptions={{ useUTC: true }}
+                    />
+                  ),
+                },
+              })}
+            </span>
           </Styled.Title>
           <ToggleGroup
             items={[
@@ -103,3 +122,7 @@ Styled.Content = styled.div`
   ${layoutMixins.flexColumn}
   gap: 0.75rem;
 `;
+
+Styled.Output = styled(Output)`
+  display: inline;
+`;

src/pages/token/rewards/RewardsPage.tsx

@@ -1,6 +1,7 @@
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
+import { isMainnet } from '@/constants/networks';
 import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 
@@ -27,6 +28,8 @@ const RewardsPage = () => {
   const { isTablet, isNotTablet } = useBreakpoints();
   const navigate = useNavigate();
 
+  const showTradingRewards = testFlags.showTradingRewards || !isMainnet;
+
   return (
     <div>
       {isTablet && (
@@ -37,7 +40,7 @@ const RewardsPage = () => {
       )}
       <DetachedSection>
         <Styled.GridLayout
-          showTradingRewards={testFlags.showTradingRewards}
+          showTradingRewards={showTradingRewards}
           showMigratePanel={import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet}
         >
           {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <Styled.MigratePanel />}
@@ -51,7 +54,7 @@ const RewardsPage = () => {
             </>
           )}
 
-          {testFlags.showTradingRewards && (
+          {showTradingRewards && (
             <Styled.TradingRewardsColumn>
               <TradingRewardsSummaryPanel />
               {isTablet && <RewardsHelpPanel />}
@@ -60,7 +63,7 @@ const RewardsPage = () => {
           )}
 
           {isNotTablet && (
-            <Styled.OtherColumn showTradingRewards={testFlags.showTradingRewards}>
+            <Styled.OtherColumn showTradingRewards={showTradingRewards}>
               <RewardsHelpPanel />
             </Styled.OtherColumn>
           )}

src/views/dialogs/MobileDownloadDialog.tsx

@@ -1,134 +0,0 @@
-import { useMemo, useState } from 'react';
-import styled, { AnyStyledComponent, css } from 'styled-components';
-import { AES } from 'crypto-js';
-
-import { AlertType } from '@/constants/alerts';
-import { ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { useAccounts, useStringGetter } from '@/hooks';
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { AlertMessage } from '@/components/AlertMessage';
-import { Dialog } from '@/components/Dialog';
-import { Icon, IconName } from '@/components/Icon';
-import { ToggleButton } from '@/components/ToggleButton';
-import { QrCode } from '@/components/QrCode';
-import { log } from '@/lib/telemetry';
-
-type ElementProps = {
-  setIsOpen: (open: boolean) => void;
-};
-
-
-const MobileQrCode = ({
-}: {
-}) => {
-  const stringGetter = useStringGetter();
-
-  const appLink = 'https://apps.apple.com/app/id6475599596';
-
-  return (
-    <Styled.QrCodeContainer isShowing={true}>
-      <QrCode hasLogo size={432} value={appLink} />
-      <span>{stringGetter({ key: STRING_KEYS.CLICK_TO_SHOW })}</span>
-    </Styled.QrCodeContainer>
-  );
-};
-
-export const MobileDownloadDialog = ({ setIsOpen }: ElementProps) => {
-  const stringGetter = useStringGetter();
-
-  const content = (
-      <>
-        <p>
-          {stringGetter({
-            key: STRING_KEYS.WHILE_ONBOARDING,
-            params: {
-              SYNC_WITH_DESKTOP: (
-                <strong>{stringGetter({ key: STRING_KEYS.SYNC_WITH_DESKTOP })}</strong>
-              ),
-            },
-          })}
-        </p>
-        <MobileQrCode
-        />
-      </>
-    );
-
-  return (
-    <Dialog isOpen setIsOpen={setIsOpen} title={'Download mobile app'}>
-      <Styled.Content>{content}</Styled.Content>
-    </Dialog>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Content = styled.div`
-  ${layoutMixins.column}
-  gap: 1rem;
-
-  strong {
-    font-weight: 900;
-    color: var(--color-text-2);
-  }
-
-  footer {
-    ${layoutMixins.row}
-    justify-content: space-between;
-
-    svg {
-      width: auto;
-    }
-  }
-`;
-
-Styled.WaitingSpan = styled.span`
-  strong {
-    color: var(--color-warning);
-  }
-`;
-
-Styled.QrCodeContainer = styled.figure<{ isShowing: boolean }>`
-  ${layoutMixins.stack}
-
-  overflow: hidden;
-  border-radius: 0.75em;
-
-  cursor: pointer;
-
-  transition: 0.2s;
-
-  &:hover {
-    filter: brightness(var(--hover-filter-base));
-  }
-
-  > * {
-    position: relative;
-    transition: 0.16s;
-  }
-
-  > :first-child {
-    pointer-events: none;
-
-    ${({ isShowing }) =>
-      !isShowing &&
-      css`
-        filter: blur(1rem) brightness(1.4);
-        will-change: filter;
-      `}
-  }
-
-  > span {
-    place-self: center;
-
-    font-size: 1.4em;
-    color: var(--color-text-2);
-
-    ${({ isShowing }) =>
-      isShowing &&
-      css`
-        opacity: 0;
-      `}
-  }
-`;

src/views/menus/AccountMenu.tsx

@@ -189,17 +189,6 @@ export const AccountMenu = () => {
           label: stringGetter({ key: STRING_KEYS.DISPLAY_SETTINGS }),
           onSelect: () => dispatch(openDialog({ type: DialogTypes.DisplaySettings })),
         },
-        {
-          value: 'MobileDownload',
-          icon:
-            theme === AppTheme.Light ? (
-              <Icon iconName={IconName.Sun} />
-            ) : (
-              <Icon iconName={IconName.Moon} />
-            ),
-          label: "Download Mobile App",
-          onSelect: () => dispatch(openDialog({ type: DialogTypes.MobileDownload })),
-        },
         ...(onboardingState === OnboardingState.AccountConnected && hdKey
           ? [
               {