Updated import method of @deriv/p2p

Author: msamprz

src/javascript/app/pages/cashier/dp2p.js

@@ -10,14 +10,20 @@ const DP2P = (() => {
     const onLoad = () => {
         const is_svg = Client.get('landing_company_shortcode') === 'svg';
         if (is_svg) {
-            import('@deriv/p2p').then((module) => {
-                const el_dp2p_container = document.getElementById('binary-dp2p');
-                const shadowed_el_dp2p = el_dp2p_container.attachShadow({ mode: 'closed' });
+            require.ensure([], (require) => renderP2P(require('@deriv/p2p')), 'dp2p');
+        } else {
+            document.getElementById('message_cashier_unavailable').setVisibility(1);
+        }
+    };
 
-                const el_main_css = document.createElement('style');
-                // These are styles that are to be injected into the Shadow DOM, so they are in JS and not stylesheets
-                // They are to be applied to the `:host` selector
-                el_main_css.innerHTML = `
+    const renderP2P = (module) => {
+        const el_dp2p_container = document.getElementById('binary-dp2p');
+        const shadowed_el_dp2p = el_dp2p_container.attachShadow({ mode: 'closed' });
+
+        const el_main_css = document.createElement('style');
+        // These are styles that are to be injected into the Shadow DOM, so they are in JS and not stylesheets
+        // They are to be applied to the `:host` selector
+        el_main_css.innerHTML = `
                 @import url(${urlForStatic('css/p2p.min.css')});
                 :host {
                     --hem:10px;
@@ -59,29 +65,25 @@ const DP2P = (() => {
                     cursor: pointer;
                 }
                 `;
-                el_main_css.rel = 'stylesheet';
+        el_main_css.rel = 'stylesheet';
 
-                const dp2p_props = {
-                    className    : 'theme--light',
-                    websocket_api: BinarySocket,
-                    lang         : getLanguage(),
-                    client       : {
-                        currency  : Client.get('currency'),
-                        is_virtual: Client.get('is_virtual'),
-                    },
-                };
+        const dp2p_props = {
+            className    : 'theme--light',
+            websocket_api: BinarySocket,
+            lang         : getLanguage(),
+            client       : {
+                currency  : Client.get('currency'),
+                is_virtual: Client.get('is_virtual'),
+            },
+        };
 
-                ReactDOM.render(
-                    // eslint-disable-next-line no-console
-                    React.createElement(module.default, dp2p_props),
-                    shadowed_el_dp2p
-                );
+        ReactDOM.render(
+            // eslint-disable-next-line no-console
+            React.createElement(module, dp2p_props),
+            shadowed_el_dp2p
+        );
 
-                shadowed_el_dp2p.prepend(el_main_css);
-            });
-        } else {
-            document.getElementById('message_cashier_unavailable').setVisibility(1);
-        }
+        shadowed_el_dp2p.prepend(el_main_css);
     };
 
     const onUnload = () => {