Mobx migration

package.json

@@ -43,7 +43,7 @@
         "mocha": "^7.1.1",
         "postcss": "^8.3.6",
         "prettier": "^2.1.2",
-        "react-test-renderer": "^16.13.1",
+        "react-test-renderer": "^17.0.2",
         "stylelint": "^13.13.1",
         "stylelint-config-prettier": "^8.0.2",
         "stylelint-formatter-pretty": "^2.1.1",
@@ -89,8 +89,8 @@
         "dotenv": "^8.2.0",
         "jest-chain": "^1.1.5",
         "jest-extended": "^0.11.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0"
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
     },
     "optionalDependencies": {
         "fsevents": "^2.3.2"

packages/account/package.json

@@ -36,12 +36,12 @@
     "formik": "^2.1.4",
     "i18n-iso-countries": "^6.8.0",
     "js-cookie": "^2.2.1",
-    "mobx": "^5.15.7",
-    "mobx-react": "6.3.1",
+    "mobx": "^6.5.0",
+    "mobx-react": "^7.3.0",
     "onfido-sdk-ui": "6.3.0",
     "prop-types": "^15.7.2",
     "qrcode.react": "^1.0.0",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0"
   },
@@ -76,4 +76,4 @@
     "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.46.0"
   }
-}
+}

packages/account/src/Components/Routes/__tests__/route-with-sub-routes.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
 import { Redirect } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';

packages/appstore/package.json

@@ -36,8 +36,8 @@
         "@deriv/translations": "^1.0.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
-        "mobx": "^5.15.7",
-        "mobx-react-lite": "^2.2.2",
+        "mobx": "^6.5.0",
+        "mobx-react-lite": "^3.3.0",
         "object.fromentries": "^2.0.0",
         "prop-types": "^15.7.2",
         "react-router": "^5.2.0",

packages/bot-web-ui/package.json

@@ -74,13 +74,13 @@
     "gh-pages": "^2.1.1",
     "immutable": "^3.8.2",
     "lz-string": "^1.4.4",
-    "mobx": "^5.15.7",
-    "mobx-react": "6.3.1",
+    "mobx": "^6.5.0",
+    "mobx-react": "^7.3.0",
     "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": "^17.0.2",
+    "react-content-loader": "^6.2.0",
+    "react-dom": "^17.0.2",
     "react-transition-group": "^4.3.0"
   }
 }

packages/cashier/package.json

@@ -43,16 +43,16 @@
     "classnames": "^2.2.6",
     "formik": "^2.1.4",
     "loadjs": "^4.2.0",
-    "mobx": "^5.15.7",
-    "mobx-react": "6.3.1",
+    "mobx": "^6.5.0",
+    "mobx-react": "^7.3.0",
     "moment": "^2.24.0",
     "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.2.9",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0"
   },

packages/cashier/src/Components/Routes/__tests__/binary-link.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { NavLink } from 'react-router-dom';
 import { routes } from '@deriv/shared';
 import { BinaryLink } from '../index';

packages/cashier/src/Components/Routes/__tests__/route-with-sub-routes.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
 import { Redirect } from 'react-router-dom';
 

packages/components/package.json

@@ -53,7 +53,7 @@
         "glob": "^7.1.5",
         "lint-staged": "^10.4.0",
         "node-sass": "^4.12.0",
-        "react": "^16.14.0",
+        "react": "^17.0.2",
         "sass-loader": "^10.1.1",
         "sass-resources-loader": "^2.1.1",
         "style-loader": "^1.2.1",
@@ -65,24 +65,24 @@
     },
     "dependencies": {
         "@contentpass/zxcvbn": "^4.4.3",
-        "@deriv/deriv-onboarding": "^1.0.0",
+        "@deriv/deriv-onboarding": "^1.0.2",
         "@deriv/shared": "^1.0.0",
         "@storybook/addon-knobs": "^5.2.4",
         "@wapps/storybook-addon-state": "0.0.4",
         "classnames": "^2.2.6",
+        "framer-motion": "^6.2.9",
         "gh-pages": "^2.1.1",
         "lodash.throttle": "^4.1.1",
         "prop-types": "^15.7.2",
-        "react-content-loader": "^4.3.2",
+        "rc-drawer": "^4.4.3",
+        "react-content-loader": "^6.2.0",
         "react-div-100vh": "^0.3.8",
-        "react-dom": "^16.14.0",
-        "react-drag-drawer": "^3.3.4",
+        "react-dom": "^17.0.2",
         "react-dropzone": "11.0.1",
-        "react-pose": "^4.0.10",
         "react-router-dom": "^5.2.0",
-        "react-swipeable": "^5.5.1",
-        "react-tiny-popover": "^5.1.0",
+        "react-swipeable": "^6.2.1",
+        "react-tiny-popover": "^7.0.1",
         "react-transition-group": "^4.3.0",
-        "react-virtualized": "^9.22.2"
+        "react-window": "^1.8.6"
     }
 }

packages/components/src/components/carousel/carousel.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { Swipeable } from 'react-swipeable';
+import { useSwipeable } from 'react-swipeable';
 import Card from './carousel-card.jsx';
 import Nav from './carousel-nav.jsx';
 import Icon from '../icon';
@@ -55,15 +55,18 @@ const Carousel = ({
             setActiveIndex(list.length - computed_item_per_window);
         }
     };
-
+    const swipe_handlers = useSwipeable({
+        onSwipedLeft: handleNextClick,
+        onSwipedRight: handlePrevClick,
+    });
     useInterval(handleNextClick, autoplay_time);
 
     React.useEffect(() => {
         if (typeof onItemSelect === 'function') onItemSelect(active_index, list);
     }, [active_index, list, onItemSelect]);
 
     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
@@ -141,7 +144,7 @@ const Carousel = ({
                     />
                 )}
             </div>
-        </Swipeable>
+        </div>
     );
 };
 

packages/components/src/components/fade-wrapper/fade-wrapper.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import posed, { PoseGroup } from 'react-pose';
+import { motion } from 'framer-motion';
 
-const FadeInFromTopDiv = posed.div({
-    enter: {
+const FadeInFromTopDiv = {
+    onViewportEnter: {
         y: 0,
         opacity: 1,
         delay: 300,
@@ -16,10 +16,10 @@ const FadeInFromTopDiv = posed.div({
         opacity: 0,
         transition: { duration: 250 },
     },
-});
+};
 
-const FadeInFromBottomDiv = posed.div({
-    enter: {
+const FadeInFromBottomDiv = {
+    onViewportEnter: {
         y: 0,
         opacity: 1,
         delay: 300,
@@ -32,51 +32,66 @@ const FadeInFromBottomDiv = posed.div({
         opacity: 0,
         transition: { duration: 250 },
     },
-});
+};
 
-const FadeInOnlyDiv = posed.div({
-    enter: {
+const FadeInOnlyDiv = {
+    onViewportEnter: {
         opacity: 1,
         transition: { duration: 300 },
     },
     exit: {
         opacity: 0,
         transition: { duration: 300 },
     },
-});
+};
 
 // `flipMove={false}` is necessary to fix react-pose bug: https://github.com/Popmotion/popmotion/issues/805
 const FadeWrapper = ({ children, className, is_visible, keyname, type }) => {
     if (type === 'top') {
         return (
-            <PoseGroup flipMove={false}>
+            <>
                 {is_visible && (
-                    <FadeInFromTopDiv className={className} key={keyname}>
+                    <motion.div
+                        onViewportEnter={FadeInFromTopDiv.onViewportEnter}
+                        exit={FadeInFromTopDiv.exit}
+                        className={className}
+                        key={keyname}
+                    >
                         {children}
-                    </FadeInFromTopDiv>
+                    </motion.div>
                 )}
-            </PoseGroup>
+            </>
         );
     }
     if (type === 'bottom') {
         return (
-            <PoseGroup flipMove={false}>
+            <>
                 {is_visible && (
-                    <FadeInFromBottomDiv className={className} key={keyname}>
+                    <motion.div
+                        onViewportEnter={FadeInFromBottomDiv.onViewportEnter}
+                        exit={FadeInFromBottomDiv.exit}
+                        className={className}
+                        key={keyname}
+                    >
                         {children}
-                    </FadeInFromBottomDiv>
+                    </motion.div>
                 )}
-            </PoseGroup>
+            </>
         );
     }
     return (
-        <PoseGroup flipMove={false}>
+        <>
             {is_visible && (
-                <FadeInOnlyDiv className={className} key={keyname}>
+                <motion.div
+                    onViewportEnter={FadeInOnlyDiv.onViewportEnter}
+                    exit={FadeInOnlyDiv.exit}
+                    className={className}
+                    key={keyname}
+                >
                     {children}
-                </FadeInOnlyDiv>
+                </motion.div>
             )}
-        </PoseGroup>
+        </>
     );
 };
 

packages/components/src/components/horizontal-swipe/horizontal-swipe.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Swipeable } from 'react-swipeable';
+import { useSwipeable } from 'react-swipeable';
 
 const HorizontalSwipe = ({
     is_left_swipe,
@@ -51,9 +51,12 @@ const HorizontalSwipe = ({
             }
         }
     };
-
+    const swipe_handlers = useSwipeable({
+        onSwipedLeft: onSwipeLeft,
+        onSwipedRight: onSwipeRight,
+    });
     return (
-        <Swipeable onSwipedLeft={onSwipeLeft} onSwipedRight={onSwipeRight}>
+        <div {...swipe_handlers}>
             <div className='dc-horizontal-swipe'>
                 {visible_component_height_ref && (
                     <div
@@ -89,7 +92,7 @@ const HorizontalSwipe = ({
                     </div>
                 )}
             </div>
-        </Swipeable>
+        </div>
     );
 };
 

packages/components/src/components/mobile-carousel/mobile-carousel.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Swipeable } from 'react-swipeable';
+import { useSwipeable } from 'react-swipeable';
 import Icon from '../icon';
 
 export const MobileCarousel = ({ children, ...props }) => {
@@ -39,23 +39,22 @@ export const MobileCarousel = ({ children, ...props }) => {
 
     const swipedLeft = () => goNext();
     const swipedRight = () => goPrev();
-
+    const swipe_handlers = useSwipeable({
+        onSwipedLeft: swipedLeft,
+        onSwipedRight: swipedRight,
+        ...props,
+    });
     return (
         <div className='dc-carousel'>
             <div className='dc-carousel__row'>
                 <div className='dc-carousel__pref'>
                     <Icon icon='IcChevronLeft' onClick={goPrev} />
                 </div>
-                <Swipeable
-                    className={classNames('dc-carousel__view')}
-                    onSwipedLeft={swipedLeft}
-                    onSwipedRight={swipedRight}
-                    {...props}
-                >
+                <div {...swipe_handlers} className={classNames('dc-carousel__view')}>
                     <div className='dc-carousel__body' ref={carousel_body}>
                         {children}
                     </div>
-                </Swipeable>
+                </div>
                 <div className='dc-carousel__next' onClick={goNext}>
                     <Icon icon='IcChevronRight' />
                 </div>