Add notify (#967)

* add Notifi

* remove discord & change cratio save button

* ui fixes

* Deps

* Dont rely on connector

* Hide notification icon when in delegate mode

* Prettier

* Lazy load notificard

* update version, split chains (#973)

* update version, split chains

* add unread counter

* fix history icon alignment (#985)

* update version, split chains

* add unread counter

* align history icons

* Update notifi.css

* update npm package

* Fix deps

* Node v16 is deprecated

* yarn pretty:fix

* Lint issues

* add discord support (#987)

* upgrade sdk (#991)

* deps

---------

Co-authored-by: Haoqian-Zheng <haoqian.zheng@gmail.com>

v2/components/Navigation/Navigation.tsx

@@ -22,7 +22,6 @@ import {
   GuideIcon,
   NineDots,
   LoansIcon,
-  // NotificationsIcon,
   OptimismIcon,
   // SettingsIcon,
   StakingIcon,
@@ -45,6 +44,7 @@ import { WalletModal } from '@snx-v2/WalletModal';
 import { ContractContext } from '@snx-v2/ContractContext';
 import { useDelegateWallet } from '@snx-v2/useDelegateWallet';
 import { EXTERNAL_LINKS } from '@snx-v2/Constants';
+import { NotifiButton, NotifiContextWrapper } from '@snx-v2/NotifiButton';
 
 interface NavigationProps {
   currentNetwork: NetworkId;
@@ -112,6 +112,15 @@ export const NavigationUI = ({
     >
       <Link to="/">{size === 'desktop' ? <StakingLogo /> : <StakingIcon />}</Link>
       <Flex alignItems="center">
+        {isWalletConnected && walletAddress && !delegateWallet && (
+          <>
+            {size === 'desktop' && (
+              <NotifiContextWrapper>
+                <NotifiButton />
+              </NotifiContextWrapper>
+            )}
+          </>
+        )}
         {isWalletConnected && walletAddress && (
           <>
             {size === 'desktop' && (

v2/components/Navigation/package.json

@@ -8,6 +8,7 @@
     "@snx-v2/Constants": "workspace:*",
     "@snx-v2/ContractContext": "workspace:*",
     "@snx-v2/EpochPrice": "workspace:^",
+    "@snx-v2/NotifiButton": "workspace:*",
     "@snx-v2/UserBalances": "workspace:*",
     "@snx-v2/WalletModal": "workspace:*",
     "@snx-v2/formatters": "workspace:*",

v2/components/Notifi/NotifiCard.tsx

@@ -0,0 +1,70 @@
+import {
+  NotifiInputFieldsText,
+  NotifiInputSeparators,
+  NotifiSubscriptionCard,
+} from '@notifi-network/notifi-react-card';
+import './notifi.css';
+import React, { useContext } from 'react';
+import { ContractContext } from '@snx-v2/ContractContext';
+import { NetworkIdByName } from '@snx-v2/useSynthetixContracts';
+
+const isTestnet = (networkId: null | number) => {
+  if (networkId === NetworkIdByName['mainnet-ovm'] || networkId === NetworkIdByName['mainnet']) {
+    return false;
+  }
+  return true;
+};
+export const NotifiCard: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+  const { networkId, walletAddress } = useContext(ContractContext);
+  if (walletAddress === null || networkId === null) {
+    // account is required
+    return null;
+  }
+  const isL2 = networkId === NetworkIdByName['mainnet-ovm'];
+  const isMainnet = !isTestnet(networkId);
+
+  const cardId = isMainnet
+    ? isL2
+      ? '283fa53b4b8e4ed1a2234615bf01d240'
+      : '5ece3cd3ec504576b10ab396d619dc9b'
+    : '8a569abd38974f76837960bd9bf36049';
+
+  const inputLabels: NotifiInputFieldsText = {
+    label: {},
+    placeholderText: {
+      email: 'Email address',
+      telegram: 'Telegram ID',
+    },
+  };
+
+  const inputSeparators: NotifiInputSeparators = {
+    emailSeparator: {
+      content: 'OR',
+    },
+    telegramSeparator: {
+      content: 'OR',
+    },
+  };
+
+  return (
+    <NotifiSubscriptionCard
+      cardId={cardId}
+      inputLabels={inputLabels}
+      inputSeparators={inputSeparators}
+      inputs={{ userWallet: walletAddress }}
+      copy={{
+        FetchedStateCard: {
+          SubscriptionCardV1: {
+            EditCard: {
+              AlertListPreview: {
+                description: 'Get real-time alerts to the destinations of your choice',
+              },
+            },
+          },
+        },
+      }}
+      darkMode
+      onClose={onClose}
+    />
+  );
+};

v2/components/Notifi/index.ts

@@ -0,0 +1,3 @@
+import { NotifiCard } from './NotifiCard';
+export { NotifiCard } from './NotifiCard';
+export default NotifiCard;