Add send screen template

app/_locales/en/messages.json

@@ -84,7 +84,7 @@
     "message": "Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin."
   },
   "ok": {
-    message: "Ok"
+    "message": "Ok"
   },
   "cancel": {
     "message": "Cancel"
@@ -282,6 +282,9 @@
   "from": {
     "message": "From"
   },
+  "to": {
+    "message": "To: "
+  },
   "fromToSame": {
     "message": "From and To address cannot be the same"
   },
@@ -412,6 +415,9 @@
   "knowledgeDataBase": {
     "message": "Visit our Knowledge Base"
   },
+  "max": {
+    "message": "Max"
+  },
   "lessThanMax": {
     "message": "must be less than or equal to $1.",
     "description": "helper for inputting hex as decimal input"
@@ -684,9 +690,15 @@
   "sendTokens": {
     "message": "Send Tokens"
   },
+  "onlySendToEtherAddress": {
+    "message": "Only send to an Ethereum address."
+  },
   "sendTokensAnywhere": {
     "message": "Send Tokens to anyone with an Ethereum account"
   },
+  "required": {
+    "Required"
+  },
   "settings": {
     "message": "Settings"
   },

ui/app/send-v2.js

@@ -1,6 +1,7 @@
 const { inherits } = require('util')
 const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')
+const t = require('../i18n')
 
 const ethAbi = require('ethereumjs-abi')
 const ethUtil = require('ethereumjs-util')
@@ -180,13 +181,12 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
 
 SendTransactionScreen.prototype.renderHeader = function () {
   const { selectedToken, clearSend, goHome } = this.props
-  const tokenText = selectedToken ? 'tokens' : 'ETH'
 
   return h('div.page-container__header', [
 
-    h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'),
+    h('div.page-container__title', selectedToken ? t('sendTokens') : t('sendETH')),
 
-    h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
+    h('div.page-container__subtitle', t('onlySendToEtherAddress')),
 
     h('div.page-container__header-close', {
       onClick: () => {
@@ -257,11 +257,11 @@ SendTransactionScreen.prototype.handleToChange = function (to) {
   let toError = null
 
   if (!to) {
-    toError = 'Required'
+    toError = t('required')
   } else if (!isValidAddress(to)) {
-    toError = 'Recipient address is invalid'
+    toError = t('invalidAddressRecipient')
   } else if (to === from) {
-    toError = 'From and To address cannot be the same'
+    toError = t('fromToSame')
   }
 
   updateSendTo(to)
@@ -277,9 +277,9 @@ SendTransactionScreen.prototype.renderToRow = function () {
 
     h('div.send-v2__form-label', [
 
-      'To:',
+      t('to'),
 
-      this.renderErrorMessage('to'),
+      this.renderErrorMessage(t('to')),
 
     ]),
 
@@ -377,11 +377,11 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
   )
 
   if (conversionRate && !sufficientBalance) {
-    amountError = 'Insufficient funds.'
+    amountError = t('insufficientFunds')
   } else if (verifyTokenBalance && !sufficientTokens) {
-    amountError = 'Insufficient tokens.'
+    amountError = t('insufficientTokens')
   } else if (amountLessThanZero) {
-    amountError = 'Can not send negative amounts of ETH.'
+    amountError = t('negativeETH')
   }
 
   updateSendErrors({ amount: amountError })
@@ -411,7 +411,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
           setMaxModeTo(true)
           this.setAmountToMax()
         },
-      }, [ !maxModeOn ? 'Max' : '' ]),
+      }, [ !maxModeOn ? t('max') : '' ]),
     ]),
 
     h('div.send-v2__form-field', [
@@ -439,7 +439,7 @@ SendTransactionScreen.prototype.renderGasRow = function () {
 
   return h('div.send-v2__form-row', [
 
-    h('div.send-v2__form-label', 'Gas fee:'),
+    h('div.send-v2__form-label', h('gasFee')),
 
     h('div.send-v2__form-field', [
 
@@ -507,11 +507,11 @@ SendTransactionScreen.prototype.renderFooter = function () {
         clearSend()
         goHome()
       },
-    }, 'Cancel'),
+    }, t('cancel')),
     h('button.btn-clear.page-container__footer-button', {
       disabled: !noErrors || !gasTotal || missingTokenBalance,
       onClick: event => this.onSubmit(event),
-    }, 'Next'),
+    }, t('next')),
   ])
 }