[DDW-922] Change the "Delete Wallet" Button Layout (#1612)

* [DDW-922] Adds Delete Wallet BorderedBox where new layout will exist

* [DDW-922] Styles content and button according to mockup

* [DDW-922] Fixes ESLint error

* [DDW-922] Adds flat button class, uses react-polymorph Button component

* [DDW-922] Cleans up code in DeleteWalletButton.js

* [DDW-922] Adds Japanese translations and new English messages

* [DDW-922] Adds intl message rendering to WalletSettings.js for deleting a wallet

* [DDW-922] Updates line numbers in defaultMessages.json

* [DDW-922] Updates CHANGELOG

* [DDW-922] Deletes commented out export wallet code and styles

* [DDW-922] Improves CHANGELOG entry

* [DDW-922] Deletes all export wallet related files

* [DDW-922] Removes export wallet from actions

* [DDW-922] Removes export wallet api method and types

* [DDW-922] Removes export wallet from WalletSettings store

* [DDW-922] Removes export wallet imports and data from Wallet Settings container and component

* [DDW-922] Removes export wallet imports and data from Wallet Settings container and component

* [DDW-922] Removes export wallet story and related data in storybook

* [DDW-922] Updates translations

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Chores
 
+- Changed delete wallet button layout for emphasized location/importance and removed export wallet feature ([PR 1612](https://github.com/input-output-hk/daedalus/pull/1612))
 - Speedup storybook builds in development ([PR 1607](https://github.com/input-output-hk/daedalus/pull/1607))
 - Added note to UTXO screen showing pending transactions ([PR 1589](https://github.com/input-output-hk/daedalus/pull/1589))
 - Fixed broken source maps ([PR 1594](https://github.com/input-output-hk/daedalus/pull/1594))

source/renderer/app/actions/wallet-settings-actions.js

@@ -1,13 +1,6 @@
 // @flow
 import Action from './lib/Action';
 
-export type WalletExportToFileParams = {
-  walletId: string,
-  exportType: string,
-  filePath: string,
-  password: ?string,
-};
-
 export default class WalletSettingsActions {
   cancelEditingWalletField: Action<any> = new Action();
   startEditingWalletField: Action<{ field: string }> = new Action();
@@ -19,7 +12,6 @@ export default class WalletSettingsActions {
     oldPassword: ?string,
     newPassword: ?string,
   }> = new Action();
-  exportToFile: Action<WalletExportToFileParams> = new Action();
   startWalletUtxoPolling: Action<any> = new Action();
   stopWalletUtxoPolling: Action<any> = new Action();
 }

source/renderer/app/api/api.js

@@ -37,7 +37,6 @@ import { createTransaction } from './transactions/requests/createTransaction';
 import { resetWalletState } from './wallets/requests/resetWalletState';
 import { changeSpendingPassword } from './wallets/requests/changeSpendingPassword';
 import { deleteWallet } from './wallets/requests/deleteWallet';
-import { exportWalletAsJSON } from './wallets/requests/exportWalletAsJSON';
 import { importWalletAsJSON } from './wallets/requests/importWalletAsJSON';
 import { getWallets } from './wallets/requests/getWallets';
 import { importWalletAsKey } from './wallets/requests/importWalletAsKey';
@@ -127,7 +126,6 @@ import type {
   DeleteWalletRequest,
   RestoreWalletRequest,
   UpdateSpendingPasswordRequest,
-  ExportWalletToFileRequest,
   GetWalletCertificateRecoveryPhraseRequest,
   GetWalletRecoveryPhraseFromCertificateRequest,
   ImportWalletFromKeyRequest,
@@ -846,26 +844,6 @@ export default class AdaApi {
     }
   };
 
-  exportWalletToFile = async (
-    request: ExportWalletToFileRequest
-  ): Promise<[]> => {
-    const { walletId, filePath } = request;
-    Logger.debug('AdaApi::exportWalletToFile called', {
-      parameters: filterLogData(request),
-    });
-    try {
-      const response: Promise<[]> = await exportWalletAsJSON(this.config, {
-        walletId,
-        filePath,
-      });
-      Logger.debug('AdaApi::exportWalletToFile success', { response });
-      return response;
-    } catch (error) {
-      Logger.error('AdaApi::exportWalletToFile error', { error });
-      throw new GenericApiError();
-    }
-  };
-
   getWalletUtxos = async (
     request: GetWalletUtxosRequest
   ): Promise<WalletUtxos> => {

source/renderer/app/api/wallets/types.js

@@ -108,12 +108,6 @@ export type ImportWalletFromFileRequest = {
   walletName: ?string,
 };
 
-export type ExportWalletToFileRequest = {
-  walletId: string,
-  filePath: string,
-  password: ?string,
-};
-
 export type GetWalletCertificateRecoveryPhraseRequest = {
   passphrase: string,
   input: string,

source/renderer/app/components/wallet/settings/DeleteWalletButton.js

@@ -1,6 +1,8 @@
 // @flow
 import React, { Component } from 'react';
 import { defineMessages, intlShape } from 'react-intl';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import styles from './DeleteWalletButton.scss';
 
 const messages = defineMessages({
@@ -22,10 +24,16 @@ export default class DeleteWalletButton extends Component<Props> {
 
   render() {
     const { onClick } = this.props;
+    const label = this.context.intl.formatMessage(messages.label);
     return (
-      <button onClick={onClick} className={styles.button}>
-        {this.context.intl.formatMessage(messages.label)}
-      </button>
+      <Button
+        className="flat"
+        disabled={false}
+        label={label}
+        onClick={onClick}
+        skin={ButtonSkin}
+        themeOverrides={styles}
+      />
     );
   }
 }

source/renderer/app/components/wallet/settings/DeleteWalletButton.scss

@@ -1,8 +1,9 @@
-.button {
-  color: var(--theme-button-attention-background-color);
-  font-family: var(--font-medium);
-  font-size: 16px;
-  &:hover {
-    cursor: pointer;
-  }
+.root {
+  color: var(--theme-color-error) !important;
+  font-weight: 500 !important;
+  height: 36px !important;
+  line-height: 1.36 !important;
+  margin-left: 20px;
+  min-width: 160px !important;
+  width: 160px !important;
 }