From 2bf8135f2da93e843854f6b6eef0ecdd37a4c0db Mon Sep 17 00:00:00 2001 From: corlard3y Date: Fri, 11 Jul 2025 11:32:47 +0100 Subject: [PATCH] update toast notifs --- dev-mode-link-local-sdk.mjs | 2 +- src/App.tsx | 8 ++-- .../illustrations/components/ChainTestnet.tsx | 35 ++++++++++++++ src/blocks/illustrations/index.ts | 2 + src/blocks/notification/Notification.tsx | 5 +- src/common/Common.localStorageKeys.ts | 2 +- src/common/hooks/index.ts | 2 +- .../hooks/useChainTestnetNotification.tsx | 42 ++++++++++++++++ src/common/hooks/useRewardsNotification.tsx | 48 ------------------- 9 files changed, 89 insertions(+), 57 deletions(-) create mode 100644 src/blocks/illustrations/components/ChainTestnet.tsx create mode 100644 src/common/hooks/useChainTestnetNotification.tsx delete mode 100644 src/common/hooks/useRewardsNotification.tsx diff --git a/dev-mode-link-local-sdk.mjs b/dev-mode-link-local-sdk.mjs index e49bc6ade3..75fac268a3 100644 --- a/dev-mode-link-local-sdk.mjs +++ b/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', diff --git a/src/App.tsx b/src/App.tsx index 32c7f7da43..ac2021c190 100644 --- a/src/App.tsx +++ b/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(AppContext); diff --git a/src/blocks/illustrations/components/ChainTestnet.tsx b/src/blocks/illustrations/components/ChainTestnet.tsx new file mode 100644 index 0000000000..d652b861ff --- /dev/null +++ b/src/blocks/illustrations/components/ChainTestnet.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; +import { IllustrationWrapper } from '../IllustrationWrapper'; +import { IllustrationProps } from '../Illustrations.types'; + +const ChainTestnet: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + +} + {...restProps} + /> + ); +}; + +export default ChainTestnet; diff --git a/src/blocks/illustrations/index.ts b/src/blocks/illustrations/index.ts index c2363a01e5..353f2729e9 100644 --- a/src/blocks/illustrations/index.ts +++ b/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'; diff --git a/src/blocks/notification/Notification.tsx b/src/blocks/notification/Notification.tsx index 516cd0a642..3641d2361a 100644 --- a/src/blocks/notification/Notification.tsx +++ b/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` diff --git a/src/common/Common.localStorageKeys.ts b/src/common/Common.localStorageKeys.ts index dcde1f4e3f..c0953c10f5 100644 --- a/src/common/Common.localStorageKeys.ts +++ b/src/common/Common.localStorageKeys.ts @@ -1,5 +1,5 @@ const CommonLocalStorageKeys = { - notificationShown: 'notificationShown', + testnetNotificationShown: 'testnetNotificationShown', resetStakeEndDate: 'resetStakeEndDate', }; diff --git a/src/common/hooks/index.ts b/src/common/hooks/index.ts index 42a853ed1e..9fdbab01ba 100644 --- a/src/common/hooks/index.ts +++ b/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'; diff --git a/src/common/hooks/useChainTestnetNotification.tsx b/src/common/hooks/useChainTestnetNotification.tsx new file mode 100644 index 0000000000..bc849843fa --- /dev/null +++ b/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: , + 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(); + }, []); +}; diff --git a/src/common/hooks/useRewardsNotification.tsx b/src/common/hooks/useRewardsNotification.tsx deleted file mode 100644 index cbd5e40f2f..0000000000 --- a/src/common/hooks/useRewardsNotification.tsx +++ /dev/null @@ -1,48 +0,0 @@ -// React and other libraries -import { useEffect, useState } from 'react'; -import { useLocation } from 'react-router-dom'; - -// components -import { notification, RewardPointsS2 } from 'blocks'; -import { CommonLocalStorageKeys } from 'common'; - -export const useRewardsNotification = () => { - const location = useLocation(); - const [hasMounted, setHasMounted] = useState(false); - - const notificationAlreadyShown = localStorage.getItem('notificationShown') === 'true'; - const isRewardsRelatedPage = location?.pathname.includes('/points') || location?.pathname.includes('/discord'); - - const showNotification = () => - notification.show({ - title: 'Devnet Drop S2 is Live!', - description: 'Explore Push Chain Devnet, complete quests, bang out multipliers, and earn airdrops.', - image: , - position: 'bottom-left', - onClick: () => { - window.open('https://portal.push.org/rewards', '_blank'); - localStorage.setItem(CommonLocalStorageKeys.notificationShown, 'true'); - notification.hide(); - }, - onClose: () => { - localStorage.setItem(CommonLocalStorageKeys.notificationShown, 'true'); - }, - }); - - const showNotificationFn = () => { - if (!notificationAlreadyShown && !isRewardsRelatedPage) { - // include componentDidMount logic - if (!hasMounted) { - showNotification(); - setHasMounted(true); - } - } else { - notification.hide(); - setHasMounted(false); - } - }; - - useEffect(() => { - showNotificationFn(); - }, [isRewardsRelatedPage]); -};