Merge pull request #1167 from LiskHQ/1099-implement-rework-fee

Implement rework fee - Closes #1099

i18n/locales/en/common.json

@@ -17,6 +17,7 @@
   "Add to list": "Add to list",
   "Added votes": "Added votes",
   "Additional fee": "Additional fee",
+  "Additional fee: {{fee}} LSK": "Additional fee: {{fee}} LSK",
   "Address": "Address",
   "Advanced features": "Advanced features",
   "After 10 minutes of not using your passphrase,\n  // your Lisk ID will be locked to prevent an unauthorized use of your Lisk ID. .\n  // The timer will reset as soon as you make an transaction.\n  // After 5 minutes, you can also reset the timer by clicking on \"reset\".": "After 10 minutes of not using your passphrase,\n  // your Lisk ID will be locked to prevent an unauthorized use of your Lisk ID. .\n  // The timer will reset as soon as you make an transaction.\n  // After 5 minutes, you can also reset the timer by clicking on \"reset\".",
@@ -374,6 +375,8 @@
   "Zero not allowed": "Zero not allowed",
   "by moving your mouse.": "by moving your mouse.",
   "by tilting your device.": "by tilting your device.",
+  "ca.": "ca.",
+  "ca. {{price}} {{currency}}": "ca. {{price}} {{currency}}",
   "checking availability": "checking availability",
   "if the problem persists": "if the problem persists",
   "missed": "missed",

src/components/converter/converter.css

@@ -23,16 +23,18 @@
 }
 
 .fee {
-  text-align: right;
   margin-bottom: 24px;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
   position: absolute;
-  right: 0;
   top: 70px;
   color: var(--fee-color);
 }
 
+.convertElem {
+  display: flex;
+}
+
 .convertorWrapper {
   text-align: right;
   font-size: 14px;

src/components/converter/converter.js

@@ -16,60 +16,27 @@ class Converter extends React.Component {
         USD: '0',
         EUR: '0',
       },
-      // 0 index is active one
-      currencies: ['USD', 'EUR'],
     };
     this.fee = fees.send;
 
     this.updateData();
   }
 
-  componentDidMount() {
-    const { settings } = this.props;
-    if (settings.currency) {
-      this.selectActive(settings.currency);
-    }
-  }
-
   updateData() {
     liskServiceApi.getPriceTicker().then((response) => {
       this.setState({ ...response });
     }).catch((error) => {
       this.setState({ error });
     });
   }
-  /*
-   * It swaping clicked currency with active currency on index 0
-   */
-  selectActive(currency) {
-    const currencyIndex = this.state.currencies.indexOf(currency);
-    if (currencyIndex !== 0) {
-      const currencies = this.state.currencies;
-
-      currencies.push(currencies.shift(currencies[currencyIndex]));
-      this.setState({ currencies });
-      this.props.settingsUpdated({ currency });
-    }
-  }
 
   render() {
-    const { LSK, currencies } = this.state;
+    const { LSK } = this.state;
+    const currency = this.props.settings.currency || 'USD';
 
     let price = !!this.props.error && Number.isNaN(this.props.value) ?
-      (0).toFixed(2) : (this.props.value * LSK[currencies[0]]).toFixed(2);
+      (0).toFixed(2) : (this.props.value * LSK[currency]).toFixed(2);
     price = price > converter.maxLSKSupply || price === 'NaN' || price < 0 ? (0).toFixed(2) : price;
-
-    const currenciesObejects = currencies.map((currency, key) => (
-      <div
-        key={`${currency}-${key}`}
-        className={`${styles.convertElem} converted-currency`}
-        // eslint-disable-next-line
-        onClick={() => { this.selectActive(currency); }}>{currency}</div>
-    ));
-    // putting <div>|</div> inbetween array objects
-    const intersperse = currenciesObejects
-      .reduce((a, v, key) => [...a, v, <div key={key}>|</div>], []) // eslint-disable-line
-      .slice(0, -1);
     return (
       <Input
         label={this.props.label}
@@ -79,15 +46,22 @@ class Converter extends React.Component {
         theme={styles}
         onChange={this.props.onChange} >
         <div className={styles.convertorWrapper}>
-          {this.props.value !== '' && this.state.LSK[currencies[0]] ?
+          {this.props.value !== '' && this.state.LSK[currency] ?
             <div className={this.props.error ? `${styles.convertorErr} convertorErr` : `${styles.convertor} convertor`}>
-              <div className={`${styles.convertElem} converted-price`}>~ {price}</div>
-              {intersperse}
+              <div className={`${styles.convertElem}`}>
+                {this.props.t('ca.')}
+                <div className='converted-price'>{price} {currency}</div>
+              </div>
             </div>
             : <div></div>
           }
         </div>
-        { this.props.isRequesting ? null : <div className={styles.fee}> {this.props.t('Fee: {{fee}} LSK', { fee: fromRawLsk(this.fee) })} </div> }
+        { this.props.isRequesting || this.props.error ? null :
+          <div className={styles.fee}>{this.props.t('Additional fee: {{fee}} LSK', { fee: fromRawLsk(this.fee) })}
+          {`, ${this.props.t('ca. {{price}} {{currency}}', {
+            currency,
+            price: (1 * LSK[currency]).toFixed(1),
+          })}`}</div> }
       </Input>
     );
   }

src/components/converter/converter.test.js

@@ -26,32 +26,20 @@ describe('Converter', () => {
 
   it('shold render Converter component', () => {
     const props = {
-      t: () => {},
+      t: key => key,
     };
     wrapper = mountWithContext(<Converter {...props} store={store}/>, { storeState: store });
     expect(wrapper.find('Converter')).to.have.present();
   });
 
-  it('should change active price', () => {
-    const props = {
-      t: () => {},
-      value: 0,
-      error: false,
-    };
-    wrapper = mountWithContext(<Converter {...props} store={store}/>, { storeState: store });
-    expect(wrapper.find('.converted-currency').at(0)).to.have.text('USD');
-    wrapper.find('.converted-currency').at(1).simulate('click');
-    expect(wrapper.find('.converted-currency').at(0)).to.have.text('EUR');
-  });
-
   it('should convert price to EUR from localStorage', () => {
     const storeWithCurrency = fakeStore({
       settings: { currency: 'USD' },
       settingsUpdated: () => {},
     });
 
     const props = {
-      t: () => {},
+      t: key => key,
       value: 2,
       error: false,
       currency: 'USD',
@@ -64,7 +52,7 @@ describe('Converter', () => {
 
     explorereApiMock.resolves({ LSK: { USD: 123, EUR: 12 } });
     wrapper.update();
-    expect(wrapper.find('.converted-price').at(0)).to.have.text('~ 246.00');
+    expect(wrapper.find('.converted-price').at(0)).to.have.text('246.00 USD');
   });
 });
 

test/e2e/step_definitions/send.step.js

@@ -4,7 +4,7 @@ const { waitForElemAndMatchItsText } = require('../support/util.js');
 
 defineSupportCode(({ Then }) => {
   Then('I should see "{elementName}" element with text matching coverter price', (elementName, callback) => {
-    const regexp = /^~ \d{1,100}(\.\d{1,2})?$/;
+    const regexp = /^\d{1,100}(\.\d{1,2})? USD$/;
     const selectorClass = `.${elementName.replace(/ /g, '-')}`;
     waitForElemAndMatchItsText(selectorClass, regexp, callback);
   });