Merge pull request #1343 from ethereum-push-notification-service/refa…

…ctor/connect-wallet-toast refactor: connect wallet toast simplify
push-protocol · Dec 20, 2023 · a629b13 · a629b13
2 parents 5eef39b + d2af0fd
commit a629b13
Show file tree

Hide file tree

Showing 17 changed files with 125 additions and 247 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -214,80 +214,79 @@ export default function App() {
 
   return (
     <ThemeProvider theme={darkMode ? themeDark : themeLight}>
-      {(!isActive || !allowedChain) && (
-        <SectionV2 minHeight="100vh">
-          <AppLogin toggleDarkMode={toggleDarkMode} />
-        </SectionV2>
-      )}
-
-
-      {isActive && !authError  && (
-        <>
-          <GlobalStyle />
-          <InitState />
-          <NavigationContextProvider>
-            <SpaceContextProvider>
-              <SpaceComponentContextProvider spaceUI={spaceUI}>
-                {/* <AppContextProvider> */}
-                <Joyride
-                  run={run}
-                  steps={steps}
-                  continuous={tutorialContinous}
-                  stepIndex={stepIndex}
-                  // hideFooter={true}
-                  // primaryProps={false}
-                  hideBackButton={true}
-                  hideCloseButton={false}
-                  disableScrolling={true}
-                  disableScrollParentFix={true}
-                  // disableFlip={true}
-                  // showNextButton={false}
-                  showSkipButton={false}
-                  disableOverlayClose={true}
-                  callback={handleJoyrideCallback}
-                  styles={{
-                    options: {
-                      arrowColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
-                      backgroundColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
-                      overlayColor: darkMode ? themeDark.dynamicTutsBgOverlay : themeLight.dynamicTutsBgOverlay,
-                      primaryColor: darkMode ? themeDark.dynamicTutsPrimaryColor : themeLight.dynamicTutsPrimaryColor,
-                      textColor: darkMode ? themeDark.dynamicTutsFontColor : themeLight.dynamicTutsFontColor,
-                      zIndex: 1000,
-                    },
-                  }}
-                />
-
-                <HeaderContainer>
-                  <Header
-                    isDarkMode={darkMode}
-                    darkModeToggle={toggleDarkMode}
+      <AppContextProvider>
+        {(!isActive || !allowedChain) && (
+          <SectionV2 minHeight="100vh">
+            <AppLogin toggleDarkMode={toggleDarkMode} />
+          </SectionV2>
+        )}
+
+
+        {isActive && !authError  && (
+          <>
+            <GlobalStyle />
+            <InitState />
+            <NavigationContextProvider>
+              <SpaceContextProvider>
+                <SpaceComponentContextProvider spaceUI={spaceUI}>
+                  <Joyride
+                    run={run}
+                    steps={steps}
+                    continuous={tutorialContinous}
+                    stepIndex={stepIndex}
+                    // hideFooter={true}
+                    // primaryProps={false}
+                    hideBackButton={true}
+                    hideCloseButton={false}
+                    disableScrolling={true}
+                    disableScrollParentFix={true}
+                    // disableFlip={true}
+                    // showNextButton={false}
+                    showSkipButton={false}
+                    disableOverlayClose={true}
+                    callback={handleJoyrideCallback}
+                    styles={{
+                      options: {
+                        arrowColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
+                        backgroundColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
+                        overlayColor: darkMode ? themeDark.dynamicTutsBgOverlay : themeLight.dynamicTutsBgOverlay,
+                        primaryColor: darkMode ? themeDark.dynamicTutsPrimaryColor : themeLight.dynamicTutsPrimaryColor,
+                        textColor: darkMode ? themeDark.dynamicTutsFontColor : themeLight.dynamicTutsFontColor,
+                        zIndex: 1000,
+                      },
+                    }}
                   />
-                </HeaderContainer>
-
-                <ParentContainer
-                  bg={darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG}
-                  headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
-                >
-                  {!isSnapPage && <LeftBarContainer leftBarWidth={GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
-                    <Navigation />
-                  </LeftBarContainer>}
-
-                  <ContentContainer leftBarWidth={isSnapPage ? 0 : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
-                    {/* Shared among all pages, load universal things here */}
-                    <SpacesUIProvider spaceUI={spaceUI} theme={darkMode ? darkTheme : lightTheme}>
-                      <MasterInterfacePage />
-                      <SpaceWidgetSection />
-                    </SpacesUIProvider>
-                  </ContentContainer>
-                </ParentContainer>
-                {/* </AppContextProvider> */}
-              </SpaceComponentContextProvider>
-            </SpaceContextProvider>
-          </NavigationContextProvider>
-        </>
-      )}
-
-
+
+                  <HeaderContainer>
+                    <Header
+                      isDarkMode={darkMode}
+                      darkModeToggle={toggleDarkMode}
+                    />
+                  </HeaderContainer>
+
+                  <ParentContainer
+                    bg={darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG}
+                    headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
+                  >
+                    {!isSnapPage && <LeftBarContainer leftBarWidth={GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
+                      <Navigation />
+                    </LeftBarContainer>}
+
+                    <ContentContainer leftBarWidth={isSnapPage ? 0 : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
+                      {/* Shared among all pages, load universal things here */}
+                      <SpacesUIProvider spaceUI={spaceUI} theme={darkMode ? darkTheme : lightTheme}>
+                        <MasterInterfacePage />
+                        <SpaceWidgetSection />
+                      </SpacesUIProvider>
+                    </ContentContainer>
+                  </ParentContainer>
+                </SpaceComponentContextProvider>
+              </SpaceContextProvider>
+            </NavigationContextProvider>
+          </>
+        )}
+
+      </AppContextProvider>
     </ThemeProvider>
   );
 }

diff --git 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,14 +77,14 @@ const AppLogin = ({ toggleDarkMode }) => {
       if(!readOnlyWallet) {
         connect();
         setModalHeight(0);
-        setModalWidth(0);
       }
     }
     catch (error) {
       console.log("Error !!!!! >>>>>>>", error);
       setAuthError(error);
     }
     return () => {
+      onboardModal && observer?.unobserve(onboardModal);
       observer?.disconnect();
     }
   }, [isActive]);

diff --git 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) => <MdError size={size} color="red" />,
-      });
       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) => <MdError size={size} color="red" />,
-      });
       handleConnectWallet();
       return;
     }

diff --git 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) => <MdError size={size} color="red" />,
-      });
       handleConnectWallet();
       return;
     }

diff --git a/src/components/NavigationButton.js b/src/components/NavigationButton.js
@@ -59,18 +59,8 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) {
     RouteLogic = ProtectedRoute;
   }
 
-  const showNavError = () => {
+  const handleDisallowedNav = () => {
     handleConnectWallet();
-    navigationToast.showMessageToast({
-      toastMessage: `${data.name} is not available in ${mode.slice(1, -1)}`,
-      toastTitle: 'Please connect your wallet',
-      toastType: 'ERROR',
-      getToastIcon: () => 
-        <MdError 
-          color='red'
-          size={24}
-        />
-    });
   }
 
   return (
@@ -102,7 +92,7 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) {
           margin={definedMargin}
           bg={bg}
           active={active?1:0}
-          onClick={disallowNavigation && showNavError}
+          onClick={disallowNavigation && handleDisallowedNav}
           className={data?.name?.toLowerCase()}>
           {data.iconFactory ? (
             <ItemHV2 justifyContent="flex-start" padding="0 2rem">

diff --git a/src/components/SendNotifications.tsx b/src/components/SendNotifications.tsx
@@ -299,12 +299,6 @@ const {handleConnectWallet} = useContext(AppContext);
     e.preventDefault();
 
     if (!userPushSDKInstance.signer) {
-      notificationToast.showMessageToast({
-        toastTitle: 'Error',
-        toastMessage: 'Your wallet is not connected.Please Connect.',
-        toastType: 'ERROR',
-        getToastIcon: (size) => <MdError size={size} color="red" />,
-      });
       handleConnectWallet();
       return;
     }

diff --git 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) => <MdError size={size} color="red" />,
-        });
         handleConnectWallet();
         return;
       }

diff --git a/src/components/dropdowns/ManageNotifSettingDropdown.tsx b/src/components/dropdowns/ManageNotifSettingDropdown.tsx
@@ -135,12 +135,6 @@ const ManageNotifSettingDropdown: React.FC<ManageNotifSettingDropdownProps> = (o
     const setLoadingFunc = setLoading || (() => {});
 
     if (!userPushSDKInstance.signer) {
-      unsubscribeToast.showMessageToast({
-        toastTitle: 'Error',
-        toastMessage: 'Your wallet is not connected.Please Connect.',
-        toastType: 'ERROR',
-        getToastIcon: (size) => <MdError size={size} color="red" />,
-      });
       handleConnectWallet();
       return;
     }

diff --git a/src/components/dropdowns/OptinNotifSettingDropdown.tsx b/src/components/dropdowns/OptinNotifSettingDropdown.tsx
@@ -155,17 +155,6 @@ const OptinNotifSettingDropdown: React.FC<OptinNotifSettingDropdownProps> = (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) => (
-          <MdError
-            size={size}
-            color="red"
-          />
-        ),
-      });
       handleConnectWallet();
       return;
     }

diff --git a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx
@@ -156,17 +156,6 @@ const UpdateNotifSettingDropdown: React.FC<UpdateNotifSettingDropdownProps> = ({
     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) => (
-          <MdError
-            size={size}
-            color="red"
-          />
-        ),
-      });
       handleConnectWallet();
       return;
     }

diff --git 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) => <MdError size={size} color="red" />,
-            });
             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) => <MdError size={size} color="red" />,
-            });
             handleConnectWallet();
             return;
         }