Fix document issues

multiversx · Dec 11, 2023 · ddde77f · ddde77f
1 parent d945f05
commit ddde77f
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 48 deletions.
diff --git a/src/UI/DappModal/components/DappModal.tsx b/src/UI/DappModal/components/DappModal.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react';
+import { useState } from 'react';
+import { useEffect } from 'react';
 import classNames from 'classnames';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import { DataTestIdsEnum } from 'constants/index';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
 import { WithClassnameType } from '../../types';
@@ -36,6 +38,12 @@ const DappModalComponent = ({
   visible,
   styles
 }: DappModalPropsType & WithStylesImportType) => {
+  const [isBrowser, setIsBrowser] = useState(false);
+
+  useEffect(() => {
+    setIsBrowser(true);
+  }, []);
+
   if (!visible) {
     return null;
   }
@@ -56,38 +64,52 @@ const DappModalComponent = ({
     customModalFooter
   } = config;
 
-  return ReactDOM.createPortal(
-    <div
-      id={id}
-      role='dialog'
-      aria-modal='true'
-      className={classNames(modalDialogClassName, styles?.dappModal, className)}
-      data-testid={dataTestId}
-    >
-      <div
-        className={classNames(styles?.dappModalContent, modalContentClassName)}
-      >
-        <DappModalHeader
-          visible={showHeader}
-          headerText={headerText}
-          customHeader={customModalHeader}
-          className={modalHeaderClassName}
-          headerTextClassName={modalHeaderTextClassName}
-          closeButtonClassName={modalCloseButtonClassName}
-          onHide={onHide}
-        />
+  return (
+    <>
+      {isBrowser &&
+        createPortal(
+          <div
+            id={id}
+            role='dialog'
+            aria-modal='true'
+            className={classNames(
+              modalDialogClassName,
+              styles?.dappModal,
+              className
+            )}
+            data-testid={dataTestId}
+          >
+            <div
+              className={classNames(
+                styles?.dappModalContent,
+                modalContentClassName
+              )}
+            >
+              <DappModalHeader
+                visible={showHeader}
+                headerText={headerText}
+                customHeader={customModalHeader}
+                className={modalHeaderClassName}
+                headerTextClassName={modalHeaderTextClassName}
+                closeButtonClassName={modalCloseButtonClassName}
+                onHide={onHide}
+              />
 
-        <DappModalBody className={modalBodyClassName}>{children}</DappModalBody>
+              <DappModalBody className={modalBodyClassName}>
+                {children}
+              </DappModalBody>
 
-        <DappModalFooter
-          visible={showFooter}
-          customFooter={customModalFooter}
-          footerText={footerText}
-          className={modalFooterClassName}
-        />
-      </div>
-    </div>,
-    parentElement ?? document?.body
+              <DappModalFooter
+                visible={showFooter}
+                customFooter={customModalFooter}
+                footerText={footerText}
+                className={modalFooterClassName}
+              />
+            </div>
+          </div>,
+          parentElement ?? document?.body
+        )}
+    </>
   );
 };
 

diff --git a/src/UI/TransactionsToastList/TransactionsToastList.tsx b/src/UI/TransactionsToastList/TransactionsToastList.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
@@ -53,6 +59,7 @@ export const TransactionsToastListComponent = ({
   children,
   styles
 }: TransactionsToastListPropsType & WithStylesImportType) => {
+  const [isBrowser, setIsBrowser] = useState(false);
   const customToasts = useSelector(customToastsSelector);
   const transactionsToasts = useSelector(transactionToastsSelector);
   const dispatch = useDispatch();
@@ -174,6 +181,8 @@ export const TransactionsToastListComponent = ({
   };
 
   useEffect(() => {
+    setIsBrowser(true);
+
     window?.addEventListener(
       'beforeunload',
       clearNotPendingTransactionsFromStorage
@@ -187,13 +196,18 @@ export const TransactionsToastListComponent = ({
     };
   }, []);
 
-  return createPortal(
-    <div className={classNames(styles?.toasts, className)}>
-      {customToastsList}
-      {MemoizedTransactionsToastsList}
-      {children}
-    </div>,
-    parentElement || document?.body
+  return (
+    <>
+      {isBrowser &&
+        createPortal(
+          <div className={classNames(styles?.toasts, className)}>
+            {customToastsList}
+            {MemoizedTransactionsToastsList}
+            {children}
+          </div>,
+          parentElement || document?.body
+        )}
+    </>
   );
 };
 

diff --git a/src/hocs/useStyles.ts b/src/hocs/useStyles.ts
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
-import { useSelector } from '../reduxStore/DappProviderContext';
-import { dappConfigSelector } from '../reduxStore/selectors';
+import { isSSR } from 'utils/isSSR';
 
 type StylesType = typeof import('*.scss');
 
@@ -9,8 +8,12 @@ export type WithStylesImportType = {
   styles?: Record<any, any>;
 };
 
-const defaultGlobalImport = async () => await import('assets/sass/main.scss');
+const defaultServerGlobalImport = async () =>
+  await import('assets/sass/main.scss');
+const defaultClientGlobalImport = () =>
+  require('assets/sass/main.scss').default;
 
+const ssr = isSSR();
 export function useStyles({
   ssrGlobalImportCallback,
   ssrImportCallback,
@@ -20,19 +23,17 @@ export function useStyles({
   ssrImportCallback?: () => Promise<StylesType>;
   clientImportCallback?: () => StylesType;
 }) {
-  const dappConfig = useSelector(dappConfigSelector);
-
   const [globalStyles, setGlobalStyles] = React.useState<Record<any, any>>(
-    dappConfig?.isSSR ? undefined : require('assets/sass/main.scss').default
+    ssr ? undefined : defaultClientGlobalImport()
   );
   const [styles, setStyles] = React.useState<Record<any, any> | undefined>(
-    dappConfig?.isSSR ? undefined : clientImportCallback?.()
+    ssr ? undefined : clientImportCallback?.()
   );
 
   const importStyles = async () => {
     (ssrGlobalImportCallback
       ? ssrGlobalImportCallback()
-      : defaultGlobalImport()
+      : defaultServerGlobalImport()
     ).then((styles: StylesType) => setGlobalStyles(styles.default));
 
     ssrImportCallback?.().then((styles: StylesType) =>
@@ -41,7 +42,7 @@ export function useStyles({
   };
 
   useEffect(() => {
-    if (dappConfig?.isSSR) {
+    if (ssr) {
       importStyles();
     }
   }, []);

diff --git a/src/utils/isSSR.ts b/src/utils/isSSR.ts
@@ -0,0 +1,3 @@
+import { isWindowAvailable } from './isWindowAvailable';
+
+export const isSSR = () => !isWindowAvailable();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { isWindowAvailable } from './isWindowAvailable';

		export const isSSR = () => !isWindowAvailable();