Add react-modal, replace confirm usage with it

client/js/components/App.js

@@ -1,9 +1,10 @@
-import React, { Suspense, lazy } from 'react';
+import React, { Suspense, lazy, useState } from 'react';
 import Route from 'containers/Route';
 import AppInfo from 'components/AppInfo';
 import TabList from 'components/TabList';
 import cn from 'classnames';
 
+const Modals = lazy(() => import('components/modals'));
 const Chat = lazy(() => import('containers/Chat'));
 const Connect = lazy(() => import('containers/Connect'));
 const Settings = lazy(() => import('containers/Settings'));
@@ -18,8 +19,14 @@ const App = ({
   select,
   push,
   hideMenu,
-  newVersionAvailable
+  newVersionAvailable,
+  hasOpenModals
 }) => {
+  const [renderModals, setRenderModals] = useState(false);
+  if (!renderModals && hasOpenModals) {
+    setRenderModals(true);
+  }
+
   const mainClass = cn('main-container', {
     'off-canvas': showTabList
   });
@@ -54,10 +61,8 @@ const App = ({
           push={push}
         />
         <div className={mainClass}>
-          <Suspense
-            maxDuration={1000}
-            fallback={<div className="suspense-fallback">...</div>}
-          >
+          <Suspense fallback={<div className="suspense-fallback">...</div>}>
+            {renderModals && <Modals />}
             <Route name="chat">
               <Chat />
             </Route>