settings: add view account key (#479)

app/ducks/walletActions.js

@@ -36,6 +36,7 @@ export const setWallet = opts => {
     apiKey = '',
     changeDepth,
     receiveDepth,
+    accountKey,
   } = opts;
 
   return {
@@ -49,6 +50,7 @@ export const setWallet = opts => {
       apiKey,
       changeDepth,
       receiveDepth,
+      accountKey,
     },
   };
 };
@@ -101,6 +103,7 @@ export const fetchWallet = () => async (dispatch, getState) => {
     balance: accountInfo.balance,
     changeDepth: accountInfo.changeDepth,
     receiveDepth: accountInfo.receiveDepth,
+    accountKey: accountInfo.accountKey,
   }));
 };
 

app/ducks/walletReducer.js

@@ -35,6 +35,7 @@ export function getInitialState() {
     },
     changeDepth: 0,
     receiveDepth: 0,
+    accountKey: null,
     transactions: new Map(),
     idle: 0,
     maxIdle: 5,
@@ -75,6 +76,7 @@ export default function walletReducer(state = getInitialState(), {type, payload}
         },
         changeDepth: payload.changeDepth,
         receiveDepth: payload.receiveDepth,
+        accountKey: payload.accountKey,
         initialized: typeof payload.initialized === 'undefined' ? state.initialized : payload.initialized,
       };
     case SET_BALANCE:

app/pages/Settings/AccountKeyModal.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import MiniModal from '../../components/Modal/MiniModal';
+import {I18nContext} from "../../utils/i18n";
+import './account-key-modal.scss';
+
+@connect(
+  (state) => ({
+    accountKey: state.wallet.accountKey,
+  }),
+  dispatch => ({
+  })
+)
+class AccountKeyModal extends Component {
+  static contextType = I18nContext;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+    const {t} = this.context;
+
+    return (
+      <MiniModal
+        closeRoute="/settings/wallet"
+        title={t('settingAccountKeyCTA')}
+        centered
+      >
+        <div className="account-key__instructions">
+          {t('settingAccountKeyDesc')}
+        </div>
+        <div className="account-key__seed-phrase">
+          {this.props.accountKey}
+        </div>
+      </MiniModal>
+    );
+  }
+}
+
+export default AccountKeyModal;

app/pages/Settings/account-key-modal.scss

@@ -0,0 +1,21 @@
+@import '../../variables';
+
+
+.account-key {
+  &__instructions {
+    font-size: 14px;
+    line-height: 1.2rem;
+    margin-bottom: 1rem;
+  }
+
+  &__seed-phrase {
+    background-color: $athens-gray;
+    margin: 0 auto;
+    padding: 12px;
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 18px;
+    line-break: anywhere;
+    user-select: all;
+  }
+}

app/pages/Settings/index.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import './index.scss';
 import AccountIndexModal from './AccountIndexModal';
 import MaxIdleModal from './MaxIdleModal';
+import AccountKeyModal from './AccountKeyModal';
 import RevealSeedModal from './RevealSeedModal';
 import ZapTXsModal from './ZapTXsModal';
 import * as logger from '../../utils/logClient';
@@ -379,6 +380,12 @@ export default class Settings extends Component {
           t('settingZapCTA'),
           () => history.push('/settings/wallet/zap-txs'),
         )}
+        {this.renderSection(
+          t('settingAccountKeyTitle'),
+          t('settingAccountKeyDesc'),
+          t('settingAccountKeyCTA'),
+          () => history.push('/settings/wallet/account-key'),
+        )}
         {this.renderSection(
           t('settingRevealSeedTitle'),
           t('settingRevealSeedDesc'),
@@ -604,6 +611,7 @@ export default class Settings extends Component {
               />
             )}
           />
+          <Route path="/settings/wallet/account-key" component={AccountKeyModal} />
           <Route path="/settings/wallet/reveal-seed" component={RevealSeedModal} />
           <Route path="/settings/wallet/zap-txs" component={ZapTXsModal} />
           <Route path="/settings/connection/configure" component={CustomRPCConfigModal} />

locales/en.json

@@ -403,6 +403,9 @@
   "sendTxSizeLabel": "Estimated TX Size:",
   "sendTxTimeLabel": "Transaction time",
   "setReminder": "Set reminder",
+  "settingAccountKeyCTA": "View Account Key",
+  "settingAccountKeyDesc": "Anyone with this public key has read-only access to this wallet account and all its transaction history.",
+  "settingAccountKeyTitle": "Account Key (xPub key)",
   "settingAPIKeyCTA": "View API Key",
   "settingAPIKeyDesc": "API key for hs-client. Make sure you select the wallet id \"%s\".",
   "settingBackupListingDesc": "Download backup of all your listings and fulfillments",