diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index bacb756b19..9d0ad20268 100644 --- a/i18n/locales/en/common.json +++ b/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", diff --git a/src/components/converter/converter.css b/src/components/converter/converter.css index ab55511745..c5c10a92f8 100644 --- a/src/components/converter/converter.css +++ b/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; diff --git a/src/components/converter/converter.js b/src/components/converter/converter.js index 7a05283e01..82b6ff4ec5 100644 --- a/src/components/converter/converter.js +++ b/src/components/converter/converter.js @@ -16,21 +16,12 @@ 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 }); @@ -38,38 +29,14 @@ class Converter extends React.Component { 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) => ( -
{ this.selectActive(currency); }}>{currency}
- )); - // putting
|
inbetween array objects - const intersperse = currenciesObejects - .reduce((a, v, key) => [...a, v,
|
], []) // eslint-disable-line - .slice(0, -1); return (
- {this.props.value !== '' && this.state.LSK[currencies[0]] ? + {this.props.value !== '' && this.state.LSK[currency] ?
-
~ {price}
- {intersperse} +
+ {this.props.t('ca.')} +
{price} {currency}
+
:
}
- { this.props.isRequesting ? null :
{this.props.t('Fee: {{fee}} LSK', { fee: fromRawLsk(this.fee) })}
} + { this.props.isRequesting || this.props.error ? null : +
{this.props.t('Additional fee: {{fee}} LSK', { fee: fromRawLsk(this.fee) })} + {`, ${this.props.t('ca. {{price}} {{currency}}', { + currency, + price: (1 * LSK[currency]).toFixed(1), + })}`}
} ); } diff --git a/src/components/converter/converter.test.js b/src/components/converter/converter.test.js index cd8f6a4851..368b0a67b4 100644 --- a/src/components/converter/converter.test.js +++ b/src/components/converter/converter.test.js @@ -26,24 +26,12 @@ describe('Converter', () => { it('shold render Converter component', () => { const props = { - t: () => {}, + t: key => key, }; wrapper = mountWithContext(, { storeState: store }); expect(wrapper.find('Converter')).to.have.present(); }); - it('should change active price', () => { - const props = { - t: () => {}, - value: 0, - error: false, - }; - wrapper = mountWithContext(, { 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' }, @@ -51,7 +39,7 @@ describe('Converter', () => { }); 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'); }); }); diff --git a/test/e2e/step_definitions/send.step.js b/test/e2e/step_definitions/send.step.js index 74cb6f9b90..a94fbfbac2 100644 --- a/test/e2e/step_definitions/send.step.js +++ b/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); });