[DDW-570] Update "View wallet's public key" feature

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Enabled the "View wallet's public key" feature ([PR 2429](https://github.com/input-output-hk/daedalus/pull/2429))
 - Added visual backdrop blur effect to some overlays and dialogs ([PR 2431](https://github.com/input-output-hk/daedalus/pull/2431))
 - Updated Tile view of stake pools with rank by rewards ([PR 2426](https://github.com/input-output-hk/daedalus/pull/2426))
 - Enabled the "Loading Stake Pools" state anytime the pools are loading ([PR 2424](https://github.com/input-output-hk/daedalus/pull/2424))

package.json

@@ -175,6 +175,7 @@
     "@cardano-foundation/ledgerjs-hw-app-cardano": "2.2.0",
     "@iohk-jormungandr/wallet-js": "0.5.0-pre7",
     "aes-js": "3.1.2",
+    "bech32": "2.0.0",
     "bignumber.js": "9.0.1",
     "bip39": "2.3.0",
     "blake2b": "2.1.3",

source/renderer/app/actions/hardware-wallets-actions.js

@@ -1,9 +1,5 @@
 // @flow
 import Action from './lib/Action';
-import type {
-  SetHardwareWalletLocalDataRequestType,
-  SetHardwareWalletDeviceRequestType,
-} from '../api/utils/localStorage';
 import type { DelegationAction } from '../types/stakingTypes';
 
 export default class HardwareWalletsActions {
@@ -20,8 +16,4 @@ export default class HardwareWalletsActions {
   }> = new Action();
   sendMoney: Action<any> = new Action();
   refreshHardwareWalletsLocalData: Action<any> = new Action();
-  setHardwareWalletLocalData: Action<SetHardwareWalletLocalDataRequestType> = new Action();
-  unsetHardwareWalletLocalData: Action<{ walletId: string }> = new Action();
-  setHardwareWalletDevice: Action<SetHardwareWalletDeviceRequestType> = new Action();
-  unsetHardwareWalletDevice: Action<{ deviceId: ?string }> = new Action();
 }

source/renderer/app/actions/wallets-actions.js

@@ -77,6 +77,7 @@ export default class WalletsActions {
     filePath: string,
   }> = new Action();
   saveQRCodeImageSuccess: Action<{ walletAddress: string }> = new Action();
+  getAccountPublicKey: Action<{ spendingPassword: string }> = new Action();
   copyPublicKey: Action<{ publicKey: string }> = new Action();
   copyAddress: Action<{ address: string }> = new Action();
   copyAssetItem: Action<{ assetItem: string, value: string }> = new Action();

source/renderer/app/api/api.js

@@ -190,6 +190,7 @@ import type {
   GetCurrencyListResponse,
   GetCurrencyRateRequest,
   GetCurrencyRateResponse,
+  GetAccountPublicKeyRequest,
 } from './wallets/types';
 import type { WalletProps } from '../domains/Wallet';
 
@@ -236,6 +237,7 @@ import type {
 } from './assets/types';
 import Asset from '../domains/Asset';
 import { getAssets } from './assets/requests/getAssets';
+import { getAccountPublicKey } from './wallets/requests/getAccountPublicKey';
 
 const { isIncentivizedTestnet, environment } = global;
 
@@ -353,6 +355,32 @@ export default class AdaApi {
     }
   };
 
+  getAccountPublicKey = async (
+    request: GetAccountPublicKeyRequest
+  ): Promise<string> => {
+    logger.debug('AdaApi::getAccountPublicKey called', {
+      parameters: filterLogData(request),
+    });
+    try {
+      const { walletId, index, passphrase, extended } = request;
+      const accountPublicKey: string = await getAccountPublicKey(this.config, {
+        walletId,
+        index,
+        passphrase,
+        extended,
+      });
+      logger.debug('AdaApi::getAccountPublicKey success', { accountPublicKey });
+      return accountPublicKey;
+    } catch (error) {
+      logger.error('AdaApi::getAccountPublicKey error', { error });
+      throw new ApiError(error)
+        .set('wrongEncryptionPassphrase')
+        .where('code', 'bad_request')
+        .inc('message', 'passphrase is too short')
+        .result();
+    }
+  };
+
   getAddresses = async (
     request: GetAddressesRequest
   ): Promise<Array<WalletAddress>> => {
@@ -1185,7 +1213,6 @@ export default class AdaApi {
       return _createAddressFromServerData(address);
     } catch (error) {
       logger.error('AdaApi::createAddress error', { error });
-
       throw new ApiError(error)
         .set('wrongEncryptionPassphrase')
         .where('code', 'bad_request')

source/renderer/app/api/wallets/requests/getAccountPublicKey.js

@@ -0,0 +1,18 @@
+// @flow
+import type { RequestConfig } from '../../common/types';
+import { request } from '../../utils/request';
+import type { GetAccountPublicKeyRequest } from '../types';
+
+export const getAccountPublicKey = (
+  config: RequestConfig,
+  { walletId, index, passphrase, extended }: GetAccountPublicKeyRequest
+): Promise<string> =>
+  request(
+    {
+      method: 'POST',
+      path: `/v2/wallets/${walletId}/keys/${index}`,
+      ...config,
+    },
+    {},
+    { passphrase, extended }
+  );

source/renderer/app/api/wallets/requests/getWalletPublicKey.js

@@ -1,10 +1,11 @@
 // @flow
 import type { RequestConfig } from '../../common/types';
 import { request } from '../../utils/request';
+import type { GetWalletPublicKeyRequest } from '../types';
 
 export const getWalletPublicKey = (
   config: RequestConfig,
-  { walletId, role, index }: { walletId: string, role: string, index: string }
+  { walletId, role, index }: GetWalletPublicKeyRequest
 ): Promise<string> =>
   request({
     method: 'GET',

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

@@ -245,6 +245,13 @@ export type GetWalletPublicKeyRequest = {
   index: string,
 };
 
+export type GetAccountPublicKeyRequest = {
+  walletId: string,
+  index: string,
+  passphrase: string,
+  extended: boolean,
+};
+
 export type TransferFundsCalculateFeeRequest = {
   sourceWalletId: string,
 };

source/renderer/app/components/wallet/receive/WalletReceiveDialog.scss

@@ -2,11 +2,13 @@
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
+
   canvas {
     border: 4px solid var(--theme-receive-qr-code-background-color);
     box-sizing: content-box;
   }
 }
+
 .address {
   font-family: var(--font-mono);
   font-size: 19px;
@@ -15,24 +17,32 @@
   text-align: center;
   word-wrap: break-word;
 }
+
 .copyAddress {
   display: block;
   margin-bottom: 20px;
+  opacity: 0.7;
   text-align: center;
   width: 100%;
+
+  &:hover {
+    opacity: 1;
+  }
 }
+
 .copyAddressLabel {
   color: var(--theme-label-button-color);
   cursor: pointer;
   font-family: var(--font-regular);
   font-size: 14px;
-  opacity: 0.5;
   padding-left: 6px;
 }
+
 .copyIcon {
   cursor: pointer;
   margin-left: 4px;
   object-fit: contain;
+
   & > svg {
     height: 12px;
     width: 10px;
@@ -41,6 +51,7 @@
     }
   }
 }
+
 .noteInput textarea {
   background: transparent;
   font-family: var(--font-regular);

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

@@ -0,0 +1,139 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Input } from 'react-polymorph/lib/components/Input';
+import vjf from 'mobx-react-form/lib/validators/VJF';
+import styles from './WalletPublicKeyDialog.scss';
+import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
+import { submitOnEnter } from '../../../utils/form';
+import globalMessages from '../../../i18n/global-messages';
+import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../../config/timingConfig';
+import Dialog from '../../widgets/Dialog';
+import DialogCloseButton from '../../widgets/DialogCloseButton';
+import LocalizableError from '../../../i18n/LocalizableError';
+
+const messages = defineMessages({
+  title: {
+    id: 'wallet.settings.walletPublicKeyDialog.title',
+    defaultMessage: '!!!Reveal wallet public key',
+    description: 'Title "Choose a stake pool" on the reveal Wallet Id dialog.',
+  },
+  description: {
+    id: 'wallet.settings.walletPublicKeyDialog.description',
+    defaultMessage:
+      '!!!Please enter your spending password to reveal your wallet’s public key.',
+    description: 'Description on the reveal Wallet Id dialog.',
+  },
+  buttonLabel: {
+    id: 'wallet.settings.walletPublicKeyDialog.button',
+    defaultMessage: '!!!Reveal wallet public key',
+    description: 'Description on the reveal Wallet Id dialog.',
+  },
+});
+
+type Props = {
+  onRevealPublicKey: Function,
+  onClose: Function,
+  error: ?LocalizableError,
+  hasReceivedWalletPublicKey: boolean,
+};
+
+@observer
+export default class WalletPublicKeyDialog extends Component<Props> {
+  static contextTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  componentDidUpdate() {
+    const { hasReceivedWalletPublicKey, onClose } = this.props;
+    if (hasReceivedWalletPublicKey) {
+      onClose();
+    }
+  }
+
+  form = new ReactToolboxMobxForm(
+    {
+      fields: {
+        spendingPassword: {
+          type: 'password',
+          label: this.context.intl.formatMessage(
+            globalMessages.spendingPasswordLabel
+          ),
+          placeholder: this.context.intl.formatMessage(
+            globalMessages.spendingPasswordPlaceholder
+          ),
+          value: '',
+          validators: [
+            ({ field }) => {
+              if (field.value === '') {
+                return [
+                  false,
+                  this.context.intl.formatMessage(
+                    globalMessages.fieldIsRequired
+                  ),
+                ];
+              }
+              return [true];
+            },
+          ],
+        },
+      },
+    },
+    {
+      plugins: { vjf: vjf() },
+      options: {
+        validateOnChange: true,
+        validationDebounceWait: FORM_VALIDATION_DEBOUNCE_WAIT,
+      },
+    }
+  );
+
+  submit = () => {
+    this.form.submit({
+      onSuccess: (form) => {
+        const { spendingPassword } = form.values();
+        const { onRevealPublicKey } = this.props;
+        onRevealPublicKey({ spendingPassword });
+      },
+    });
+  };
+
+  handleSubmitOnEnter = submitOnEnter.bind(this, this.submit);
+
+  render() {
+    const { intl } = this.context;
+    const { onClose, error } = this.props;
+    const { form } = this;
+    const spendingPasswordField = form.$('spendingPassword');
+    const actions = [
+      {
+        label: intl.formatMessage(messages.buttonLabel),
+        onClick: this.submit,
+        primary: true,
+        disabled: !this.form.isValid,
+      },
+    ];
+    return (
+      <Dialog
+        title={intl.formatMessage(messages.title)}
+        actions={actions}
+        closeOnOverlayClick
+        onClose={onClose}
+        closeButton={<DialogCloseButton onClose={onClose} />}
+      >
+        <div className={styles.description}>
+          {intl.formatMessage(messages.description)}
+        </div>
+        <Input
+          className={styles.spendingPassword}
+          {...spendingPasswordField.bind()}
+          error={spendingPasswordField.error}
+          onKeyPress={this.handleSubmitOnEnter}
+          autoFocus
+        />
+        {error && <p className={styles.error}>{intl.formatMessage(error)}</p>}
+      </Dialog>
+    );
+  }
+}

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

@@ -0,0 +1,13 @@
+@import '../../../themes/mixins/error-message';
+
+.description {
+  font-family: var(--font-regular);
+  line-height: 1.38;
+  margin-bottom: 20px;
+}
+
+.error {
+  @include error-message;
+  margin-top: 20px;
+  text-align: center;
+}