From aea49e2498145aadf48b63c4ed6f6697ec2d5a3e Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 15:30:14 +0700 Subject: [PATCH 01/22] add eslint jsdoc --- .eslintrc.json | 11 ++++++++--- package-lock.json | 48 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 57 insertions(+), 3 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 615aba3a..d54ad6f9 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,12 +5,14 @@ "jest": true }, "parser": "babel-eslint", - "extends": ["airbnb"], + "extends": [ + "airbnb", + "plugin:jsdoc/recommended" + ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, - "parserOptions": { "ecmaFeatures": { "jsx": true @@ -18,7 +20,10 @@ "ecmaVersion": 2018, "sourceType": "module" }, - "plugins": ["react"], + "plugins": [ + "react", + "jsdoc" + ], "rules": { "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], // "react/static-property-placement": ["error", "static public field"], diff --git a/package-lock.json b/package-lock.json index d1f2a48d..57e05f8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5073,6 +5073,12 @@ "graceful-readlink": ">= 1.0.0" } }, + "comment-parser": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-0.7.0.tgz", + "integrity": "sha512-m0SGP0RFO4P3hIBlIor4sBFPe5Y4HUeGgo/UZK/1Zdea5eUiqxroQ3lFqBDDSfWo9z9Q6LLnt2u0JqwacVEd/A==", + "dev": true + }, "common-tags": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz", @@ -7496,6 +7502,30 @@ } } }, + "eslint-plugin-jsdoc": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-18.1.3.tgz", + "integrity": "sha512-QmdxsDzGG9eb20VD3V8hw4huehTnU6x1/we9tN56p8MOkJNEiHDFW59stcS2/sk+BSnsJy61qZ+6wCPya8B45w==", + "dev": true, + "requires": { + "comment-parser": "^0.7.0", + "debug": "^4.1.1", + "jsdoctypeparser": "^6.0.0", + "lodash": "^4.17.15", + "object.entries-ponyfill": "^1.0.1", + "regextras": "^0.6.1", + "semver": "^6.3.0", + "spdx-expression-parse": "^3.0.0" + }, + "dependencies": { + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "eslint-plugin-jsx-a11y": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz", @@ -11579,6 +11609,12 @@ } } }, + "jsdoctypeparser": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/jsdoctypeparser/-/jsdoctypeparser-6.0.0.tgz", + "integrity": "sha512-61VtBXLkHfOFSIdp/VDVNMksxK0ID0cPTNvxDR92tPA6K7r2AX0OcJegYxhJIwtpWKU4p3D9L3U02hhlP1kQLQ==", + "dev": true + }, "jsdom": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz", @@ -13460,6 +13496,12 @@ "has": "^1.0.3" } }, + "object.entries-ponyfill": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/object.entries-ponyfill/-/object.entries-ponyfill-1.0.1.tgz", + "integrity": "sha1-Kavfd8v70mVm3RqiTp2I9lQz0lY=", + "dev": true + }, "object.fromentries": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.1.tgz", @@ -15890,6 +15932,12 @@ "unicode-match-property-value-ecmascript": "^1.1.0" } }, + "regextras": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/regextras/-/regextras-0.6.1.tgz", + "integrity": "sha512-EzIHww9xV2Kpqx+corS/I7OBmf2rZ0pKKJPsw5Dc+l6Zq1TslDmtRIP9maVn3UH+72MIXmn8zzDgP07ihQogUA==", + "dev": true + }, "registry-auth-token": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.0.0.tgz", diff --git a/package.json b/package.json index 8bf0b812..fe6ff4dc 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "eslint-config-airbnb": "^18.0.1", "eslint-loader": "^3.0.2", "eslint-plugin-import": "^2.18.2", + "eslint-plugin-jsdoc": "^18.1.3", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.16.0", "eslint-plugin-react-hooks": "^1.7.0", From 0f118c40d695b00162bcf42fe4127990915b872e Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 15:30:57 +0700 Subject: [PATCH 02/22] Add TransferToken form & dialog --- src/components/Dialog/DefaultDialogFooter.js | 1 + src/components/Dialog/Dialog.scss | 22 ++++++ src/components/Dialog/TokenTransferDialog.js | 56 ++++++++++++++ .../Dialog/TokenTransferDialog.test.js | 24 ++++++ src/components/TokenTransfer/TokenTransfer.js | 75 +++++++++++++++++++ .../TokenTransfer/TokenTransfer.scss | 26 +++++++ .../TokenTransfer/TokenTransfer.test.js | 15 ++++ src/components/TokenTransfer/index.js | 3 + src/locales/ENG/buttons.js | 2 + src/locales/ENG/dialogs.js | 1 + src/locales/RUS/buttons.js | 2 + src/locales/RUS/dialogs.js | 1 + src/stores/FormsStore/TransferTokenForm.js | 37 +++++++++ 13 files changed, 265 insertions(+) create mode 100644 src/components/Dialog/TokenTransferDialog.js create mode 100644 src/components/Dialog/TokenTransferDialog.test.js create mode 100644 src/components/TokenTransfer/TokenTransfer.js create mode 100644 src/components/TokenTransfer/TokenTransfer.scss create mode 100644 src/components/TokenTransfer/TokenTransfer.test.js create mode 100644 src/components/TokenTransfer/index.js create mode 100644 src/stores/FormsStore/TransferTokenForm.js diff --git a/src/components/Dialog/DefaultDialogFooter.js b/src/components/Dialog/DefaultDialogFooter.js index 460a8b67..299556b4 100644 --- a/src/components/Dialog/DefaultDialogFooter.js +++ b/src/components/Dialog/DefaultDialogFooter.js @@ -35,6 +35,7 @@ class DefaultDialogFooter extends React.Component { ${styles['dialog__footer--default']} `} > + {/* TODO refactor after new button */} + + )} + > + + + ); + } +} + +export default TokenTransferDialog; diff --git a/src/components/Dialog/TokenTransferDialog.test.js b/src/components/Dialog/TokenTransferDialog.test.js new file mode 100644 index 00000000..74391ce9 --- /dev/null +++ b/src/components/Dialog/TokenTransferDialog.test.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import TokenTransferDialog from './TokenTransferDialog'; + +describe('TokenTransferDialog', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallow( + {}, + hide: () => {}, + add: () => {}, + closing: false, + }} + />, + ).dive(); + }); + + it('should render without error', () => { + expect(wrapper.length).toEqual(1); + }); +}); diff --git a/src/components/TokenTransfer/TokenTransfer.js b/src/components/TokenTransfer/TokenTransfer.js new file mode 100644 index 00000000..cf29c871 --- /dev/null +++ b/src/components/TokenTransfer/TokenTransfer.js @@ -0,0 +1,75 @@ +/* eslint-disable react/static-property-placement */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withTranslation } from 'react-i18next'; +import TransferTokenForm from '../../stores/FormsStore/TransferTokenForm'; +import Input from '../Input'; +import { Password, Address, TokenCount } from '../Icons'; +import { Button } from '../Button'; +import { EMPTY_DATA_STRING } from '../../constants'; + +import styles from './TokenTransfer.scss'; + +/** + * Component form for transfer token + */ +@withTranslation() +class TokenTransfer extends React.Component { + form = new TransferTokenForm({ + hooks: { + onSuccess(form) { + return Promise.resolve(form); + }, + onError() { + /* eslint-disable-next-line */ + console.error('form error'); + }, + }, + }) + + static propTypes = { + t: PropTypes.func.isRequired, + wallet: PropTypes.string, + } + + static defaultProps = { + wallet: EMPTY_DATA_STRING, + } + + render() { + const { form } = this; + const { props } = this; + const { t, wallet } = props; + return ( +
+
+ +
+ +
+
+ + + +
+
+ + + +
+
+ {/* TODO refactor after finalize buttons component */} + +
+
{wallet}
+
+ ); + } +} + +export default TokenTransfer; diff --git a/src/components/TokenTransfer/TokenTransfer.scss b/src/components/TokenTransfer/TokenTransfer.scss new file mode 100644 index 00000000..664645de --- /dev/null +++ b/src/components/TokenTransfer/TokenTransfer.scss @@ -0,0 +1,26 @@ +.input__wrapper { + margin-bottom: 32px; + + .field { + width: 100%; + max-width: 309px; + } +} + +.button__wrapper { + margin-top: 48px; + margin-bottom: 16px; + + .btn { + width: 100%; + max-width: 298px; + } +} + +.wallet__wrapper { + margin-top: 16px; + margin-bottom: 24px; + color: #808080; + font-size: 14px; + line-height: 16px; +} diff --git a/src/components/TokenTransfer/TokenTransfer.test.js b/src/components/TokenTransfer/TokenTransfer.test.js new file mode 100644 index 00000000..6dd6b09d --- /dev/null +++ b/src/components/TokenTransfer/TokenTransfer.test.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import TokenTransfer from './TokenTransfer'; + +describe('TokenTransfer', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallow().dive(); + }); + + it('should render without error', () => { + expect(wrapper.length).toEqual(1); + }); +}); diff --git a/src/components/TokenTransfer/index.js b/src/components/TokenTransfer/index.js new file mode 100644 index 00000000..2bd64e07 --- /dev/null +++ b/src/components/TokenTransfer/index.js @@ -0,0 +1,3 @@ +import TokenTransfer from './TokenTransfer'; + +export default { TokenTransfer }; diff --git a/src/locales/ENG/buttons.js b/src/locales/ENG/buttons.js index 7303b775..a950a05b 100644 --- a/src/locales/ENG/buttons.js +++ b/src/locales/ENG/buttons.js @@ -17,5 +17,7 @@ const buttons = { withTokens: 'Connect contract and create project', withoutTokens: 'Create new contract and project', toWallets: 'To wallets', + transfer: 'Transfer', + designateGroupAdministrator: 'designate group administrator', }; export default buttons; diff --git a/src/locales/ENG/dialogs.js b/src/locales/ENG/dialogs.js index bd2146a9..17affb65 100644 --- a/src/locales/ENG/dialogs.js +++ b/src/locales/ENG/dialogs.js @@ -5,6 +5,7 @@ const dialog = { transferInProgress: 'Token transfer in progress', someTimeText: 'It will take some time', tokenTransferSuccess: 'Tokens successfully transferred!', + tokenTransfer: 'Transfer token', }; export default dialog; diff --git a/src/locales/RUS/buttons.js b/src/locales/RUS/buttons.js index 0dba007a..d9322df0 100644 --- a/src/locales/RUS/buttons.js +++ b/src/locales/RUS/buttons.js @@ -17,5 +17,7 @@ const buttons = { withTokens: 'Подключить контракт и создать проект', withoutTokens: 'Создать новые токены и проект', toWallets: 'К выбору кошелька', + transfer: 'Перевести', + designateGroupAdministrator: 'назначить администратором группы', }; export default buttons; diff --git a/src/locales/RUS/dialogs.js b/src/locales/RUS/dialogs.js index 4a7ff65b..5d2b0085 100644 --- a/src/locales/RUS/dialogs.js +++ b/src/locales/RUS/dialogs.js @@ -5,6 +5,7 @@ const dialog = { transferInProgress: 'Переводим токены', someTimeText: 'Это займет некоторое время', tokenTransferSuccess: 'Токены успешно переведены!', + tokenTransfer: 'Перевести токены', }; export default dialog; diff --git a/src/stores/FormsStore/TransferTokenForm.js b/src/stores/FormsStore/TransferTokenForm.js new file mode 100644 index 00000000..40338cb2 --- /dev/null +++ b/src/stores/FormsStore/TransferTokenForm.js @@ -0,0 +1,37 @@ +/* eslint-disable no-alert */ +/* eslint-disable no-console */ +/* eslint-disable class-methods-use-this */ +import i18n from 'i18next'; +import ExtendedForm from '../../models/FormModel'; + +class TransferTokenForm extends ExtendedForm { + setup() { + return { + fields: [ + { + name: 'wallet', + type: 'text', + label: 'Wallet', + placeholder: i18n.t('fields:wallet'), + rules: 'required|string', + }, + { + name: 'count', + type: 'text', + label: 'Count tokens', + placeholder: i18n.t('fields:quantity'), + rules: 'required|numeric|min:1|max:2147483647 ', + }, + { + name: 'password', + type: 'password', + label: 'Password', + placeholder: i18n.t('fields:enterPassword'), + rules: 'required|password', + }, + ], + }; + } +} + +export default TransferTokenForm; From ff70969752cf7aaa590ad39a079a0ac5177e37fa Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 15:35:21 +0700 Subject: [PATCH 03/22] Update TokenTransfer.test.js --- .../TokenTransfer/TokenTransfer.test.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/TokenTransfer/TokenTransfer.test.js b/src/components/TokenTransfer/TokenTransfer.test.js index 6dd6b09d..62a9d0f9 100644 --- a/src/components/TokenTransfer/TokenTransfer.test.js +++ b/src/components/TokenTransfer/TokenTransfer.test.js @@ -2,14 +2,21 @@ import React from 'react'; import { shallow } from 'enzyme'; import TokenTransfer from './TokenTransfer'; -describe('TokenTransfer', () => { - let wrapper; +jest.mock('../../utils/Validator'); - beforeEach(() => { - wrapper = shallow().dive(); +describe('TokenTransfer', () => { + it('should render correct without "wallet" prop', () => { + const wrapper = shallow().dive(); + expect(wrapper.length).toEqual(1); }); - it('should render without error', () => { + it('should render correct with props', () => { + const wrapper = shallow( + , + ).dive(); expect(wrapper.length).toEqual(1); + expect(wrapper.find('.wallet__wrapper').text()).toEqual('0xD490af05Bf82eF6C6BA034B22D18c39B5D52Cc54'); }); }); From e7513a0fb7148b520fe2e104bed40d28f6814c64 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 15:53:52 +0700 Subject: [PATCH 04/22] Fix placeholder for TransferTokenForm --- src/components/TokenTransfer/TokenTransfer.js | 2 +- src/locales/ENG/fields.js | 2 ++ src/locales/RUS/fields.js | 2 ++ src/stores/FormsStore/TransferTokenForm.js | 10 +++++----- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/TokenTransfer/TokenTransfer.js b/src/components/TokenTransfer/TokenTransfer.js index cf29c871..05b36277 100644 --- a/src/components/TokenTransfer/TokenTransfer.js +++ b/src/components/TokenTransfer/TokenTransfer.js @@ -43,7 +43,7 @@ class TokenTransfer extends React.Component { return (
- +
diff --git a/src/locales/ENG/fields.js b/src/locales/ENG/fields.js index 80666846..d030d9f1 100644 --- a/src/locales/ENG/fields.js +++ b/src/locales/ENG/fields.js @@ -8,6 +8,8 @@ const placeholders = { quantity: 'Quantity', projectTitle: 'Project title', contractAddress: 'Enter contract address', + address: 'Address', + countTokens: 'Count tokens', }; export default placeholders; diff --git a/src/locales/RUS/fields.js b/src/locales/RUS/fields.js index 81c14fb6..108f60ed 100644 --- a/src/locales/RUS/fields.js +++ b/src/locales/RUS/fields.js @@ -8,6 +8,8 @@ const placeholders = { quantity: 'Количество', projectTitle: 'Придумайте название проекта', contractAddress: 'Введите адрес контракта', + address: 'Адрес кошелька', + countTokens: 'Количество токенов', }; export default placeholders; diff --git a/src/stores/FormsStore/TransferTokenForm.js b/src/stores/FormsStore/TransferTokenForm.js index 40338cb2..41d5403f 100644 --- a/src/stores/FormsStore/TransferTokenForm.js +++ b/src/stores/FormsStore/TransferTokenForm.js @@ -9,24 +9,24 @@ class TransferTokenForm extends ExtendedForm { return { fields: [ { - name: 'wallet', + name: 'address', type: 'text', - label: 'Wallet', - placeholder: i18n.t('fields:wallet'), + label: 'Address', + placeholder: i18n.t('fields:address'), rules: 'required|string', }, { name: 'count', type: 'text', label: 'Count tokens', - placeholder: i18n.t('fields:quantity'), + placeholder: i18n.t('fields:countTokens'), rules: 'required|numeric|min:1|max:2147483647 ', }, { name: 'password', type: 'password', label: 'Password', - placeholder: i18n.t('fields:enterPassword'), + placeholder: i18n.t('fields:password'), rules: 'required|password', }, ], From 192e6ddbe38845a84b5429dacba053737c0b9d29 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 16:06:08 +0700 Subject: [PATCH 05/22] disable failOnWarning --- webpack.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.dev.js b/webpack.dev.js index 616ae052..90ada679 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -40,7 +40,7 @@ module.exports = { loader: 'eslint-loader', options: { failOnError: true, - failOnWarning: true, + failOnWarning: false, }, }], }, { From d46ea28f063f872c3796dcf2005aea3cba4f785c Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 16:21:35 +0700 Subject: [PATCH 06/22] add TokenTransferError --- src/components/Dialog/Dialog.scss | 99 ++++++++++++------- src/components/Dialog/TokenTransferError.js | 33 +++++++ .../Dialog/TokenTransferError.test.js | 13 +++ src/locales/ENG/dialogs.js | 1 + src/locales/ENG/other.js | 1 + src/locales/RUS/dialogs.js | 1 + src/locales/RUS/other.js | 1 + src/stores/RootStore/RootStore.js | 1 + 8 files changed, 115 insertions(+), 35 deletions(-) create mode 100644 src/components/Dialog/TokenTransferError.js create mode 100644 src/components/Dialog/TokenTransferError.test.js diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 394ae16a..46bed106 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -23,52 +23,81 @@ } &.transfer-progress { - .dialog__header { - padding-top: 67px; - padding-bottom: 0; - } - - .dialog__subtext { - color: rgba(0, 0, 0, 0.7); - font-size: 14px; - line-height: 16px; + .dialog { + &__header { + padding-top: 67px; + padding-bottom: 0; + } + + &__subtext { + color: rgba(0, 0, 0, 0.7); + font-size: 14px; + line-height: 16px; + } } } &.transfer-success { - .dialog__subtext { - color: rgba(0, 0, 0, 0.7); - font-size: 14px; - line-height: 16px; + .dialog { + &__subtext { + color: rgba(0, 0, 0, 0.7); + font-size: 14px; + line-height: 16px; + } + + &__value { + margin-top: 8px; + font-weight: 700; + font-size: 14px; + line-height: 16px; + } } + } - .dialog__value { - margin-top: 8px; - font-weight: 700; - font-size: 14px; - line-height: 16px; + &.token-transfer { + .dialog { + &__header { + padding-top: 82px; + padding-bottom: 62px; + } + + &__footer-button { + width: 100%; + padding: 13px 15px 18px; + color: #c8c9ca; + font-weight: 300; + font-family: "Grotesk"; + letter-spacing: 0.02em; + text-decoration: underline; + background-color: #fff; + border: unset; + border-top: 1px solid #E1E4E8; + outline: none; + cursor: pointer; + } } } - &.token-transfer { - .dialog__header { - padding-top: 82px; - padding-bottom: 62px; + &.transfer-error { + .dialog { + &__header { + padding-top: 67px; + padding-bottom: 24px; + } + + &__subtext { + color: rgba(0, 0, 0, 0.7); + font-size: 14px; + line-height: 16px; + } + + &__footer { + padding-top: 63px; + } } - .dialog__footer-button { - width: 100%; - padding: 13px 15px 18px; - color: #c8c9ca; - font-weight: 300; - font-family: "Grotesk"; - letter-spacing: 0.02em; - text-decoration: underline; - background-color: #fff; - border: unset; - border-top: 1px solid #E1E4E8; - outline: none; - cursor: pointer; + .footer__button { + min-width: 232px; } } } diff --git a/src/components/Dialog/TokenTransferError.js b/src/components/Dialog/TokenTransferError.js new file mode 100644 index 00000000..cf63bb9b --- /dev/null +++ b/src/components/Dialog/TokenTransferError.js @@ -0,0 +1,33 @@ +/* eslint-disable react/static-property-placement */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withTranslation } from 'react-i18next'; +import Dialog from './Dialog'; + +import styles from './Dialog.scss'; + +/** + * Dialog with message about error token transfer + */ +@withTranslation(['dialogs', 'other']) +class TokenTransferError extends React.Component { + static propTypes = { + t: PropTypes.func.isRequired, + } + + render() { + const { props: { t } } = this; + return ( + +

{t('other:notEnoughTokens')}

+ + ); + } +} + +export default TokenTransferError; diff --git a/src/components/Dialog/TokenTransferError.test.js b/src/components/Dialog/TokenTransferError.test.js new file mode 100644 index 00000000..790e069d --- /dev/null +++ b/src/components/Dialog/TokenTransferError.test.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import TokenTransferError from './TokenTransferError'; + +describe('TokenTransferError', () => { + it('should render correct without value', () => { + const wrapper = shallow( + , + ).dive(); + expect(wrapper.length).toEqual(1); + expect(wrapper.find('.dialog__subtext').text()).toEqual('other:notEnoughTokens'); + }); +}); diff --git a/src/locales/ENG/dialogs.js b/src/locales/ENG/dialogs.js index 17affb65..459ddc97 100644 --- a/src/locales/ENG/dialogs.js +++ b/src/locales/ENG/dialogs.js @@ -6,6 +6,7 @@ const dialog = { someTimeText: 'It will take some time', tokenTransferSuccess: 'Tokens successfully transferred!', tokenTransfer: 'Transfer token', + tokenTransferError: 'Transfer error', }; export default dialog; diff --git a/src/locales/ENG/other.js b/src/locales/ENG/other.js index 9c18b784..a9404a63 100644 --- a/src/locales/ENG/other.js +++ b/src/locales/ENG/other.js @@ -14,5 +14,6 @@ const other = { withTokens: 'If you have ERC20 tokens', withoutTokens: "If you don't have ERC20 tokens", yourBalance: 'Your balance', + notEnoughTokens: 'Perhaps there are not enough tokens', }; export default other; diff --git a/src/locales/RUS/dialogs.js b/src/locales/RUS/dialogs.js index 5d2b0085..506f398a 100644 --- a/src/locales/RUS/dialogs.js +++ b/src/locales/RUS/dialogs.js @@ -6,6 +6,7 @@ const dialog = { someTimeText: 'Это займет некоторое время', tokenTransferSuccess: 'Токены успешно переведены!', tokenTransfer: 'Перевести токены', + tokenTransferError: 'Ошибка перевода', }; export default dialog; diff --git a/src/locales/RUS/other.js b/src/locales/RUS/other.js index 6d2f600f..512399cf 100644 --- a/src/locales/RUS/other.js +++ b/src/locales/RUS/other.js @@ -14,5 +14,6 @@ const other = { withTokens: 'Если есть токены ERC20', withoutTokens: 'Если токенов ERC20 нет', yourBalance: 'Ваш баланс', + notEnoughTokens: 'Возможно не хватает токенов', }; export default other; diff --git a/src/stores/RootStore/RootStore.js b/src/stores/RootStore/RootStore.js index 728079da..a0e779cd 100644 --- a/src/stores/RootStore/RootStore.js +++ b/src/stores/RootStore/RootStore.js @@ -22,6 +22,7 @@ class RootStore { /** * initiating project + * * @param {string} address adress of project */ @action initProject(address) { From 010006006122c12bc5a6e8af9caa152c7420140c Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 17:26:50 +0700 Subject: [PATCH 07/22] Add DefinetelyAgree --- src/components/Dialog/DefinetelyAgree.js | 41 ++++++++++----- src/components/Dialog/DefinetelyAgree.test.js | 24 +++++++++ src/components/Dialog/Dialog.scss | 37 +++++++------- .../FinPassFormWrapper/FinPassFormWrapper.js | 50 +++++++++++++++++++ .../FinPassFormWrapper.scss | 21 ++++++++ src/locales/ENG/buttons.js | 1 + src/locales/ENG/other.js | 1 + src/locales/RUS/buttons.js | 1 + src/locales/RUS/other.js | 1 + src/stores/FormsStore/FinPassForm.js | 6 +-- 10 files changed, 148 insertions(+), 35 deletions(-) create mode 100644 src/components/Dialog/DefinetelyAgree.test.js create mode 100644 src/components/FinPassFormWrapper/FinPassFormWrapper.js create mode 100644 src/components/FinPassFormWrapper/FinPassFormWrapper.scss diff --git a/src/components/Dialog/DefinetelyAgree.js b/src/components/Dialog/DefinetelyAgree.js index 1c4dd1a5..2fd2beac 100644 --- a/src/components/Dialog/DefinetelyAgree.js +++ b/src/components/Dialog/DefinetelyAgree.js @@ -5,36 +5,51 @@ import { inject } from 'mobx-react'; import PropTypes from 'prop-types'; import Dialog from './Dialog'; import { VerifyIcon } from '../Icons'; -// import FinPassForm from '../../stores/FormsStore/FinPassForm'; +import FinPassForm from '../../stores/FormsStore/FinPassForm'; +import FinPassFormWrapper from '../FinPassFormWrapper/FinPassFormWrapper'; -// TODO Finalize after form universal create +import styles from './Dialog.scss'; + +/** + * Dialog with financial password + * form for Agree decision + */ @inject('dialogStore') @withTranslation() class DefinetelyAgree extends React.Component { + form = new FinPassForm({ + hooks: { + onSuccess() { + return Promise.resolve(); + }, + onError() { + /* eslint-disable-next-line */ + console.error('error'); + }, + }, + }) + static propTypes = { t: PropTypes.func.isRequired, dialogStore: PropTypes.shape({}).isRequired, }; - // finPassForm = new FinPassForm({ - // onSuccess(form) { - // return form; - // }, - // onError() { - // console.error('error'); - // }, - // }) - render() { - const { props } = this; + const { props, form } = this; const { t } = props; return ( )} + footer={null} + className="definetely-agree" + size="md" > - definetely agree content +

+ {t('other:enterPassForConfirm')} +

+ ); } diff --git a/src/components/Dialog/DefinetelyAgree.test.js b/src/components/Dialog/DefinetelyAgree.test.js new file mode 100644 index 00000000..96d438b8 --- /dev/null +++ b/src/components/Dialog/DefinetelyAgree.test.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import DefinetelyAgree from './DefinetelyAgree'; + +describe('DefinetelyAgree', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallow( + {}, + hide: () => {}, + add: () => {}, + closing: false, + }} + />, + ).dive().dive(); + }); + + it('should render without error', () => { + expect(wrapper.length).toEqual(1); + }); +}); diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 46bed106..92e05e6a 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -15,6 +15,13 @@ z-index: 1; min-height: 325px; + .dialog__subtext { + margin: 0 auto; + color: rgba(0, 0, 0, 0.7); + font-size: 14px; + line-height: 16px; + } + &.agreed-message, &.reject-message { .dialog__header { @@ -28,23 +35,11 @@ padding-top: 67px; padding-bottom: 0; } - - &__subtext { - color: rgba(0, 0, 0, 0.7); - font-size: 14px; - line-height: 16px; - } } } &.transfer-success { .dialog { - &__subtext { - color: rgba(0, 0, 0, 0.7); - font-size: 14px; - line-height: 16px; - } - &__value { margin-top: 8px; font-weight: 700; @@ -84,12 +79,6 @@ padding-top: 67px; padding-bottom: 24px; } - - &__subtext { - color: rgba(0, 0, 0, 0.7); - font-size: 14px; - line-height: 16px; - } &__footer { padding-top: 63px; @@ -100,6 +89,18 @@ min-width: 232px; } } + + &.definetely-agree { + .dialog { + &__header { + padding-bottom: 0; + } + + &__subtext { + max-width: 247px; + } + } + } } } diff --git a/src/components/FinPassFormWrapper/FinPassFormWrapper.js b/src/components/FinPassFormWrapper/FinPassFormWrapper.js new file mode 100644 index 00000000..d9014589 --- /dev/null +++ b/src/components/FinPassFormWrapper/FinPassFormWrapper.js @@ -0,0 +1,50 @@ +/* eslint-disable react/static-property-placement */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withTranslation } from 'react-i18next'; +import Input from '../Input'; +import { Password } from '../Icons'; +import { Button } from '../Button'; + +import styles from './FinPassFormWrapper.scss'; + +@withTranslation() +class FinPassFormWrapper extends React.Component { + static propTypes = { + t: PropTypes.func.isRequired, + form: PropTypes.shape({ + onSubmit: PropTypes.func.isRequired, + $: PropTypes.func.isRequired, + }).isRequired, + }; + + render() { + const { props } = this; + const { t, form } = props; + return ( +
+ +
+ + + +
+
+ +
+ +
+ ); + } +} + +export default FinPassFormWrapper; diff --git a/src/components/FinPassFormWrapper/FinPassFormWrapper.scss b/src/components/FinPassFormWrapper/FinPassFormWrapper.scss new file mode 100644 index 00000000..39fb550f --- /dev/null +++ b/src/components/FinPassFormWrapper/FinPassFormWrapper.scss @@ -0,0 +1,21 @@ +.form__wrapper { + margin-top: 56px; +} + +.input__wrapper { + .field { + width: 100%; + max-width: 309px; + margin-bottom: 0px; + } +} + +.button__wrapper { + margin-top: 48px; + margin-bottom: 59px; + + button { + width: 100%; + max-width: 309px; + } +} \ No newline at end of file diff --git a/src/locales/ENG/buttons.js b/src/locales/ENG/buttons.js index a950a05b..ed308fa5 100644 --- a/src/locales/ENG/buttons.js +++ b/src/locales/ENG/buttons.js @@ -19,5 +19,6 @@ const buttons = { toWallets: 'To wallets', transfer: 'Transfer', designateGroupAdministrator: 'designate group administrator', + vote: 'Vote', }; export default buttons; diff --git a/src/locales/ENG/other.js b/src/locales/ENG/other.js index a9404a63..f3f70e24 100644 --- a/src/locales/ENG/other.js +++ b/src/locales/ENG/other.js @@ -15,5 +15,6 @@ const other = { withoutTokens: "If you don't have ERC20 tokens", yourBalance: 'Your balance', notEnoughTokens: 'Perhaps there are not enough tokens', + enterPassForConfirm: 'Enter your password to confirm your decision.', }; export default other; diff --git a/src/locales/RUS/buttons.js b/src/locales/RUS/buttons.js index d9322df0..384e5444 100644 --- a/src/locales/RUS/buttons.js +++ b/src/locales/RUS/buttons.js @@ -19,5 +19,6 @@ const buttons = { toWallets: 'К выбору кошелька', transfer: 'Перевести', designateGroupAdministrator: 'назначить администратором группы', + vote: 'Голосовать', }; export default buttons; diff --git a/src/locales/RUS/other.js b/src/locales/RUS/other.js index 512399cf..ef364bdc 100644 --- a/src/locales/RUS/other.js +++ b/src/locales/RUS/other.js @@ -15,5 +15,6 @@ const other = { withoutTokens: 'Если токенов ERC20 нет', yourBalance: 'Ваш баланс', notEnoughTokens: 'Возможно не хватает токенов', + enterPassForConfirm: 'Введите пароль, чтобы подтвердить свое решеине', }; export default other; diff --git a/src/stores/FormsStore/FinPassForm.js b/src/stores/FormsStore/FinPassForm.js index a6006e36..1cd7689e 100644 --- a/src/stores/FormsStore/FinPassForm.js +++ b/src/stores/FormsStore/FinPassForm.js @@ -1,5 +1,3 @@ -/* eslint-disable no-alert */ -/* eslint-disable no-console */ /* eslint-disable class-methods-use-this */ import i18n from 'i18next'; import ExtendedForm from '../../models/FormModel'; @@ -8,10 +6,10 @@ class FinPassForm extends ExtendedForm { setup() { return { fields: [{ - name: 'password', + name: 'fin-password', type: 'password', label: 'Password', - placeholder: i18n.t('fields:enterPassword'), + placeholder: i18n.t('fields:password'), rules: 'required|password', }], }; From 2e5319afe73f6e81b70e713568c952089dfedfab Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 17:36:18 +0700 Subject: [PATCH 08/22] small upd --- src/components/Dialog/index.js | 19 +++++++ .../FinPassFormWrapper/FinPassFormWrapper.js | 2 +- .../FinPassFormWrapper.scss | 34 ++++++------- src/components/TokenTransfer/TokenTransfer.js | 5 +- .../TokenTransfer/TokenTransfer.scss | 50 ++++++++++--------- 5 files changed, 67 insertions(+), 43 deletions(-) diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js index 16772f4f..5cfcaf56 100644 --- a/src/components/Dialog/index.js +++ b/src/components/Dialog/index.js @@ -1,3 +1,22 @@ import Dialog from './Dialog'; +import AgreedMessage from './AgreedMessage'; +import DefaultDialogFooter from './DefaultDialogFooter'; +import DefinetelyAgree from './DefinetelyAgree'; +import RejectMessage from './RejectMessage'; +import TokenTransferDialog from './TokenTransferDialog'; +import TokenTransferError from './TokenTransferError'; +import TokenTransferSuccess from './TokenTransferSuccess'; +import TransferTokenInProgress from './TransferTokenInProgress'; export default { Dialog }; + +export { + AgreedMessage, + DefaultDialogFooter, + DefinetelyAgree, + RejectMessage, + TokenTransferDialog, + TokenTransferError, + TokenTransferSuccess, + TransferTokenInProgress, +}; diff --git a/src/components/FinPassFormWrapper/FinPassFormWrapper.js b/src/components/FinPassFormWrapper/FinPassFormWrapper.js index d9014589..047ab9e0 100644 --- a/src/components/FinPassFormWrapper/FinPassFormWrapper.js +++ b/src/components/FinPassFormWrapper/FinPassFormWrapper.js @@ -23,7 +23,7 @@ class FinPassFormWrapper extends React.Component { const { t, form } = props; return (
+
diff --git a/src/components/TokenTransfer/TokenTransfer.scss b/src/components/TokenTransfer/TokenTransfer.scss index 664645de..e430bb4f 100644 --- a/src/components/TokenTransfer/TokenTransfer.scss +++ b/src/components/TokenTransfer/TokenTransfer.scss @@ -1,26 +1,28 @@ -.input__wrapper { - margin-bottom: 32px; - - .field { - width: 100%; - max-width: 309px; +.form-token-transfer { + .input__wrapper { + margin-bottom: 32px; + + .field { + width: 100%; + max-width: 309px; + } } -} - -.button__wrapper { - margin-top: 48px; - margin-bottom: 16px; - - .btn { - width: 100%; - max-width: 298px; + + .button__wrapper { + margin-top: 48px; + margin-bottom: 16px; + + .btn { + width: 100%; + max-width: 298px; + } } -} - -.wallet__wrapper { - margin-top: 16px; - margin-bottom: 24px; - color: #808080; - font-size: 14px; - line-height: 16px; -} + + .wallet__wrapper { + margin-top: 16px; + margin-bottom: 24px; + color: #808080; + font-size: 14px; + line-height: 16px; + } +} \ No newline at end of file From 1141800b85da493ec81d56f12c9d9109e0478812 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 17:42:13 +0700 Subject: [PATCH 09/22] Add DefinetelyReject --- src/components/Dialog/DefinetelyReject.js | 58 +++++++++++++++++++++++ src/components/Dialog/index.js | 2 + src/locales/ENG/dialogs.js | 1 + src/locales/RUS/dialogs.js | 1 + 4 files changed, 62 insertions(+) create mode 100644 src/components/Dialog/DefinetelyReject.js diff --git a/src/components/Dialog/DefinetelyReject.js b/src/components/Dialog/DefinetelyReject.js new file mode 100644 index 00000000..eb2c1cfe --- /dev/null +++ b/src/components/Dialog/DefinetelyReject.js @@ -0,0 +1,58 @@ +/* eslint-disable react/static-property-placement */ +import React from 'react'; +import { withTranslation } from 'react-i18next'; +import { inject } from 'mobx-react'; +import PropTypes from 'prop-types'; +import Dialog from './Dialog'; +import { RejectIcon } from '../Icons'; +import FinPassForm from '../../stores/FormsStore/FinPassForm'; +import FinPassFormWrapper from '../FinPassFormWrapper/FinPassFormWrapper'; + +import styles from './Dialog.scss'; + +/** + * Dialog with financial password + * form for Agree decision + */ +@inject('dialogStore') +@withTranslation() +class DefinetelyReject extends React.Component { + form = new FinPassForm({ + hooks: { + onSuccess() { + return Promise.resolve(); + }, + onError() { + /* eslint-disable-next-line */ + console.error('error'); + }, + }, + }) + + static propTypes = { + t: PropTypes.func.isRequired, + dialogStore: PropTypes.shape({}).isRequired, + }; + + render() { + const { props, form } = this; + const { t } = props; + return ( + )} + footer={null} + className="definetely-reject" + size="md" + > +

+ {t('other:enterPassForConfirm')} +

+ + + ); + } +} + +export default DefinetelyReject; diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js index 5cfcaf56..68b8bcae 100644 --- a/src/components/Dialog/index.js +++ b/src/components/Dialog/index.js @@ -2,6 +2,7 @@ import Dialog from './Dialog'; import AgreedMessage from './AgreedMessage'; import DefaultDialogFooter from './DefaultDialogFooter'; import DefinetelyAgree from './DefinetelyAgree'; +import DefinetelyReject from './DefinetelyReject'; import RejectMessage from './RejectMessage'; import TokenTransferDialog from './TokenTransferDialog'; import TokenTransferError from './TokenTransferError'; @@ -14,6 +15,7 @@ export { AgreedMessage, DefaultDialogFooter, DefinetelyAgree, + DefinetelyReject, RejectMessage, TokenTransferDialog, TokenTransferError, diff --git a/src/locales/ENG/dialogs.js b/src/locales/ENG/dialogs.js index 459ddc97..c107f4dc 100644 --- a/src/locales/ENG/dialogs.js +++ b/src/locales/ENG/dialogs.js @@ -1,5 +1,6 @@ const dialog = { definetelyAgree: 'Do you definitely agree?', + definetelyReject: 'Do you definitely reject?', agreedMessage: 'You agreed', rejectMessage: 'You voted against', transferInProgress: 'Token transfer in progress', diff --git a/src/locales/RUS/dialogs.js b/src/locales/RUS/dialogs.js index 506f398a..f6bec45c 100644 --- a/src/locales/RUS/dialogs.js +++ b/src/locales/RUS/dialogs.js @@ -1,5 +1,6 @@ const dialog = { definetelyAgree: 'Вы точно согласны?', + definetelyReject: 'Вы точно против?', agreedMessage: 'Вы выразили согласие', rejectMessage: 'Вы проголосовали против', transferInProgress: 'Переводим токены', From fa2278a923ca185248a5731a07dbdbb3a2f2caa6 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 20 Nov 2019 17:45:21 +0700 Subject: [PATCH 10/22] Create DefinetelyReject.test.js --- .../Dialog/DefinetelyReject.test.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/components/Dialog/DefinetelyReject.test.js diff --git a/src/components/Dialog/DefinetelyReject.test.js b/src/components/Dialog/DefinetelyReject.test.js new file mode 100644 index 00000000..aca0c030 --- /dev/null +++ b/src/components/Dialog/DefinetelyReject.test.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import DefinetelyReject from './DefinetelyReject'; + +describe('DefinetelyReject', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallow( + {}, + hide: () => {}, + add: () => {}, + closing: false, + }} + />, + ).dive().dive(); + }); + + it('should render without error', () => { + expect(wrapper.length).toEqual(1); + }); +}); From 925b4ce6978f8fc20b7fac66e81ab93293af7bf5 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Mon, 2 Dec 2019 09:35:26 +0700 Subject: [PATCH 11/22] Update TransferTokenForm.js --- src/stores/FormsStore/TransferTokenForm.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/stores/FormsStore/TransferTokenForm.js b/src/stores/FormsStore/TransferTokenForm.js index 41d5403f..87622d79 100644 --- a/src/stores/FormsStore/TransferTokenForm.js +++ b/src/stores/FormsStore/TransferTokenForm.js @@ -1,5 +1,3 @@ -/* eslint-disable no-alert */ -/* eslint-disable no-console */ /* eslint-disable class-methods-use-this */ import i18n from 'i18next'; import ExtendedForm from '../../models/FormModel'; From 5db2c5953b05dae6a687964ab27ec41d0785a11e Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Mon, 2 Dec 2019 16:08:29 +0700 Subject: [PATCH 12/22] fix some error & upd stories --- src/components/Dialog/AgreedMessage.js | 2 +- src/components/Dialog/Dialog.stories.js | 64 +++++++++++++++++++ src/components/Dialog/TokenTransferError.js | 2 +- .../FinPassFormWrapper/FinPassFormWrapper.js | 2 +- src/components/TokenTransfer/TokenTransfer.js | 2 +- 5 files changed, 68 insertions(+), 4 deletions(-) diff --git a/src/components/Dialog/AgreedMessage.js b/src/components/Dialog/AgreedMessage.js index bcaa6231..fe3c005b 100644 --- a/src/components/Dialog/AgreedMessage.js +++ b/src/components/Dialog/AgreedMessage.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; import Dialog from './Dialog'; import { VerifyIcon } from '../Icons'; -import { Button } from '../Button'; +import Button from '../Button/Button'; import styles from './Dialog.scss'; diff --git a/src/components/Dialog/Dialog.stories.js b/src/components/Dialog/Dialog.stories.js index c0b826f9..3b22b433 100644 --- a/src/components/Dialog/Dialog.stories.js +++ b/src/components/Dialog/Dialog.stories.js @@ -9,6 +9,10 @@ import DefinetelyAgree from './DefinetelyAgree'; import RejectMessage from './RejectMessage'; import TokenTransferSuccess from './TokenTransferSuccess'; import TransferTokenInProgress from './TransferTokenInProgress'; +import AgreedMessage from './AgreedMessage'; +import DefinetelyReject from './DefinetelyReject'; +import TokenTransferDialog from './TokenTransferDialog'; +import TokenTransferError from './TokenTransferError'; const defaultDialogStore = { remove: () => {}, @@ -65,6 +69,21 @@ storiesOf('Dialog', module) )); +storiesOf('Dialog', module) + .addDecorator((story) => ( + + {story()} + + )) + .add('AgreedMessage', () => ( + + )); + storiesOf('Dialog', module) .addDecorator((story) => ( )); +storiesOf('Dialog', module) + .addDecorator((story) => ( + + {story()} + + )) + .add('DefinetelyReject', () => ( + + )); + storiesOf('Dialog', module) .addDecorator((story) => ( )); +storiesOf('Dialog', module) + .addDecorator((story) => ( + + {story()} + + )) + .add('TokenTransferDialog', () => ( + + )); + +storiesOf('Dialog', module) + .addDecorator((story) => ( + + {story()} + + )) + .add('TokenTransferError', () => ( + + )); + storiesOf('Dialog', module) .addDecorator((story) => ( Date: Mon, 2 Dec 2019 18:14:37 +0700 Subject: [PATCH 13/22] add stories --- .../FinPassFormWrapper.stories.js | 24 +++++++++++++++++++ .../TokenTransfer/TokenTransfer.stories.js | 12 ++++++++++ 2 files changed, 36 insertions(+) create mode 100644 src/components/FinPassFormWrapper/FinPassFormWrapper.stories.js create mode 100644 src/components/TokenTransfer/TokenTransfer.stories.js diff --git a/src/components/FinPassFormWrapper/FinPassFormWrapper.stories.js b/src/components/FinPassFormWrapper/FinPassFormWrapper.stories.js new file mode 100644 index 00000000..6df33427 --- /dev/null +++ b/src/components/FinPassFormWrapper/FinPassFormWrapper.stories.js @@ -0,0 +1,24 @@ +import React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { storiesOf } from '@storybook/react'; +import FinPassFormWrapper from './FinPassFormWrapper'; +import FinPassForm from '../../stores/FormsStore/FinPassForm'; + +const form = new FinPassForm({ + hooks: { + onSuccess() { + return Promise.resolve(); + }, + onError() { + /* eslint-disable-next-line */ + console.error('error'); + }, + }, +}); + +storiesOf('FinPassFormWrapper', module) + .add('Default', () => ( + + )); diff --git a/src/components/TokenTransfer/TokenTransfer.stories.js b/src/components/TokenTransfer/TokenTransfer.stories.js new file mode 100644 index 00000000..4de57cb9 --- /dev/null +++ b/src/components/TokenTransfer/TokenTransfer.stories.js @@ -0,0 +1,12 @@ +import React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { storiesOf } from '@storybook/react'; +import TokenTransfer from './TokenTransfer'; + +storiesOf('TokenTransfer', module) + .add('Without wallet', () => ( + + )) + .add('With wallet', () => ( + + )); From 6257bd5fb9398448b389353899df41969d9a0a1b Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Mon, 2 Dec 2019 18:14:46 +0700 Subject: [PATCH 14/22] Update TokenTransfer.js --- src/components/TokenTransfer/TokenTransfer.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/TokenTransfer/TokenTransfer.js b/src/components/TokenTransfer/TokenTransfer.js index 0d43102c..becc47e0 100644 --- a/src/components/TokenTransfer/TokenTransfer.js +++ b/src/components/TokenTransfer/TokenTransfer.js @@ -61,10 +61,8 @@ class TokenTransfer extends React.Component {
- {/* TODO refactor after finalize buttons component */} From ee28bb6d9ff9b3f81a592d5b7fc2ade5fb06cc17 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 4 Dec 2019 16:16:13 +0700 Subject: [PATCH 15/22] Remove old DefinetelyReject & add new --- .../DefinetelyReject.js | 32 +++++-------- .../DefinetelyReject/DefinetelyReject.scss | 30 +++++++++++++ .../DefinetelyReject.test.js | 13 ++---- src/components/DefinetelyReject/index.js | 3 ++ src/components/Dialog/DefaultDialogFooter.js | 1 - src/components/Dialog/Dialog.stories.js | 45 ------------------- src/components/Input/index.js | 2 +- 7 files changed, 48 insertions(+), 78 deletions(-) rename src/components/{Dialog => DefinetelyReject}/DefinetelyReject.js (60%) create mode 100644 src/components/DefinetelyReject/DefinetelyReject.scss rename src/components/{Dialog => DefinetelyReject}/DefinetelyReject.test.js (51%) create mode 100644 src/components/DefinetelyReject/index.js diff --git a/src/components/Dialog/DefinetelyReject.js b/src/components/DefinetelyReject/DefinetelyReject.js similarity index 60% rename from src/components/Dialog/DefinetelyReject.js rename to src/components/DefinetelyReject/DefinetelyReject.js index eb2c1cfe..8634dd6b 100644 --- a/src/components/Dialog/DefinetelyReject.js +++ b/src/components/DefinetelyReject/DefinetelyReject.js @@ -1,20 +1,12 @@ -/* eslint-disable react/static-property-placement */ import React from 'react'; -import { withTranslation } from 'react-i18next'; -import { inject } from 'mobx-react'; import PropTypes from 'prop-types'; -import Dialog from './Dialog'; +import { withTranslation } from 'react-i18next'; import { RejectIcon } from '../Icons'; import FinPassForm from '../../stores/FormsStore/FinPassForm'; import FinPassFormWrapper from '../FinPassFormWrapper/FinPassFormWrapper'; -import styles from './Dialog.scss'; +import styles from './DefinetelyReject.scss'; -/** - * Dialog with financial password - * form for Agree decision - */ -@inject('dialogStore') @withTranslation() class DefinetelyReject extends React.Component { form = new FinPassForm({ @@ -31,26 +23,24 @@ class DefinetelyReject extends React.Component { static propTypes = { t: PropTypes.func.isRequired, - dialogStore: PropTypes.shape({}).isRequired, }; render() { const { props, form } = this; const { t } = props; return ( - )} - footer={null} - className="definetely-reject" - size="md" - > -

+

+
+ +
+

+ {t('dialogs:definetelyReject')} +

+

{t('other:enterPassForConfirm')}

-
+
); } } diff --git a/src/components/DefinetelyReject/DefinetelyReject.scss b/src/components/DefinetelyReject/DefinetelyReject.scss new file mode 100644 index 00000000..767063e7 --- /dev/null +++ b/src/components/DefinetelyReject/DefinetelyReject.scss @@ -0,0 +1,30 @@ +.definetely-reject { + width: 100%; + text-align: center; + + &__title { + margin-top: 18px; + margin-bottom: 8px; + color: #000; + font-weight: 700; + font-size: 24px; + font-family: "Grotesk"; + line-height: 28px; + text-align: center; + } + + &__subtext { + color: rgba(0, 0, 0, 0.7); + font-size: 14px; + line-height: 16px; + text-align: center; + } + + &__icon { + svg { + width: auto; + height: auto; + margin-top: 47px; + } + } +} \ No newline at end of file diff --git a/src/components/Dialog/DefinetelyReject.test.js b/src/components/DefinetelyReject/DefinetelyReject.test.js similarity index 51% rename from src/components/Dialog/DefinetelyReject.test.js rename to src/components/DefinetelyReject/DefinetelyReject.test.js index aca0c030..166b9105 100644 --- a/src/components/Dialog/DefinetelyReject.test.js +++ b/src/components/DefinetelyReject/DefinetelyReject.test.js @@ -1,21 +1,14 @@ import React from 'react'; import { shallow } from 'enzyme'; -import DefinetelyReject from './DefinetelyReject'; +import DefinetelyReject from '.'; describe('DefinetelyReject', () => { let wrapper; beforeEach(() => { wrapper = shallow( - {}, - hide: () => {}, - add: () => {}, - closing: false, - }} - />, - ).dive().dive(); + , + ).dive(); }); it('should render without error', () => { diff --git a/src/components/DefinetelyReject/index.js b/src/components/DefinetelyReject/index.js new file mode 100644 index 00000000..cd99a640 --- /dev/null +++ b/src/components/DefinetelyReject/index.js @@ -0,0 +1,3 @@ +import DefinetelyReject from './DefinetelyReject'; + +export default DefinetelyReject; diff --git a/src/components/Dialog/DefaultDialogFooter.js b/src/components/Dialog/DefaultDialogFooter.js index d5d6b9a7..5976e0ca 100644 --- a/src/components/Dialog/DefaultDialogFooter.js +++ b/src/components/Dialog/DefaultDialogFooter.js @@ -34,7 +34,6 @@ class DefaultDialogFooter extends React.Component { ${styles['dialog__footer--default']} `} > - {/* TODO refactor after new button */} -
- )} - > - - - ); - } -} - -export default TokenTransferDialog; diff --git a/src/components/Dialog/TokenTransferDialog.test.js b/src/components/Dialog/TokenTransferDialog.test.js deleted file mode 100644 index 74391ce9..00000000 --- a/src/components/Dialog/TokenTransferDialog.test.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import TokenTransferDialog from './TokenTransferDialog'; - -describe('TokenTransferDialog', () => { - let wrapper; - - beforeEach(() => { - wrapper = shallow( - {}, - hide: () => {}, - add: () => {}, - closing: false, - }} - />, - ).dive(); - }); - - it('should render without error', () => { - expect(wrapper.length).toEqual(1); - }); -}); diff --git a/src/components/TokenTransfer/TokenTransfer.js b/src/components/TokenTransfer/TokenTransfer.js index becc47e0..df22c52f 100644 --- a/src/components/TokenTransfer/TokenTransfer.js +++ b/src/components/TokenTransfer/TokenTransfer.js @@ -36,39 +36,58 @@ class TokenTransfer extends React.Component { wallet: EMPTY_DATA_STRING, } + handleClick = () => { + /* eslint-disable-next-line */ + console.log('click'); + } + render() { const { form } = this; const { props } = this; const { t, wallet } = props; return ( - -
- -
- -
-
- - - -
-
- - - -
-
- +
+
{wallet}
+ +
+ + {t('buttons:designateGroupAdministrator')} +
-
{wallet}
- + ); } } diff --git a/src/components/TokenTransfer/TokenTransfer.scss b/src/components/TokenTransfer/TokenTransfer.scss index e430bb4f..f0941416 100644 --- a/src/components/TokenTransfer/TokenTransfer.scss +++ b/src/components/TokenTransfer/TokenTransfer.scss @@ -1,28 +1,55 @@ -.form-token-transfer { +@import '../../assets/styles/includes/mixin'; + +.token-transfer { + text-align: center; + .input__wrapper { margin-bottom: 32px; - + .field { width: 100%; max-width: 309px; } } - + .button__wrapper { margin-top: 48px; margin-bottom: 16px; - + .btn { width: 100%; max-width: 298px; } } - + .wallet__wrapper { margin-top: 16px; margin-bottom: 24px; color: #808080; font-size: 14px; line-height: 16px; - } + } + + &__title { + @include title; + + margin-top: 72px; + margin-bottom: 73px; + } + + &__button { + // compensate padding in dialog + width: calc(100% + 80px); + margin: 0px -40px -10px -40px; + padding: 15px 20px; + color: #c8c9ca; + font-size: 14px; + line-height: 16px; + text-decoration: underline; + background-color: transparent; + border: unset; + border-top: 1px solid #e1e4e8; + outline: none; + cursor: pointer; + } } \ No newline at end of file From b3e955f96be890042e666f20ce158acccaddf208 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 4 Dec 2019 17:28:40 +0700 Subject: [PATCH 18/22] dialog TokenTransferError refactor --- src/components/Dialog/Dialog.scss | 2 +- src/components/Dialog/TokenTransferError.js | 33 ---------------- .../Dialog/TokenTransferError.test.js | 13 ------- src/components/Messages/Message.scss | 30 ++++++++++++++ .../Messages/TransferErrorMessage.js | 39 +++++++++++++++++++ .../Messages/TransferErrorMessage.test.js | 29 ++++++++++++++ src/components/Messages/index.js | 2 + 7 files changed, 101 insertions(+), 47 deletions(-) delete mode 100644 src/components/Dialog/TokenTransferError.js delete mode 100644 src/components/Dialog/TokenTransferError.test.js create mode 100644 src/components/Messages/TransferErrorMessage.js create mode 100644 src/components/Messages/TransferErrorMessage.test.js diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 80c3a289..27d6f623 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -13,7 +13,7 @@ &__inner { position: relative; z-index: 1; - min-height: 325px; + min-height: 309px; } } diff --git a/src/components/Dialog/TokenTransferError.js b/src/components/Dialog/TokenTransferError.js deleted file mode 100644 index 80ce67e8..00000000 --- a/src/components/Dialog/TokenTransferError.js +++ /dev/null @@ -1,33 +0,0 @@ -/* eslint-disable react/static-property-placement */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { withTranslation } from 'react-i18next'; -import Dialog from './Dialog'; - -import styles from './Dialog.scss'; - -/** - * Dialog with message about error token transfer - */ -@withTranslation(['dialogs', 'other']) -class TokenTransferError extends React.Component { - static propTypes = { - t: PropTypes.func.isRequired, - } - - render() { - const { props: { t } } = this; - return ( - -

{t('other:notEnoughTokens')}

- - ); - } -} - -export default TokenTransferError; diff --git a/src/components/Dialog/TokenTransferError.test.js b/src/components/Dialog/TokenTransferError.test.js deleted file mode 100644 index 790e069d..00000000 --- a/src/components/Dialog/TokenTransferError.test.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import TokenTransferError from './TokenTransferError'; - -describe('TokenTransferError', () => { - it('should render correct without value', () => { - const wrapper = shallow( - , - ).dive(); - expect(wrapper.length).toEqual(1); - expect(wrapper.find('.dialog__subtext').text()).toEqual('other:notEnoughTokens'); - }); -}); diff --git a/src/components/Messages/Message.scss b/src/components/Messages/Message.scss index e74b429a..1bf06d8a 100644 --- a/src/components/Messages/Message.scss +++ b/src/components/Messages/Message.scss @@ -58,6 +58,26 @@ } } + &--transfer-error { + .subtext { + color: rgba(0, 0, 0, 0.7); + font-size: 14px; + line-height: 16px; + } + + .message { + &__title { + margin-top: 57px; + margin-bottom: 24px; + } + } + + .footer { + padding-top: 73px; + padding-bottom: 51px; + } + } + &--progress { .message { &__title { @@ -78,4 +98,14 @@ text-align: center; } } + + &--agreed, + &--reject, + &--transfer-success, + &--transfer-error { + button { + width: 100%; + max-width: 309px; + } + } } diff --git a/src/components/Messages/TransferErrorMessage.js b/src/components/Messages/TransferErrorMessage.js new file mode 100644 index 00000000..9e3d5f07 --- /dev/null +++ b/src/components/Messages/TransferErrorMessage.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withTranslation } from 'react-i18next'; +import DefaultMessage from './DefaultMessage'; +import Button from '../Button/Button'; + +import styles from './Message.scss'; +/** + * Dialog with message about success token transfer + */ +@withTranslation(['dialogs', 'other']) +class TransferErrorMessage extends React.Component { + static propTypes = { + t: PropTypes.func.isRequired, + onButtonClick: PropTypes.func.isRequired, + } + + render() { + const { props: { t, onButtonClick } } = this; + return ( +
+ +

{t('other:notEnoughTokens')}

+ +
+ +
+
+ ); + } +} + +export default TransferErrorMessage; diff --git a/src/components/Messages/TransferErrorMessage.test.js b/src/components/Messages/TransferErrorMessage.test.js new file mode 100644 index 00000000..3dd15293 --- /dev/null +++ b/src/components/Messages/TransferErrorMessage.test.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import TransferErrorMessage from './TransferErrorMessage'; +import Button from '../Button/Button'; + +describe('TransferErrorMessage', () => { + let wrapper; + let mockOnClick; + + beforeEach(() => { + mockOnClick = jest.fn(); + wrapper = shallow( + , + ).dive(); + }); + + it('should render without error', () => { + expect(wrapper.length).toEqual(1); + }); + + it('should call mockOnClick on button onClick', () => { + const button = wrapper.find(Button); + expect(button.length).toEqual(1); + button.prop('onClick')(); + expect(mockOnClick).toHaveBeenCalled(); + }); +}); diff --git a/src/components/Messages/index.js b/src/components/Messages/index.js index 4e724aae..c506a408 100644 --- a/src/components/Messages/index.js +++ b/src/components/Messages/index.js @@ -3,6 +3,7 @@ import AgreedMessage from './AgreedMessage'; import RejectMessage from './RejectMessage'; import TransferSuccessMessage from './TransferSuccessMessage'; import TokenInProgressMessage from './TokenInProgressMessage'; +import TransferErrorMessage from './TransferErrorMessage'; export default DefaultMessage; @@ -11,4 +12,5 @@ export { RejectMessage, TransferSuccessMessage, TokenInProgressMessage, + TransferErrorMessage, }; From 5a71d2f95cef7441bf06c513cd8a74b4f0124225 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 4 Dec 2019 17:31:08 +0700 Subject: [PATCH 19/22] Update index.js --- src/components/Dialog/index.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js index 68b8bcae..4a07e93e 100644 --- a/src/components/Dialog/index.js +++ b/src/components/Dialog/index.js @@ -1,24 +1,8 @@ import Dialog from './Dialog'; -import AgreedMessage from './AgreedMessage'; import DefaultDialogFooter from './DefaultDialogFooter'; -import DefinetelyAgree from './DefinetelyAgree'; -import DefinetelyReject from './DefinetelyReject'; -import RejectMessage from './RejectMessage'; -import TokenTransferDialog from './TokenTransferDialog'; -import TokenTransferError from './TokenTransferError'; -import TokenTransferSuccess from './TokenTransferSuccess'; -import TransferTokenInProgress from './TransferTokenInProgress'; export default { Dialog }; export { - AgreedMessage, DefaultDialogFooter, - DefinetelyAgree, - DefinetelyReject, - RejectMessage, - TokenTransferDialog, - TokenTransferError, - TokenTransferSuccess, - TransferTokenInProgress, }; From a9f54f499969fd6a3c64ad62ceb083851687f768 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 4 Dec 2019 17:32:26 +0700 Subject: [PATCH 20/22] remove comment rules --- src/components/FinPassFormWrapper/FinPassFormWrapper.js | 1 - src/components/TokenTransfer/TokenTransfer.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/FinPassFormWrapper/FinPassFormWrapper.js b/src/components/FinPassFormWrapper/FinPassFormWrapper.js index a517f230..924f35f4 100644 --- a/src/components/FinPassFormWrapper/FinPassFormWrapper.js +++ b/src/components/FinPassFormWrapper/FinPassFormWrapper.js @@ -1,4 +1,3 @@ -/* eslint-disable react/static-property-placement */ import React from 'react'; import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; diff --git a/src/components/TokenTransfer/TokenTransfer.js b/src/components/TokenTransfer/TokenTransfer.js index df22c52f..c0e2ba57 100644 --- a/src/components/TokenTransfer/TokenTransfer.js +++ b/src/components/TokenTransfer/TokenTransfer.js @@ -1,4 +1,3 @@ -/* eslint-disable react/static-property-placement */ import React from 'react'; import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; From 83c4a9a10fa546f208b67ff1fbe1d02d6e7d89b4 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Wed, 4 Dec 2019 17:34:51 +0700 Subject: [PATCH 21/22] small upd --- src/components/Messages/TransferErrorMessage.js | 1 + src/components/Messages/TransferSuccessMessage.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/Messages/TransferErrorMessage.js b/src/components/Messages/TransferErrorMessage.js index 9e3d5f07..d8e00751 100644 --- a/src/components/Messages/TransferErrorMessage.js +++ b/src/components/Messages/TransferErrorMessage.js @@ -5,6 +5,7 @@ import DefaultMessage from './DefaultMessage'; import Button from '../Button/Button'; import styles from './Message.scss'; + /** * Dialog with message about success token transfer */ diff --git a/src/components/Messages/TransferSuccessMessage.js b/src/components/Messages/TransferSuccessMessage.js index 6e3e0217..42ef30e6 100644 --- a/src/components/Messages/TransferSuccessMessage.js +++ b/src/components/Messages/TransferSuccessMessage.js @@ -6,6 +6,7 @@ import DefaultMessage from './DefaultMessage'; import Button from '../Button/Button'; import styles from './Message.scss'; + /** * Dialog with message about success token transfer */ From 990f7ee28f2bb5df10ab8d016e92a8aa33d70ce0 Mon Sep 17 00:00:00 2001 From: WORK_Pavel Date: Thu, 5 Dec 2019 09:33:49 +0700 Subject: [PATCH 22/22] fix jsdoc --- src/stores/DialogStore/DialogStore.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/stores/DialogStore/DialogStore.js b/src/stores/DialogStore/DialogStore.js index 73bf9304..404fba34 100644 --- a/src/stores/DialogStore/DialogStore.js +++ b/src/stores/DialogStore/DialogStore.js @@ -28,7 +28,7 @@ class DialogStore { /** * Actual open state * - * @returns {string, boolean} name dialog or boolean state + * @returns {string|boolean} name dialog or boolean state */ get isOpen() { if (this.open && this.dialog) return this.dialog; @@ -39,7 +39,7 @@ class DialogStore { * Method for getting dialog by name in list * * @param {string} dialogName name dialog - * @return {object} dialog item model + * @returns {object} dialog item model */ getDialog(dialogName) { const { list } = this; @@ -144,6 +144,7 @@ class DialogStore { * Method for adding dialog in history dialogs * * @param {object} dialog dialog item model + * @returns {number} length history */ addToHistory(dialog) { if (dialog.history === false) return false;