update version, split chains

v2/components/Navigation/Navigation.tsx

@@ -49,8 +49,7 @@ import { ContractContext } from '@snx-v2/ContractContext';
 import { useDelegateWallet } from '@snx-v2/useDelegateWallet';
 import { EXTERNAL_LINKS } from '@snx-v2/Constants';
 import { safeImport } from '@synthetixio/safe-import';
-
-const NotifiCard = lazy(() => safeImport(() => import('@snx-v2/Notifi')));
+import { NotifiButton, NotifiContextWrapper } from '@snx-v2/notifiButton';
 
 interface NavigationProps {
   currentNetwork: NetworkId;
@@ -122,35 +121,9 @@ export const NavigationUI = ({
         {isWalletConnected && walletAddress && !delegateWallet && (
           <>
             {size === 'desktop' && (
-              <Popover
-                closeOnBlur={false}
-                onClose={notifiModal.onClose}
-                isOpen={notifiModal.isOpen}
-              >
-                <PopoverTrigger>
-                  <Button
-                    ml={2}
-                    height={10}
-                    width={10}
-                    bg="navy.900"
-                    borderColor="gray.900"
-                    borderWidth="1px"
-                    borderRadius="4px"
-                    _hover={{
-                      bg: 'blackAlpha.400',
-                      cursor: 'pointer',
-                    }}
-                    onClick={notifiModal.onOpen}
-                  >
-                    <NotificationsIcon color="white" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent border="none" width="333px">
-                  <Suspense fallback={null}>
-                    <NotifiCard onClose={notifiModal.onClose} />
-                  </Suspense>
-                </PopoverContent>
-              </Popover>
+              <NotifiContextWrapper>
+                <NotifiButton />
+              </NotifiContextWrapper>
             )}
           </>
         )}

v2/components/Navigation/package.json

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

v2/components/Notifi/NotifiCard.tsx

@@ -1,14 +1,11 @@
-import { arrayify } from '@ethersproject/bytes';
 import {
-  NotifiContext,
   NotifiInputFieldsText,
   NotifiInputSeparators,
   NotifiSubscriptionCard,
 } from '@notifi-network/notifi-react-card';
 import './notifi.css';
 import React, { useContext } from 'react';
 import { ContractContext } from '@snx-v2/ContractContext';
-import { SignerContext } from '@snx-v2/SignerContext';
 import { NetworkIdByName } from '@snx-v2/useSynthetixContracts';
 
 const isTestnet = (networkId: null | number) => {
@@ -19,18 +16,15 @@ const isTestnet = (networkId: null | number) => {
 };
 export const NotifiCard: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   const { networkId, walletAddress } = useContext(ContractContext);
-  const signer = useContext(SignerContext);
-  if (signer === null || walletAddress === null || networkId === null) {
+  if (walletAddress === null || networkId === null) {
     // account is required
     return null;
   }
   const isL2 = networkId === NetworkIdByName['mainnet-ovm'];
   const isMainnet = !isTestnet(networkId);
-  const walletBlockchain = isL2 ? 'OPTIMISM' : 'ETHEREUM';
 
-  const env = isMainnet ? 'Production' : 'Development';
   const cardId = isMainnet
-    ? '283fa53b4b8e4ed1a2234615bf01d240'
+    ? ( isL2 ? '283fa53b4b8e4ed1a2234615bf01d240' : '5ece3cd3ec504576b10ab396d619dc9b') 
     : '8a569abd38974f76837960bd9bf36049';
 
   const inputLabels: NotifiInputFieldsText = {
@@ -48,35 +42,24 @@ export const NotifiCard: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   };
 
   return (
-    <NotifiContext
-      dappAddress="synthetix"
-      env={env}
-      signMessage={async (message: Uint8Array) => {
-        const result = await signer.signMessage(message);
-        return arrayify(result);
-      }}
-      walletPublicKey={walletAddress}
-      walletBlockchain={walletBlockchain}
-    >
-      <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',
-                },
+    <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}
-      />
-    </NotifiContext>
+        },
+      }}
+      darkMode
+      onClose={onClose}
+    />
   );
 };

v2/components/Notifi/package.json

@@ -5,9 +5,8 @@
   "version": "0.0.1",
   "dependencies": {
     "@ethersproject/bytes": "^5.7.0",
-    "@notifi-network/notifi-react-card": "^0.83.0",
+    "@notifi-network/notifi-react-card": "^0.85.2",
     "@snx-v2/ContractContext": "workspace:*",
-    "@snx-v2/SignerContext": "workspace:*",
     "@snx-v2/useSynthetixContracts": "workspace:*",
     "react": "^18.2.0"
   }

v2/components/NotifiButton/NotifiButton.tsx

@@ -0,0 +1,62 @@
+import { lazy, Suspense } from 'react';
+import {
+  Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  useDisclosure,
+} from '@chakra-ui/react';
+import {
+  NotificationsIcon,
+} from '@snx-v2/icons';
+import { safeImport } from '@synthetixio/safe-import';
+import './notifibutton.css';
+import { useUnreadState } from '@notifi-network/notifi-react-card';
+
+const NotifiCard = lazy(() => safeImport(() => import('@snx-v2/Notifi')));
+
+export const NotifiButton: React.FC = () => {
+
+  const notifiModal = useDisclosure();
+  const { hasUnreadNotification, unreadNotificationCount } = useUnreadState();
+
+  return (
+    <Popover
+    closeOnBlur={false}
+    onClose={notifiModal.onClose}
+    isOpen={notifiModal.isOpen}
+    >
+      <PopoverTrigger>
+        <Button
+          ml={2}
+          height={10}
+          width={10}
+          bg="navy.900"
+          borderColor="gray.900"
+          borderWidth="1px"
+          borderRadius="4px"
+          _hover={{
+            bg: 'blackAlpha.400',
+            cursor: 'pointer',
+          }}
+          onClick={notifiModal.onOpen}
+        >
+          <NotificationsIcon color="white" />
+          {hasUnreadNotification && (
+            <div className='notifi-unread-counter'>
+              <div>
+                {unreadNotificationCount > 99 ? '99' : unreadNotificationCount}
+              </div>
+            </div>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent border="none" width="333px">
+        <Suspense fallback={null}>
+          <NotifiCard onClose={notifiModal.onClose} />
+        </Suspense>
+      </PopoverContent>
+    </Popover>
+  );
+
+  }

v2/components/NotifiButton/NotifiContextWrapper.tsx

@@ -0,0 +1,42 @@
+import { arrayify } from '@ethersproject/bytes';
+import { NotifiContext } from '@notifi-network/notifi-react-card';
+import React, { PropsWithChildren, useContext } from 'react';
+import { ContractContext } from '@snx-v2/ContractContext';
+import { SignerContext } from '@snx-v2/SignerContext';
+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 NotifiContextWrapper: React.FC<PropsWithChildren<{}>> = ({children}: PropsWithChildren<{}>) => {
+  const { networkId, walletAddress } = useContext(ContractContext);
+  const signer = useContext(SignerContext);
+  if (signer === null || walletAddress === null || networkId === null) {
+    // account is required
+    return null;
+  }
+  const isL2 = networkId === NetworkIdByName['mainnet-ovm'];
+  const isMainnet = !isTestnet(networkId);
+  const walletBlockchain = isL2 ? 'OPTIMISM' : 'ETHEREUM';
+
+  const env = isMainnet ? 'Production' : 'Development';
+
+  return (
+    <NotifiContext
+      dappAddress="synthetix"
+      env={env}
+      signMessage={async (message: Uint8Array) => {
+        const result = await signer.signMessage(message);
+        return arrayify(result);
+      }}
+      walletPublicKey={walletAddress}
+      walletBlockchain={walletBlockchain}
+    >
+      {children}
+    </NotifiContext>
+  );
+};

v2/components/NotifiButton/index.ts

@@ -0,0 +1,2 @@
+export * from './NotifiButton';
+export * from './NotifiContextWrapper';

v2/components/NotifiButton/notifibutton.css

@@ -0,0 +1,17 @@
+.notifi-unread-counter {
+  position: absolute;
+  top: 0.2rem;
+  bottom: 0;
+  left: 1.2rem;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  color: #000;
+  text-align: center;
+  width: 1.05rem;
+  height: 1.05rem;
+  background-color: #82F7C5;
+  border-radius: 50px;
+}

v2/components/NotifiButton/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@snx-v2/NotifiButton",
+  "private": true,
+  "main": "index.ts",
+  "version": "0.0.1",
+  "dependencies": {
+    "@chakra-ui/react": "^2.5.0",
+    "@notifi-network/notifi-react-card": "^0.85.2",
+    "@snx-v2/icons": "workspace:*",
+    "@synthetixio/safe-import": "workspace:*",
+    "react": "^18.2.0"
+  }
+}