feat: add banner for telegram invite (#1005)

package.json

@@ -56,7 +56,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.9.10",
     "@dydxprotocol/v4-client-js": "^1.1.27",
-    "@dydxprotocol/v4-localization": "^1.1.191",
+    "@dydxprotocol/v4-localization": "^1.1.192",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",
     "@hugocxl/react-to-image": "^0.0.9",

src/pages/portfolio/Overview.tsx

@@ -5,19 +5,21 @@ import styled from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute, PortfolioRoute } from '@/constants/routes';
-import { StatSigFlags } from '@/constants/statsig';
+import { StatsigDynamicConfigs, StatSigFlags } from '@/constants/statsig';
 
+import { useAccounts } from '@/hooks/useAccounts';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useParameterizedSelector } from '@/hooks/useParameterizedSelector';
 import { useShouldShowTriggers } from '@/hooks/useShouldShowTriggers';
-import { useStatsigGateValue } from '@/hooks/useStatsig';
+import { useAllStatsigDynamicConfigValues, useStatsigGateValue } from '@/hooks/useStatsig';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { AttachedExpandingSection, DetachedSection } from '@/components/ContentSection';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
 import { Icon, IconName } from '@/components/Icon';
 import { Link } from '@/components/Link';
 import { AffiliatesBanner } from '@/views/AffiliatesBanner';
+import { TelegramInviteBanner } from '@/views/TelegramInviteBanner';
 import { PositionsTable, PositionsTableColumnKey } from '@/views/tables/PositionsTable';
 
 import { calculateShouldRenderActionsInPositionsTable } from '@/state/accountCalculators';
@@ -30,8 +32,16 @@ import { AccountDetailsAndHistory } from './AccountDetailsAndHistory';
 
 export const Overview = () => {
   const stringGetter = useStringGetter();
-  const { isTablet } = useBreakpoints();
   const navigate = useNavigate();
+
+  const { isTablet } = useBreakpoints();
+  const { dydxAddress } = useAccounts();
+
+  const dynamicConfigs = useAllStatsigDynamicConfigValues();
+  const feedbackRequestWalletAddresses =
+    dynamicConfigs?.[StatsigDynamicConfigs.dcHighestVolumeUsers];
+  const shouldShowTelegramInvite =
+    dydxAddress && feedbackRequestWalletAddresses?.includes(dydxAddress);
   const affiliatesEnabled = useStatsigGateValue(StatSigFlags.ffEnableAffiliates);
 
   const handleViewUnopenedIsolatedOrders = useCallback(() => {
@@ -53,6 +63,12 @@ export const Overview = () => {
 
   return (
     <div>
+      {shouldShowTelegramInvite && (
+        <DetachedSection>
+          <TelegramInviteBanner />
+        </DetachedSection>
+      )}
+
       <DetachedSection>
         <AccountDetailsAndHistory />
       </DetachedSection>

src/state/configsSelectors.ts

@@ -16,12 +16,26 @@ export const getAppTheme = (state: RootState): AppTheme => {
   }
 };
 
-const DARK_CHART_BACKGROUND_URL = '/chart-dots-background-dark.svg';
-const LIGHT_CHART_BACKGROUND_URL = '/chart-dots-background-light.svg';
+const ChartDotBackgrounds = {
+  [AppTheme.Dark]: '/chart-dots-background-dark.svg',
+  [AppTheme.Classic]: '/chart-dots-background-dark.svg',
+  [AppTheme.Light]: '/chart-dots-background-light.svg',
+};
+
+const GridBackgrounds = {
+  [AppTheme.Dark]: '/grid-background-dark.svg',
+  [AppTheme.Classic]: '/grid-background-dark.svg',
+  [AppTheme.Light]: '/grid-background-light.svg',
+};
 
 export const getChartDotBackground = (state: RootState): string => {
   const appTheme = getAppTheme(state);
-  return appTheme === AppTheme.Light ? LIGHT_CHART_BACKGROUND_URL : DARK_CHART_BACKGROUND_URL;
+  return ChartDotBackgrounds[appTheme];
+};
+
+export const getGridBackground = (state: RootState): string => {
+  const appTheme = getAppTheme(state);
+  return GridBackgrounds[appTheme];
 };
 
 export const getAppColorMode = (state: RootState) => state.configs.appColorMode;

src/views/AffiliatesBanner.tsx

@@ -1,3 +1,4 @@
+import { css } from 'styled-components';
 import { styled } from 'twin.macro';
 
 import { AFFILIATES_EARN_PER_MONTH, AFFILIATES_FEE_DISCOUNT } from '@/constants/affiliates';
@@ -8,20 +9,28 @@ import { STRING_KEYS } from '@/constants/localization';
 import { useStringGetter } from '@/hooks/useStringGetter';
 import { useURLConfigs } from '@/hooks/useURLConfigs';
 
+import { layoutMixins } from '@/styles/layoutMixins';
+
 import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
 import { Link } from '@/components/Link';
 
-import { useAppDispatch } from '@/state/appTypes';
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { getGridBackground } from '@/state/configsSelectors';
 import { openDialog } from '@/state/dialogs';
 
 export const AffiliatesBanner = () => {
+  const dispatch = useAppDispatch();
   const stringGetter = useStringGetter();
   const { affiliateProgram } = useURLConfigs();
 
-  const dispatch = useAppDispatch();
+  const background = useAppSelector(getGridBackground);
+
   return (
-    <$Background tw="row m-1 justify-between gap-0.5 rounded-0.5 bg-color-layer-1 pl-1 pr-2">
+    <$Background
+      backgroundImagePath={background}
+      tw="row mb-1 mt-1 justify-between gap-0.5 bg-color-layer-1 pl-1 pr-2"
+    >
       <div tw="row">
         <img src="/affiliates-hedgie.png" alt="affiliates hedgie" tw="mt-1 h-8" />
         <div tw="column items-start gap-0.5">
@@ -71,8 +80,14 @@ export const AffiliatesBanner = () => {
   );
 };
 
-const $Background = styled.div`
-  background-image: url('/grid-background.svg');
+const $Background = styled.div<{ backgroundImagePath: string }>`
+  --color-border: transparent;
+  ${layoutMixins.withOuterBorderClipped}
+
+  ${({ backgroundImagePath }) => css`
+    background: url(${backgroundImagePath});
+  `}
+
   background-repeat: no-repeat;
   background-position-x: 100%;
   background-size: contain;

src/views/TelegramInviteBanner.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useStringGetter } from '@/hooks/useStringGetter';
+import { useURLConfigs } from '@/hooks/useURLConfigs';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { Link } from '@/components/Link';
+
+export const TelegramInviteBanner = () => {
+  const stringGetter = useStringGetter();
+  const { getInTouch } = useURLConfigs();
+
+  return getInTouch ? (
+    <$Banner tw="mb-1 bg-color-layer-5 p-1">
+      {stringGetter({
+        key: STRING_KEYS.TELEGRAM_INVITE_BANNER,
+        params: {
+          HERE_LINK: (
+            <Link isInline isAccent href={getInTouch}>
+              {stringGetter({ key: STRING_KEYS.HERE })}
+            </Link>
+          ),
+        },
+      })}
+    </$Banner>
+  ) : null;
+};
+
+const $Banner = styled.div`
+  --color-border: transparent;
+  ${layoutMixins.withOuterBorderClipped}
+`;