Merge pull request #983 from multiversx/development

2.24.4

CHANGELOG.md

@@ -6,7 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-
+## [[v2.24.4]](https://github.com/multiversx/mx-sdk-dapp/pull/983)] - 2023-12-11
+- [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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.24.3",
+  "version": "2.24.4",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

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
 });

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
 });

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
 });

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
 });

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
 });

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
 });

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
 });

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
 });

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
 });

src/UI/LoginButton/index.ts

@@ -0,0 +1 @@
+export * from './LoginButton';

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
 });

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
 });

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
 });

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
 });

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
 });

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
 });

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
 });

src/UI/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
 });

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
 });

src/UI/SignTransactionsModals/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
 });

src/UI/SignTransactionsModals/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
 });

src/UI/SignTransactionsModals/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
 });

src/UI/SignTransactionsModals/SignWithDeviceModal/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
 });

src/UI/SignTransactionsModals/SignWithDeviceModal/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
 });

src/UI/SignTransactionsModals/SignWithDeviceModal/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
 });

src/UI/SignTransactionsModals/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
 });