feat: phantom noti + positioning (#1052)

package.json

@@ -57,7 +57,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.11.6",
     "@dydxprotocol/v4-client-js": "1.3.7",
-    "@dydxprotocol/v4-localization": "^1.1.200",
+    "@dydxprotocol/v4-localization": "^1.1.203",
     "@dydxprotocol/v4-proto": "^6.0.1",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",

src/constants/notifications.ts

@@ -229,6 +229,7 @@ export enum ReleaseUpdateNotificationIds {
   Twitter200BVolume = 'twitter-200b-volume',
   IncentivesS6Ended = 'incentives-s6-ended',
   KeplrSupport = 'keplr-support',
+  PhantomSupport = 'phantom-support',
 }
 
 // Incentives Season

src/hooks/useDisplayedWallets.ts

@@ -51,6 +51,15 @@ export const useDisplayedWallets = (): WalletInfo[] => {
           }) as WalletInfo
       );
 
+    // If Phantom wallet is detected, it must be in the 2nd slot.
+    // If there are no injected wallets, splice will just put it as the only item in the array.
+    if (phantomDetected) {
+      enabledInjectedWallets.splice(1, 0, {
+        connectorType: ConnectorType.PhantomSolana,
+        name: WalletType.Phantom,
+      });
+    }
+
     return [
       // If the user does not have any injected wallets installed, show Metamask as the first option
       // with a download link since it the recommended wallet
@@ -62,11 +71,6 @@ export const useDisplayedWallets = (): WalletInfo[] => {
 
       ...enabledInjectedWallets,
 
-      phantomDetected && {
-        connectorType: ConnectorType.PhantomSolana,
-        name: WalletType.Phantom,
-      },
-
       keplrEnabled && {
         connectorType: ConnectorType.Cosmos,
         name: CosmosWalletType.KEPLR,

src/hooks/useNotificationTypes.tsx

@@ -35,7 +35,7 @@ import { DydxChainAsset } from '@/constants/wallets';
 
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 
-import { KeplrIcon } from '@/icons';
+import { KeplrIcon, PhantomIcon } from '@/icons';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
@@ -369,6 +369,24 @@ export const notificationTypes: NotificationTypeConfig[] = [
             []
           );
         }
+
+        const phantomNotificationExpirationDate = new Date('2024-10-07T15:00:29.517926238Z');
+
+        if (currentDate < phantomNotificationExpirationDate) {
+          trigger(
+            ReleaseUpdateNotificationIds.PhantomSupport,
+            {
+              icon: <PhantomIcon />,
+              title: stringGetter({ key: STRING_KEYS.PHANTOM_SUPPORT_TITLE }),
+              body: stringGetter({
+                key: STRING_KEYS.PHANTOM_SUPPORT_BODY,
+              }),
+              toastSensitivity: 'foreground',
+              groupKey: ReleaseUpdateNotificationIds.KeplrSupport,
+            },
+            []
+          );
+        }
       }, [stringGetter]);
 
       const { dydxAddress } = useAccounts();