Merge pull request #2017 from LiskHQ/1889-implement-form-1-3-send-BTC

Implement form step 1/3 of send BTC - Closes #1889

i18n/locales/en/common.json

@@ -63,6 +63,7 @@
   "Become a delegate (Fee: {{fee}} LSK)": "Become a delegate (Fee: {{fee}} LSK)",
   "Before you continue using Lisk Hub, please read and accept the": "Before you continue using Lisk Hub, please read and accept the",
   "Beta: in order to see changes fully please reload the app when removing extension": "Beta: in order to see changes fully please reload the app when removing extension",
+  "Bitcoin transactions are made with some delay that depends on two parameters: the fee and the bitcoin network’s congestion. The higher the fee, the higher the processing speed.": "Bitcoin transactions are made with some delay that depends on two parameters: the fee and the bitcoin network’s congestion. The higher the fee, the higher the processing speed.",
   "Blockchain Application Registration": "Blockchain Application Registration",
   "Blocks forged": "Blocks forged",
   "Bookmark account": "Bookmark account",
@@ -163,6 +164,7 @@
   "Error or Device Not Connected.": "Error or Device Not Connected.",
   "Error retrieving convertion rates.": "Error retrieving convertion rates.",
   "Error retrieving dynamic fees.": "Error retrieving dynamic fees.",
+  "Every transaction needs to be confirmed and forged into Lisks blockchain network. \n                    Such operations require hardware resources and because of that there is a small fee for processing those.": "Every transaction needs to be confirmed and forged into Lisks blockchain network. \n                    Such operations require hardware resources and because of that there is a small fee for processing those.",
   "Every transaction needs to be confirmed and forged into Lisks blockchain network. \n                  Such operations require hardware resources and because of that there is a small fee for processing those.": "Every transaction needs to be confirmed and forged into Lisks blockchain network. \n                  Such operations require hardware resources and because of that there is a small fee for processing those.",
   "Explain Blockchain Like I'm 5": "Explain Blockchain Like I'm 5",
   "Explore as a Guest": "Explore as a Guest",
@@ -201,6 +203,7 @@
   "Help Center": "Help Center",
   "Hide passphrase": "Hide passphrase",
   "Hide the QR code": "Hide the QR code",
+  "High": "High",
   "How do you like the hub?": "How do you like the hub?",
   "How is Lisk transparent?": "How is Lisk transparent?",
   "How we recommend to store your passphrase.": "How we recommend to store your passphrase.",
@@ -219,6 +222,7 @@
   "Initialize Lisk ID": "Initialize Lisk ID",
   "Input": "Input",
   "Insert public address or a name": "Insert public address or a name",
+  "Insert the amount of transaction": "Insert the amount of transaction",
   "Insufficient funds": "Insufficient funds",
   "Insufficient funds (Fee: {{fee}} LSK)": "Insufficient funds (Fee: {{fee}} LSK)",
   "Insufficient funds for {{amount}} LSK fee": "Insufficient funds for {{amount}} LSK fee",
@@ -232,7 +236,7 @@
   "Keep it safe as it is the only way to access your wallet.": "Keep it safe as it is the only way to access your wallet.",
   "Keep this safe, never throw it away or share it with anyone.": "Keep this safe, never throw it away or share it with anyone.",
   "Keep track of any Lisk ID balance. Only you will see who you bookmarked.": "Keep track of any Lisk ID balance. Only you will see who you bookmarked.",
-  "LISK Hub counts your message by bytes so keep in mind \n                  that the length on your message may vary in different languages. \n                  Different characters may consume different amount of bytes space.": "LISK Hub counts your message by bytes so keep in mind \n                  that the length on your message may vary in different languages. \n                  Different characters may consume different amount of bytes space.",
+  "LISK Hub counts your message by bytes so keep in mind \n                    that the length on your message may vary in different languages. \n                    Different characters may consume different amount of bytes space.": "LISK Hub counts your message by bytes so keep in mind \n                    that the length on your message may vary in different languages. \n                    Different characters may consume different amount of bytes space.",
   "LSK": "LSK",
   "LSK forged": "LSK forged",
   "LSK received": "LSK received",
@@ -271,6 +275,7 @@
   "Look at your Ledger for confirmation": "Look at your Ledger for confirmation",
   "Look at your Trezor %s for completing the action": "Look at your Trezor %s for completing the action",
   "Looking for a device...": "Looking for a device...",
+  "Low": "Low",
   "Mainnet": "Mainnet",
   "Market": "Market",
   "Max": "Max",
@@ -343,8 +348,10 @@
   "Price data currently not available": "Price data currently not available",
   "Print more than one copy and store them in two separate secure places.": "Print more than one copy and store them in two separate secure places.",
   "Privacy Policy": "Privacy Policy",
+  "Processing Speed": "Processing Speed",
   "Productivity": "Productivity",
-  "Provide a correct amount of LSK": "Provide a correct amount of LSK",
+  "Provide a correct amount of {{token}}": "Provide a correct amount of {{token}}",
+  "Provide a correct wallet address or a name of a bookmarked account": "Provide a correct wallet address or a name of a bookmarked account",
   "Provided amount is higher than your current balance.": "Provided amount is higher than your current balance.",
   "Proxy Authentication": "Proxy Authentication",
   "Quit": "Quit",
@@ -403,6 +410,7 @@
   "Send LSK to this Account": "Send LSK to this Account",
   "Send Lisk from Blockchain Application": "Send Lisk from Blockchain Application",
   "Send Lisk to Blockchain Application": "Send Lisk to Blockchain Application",
+  "Send Tokens": "Send Tokens",
   "Send anonymous usage statistics": "Send anonymous usage statistics",
   "Send {{amount}} LSK": "Send {{amount}} LSK",
   "Sender": "Sender",
@@ -470,6 +478,7 @@
   "Transaction aborted on device": "Transaction aborted on device",
   "Transaction failed": "Transaction failed",
   "Transaction fee": "Transaction fee",
+  "Transaction fee: ": "Transaction fee: ",
   "Transaction not found": "Transaction not found",
   "Transaction submitted": "Transaction submitted",
   "Transaction summary": "Transaction summary",

src/actions/service.js

@@ -2,25 +2,30 @@ import i18next from 'i18next';
 import actionTypes from '../constants/actions';
 import serviceAPI from '../utils/api/service';
 import { errorToastDisplayed } from './toaster';
+import { tokenMap } from '../constants/tokens';
 
 export const pricesRetrieved = () => (dispatch, getState) => {
   const { settings: { token } } = getState();
+  // istanbul ignore next
+  const activeToken = localStorage.getItem('btc') ? token.active : tokenMap.LSK.key; // TODO: Refactor after enabling BTC
 
-  serviceAPI.getPriceTicker(token.active)
+  serviceAPI.getPriceTicker(activeToken)
     .then(priceTicker => dispatch({
       type: actionTypes.pricesRetrieved,
       data: {
         priceTicker,
-        activeToken: token.active,
+        activeToken,
       },
     }))
     .catch(() => dispatch(errorToastDisplayed(i18next.t('Error retrieving convertion rates.'))));
 };
 
 export const dynamicFeesRetrieved = () => (dispatch, getState) => {
   const { settings: { token } } = getState();
+  // istanbul ignore next
+  const activeToken = localStorage.getItem('btc') ? token.active : tokenMap.LSK.key; // TODO: Refactor after enabling BTC
 
-  serviceAPI.getDynamicFees(token.active)
+  serviceAPI.getDynamicFees(activeToken)
     .then(dynamicFees => dispatch({
       type: actionTypes.dynamicFeesRetrieved,
       dynamicFees,

src/components/bookmarkV2/bookmark.test.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import keyCodes from './../../constants/keyCodes';
 import i18n from '../../i18n';
 import Bookmark from './index';
+import { tokenMap } from '../../constants/tokens';
 
 describe('BookmarkV2', () => {
   let wrapper;
@@ -15,6 +16,7 @@ describe('BookmarkV2', () => {
   };
 
   const props = {
+    token: tokenMap.LSK.key,
     t: v => v,
     validateBookmark: jest.fn(),
     onChange: jest.fn(),

src/components/bookmarkV2/index.js

@@ -5,7 +5,6 @@ import keyCodes from './../../constants/keyCodes';
 import svg from '../../utils/svgIcons';
 import SpinnerV2 from '../spinnerV2/spinnerV2';
 import Feedback from '../toolbox/feedback/feedback';
-import { flattenFollowedAccounts } from '../../utils/followedAccounts';
 import styles from './bookmark.css';
 
 // eslint-disable-next-line complexity
@@ -34,8 +33,8 @@ class Bookmark extends React.Component {
   }
 
   getFilterList() {
-    const { followedAccounts, recipient } = this.props;
-    const accounts = flattenFollowedAccounts(followedAccounts);
+    const { followedAccounts, recipient, token } = this.props;
+    const accounts = followedAccounts[token];
 
     if (recipient.value === '') return accounts;
 

src/components/converterV2/converterV2.js

@@ -6,25 +6,25 @@ class ConverterV2 extends React.Component {
   constructor(props) {
     super(props);
 
-    props.getPriceTicker();
+    props.pricesRetrieved();
   }
 
   render() {
     const {
-      settings, value, error, className = '',
+      settings, value, error, className = '', token, priceTicker,
     } = this.props;
-    const { LSK } = this.props.priceTicker;
+    const currencies = priceTicker[token];
 
     const currency = settings.currency || 'USD';
 
     let price = error && Number.isNaN(value)
-      ? (0).toFixed(2) : (value * LSK[currency]).toFixed(2);
+      ? (0).toFixed(2) : (value * currencies[currency]).toFixed(2);
 
     price = price > converter.maxLSKSupply || price === 'NaN' || price < 0 ? (0).toFixed(2) : price;
 
     return (
       <div className={`${styles.wrapper} ${className}`}>
-        {value !== '' && LSK[currency]
+        {value !== '' && currencies[currency]
           ? <span className={`${styles.price} converted-price`}>~{price} {currency}</span>
           : null
         }

src/components/converterV2/converterV2.test.js

@@ -3,24 +3,26 @@ import { expect } from 'chai';
 import { mount } from 'enzyme';
 import { spy } from 'sinon';
 import ConverterV2 from './converterV2';
+import { tokenMap } from '../../constants/tokens';
 
 describe('Converter V2', () => {
   let wrapper;
 
   const props = {
-    getPriceTicker: spy(),
+    token: tokenMap.LSK.key,
     settings: {
       currency: 'EUR',
     },
     value: 1,
     error: false,
     className: 'test',
     priceTicker: { LSK: { USD: 123, EUR: 12 } },
+    pricesRetrieved: spy(),
   };
 
   it('shold render ConverterV2 component', () => {
     wrapper = mount(<ConverterV2 {...props} />);
-    expect(props.getPriceTicker).to.have.been.calledWith();
+    expect(props.pricesRetrieved).to.have.been.calledWith();
     expect(wrapper.find('.wrapper')).to.have.className(props.className);
     expect(wrapper.find('.price')).to.include.text(props.priceTicker.LSK.EUR);
     expect(wrapper.find('.price')).to.include.text(props.settings.currency);

src/components/converterV2/index.js

@@ -2,24 +2,24 @@
 import { connect } from 'react-redux';
 
 import { settingsUpdated } from '../../actions/settings';
-import { getPriceTicker } from '../../actions/liskService';
+import { pricesRetrieved } from '../../actions/service';
 import ConverterV2 from './converterV2';
+import { tokenMap } from '../../constants/tokens';
 
 const mapStateToProps = state => ({
   settings: state.settings,
-  priceTicker: (state.liskService && state.liskService.priceTicker) ?
-    state.liskService.priceTicker :
+  token: localStorage.getItem('btc') ? (state.settings.token && state.settings.token.active) : tokenMap.LSK.key,
+  priceTicker: (state.service && state.service.priceTicker) ?
+    state.service.priceTicker :
     {
-      LSK: {
-        USD: '0',
-        EUR: '0',
-      },
+      LSK: { USD: '0', EUR: '0' },
+      BTC: { USD: '0', EUR: '0' },
     },
 });
 
 const mapDispatchToProps = {
   settingsUpdated,
-  getPriceTicker,
+  pricesRetrieved,
 };
 
 export default connect(

src/components/requestV2/requestV2.test.js

@@ -9,12 +9,13 @@ import i18n from '../../i18n';
 import RequestV2 from './requestV2';
 import accounts from '../../../test/constants/accounts';
 import { AutoresizeTextarea } from '../toolbox/inputsV2';
+import { tokenMap } from '../../constants/tokens';
 
 describe('RequestV2', () => {
   let wrapper;
 
   const store = configureMockStore([thunk])({
-    settings: { currency: 'USD' },
+    settings: { currency: 'USD', token: { active: tokenMap.LSK.key } },
     settingsUpdated: () => {},
     liskService: {
       success: true,

src/components/sendV2/form/form.css

@@ -50,7 +50,9 @@
   & .fieldLabel {
     @mixin contentNormal bold;
 
+    align-items: center;
     color: var(--color-maastricht-blue);
+    display: flex;
     margin-bottom: 8px;
   }
 
@@ -118,6 +120,21 @@
     width: 100%;
     position: relative;
   }
+
+  & .selector {
+    margin: 13px 0;
+  }
+
+  & .processingInfo {
+    @mixin contentLargest;
+
+    color: var(--color-slate-gray);
+    margin: 8px 0;
+
+    & > span {
+      color: var(--color-maastricht-blue);
+    }
+  }
 }
 
 .feedbackMessage {
@@ -160,7 +177,7 @@
   @mixin contentLarge;
 }
 
-footer {
+.footer {
   width: 100%;
   box-sizing: border-box;
   padding: 24px 16px;