Update Toast Notif

dev-mode-link-local-sdk.mjs

@@ -6,7 +6,7 @@ import path from 'path';
 import readline from 'readline';
 
 // import package json
-import packageJSON from './package.json' assert { type: 'json' };
+import packageJSON from './package.json' with { type: 'json' };
 
 const packageJSONWatcher = {
   STORAGE_KEY: 'STORAGE_FOR_RESTORING_PACKAGE_JSON',

src/App.tsx

@@ -52,7 +52,7 @@ import SpaceContextProvider from 'contexts/SpaceContext';
 import { SpaceWidgetSection } from 'sections/space/SpaceWidgetSection';
 import { blocksColors, getBlocksCSSVariables, Notification } from 'blocks';
 import APP_PATHS from 'config/AppPaths';
-import { useInAppNotifications, useRewardsNotification } from 'common';
+import { useChainTestnetNotification, useInAppNotifications } from 'common';
 
 dotenv.config();
 
@@ -112,13 +112,13 @@ const GlobalStyle = createGlobalStyle`
     --r9: 36px;
     --r10: 40px;
     // TODO: Add more as needed
-    
+
     /* deprecated */
     /* Colors */
     ${Object.entries(blocksColors)
       .map(([colorName, code]) => `--${colorName}: ${code};`)
       .join('')}
-      
+
     /* Font Family */
       --font-family: 'FK Grotesk Neu';
 
@@ -194,7 +194,7 @@ export default function App() {
 
   const { isActive, account, provider } = useAccount();
   // TODO: comment until rewards v2 launch is accounced
-  useRewardsNotification();
+  useChainTestnetNotification();
   const [currentTime, setcurrentTime] = useState(0);
 
   const { pgpPvtKey } = useContext<any>(AppContext);

src/blocks/illustrations/index.ts

@@ -19,6 +19,8 @@ export { default as ChatIllustration } from './components/Chat';
 
 export { default as ChatDark } from './components/ChatDark';
 
+export { default as ChainTestnet } from './components/ChainTestnet';
+
 export { default as CheckCircle } from './components/CheckCircle';
 
 export { default as Communication } from './components/Communication';

src/blocks/notification/Notification.tsx

@@ -42,6 +42,7 @@ const TextContainer = styled.div`
 
 const NotificationTitle = styled.span`
   ${() => getTextVariantStyles('h5-semibold', 'components-in-app-notification-text-default')}
+  width: 95%;
 `;
 
 const NotificationDescription = styled.span`
@@ -57,9 +58,9 @@ const NotificationDescription = styled.span`
 const IconContainer = styled.div`
   display: flex;
   align-items: center;
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-xs);
   border-radius: var(--radius-xxs) var(--radius-none) var(--radius-none) var(--radius-xxs);
-  background: radial-gradient(79.55% 79.55% at 50% 50%, #7e3bb9 0%, #171717 100%);
+  background: #1B43C8;
 `;
 
 const CloseButton = styled.div`

src/common/Common.localStorageKeys.ts

@@ -1,5 +1,5 @@
 const CommonLocalStorageKeys = {
-  notificationShown: 'notificationShown',
+  testnetNotificationShown: 'testnetNotificationShown',
   resetStakeEndDate: 'resetStakeEndDate',
 };
 

src/common/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useIsVisible } from './useIsVisible';
 export { usePushStakingStats } from './usePushStakingStats';
-export { useRewardsNotification } from './useRewardsNotification';
+export { useChainTestnetNotification } from './useChainTestnetNotification';
 export { useDisclosure } from './useDisclosure';
 export { useInAppNotifications } from './useInAppNotifications';

src/common/hooks/useChainTestnetNotification.tsx

@@ -0,0 +1,42 @@
+// react
+import { useEffect, useState } from 'react';
+
+// components
+import { ChainTestnet, notification } from 'blocks';
+import { CommonLocalStorageKeys } from 'common';
+
+export const useChainTestnetNotification = () => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  const notificationAlreadyShown = localStorage.getItem('testnetNotificationShown') === 'true';
+
+  const showNotification = () =>
+    notification.show({
+      title: 'Donut Testnet Closed beta is Live!',
+      description: 'Get a sneak peek into Testnet, Donut, build universal apps and win prizes!',
+      image: <ChainTestnet />,
+      position: 'bottom-left',
+      onClick: () => {
+        window.open('https://t.me/+dHOCilvxNR9jZjM9', '_blank');
+        localStorage.setItem(CommonLocalStorageKeys.testnetNotificationShown, 'true');
+        notification.hide();
+      },
+      onClose: () => {
+        localStorage.setItem(CommonLocalStorageKeys.testnetNotificationShown, 'true');
+      },
+    });
+
+  const showNotificationFn = () => {
+    if (!notificationAlreadyShown && !hasMounted) {
+      showNotification();
+      setHasMounted(true);
+    } else {
+      notification.hide();
+      setHasMounted(false);
+    }
+  };
+
+  useEffect(() => {
+    showNotificationFn();
+  }, []);
+};