From 758304c9e3398c9e83b0c94d7211b9fe39224071 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Wed, 6 Dec 2023 17:19:06 +0530 Subject: [PATCH 1/2] Opt-In and Opt-Out and send Notification buttons are all done with guest mode and read only mode --- src/components/SendNotifications.tsx | 17 ++++++++++-- .../channel/NotificationSettings.tsx | 13 +++++++++ .../dropdowns/ManageNotifSettingDropdown.tsx | 13 +++++++++ .../dropdowns/OptinNotifSettingDropdown.tsx | 27 ++++++++++++------- .../dropdowns/UpdateNotifSettingDropdown.tsx | 19 +++++++++++++ src/hooks/useAccount.tsx | 2 +- 6 files changed, 79 insertions(+), 12 deletions(-) diff --git a/src/components/SendNotifications.tsx b/src/components/SendNotifications.tsx index 517d8e09e3..e78df56766 100644 --- a/src/components/SendNotifications.tsx +++ b/src/components/SendNotifications.tsx @@ -1,5 +1,5 @@ // React + Web3 Essentials -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useContext, useEffect, useMemo, useState } from 'react'; // External Packages import Switch from '@material-ui/core/Switch'; @@ -37,6 +37,7 @@ import { appConfig } from 'config'; import { useAccount, useDeviceWidthCheck } from 'hooks'; import APP_PATHS from 'config/AppPaths'; import Tag from './reusables/labels/Tag'; +import { AppContext } from 'contexts/AppContext'; // Constants const CORE_CHAIN_ID = appConfig.coreContractChain; @@ -126,7 +127,7 @@ function SendNotifications() { return state.canSend; }); const onCoreNetwork = CORE_CHAIN_ID === chainId; - +const {handleConnectWallet} = useContext(AppContext); const [nfProcessing, setNFProcessing] = useState(0); const [channelAddress, setChannelAddress] = useState(''); const [nfRecipient, setNFRecipient] = useState(account); @@ -296,6 +297,18 @@ function SendNotifications() { const handleSendMessage = async (e) => { // Check everything in order e.preventDefault(); + console.log("User push sdk instance",userPushSDKInstance); + + if (!userPushSDKInstance.signer) { + notificationToast.showMessageToast({ + toastTitle: 'Error', + toastMessage: 'Your wallet is not connected.Please Connect.', + toastType: 'ERROR', + getToastIcon: (size) => , + }); + handleConnectWallet(); + return; + } notificationToast.showLoaderToast({ loaderMessage: 'Preparing Notification', diff --git a/src/components/channel/NotificationSettings.tsx b/src/components/channel/NotificationSettings.tsx index bd70d99d87..34c4840ea3 100644 --- a/src/components/channel/NotificationSettings.tsx +++ b/src/components/channel/NotificationSettings.tsx @@ -47,6 +47,7 @@ function NotificationSettings() { const [settingToEdit, setSettingToEdit] = React.useState(undefined); const [isLoading, setIsLoading] = React.useState(false); const [isLoadingSettings, setIsLoadingSettings] = React.useState(true); + const {handleConnectWallet} = useContext(AppContext); const { userPushSDKInstance } = useSelector((state: any) => { return state.user; @@ -131,6 +132,18 @@ function NotificationSettings() { const saveSettings = async () => { try { + + if (!userPushSDKInstance.signer) { + notificationToast.showMessageToast({ + toastTitle: 'Error', + toastMessage: 'Your wallet is not connected.Please Connect.', + toastType: 'ERROR', + getToastIcon: (size) => , + }); + handleConnectWallet(); + return; + } + setIsLoading(true); notificationToast.showLoaderToast({ loaderMessage: 'Waiting for Confirmation...' }); diff --git a/src/components/dropdowns/ManageNotifSettingDropdown.tsx b/src/components/dropdowns/ManageNotifSettingDropdown.tsx index 63b1eb8463..04333a17df 100644 --- a/src/components/dropdowns/ManageNotifSettingDropdown.tsx +++ b/src/components/dropdowns/ManageNotifSettingDropdown.tsx @@ -111,6 +111,7 @@ const ManageNotifSettingDropdown: React.FC = (o return state.user; }); const dispatch = useDispatch(); + const {handleConnectWallet} = useContext(AppContext); const channelSetting = useMemo(() => { if(channelDetail && channelDetail?.channel_settings) { @@ -132,6 +133,18 @@ const ManageNotifSettingDropdown: React.FC = (o const unsubscribeToast = useToast(); const optOutHandler = async ({ setLoading }: { setLoading?: React.Dispatch> }) => { const setLoadingFunc = setLoading || (() => {}); + + if (!userPushSDKInstance.signer) { + unsubscribeToast.showMessageToast({ + toastTitle: 'Error', + toastMessage: 'Your wallet is not connected.Please Connect.', + toastType: 'ERROR', + getToastIcon: (size) => , + }); + handleConnectWallet(); + return; + } + setLoadingFunc(true); try { diff --git a/src/components/dropdowns/OptinNotifSettingDropdown.tsx b/src/components/dropdowns/OptinNotifSettingDropdown.tsx index 44a5dd6a5c..d7d4ae0f88 100644 --- a/src/components/dropdowns/OptinNotifSettingDropdown.tsx +++ b/src/components/dropdowns/OptinNotifSettingDropdown.tsx @@ -153,6 +153,23 @@ const OptinNotifSettingDropdown: React.FC = (opt const optInHandler = async ({ channelSettings, setLoading }: { channelSettings?: ChannelSetting[], setLoading?: React.Dispatch> }) => { const setLoadingFunc = setLoading || (options && options.setLoading) || (() => { }); + + if (!userPushSDKInstance.signer) { + subscribeToast.showMessageToast({ + toastTitle: 'Error', + toastMessage: `You need to connect your wallet. Please Connect your wallet.`, + toastType: 'ERROR', + getToastIcon: (size) => ( + + ), + }); + handleConnectWallet(); + return; + } + setLoadingFunc(true); try { @@ -161,10 +178,6 @@ const OptinNotifSettingDropdown: React.FC = (opt channelAddress = channelDetail.alias_address; } - if (!userPushSDKInstance.signer) { - handleConnectWallet(); - } - subscribeToast.showLoaderToast({ loaderMessage: 'Waiting for Confirmation...' }); await userPushSDKInstance.notification.subscribe(convertAddressToAddrCaip(channelAddress, chainId), { @@ -205,13 +218,9 @@ const OptinNotifSettingDropdown: React.FC = (opt } catch (err) { - let errorMessage = err.message; - if(!userPushSDKInstance.signer){ - errorMessage = 'You need to connect your wallet.' - } subscribeToast.showMessageToast({ toastTitle: 'Error', - toastMessage: `There was an error opting into channel ( ${errorMessage} )`, + toastMessage: `There was an error opting into channel ( ${err.message} )`, toastType: 'ERROR', getToastIcon: (size) => ( = ({ setIsOpen(false); }; + const {handleConnectWallet} = useContext(AppContext); + const subscribeToast = useToast(); const saveUserSettingHandler = async ({ userSettings, setLoading }: { userSettings?: UserSetting[], setLoading?: React.Dispatch> }) => { const setLoadingFunc = setLoading || (() => {}); const saveOnSuccessSettingFunc = onSuccessSave || (() => {}); + + if (!userPushSDKInstance.signer) { + subscribeToast.showMessageToast({ + toastTitle: 'Error', + toastMessage: `You need to connect your wallet. Please Connect your wallet.`, + toastType: 'ERROR', + getToastIcon: (size) => ( + + ), + }); + handleConnectWallet(); + return; + } + setLoadingFunc(true); try { diff --git a/src/hooks/useAccount.tsx b/src/hooks/useAccount.tsx index 761bc0e111..bb093fb4c8 100644 --- a/src/hooks/useAccount.tsx +++ b/src/hooks/useAccount.tsx @@ -54,7 +54,7 @@ export const useAccount = () => { setWalletModules, setPrimaryWallet, provider, - account, + account : account ? account : readOnlyWallet, chainId, isActive, setChain, From 975ad911fe8edd75f28ca0917a4ceef759276209 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Thu, 7 Dec 2023 17:33:52 +0530 Subject: [PATCH 2/2] Dark Mode added in login page --- src/AppLogin.tsx | 119 ++++++++++++++++++-------------- src/components/Dropdown.tsx | 6 +- src/components/ProfileModal.tsx | 4 +- src/contexts/GlobalContext.tsx | 53 +++++++------- src/primaries/Profile.tsx | 6 +- src/structure/Header.tsx | 6 +- 6 files changed, 104 insertions(+), 90 deletions(-) diff --git a/src/AppLogin.tsx b/src/AppLogin.tsx index a18cf26884..11d0481999 100644 --- a/src/AppLogin.tsx +++ b/src/AppLogin.tsx @@ -31,7 +31,7 @@ import { Button, Input, Span } from 'primaries/SharedStyling'; import { AppContext } from 'contexts/AppContext'; import { ethers } from 'ethers'; import { useResolveWeb3Name } from 'hooks/useResolveWeb3Name'; -import { GlobalContext, ReadOnlyWalletMode } from 'contexts/GlobalContext'; +import { GlobalContext } from 'contexts/GlobalContext'; const AppLogin = ({ toggleDarkMode }) => { // React GA Analytics @@ -40,7 +40,7 @@ const AppLogin = ({ toggleDarkMode }) => { // Web3 React logic const { isActive, connect, wallet } = useAccount(); const { web3NameList } = useContext(AppContext); - const { setReadOnlyWallet, readOnlyWallet, setReadOnlyWalletMode } = useContext(GlobalContext); + const { setReadOnlyWallet, readOnlyWallet, setMode } = useContext(GlobalContext); const { authError, setAuthError } = useContext(ErrorContext); const [errorMessage, setErrorMessage] = React.useState(undefined); const [modalHeight, setModalHeight] = React.useState(0); @@ -120,7 +120,7 @@ const AppLogin = ({ toggleDarkMode }) => { if (walletAddress) { const isWallet = ethers.utils.isAddress(walletAddress); if (isWallet) { - setReadOnlyWalletMode(ReadOnlyWalletMode.READ_ONLY_MODE); + setMode('(Read Only)') setReadOnlyWallet(walletAddress); } } @@ -128,19 +128,19 @@ const AppLogin = ({ toggleDarkMode }) => { const initiateGuestModa = () => { const guestModeAddress = '0x0000000000000000000000000000000000000000'; - setReadOnlyWalletMode(ReadOnlyWalletMode.GUEST_MODE); + setMode('(Guest Mode)'); setReadOnlyWallet(guestModeAddress); } const RenderGuestMode = () => { return (
- + -

Read-Only Mode

+

Read-Only Mode

 - + { padding="13px 16px" maxllength="300px" size="16px" - bg="white" + bg={theme.default.bg} height="auto" - border="1px solid #BAC4D6;" + border={`1px solid ${theme.stakingBorder}`} + color={theme.editChannelPrimaryText} focusBorder="1px solid #657795" radius="12px" placeholder='Enter wallet address' @@ -163,10 +164,10 @@ const AppLogin = ({ toggleDarkMode }) => { Read Only Mode - Or + Or Continue as Guest - +
) @@ -216,43 +217,43 @@ const AppLogin = ({ toggleDarkMode }) => { {theme.scheme == 'dark' && } - {modalHeight !== 0 && - - - + {/* {modalHeight !== 0 && */} + + + + + {/* TOS and PRIVACY */} + + By connecting your wallet, You agree to our{' '} + + Terms of Service + {' '} + and our{' '} + + Privacy Policy + + . + - {/* TOS and PRIVACY */} - - By connecting your wallet, You agree to our{' '} - - Terms of Service + + + Note: The Push Protocol has been under development for 2+ years now. It has successfully completed its latest security audits of {' '} + + Push Core V2 {' '} - and our{' '} - - Privacy Policy + smart contracts by Chainsafe. However, always DYOR and anticipate UI bugs or improvements. You can use our {' '} + + Bug Bounty Form + {' '} + to report bugs or communicate with us on our {' '} + + Discord . - - - - Note: The Push Protocol has been under development for 2+ years now. It has successfully completed its latest security audits of {' '} - - Push Core V2 - {' '} - smart contracts by Chainsafe. However, always DYOR and anticipate UI bugs or improvements. You can use our {' '} - - Bug Bounty Form - {' '} - to report bugs or communicate with us on our {' '} - - Discord - - . - - - } + + {/* } */} ); @@ -278,11 +279,20 @@ const LoginButton = styled(ButtonV2)` ` const GuestContainer = styled(ItemVV2)` - // @media ${device.tablet} { - // flex-direction:column; - // } + ` +const InputContainer = styled(ItemHV2)` + gap:8px; + @media ${device.mobileL} { + flex-direction:column; + gap:14px; + } + + @media (max-width:600px) { + flex-direction:column; + } +` const ButtonsContainer = styled.div` display:flex; @@ -290,9 +300,10 @@ const ButtonsContainer = styled.div` gap:8px; align-items:center; - // @media ${device.tablet} { - // flex-direction:column; - // } + @media ${device.mobileL} { + flex-direction:column; + width:100%; + } ` @@ -313,6 +324,9 @@ const FilledButton = styled(ButtonV2)` @media(max-width:600px){ font-size: 14px; } + @media ${device.mobileL} { + width:100%; + } `; @@ -320,10 +334,10 @@ const EmptyButton = styled(ButtonV2)` font-size: 16px; line-height: 19px; flex-direction:row; - border: 1px solid #BAC4D6; + border: 1px solid ${(props) => props.theme.stakingBorder}; flex:1; padding: 13px 0px; - background:#fff; + background:${(props) => props.theme.modalSearchBarBackground}; color:#657795; width:175px; border-radius: 15px; @@ -341,4 +355,9 @@ const EmptyButton = styled(ButtonV2)` @media(max-width:600px){ font-size: 14px; } + @media ${device.mobileL} { + width:100%; + } + + ` diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index bdcd77b15d..3288751c04 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -33,7 +33,7 @@ type DropdownProps = { function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: DropdownProps) { const theme = useTheme(); - const {readOnlyWalletMode} = useContext(GlobalContext); + const {getMode} = useContext(GlobalContext); const getTextColor = (dropdownValue:DropdownValueType) => { return dropdownValue.textColor ? dropdownValue.textColor:textColor? textColor : theme.snackbarBorderText; @@ -75,11 +75,11 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd spacing="1px" width="max-content" > - {dropdownValue?.title} {readOnlyWalletMode} + {dropdownValue?.title} {getMode} {shortenText(dropdownValue?.title,3)} - {readOnlyWalletMode} + {getMode} {dropdownValue?.invertedIcon && ( diff --git a/src/components/ProfileModal.tsx b/src/components/ProfileModal.tsx index ceea8d5b44..f0fa383e06 100644 --- a/src/components/ProfileModal.tsx +++ b/src/components/ProfileModal.tsx @@ -15,7 +15,7 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{ // to close the modal upon a click on backdrop // const containerRef = React.useRef(null); - const {readOnlyWalletMode} = useContext(GlobalContext); + const {getMode} = useContext(GlobalContext); // useClickAway(containerRef, () => onClose()) return( @@ -45,7 +45,7 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{ > {shortenText(dropdownValue?.title,3)} - {readOnlyWalletMode} + {getMode} {dropdownValue?.invertedIcon && >; - readOnlyWalletMode: ReadOnlyWalletMode; - setReadOnlyWalletMode: React.Dispatch>; -}; + readOnlyWallet:any, + setReadOnlyWallet:any, + setMode:(getMode:string)=>void, + getMode:string +} export const GlobalContext = createContext(null); -const GlobalContextProvider = ({ children }) => { - const [readOnlyWallet, setReadOnlyWallet] = useState(); - const [readOnlyWalletMode, setReadOnlyWalletMode] = useState(); +const GlobalContextProvider = ({children})=>{ - return ( - - {children} - - ); -}; + const { userPushSDKInstance } = useSelector((state: any) => { + return state.user; + }); + + const [readOnlyWallet, setReadOnlyWallet] = useState(); + const [getMode,setMode] = useState(''); + + return( + + {children} + + ) +} export default GlobalContextProvider; diff --git a/src/primaries/Profile.tsx b/src/primaries/Profile.tsx index cb53458e66..3f82dd499f 100644 --- a/src/primaries/Profile.tsx +++ b/src/primaries/Profile.tsx @@ -25,7 +25,7 @@ import { SpanV2 } from 'components/reusables/SharedStylingV2.js'; // Create Header const Profile = ({ isDarkMode }) => { const { web3NameList }: AppContextType = useContext(AppContext); - const { setReadOnlyWallet, readOnlyWallet, readOnlyWalletMode }: GlobalContextType = useContext(GlobalContext); + const { setReadOnlyWallet, readOnlyWallet, getMode }: GlobalContextType = useContext(GlobalContext); const { authError } = useContext(ErrorContext); const toggleArrowRef = useRef(null); const dropdownRef = useRef(null); @@ -103,11 +103,11 @@ const Profile = ({ isDarkMode }) => { spinnerColor="#FFF" /> ) : web3Name ? ( - <>{web3Name} {readOnlyWalletMode} + <>{web3Name} {getMode} ) : ( <>{shortenText(account, 5)} )} - {readOnlyWalletMode} + {getMode} arrow )} - {/* {!showSnapMobile && } */} + {!showSnapMobile && } -
Connect Wallet
{isActive && !showLoginControls && !error && (