Merge branch 'NewUI-flat' into merge

12 files changed, 756 insertions, 0 deletions

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
new file mode 100644
index 000000000..64acde767
--- /dev/null
+++ b/ui/app/components/send/account-list-item.js
@@ -0,0 +1,66 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('../identicon')
+const CurrencyDisplay = require('./currency-display')
+const { conversionRateSelector } = require('../../selectors')
+
+inherits(AccountListItem, Component)
+function AccountListItem () {
+  Component.call(this)
+}
+
+function mapStateToProps(state) {
+  return {
+    conversionRate: conversionRateSelector(state)
+  }
+}
+
+module.exports = connect(mapStateToProps)(AccountListItem)
+
+AccountListItem.prototype.render = function () {
+  const {
+    account, 
+    handleClick, 
+    icon = null,
+    conversionRate,
+  } = this.props
+
+  const { name, address, balance } = account
+
+  return h('div.account-list-item', {
+    onClick: () => handleClick({ name, address, balance }),
+  }, [
+
+    h('div.account-list-item__top-row', {}, [
+
+      h(
+        Identicon,
+        {
+          address,
+          diameter: 18,
+          className: 'account-list-item__identicon',
+        },
+      ),
+
+      h('div.account-list-item__account-name', {}, name),
+
+      icon && h('div.account-list-item__icon', [icon]),
+
+    ]),
+
+    h(CurrencyDisplay, {
+      primaryCurrency: 'ETH',
+      convertedCurrency: 'USD',
+      value: balance,
+      conversionRate,
+      convertedPrefix: '$',
+      readOnly: true,
+      className: 'account-list-item__account-balances',
+      primaryBalanceClassName: 'account-list-item__account-primary-balance',
+      convertedBalanceClassName: 'account-list-item__account-secondary-balance',
+    }, name),
+
+  ])
+}
\ No newline at end of file
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
new file mode 100644
index 000000000..f7fbb2379
--- /dev/null
+++ b/ui/app/components/send/currency-display.js
@@ -0,0 +1,126 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+const { conversionUtil } = require('../../conversion-util')
+
+module.exports = CurrencyDisplay
+
+inherits(CurrencyDisplay, Component)
+function CurrencyDisplay () {
+  Component.call(this)
+
+  this.state = {
+    value: null,
+  }
+}
+
+function isValidInput (text) {
+  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
+  return re.test(text)
+}
+
+function resetCaretIfPastEnd (value, event) {
+  const caretPosition = event.target.selectionStart
+
+  if (caretPosition > value.length) {
+    event.target.setSelectionRange(value.length, value.length)
+  }
+}
+
+function toHexWei (value) {
+  return conversionUtil(value, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    toDenomination: 'WEI',
+  })
+}
+
+CurrencyDisplay.prototype.render = function () {
+  const {
+    className = 'currency-display',
+    primaryBalanceClassName = 'currency-display__input',
+    convertedBalanceClassName = 'currency-display__converted-value',
+    conversionRate,
+    primaryCurrency,
+    convertedCurrency,
+    convertedPrefix = '',
+    placeholder = '0',
+    readOnly = false,
+    inError = false,
+    value: initValue,
+    handleChange,
+    validate,
+  } = this.props
+  const { value } = this.state
+
+  const initValueToRender = conversionUtil(initValue, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  const convertedValue = conversionUtil(value || initValueToRender, {
+    fromNumericBase: 'dec',
+    fromCurrency: primaryCurrency,
+    toCurrency: convertedCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+
+  return h('div', {
+    className,
+    style: {
+      borderColor: inError ? 'red' : null,
+    },
+  }, [
+
+    h('div.currency-display__primary-row', [
+
+      h('div.currency-display__input-wrapper', [
+
+        h('input', {
+          className: primaryBalanceClassName,
+          value: `${value || initValueToRender} ${primaryCurrency}`,
+          placeholder: `${0} ${primaryCurrency}`,
+          readOnly,
+          onChange: (event) => {
+            let newValue = event.target.value.split(' ')[0]
+
+            if (newValue === '') {
+              this.setState({ value: '0' })
+            }
+            else if (newValue.match(/^0[1-9]$/)) {
+              this.setState({ value: newValue.match(/[1-9]/)[0] })
+            }
+            else if (newValue && !isValidInput(newValue)) {
+              event.preventDefault()
+            }
+            else {
+              this.setState({ value: newValue })
+            }
+          },
+          onBlur: event => !readOnly && handleChange(toHexWei(event.target.value.split(' ')[0])),
+          onKeyUp: event => {
+            if (!readOnly) {
+              validate(toHexWei(value || initValueToRender))
+              resetCaretIfPastEnd(value || initValueToRender, event)
+            }
+          },
+          onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
+        }),
+
+      ]),
+
+    ]),
+
+    h('div', {
+      className: convertedBalanceClassName,
+    }, `${convertedPrefix}${convertedValue} ${convertedCurrency}`),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
new file mode 100644
index 000000000..7aaccd490
--- /dev/null
+++ b/ui/app/components/send/currency-toggle.js
@@ -0,0 +1,44 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const classnames = require('classnames')
+
+module.exports = CurrencyToggle
+
+inherits(CurrencyToggle, Component)
+function CurrencyToggle () {
+  Component.call(this)
+}
+
+const defaultCurrencies = [ 'ETH', 'USD' ]
+
+CurrencyToggle.prototype.renderToggles = function () {
+  const { onClick, activeCurrency } = this.props
+  const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
+
+  return [
+    h('span', {
+      className: classnames('currency-toggle__item', {
+        'currency-toggle__item--selected': currencyA === activeCurrency,
+      }),
+      onClick: () => onClick(currencyA),
+    }, [ currencyA ]),
+    '<>',
+    h('span', {
+      className: classnames('currency-toggle__item', {
+        'currency-toggle__item--selected': currencyB === activeCurrency,
+      }),
+      onClick: () => onClick(currencyB),
+    }, [ currencyB ]),
+  ]
+}
+
+CurrencyToggle.prototype.render = function () {
+  const currencies = this.props.currencies || defaultCurrencies
+
+  return h('span.currency-toggle', currencies.length
+    ? this.renderToggles()
+    : []
+  )
+}
+
diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
new file mode 100644
index 000000000..8b4cec16c
--- /dev/null
+++ b/ui/app/components/send/eth-fee-display.js
@@ -0,0 +1,37 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const EthBalance = require('../eth-balance')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = EthFeeDisplay
+
+inherits(EthFeeDisplay, Component)
+function EthFeeDisplay () {
+  Component.call(this)
+}
+
+EthFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(EthBalance, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    currentCurrency: activeCurrency,
+    conversionRate,
+    showFiat: false,
+    hideTooltip: true,
+    styleOveride: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
new file mode 100644
index 000000000..6f2b9da68
--- /dev/null
+++ b/ui/app/components/send/from-dropdown.js
@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+const AccountListItem = require('./account-list-item')
+
+module.exports = FromDropdown
+
+inherits(FromDropdown, Component)
+function FromDropdown () {
+  Component.call(this)
+}
+
+FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return currentAccount.address === selectedAccount.address
+    ? listItemIcon
+    : null
+}
+
+FromDropdown.prototype.renderDropdown = function () {
+  const {
+    accounts,
+    selectedAccount,
+    closeDropdown,
+    onSelect,
+  } = this.props
+
+  return h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...accounts.map(account => h(AccountListItem, {
+        account, 
+        handleClick: () => {
+          onSelect(account)
+          closeDropdown()
+        }, 
+        icon: this.getListItemIcon(account, selectedAccount),
+      }))
+
+    ]),
+
+  ])
+}
+
+FromDropdown.prototype.render = function () {
+  const {
+    accounts,
+    selectedAccount,
+    openDropdown,
+    closeDropdown,
+    dropdownOpen,
+  } = this.props
+
+  return h('div.send-v2__from-dropdown', {}, [
+
+    h(AccountListItem, {
+      account: selectedAccount,
+      handleClick: openDropdown,
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
new file mode 100644
index 000000000..7c3913c7f
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -0,0 +1,42 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const CurrencyDisplay = require('./currency-display')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    conversionRate,
+    gasTotal,
+    onClick,
+  } = this.props
+
+  return h('div', [
+
+    gasTotal
+      ? h(CurrencyDisplay, {
+        primaryCurrency: 'ETH',
+        convertedCurrency: 'USD',
+        value: gasTotal,
+        conversionRate,
+        convertedPrefix: '$',
+        readOnly: true,
+      })
+      : h('div.currency-display', 'Loading...')
+    ,
+
+    h('div.send-v2__sliders-icon-container', {
+      onClick,
+    }, [
+      h('i.fa.fa-sliders.send-v2__sliders-icon'),
+    ])
+
+  ])
+}
+
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
new file mode 100644
index 000000000..a9a3f3f49
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display.js
@@ -0,0 +1,62 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const USDFeeDisplay = require('./usd-fee-display')
+const EthFeeDisplay = require('./eth-fee-display')
+const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.getTokenValue = function () {
+  const {
+    tokenExchangeRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true)
+  const [ethNumber] = value.split(' ')
+
+  return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  switch (activeCurrency) {
+    case 'USD':
+      return h(USDFeeDisplay, {
+        activeCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    case 'ETH':
+      return h(EthFeeDisplay, {
+        activeCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    default:
+      return h('div.token-gas', [
+        h('div.token-gas__amount', this.getTokenValue()),
+        h('div.token-gas__symbol', activeCurrency),
+      ])
+  }
+}
+
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
new file mode 100644
index 000000000..46aff3499
--- /dev/null
+++ b/ui/app/components/send/gas-tooltip.js
@@ -0,0 +1,100 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('../input-number.js')
+
+module.exports = GasTooltip
+
+inherits(GasTooltip, Component)
+function GasTooltip () {
+  Component.call(this)
+  this.state = {
+    gasLimit: 0,
+    gasPrice: 0,
+  }
+
+  this.updateGasPrice = this.updateGasPrice.bind(this)
+  this.updateGasLimit = this.updateGasLimit.bind(this)
+  this.onClose = this.onClose.bind(this)
+}
+
+GasTooltip.prototype.componentWillMount = function () {
+  const { gasPrice = 0, gasLimit = 0} = this.props
+
+  this.setState({
+    gasPrice: parseInt(gasPrice, 16) / 1000000000,
+    gasLimit: parseInt(gasLimit, 16),
+  })
+}
+
+GasTooltip.prototype.updateGasPrice = function (newPrice) {
+  const { onFeeChange } = this.props
+  const { gasLimit } = this.state
+
+  this.setState({ gasPrice: newPrice })
+  onFeeChange({
+    gasLimit: gasLimit.toString(16),
+    gasPrice: (newPrice * 1000000000).toString(16),
+  })
+}
+
+GasTooltip.prototype.updateGasLimit = function (newLimit) {
+  const { onFeeChange } = this.props
+  const { gasPrice } = this.state
+
+  this.setState({ gasLimit: newLimit })
+  onFeeChange({
+    gasLimit: newLimit.toString(16),
+    gasPrice: (gasPrice * 1000000000).toString(16),
+  })
+}
+
+GasTooltip.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+GasTooltip.prototype.render = function () {
+  const { gasPrice, gasLimit } = this.state
+
+  return h('div.gas-tooltip', {}, [
+    h('div.gas-tooltip-close-area', {
+      onClick: this.onClose,
+    }),
+    h('div.customize-gas-tooltip-container', {}, [
+      h('div.customize-gas-tooltip', {}, [
+        h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
+        h('div.gas-tooltip-input-label', {}, [
+          h('span.gas-tooltip-label', {}, ['Gas Price']),
+          h('i.fa.fa-info-circle'),
+        ]),
+        h(InputNumber, {
+          unitLabel: 'GWEI',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          value: gasPrice,
+          onChange: (newPrice) => this.updateGasPrice(newPrice),
+        }),
+        h('div.gas-tooltip-input-label', {
+          style: {
+            'marginTop': '81px',
+          },
+        }, [
+          h('span.gas-tooltip-label', {}, ['Gas Limit']),
+          h('i.fa.fa-info-circle'),
+        ]),
+        h(InputNumber, {
+          unitLabel: 'UNITS',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          value: gasLimit,
+          onChange: (newLimit) => this.updateGasLimit(newLimit),
+        }),
+      ]),
+      h('div.gas-tooltip-arrow', {}),
+    ]),
+  ])
+}
+
diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js
new file mode 100644
index 000000000..4005b9493
--- /dev/null
+++ b/ui/app/components/send/memo-textarea.js
@@ -0,0 +1,33 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = MemoTextArea
+
+inherits(MemoTextArea, Component)
+function MemoTextArea () {
+  Component.call(this)
+}
+
+MemoTextArea.prototype.render = function () {
+  const { memo, identities, onChange } = this.props
+
+  return h('div.send-v2__memo-text-area', [
+
+    h('textarea.send-v2__memo-text-area__input', {
+      placeholder: 'Optional',
+      value: memo,
+      onChange,
+      // onBlur: () => {
+      //   this.setErrorsFor('memo')
+      // },
+      onFocus: event => {
+        // this.clearErrorsFor('memo')
+      },
+    }),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
new file mode 100644
index 000000000..ebe2b878b
--- /dev/null
+++ b/ui/app/components/send/send-v2-container.js
@@ -0,0 +1,82 @@
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const abi = require('ethereumjs-abi')
+const SendEther = require('../../send-v2')
+
+const { multiplyCurrencies } = require('../../conversion-util')
+
+const {
+  accountsWithSendEtherInfoSelector,
+  getCurrentAccountWithSendEtherInfo,
+  conversionRateSelector,
+  getSelectedToken,
+  getSelectedTokenExchangeRate,
+  getSelectedAddress,
+  getGasPrice,
+  getGasLimit,
+  getAddressBook,
+  getSendFrom,
+} = require('../../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
+
+function mapStateToProps (state) {
+  const fromAccounts = accountsWithSendEtherInfoSelector(state)
+  const selectedAddress = getSelectedAddress(state)
+  const selectedToken = getSelectedToken(state)
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
+  const conversionRate = conversionRateSelector(state)
+
+  let data;
+  let primaryCurrency;
+  let tokenToUSDRate;
+  if (selectedToken) {
+    data = Array.prototype.map.call(
+      abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
+      x => ('00' + x.toString(16)).slice(-2)
+    ).join('')
+
+    primaryCurrency = selectedToken.symbol
+
+    tokenToUSDRate = multiplyCurrencies(
+      conversionRate,
+      selectedTokenExchangeRate,
+      { toNumericBase: 'dec' }
+    )
+  }
+
+  return {
+    ...state.metamask.send,
+    from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state),
+    fromAccounts,
+    toAccounts: [...fromAccounts, ...getAddressBook(state)],
+    conversionRate,
+    selectedToken,
+    primaryCurrency,
+    data,
+    amountConversionRate: selectedToken ? tokenToUSDRate : conversionRate,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })),
+    estimateGas: params => dispatch(actions.estimateGas(params)),
+    getGasPrice: () => dispatch(actions.getGasPrice()),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    signTokenTx: (tokenAddress, toAddress, amount, txData) => (
+      dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
+    ),
+    signTx: txParams => dispatch(actions.signTx(txParams)),
+    setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
+    addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
+    updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
+    updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
+    updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
+    updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
+    updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
+    goHome: () => dispatch(actions.goHome()),
+  }
+}
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
new file mode 100644
index 000000000..686a7a23e
--- /dev/null
+++ b/ui/app/components/send/to-autocomplete.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = ToAutoComplete
+
+inherits(ToAutoComplete, Component)
+function ToAutoComplete () {
+  Component.call(this)
+}
+
+ToAutoComplete.prototype.render = function () {
+  const { to, accounts, onChange, inError } = this.props
+
+  return h('div.send-v2__to-autocomplete', [
+
+    h('input.send-v2__to-autocomplete__input', {
+      name: 'address',
+      list: 'addresses',
+      placeholder: 'Recipient Address',
+      className: inError ? `send-v2__error-border` : '', 
+      value: to,
+      onChange,
+      onFocus: event => {
+        to && event.target.select()
+      },
+      style: {
+        borderColor: inError ? 'red' : null,
+      }
+    }),
+
+    h('datalist#addresses', [
+      // Corresponds to the addresses owned.
+      ...Object.entries(accounts).map(([key, { address, name }]) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+      // Corresponds to previously sent-to addresses.
+      // ...addressBook.map(({ address, name }) => {
+      //   return h('option', {
+      //     value: address,
+      //     label: name,
+      //     key: address,
+      //   })
+      // }),
+    ]),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
new file mode 100644
index 000000000..6ee38f1b5
--- /dev/null
+++ b/ui/app/components/send/usd-fee-display.js
@@ -0,0 +1,35 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const FiatValue = require('../fiat-value')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = USDFeeDisplay
+
+inherits(USDFeeDisplay, Component)
+function USDFeeDisplay () {
+  Component.call(this)
+}
+
+USDFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(FiatValue, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    conversionRate,
+    currentCurrency: activeCurrency,
+    style: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+