Merge pull request #756 from hubiinetwork/feature/1.1.0

1.1.0-beta.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hubii-core",
-  "version": "1.0.0",
+  "version": "1.1.0-beta.1",
   "author": {
     "name": "hubii",
     "email": "info@hubii.com",
@@ -313,7 +313,7 @@
     "lodash.debounce": "^4.0.8",
     "minimist": "1.2.0",
     "moment": "2.22.2",
-    "nahmii-sdk": "1.0.0-beta.50",
+    "nahmii-sdk": "2.2.4",
     "prop-types": "15.6.1",
     "qrcode.react": "0.8.0",
     "react": "16.6.3",

src/components/EditWalletModal/index.js

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { Form, Icon } from 'antd';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import {
+  Text,
+  Wrapper,
+  WrapperIcon,
+  StyledButton,
+  ParentDiv,
+} from './style';
+import { ModalFormLabel, ModalFormInput, ModalFormItem } from '../ui/Modal';
+/**
+ * Modal component for editing a wallet.
+ */
+
+export class EditWalletModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleEdit = this.handleEdit.bind(this);
+  }
+
+
+  handleEdit(e) {
+    const { onEdit } = this.props;
+    e.preventDefault();
+    this.props.form.validateFields((err, value) => {
+      if (!err) {
+        onEdit({ name: value.name.trim() });
+      }
+    });
+  }
+
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const { intl } = this.props;
+    const { formatMessage } = intl;
+    return (
+      <Wrapper>
+        <WrapperIcon>
+          <Icon type="info-circle-o" />
+          <Text>
+            {formatMessage({ id: 'edit_wallet' })}
+          </Text>
+        </WrapperIcon>
+        <Form layout="vertical" onSubmit={this.handleEdit}>
+          <ModalFormItem label={<ModalFormLabel>{formatMessage({ id: 'name' })}</ModalFormLabel>}>
+            {getFieldDecorator('name', {
+              rules: [
+                {
+                  message: formatMessage({ id: 'enter_wallet_name' }),
+                  required: true,
+                },
+                {
+                  max: 25,
+                  message: formatMessage({ id: 'wallet_name_max25_error' }),
+                },
+              ],
+              initialValue: this.props.initialName,
+            })(<ModalFormInput placeholder="Wallet name" />)}
+          </ModalFormItem>
+          <ParentDiv>
+            <StyledButton
+              type="primary"
+              htmlType="submit"
+              id="button"
+            >
+              {formatMessage({ id: 'confirm' })}
+            </StyledButton>
+            <StyledButton
+              type="default"
+              onClick={this.props.onCancel}
+              id="cancel"
+              style={{ marginLeft: '2rem' }}
+            >
+              {formatMessage({ id: 'cancel' })}
+            </StyledButton>
+          </ParentDiv>
+        </Form>
+      </Wrapper>
+    );
+  }
+}
+
+EditWalletModal.defaultProps = {
+  initialName: '',
+};
+
+EditWalletModal.propTypes = {
+  initialName: PropTypes.string,
+  onEdit: PropTypes.func,
+  onCancel: PropTypes.func,
+  form: PropTypes.object,
+  intl: PropTypes.object.isRequired,
+};
+
+export default Form.create()(injectIntl(EditWalletModal));
+

src/components/EditWalletModal/style.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import Button from 'components/ui/Button';
+
+export const WrapperIcon = styled.div`
+  display: flex;
+  color: ${({ theme }) => theme.palette.secondary1};
+  font-size: 80%;
+  max-width: 70%;
+  margin-top: 2.86rem;
+  i {
+    font-size: 1.71rem;
+  }
+`;
+export const Text = styled.div`
+  padding-left: 0.5rem;
+`;
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .ant-form-item-required:before {
+    display: none;
+  }
+  .ant-form-vertical {
+    display: flex;
+    width: 70%;
+    flex-direction: column;
+  }
+  .ant-form-vertical .ant-form-item {
+    padding-bottom: 0rem;
+  }
+  .ant-form-item {
+    margin-bottom: 0rem;
+  }
+`;
+export const StyledButton = styled(Button)`
+  min-width: 11.43rem;
+`;
+
+export const ParentDiv = styled.div`
+  margin-top: 1.43rem;
+  display: flex;
+  justify-content: center;
+`;

src/components/WalletItemCard/index.js

@@ -8,6 +8,7 @@ import { trimDecimals, isHardwareWallet, isAddressMatch } from 'utils/wallet';
 import { formatFiat } from 'utils/numberFormats';
 import WalletStatusIndicator from 'components/WalletStatusIndicator';
 import DeletionModal from 'components/DeletionModal';
+import EditWalletModal from 'components/EditWalletModal';
 import { Modal } from 'components/ui/Modal';
 import NahmiiText from 'components/ui/NahmiiText';
 import Text from 'components/ui/Text';
@@ -49,10 +50,17 @@ export class WalletItemCard extends React.PureComponent {
     };
     this.settingsMenu = this.settingsMenu.bind(this);
     this.handleDeleteWallet = this.handleDeleteWallet.bind(this);
+    this.handleEditWallet = this.handleEditWallet.bind(this);
     this.handleExportSeedWords = this.handleExportSeedWords.bind(this);
     this.handleClickCopy = this.handleClickCopy.bind(this);
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.name !== this.props.name) {
+      this.setState({ modalVisibility: false }); // eslint-disable-line
+    }
+  }
+
   settingsMenu(walletType, isDecrypted) {
     const menuItems = [];
     const { formatMessage } = this.props.intl;
@@ -81,6 +89,17 @@ export class WalletItemCard extends React.PureComponent {
     menuItems.push(
       <MenuItem
         key="6"
+        onClick={() =>
+          this.setState({ modalVisibility: true, modalType: 'editWallet' })
+        }
+      >
+        {formatMessage({ id: 'edit_wallet' })}
+      </MenuItem>
+    );
+    menuItems.push(<MenuDivider key="7" />);
+    menuItems.push(
+      <MenuItem
+        key="8"
         onClick={() =>
           this.setState({ modalVisibility: true, modalType: 'deleteWallet' })
         }
@@ -104,6 +123,10 @@ export class WalletItemCard extends React.PureComponent {
     this.setState({ modalVisibility: false });
   }
 
+  handleEditWallet(changes) {
+    this.props.editWallet(changes);
+  }
+
   handleClickCopy(e) {
     e.stopPropagation();
     const { intl, notify } = this.props;
@@ -180,6 +203,15 @@ export class WalletItemCard extends React.PureComponent {
           />
         );
         break;
+      case 'editWallet':
+        modal = (
+          <EditWalletModal
+            initialName={name}
+            onEdit={this.handleEditWallet}
+            onCancel={() => this.setState({ modalVisibility: false })}
+          />
+        );
+        break;
       default:
         modal = (
           <ExportPrivateInfo
@@ -290,12 +322,15 @@ export class WalletItemCard extends React.PureComponent {
         </DynamicOuterWrapper>
         <Modal
           footer={null}
-          width={modalType === 'deleteWallet' ? '37.14rem' : '50rem'}
+          width={['deleteWallet', 'editWallet'].includes(modalType) ? '37.14rem' : '50rem'}
           maskClosable
           style={{ marginTop: '1.43rem' }}
           visible={
-            (isDecrypted && modalVisibility) ||
-            (modalVisibility && modalType === 'deleteWallet')
+            modalVisibility && (
+              isDecrypted ||
+              modalType === 'deleteWallet' ||
+              modalType === 'editWallet'
+            )
           }
           onCancel={() => this.setState({ modalVisibility: false })}
           destroyOnClose
@@ -334,6 +369,7 @@ WalletItemCard.propTypes = {
   handleToggleFold: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   deleteWallet: PropTypes.func.isRequired,
+  editWallet: PropTypes.func.isRequired,
   lock: PropTypes.func.isRequired,
   unlock: PropTypes.func.isRequired,
   showDecryptWalletModal: PropTypes.func.isRequired,

src/containers/App/actions.js

@@ -5,6 +5,15 @@ import {
   INIT_NAHMII_PROVIDERS,
   UPDATE_NAHMII_PROVIDER,
   UPDATE_CURRENT_NETWORK_NAHMII_PROVIDER,
+  BATCH_EXPORT,
+  BATCH_EXPORT_SUCCESS,
+  BATCH_EXPORT_ERROR,
+  BATCH_IMPORT,
+  BATCH_IMPORT_ERROR,
+  BATCH_IMPORT_SUCCESS,
+  DECRYPT_IMPORT,
+  DECRYPT_IMPORT_SUCCESS,
+  DECRYPT_IMPORT_ERROR,
 } from './constants';
 
 
@@ -50,3 +59,64 @@ export function initNetworkActivity() {
     type: INIT_NETWORK_ACTIVITY,
   };
 }
+
+export function batchExport(password, filePath) {
+  return {
+    type: BATCH_EXPORT,
+    password,
+    filePath,
+  };
+}
+
+export function batchExportSuccess() {
+  return {
+    type: BATCH_EXPORT_SUCCESS,
+  };
+}
+
+export function batchExportError(error) {
+  return {
+    type: BATCH_EXPORT_ERROR,
+    error,
+  };
+}
+
+export function batchImport() {
+  return {
+    type: BATCH_IMPORT,
+  };
+}
+
+export function batchImportSuccess() {
+  return {
+    type: BATCH_IMPORT_SUCCESS,
+  };
+}
+
+export function batchImportError() {
+  return {
+    type: BATCH_IMPORT_ERROR,
+  };
+}
+
+export function decryptImport(password, filePath) {
+  return {
+    type: DECRYPT_IMPORT,
+    password,
+    filePath,
+  };
+}
+
+export function decryptImportSuccess(decryptedContent) {
+  return {
+    type: DECRYPT_IMPORT_SUCCESS,
+    decryptedContent,
+  };
+}
+
+export function decryptImportError(error) {
+  return {
+    type: DECRYPT_IMPORT_ERROR,
+    error,
+  };
+}

src/containers/App/constants.js

@@ -7,3 +7,13 @@ export const UPDATE_NAHMII_PROVIDER = 'src/App/UPDATE_NAHMII_PROVIDER';
 export const UPDATE_CURRENT_NETWORK_NAHMII_PROVIDER = 'src/App/UPDATE_CURRENT_NETWORK_NAHMII_PROVIDER';
 
 export const INIT_NETWORK_ACTIVITY = 'src/App/INIT_NETWORK_ACTIVITY';
+
+export const BATCH_EXPORT = 'src/App/BATCH_EXPORT';
+export const BATCH_EXPORT_SUCCESS = 'src/App/BATCH_EXPORT_SUCCESS';
+export const BATCH_EXPORT_ERROR = 'src/App/BATCH_EXPORT_ERROR';
+export const BATCH_IMPORT = 'src/App/BATCH_IMPORT';
+export const BATCH_IMPORT_SUCCESS = 'src/App/BATCH_IMPORT_SUCCESS';
+export const BATCH_IMPORT_ERROR = 'src/App/BATCH_IMPORT_ERROR';
+export const DECRYPT_IMPORT = 'src/App/DECRYPT_IMPORT';
+export const DECRYPT_IMPORT_SUCCESS = 'src/App/DECRYPT_IMPORT_SUCCESS';
+export const DECRYPT_IMPORT_ERROR = 'src/App/DECRYPT_IMPORT_ERROR';

src/containers/App/reducer.js

@@ -15,6 +15,10 @@ import {
   CHANGE_NETWORK,
   UPDATE_NAHMII_PROVIDER,
   UPDATE_CURRENT_NETWORK_NAHMII_PROVIDER,
+  DECRYPT_IMPORT_SUCCESS,
+  DECRYPT_IMPORT_ERROR,
+  BATCH_EXPORT_ERROR,
+  BATCH_IMPORT_SUCCESS,
 } from './constants';
 
 export const initialState = fromJS({
@@ -25,6 +29,7 @@ export const initialState = fromJS({
     version: null,
     body: null,
   },
+  restore: {},
 });
 
 
@@ -42,6 +47,21 @@ function appReducer(state = initialState, action) {
     case UPDATE_CURRENT_NETWORK_NAHMII_PROVIDER:
       return state
         .setIn(['currentNetwork', 'nahmiiProvider'], action.nahmiiProvider);
+    case BATCH_EXPORT_ERROR:
+      return state
+        .setIn(['restore', 'export', 'error'], action.error);
+    case DECRYPT_IMPORT_ERROR:
+      return state
+        .setIn(['restore', 'import', 'error'], action.error)
+        .setIn(['restore', 'import', 'data'], null);
+    case DECRYPT_IMPORT_SUCCESS:
+      return state
+        .setIn(['restore', 'import', 'error'], null)
+        .setIn(['restore', 'import', 'data'], action.decryptedContent);
+    case BATCH_IMPORT_SUCCESS:
+      return state
+        .setIn(['restore', 'import', 'error'], null)
+        .setIn(['restore', 'import', 'data'], null);
     default:
       return state;
   }