Shayan/52349/react17 migration

e2e_tests/jest.config.js

@@ -29,6 +29,6 @@ module.exports = {
             },
         },
     },
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$', '_utils/websocket.js'],
+    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$', '_utils/websocket.js'],
     reporters: ['default', './src/_utils/cli_reporter.js'],
 };

jest.config.base.js

@@ -9,7 +9,7 @@ module.exports = {
     coverageDirectory: './coverage/',
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|tsx)?$',
     // This is needed to transform es modules imported from node_modules of the target component.
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$'],
+    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$'],
     setupFiles: ['<rootDir>/../../jest.setup.js'],
     setupFilesAfterEnv: ['<rootDir>/../../setupTests.js'],
 };

jest.config.js

@@ -11,5 +11,5 @@ module.exports = {
         '^.+\\.(ts|tsx)?$': 'ts-jest',
     },
     testRegex: ['__tests__', '.*.spec.js'],
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$'],
+    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$'],
 };

package.json

@@ -54,7 +54,6 @@
         "nx": "^14.5.10",
         "postcss": "^8.3.6",
         "prettier": "^2.1.2",
-        "react-test-renderer": "^16.13.1",
         "stylelint": "^13.13.1",
         "stylelint-config-prettier": "^8.0.2",
         "stylelint-formatter-pretty": "^2.1.1",
@@ -105,8 +104,8 @@
         "@types/react-transition-group": "^4.4.4",
         "babel-jest": "^27.3.1",
         "dotenv": "^8.2.0",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "typescript": "^4.6.3"
     },
     "optionalDependencies": {

packages/account/package.json

@@ -42,8 +42,8 @@
         "onfido-sdk-ui": "8.1.1",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-i18next": "^11.11.0"

packages/account/src/Components/account-limits/account-limits-extra-info.tsx

@@ -24,7 +24,7 @@ const AccountLimitsExtraInfo = ({ message, ...props }: TAccountLimitsExtraInfo)
             icon='info'
             is_bubble_hover_enabled
             message={message}
-            zIndex={9999}
+            zIndex='9999'
             {...props}
         />
     );

packages/account/src/Components/api-token/api-token-clipboard.tsx

@@ -61,8 +61,8 @@ const ApiTokenClipboard = ({
     const onMouseLeaveHandler = () => {
         if (!is_copied) setIsPopoverOpen(false);
     };
-    /* two timeouts help to prevent popup window blinking. 
-    without early hiding the popup we will see shortly the description message like during hovering. 
+    /* two timeouts help to prevent popup window blinking.
+    without early hiding the popup we will see shortly the description message like during hovering.
     this bug appears when popup is handled outside like here
     */
     const onClick = () => {
@@ -117,7 +117,7 @@ const ApiTokenClipboard = ({
                 classNameBubble='dc-clipboard__popover'
                 message={is_copied ? success_message : info_message}
                 is_open={is_popover_open}
-                zIndex={'9999'}
+                zIndex='9999'
             >
                 <Icon
                     icon={`${is_copied ? 'IcCheckmarkCircle' : 'IcClipboard'}`}

packages/account/src/Components/api-token/api-token-delete-button.tsx

@@ -78,7 +78,7 @@ const ApiTokenDeleteButton = ({ token, popover_alignment = 'left' }: TApiTokenDe
                 classNameBubble='dc-clipboard__popover'
                 message={localize('Delete this token')}
                 relative_render={false}
-                zIndex={9999}
+                zIndex='9999'
                 is_open={is_popover_open}
             >
                 <Icon

packages/account/src/Components/currency-selector/radio-button.tsx

@@ -51,7 +51,7 @@ const USTPopover = ({ id }: TUSTPopover) => {
             icon='info'
             is_bubble_hover_enabled
             message={popover_message}
-            zIndex={9999}
+            zIndex='9999'
         />
     );
 };

packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

@@ -704,7 +704,7 @@ describe('<PersonalDetails/>', () => {
 
         expect(screen.getByText(tax_residence_pop_over_text)).toBeInTheDocument();
 
-        fireEvent.scroll(screen.getByRole('heading', { name: /account opening reason/i }), {
+        fireEvent.scroll(screen.getByTestId('dt_personal_details_container'), {
             target: { scrollY: 100 },
         });
 
@@ -720,7 +720,7 @@ describe('<PersonalDetails/>', () => {
         expect(screen.getByText(tin_pop_over_text)).toBeInTheDocument();
         expect(screen.getByRole('link', { name: 'here' })).toBeInTheDocument();
 
-        fireEvent.scroll(screen.getByRole('heading', { name: /account opening reason/i }), {
+        fireEvent.scroll(screen.getByTestId('dt_personal_details_container'), {
             target: { scrollY: 100 },
         });
 

packages/account/src/Components/personal-details/personal-details.jsx

@@ -181,7 +181,11 @@ const PersonalDetails = ({
                                         }
                                     />
                                 </Text>
-                                <ThemedScrollbars height={height} onScroll={closeTooltipOnScroll}>
+                                <ThemedScrollbars
+                                    height={height}
+                                    onScroll={closeTooltipOnScroll}
+                                    testId='dt_personal_details_container'
+                                >
                                     {is_appstore && (
                                         <div className='details-form__sub-header'>
                                             <Text size={isMobile() ? 'xs' : 'xxs'} align={isMobile() && 'center'}>

packages/account/src/Components/sent-email-modal/sent-email-modal.tsx

@@ -107,7 +107,7 @@ const SentEmailModal = ({
                         classNameBubble='help-centre__tooltip'
                         alignment='top'
                         message={localize('Live chat')}
-                        zIndex={9999}
+                        zIndex='9999'
                     />
                 </span>,
             ]}

packages/api/package.json

@@ -5,7 +5,7 @@
     "main": "src/index.ts",
     "dependencies": {
         "@deriv/shared": "^1.0.0",
-        "react": "^16.14.0"
+        "react": "^17.0.2"
     },
     "devDependencies": {
         "@deriv/api-types": "^1.0.54",

packages/appstore/package.json

@@ -38,7 +38,7 @@
         "mobx-react-lite": "^3.4.0",
         "object.fromentries": "^2.0.0",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
+        "react": "^17.0.2",
         "react-router": "^5.2.0",
         "react-joyride": "^2.5.3",
         "react-router-dom": "^5.2.0"

packages/bot-web-ui/package.json

@@ -79,9 +79,9 @@
         "mobx-react": "^7.5.1",
         "pako": "^1.0.11",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
-        "react-content-loader": "^4.3.2",
-        "react-dom": "^16.14.0",
-        "react-transition-group": "4.4.2"
+        "react": "^17.0.2",
+        "react-content-loader": "^6.2.0",
+        "react-dom": "^17.0.2",
+        "react-transition-group": "^4.4.2"
     }
 }

packages/bot-web-ui/src/constants/z-indexes.js

@@ -1,6 +1,6 @@
 export const popover_zindex = Object.freeze({
     QUICK_STRATEGY: 99999,
-    TOOLBAR: 5,
+    TOOLBAR: 100,
     TRANSACTION: 10,
     SUMMARY_TOOLTIPS: 5,
     RUN_PANEL: 1,

packages/cashier/package.json

@@ -52,11 +52,11 @@
         "moment": "^2.29.2",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",
-        "react": "^16.14.0",
-        "react-content-loader": "^4.3.2",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-content-loader": "^6.2.0",
+        "react-dom": "^17.0.2",
         "react-loadable": "^5.5.0",
-        "react-pose": "^4.0.10",
+       "framer-motion":"^6.5.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0"
     },

packages/cfd/package.json

@@ -97,11 +97,11 @@
         "null-loader": "^4.0.1",
         "object.fromentries": "^2.0.0",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-qrcode": "^0.3.5",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
-        "react-transition-group": "4.4.2"
+        "react-transition-group": "^4.4.2"
     }
 }

packages/cfd/src/Components/cfd-account-card.tsx

@@ -529,17 +529,16 @@ const CFDAccountCardComponent = ({
                                                     show_currency
                                                 />
                                             </Text>
-                                            {checkMultipleSvgAcc()?.length > 1 &&
-                                                acc.landing_company_short === 'svg' && (
-                                                    <Text
-                                                        className='cfd-account-card__balance--region'
-                                                        color='colored-background'
-                                                        size='xxxs'
-                                                        weight='bold'
-                                                    >
-                                                        {getServerName(acc)}
-                                                    </Text>
-                                                )}
+                                            {checkMultipleSvgAcc()?.length > 1 && acc.landing_company_short === 'svg' && (
+                                                <Text
+                                                    className='cfd-account-card__balance--region'
+                                                    color='colored-background'
+                                                    size='xxxs'
+                                                    weight='bold'
+                                                >
+                                                    {getServerName(acc)}
+                                                </Text>
+                                            )}
                                         </div>
                                     )}
                                     <div className='cfd-account-card__manage--mt5'>

packages/components/package.json

@@ -56,7 +56,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "lint-staged": "^10.4.0",
     "node-sass": "^7.0.1",
-    "react": "^16.14.0",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.1.1",
     "style-loader": "^1.2.1",
@@ -69,24 +68,23 @@
   },
   "dependencies": {
     "@contentpass/zxcvbn": "^4.4.3",
-    "@deriv/deriv-onboarding": "^1.0.0",
     "@deriv/shared": "^1.0.0",
     "@deriv/translations": "^1.0.0",
     "classnames": "^2.2.6",
     "gh-pages": "^2.1.1",
     "glob": "^7.1.5",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
-    "react-content-loader": "^4.3.2",
+    "react-content-loader": "^6.2.0",
     "react-div-100vh": "^0.3.8",
-    "react-dom": "^16.14.0",
-    "react-drag-drawer": "^3.3.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-dropzone": "11.0.1",
-    "react-pose": "^4.0.10",
+   "framer-motion":"^6.5.1",
     "react-router-dom": "^5.2.0",
-    "react-swipeable": "^5.5.1",
-    "react-tiny-popover": "^5.1.0",
-    "react-transition-group": "4.4.2",
-    "react-virtualized": "^9.22.2"
+    "react-swipeable": "^6.2.1",
+    "react-tiny-popover": "^7.0.1",
+    "react-transition-group": "^4.4.2",
+    "@enykeev/react-virtualized": "^9.22.4-mirror.1"
   }
 }

packages/components/src/components/autosizer/AutoSizer.d.ts

@@ -0,0 +1,14 @@
+type TSize = {
+    width: number;
+    height: number;
+};
+
+type TProps = {
+    children?: ((props: TSize) => React.ReactNode) | React.ReactNode;
+};
+
+declare module '@enykeev/react-virtualized/dist/es/AutoSizer' {
+    export const AutoSizer = (props: TProps): JSX.Element => JSX.Element;
+
+    export default AutoSizer;
+}

packages/components/src/components/autosizer/index.ts

@@ -1,5 +1,7 @@
-// Imported as below to save on bundle size due to faulty tree-shaking.
-import AutoSizer from 'react-virtualized/dist/es/AutoSizer';
+/* eslint @typescript-eslint/triple-slash-reference: "off" */
+/// <reference path="AutoSizer.d.ts" />
+
+import AutoSizer from '@enykeev/react-virtualized/dist/es/AutoSizer';
 import './autosizer.scss';
 
 export default AutoSizer;

packages/components/src/components/carousel/carousel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Swipeable } from 'react-swipeable';
+import { useSwipeable } from 'react-swipeable';
 import Card from './carousel-card';
 import Nav from './carousel-nav';
 import Icon from '../icon';
@@ -79,8 +79,13 @@ const Carousel = ({
         if (onItemSelect) onItemSelect(active_index);
     }, [active_index, onItemSelect]);
 
+    const swipe_handlers = useSwipeable({
+        onSwipedLeft: handleNextClick,
+        onSwipedRight: handlePrevClick,
+    });
+
     return (
-        <Swipeable onSwipedLeft={handleNextClick} onSwipedRight={handlePrevClick} className={className}>
+        <div {...swipe_handlers} className={className}>
             <div className={classNames('dc-carousel', { 'dc-carousel--mt5': is_mt5 })}>
                 {sliced_list_length > 1 && (
                     <Nav
@@ -160,7 +165,7 @@ const Carousel = ({
                     />
                 )}
             </div>
-        </Swipeable>
+        </div>
     );
 };
 

packages/components/src/components/data-list/data-list.jsx

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { TransitionGroup } from 'react-transition-group';
-import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/es/CellMeasurer';
-import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer';
-import { List } from 'react-virtualized/dist/es/List';
+import { CellMeasurer, CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer';
+import { AutoSizer } from '@enykeev/react-virtualized/dist/es/AutoSizer';
+import { List } from '@enykeev/react-virtualized/dist/es/List';
 import { isMobile, isDesktop } from '@deriv/shared';
 import DataListCell from './data-list-cell.jsx';
 import DataListRow from './data-list-row.jsx';

packages/components/src/components/data-table/data-table.jsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import { List } from 'react-virtualized/dist/es/List';
+import { List } from '@enykeev/react-virtualized/dist/es/List';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer';
-import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/es/CellMeasurer';
+import { AutoSizer } from '@enykeev/react-virtualized/dist/es/AutoSizer';
+import { CellMeasurer, CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer';
 import TableRow from './table-row.jsx';
 import ThemedScrollbars from '../themed-scrollbars';