From e24eb50c98e6b34a0fb21144c8fae2f93a92cf7b Mon Sep 17 00:00:00 2001 From: kalashshah <202051096@iiitvadodara.ac.in> Date: Mon, 18 Dec 2023 17:46:13 +0530 Subject: [PATCH 1/2] refactor: connect wallet toast simplify --- src/App.tsx | 145 +++++++++--------- src/components/ChannelDetails.js | 12 -- src/components/ChannelSettingsDropdown.tsx | 6 - src/components/NavigationButton.js | 16 +- src/components/SendNotifications.tsx | 6 - .../channel/NotificationSettings.tsx | 6 - .../dropdowns/ManageNotifSettingDropdown.tsx | 6 - .../dropdowns/OptinNotifSettingDropdown.tsx | 11 -- .../dropdowns/UpdateNotifSettingDropdown.tsx | 11 -- .../yield/StakingModalComponent.tsx | 12 -- src/components/yield/YieldPoolCard.tsx | 30 ---- src/contexts/AppContext.tsx | 14 +- src/index.js | 20 ++- .../ChannelOwnerDashboard.tsx | 6 - .../createChannel/CreateChannelModule.js | 6 - src/types/context.ts | 5 +- 16 files changed, 99 insertions(+), 213 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 354697b0eb..ca6135c714 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -214,80 +214,79 @@ export default function App() { return ( - {(!isActive || !allowedChain) && ( - - - - )} - - - {isActive && !authError && ( - <> - - - - - - {/* */} - - - -
+ {(!isActive || !allowedChain) && ( + + + + )} + + + {isActive && !authError && ( + <> + + + + + + - - - - {!isSnapPage && - - } - - - {/* Shared among all pages, load universal things here */} - - - - - - - {/* */} - - - - - )} - - + + +
+ + + + {!isSnapPage && + + } + + + {/* Shared among all pages, load universal things here */} + + + + + + + + + + + )} + + ); } diff --git a/src/components/ChannelDetails.js b/src/components/ChannelDetails.js index d8783882c1..b7270985d4 100644 --- a/src/components/ChannelDetails.js +++ b/src/components/ChannelDetails.js @@ -80,12 +80,6 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired, const handleDelegateModal = () => { if (!userPushSDKInstance.signer) { - addDelegateToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: 'Your wallet is not connected.Please Connect.', - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } @@ -170,12 +164,6 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired, const navigateToNotifSettings = () => { if (!userPushSDKInstance.signer) { - addDelegateToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: 'Your wallet is not connected.Please Connect.', - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/components/ChannelSettingsDropdown.tsx b/src/components/ChannelSettingsDropdown.tsx index 22c0dcb7c7..9a6ecd9271 100644 --- a/src/components/ChannelSettingsDropdown.tsx +++ b/src/components/ChannelSettingsDropdown.tsx @@ -129,12 +129,6 @@ function ChannelSettings({ DropdownRef, isDropdownOpen, closeDropdown }: Channel const toggleChannelActivationState = () => { if (isChannelBlocked) return; if (!userPushSDKInstance.signer) { - userSignerToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: 'Please Connect your wallet', - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/components/NavigationButton.js b/src/components/NavigationButton.js index 018816b923..ca9153633b 100644 --- a/src/components/NavigationButton.js +++ b/src/components/NavigationButton.js @@ -59,20 +59,6 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) { RouteLogic = ProtectedRoute; } - const showNavError = () => { - handleConnectWallet(); - navigationToast.showMessageToast({ - toastMessage: `${data.name} is not available in ${mode.slice(1, -1)}`, - toastTitle: 'Please connect your wallet', - toastType: 'ERROR', - getToastIcon: () => - - }); - } - return ( <> {data.loading && ( @@ -102,7 +88,7 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) { margin={definedMargin} bg={bg} active={active?1:0} - onClick={disallowNavigation && showNavError} + onClick={disallowNavigation && handleConnectWallet} className={data?.name?.toLowerCase()}> {data.iconFactory ? ( diff --git a/src/components/SendNotifications.tsx b/src/components/SendNotifications.tsx index e78df56766..06eda421fa 100644 --- a/src/components/SendNotifications.tsx +++ b/src/components/SendNotifications.tsx @@ -300,12 +300,6 @@ const {handleConnectWallet} = useContext(AppContext); 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; } diff --git a/src/components/channel/NotificationSettings.tsx b/src/components/channel/NotificationSettings.tsx index 34c4840ea3..aaa2439f7c 100644 --- a/src/components/channel/NotificationSettings.tsx +++ b/src/components/channel/NotificationSettings.tsx @@ -134,12 +134,6 @@ function NotificationSettings() { try { if (!userPushSDKInstance.signer) { - notificationToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: 'Your wallet is not connected.Please Connect.', - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/components/dropdowns/ManageNotifSettingDropdown.tsx b/src/components/dropdowns/ManageNotifSettingDropdown.tsx index 04333a17df..65fcf46689 100644 --- a/src/components/dropdowns/ManageNotifSettingDropdown.tsx +++ b/src/components/dropdowns/ManageNotifSettingDropdown.tsx @@ -135,12 +135,6 @@ const ManageNotifSettingDropdown: React.FC = (o const setLoadingFunc = setLoading || (() => {}); if (!userPushSDKInstance.signer) { - unsubscribeToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: 'Your wallet is not connected.Please Connect.', - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/components/dropdowns/OptinNotifSettingDropdown.tsx b/src/components/dropdowns/OptinNotifSettingDropdown.tsx index d7d4ae0f88..76604cfd7a 100644 --- a/src/components/dropdowns/OptinNotifSettingDropdown.tsx +++ b/src/components/dropdowns/OptinNotifSettingDropdown.tsx @@ -155,17 +155,6 @@ const OptinNotifSettingDropdown: React.FC = (opt 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; } diff --git a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx index e1caec5f2e..4217d65347 100644 --- a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx +++ b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx @@ -156,17 +156,6 @@ const UpdateNotifSettingDropdown: React.FC = ({ 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; } diff --git a/src/components/yield/StakingModalComponent.tsx b/src/components/yield/StakingModalComponent.tsx index 81f26861d2..3e93649587 100644 --- a/src/components/yield/StakingModalComponent.tsx +++ b/src/components/yield/StakingModalComponent.tsx @@ -95,12 +95,6 @@ const StakingModalComponent = ({ onClose, InnerComponentProps, toastObject }) => const approveDeposit = async () => { if(!userPushSDKInstance.signer) { - toastObject.showMessageToast({ - toastTitle: 'Error', - toastMessage: `Please connect your wallet`, - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } @@ -176,12 +170,6 @@ const StakingModalComponent = ({ onClose, InnerComponentProps, toastObject }) => const depositAmountTokenFarmSingleTx = async () => { if(!userPushSDKInstance.signer) { - toastObject.showMessageToast({ - toastTitle: 'Error', - toastMessage: `Please connect your wallet`, - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/components/yield/YieldPoolCard.tsx b/src/components/yield/YieldPoolCard.tsx index 7cf98f66f4..1d3c28dbda 100644 --- a/src/components/yield/YieldPoolCard.tsx +++ b/src/components/yield/YieldPoolCard.tsx @@ -56,12 +56,6 @@ const YieldPoolCard = ({ const massClaimRewardsTokensAll = async () => { if(!userPushSDKInstance.signer) { - yieldFarmToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: `Please connect your wallet`, - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } @@ -145,12 +139,6 @@ const YieldPoolCard = ({ const withdrawTokens = async () => { if(!userPushSDKInstance.signer) { - yieldFarmToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: `Please connect your wallet`, - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } @@ -227,12 +215,6 @@ const YieldPoolCard = ({ const migrateToNewPool = async () => { if(!userPushSDKInstance.signer) { - yieldFarmToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: `Please connect your wallet`, - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } @@ -462,12 +444,6 @@ const YieldPoolCard = ({ const depositLpToken = async (tx, withdrawAmount, totalTxnSteps) => { if(!userPushSDKInstance.signer) { - yieldFarmToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: `Please connect your wallet`, - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } @@ -523,12 +499,6 @@ const YieldPoolCard = ({ const depositPushToken = async (tx, withdrawAmount, totalTxnSteps) => { if(!userPushSDKInstance.signer) { - yieldFarmToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: `Please connect your wallet`, - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx index e6cb4f8ed8..62ac98f95c 100644 --- a/src/contexts/AppContext.tsx +++ b/src/contexts/AppContext.tsx @@ -9,14 +9,17 @@ import { AppContextType, Web3NameListType } from "types/context" import { useAccount } from "hooks"; import { appConfig } from "config"; import { useDispatch } from "react-redux"; +import { MdError } from "react-icons/md"; import { setUserPushSDKInstance } from "redux/slices/userSlice"; import { GlobalContext } from "./GlobalContext"; +import useToast from "hooks/useToast"; export const AppContext = createContext(null); const AppContextProvider = ({ children }) => { const { connect, provider, account, wallet, connecting } = useAccount(); const { readOnlyWallet } = useContext(GlobalContext); + const web3onboardToast = useToast(); const [web3NameList, setWeb3NameList] = useState({}); @@ -29,7 +32,16 @@ const AppContextProvider = ({ children }) => { const dispatch = useDispatch(); - const handleConnectWallet = () => { + const handleConnectWallet = (showToast = false, toastMessage?: string) => { + if(showToast) { + web3onboardToast.showMessageToast({ + toastMessage: toastMessage || "Please connect your wallet to continue", + toastTitle: "Connect Wallet", + toastType: "ERROR", + getToastIcon: (size) => , + }); + } + const onboardModal = document.getElementById("onboard-container"); onboardModal.style.display = 'block'; // Open the onboard modal diff --git a/src/index.js b/src/index.js index 688a73bdc6..2569e8a9ab 100644 --- a/src/index.js +++ b/src/index.js @@ -52,17 +52,15 @@ ReactDOM.render( - - - - - - - - - - - + + + + + + + + + diff --git a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx b/src/modules/channelDashboard/ChannelOwnerDashboard.tsx index 3bbedf8911..78fdec3c8f 100644 --- a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx +++ b/src/modules/channelDashboard/ChannelOwnerDashboard.tsx @@ -150,12 +150,6 @@ const ChannelOwnerDashboard = () => { const showEditChannel = () => { if (!userPushSDKInstance.signer) { - destroyChannelToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: 'Please Connect your wallet', - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/modules/createChannel/CreateChannelModule.js b/src/modules/createChannel/CreateChannelModule.js index e6ba58c61c..081d4eb177 100644 --- a/src/modules/createChannel/CreateChannelModule.js +++ b/src/modules/createChannel/CreateChannelModule.js @@ -241,12 +241,6 @@ function CreateChannelModule() { // e.preventDefault(); if (!userPushSDKInstance.signer) { - channelToast.showMessageToast({ - toastTitle: 'Error', - toastMessage: 'Please Connect your wallet', - toastType: 'ERROR', - getToastIcon: (size) => , - }); handleConnectWallet(); return; } diff --git a/src/types/context.ts b/src/types/context.ts index 00307cdd4f..fbcd357f68 100644 --- a/src/types/context.ts +++ b/src/types/context.ts @@ -12,5 +12,8 @@ export interface AppContextType { SnapState: number; setSnapState: any; initializePushSDK: any; - handleConnectWallet:any; + handleConnectWallet: ( + showToast?: boolean, + toastMessage?: string + ) => void; } From d2af0fd1b1bf8194c7e9cc374534d6b6908cd472 Mon Sep 17 00:00:00 2001 From: kalashshah <202051096@iiitvadodara.ac.in> Date: Wed, 20 Dec 2023 11:55:11 +0530 Subject: [PATCH 2/2] fix: bg flur for onboard modal --- src/AppLogin.tsx | 21 +++++---------- src/components/NavigationButton.js | 6 ++++- src/contexts/AppContext.tsx | 41 ++++++++++++++---------------- 3 files changed, 30 insertions(+), 38 deletions(-) diff --git a/src/AppLogin.tsx b/src/AppLogin.tsx index c2cd06be2c..3d52f9a989 100644 --- a/src/AppLogin.tsx +++ b/src/AppLogin.tsx @@ -10,14 +10,12 @@ import BlurBGClouds from 'components/reusables/blurs/BlurBGClouds'; import { AInlineV2, ButtonV2, - H2V2, - ImageV2, ItemHV2, ItemVV2, SectionV2, SpanV2 } from 'components/reusables/SharedStylingV2'; -import { useAccount, useDeviceWidthCheck } from 'hooks'; +import { useAccount } from 'hooks'; import styled, { keyframes, useTheme } from 'styled-components'; import { ReactComponent as PushLogoDark } from './assets/pushDark.svg'; import { ReactComponent as PushLogoLight } from './assets/pushLight.svg'; @@ -27,10 +25,9 @@ import { ReactComponent as InfoLogo } from "./assets/inforWithoutBG.svg"; // Internal Configs import GLOBALS, { device } from 'config/Globals'; import { H2 } from 'components/SharedStyling'; -import { Button, Input, Span } from 'primaries/SharedStyling'; +import { 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'; const AppLogin = ({ toggleDarkMode }) => { @@ -44,16 +41,10 @@ const AppLogin = ({ toggleDarkMode }) => { const { authError, setAuthError } = useContext(ErrorContext); const [errorMessage, setErrorMessage] = React.useState(undefined); const [modalHeight, setModalHeight] = React.useState(0); - const [modalWidth, setModalWidth] = React.useState(0); - - const isMobile = useDeviceWidthCheck(600); // theme context const theme = useTheme(); - // SET LOADING - const [loading, setLoading] = useState(true); - // handle error functions function handleErrorMessage(error: Error) { setErrorMessage(error); @@ -67,12 +58,12 @@ const AppLogin = ({ toggleDarkMode }) => { useEffect(() => { let observer: ResizeObserver | undefined; + let onboardModal: HTMLElement; try { setAuthError(undefined); - const onboardModal = document.getElementById("onboard-container"); - const observer = new ResizeObserver(() => { + onboardModal = document.getElementById("onboard-container"); + observer = new ResizeObserver(() => { setModalHeight(onboardModal.offsetHeight); - setModalWidth(onboardModal.offsetWidth); }); if (!readOnlyWallet) { onboardModal.style.display = 'block'; @@ -86,7 +77,6 @@ const AppLogin = ({ toggleDarkMode }) => { if(!readOnlyWallet) { connect(); setModalHeight(0); - setModalWidth(0); } } catch (error) { @@ -94,6 +84,7 @@ const AppLogin = ({ toggleDarkMode }) => { setAuthError(error); } return () => { + onboardModal && observer?.unobserve(onboardModal); observer?.disconnect(); } }, [isActive]); diff --git a/src/components/NavigationButton.js b/src/components/NavigationButton.js index ca9153633b..54f424acfc 100644 --- a/src/components/NavigationButton.js +++ b/src/components/NavigationButton.js @@ -59,6 +59,10 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) { RouteLogic = ProtectedRoute; } + const handleDisallowedNav = () => { + handleConnectWallet(); + } + return ( <> {data.loading && ( @@ -88,7 +92,7 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) { margin={definedMargin} bg={bg} active={active?1:0} - onClick={disallowNavigation && handleConnectWallet} + onClick={disallowNavigation && handleDisallowedNav} className={data?.name?.toLowerCase()}> {data.iconFactory ? ( diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx index 62ac98f95c..578bd8dc74 100644 --- a/src/contexts/AppContext.tsx +++ b/src/contexts/AppContext.tsx @@ -47,31 +47,28 @@ const AppContextProvider = ({ children }) => { // Open the onboard modal connect(); - // Create an observer instance and apply custom styles to the divElement once it is found - const observer = new MutationObserver(function (mutations) { - mutations.forEach(function (mutation) { - if (mutation.addedNodes && mutation.addedNodes.length > 0) { - // Check if the divElement now exists in the DOM - const sectionElement = document.querySelector('onboard-v2')?.shadowRoot?.querySelector('.svelte-baitaa'); - const divElement = sectionElement?.querySelector('div'); - if (divElement) { - // Disconnect the observer once the divElement is found - observer.disconnect(); - // Apply custom styles - divElement.style.position = 'fixed'; - divElement.style.top = '0px'; - divElement.style.right = '0px'; - divElement.style.height = '100vh'; - divElement.style.left = '0px'; - divElement.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'; - divElement.style.backdropFilter = 'blur(5px)'; - } - } - }); + // Create a resize observer to detect when the onboard modal is rendered + const observer = new ResizeObserver(() => { + const sectionElement = document.querySelector('onboard-v2')?.shadowRoot?.querySelector('.svelte-baitaa'); + const divElement = sectionElement?.querySelector('div'); + if (divElement) { + // Disconnect the observer once the divElement is found + observer.unobserve(onboardModal); + observer.disconnect(); + + // Apply custom styles + divElement.style.position = 'fixed'; + divElement.style.top = '0px'; + divElement.style.right = '0px'; + divElement.style.height = '100vh'; + divElement.style.left = '0px'; + divElement.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'; + divElement.style.backdropFilter = 'blur(5px)'; + } }); // Start observing the DOM for changes - observer.observe(document.body, { childList: true, subtree: true }); + observer.observe(onboardModal); } const initialisePushSdkGuestMode = async () => {