Use file-saver to export accounts (#701)

* use file-saver

* bring back the fake implementation

* we never know

* fix background test

packages/extension-ui/src/Popup/Export.test.tsx

@@ -10,6 +10,8 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
 import { ThemeProvider } from 'styled-components';
 
+import { KeyringPair$Json } from '@polkadot/keyring/types';
+
 import { Button, themes } from '../components';
 import * as messaging from '../messaging';
 import { flushAllPromises } from '../testHelpers';
@@ -27,7 +29,7 @@ describe('Export component', () => {
   };
 
   beforeEach(() => {
-    jest.spyOn(messaging, 'exportAccount').mockResolvedValue({ exportedJson: '{ "meta": { "name": "account_name" } }' });
+    jest.spyOn(messaging, 'exportAccount').mockResolvedValue({ exportedJson: { meta: { name: 'account_name' } } as unknown as KeyringPair$Json });
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     wrapper = mount(

packages/extension-ui/src/Popup/Export.tsx

@@ -3,6 +3,7 @@
 
 import type { ThemeProps } from '../types';
 
+import { saveAs } from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 import styled from 'styled-components';
@@ -43,12 +44,9 @@ function Export ({ className, match: { params: { address } } }: Props): React.Re
 
       exportAccount(address, pass)
         .then(({ exportedJson }) => {
-          const element = document.createElement('a');
-          const { meta } = JSON.parse(exportedJson) as { meta: { name: string } };
+          const blob = new Blob([JSON.stringify(exportedJson)], { type: 'application/json; charset=utf-8' });
 
-          element.href = `data:text/plain;charset=utf-8,${exportedJson}`;
-          element.download = `${meta.name}_exported_account_${Date.now()}.json`;
-          element.click();
+          saveAs(blob, `${address}.json`);
 
           onAction('/');
         })

packages/extension-ui/src/Popup/ExportAll.tsx

@@ -3,6 +3,7 @@
 
 import type { ThemeProps } from '../types';
 
+import { saveAs } from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 import styled from 'styled-components';
@@ -44,11 +45,9 @@ function ExportAll ({ className }: Props): React.ReactElement<Props> {
 
       exportAccounts(accounts.map((account) => account.address), pass)
         .then(({ exportedJson }) => {
-          const element = document.createElement('a');
+          const blob = new Blob([JSON.stringify(exportedJson)], { type: 'application/json; charset=utf-8' });
 
-          element.href = `data:text/plain;charset=utf-8,${exportedJson}`;
-          element.download = `batch_exported_account_${Date.now()}.json`;
-          element.click();
+          saveAs(blob, `batch_exported_account_${Date.now()}.json`);
 
           onAction('/');
         })

packages/extension-ui/src/messaging.ts

@@ -79,11 +79,11 @@ export async function tieAccount (address: string, genesisHash: string | null):
   return sendMessage('pri(accounts.tie)', { address, genesisHash });
 }
 
-export async function exportAccount (address: string, password: string): Promise<{ exportedJson: string }> {
+export async function exportAccount (address: string, password: string): Promise<{ exportedJson: KeyringPair$Json }> {
   return sendMessage('pri(accounts.export)', { address, password });
 }
 
-export async function exportAccounts (addresses: string[], password: string): Promise<{ exportedJson: string }> {
+export async function exportAccounts (addresses: string[], password: string): Promise<{ exportedJson: KeyringPairs$Json }> {
   return sendMessage('pri(accounts.batchExport)', { addresses, password });
 }