CSS injection on SSR/Client side (#981)

* refactor some components as models for the rest one * refactor using another approach without the need of having different ssr component * refactor copyBtn in order to use the new refactoring approach * general refactoring according to the new styles application approach * refactoring and cleanup * Add localSync to DappModal and revert changes * refactoring * Update all components * Fix callbacks * Remove isSSR check * 2.24.3-alpha.0 * Absolue path to mocks * Fix document issues * 2.24.3-alpha.2 * Revert version * Update changelog --------- Co-authored-by: cipriandraghici <[email protected]>
multiversx · Dec 11, 2023 · 4e66662 · 4e66662
1 parent 9ad5efd
commit 4e66662
Show file tree

Hide file tree

Showing 104 changed files with 545 additions and 226 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 - [Add entire dappConfig into redux store](https://github.com/multiversx/mx-sdk-dapp/pull/982)
+- [Fix CSS injection on SSR/Client side](https://github.com/multiversx/mx-sdk-dapp/pull/981)
 ## [[v2.24.3]](https://github.com/multiversx/mx-sdk-dapp/pull/979)] - 2023-11-29
 
 - [Removed `senderUsername` and `receiverUsername` for `SetGuardian` tx](https://github.com/multiversx/mx-sdk-dapp/pull/978)

diff --git a/src/UI/CopyButton/CopyButton.tsx b/src/UI/CopyButton/CopyButton.tsx
@@ -60,5 +60,6 @@ const CopyButtonComponent = ({
 };
 
 export const CopyButton = withStyles(CopyButtonComponent, {
-  local: () => import('UI/CopyButton/copyButton.styles.scss')
+  ssrStyles: () => import('UI/CopyButton/copyButton.styles.scss'),
+  clientStyles: () => require('UI/CopyButton/copyButton.styles.scss').default
 });
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,41 +64,56 @@ 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
+        )}
+    </>
   );
 };
 
 export const DappModal = withStyles(DappModalComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/DappModal/components/DappModalBody.tsx b/src/UI/DappModal/components/DappModalBody.tsx
@@ -20,5 +20,6 @@ const DappModalBodyComponent = ({
 };
 
 export const DappModalBody = withStyles(DappModalBodyComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/DappModal/components/DappModalFooter.tsx b/src/UI/DappModal/components/DappModalFooter.tsx
@@ -28,5 +28,6 @@ const DappModalFooterComponent = ({
 };
 
 export const DappModalFooter = withStyles(DappModalFooterComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/DappModal/components/DappModalHeader.tsx b/src/UI/DappModal/components/DappModalHeader.tsx
@@ -57,5 +57,6 @@ const DappModalHeaderComponent = ({
 };
 
 export const DappModalHeader = withStyles(DappModalHeaderComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/ExplorerLink/ExplorerLink.tsx b/src/UI/ExplorerLink/ExplorerLink.tsx
@@ -56,5 +56,6 @@ const ExplorerLinkComponent = ({
 };
 
 export const ExplorerLink = withStyles(ExplorerLinkComponent, {
-  local: () => import('UI/ExplorerLink/explorerLinkStyles.scss')
+  ssrStyles: () => import('UI/ExplorerLink/explorerLinkStyles.scss'),
+  clientStyles: () => require('UI/ExplorerLink/explorerLinkStyles.scss').default
 });
diff --git a/src/UI/FormatAmount/FormatAmount.tsx b/src/UI/FormatAmount/FormatAmount.tsx
@@ -129,5 +129,6 @@ const FormatAmountWrapper = (
 };
 
 export const FormatAmount = withStyles(FormatAmountWrapper, {
-  local: () => import('UI/FormatAmount/formatAmountStyles.scss')
+  ssrStyles: () => import('UI/FormatAmount/formatAmountStyles.scss'),
+  clientStyles: () => require('UI/FormatAmount/formatAmountStyles.scss').default
 });
diff --git a/src/UI/LoadingDots/LoadingDots.tsx b/src/UI/LoadingDots/LoadingDots.tsx
@@ -23,5 +23,6 @@ const LoadingDotsComponent = ({
 );
 
 export const LoadingDots = withStyles(LoadingDotsComponent, {
-  local: () => import('UI/LoadingDots/loadingDotsStyle.scss')
+  ssrStyles: () => import('UI/LoadingDots/loadingDotsStyle.scss'),
+  clientStyles: () => require('UI/LoadingDots/loadingDotsStyle.scss').default
 });
diff --git a/src/UI/LoginButton/LoginButton.tsx b/src/UI/LoginButton/LoginButton.tsx
@@ -54,5 +54,6 @@ const LoginButtonComponent = ({
 };
 
 export const LoginButton = withStyles(LoginButtonComponent, {
-  local: () => import('UI/LoginButton/loginButtonStyles.scss')
+  ssrStyles: () => import('UI/LoginButton/loginButtonStyles.scss'),
+  clientStyles: () => require('UI/LoginButton/loginButtonStyles.scss').default
 });
diff --git a/src/UI/LoginButton/index.ts b/src/UI/LoginButton/index.ts
@@ -0,0 +1 @@
+export * from './LoginButton';
diff --git a/src/UI/PageState/PageState.tsx b/src/UI/PageState/PageState.tsx
@@ -71,5 +71,6 @@ const PageStateComponent = ({
 };
 
 export const PageState = withStyles(PageStateComponent, {
-  local: () => import('UI/PageState/pageState.styles.scss')
+  ssrStyles: () => import('UI/PageState/pageState.styles.scss'),
+  clientStyles: () => require('UI/PageState/pageState.styles.scss').default
 });
diff --git a/src/UI/Progress/index.tsx b/src/UI/Progress/index.tsx
@@ -186,5 +186,6 @@ const ProgressComponent = ({
 };
 
 export const Progress = withStyles(ProgressComponent, {
-  local: () => import('UI/Progress/progressStyles.scss')
+  ssrStyles: () => import('UI/Progress/progressStyles.scss'),
+  clientStyles: () => require('UI/Progress/progressStyles.scss').default
 });
diff --git a/src/UI/ProgressSteps/Dot.tsx b/src/UI/ProgressSteps/Dot.tsx
@@ -21,5 +21,6 @@ const DotComponent = ({
 );
 
 export const Dot = withStyles(DotComponent, {
-  local: () => import('UI/LoadingDots/loadingDotsStyle.scss')
+  ssrStyles: () => import('UI/LoadingDots/loadingDotsStyle.scss'),
+  clientStyles: () => require('UI/LoadingDots/loadingDotsStyle.scss').default
 });
diff --git a/src/UI/ProgressSteps/index.tsx b/src/UI/ProgressSteps/index.tsx
@@ -66,5 +66,6 @@ const ProgressStepsComponent = ({
 };
 
 export const ProgressSteps = withStyles(ProgressStepsComponent, {
-  local: () => import('UI/LoadingDots/loadingDotsStyle.scss')
+  ssrStyles: () => import('UI/LoadingDots/loadingDotsStyle.scss'),
+  clientStyles: () => require('UI/LoadingDots/loadingDotsStyle.scss').default
 });
diff --git a/src/UI/ScamPhishingAlert/ScamPhishingAlert.tsx b/src/UI/ScamPhishingAlert/ScamPhishingAlert.tsx
@@ -77,5 +77,7 @@ const ScamPhishingAlertComponent = (
 };
 
 export const ScamPhishingAlert = withStyles(ScamPhishingAlertComponent, {
-  local: () => import('UI/ScamPhishingAlert/scamPhishingStyles.scss')
+  ssrStyles: () => import('UI/ScamPhishingAlert/scamPhishingStyles.scss'),
+  clientStyles: () =>
+    require('UI/ScamPhishingAlert/scamPhishingStyles.scss').default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx
@@ -225,8 +225,11 @@ const SignStepComponent = (props: SignStepType & WithStylesImportType) => {
 };
 
 export const SignStep = withStyles(SignStepComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/SignWithDeviceModal.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/SignWithDeviceModal.tsx
@@ -79,8 +79,11 @@ const SignWithDeviceModalComponent = ({
 };
 
 export const SignWithDeviceModal = withStyles(SignWithDeviceModalComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss')
+      .default
 });
diff --git a/...I/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/ProgressHeader.tsx b/...I/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/ProgressHeader.tsx
@@ -75,8 +75,11 @@ const ProgressHeaderComponent = (
 };
 
 export const ProgressHeader = withStyles(ProgressHeaderComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/progressHeaderStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/progressHeaderStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/SignStepBody.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/SignStepBody.tsx
@@ -186,8 +186,11 @@ const SignStepBodyComponent = ({
 };
 
 export const SignStepBody = withStyles(SignStepBodyComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/signStepBodyStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/signStepBodyStyles.scss')
+      .default
 });
diff --git a/...nsactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx b/...nsactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx
@@ -56,8 +56,11 @@ const ConfirmAmountComponent = ({
 };
 
 export const ConfirmAmount = withStyles(ConfirmAmountComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/confirmAmountStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/confirmAmountStyles.scss')
+      .default
 });
diff --git a/...ignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx b/...ignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx
@@ -67,8 +67,11 @@ const ConfirmFeeComponent = ({
 };
 
 export const ConfirmFee = withStyles(ConfirmFeeComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/confirmFeeStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/confirmFeeStyles.scss')
+      .default
 });
diff --git a/...tionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/ConfirmReceiver.tsx b/...tionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/ConfirmReceiver.tsx
@@ -84,8 +84,11 @@ const ConfirmReceiverComponent = ({
 };
 
 export const ConfirmReceiver = withStyles(ConfirmReceiverComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/confirmReceiverStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/confirmReceiverStyles.scss')
+      .default
 });
diff --git a/...al/components/components/ConfirmReceiver/components/ReceiverSubValue/ReceiverSubValue.tsx b/...al/components/components/ConfirmReceiver/components/ReceiverSubValue/ReceiverSubValue.tsx
@@ -53,8 +53,11 @@ const ReceiverSubValueComponent = ({
 };
 
 export const ReceiverSubValue = withStyles(ReceiverSubValueComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/receiverSubValueStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/receiverSubValueStyles.scss')
+      .default
 });
diff --git a/...iceModal/components/components/ConfirmReceiver/components/ReceiverValue/ReceiverValue.tsx b/...iceModal/components/components/ConfirmReceiver/components/ReceiverValue/ReceiverValue.tsx
@@ -46,8 +46,11 @@ const ReceiverValueComponent = ({
 };
 
 export const ReceiverValue = withStyles(ReceiverValueComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/receiverValueStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/receiverValueStyles.scss')
+      .default
 });
diff --git a/...gnWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.tsx b/...gnWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.tsx
@@ -71,8 +71,11 @@ export const NftSftPreview = ({
 };
 
 export const NftSftPreviewComponent = withStyles(NftSftPreview, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.styles.scss')
+      .default
 });
diff --git a/...nTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/TokenAvatar.tsx b/...nTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/TokenAvatar.tsx
@@ -49,8 +49,11 @@ const TokenAvatarComponent = (
 };
 
 export const TokenAvatar = withStyles(TokenAvatarComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/tokenAvatarStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/tokenAvatarStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithOperaModal/SignWithOperaModal.tsx b/src/UI/SignTransactionsModals/SignWithOperaModal/SignWithOperaModal.tsx
@@ -77,8 +77,11 @@ const SignWithOperaModalComponent = ({
 };
 
 export const SignWithOperaModal = withStyles(SignWithOperaModalComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithOperaModal/signWithOperaModalStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithOperaModal/signWithOperaModalStyles.scss')
+      .default
 });