seed dialog refactored

background.html

@@ -150,7 +150,6 @@
   <script type='text/javascript' src='js/views/moderators_remove_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/user_details_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/password_dialog_view.js'></script>
-  <script type='text/javascript' src='js/views/seed_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/session_id_reset_view.js'></script>
 
   <!-- CRYPTO -->

js/background.js

@@ -640,11 +640,6 @@
       }
     });
 
-    Whisper.events.on('showSeedDialog', async () => {
-      if (appView) {
-        appView.showSeedDialog();
-      }
-    });
 
     Whisper.events.on('showPasswordDialog', async options => {
       if (appView) {

js/views/app_view.js

@@ -16,7 +16,6 @@
       this.applyRtl();
       this.applyHideMenu();
 
-      this.showSeedDialog = this.showSeedDialog.bind(this);
       this.showPasswordDialog = this.showPasswordDialog.bind(this);
     },
     events: {
@@ -131,12 +130,6 @@
       const dialog = new Whisper.PasswordDialogView(options);
       this.el.prepend(dialog.el);
     },
-    showSeedDialog() {
-      const dialog = new Whisper.SeedDialogView({
-        theme: this.getThemeObject(),
-      });
-      this.el.prepend(dialog.el);
-    },
     getThemeObject() {
       const themeSettings = storage.get('theme-setting') || 'light';
       const theme = themeSettings === 'light' ? window.lightTheme : window.darkTheme;

js/views/seed_dialog_view.js

@@ -1,35 +0,0 @@
-/* global Whisper */
-
-// eslint-disable-next-line func-names
-(function() {
-  'use strict';
-
-  window.Whisper = window.Whisper || {};
-
-  Whisper.SeedDialogView = Whisper.View.extend({
-    className: 'loki-dialog seed-dialog modal',
-    initialize(options) {
-      this.close = this.close.bind(this);
-      this.theme = options.theme;
-      this.render();
-    },
-
-    render() {
-      this.dialogView = new Whisper.ReactWrapperView({
-        className: 'seed-dialog-wrapper',
-        Component: window.Signal.Components.SessionSeedModal,
-        props: {
-          onClose: this.close,
-          theme: this.theme,
-        },
-      });
-
-      this.$el.append(this.dialogView.el);
-      return this;
-    },
-
-    close() {
-      this.remove();
-    },
-  });
-})();

ts/components/session/LeftPaneSettingSection.tsx

@@ -13,6 +13,7 @@ import { showSettingsSection } from '../../state/ducks/section';
 import { getFocusedSettingsSection } from '../../state/selectors/section';
 import { getTheme } from '../../state/selectors/theme';
 import { SessionConfirm } from './SessionConfirm';
+import { SessionSeedModal } from './SessionSeedModal';
 
 type Props = {
   settingsCategory: SessionSettingCategory;
@@ -128,6 +129,23 @@ const onDeleteAccount = ( setModal: any) => {
   />)
 };
 
+const onShowRecoverPhrase = (setModal: any) => {
+
+  const clearModal = () => {
+    setModal(null);
+  }
+
+  setModal(
+
+    <SessionSeedModal
+     onClose={clearModal} 
+    ></SessionSeedModal>
+  
+  )
+
+
+}
+
 const LeftPaneBottomButtons = (props: { setModal: any}) => {
   const dangerButtonText = window.i18n('clearAllData');
   const showRecoveryPhrase = window.i18n('showRecoveryPhrase');
@@ -146,7 +164,7 @@ const LeftPaneBottomButtons = (props: { setModal: any}) => {
         text={showRecoveryPhrase}
         buttonType={SessionButtonType.SquareOutline}
         buttonColor={SessionButtonColor.White}
-        onClick={() => window.Whisper.events.trigger('showSeedDialog')}
+        onClick={() => onShowRecoverPhrase(setModal)}
       />
     </div>
   );

ts/components/session/SessionSeedModal.tsx

@@ -8,6 +8,7 @@ import { PasswordUtil } from '../../util';
 import { getPasswordHash } from '../../data/data';
 import { QRCode } from 'react-qr-svg';
 import { mn_decode } from '../../session/crypto/mnemonic';
+import { SessionWrapperModal } from './SessionWrapperModal';
 
 interface Props {
   onClose: any;
@@ -62,11 +63,19 @@ class SessionSeedModalInner extends React.Component<Props, State> {
     return (
       <>
         {!loading && (
-          <SessionModal
+          // <SessionModal
+          //   title={i18n('showRecoveryPhrase')}
+          //   onClose={onClose}
+          //   theme={this.props.theme}
+          // >
+
+            <SessionWrapperModal
             title={i18n('showRecoveryPhrase')}
             onClose={onClose}
             theme={this.props.theme}
-          >
+            >
+
+
             <div className="spacer-sm" />
 
             {hasPassword && !passwordValid ? (
@@ -74,7 +83,8 @@ class SessionSeedModalInner extends React.Component<Props, State> {
             ) : (
               <>{this.renderSeedView()}</>
             )}
-          </SessionModal>
+            </SessionWrapperModal>
+          // </SessionModal>
         )}
       </>
     );

ts/components/session/SessionWrapperModal.tsx

@@ -48,7 +48,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     title,
     onConfirm,
     onClose,
-    showHeader,
+    showHeader = true,
     showClose = false,
     confirmText,
     cancelText,