Added wallet preferences, implemented tx spending limit selector

package.json

@@ -12,6 +12,7 @@
     "private": true,
     "main": "./electron/index.js",
     "dependencies": {
+        "big.js": "^5.2.1",
         "bluebird": "^3.5.1",
         "centrifuge": "^1.4.6",
         "chart.js": "^2.7.2",
@@ -90,6 +91,7 @@
         "release": "electron-builder --config electron-builder.json"
     },
     "devDependencies": {
+        "@types/big.js": "^4.0.5",
         "@types/bluebird": "^3.5.18",
         "@types/chart.js": "^2.7.22",
         "@types/classnames": "^2.2.3",
@@ -147,4 +149,4 @@
         "typescript": "^2.8.3",
         "typescript-react-intl": "^0.1.7"
     }
-}
+}

public/locales/ru-RU.json

@@ -63,6 +63,7 @@
     "confirm": "Подтвердить",
     "contract": "Смарт-контракт",
     "contract.exec": "Вызвать контракт",
+    "disabled": "Отключено",
     "editor.block.create": "Создать блок",
     "editor.close.confirm": "Вы действительно хотите закрыть '{name}' без сохранения изменений?",
     "editor.close.all": "Закрыть все вкладки",
@@ -188,6 +189,9 @@
     "tx.error.E_LIMITFORSIGN.desc": "Параметры вызова содержат данные слишком большого объёма",
     "tx.error.E_OFFLINE.desc": "Не удалось установить подключение к серверу",
     "tx.error.E_SERVER.desc": "{error}",
+    "tx.spending.limit.desc": "Вызываемые транзакции, не смогут израсходовать больше валюты, чем указано здесь",
+    "tx.spending.limit.long": "Лимит списания транзакций",
+    "tx.spending.limit.short": "Лимит",
     "validation.field.invalid": "Поле содержит некорректные данные",
     "validation.required": "Данное поле необходимо заполнить",
     "validation.minlength": "Значение слишком короткое",

src/app/components/Animation/Dropdown.tsx

@@ -53,7 +53,7 @@ const containerAnimationDef = {
         padding: '0 50px 50px',
         margin: '0 -50px',
         overflow: 'hidden',
-        zIndex: 500
+        zIndex: 590
     }
 };
 

src/app/components/Button/index.tsx

@@ -26,6 +26,7 @@ export interface IButtonProps {
     disabled?: boolean;
     pending?: boolean;
     className?: string;
+    style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
@@ -35,6 +36,7 @@ const Button: React.SFC<IButtonProps> = props => (
         onClick={props.onClick}
         disabled={props.disabled}
         className={props.className}
+        style={props.style}
     >
         {props.children}
     </button>

src/app/components/DropdownButton/index.tsx

@@ -34,6 +34,7 @@ const StyledDropdown = themed.div`
 
     &.dropdown-active button.dropdown-toggle {
         background: rgba(0,0,0,0.15);
+        z-index: 610;
     }
 
     button.dropdown-toggle {
@@ -43,7 +44,7 @@ const StyledDropdown = themed.div`
         padding: 0 10px;
         text-align: center;
         position: relative;
-        z-index: 1000;
+        z-index: 500;
 
         .dropdown-badge {
             position: absolute;

src/app/components/Main/Toolbar/DropdownToolButton.tsx

@@ -32,14 +32,15 @@ export interface IDropdownToolButtonProps {
     disabled?: boolean;
     right?: boolean;
     leftMost?: boolean;
+    width?: number;
     content: React.ReactNode;
 }
 
 const DropdownToolButton: React.SFC<IDropdownToolButtonProps> = props => (
     <li className={classNames({ disabled: props.disabled }, props.className)} style={{ float: props.right ? 'right' : null }}>
         <DropdownButton
             align={props.right ? 'right' : 'left'}
-            width={200}
+            width={props.width || 200}
             disabled={props.disabled}
             leftMost={props.leftMost}
             content={props.content}
@@ -52,7 +53,7 @@ const DropdownToolButton: React.SFC<IDropdownToolButtonProps> = props => (
     </li>
 );
 
-const StyledDropdownToolButton = styled(DropdownToolButton) `
+const StyledDropdownToolButton = styled(DropdownToolButton)`
     display: inline-block;
     vertical-align: top;
 

src/app/components/Main/TxMenu.tsx

@@ -0,0 +1,107 @@
+// MIT License
+// 
+// Copyright (c) 2016-2018 GenesisKernel
+// 
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// 
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// 
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import React from 'react';
+import propTypes from 'prop-types';
+import { Row, Col } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
+
+import DropdownToolButton from './Toolbar/DropdownToolButton';
+import Validation from '../Validation';
+import { CloseDropdownButton } from 'components/DropdownButton';
+
+export interface ITxMenuProps {
+    maxSum: string;
+    onEdit: (value: string) => any;
+}
+
+interface ITxMenuContext {
+    closeDropdown: () => void;
+}
+
+const TxMenuContent: React.SFC<ITxMenuProps> = (props, context: ITxMenuContext) => (
+    <div style={{ overflow: 'hidden' }}>
+        <div className="dropdown-heading">
+            <FormattedMessage id="tx.spending.limit.long" defaultMessage="Transaction spending limit" />
+        </div>
+        <div className="dropdown-info">
+            <FormattedMessage id="tx.spending.limit.desc" defaultMessage="Transactions executed on your behalf will not be able to spend more tokens than you specify here" />
+        </div>
+        <div style={{ padding: 8 }}>
+            <Validation.components.ValidatedForm onSubmitSuccess={payload => { props.onEdit(payload.maxSum === '' ? null : payload.maxSum); context.closeDropdown(); }}>
+                <Validation.components.ValidatedFormGroup for="maxSum">
+                    <Validation.components.ValidatedDecimal
+                        className="form-control"
+                        name="maxSum"
+                        value={props.maxSum}
+                        validators={[Validation.validators.min('0.000000000000000001'), Validation.validators.max('1000')]}
+                    />
+                </Validation.components.ValidatedFormGroup>
+                <Row>
+                    <Col xs={6} style={{ paddingRight: 5 }}>
+                        <CloseDropdownButton onClick={() => props.onEdit(null)} className="btn btn-block btn-default">
+                            <FormattedMessage id="clear" defaultMessage="Clear" />
+                        </CloseDropdownButton>
+                    </Col>
+                    <Col xs={6} style={{ paddingLeft: 5 }}>
+                        <Validation.components.ValidatedSubmit style={{ marginTop: 8 }} block bsStyle="primary">
+                            <FormattedMessage id="confirm" defaultMessage="Confirm" />
+                        </Validation.components.ValidatedSubmit>
+                    </Col>
+                </Row>
+            </Validation.components.ValidatedForm>
+        </div>
+    </div>
+);
+
+TxMenuContent.contextTypes = {
+    closeDropdown: propTypes.func.isRequired
+};
+
+const TxMenu: React.SFC<ITxMenuProps> = (props) => (
+    <DropdownToolButton
+        icon="icon-lock"
+        right
+        width={250}
+        content={(
+            <TxMenuContent {...props}/>
+        )}
+    >
+        <span className="icon text-bold mr">
+            <FormattedMessage id="tx.spending.limit.short" defaultMessage="Limit" />:
+        </span>
+        <span>
+            {props.maxSum ?
+                (
+                    <span>{props.maxSum}</span>
+                ) :
+                (
+                    <span>
+                        <FormattedMessage id="disabled" defaultMessage="Disabled" />
+                    </span>
+                )
+            }
+        </span>
+    </DropdownToolButton>
+);
+
+export default TxMenu;

src/app/components/Main/index.tsx

@@ -38,6 +38,7 @@ import ToolButton from 'components/Main/Toolbar/ToolButton';
 import EditorToolbar from 'containers/Main/Toolbar/EditorToolbar';
 import ToolIndicator from 'components/Main/Toolbar/ToolIndicator';
 import LoadingBar from './LoadingBar';
+import TxMenu from 'containers/Main/Toolbar/TxMenu';
 // import TransactionsMenu from './TransactionsMenu';
 
 const StyledWrapper = themed.div`
@@ -169,6 +170,7 @@ class Main extends React.Component<IMainProps> {
                                 titleDesc={<FormattedMessage id="privileged.desc" defaultMessage="You will not be prompted to enter your password when executing transactions" />}
                             />
                         )}
+                        <TxMenu />
                         {'editor' === this.props.section ?
                             (
                                 <EditorToolbar />

src/app/components/Validation/ValidatedControl.tsx

@@ -103,6 +103,7 @@ export default class ValidatedControl extends React.Component<IValidatedControlP
                 onBlur={this.onBlur}
                 bsClass={this.props.bsClass}
                 bsSize={this.props.bsSize}
+                step={this.props.step}
                 componentClass={this.props.componentClass}
                 id={this.props.id}
                 name={this.props.name}

src/app/components/Validation/ValidatedDecimal.tsx

@@ -0,0 +1,154 @@
+// MIT License
+// 
+// Copyright (c) 2016-2018 GenesisKernel
+// 
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// 
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// 
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import * as React from 'react';
+import { FormControl, FormControlProps } from 'react-bootstrap';
+import { Validator } from './Validators';
+import * as propTypes from 'prop-types';
+import { MONEY_POWER } from 'lib/tx/convert';
+
+import ValidatedForm, { IValidatedControl } from './ValidatedForm';
+
+export interface IValidatedDecimalProps extends FormControlProps {
+    name: string;
+    validators?: Validator[];
+}
+
+interface IValidatedDecimalState {
+    value: string;
+}
+
+export default class ValidatedDecimal extends React.Component<IValidatedDecimalProps, IValidatedDecimalState> implements IValidatedControl {
+    constructor(props: IValidatedDecimalProps) {
+        super(props);
+
+        this.state = {
+            value: (props.value || props.defaultValue || '') as string
+        };
+    }
+
+    componentDidMount() {
+        if (this.context.form) {
+            (this.context.form as ValidatedForm)._registerElement(this);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.context.form) {
+            (this.context.form as ValidatedForm)._unregisterElement(this);
+        }
+    }
+
+    componentWillReceiveProps(props: IValidatedDecimalProps) {
+        if (this.props.value !== props.value) {
+            this.setState({
+                value: props.value === null ? '' : props.value as string
+            });
+            (this.context.form as ValidatedForm).updateState(props.name, props.value);
+        }
+    }
+
+    getValue() {
+        return this.state.value;
+    }
+
+    validateValue(value: string) {
+        if (value === '') {
+            return true;
+        }
+
+        value = value.replace(',', '.');
+
+        if (!/^(0|[1-9]+[0-9]*)\.?\d*$/.test(value)) {
+            return false;
+        }
+
+        const dotCount = (value.match(/\./g) || []).length;
+
+        if (dotCount > 1) {
+            return false;
+        }
+
+        if (dotCount === 1 && value.split('.')[1].length > MONEY_POWER) {   // check precision
+            return false;
+        }
+
+        return true;
+    }
+
+    onChange = (e: React.ChangeEvent<FormControl>) => {
+        const value = (e.target as any).value.replace(',', '.');
+
+        if (!this.validateValue(value)) {
+            return;
+        }
+
+        this.setState({
+            value
+        });
+
+        if (this.props.onChange) {
+            this.props.onChange(e);
+        }
+
+        (this.context.form as ValidatedForm).emitUpdate(this.props.name, value);
+    }
+
+    onBlur = (e: React.FocusEvent<FormControl>) => {
+        if (this.context.form) {
+            (this.context.form as ValidatedForm).updateState(this.props.name);
+        }
+
+        if (this.props.onBlur) {
+            this.props.onBlur(e);
+        }
+    }
+
+    render() {
+        return (
+            <FormControl
+                style={this.props.style}
+                className={this.props.className}
+                readOnly={this.props.readOnly}
+                disabled={this.props.disabled}
+                onChange={this.onChange}
+                onBlur={this.onBlur}
+                bsClass={this.props.bsClass}
+                bsSize={this.props.bsSize}
+                step={this.props.step}
+                componentClass={this.props.componentClass}
+                id={this.props.id}
+                name={this.props.name}
+                inputRef={this.props.inputRef}
+                placeholder={this.props.placeholder}
+                value={this.state.value}
+                noValidate
+            >
+                {this.props.children}
+            </FormControl>
+        );
+    }
+}
+
+(ValidatedDecimal as React.ComponentClass).contextTypes = {
+    form: propTypes.instanceOf(ValidatedForm)
+};