diff --git a/src/client/pages/settings/index.tsx b/src/client/pages/settings/index.tsx index 32b05a86..02afc6d7 100644 --- a/src/client/pages/settings/index.tsx +++ b/src/client/pages/settings/index.tsx @@ -11,6 +11,7 @@ import { ChatSettings } from '../../src/views/settings/Chat'; import { PrivacySettings } from '../../src/views/settings/Privacy'; import { Security } from '../../src/views/settings/Security'; import { NetworkInfo } from '../../src/views/home/networkInfo/NetworkInfo'; +import { NotificationSettings } from '../../src/views/settings/Notifications'; export const ButtonRow = styled.div` width: auto; @@ -25,6 +26,7 @@ const SettingsView = () => { return ( <> + diff --git a/src/client/src/hooks/UseListener.tsx b/src/client/src/hooks/UseListener.tsx index 6b3c2f51..d49cba98 100644 --- a/src/client/src/hooks/UseListener.tsx +++ b/src/client/src/hooks/UseListener.tsx @@ -1,5 +1,5 @@ import { useApolloClient } from '@apollo/client'; -import { useCallback, useEffect, useRef } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; import { toast } from 'react-toastify'; import { getNodeLink, @@ -8,14 +8,12 @@ import { } from '../components/generic/helpers'; import { Separation } from '../components/generic/Styled'; import { formatSats } from '../utils/helpers'; +import { defaultSettings } from '../views/settings/Notifications'; +import { useLocalStorage } from './UseLocalStorage'; import { useSocket, useSocketEvent } from './UseSocket'; const refetchTimeMs = 1000 * 1; -const options: { autoClose: false } = { - autoClose: false, -}; - const renderToast = ( title: string, content: JSX.Element | null | string | number @@ -30,6 +28,15 @@ const renderToast = ( }; export const useListener = (disabled?: boolean) => { + const [{ allForwards, autoClose }] = useLocalStorage( + 'notificationSettings', + defaultSettings + ); + + const options: { autoClose: false } | undefined = useMemo(() => { + return autoClose ? undefined : { autoClose: false }; + }, [autoClose]); + const refetchQueryTimeout: { current: ReturnType | null } = useRef(null); @@ -152,7 +159,7 @@ export const useListener = (disabled?: boolean) => { if (is_send || is_receive) return; - if (!is_confirmed) { + if (!is_confirmed && allForwards) { toast.warn( renderToast( 'Forward Attempt', diff --git a/src/client/src/views/settings/Notifications.tsx b/src/client/src/views/settings/Notifications.tsx new file mode 100644 index 00000000..17ebbf57 --- /dev/null +++ b/src/client/src/views/settings/Notifications.tsx @@ -0,0 +1,75 @@ +import { + MultiButton, + SingleButton, +} from '../../components/buttons/multiButton/MultiButton'; +import { + Card, + CardWithTitle, + SingleLine, + SubTitle, +} from '../../components/generic/Styled'; +import { useLocalStorage } from '../../hooks/UseLocalStorage'; +import styled from 'styled-components'; + +const NoWrapText = styled.div` + white-space: nowrap; + font-size: 14px; +`; + +const InputTitle = styled(NoWrapText)``; + +export const defaultSettings = { + allForwards: false, + autoClose: false, +}; + +export const NotificationSettings = () => { + const [settings, setSettings] = useLocalStorage( + 'notificationSettings', + defaultSettings + ); + + const { allForwards, autoClose } = settings; + + return ( + + Notifications + + + All Forwards + + setSettings({ ...settings, allForwards: true })} + > + Yes + + setSettings({ ...settings, allForwards: false })} + > + No + + + + + Auto Close + + setSettings({ ...settings, autoClose: true })} + > + Yes + + setSettings({ ...settings, autoClose: false })} + > + No + + + + + + ); +};