feat: add vip telegram notification for high-value users

package.json

@@ -55,7 +55,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-client-js": "3.0.3",
-    "@dydxprotocol/v4-localization": "1.1.325",
+    "@dydxprotocol/v4-localization": "1.1.326",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@hugocxl/react-to-image": "^0.0.9",
@@ -234,4 +234,4 @@
       "includeClassNames": true
     }
   }
-}
+}

src/constants/notifications.ts

@@ -22,6 +22,7 @@ export enum NotificationType {
   FillWithNoOrder = 'FillWithNoOrder',
   Order = 'Order',
   CosmosWalletLifecycle = 'CosmosWalletLifecycle', // lifecycle events for cosmos wallets
+  VipTelegram = 'VipTelegram',
 }
 
 export enum NotificationCategoryPreferences {
@@ -55,6 +56,7 @@ export const NotificationTypeCategory: {
   [NotificationType.PredictionMarketConcluded]: NotificationCategoryPreferences.MustSee,
   [NotificationType.Custom]: NotificationCategoryPreferences.MustSee,
   [NotificationType.CosmosWalletLifecycle]: NotificationCategoryPreferences.MustSee,
+  [NotificationType.VipTelegram]: NotificationCategoryPreferences.General,
 };
 
 export const SingleSessionNotificationTypes = [

src/hooks/useEnableTurnkey.ts

@@ -7,6 +7,5 @@ import { useStatsigGateValue } from './useStatsig';
 export const useEnableTurnkey = () => {
   const forcedTurnkey = testFlags.enableTurnkey;
   const turnkeyFF = useStatsigGateValue(StatsigFlags.ffTurnkeyWeb);
-
-  return forcedTurnkey || turnkeyFF;
+  return forcedTurnkey ?? turnkeyFF;
 };

src/hooks/useNotificationTypes.tsx

@@ -45,9 +45,12 @@ import { CloseAllPositionsNotification } from '@/views/notifications/CloseAllPos
 import { OrderCancelNotification } from '@/views/notifications/OrderCancelNotification';
 import { OrderStatusNotification } from '@/views/notifications/OrderStatusNotification';
 import { TradeNotification } from '@/views/notifications/TradeNotification';
+import { VipTelegramNotification } from '@/views/notifications/VipTelegramNotification';
 
 import { getUserWalletAddress } from '@/state/accountInfoSelectors';
 import {
+  getIsAccountConnected,
+  getSubaccountEquity,
   selectOrphanedTriggerOrders,
   selectReclaimableChildSubaccountFunds,
   selectShouldAccountRebalanceUsdc,
@@ -85,6 +88,7 @@ import { useAppSelectorWithArgs } from './useParameterizedSelector';
 import { useAllStatsigDynamicConfigValues } from './useStatsig';
 import { useStringGetter } from './useStringGetter';
 import { useURLConfigs } from './useURLConfigs';
+import { useLoadedVaultAccount } from './vaultsHooks';
 
 export const notificationTypes: NotificationTypeConfig[] = [
   {
@@ -1175,6 +1179,73 @@ export const notificationTypes: NotificationTypeConfig[] = [
       };
     },
   },
+  {
+    type: NotificationType.VipTelegram,
+    useTrigger: ({ trigger }) => {
+      const stringGetter = useStringGetter();
+      const isConnected = useAppSelector(getIsAccountConnected);
+      const equity = useAppSelector(getSubaccountEquity, shallowEqual);
+      const { data: vaultAccount } = useLoadedVaultAccount();
+      const vaultBalance = vaultAccount?.balanceUsdc;
+
+      useEffect(() => {
+        if (!isConnected) {
+          return;
+        }
+
+        if (sessionStorage.getItem('vip-telegram-notification-shown')) {
+          return;
+        }
+
+        const totalValue = equity != null ? equity + (vaultBalance ?? 0) : undefined;
+        if (totalValue == null || totalValue < 50000) {
+          return;
+        }
+
+        const title = stringGetter({
+          key: STRING_KEYS.YOURE_INVITED,
+          fallback: "You're Invited",
+        });
+        const body = stringGetter({
+          key: STRING_KEYS.VIP_TELEGRAM_BODY,
+          fallback:
+            'Private Telegram Group for VIP traders. Enjoy white glove service, special incentives and competitions',
+        });
+
+        if (!title || !body) {
+          return;
+        }
+
+        sessionStorage.setItem('vip-telegram-notification-shown', 'true');
+
+        trigger({
+          id: `vip-telegram-invitation-${Date.now()}`,
+          displayData: {
+            title,
+            body,
+            renderCustomBody: ({ isToast, notification }) => (
+              <VipTelegramNotification
+                isToast={isToast}
+                notification={notification}
+                portfolioValue={totalValue}
+                telegramUrl="https://t.me/+NLOpf5jiAEVjODFh"
+              />
+            ),
+            groupKey: NotificationType.VipTelegram,
+            toastSensitivity: 'foreground',
+            toastDuration: 15000,
+          },
+          updateKey: ['vip-telegram-invitation'],
+        });
+      }, [equity, isConnected, stringGetter, trigger, vaultBalance]);
+    },
+
+    useNotificationAction: () => {
+      return () => {
+        // Optional: track analytics when user clicks
+      };
+    },
+  },
 ];
 
 const $Icon = tw.img`h-1.5 w-1.5`;

src/views/MarketsStats.tsx

@@ -83,8 +83,8 @@ export const MarketsStats = (props: MarketsStatsProps) => {
       <$FreeDepositBanner>
         <div tw="flex items-center justify-between gap-0.75">
           <div tw="relative z-10 mr-auto flex max-w-10 flex-col">
-            <span tw="mb-0.75 leading-[1.2] font-extra-large-bold">
-              <span tw="mr-0.25 rounded-0 bg-color-layer-1 px-0.25 text-color-accent">
+            <span tw="mb-0.75 !leading-tight font-extra-large-bold">
+              <span tw="mr-0.25 rounded-0 bg-color-text-2 px-0.25 text-color-accent">
                 {stringGetter({ key: STRING_KEYS.FREE_DEPOSIT_BANNER_TITLE_FREE })}
               </span>
               <span tw="text-color-text-2">
@@ -97,7 +97,7 @@ export const MarketsStats = (props: MarketsStatsProps) => {
                 type={ButtonType.Button}
                 tw="relative z-10 w-full border-none bg-color-layer-0 text-color-text-2"
                 onClick={handleFreeDepositClick}
-                state={{ isDisabled: isOnboardingDisabled }}
+                state={{ isDisabled: Boolean(isOnboardingDisabled) }}
               >
                 {stringGetter({ key: STRING_KEYS.FREE_DEPOSIT_BANNER_CTA })}
               </Button>
@@ -110,7 +110,7 @@ export const MarketsStats = (props: MarketsStatsProps) => {
           <img
             src="/free-deposit-hedgie.png"
             alt="free deposit hedgie"
-            tw="absolute bottom-0 left-7 z-0 h-14 object-contain mobile:hidden"
+            tw="absolute bottom-0 left-6 z-0 h-full object-contain mobile:hidden"
           />
         </div>
       </$FreeDepositBanner>

src/views/notifications/VipTelegramNotification.tsx

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+import { ButtonAction, ButtonType } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Button } from '@/components/Button';
+// eslint-disable-next-line import/no-cycle
+import { Notification, type NotificationProps } from '@/components/Notification';
+
+type ElementProps = {
+  portfolioValue: number;
+  telegramUrl?: string;
+};
+
+export type VipTelegramNotificationProps = NotificationProps & ElementProps;
+
+export const VipTelegramNotification = ({
+  isToast,
+  notification,
+  portfolioValue: _portfolioValue,
+  telegramUrl = 'https://t.me/+NLOpf5jiAEVjODFh',
+}: VipTelegramNotificationProps) => {
+  const stringGetter = useStringGetter();
+
+  const title = stringGetter({
+    key: STRING_KEYS.YOURE_INVITED,
+    fallback: "You're Invited",
+  });
+
+  const description = stringGetter({
+    key: STRING_KEYS.VIP_TELEGRAM_BODY,
+    fallback:
+      'Private Telegram Group for VIP traders. Enjoy white glove service, special incentives and competitions',
+  });
+
+  const handleViewClick = () => {
+    window.open(telegramUrl, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <Notification
+      isToast={isToast}
+      notification={notification}
+      slotIcon={<$Icon src="/telegram-noti.svg" alt="Telegram" />}
+      slotTitle={title}
+      slotCustomContent={
+        <$Content>
+          <$Description>{description}</$Description>
+          <Button
+            action={ButtonAction.Primary}
+            type={ButtonType.Button}
+            onClick={handleViewClick}
+            tw="flex-shrink-0 rounded-0.5 border-none bg-color-layer-6 text-small text-color-text-button font-base-medium hover:bg-color-layer-5"
+          >
+            {stringGetter({ key: STRING_KEYS.VIEW })}
+          </Button>
+        </$Content>
+      }
+    />
+  );
+};
+
+const $Icon = styled.img`
+  ${tw`h-3 w-3 flex-shrink-0`};
+`;
+
+const $Content = styled.div`
+  ${tw`mt-0.5 flex items-center justify-between gap-1`};
+`;
+
+const $Description = styled.p`
+  ${tw`m-0 text-color-text-0 font-small-book`};
+  line-height: 110%;
+`;