Fix 3box replacement for MV3 (#15851)

* refactor backup controller to return the data to be backed up
    and do the actual backup in the UI.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Move export-utils to ui/helpers as it's only used in the UI now.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* use context to call event tracker.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Don't make backup function inline.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

app/scripts/controllers/backup.js

@@ -1,4 +1,3 @@
-import { exportAsFile } from '../../../shared/modules/export-utils';
 import { prependZero } from '../../../shared/modules/string-utils';
 
 export default class BackupController {
@@ -65,13 +64,6 @@ export default class BackupController {
       date.getMinutes(),
     )}_${prefixZero(date.getDay())}.json`;
 
-    exportAsFile(userDataFileName, result);
+    return { fileName: userDataFileName, data: result };
-
-    this._trackMetaMetricsEvent({
-      event: 'User Data Exported',
-      category: 'Backup',
-    });
-
-    return result;
   }
 }

ui/components/ui/export-text-container/export-text-container.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Copy from '../icon/copy-icon.component';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
-import { exportAsFile } from '../../../../shared/modules/export-utils';
+import { exportAsFile } from '../../../helpers/utils/export-utils';
 
 function ExportTextContainer({
   text = '',

ui/helpers/utils/export-utils.js

@@ -1,4 +1,4 @@
-import { getRandomFileName } from '../../ui/helpers/utils/util';
+import { getRandomFileName } from './util';
 
 export function exportAsFile(filename, data, type = 'text/csv') {
   // eslint-disable-next-line no-param-reassign

ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js

@@ -10,7 +10,7 @@ import {
   EVENT,
   EVENT_NAMES,
 } from '../../../../../shared/constants/metametrics';
-import { exportAsFile } from '../../../../../shared/modules/export-utils';
+import { exportAsFile } from '../../../../helpers/utils/export-utils';
 import DraggableSeed from './draggable-seed.component';
 
 const EMPTY_SEEDS = Array(12).fill(null);

ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js

@@ -15,7 +15,7 @@ import {
   EVENT_NAMES,
 } from '../../../../../shared/constants/metametrics';
 import { returnToOnboardingInitiatorTab } from '../../onboarding-initiator-util';
-import { exportAsFile } from '../../../../../shared/modules/export-utils';
+import { exportAsFile } from '../../../../helpers/utils/export-utils';
 
 export default class RevealSeedPhrase extends PureComponent {
   static contextTypes = {

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -21,7 +21,7 @@ import {
   LEDGER_USB_VENDOR_ID,
 } from '../../../../shared/constants/hardware-wallets';
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
-import { exportAsFile } from '../../../../shared/modules/export-utils';
+import { exportAsFile } from '../../../helpers/utils/export-utils';
 import ActionableMessage from '../../../components/ui/actionable-message';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 
@@ -155,7 +155,6 @@ export default class AdvancedTab extends PureComponent {
     /**
      * so that we can restore same file again if we want to.
      * chrome blocks uploading same file twice.
-     *
      */
     event.target.value = '';
     try {
@@ -237,6 +236,17 @@ export default class AdvancedTab extends PureComponent {
     );
   }
 
+  backupUserData = async () => {
+    const { fileName, data } = await this.props.backupUserData();
+    exportAsFile(fileName, data);
+
+    this.context.trackEvent({
+      event: 'User Data Exported',
+      category: 'Backup',
+      properties: {},
+    });
+  };
+
   renderUserDataBackup() {
     const { t } = this.context;
     return (
@@ -256,9 +266,7 @@ export default class AdvancedTab extends PureComponent {
             <Button
               type="secondary"
               large
-              onClick={() => {
+              onClick={() => this.backupUserData()}
-                this.props.backupUserData();
-              }}
             >
               {t('backup')}
             </Button>