Merge branch 'master' of github.com:MetaMask/metamask-extension into i3076-UseStorageLocalInstead

feature/default_network_editable
kumavis 7 years ago
commit e48934dc04
  1. 202
      .circleci/config.yml
  2. 1
      .gitignore
  3. 3
      .nsprc
  4. 6
      CHANGELOG.md
  5. 1
      README.md
  6. 605
      app/_locales/en/messages.json
  7. 6
      app/manifest.json
  8. 17
      circle.yml
  9. 31
      development/genStates.js
  10. 23
      development/mock-dev.js
  11. 10
      development/ui-dev.js
  12. 18
      docs/translating-guide.md
  13. 17
      mascara/src/app/first-time/create-password-screen.js
  14. 128
      mascara/src/app/first-time/index.css
  15. 168
      old-ui/app/accounts/import/json.js
  16. 22251
      package-lock.json
  17. 27
      package.json
  18. 4
      test/base.conf.js
  19. 73
      test/integration/lib/add-token.js
  20. 44
      test/integration/lib/confirm-sig-requests.js
  21. 80
      test/integration/lib/first-time.js
  22. 94
      test/integration/lib/mascara-first-time.js
  23. 129
      test/integration/lib/send-new-ui.js
  24. 53
      test/lib/util.js
  25. 10
      test/unit/network-contoller-test.js
  26. 9
      ui/app/accounts/import/index.js
  27. 181
      ui/app/accounts/import/json.js
  28. 13
      ui/app/accounts/import/private-key.js
  29. 6
      ui/app/accounts/import/seed.js
  30. 13
      ui/app/accounts/new-account/create-form.js
  31. 7
      ui/app/accounts/new-account/index.js
  32. 10
      ui/app/actions.js
  33. 16
      ui/app/add-token.js
  34. 28
      ui/app/app.js
  35. 15
      ui/app/components/account-dropdowns.js
  36. 15
      ui/app/components/account-export.js
  37. 17
      ui/app/components/account-menu/index.js
  38. 9
      ui/app/components/bn-as-decimal-input.js
  39. 15
      ui/app/components/buy-button-subview.js
  40. 5
      ui/app/components/coinbase-form.js
  41. 3
      ui/app/components/copyButton.js
  42. 3
      ui/app/components/copyable.js
  43. 25
      ui/app/components/customize-gas-modal/index.js
  44. 22
      ui/app/components/dropdowns/components/account-dropdowns.js
  45. 27
      ui/app/components/dropdowns/network-dropdown.js
  46. 3
      ui/app/components/dropdowns/token-menu-dropdown.js
  47. 5
      ui/app/components/ens-input.js
  48. 9
      ui/app/components/hex-as-decimal-input.js
  49. 5
      ui/app/components/modals/account-details-modal.js
  50. 3
      ui/app/components/modals/account-modal-container.js
  51. 15
      ui/app/components/modals/buy-options-modal.js
  52. 129
      ui/app/components/modals/deposit-ether-modal.js
  53. 7
      ui/app/components/modals/edit-account-name-modal.js
  54. 16
      ui/app/components/modals/export-private-key-modal.js
  55. 13
      ui/app/components/modals/hide-token-confirmation-modal.js
  56. 21
      ui/app/components/modals/modal.js
  57. 17
      ui/app/components/modals/new-account-modal.js
  58. 25
      ui/app/components/network.js
  59. 3
      ui/app/components/notice.js
  60. 4
      ui/app/components/pending-msg-details.js
  61. 15
      ui/app/components/pending-msg.js
  62. 4
      ui/app/components/pending-personal-msg-details.js
  63. 29
      ui/app/components/pending-tx/confirm-deploy-contract.js
  64. 21
      ui/app/components/pending-tx/confirm-send-ether.js
  65. 39
      ui/app/components/pending-tx/confirm-send-token.js
  66. 3
      ui/app/components/pending-typed-msg-details.js
  67. 11
      ui/app/components/pending-typed-msg.js
  68. 35
      ui/app/components/send-token/index.js
  69. 4
      ui/app/components/send/gas-fee-display-v2.js
  70. 4
      ui/app/components/send/gas-tooltip.js
  71. 4
      ui/app/components/send/to-autocomplete.js
  72. 21
      ui/app/components/shapeshift-form.js
  73. 15
      ui/app/components/shift-list-item.js
  74. 25
      ui/app/components/signature-request.js
  75. 7
      ui/app/components/token-list.js
  76. 17
      ui/app/components/transaction-list-item.js
  77. 4
      ui/app/components/transaction-list.js
  78. 3
      ui/app/components/tx-list-item.js
  79. 5
      ui/app/components/tx-list.js
  80. 21
      ui/app/components/tx-view.js
  81. 9
      ui/app/components/wallet-view.js
  82. 3
      ui/app/css/itcss/components/hero-balance.scss
  83. 3
      ui/app/css/itcss/components/index.scss
  84. 50
      ui/app/css/itcss/components/modal.scss
  85. 5
      ui/app/css/itcss/components/new-account.scss
  86. 21
      ui/app/css/itcss/components/newui-sections.scss
  87. 59
      ui/app/css/itcss/components/welcome-screen.scss
  88. 37
      ui/app/css/itcss/generic/index.scss
  89. 19
      ui/app/first-time/init-menu.js
  90. 14
      ui/app/main-container.js
  91. 6
      ui/app/reducers/metamask.js
  92. 144
      ui/app/unlock.js
  93. 56
      ui/app/welcome-screen.js
  94. 33
      ui/i18n.js
  95. 12549
      yarn.lock

@ -0,0 +1,202 @@
version: 2
workflows:
version: 2
full_test:
jobs:
- prep-deps-npm
- prep-deps-firefox
- prep-scss:
requires:
- prep-deps-npm
- test-lint:
requires:
- prep-deps-npm
- test-unit:
requires:
- prep-deps-npm
- test-integration-mascara-chrome:
requires:
- prep-deps-npm
- prep-scss
- test-integration-mascara-firefox:
requires:
- prep-deps-npm
- prep-deps-firefox
- prep-scss
- test-integration-flat-chrome:
requires:
- prep-deps-npm
- prep-scss
- test-integration-flat-firefox:
requires:
- prep-deps-npm
- prep-deps-firefox
- prep-scss
jobs:
prep-deps-npm:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Install deps via npm
command: npm install
- save_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
paths:
- node_modules
prep-deps-firefox:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- run:
name: Download Firefox
command: >
wget https://ftp.mozilla.org/pub/firefox/releases/58.0/linux-x86_64/en-US/firefox-58.0.tar.bz2
&& tar xjf firefox-58.0.tar.bz2
- save_cache:
key: dependency-cache-firefox-{{ .Revision }}
paths:
- firefox
prep-scss:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- run:
name: Build for integration tests
command: npm run test:integration:build
- save_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
paths:
- ui/app/css/output
test-lint:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Test
command: npm run lint
test-unit:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: test:coverage
command: npm run test:coverage
test-integration-flat-firefox:
environment:
browsers: '["Firefox"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-firefox-{{ .Revision }}
- run:
name: Install firefox
command: >
sudo rm -r /opt/firefox
&& sudo mv firefox /opt/firefox58
&& sudo mv /usr/bin/firefox /usr/bin/firefox-old
&& sudo ln -s /opt/firefox58/firefox /usr/bin/firefox
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:flat
command: npm run test:flat
test-integration-flat-chrome:
environment:
browsers: '["Chrome"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:flat
command: npm run test:flat
test-integration-mascara-firefox:
environment:
browsers: '["Firefox"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-firefox-{{ .Revision }}
- run:
name: Install firefox
command: >
sudo rm -r /opt/firefox
&& sudo mv firefox /opt/firefox58
&& sudo mv /usr/bin/firefox /usr/bin/firefox-old
&& sudo ln -s /opt/firefox58/firefox /usr/bin/firefox
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:mascara
command: npm run test:mascara
test-integration-mascara-chrome:
environment:
browsers: '["Chrome"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:mascara
command: npm run test:mascara

1
.gitignore vendored

@ -1,6 +1,5 @@
npm-debug.log npm-debug.log
node_modules node_modules
package-lock.json
yarn.lock yarn.lock
app/bower_components app/bower_components

@ -0,0 +1,3 @@
{
"exceptions": ["https://nodesecurity.io/advisories/566"]
}

@ -2,6 +2,12 @@
## Current Master ## Current Master
- Fix flashing to Log in screen after logging in or restoring from seed phrase. - Fix flashing to Log in screen after logging in or restoring from seed phrase.
- Increase tap areas for menu buttons on mobile
- Change all fonts in new-ui onboarding to Roboto, size 400
- Add a welcome screen to new-ui onboarding flow
- Make new-ui create password screen responsive
- Hide network dropdown before account is initialized
- Add ability for internationalization.
- Fix bug that could cause MetaMask to lose all of its local data. - Fix bug that could cause MetaMask to lose all of its local data.
## 4.2.0 Tue Mar 06 2018 ## 4.2.0 Tue Mar 06 2018

@ -66,6 +66,7 @@ To write tests that will be run in the browser using QUnit, add your test files
- [How to add custom build to Chrome](./docs/add-to-chrome.md) - [How to add custom build to Chrome](./docs/add-to-chrome.md)
- [How to add custom build to Firefox](./docs/add-to-firefox.md) - [How to add custom build to Firefox](./docs/add-to-firefox.md)
- [How to develop a live-reloading UI](./docs/ui-dev-mode.md) - [How to develop a live-reloading UI](./docs/ui-dev-mode.md)
- [How to add a new translation to MetaMask](./docs/translating-guide.md)
- [Publishing Guide](./docs/publishing.md) - [Publishing Guide](./docs/publishing.md)
- [How to develop an in-browser mocked UI](./docs/ui-mock-mode.md) - [How to develop an in-browser mocked UI](./docs/ui-mock-mode.md)
- [How to live reload on local dependency changes](./docs/developing-on-deps.md) - [How to live reload on local dependency changes](./docs/developing-on-deps.md)

@ -1,10 +1,609 @@
{ {
"accept": {
"message": "Accept"
},
"account": {
"message": "Account"
},
"accountDetails": {
"message": "Account Details"
},
"accountName": {
"message": "Account Name"
},
"address": {
"message": "Address"
},
"addToken": {
"message": "Add Token"
},
"amount": {
"message": "Amount"
},
"amountPlusGas": {
"message": "Amount + Gas"
},
"appDescription": {
"message": "Ethereum Browser Extension",
"description": "The description of the application"
},
"appName": { "appName": {
"message": "MetaMask", "message": "MetaMask",
"description": "The name of the application" "description": "The name of the application"
}, },
"appDescription": { "attemptingConnect": {
"message": "Ethereum Identity Management", "message": "Attempting to connect to blockchain."
"description": "The description of the application" },
"available": {
"message": "Available"
},
"back": {
"message": "Back"
},
"balance": {
"message": "Balance:"
},
"balanceIsInsufficientGas": {
"message": "Insufficient balance for current gas total"
},
"beta": {
"message": "BETA"
},
"betweenMinAndMax": {
"message": "must be greater than or equal to $1 and less than or equal to $2.",
"description": "helper for inputting hex as decimal input"
},
"borrowDharma": {
"message": "Borrow With Dharma (Beta)"
},
"buy": {
"message": "Buy"
},
"buyCoinbase": {
"message": "Buy on Coinbase"
},
"buyCoinbaseExplainer": {
"message": "Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin."
},
"cancel": {
"message": "Cancel"
},
"clickCopy": {
"message": "Click to Copy"
},
"confirm": {
"message": "Confirm"
},
"confirmContract": {
"message": "Confirm Contract"
},
"confirmPassword": {
"message": "Confirm Password"
},
"confirmTransaction": {
"message": "Confirm Transaction"
},
"continueToCoinbase": {
"message": "Continue to Coinbase"
},
"contractDeployment": {
"message": "Contract Deployment"
},
"conversionProgress": {
"message": "Conversion in progress"
},
"copiedButton": {
"message": "Copied"
},
"copiedClipboard": {
"message": "Copied to Clipboard"
},
"copiedExclamation": {
"message": "Copied!"
},
"copy": {
"message": "Copy"
},
"copyToClipboard": {
"message": "Copy to clipboard"
},
"copyButton": {
"message": " Copy "
},
"copyPrivateKey": {
"message": "This is your private key (click to copy)"
},
"create": {
"message": "Create"
},
"createAccount": {
"message": "Create Account"
},
"createDen": {
"message": "Create"
},
"crypto": {
"message": "Crypto",
"description": "Exchange type (cryptocurrencies)"
},
"customGas": {
"message": "Customize Gas"
},
"customize": {
"message": "Customize"
},
"customRPC": {
"message": "Custom RPC"
},
"defaultNetwork": {
"message": "The default network for Ether transactions is Main Net."
},
"denExplainer": {
"message": "Your DEN is your password-encrypted storage within MetaMask."
},
"deposit": {
"message": "Deposit"
},
"depositBTC": {
"message": "Deposit your BTC to the address below:"
},
"depositCoin": {
"message": "Deposit your $1 to the address below",
"description": "Tells the user what coin they have selected to deposit with shapeshift"
},
"depositEth": {
"message": "Deposit Eth"
},
"depositEther": {
"message": "Deposit Ether"
},
"depositFiat": {
"message": "Deposit with Fiat"
},
"depositFromAccount": {
"message": "Deposit from another account"
},
"depositShapeShift": {
"message": "Deposit with ShapeShift"
},
"depositShapeShiftExplainer": {
"message": "If you own other cryptocurrencies, you can trade and deposit Ether directly into your MetaMask wallet. No Account Needed."
},
"details": {
"message": "Details"
},
"directDeposit": {
"message": "Direct Deposit"
},
"directDepositEther": {
"message": "Directly Deposit Ether"
},
"directDepositEtherExplainer": {
"message": "If you already have some Ether, the quickest way to get Ether in your new wallet by direct deposit."
},
"done": {
"message": "Done"
},
"edit": {
"message": "Edit"
},
"editAccountName": {
"message": "Edit Account Name"
},
"encryptNewDen": {
"message": "Encrypt your new DEN"
},
"enterPassword": {
"message": "Enter password"
},
"etherscanView": {
"message": "View account on Etherscan"
},
"exchangeRate": {
"message": "Exchange Rate"
},
"exportPrivateKey": {
"message": "Export Private Key"
},
"exportPrivateKeyWarning": {
"message": "Export private keys at your own risk."
},
"failed": {
"message": "Failed"
},
"fiat": {
"message": "FIAT",
"description": "Exchange type"
},
"fileImportFail": {
"message": "File import not working? Click here!",
"description": "Helps user import their account from a JSON file"
},
"from": {
"message": "From"
},
"fromShapeShift": {
"message": "From ShapeShift"
},
"gas": {
"message": "Gas",
"description": "Short indication of gas cost"
},
"gasFee": {
"message": "Gas Fee"
},
"gasLimit": {
"message": "Gas Limit"
},
"gasLimitCalculation": {
"message": "We calculate the suggested gas limit based on network success rates."
},
"gasLimitRequired": {
"message": "Gas Limit Required"
},
"gasLimitTooLow": {
"message": "Gas limit must be at least 21000"
},
"gasPrice": {
"message": "Gas Price (GWEI)"
},
"gasPriceCalculation": {
"message": "We calculate the suggested gas prices based on network success rates."
},
"gasPriceRequired": {
"message": "Gas Price Required"
},
"getEther": {
"message": "Get Ether"
},
"getEtherFromFaucet": {
"message": "Get Ether from a faucet for the $1",
"description": "Displays network name for Ether faucet"
},
"greaterThanMin": {
"message": "must be greater than or equal to $1.",
"description": "helper for inputting hex as decimal input"
},
"here": {
"message": "here",
"description": "as in -click here- for more information (goes with troubleTokenBalances)"
},
"hide": {
"message": "Hide"
},
"hideToken": {
"message": "Hide Token"
},
"hideTokenPrompt": {
"message": "Hide Token?"
},
"howToDeposit": {
"message": "How would you like to deposit Ether?"
},
"import": {
"message": "Import",
"description": "Button to import an account from a selected file"
},
"importAccount": {
"message": "Import Account"
},
"importAnAccount": {
"message": "Import an account"
},
"importDen": {
"message": "Import Existing DEN"
},
"imported": {
"message": "Imported",
"description": "status showing that an account has been fully loaded into the keyring"
},
"infoHelp": {
"message": "Info & Help"
},
"invalidAddress": {
"message": "Invalid address"
},
"invalidGasParams": {
"message": "Invalid Gas Parameters"
},
"invalidInput": {
"message": "Invalid input."
},
"invalidRequest": {
"message": "Invalid Request"
},
"jsonFile": {
"message": "JSON File",
"description": "format for importing an account"
},
"kovan": {
"message": "Kovan Test Network"
},
"lessThanMax": {
"message": "must be less than or equal to $1.",
"description": "helper for inputting hex as decimal input"
},
"limit": {
"message": "Limit"
},
"loading": {
"message": "Loading..."
},
"loadingTokens": {
"message": "Loading Tokens..."
},
"localhost": {
"message": "Localhost 8545"
},
"logout": {
"message": "Log out"
},
"loose": {
"message": "Loose"
},
"mainnet": {
"message": "Main Ethereum Network"
},
"message": {
"message": "Message"
},
"min": {
"message": "Minimum"
},
"myAccounts": {
"message": "My Accounts"
},
"needEtherInWallet": {
"message": "To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet."
},
"needImportFile": {
"message": "You must select a file to import.",
"description": "User is important an account and needs to add a file to continue"
},
"needImportPassword": {
"message": "You must enter a password for the selected file.",
"description": "Password and file needed to import an account"
},
"networks": {
"message": "Networks"
},
"newAccount": {
"message": "New Account"
},
"newAccountNumberName": {
"message": "Account $1",
"description": "Default name of next account to be created on create account screen"
},
"newContract": {
"message": "New Contract"
},
"newPassword": {
"message": "New Password (min 8 chars)"
},
"newRecipient": {
"message": "New Recipient"
},
"next": {
"message": "Next"
},
"noAddressForName": {
"message": "No address has been set for this name."
},
"noDeposits": {
"message": "No deposits received"
},
"noTransactionHistory": {
"message": "No transaction history."
},
"noTransactions": {
"message": "No Transactions"
},
"notStarted": {
"message": "Not Started"
},
"oldUI": {
"message": "Old UI"
},
"oldUIMessage": {
"message": "You have returned to the old UI. You can switch back to the New UI through the option in the top right dropdown menu."
},
"or": {
"message": "or",
"description": "choice between creating or importing a new account"
},
"passwordMismatch": {
"message": "passwords don't match",
"description": "in password creation process, the two new password fields did not match"
},
"passwordShort": {
"message": "password not long enough",
"description": "in password creation process, the password is not long enough to be secure"
},
"pastePrivateKey": {
"message": "Paste your private key string here:",
"description": "For importing an account from a private key"
},
"pasteSeed": {
"message": "Paste your seed phrase here!"
},
"pleaseReviewTransaction": {
"message": "Please review your transaction."
},
"privateKey": {
"message": "Private Key",
"description": "select this type of file to use to import an account"
},
"privateKeyWarning": {
"message": "Warning: Never disclose this key. Anyone with your private keys can take steal any assets held in your account."
},
"privateNetwork": {
"message": "Private Network"
},
"qrCode": {
"message": "Show QR Code"
},
"readdToken": {
"message": "You can add this token back in the future by going go to “Add token” in your accounts options menu."
},
"readMore": {
"message": "Read more here."
},
"receive": {
"message": "Receive"
},
"recipientAddress": {
"message": "Recipient Address"
},
"refundAddress": {
"message": "Your Refund Address"
},
"rejected": {
"message": "Rejected"
},
"required": {
"message": "Required"
},
"retryWithMoreGas": {
"message": "Retry with a higher gas price here"
},
"revert": {
"message": "Revert"
},
"rinkeby": {
"message": "Rinkeby Test Network"
},
"ropsten": {
"message": "Ropsten Test Network"
},
"sampleAccountName": {
"message": "E.g. My new account",
"description": "Help user understand concept of adding a human-readable name to their account"
},
"save": {
"message": "Save"
},
"saveAsFile": {
"message": "Save as File",
"description": "Account export process"
},
"selectService": {
"message": "Select Service"
},
"send": {
"message": "Send"
},
"sendTokens": {
"message": "Send Tokens"
},
"sendTokensAnywhere": {
"message": "Send Tokens to anyone with an Ethereum account"
},
"settings": {
"message": "Settings"
},
"shapeshiftBuy": {
"message": "Buy with Shapeshift"
},
"showPrivateKeys": {
"message": "Show Private Keys"
},
"showQRCode": {
"message": "Show QR Code"
},
"sign": {
"message": "Sign"
},
"signMessage": {
"message": "Sign Message"
},
"signNotice": {
"message": "Signing this message can have \ndangerous side effects. Only sign messages from \nsites you fully trust with your entire account.\n This dangerous method will be removed in a future version. "
},
"sigRequest": {
"message": "Signature Request"
},
"sigRequested": {
"message": "Signature Requested"
},
"status": {
"message": "Status"
},
"submit": {
"message": "Submit"
},
"takesTooLong": {
"message": "Taking too long?"
},
"testFaucet": {
"message": "Test Faucet"
},
"to": {
"message": "To"
},
"toETHviaShapeShift": {
"message": "$1 to ETH via ShapeShift",
"description": "system will fill in deposit type in start of message"
},
"tokenBalance": {
"message": "Your Token Balance is:"
},
"total": {
"message": "Total"
},
"transactionMemo": {
"message": "Transaction memo (optional)"
},
"transactionNumber": {
"message": "Transaction Number"
},
"transfers": {
"message": "Transfers"
},
"troubleTokenBalances": {
"message": "We had trouble loading your token balances. You can view them ",
"description": "Followed by a link (here) to view token balances"
},
"typePassword": {
"message": "Type Your Password"
},
"uiWelcome": {
"message": "Welcome to the New UI (Beta)"
},
"uiWelcomeMessage": {
"message": "You are now using the new Metamask UI. Take a look around, try out new features like sending tokens, and let us know if you have any issues."
},
"unavailable": {
"message": "Unavailable"
},
"unknown": {
"message": "Unknown"
},
"unknownNetwork": {
"message": "Unknown Private Network"
},
"unknownNetworkId": {
"message": "Unknown network ID"
},
"usaOnly": {
"message": "USA only",
"description": "Using this exchange is limited to people inside the USA"
},
"usedByClients": {
"message": "Used by a variety of different clients"
},
"viewAccount": {
"message": "View Account"
},
"warning": {
"message": "Warning"
},
"whatsThis": {
"message": "What's this?"
},
"yourSigRequested": {
"message": "Your signature is being requested"
},
"youSign": {
"message": "You are signing"
} }
} }

@ -1,10 +1,10 @@
{ {
"name": "MetaMask", "name": "__MSG_appName__",
"short_name": "Metamask", "short_name": "__MSG_appName__",
"version": "4.2.0", "version": "4.2.0",
"manifest_version": 2, "manifest_version": 2,
"author": "https://metamask.io", "author": "https://metamask.io",
"description": "Ethereum Browser Extension", "description": "__MSG_appDescription__",
"commands": { "commands": {
"_execute_browser_action": { "_execute_browser_action": {
"suggested_key": { "suggested_key": {

@ -1,17 +0,0 @@
machine:
node:
version: 8.1.4
test:
override:
- "npm test"
dependencies:
pre:
- sudo apt-get update
# get latest stable firefox
- sudo apt-get install firefox
- firefox_cmd=`which firefox`; sudo rm -f $firefox_cmd; sudo ln -s `which firefox.ubuntu` $firefox_cmd
# get latest stable chrome
- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
- sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
- sudo apt-get update
- sudo apt-get install google-chrome-stable

@ -1,18 +1,21 @@
const fs = require('fs') const fs = require('fs')
const path = require('path') const path = require('path')
const { promisify } = require('util')
const statesPath = path.join(__dirname, 'states') start().catch(console.error)
const stateNames = fs.readdirSync(statesPath)
const states = stateNames.reduce((result, stateFileName) => { async function start () {
const statePath = path.join(__dirname, 'states', stateFileName) const statesPath = path.join(__dirname, 'states')
const stateFile = fs.readFileSync(statePath).toString() const stateFilesNames = await promisify(fs.readdir)(statesPath)
const state = JSON.parse(stateFile) const states = {}
result[stateFileName.split('.')[0].replace(/-/g, ' ', 'g')] = state await Promise.all(stateFilesNames.map(async (stateFileName) => {
return result const stateFilePath = path.join(__dirname, 'states', stateFileName)
}, {}) const stateFileContent = await promisify(fs.readFile)(stateFilePath, 'utf8')
const state = JSON.parse(stateFileContent)
const result = `module.exports = ${JSON.stringify(states)}` const stateName = stateFileName.split('.')[0].replace(/-/g, ' ', 'g')
states[stateName] = state
const statesJsonPath = path.join(__dirname, 'states.js') }))
fs.writeFileSync(statesJsonPath, result) const generatedFileContent = `module.exports = ${JSON.stringify(states)}`
const generatedFilePath = path.join(__dirname, 'states.js')
await promisify(fs.writeFile)(generatedFilePath, generatedFileContent)
}

@ -15,17 +15,16 @@
const extend = require('xtend') const extend = require('xtend')
const render = require('react-dom').render const render = require('react-dom').render
const h = require('react-hyperscript') const h = require('react-hyperscript')
const pipe = require('mississippi').pipe const Root = require('../ui/app/root')
const Root = require('./ui/app/root') const configureStore = require('../ui/app/store')
const configureStore = require('./ui/app/store') const actions = require('../ui/app/actions')
const actions = require('./ui/app/actions') const states = require('./states')
const states = require('./development/states') const backGroundConnectionModifiers = require('./backGroundConnectionModifiers')
const backGroundConnectionModifiers = require('./development/backGroundConnectionModifiers') const Selector = require('./selector')
const Selector = require('./development/selector') const MetamaskController = require('../app/scripts/metamask-controller')
const MetamaskController = require('./app/scripts/metamask-controller') const firstTimeState = require('../app/scripts/first-time-state')
const firstTimeState = require('./app/scripts/first-time-state') const ExtensionPlatform = require('../app/scripts/platforms/extension')
const ExtensionPlatform = require('./app/scripts/platforms/extension') const extension = require('./mockExtension')
const extension = require('./development/mockExtension')
const noop = function () {} const noop = function () {}
const log = require('loglevel') const log = require('loglevel')
@ -52,7 +51,7 @@ function updateQueryParams(newView) {
// CSS // CSS
// //
const MetaMaskUiCss = require('./ui/css') const MetaMaskUiCss = require('../ui/css')
const injectCss = require('inject-css') const injectCss = require('inject-css')
// //

@ -17,10 +17,10 @@
const render = require('react-dom').render const render = require('react-dom').render
const h = require('react-hyperscript') const h = require('react-hyperscript')
const Root = require('./ui/app/root') const Root = require('../ui/app/root')
const configureStore = require('./development/uiStore') const configureStore = require('./uiStore')
const states = require('./development/states') const states = require('./states')
const Selector = require('./development/selector') const Selector = require('./selector')
// logger // logger
const log = require('loglevel') const log = require('loglevel')
@ -35,7 +35,7 @@ const firstState = states[selectedView]
updateQueryParams(selectedView) updateQueryParams(selectedView)
// CSS // CSS
const MetaMaskUiCss = require('./ui/css') const MetaMaskUiCss = require('../ui/css')
const injectCss = require('inject-css') const injectCss = require('inject-css')

@ -0,0 +1,18 @@
# MetaMask Translation Guide
The MetaMask browser extension supports new translations added in the form of new locales files added in `app/_locales`.
- [The MDN Guide to Internationalizing Extensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization)
## Adding a new Language
Each supported language is represented by a folder in `app/_locales` whose name is that language's subtag ([look up a language subtag using this tool](https://r12a.github.io/app-subtags/)).
Inside that folder there should be a `messages.json` file that follows the specified format. An easy way to start your translation is to first duplicate `app/_locales/en/messages.json` (the english translation), and then update the `message` key for each in-app message.
That's it! When MetaMask is loaded on a computer with that language set as the system language, they will see your translation instead of the default one.
## Testing
To verify that your translation works, you will need to [build a local copy](https://github.com/MetaMask/metamask-extension#building-locally) of MetaMask.

@ -2,6 +2,7 @@ import EventEmitter from 'events'
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import classnames from 'classnames'
import {createNewVaultAndKeychain} from '../../../../ui/app/actions' import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
import LoadingScreen from './loading-screen' import LoadingScreen from './loading-screen'
import Breadcrumbs from './breadcrumbs' import Breadcrumbs from './breadcrumbs'
@ -14,6 +15,7 @@ class CreatePasswordScreen extends Component {
goToImportWithSeedPhrase: PropTypes.func.isRequired, goToImportWithSeedPhrase: PropTypes.func.isRequired,
goToImportAccount: PropTypes.func.isRequired, goToImportAccount: PropTypes.func.isRequired,
next: PropTypes.func.isRequired, next: PropTypes.func.isRequired,
isMascara: PropTypes.bool.isRequired,
} }
state = { state = {
@ -53,14 +55,17 @@ class CreatePasswordScreen extends Component {
} }
render () { render () {
const { isLoading, goToImportWithSeedPhrase } = this.props const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props
return isLoading return isLoading
? <LoadingScreen loadingMessage="Creating your new account" /> ? <LoadingScreen loadingMessage="Creating your new account" />
: ( : (
<div> <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
<div className="first-view-main"> <div className={classnames({
<div className="mascara-info"> 'first-view-main': !isMascara,
'first-view-main__mascara': isMascara,
})}>
{isMascara && <div className="mascara-info first-view-phone-invisible">
<Mascot <Mascot
animationEventEmitter={this.animationEventEmitter} animationEventEmitter={this.animationEventEmitter}
width="225" width="225"
@ -72,7 +77,7 @@ class CreatePasswordScreen extends Component {
<div className="info"> <div className="info">
It allows you to hold ether & tokens, and interact with decentralized applications. It allows you to hold ether & tokens, and interact with decentralized applications.
</div> </div>
</div> </div>}
<div className="create-password"> <div className="create-password">
<div className="create-password__title"> <div className="create-password__title">
Create Password Create Password
@ -127,7 +132,7 @@ class CreatePasswordScreen extends Component {
} }
export default connect( export default connect(
({ appState: { isLoading } }) => ({ isLoading }), ({ appState: { isLoading }, metamask: { isMascara } }) => ({ isLoading, isMascara }),
dispatch => ({ dispatch => ({
createAccount: password => dispatch(createNewVaultAndKeychain(password)), createAccount: password => dispatch(createNewVaultAndKeychain(password)),
}) })

@ -1,3 +1,10 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
.first-time-flow { .first-time-flow {
width: 100vw; width: 100vw;
@ -6,21 +13,52 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
flex: 1 0 auto; flex: 1 0 auto;
font-weight: 400;
font-family: Roboto;
} }
.alpha-warning { .alpha-warning,
.alpha-warning-welcome-screen {
background: #f7861c; background: #f7861c;
color: #fff; color: #fff;
line-height: 2em; line-height: 2em;
padding-left: 10vw; padding-left: 10vw;
} }
.first-view-main { .alpha-warning-welcome-screen {
padding-left: 0;
text-align: center;
}
.first-view-main-wrapper {
display: flex;
width: 100%;
padding-left: 10vw;
}
.first-view-main,
.first-view-main__mascara {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: center;
}
.first-view-main__mascara {
justify-content: space-between; justify-content: space-between;
} }
@media screen and (max-width: 575px) {
.first-view-main-wrapper {
padding: 0;
}
}
@media screen and (min-width: 1281px) {
.first-view-main {
width: 62vw;
}
}
.mascara-info { .mascara-info {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -81,6 +119,45 @@
width: initial !important; width: initial !important;
} }
.alpha-warning,
.alpha-warning-welcome-screen {
line-height: 1em;
padding: 8px 12px;
}
.first-view-main {
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
margin-top: 12px;
}
.first-view-main .create-password {
margin-top: 0px;
}
.mascara-info {
margin-top: 0px;
width: 100%;
align-items: center;
}
.mascara-info .info {
text-align: center;
font-size: 16px;
margin: 0 10px;
padding-left: 0px;
}
.mascara-info :first-child {
align-self: center;
}
.first-view-phone-invisible {
display: none;
}
.first-time-flow__input { .first-time-flow__input {
width: initial !important; width: initial !important;
font-size: 14px !important; font-size: 14px !important;
@ -180,11 +257,11 @@
color: #1B344D; color: #1B344D;
font-size: 16px; font-size: 16px;
line-height: 23px; line-height: 23px;
font-family: Montserrat UltraLight; font-family: Roboto;
} }
.buy-ether__small-body-text { .buy-ether__small-body-text {
font-family: Montserrat UltraLight; font-family: Roboto;
height: 14px; height: 14px;
color: #757575; color: #757575;
font-size: 12px; font-size: 12px;
@ -212,7 +289,7 @@
height: 334px; height: 334px;
overflow-y: auto; overflow-y: auto;
color: #757575; color: #757575;
font-family: Montserrat UltraLight; font-family: Roboto;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
text-align: justify; text-align: justify;
@ -237,7 +314,7 @@
color: #5B5D67; color: #5B5D67;
font-size: 16px; font-size: 16px;
line-height: 23px; line-height: 23px;
font-family: Montserrat UltraLight; font-family: Roboto;
} }
.backup-phrase__secret { .backup-phrase__secret {
@ -255,7 +332,7 @@
.backup-phrase__secret-words { .backup-phrase__secret-words {
width: 310px; width: 310px;
color: #5B5D67; color: #5B5D67;
font-family: Montserrat Light; font-family: Roboto;
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
@ -284,7 +361,7 @@
background: none; background: none;
box-shadow: none; box-shadow: none;
color: #FFFFFF; color: #FFFFFF;
font-family: Montserrat Regular; font-family: Roboto;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
line-height: 15px; line-height: 15px;
@ -338,7 +415,7 @@ button.backup-phrase__reveal-button:hover {
.backup-phrase__confirm-seed-option { .backup-phrase__confirm-seed-option {
color: #5B5D67; color: #5B5D67;
font-family: Montserrat Light; font-family: Roboto;
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
background-color: #E7E7E7; background-color: #E7E7E7;
@ -360,7 +437,7 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__faq-link { .import-account__faq-link {
font-size: 18px; font-size: 18px;
line-height: 23px; line-height: 23px;
font-family: Montserrat Light; font-family: Roboto;
} }
.import-account__selector-label { .import-account__selector-label {
@ -375,7 +452,7 @@ button.backup-phrase__confirm-seed-option:hover {
background-color: #FFFFFF; background-color: #FFFFFF;
margin-top: 14px; margin-top: 14px;
color: #5B5D67; color: #5B5D67;
font-family: Montserrat Light; font-family: Roboto;
font-size: 18px; font-size: 18px;
line-height: 23px; line-height: 23px;
padding: 14px 21px; padding: 14px 21px;
@ -390,7 +467,7 @@ button.backup-phrase__confirm-seed-option:hover {
font-size: 18px; font-size: 18px;
line-height: 23px; line-height: 23px;
margin-top: 21px; margin-top: 21px;
font-family: Montserrat UltraLight; font-family: Roboto;
} }
.import-account__input-wrapper { .import-account__input-wrapper {
@ -436,7 +513,7 @@ button.backup-phrase__confirm-seed-option:hover {
border: 1px solid #1B344D; border: 1px solid #1B344D;
border-radius: 4px; border-radius: 4px;
color: #1B344D; color: #1B344D;
font-family: Montserrat Light; font-family: Roboto;
font-size: 18px; font-size: 18px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -453,7 +530,7 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__file-name { .import-account__file-name {
color: #000000; color: #000000;
font-family: Montserrat Light; font-family: Roboto;
font-size: 18px; font-size: 18px;
line-height: 23px; line-height: 23px;
margin-left: 22px; margin-left: 22px;
@ -474,7 +551,7 @@ button.backup-phrase__confirm-seed-option:hover {
.buy-ether__content-headline { .buy-ether__content-headline {
color: #1B344D; color: #1B344D;
font-family: Montserrat Light; font-family: Roboto;
font-size: 18px; font-size: 18px;
line-height: 23px; line-height: 23px;
} }
@ -503,7 +580,7 @@ button.backup-phrase__confirm-seed-option:hover {
align-items: center; align-items: center;
padding: 20px 0; padding: 20px 0;
color: #9B9B9B; color: #9B9B9B;
font-family: Montserrat Light; font-family: Roboto;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
cursor: pointer; cursor: pointer;
@ -538,7 +615,7 @@ button.backup-phrase__confirm-seed-option:hover {
.buy-ether__button-separator-text { .buy-ether__button-separator-text {
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
font-family: Montserrat Light; font-family: Roboto;
margin: 35px 0 14px 30px; margin: 35px 0 14px 30px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -550,7 +627,7 @@ button.backup-phrase__confirm-seed-option:hover {
color: #1B344D !important; color: #1B344D !important;
font-size: 14px !important; font-size: 14px !important;
line-height: 18px !important; line-height: 18px !important;
font-family: Montserrat UltraLight !important; font-family: Roboto;
} }
.buy-ether__action-content-wrapper { .buy-ether__action-content-wrapper {
@ -584,6 +661,7 @@ button.backup-phrase__confirm-seed-option:hover {
color: #FFFFFF; color: #FFFFFF;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
font-family: Roboto;
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@ -608,7 +686,7 @@ button.first-time-flow__button:hover {
color: #1B344D; color: #1B344D;
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
font-family: Montserrat Light; font-family: Roboto;
text-align: center; text-align: center;
margin: 35px 0 14px; margin: 35px 0 14px;
background-color: transparent; background-color: transparent;
@ -660,7 +738,7 @@ button.first-time-flow__button--tertiary:hover {
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
font-family: Montserrat UltraLight; font-family: Roboto;
} }
.icon { .icon {
@ -708,7 +786,7 @@ button.first-time-flow__button--tertiary:hover {
.shapeshift-form__deposit-instruction { .shapeshift-form__deposit-instruction {
color: #757575; color: #757575;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
font-family: Montserrat Light; font-family: Roboto;
font-weight: 300; font-weight: 300;
line-height: 19px; line-height: 19px;
padding-bottom: 6px; padding-bottom: 6px;
@ -725,7 +803,7 @@ button.first-time-flow__button--tertiary:hover {
width: 100%; width: 100%;
height: 45px; height: 45px;
line-height: 44px; line-height: 44px;
font-family: Montserrat Light; font-family: Roboto;
} }
.shapeshift-form__address-input-label { .shapeshift-form__address-input-label {
@ -734,7 +812,7 @@ button.first-time-flow__button--tertiary:hover {
font-weight: 500; font-weight: 500;
line-height: 18px; line-height: 18px;
padding-bottom: 6px; padding-bottom: 6px;
font-family: Montserrat Light; font-family: Roboto;
} }
.shapeshift-form__address-input { .shapeshift-form__address-input {
@ -753,7 +831,7 @@ button.first-time-flow__button--tertiary:hover {
.shapeshift-form__address-input-error-message { .shapeshift-form__address-input-error-message {
color: #FF001F; color: #FF001F;
font-family: Montserrat Light; font-family: Roboto;
font-size: 12px; font-size: 12px;
height: 24px; height: 24px;
line-height: 18px; line-height: 18px;
@ -763,7 +841,7 @@ button.first-time-flow__button--tertiary:hover {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
color: #9B9B9B; color: #9B9B9B;
font-family: Montserrat Light; font-family: Roboto;
font-size: 10px; font-size: 10px;
line-height: 16px; line-height: 16px;
} }

@ -1,100 +1,122 @@
const inherits = require('util').inherits
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../../../ui/app/actions') const actions = require('../../../../ui/app/actions')
const FileInput = require('react-simple-file-input').default const FileInput = require('react-simple-file-input').default
const PropTypes = require('prop-types')
const HELP_LINK = 'https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file' const HELP_LINK = 'https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file'
module.exports = connect(mapStateToProps)(JsonImportSubview) class JsonImportSubview extends Component {
constructor (props) {
super(props)
function mapStateToProps (state) { this.state = {
return { file: null,
error: state.appState.warning, fileContents: '',
}
} }
}
inherits(JsonImportSubview, Component) render () {
function JsonImportSubview () { const { error } = this.props
Component.call(this)
}
JsonImportSubview.prototype.render = function () { return (
const { error } = this.props h('div', {
return (
h('div', {
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '5px 15px 0px 15px',
},
}, [
h('p', 'Used by a variety of different clients'),
h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: { style: {
margin: '20px 0px 12px 20px', display: 'flex',
fontSize: '15px', flexDirection: 'column',
alignItems: 'center',
padding: '5px 15px 0px 15px',
}, },
}), }, [
h('p', 'Used by a variety of different clients'),
h('a.warning', {
href: HELP_LINK,
target: '_blank',
}, 'File import not working? Click here!'),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
margin: '20px 0px 12px 20px',
fontSize: '15px',
},
}),
h('input.large-input.letter-spacey', {
type: 'password',
placeholder: 'Enter password',
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
style: {
width: 260,
marginTop: 12,
},
}),
h('button.primary', {
onClick: this.createNewKeychain.bind(this),
style: {
margin: 12,
},
}, 'Import'),
error ? h('span.error', error) : null,
])
)
}
h('input.large-input.letter-spacey', { onLoad (event, file) {
type: 'password', this.setState({file: file, fileContents: event.target.result})
placeholder: 'Enter password', }
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
style: {
width: 260,
marginTop: 12,
},
}),
h('button.primary', { createKeyringOnEnter (event) {
onClick: this.createNewKeychain.bind(this), if (event.key === 'Enter') {
style: { event.preventDefault()
margin: 12, this.createNewKeychain()
}, }
}, 'Import'), }
error ? h('span.error', error) : null, createNewKeychain () {
]) const { fileContents } = this.state
)
}
JsonImportSubview.prototype.onLoad = function (event, file) { if (!fileContents) {
this.setState({file: file, fileContents: event.target.result}) const message = 'You must select a file to import.'
} return this.props.displayWarning(message)
}
JsonImportSubview.prototype.createKeyringOnEnter = function (event) { const passwordInput = document.getElementById('json-password-box')
if (event.key === 'Enter') { const password = passwordInput.value
event.preventDefault()
this.createNewKeychain()
}
}
JsonImportSubview.prototype.createNewKeychain = function () { if (!password) {
const state = this.state const message = 'You must enter a password for the selected file.'
const { fileContents } = state return this.props.displayWarning(message)
}
if (!fileContents) { this.props.importNewAccount([ fileContents, password ])
const message = 'You must select a file to import.'
return this.props.dispatch(actions.displayWarning(message))
} }
}
const passwordInput = document.getElementById('json-password-box') JsonImportSubview.propTypes = {
const password = passwordInput.value error: PropTypes.string,
displayWarning: PropTypes.func,
importNewAccount: PropTypes.func,
}
if (!password) { const mapStateToProps = state => {
const message = 'You must enter a password for the selected file.' return {
return this.props.dispatch(actions.displayWarning(message)) error: state.appState.warning,
} }
}
this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) const mapDispatchToProps = dispatch => {
return {
goHome: () => dispatch(actions.goHome()),
displayWarning: warning => dispatch(actions.displayWarning(warning)),
importNewAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
}
} }
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)

22251
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -6,23 +6,24 @@
"scripts": { "scripts": {
"start": "npm run dev", "start": "npm run dev",
"dev": "gulp dev --debug", "dev": "gulp dev --debug",
"ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
"mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
"watch": "mocha watch --recursive \"test/unit/**/*.js\"", "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
"mascara": "gulp build && METAMASK_DEBUG=true node ./mascara/example/server", "mascara": "gulp build && cross-env METAMASK_DEBUG=true node ./mascara/example/server",
"dist": "npm run dist:clear && npm install && gulp dist", "dist": "npm run dist:clear && npm install && gulp dist",
"dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect", "dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect",
"test": "npm run lint && npm run test:coverage && npm run test:integration", "test": "npm run lint && npm run test:coverage && npm run test:integration",
"test:unit": "METAMASK_ENV=test mocha --exit --require babel-core/register --require test/helper.js --recursive \"test/unit/**/*.js\"", "test:unit": "cross-env METAMASK_ENV=test mocha --exit --require babel-core/register --require test/helper.js --recursive \"test/unit/**/*.js\"",
"test:single": "METAMASK_ENV=test mocha --require test/helper.js", "test:single": "cross-env METAMASK_ENV=test mocha --require test/helper.js",
"test:integration": "gulp build:scss && npm run test:flat && npm run test:mascara", "test:integration": "npm run test:integration:build && npm run test:flat && npm run test:mascara",
"test:integration:build": "gulp build:scss",
"test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload", "test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
"test:coveralls-upload": "if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi", "test:coveralls-upload": "if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi",
"test:flat": "npm run test:flat:build && karma start test/flat.conf.js", "test:flat": "npm run test:flat:build && karma start test/flat.conf.js",
"test:flat:build": "npm run test:flat:build:ui && npm run test:flat:build:tests", "test:flat:build": "npm run test:flat:build:ui && npm run test:flat:build:tests",
"test:flat:build:tests": "node test/integration/index.js", "test:flat:build:tests": "node test/integration/index.js",
"test:flat:build:states": "node development/genStates.js", "test:flat:build:states": "node development/genStates.js",
"test:flat:build:ui": "npm run test:flat:build:states && browserify ./mock-dev.js -o ./development/bundle.js", "test:flat:build:ui": "npm run test:flat:build:states && browserify ./development/mock-dev.js -o ./development/bundle.js",
"test:mascara": "npm run test:mascara:build && karma start test/mascara.conf.js", "test:mascara": "npm run test:mascara:build && karma start test/mascara.conf.js",
"test:mascara:build": "mkdir -p dist/mascara && npm run test:mascara:build:ui && npm run test:mascara:build:background && npm run test:mascara:build:tests", "test:mascara:build": "mkdir -p dist/mascara && npm run test:mascara:build:ui && npm run test:mascara:build:background && npm run test:mascara:build:tests",
"test:mascara:build:ui": "browserify mascara/test/test-ui.js -o dist/mascara/ui.js", "test:mascara:build:ui": "browserify mascara/test/test-ui.js -o dist/mascara/ui.js",
@ -106,7 +107,7 @@
"fast-levenshtein": "^2.0.6", "fast-levenshtein": "^2.0.6",
"fuse.js": "^3.2.0", "fuse.js": "^3.2.0",
"gulp": "github:gulpjs/gulp#4.0", "gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^4.0.0", "gulp-autoprefixer": "^5.0.0",
"gulp-eslint": "^4.0.0", "gulp-eslint": "^4.0.0",
"gulp-sass": "^3.1.0", "gulp-sass": "^3.1.0",
"hat": "0.0.3", "hat": "0.0.3",
@ -126,7 +127,6 @@
"loglevel": "^1.4.1", "loglevel": "^1.4.1",
"metamascara": "^2.0.0", "metamascara": "^2.0.0",
"metamask-logo": "^2.1.2", "metamask-logo": "^2.1.2",
"mississippi": "^1.2.0",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"multiplex": "^6.7.0", "multiplex": "^6.7.0",
"number-to-bn": "^1.7.0", "number-to-bn": "^1.7.0",
@ -140,7 +140,7 @@
"post-message-stream": "^3.0.0", "post-message-stream": "^3.0.0",
"promise-filter": "^1.1.0", "promise-filter": "^1.1.0",
"promise-to-callback": "^1.0.0", "promise-to-callback": "^1.0.0",
"pump": "^1.0.2", "pump": "^3.0.0",
"pumpify": "^1.3.4", "pumpify": "^1.3.4",
"qrcode-npm": "0.0.3", "qrcode-npm": "0.0.3",
"ramda": "^0.24.1", "ramda": "^0.24.1",
@ -190,10 +190,11 @@
"babelify": "^8.0.0", "babelify": "^8.0.0",
"beefy": "^2.1.5", "beefy": "^2.1.5",
"brfs": "^1.4.3", "brfs": "^1.4.3",
"browserify": "^14.4.0", "browserify": "^16.1.1",
"chai": "^4.1.0", "chai": "^4.1.0",
"compression": "^1.7.1", "compression": "^1.7.1",
"coveralls": "^3.0.0", "coveralls": "^3.0.0",
"cross-env": "^5.1.4",
"deep-freeze-strict": "^1.1.1", "deep-freeze-strict": "^1.1.1",
"del": "^3.0.0", "del": "^3.0.0",
"envify": "^4.0.0", "envify": "^4.0.0",
@ -213,7 +214,7 @@
"gulp-replace": "^0.6.1", "gulp-replace": "^0.6.1",
"gulp-sourcemaps": "^2.6.0", "gulp-sourcemaps": "^2.6.0",
"gulp-stylefmt": "^1.1.0", "gulp-stylefmt": "^1.1.0",
"gulp-stylelint": "^4.0.0", "gulp-stylelint": "^7.0.0",
"gulp-uglify": "^3.0.0", "gulp-uglify": "^3.0.0",
"gulp-uglify-es": "^1.0.1", "gulp-uglify-es": "^1.0.1",
"gulp-util": "^3.0.7", "gulp-util": "^3.0.7",
@ -245,7 +246,7 @@
"react-testutils-additions": "^15.2.0", "react-testutils-additions": "^15.2.0",
"redux-test-utils": "^0.2.2", "redux-test-utils": "^0.2.2",
"sinon": "^4.0.0", "sinon": "^4.0.0",
"stylelint-config-standard": "^17.0.0", "stylelint-config-standard": "^18.2.0",
"tape": "^4.5.1", "tape": "^4.5.1",
"testem": "^2.0.0", "testem": "^2.0.0",
"uglifyify": "^4.0.2", "uglifyify": "^4.0.2",

@ -46,7 +46,9 @@ module.exports = function(config) {
// start these browsers // start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome', 'Firefox'], browsers: process.env.browsers ?
JSON.parse(process.env.browsers)
: ['Chrome', 'Firefox'],
// Continuous Integration mode // Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits // if true, Karma captures browsers, runs the tests and exits

@ -1,4 +1,9 @@
const reactTriggerChange = require('react-trigger-change') const reactTriggerChange = require('react-trigger-change')
const {
timeout,
queryAsync,
findAsync,
} = require('../../lib/util')
QUnit.module('Add token flow') QUnit.module('Add token flow')
@ -13,74 +18,60 @@ QUnit.test('successful add token flow', (assert) => {
}) })
async function runAddTokenFlowTest (assert, done) { async function runAddTokenFlowTest (assert, done) {
const selectState = $('select') const selectState = await queryAsync($, 'select')
selectState.val('add token') selectState.val('add token')
reactTriggerChange(selectState[0]) reactTriggerChange(selectState[0])
await timeout(2000)
// Check that no tokens have been added // Check that no tokens have been added
assert.ok($('.token-list-item').length === 0, 'no tokens added') assert.ok($('.token-list-item').length === 0, 'no tokens added')
// Go to Add Token screen // Go to Add Token screen
let addTokenButton = $('button.btn-clear.wallet-view__add-token-button') let addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present') assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click() addTokenButton[0].click()
await timeout(1000)
// Verify Add Token screen // Verify Add Token screen
let addTokenWrapper = $('.add-token__wrapper') let addTokenWrapper = await queryAsync($, '.add-token__wrapper')
assert.ok(addTokenWrapper[0], 'add token wrapper renders') assert.ok(addTokenWrapper[0], 'add token wrapper renders')
let addTokenTitle = $('.add-token__title') let addTokenTitle = await queryAsync($, '.add-token__title')
assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct') assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
// Cancel Add Token // Cancel Add Token
const cancelAddTokenButton = $('button.btn-cancel.add-token__button') const cancelAddTokenButton = await queryAsync($, 'button.btn-cancel.add-token__button')
assert.ok(cancelAddTokenButton[0], 'cancel add token button present') assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
cancelAddTokenButton.click() cancelAddTokenButton.click()
await timeout(1000)
assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view') assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view')
// Return to Add Token Screen // Return to Add Token Screen
addTokenButton = $('button.btn-clear.wallet-view__add-token-button') addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present') assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click() addTokenButton[0].click()
await timeout(1000)
// Verify Add Token Screen // Verify Add Token Screen
addTokenWrapper = $('.add-token__wrapper') addTokenWrapper = await queryAsync($, '.add-token__wrapper')
addTokenTitle = $('.add-token__title') addTokenTitle = await queryAsync($, '.add-token__title')
assert.ok(addTokenWrapper[0], 'add token wrapper renders') assert.ok(addTokenWrapper[0], 'add token wrapper renders')
assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct') assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
// Search for token // Search for token
const searchInput = $('input.add-token__input') const searchInput = await queryAsync($, 'input.add-token__input')
searchInput.val('a') searchInput.val('a')
reactTriggerChange(searchInput[0]) reactTriggerChange(searchInput[0])
await timeout()
// Click token to add // Click token to add
const tokenWrapper = $('div.add-token__token-wrapper') const tokenWrapper = await queryAsync($, 'div.add-token__token-wrapper')
assert.ok(tokenWrapper[0], 'token found') assert.ok(tokenWrapper[0], 'token found')
const tokenImageProp = tokenWrapper.find('.add-token__token-icon').css('background-image') const tokenImageProp = tokenWrapper.find('.add-token__token-icon').css('background-image')
const tokenImageUrl = tokenImageProp.slice(5, -2) const tokenImageUrl = tokenImageProp.slice(5, -2)
tokenWrapper[0].click() tokenWrapper[0].click()
await timeout()
// Click Next button // Click Next button
let nextButton = $('button.btn-clear.add-token__button') let nextButton = await queryAsync($, 'button.btn-clear.add-token__button')
assert.equal(nextButton[0].textContent, 'Next', 'next button rendered') assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
nextButton[0].click() nextButton[0].click()
await timeout()
// Confirm Add token // Confirm Add token
assert.equal( assert.equal(
$('.add-token__description')[0].textContent, $('.add-token__description')[0].textContent,
@ -90,47 +81,35 @@ async function runAddTokenFlowTest (assert, done) {
assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found') assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
$('button.btn-clear.add-token__button')[0].click() $('button.btn-clear.add-token__button')[0].click()
await timeout(2000)
// Verify added token image // Verify added token image
let heroBalance = $('.hero-balance') let heroBalance = await queryAsync($, '.hero-balance')
assert.ok(heroBalance, 'rendered hero balance') assert.ok(heroBalance, 'rendered hero balance')
assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added') assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
// Return to Add Token Screen // Return to Add Token Screen
addTokenButton = $('button.btn-clear.wallet-view__add-token-button') addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present') assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click() addTokenButton[0].click()
await timeout(1000) const addCustom = await queryAsync($, '.add-token__add-custom')
const addCustom = $('.add-token__add-custom')
assert.ok(addCustom[0], 'add custom token button present') assert.ok(addCustom[0], 'add custom token button present')
addCustom[0].click() addCustom[0].click()
await timeout()
// Input token contract address // Input token contract address
const customInput = $('input.add-token__add-custom-input') const customInput = await queryAsync($, 'input.add-token__add-custom-input')
customInput.val('0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c') customInput.val('0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c')
reactTriggerChange(customInput[0]) reactTriggerChange(customInput[0])
await timeout(1000)
// Click Next button // Click Next button
nextButton = $('button.btn-clear.add-token__button') nextButton = await queryAsync($, 'button.btn-clear.add-token__button')
assert.equal(nextButton[0].textContent, 'Next', 'next button rendered') assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
nextButton[0].click() nextButton[0].click()
await timeout(1000)
// Verify symbol length error since contract address won't return symbol // Verify symbol length error since contract address won't return symbol
const errorMessage = $('.add-token__add-custom-error-message') const errorMessage = await queryAsync($, '.add-token__add-custom-error-message')
assert.ok(errorMessage[0], 'error rendered') assert.ok(errorMessage[0], 'error rendered')
$('button.btn-cancel.add-token__button')[0].click() $('button.btn-cancel.add-token__button')[0].click()
await timeout(2000)
// // Confirm Add token // // Confirm Add token
// assert.equal( // assert.equal(
// $('.add-token__description')[0].textContent, // $('.add-token__description')[0].textContent,
@ -141,13 +120,7 @@ async function runAddTokenFlowTest (assert, done) {
// $('button.btn-clear.add-token__button')[0].click() // $('button.btn-clear.add-token__button')[0].click()
// // Verify added token image // // Verify added token image
// heroBalance = $('.hero-balance') // heroBalance = await queryAsync($, '.hero-balance')
// assert.ok(heroBalance, 'rendered hero balance') // assert.ok(heroBalance, 'rendered hero balance')
// assert.ok(heroBalance.find('.identicon')[0], 'token added') // assert.ok(heroBalance.find('.identicon')[0], 'token added')
} }
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

@ -1,5 +1,9 @@
const reactTriggerChange = require('react-trigger-change') const reactTriggerChange = require('react-trigger-change')
const {
timeout,
queryAsync,
findAsync,
} = require('../../lib/util')
const PASSWORD = 'password123' const PASSWORD = 'password123'
QUnit.module('confirm sig requests') QUnit.module('confirm sig requests')
@ -13,55 +17,41 @@ QUnit.test('successful confirmation of sig requests', (assert) => {
}) })
async function runConfirmSigRequestsTest(assert, done) { async function runConfirmSigRequestsTest(assert, done) {
let selectState = $('select') let selectState = await queryAsync($, 'select')
selectState.val('confirm sig requests') selectState.val('confirm sig requests')
reactTriggerChange(selectState[0]) reactTriggerChange(selectState[0])
await timeout(2000) let confirmSigHeadline = await queryAsync($, '.request-signature__headline')
let confirmSigHeadline = $('.request-signature__headline')
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested') assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
let confirmSigRowValue = $('.request-signature__row-value') let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/)) assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
let confirmSigSignButton = $('.request-signature__footer__sign-button') let confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
confirmSigSignButton[0].click() confirmSigSignButton[0].click()
await timeout(2000) confirmSigHeadline = await queryAsync($, '.request-signature__headline')
confirmSigHeadline = $('.request-signature__headline')
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested') assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
let confirmSigMessage = $('.request-signature__notice') let confirmSigMessage = await queryAsync($, '.request-signature__notice')
assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/)) assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
confirmSigRowValue = $('.request-signature__row-value') confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0') assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
confirmSigSignButton = $('.request-signature__footer__sign-button') confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
confirmSigSignButton[0].click() confirmSigSignButton[0].click()
await timeout(2000) confirmSigHeadline = await queryAsync($, '.request-signature__headline')
confirmSigHeadline = $('.request-signature__headline')
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested') assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
confirmSigRowValue = $('.request-signature__row-value') confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!') assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
assert.equal(confirmSigRowValue[1].textContent, '1337') assert.equal(confirmSigRowValue[1].textContent, '1337')
confirmSigSignButton = $('.request-signature__footer__sign-button') confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
confirmSigSignButton[0].click() confirmSigSignButton[0].click()
await timeout(2000) const txView = await queryAsync($, '.tx-view')
const txView = $('.tx-view')
assert.ok(txView[0], 'Should return to the account details screen after confirming') assert.ok(txView[0], 'Should return to the account details screen after confirming')
} }
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

@ -1,6 +1,10 @@
const reactTriggerChange = require('react-trigger-change') const reactTriggerChange = require('react-trigger-change')
const PASSWORD = 'password123' const PASSWORD = 'password123'
const runMascaraFirstTimeTest = require('./mascara-first-time') const runMascaraFirstTimeTest = require('./mascara-first-time')
const {
timeout,
findAsync,
} = require('../../lib/util')
QUnit.module('first time usage') QUnit.module('first time usage')
@ -21,20 +25,19 @@ async function runFirstTimeUsageTest(assert, done) {
selectState.val('first time') selectState.val('first time')
reactTriggerChange(selectState[0]) reactTriggerChange(selectState[0])
await timeout(2000)
const app = $('#app-content') const app = $('#app-content')
// recurse notices // recurse notices
while (true) { while (true) {
const button = app.find('button') const button = await findAsync(app, 'button')
if (button.html() === 'Accept') { if (button.html() === 'Accept') {
// still notices to accept // still notices to accept
const termsPage = app.find('.markdown')[0] const termsPageRaw = await findAsync(app, '.markdown')
const termsPage = (await findAsync(app, '.markdown'))[0]
console.log('termsPageRaw', termsPageRaw)
termsPage.scrollTop = termsPage.scrollHeight termsPage.scrollTop = termsPage.scrollHeight
await timeout()
console.log('Clearing notice') console.log('Clearing notice')
button.click() button.click()
await timeout()
} else { } else {
// exit loop // exit loop
console.log('No more notices...') console.log('No more notices...')
@ -42,97 +45,68 @@ async function runFirstTimeUsageTest(assert, done) {
} }
} }
await timeout()
// Scroll through terms // Scroll through terms
const title = app.find('h1')[0] const title = (await findAsync(app, 'h1'))[0]
assert.equal(title.textContent, 'MetaMask', 'title screen') assert.equal(title.textContent, 'MetaMask', 'title screen')
// enter password // enter password
const pwBox = app.find('#password-box')[0] const pwBox = (await findAsync(app, '#password-box'))[0]
const confBox = app.find('#password-box-confirm')[0] const confBox = (await findAsync(app, '#password-box-confirm'))[0]
pwBox.value = PASSWORD pwBox.value = PASSWORD
confBox.value = PASSWORD confBox.value = PASSWORD
await timeout()
// create vault // create vault
const createButton = app.find('button.primary')[0] const createButton = (await findAsync(app, 'button.primary'))[0]
createButton.click() createButton.click()
await timeout(3000) await timeout()
const created = (await findAsync(app, 'h3'))[0]
const created = app.find('h3')[0]
assert.equal(created.textContent, 'Vault Created', 'Vault created screen') assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
// Agree button // Agree button
const button = app.find('button')[0] const button = (await findAsync(app, 'button'))[0]
assert.ok(button, 'button present') assert.ok(button, 'button present')
button.click() button.click()
await timeout(1000) const detail = (await findAsync(app, '.account-detail-section'))[0]
const detail = app.find('.account-detail-section')[0]
assert.ok(detail, 'Account detail section loaded.') assert.ok(detail, 'Account detail section loaded.')
const sandwich = app.find('.sandwich-expando')[0] const sandwich = (await findAsync(app, '.sandwich-expando'))[0]
sandwich.click() sandwich.click()
await timeout() const menu = (await findAsync(app, '.menu-droppo'))[0]
const menu = app.find('.menu-droppo')[0]
const children = menu.children const children = menu.children
const logout = children[2] const logout = children[2]
assert.ok(logout, 'Lock menu item found') assert.ok(logout, 'Lock menu item found')
logout.click() logout.click()
await timeout(1000) const pwBox2 = (await findAsync(app, '#password-box'))[0]
const pwBox2 = app.find('#password-box')[0]
pwBox2.value = PASSWORD pwBox2.value = PASSWORD
const createButton2 = app.find('button.primary')[0] const createButton2 = (await findAsync(app, 'button.primary'))[0]
createButton2.click() createButton2.click()
await timeout(1000) const detail2 = (await findAsync(app, '.account-detail-section'))[0]
const detail2 = app.find('.account-detail-section')[0]
assert.ok(detail2, 'Account detail section loaded again.') assert.ok(detail2, 'Account detail section loaded again.')
await timeout()
// open account settings dropdown // open account settings dropdown
const qrButton = app.find('.fa.fa-ellipsis-h')[0] const qrButton = (await findAsync(app, '.fa.fa-ellipsis-h'))[0]
qrButton.click() qrButton.click()
await timeout(1000)
// qr code item // qr code item
const qrButton2 = app.find('.dropdown-menu-item')[1] const qrButton2 = (await findAsync(app, '.dropdown-menu-item'))[1]
qrButton2.click() qrButton2.click()
await timeout(1000) const qrHeader = (await findAsync(app, '.qr-header'))[0]
const qrContainer = (await findAsync(app, '#qr-container'))[0]
const qrHeader = app.find('.qr-header')[0]
const qrContainer = app.find('#qr-container')[0]
assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.') assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
assert.ok(qrContainer, 'QR Container found') assert.ok(qrContainer, 'QR Container found')
await timeout() const networkMenu = (await findAsync(app, '.network-indicator'))[0]
const networkMenu = app.find('.network-indicator')[0]
networkMenu.click() networkMenu.click()
await timeout() const networkMenu2 = (await findAsync(app, '.network-indicator'))[0]
const networkMenu2 = app.find('.network-indicator')[0]
const children2 = networkMenu2.children const children2 = networkMenu2.children
children2.length[3] children2.length[3]
assert.ok(children2, 'All network options present') assert.ok(children2, 'All network options present')
} }
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

@ -1,119 +1,95 @@
const PASSWORD = 'password123' const PASSWORD = 'password123'
const reactTriggerChange = require('react-trigger-change') const reactTriggerChange = require('react-trigger-change')
const {
timeout,
findAsync,
queryAsync,
} = require('../../lib/util')
async function runFirstTimeUsageTest (assert, done) { async function runFirstTimeUsageTest (assert, done) {
await timeout(4000) await timeout(4000)
const app = $('#app-content') const app = await queryAsync($, '#app-content')
await skipNotices(app) await skipNotices(app)
await timeout()
// Scroll through terms // Scroll through terms
const title = app.find('.create-password__title').text() const title = (await findAsync(app, '.create-password__title')).text()
assert.equal(title, 'Create Password', 'create password screen') assert.equal(title, 'Create Password', 'create password screen')
// enter password // enter password
const pwBox = app.find('.first-time-flow__input')[0] const pwBox = (await findAsync(app, '.first-time-flow__input'))[0]
const confBox = app.find('.first-time-flow__input')[1] const confBox = (await findAsync(app, '.first-time-flow__input'))[1]
pwBox.value = PASSWORD pwBox.value = PASSWORD
confBox.value = PASSWORD confBox.value = PASSWORD
reactTriggerChange(pwBox) reactTriggerChange(pwBox)
reactTriggerChange(confBox) reactTriggerChange(confBox)
await timeout()
// Create Password // Create Password
const createButton = app.find('button.first-time-flow__button')[0] const createButton = (await findAsync(app, 'button.first-time-flow__button'))[0]
createButton.click() createButton.click()
await timeout(3000) const created = (await findAsync(app, '.unique-image__title'))[0]
const created = app.find('.unique-image__title')[0]
assert.equal(created.textContent, 'Your unique account image', 'unique image screen') assert.equal(created.textContent, 'Your unique account image', 'unique image screen')
// Agree button // Agree button
let button = app.find('button')[0] let button = (await findAsync(app, 'button'))[0]
assert.ok(button, 'button present') assert.ok(button, 'button present')
button.click() button.click()
await timeout(1000)
await skipNotices(app) await skipNotices(app)
// secret backup phrase // secret backup phrase
const seedTitle = app.find('.backup-phrase__title')[0] const seedTitle = (await findAsync(app, '.backup-phrase__title'))[0]
assert.equal(seedTitle.textContent, 'Secret Backup Phrase', 'seed phrase screen') assert.equal(seedTitle.textContent, 'Secret Backup Phrase', 'seed phrase screen')
app.find('.backup-phrase__reveal-button').click() ;(await findAsync(app, '.backup-phrase__reveal-button')).click()
const seedPhrase = (await findAsync(app, '.backup-phrase__secret-words')).text().split(' ')
await timeout(1000) ;(await findAsync(app, '.first-time-flow__button')).click()
const seedPhrase = app.find('.backup-phrase__secret-words').text().split(' ')
app.find('.first-time-flow__button').click()
await timeout()
const selectPhrase = text => { const selectPhrase = text => {
const option = $('.backup-phrase__confirm-seed-option') const option = $('.backup-phrase__confirm-seed-option')
.filter((i, d) => d.textContent === text)[0] .filter((i, d) => d.textContent === text)[0]
$(option).click() $(option).click()
} }
await timeout(1000)
seedPhrase.forEach(sp => selectPhrase(sp)) seedPhrase.forEach(sp => selectPhrase(sp))
app.find('.first-time-flow__button').click() ;(await findAsync(app, '.first-time-flow__button')).click()
await timeout(1000)
// Deposit Ether Screen // Deposit Ether Screen
const buyEthTitle = app.find('.buy-ether__title')[0] const buyEthTitle = (await findAsync(app, '.buy-ether__title'))[0]
assert.equal(buyEthTitle.textContent, 'Deposit Ether', 'deposit ether screen') assert.equal(buyEthTitle.textContent, 'Deposit Ether', 'deposit ether screen')
app.find('.buy-ether__do-it-later').click() ;(await findAsync(app, '.buy-ether__do-it-later')).click()
await timeout(1000)
const menu = app.find('.account-menu__icon')[0] const menu = (await findAsync(app, '.account-menu__icon'))[0]
menu.click() menu.click()
await timeout() const lock = (await findAsync(app, '.account-menu__logout-button'))[0]
const lock = app.find('.account-menu__logout-button')[0]
assert.ok(lock, 'Lock menu item found') assert.ok(lock, 'Lock menu item found')
lock.click() lock.click()
await timeout(1000) const pwBox2 = (await findAsync(app, '#password-box'))[0]
const pwBox2 = app.find('#password-box')[0]
pwBox2.value = PASSWORD pwBox2.value = PASSWORD
const createButton2 = app.find('button.primary')[0] const createButton2 = (await findAsync(app, 'button.primary'))[0]
createButton2.click() createButton2.click()
await timeout(1000) const detail2 = (await findAsync(app, '.wallet-view'))[0]
const detail2 = app.find('.wallet-view')[0]
assert.ok(detail2, 'Account detail section loaded again.') assert.ok(detail2, 'Account detail section loaded again.')
await timeout()
// open account settings dropdown // open account settings dropdown
const qrButton = app.find('.wallet-view__details-button')[0] const qrButton = (await findAsync(app, '.wallet-view__details-button'))[0]
qrButton.click() qrButton.click()
await timeout(1000) const qrHeader = (await findAsync(app, '.editable-label__value'))[0]
const qrContainer = (await findAsync(app, '.qr-wrapper'))[0]
const qrHeader = app.find('.editable-label__value')[0]
const qrContainer = app.find('.qr-wrapper')[0]
assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.') assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
assert.ok(qrContainer, 'QR Container found') assert.ok(qrContainer, 'QR Container found')
await timeout() const networkMenu = (await findAsync(app, '.network-component'))[0]
const networkMenu = app.find('.network-component')[0]
networkMenu.click() networkMenu.click()
await timeout() const networkMenu2 = (await findAsync(app, '.network-indicator'))[0]
const networkMenu2 = app.find('.network-indicator')[0]
const children2 = networkMenu2.children const children2 = networkMenu2.children
children2.length[3] children2.length[3]
assert.ok(children2, 'All network options present') assert.ok(children2, 'All network options present')
@ -121,18 +97,12 @@ async function runFirstTimeUsageTest (assert, done) {
module.exports = runFirstTimeUsageTest module.exports = runFirstTimeUsageTest
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}
async function skipNotices (app) { async function skipNotices (app) {
while (true) { while (true) {
const button = app.find('button') const button = await findAsync(app, 'button')
if (button && button.html() === 'Accept') { if (button && button.html() === 'Accept') {
// still notices to accept // still notices to accept
const termsPage = app.find('.markdown')[0] const termsPage = (await findAsync(app, '.markdown'))[0]
if (!termsPage) { if (!termsPage) {
break break
} }

@ -1,4 +1,9 @@
const reactTriggerChange = require('react-trigger-change') const reactTriggerChange = require('react-trigger-change')
const {
timeout,
queryAsync,
findAsync,
} = require('../../lib/util')
const PASSWORD = 'password123' const PASSWORD = 'password123'
@ -18,83 +23,65 @@ global.ethQuery = {
async function runSendFlowTest(assert, done) { async function runSendFlowTest(assert, done) {
console.log('*** start runSendFlowTest') console.log('*** start runSendFlowTest')
const selectState = $('select') const selectState = await queryAsync($, 'select')
selectState.val('send new ui') selectState.val('send new ui')
reactTriggerChange(selectState[0]) reactTriggerChange(selectState[0])
await timeout(2000) const sendScreenButton = await queryAsync($, 'button.btn-clear.hero-balance-button')
const sendScreenButton = $('button.btn-clear.hero-balance-button')
assert.ok(sendScreenButton[1], 'send screen button present') assert.ok(sendScreenButton[1], 'send screen button present')
sendScreenButton[1].click() sendScreenButton[1].click()
await timeout(1000) const sendTitle = await queryAsync($, '.page-container__title')
const sendTitle = $('.page-container__title')
assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct') assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct')
const sendCopy = $('.page-container__subtitle') const sendCopy = await queryAsync($, '.page-container__subtitle')
assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy') assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy')
const sendFromField = $('.send-v2__form-field') const sendFromField = await queryAsync($, '.send-v2__form-field')
assert.ok(sendFromField[0], 'send screen has a from field') assert.ok(sendFromField[0], 'send screen has a from field')
let sendFromFieldItemAddress = $('.account-list-item__account-name') let sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name')
assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 4', 'send from field shows correct account name') assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 4', 'send from field shows correct account name')
const sendFromFieldItem = $('.account-list-item') const sendFromFieldItem = await queryAsync($, '.account-list-item')
sendFromFieldItem[0].click() sendFromFieldItem[0].click()
await timeout() // this seems to fail if the firefox window is not in focus...
const sendFromDropdownList = await queryAsync($, '.send-v2__from-dropdown__list')
const sendFromDropdownList = $('.send-v2__from-dropdown__list')
assert.equal(sendFromDropdownList.children().length, 4, 'send from dropdown shows all accounts') assert.equal(sendFromDropdownList.children().length, 4, 'send from dropdown shows all accounts')
console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromDropdownList.children()[1]`, sendFromDropdownList.children()[1]);
sendFromDropdownList.children()[1].click() sendFromDropdownList.children()[1].click()
await timeout() sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name')
sendFromFieldItemAddress = $('.account-list-item__account-name')
console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromFieldItemAddress[0]`, sendFromFieldItemAddress[0]);
assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name') assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name')
let sendToFieldInput = $('.send-v2__to-autocomplete__input') let sendToFieldInput = await queryAsync($, '.send-v2__to-autocomplete__input')
sendToFieldInput[0].focus() sendToFieldInput[0].focus()
await timeout() const sendToDropdownList = await queryAsync($, '.send-v2__from-dropdown__list')
const sendToDropdownList = $('.send-v2__from-dropdown__list')
assert.equal(sendToDropdownList.children().length, 5, 'send to dropdown shows all accounts and address book accounts') assert.equal(sendToDropdownList.children().length, 5, 'send to dropdown shows all accounts and address book accounts')
sendToDropdownList.children()[2].click() sendToDropdownList.children()[2].click()
await timeout()
const sendToAccountAddress = sendToFieldInput.val() const sendToAccountAddress = sendToFieldInput.val()
assert.equal(sendToAccountAddress, '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', 'send to dropdown selects the correct address') assert.equal(sendToAccountAddress, '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', 'send to dropdown selects the correct address')
const sendAmountField = $('.send-v2__form-row:eq(2)') const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(2)')
sendAmountField.find('.currency-display')[0].click() sendAmountField.find('.currency-display')[0].click()
await timeout() const sendAmountFieldInput = await findAsync(sendAmountField, 'input:text')
const sendAmountFieldInput = sendAmountField.find('input:text')
sendAmountFieldInput.val('5.1') sendAmountFieldInput.val('5.1')
reactTriggerChange(sendAmountField.find('input')[0]) reactTriggerChange(sendAmountField.find('input')[0])
await timeout() let errorMessage = await queryAsync($, '.send-v2__error')
let errorMessage = $('.send-v2__error')
assert.equal(errorMessage[0].textContent, 'Insufficient funds.', 'send should render an insufficient fund error message') assert.equal(errorMessage[0].textContent, 'Insufficient funds.', 'send should render an insufficient fund error message')
sendAmountFieldInput.val('2.0') sendAmountFieldInput.val('2.0')
reactTriggerChange(sendAmountFieldInput[0]) reactTriggerChange(sendAmountFieldInput[0])
await timeout() await timeout()
errorMessage = $('.send-v2__error') errorMessage = $('.send-v2__error')
assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected') assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected')
const sendGasField = $('.send-v2__gas-fee-display') const sendGasField = await queryAsync($, '.send-v2__gas-fee-display')
assert.equal( assert.equal(
sendGasField.find('.currency-display__input-wrapper > input').val(), sendGasField.find('.currency-display__input-wrapper > input').val(),
'0.000198', '0.000198',
@ -106,120 +93,86 @@ async function runSendFlowTest(assert, done) {
'send gas field should show estimated gas total converted to USD' 'send gas field should show estimated gas total converted to USD'
) )
const sendGasOpenCustomizeModalButton = $('.send-v2__sliders-icon-container' const sendGasOpenCustomizeModalButton = await queryAsync($, '.send-v2__sliders-icon-container')
)
sendGasOpenCustomizeModalButton[0].click() sendGasOpenCustomizeModalButton[0].click()
await timeout(1000) const customizeGasModal = await queryAsync($, '.send-v2__customize-gas')
const customizeGasModal = $('.send-v2__customize-gas')
assert.ok(customizeGasModal[0], 'should render the customize gas modal') assert.ok(customizeGasModal[0], 'should render the customize gas modal')
const customizeGasPriceInput = $('.send-v2__gas-modal-card').first().find('input') const customizeGasPriceInput = (await queryAsync($, '.send-v2__gas-modal-card')).first().find('input')
customizeGasPriceInput.val(50) customizeGasPriceInput.val(50)
reactTriggerChange(customizeGasPriceInput[0]) reactTriggerChange(customizeGasPriceInput[0])
const customizeGasLimitInput = $('.send-v2__gas-modal-card').last().find('input') const customizeGasLimitInput = (await queryAsync($, '.send-v2__gas-modal-card')).last().find('input')
customizeGasLimitInput.val(60000) customizeGasLimitInput.val(60000)
reactTriggerChange(customizeGasLimitInput[0]) reactTriggerChange(customizeGasLimitInput[0])
await timeout() const customizeGasSaveButton = await queryAsync($, '.send-v2__customize-gas__save')
const customizeGasSaveButton = $('.send-v2__customize-gas__save')
customizeGasSaveButton[0].click() customizeGasSaveButton[0].click()
await timeout()
assert.equal( assert.equal(
sendGasField.find('.currency-display__input-wrapper > input').val(), (await findAsync(sendGasField, '.currency-display__input-wrapper > input')).val(),
'0.003', '0.003',
'send gas field should show customized gas total' 'send gas field should show customized gas total'
) )
assert.equal( assert.equal(
sendGasField.find('.currency-display__converted-value')[0].textContent, (await findAsync(sendGasField, '.currency-display__converted-value'))[0].textContent,
'3.60 USD', '3.60 USD',
'send gas field should show customized gas total converted to USD' 'send gas field should show customized gas total converted to USD'
) )
const sendButton = $('button.btn-clear.page-container__footer-button') const sendButton = await queryAsync($, 'button.btn-clear.page-container__footer-button')
assert.equal(sendButton[0].textContent, 'Next', 'next button rendered') assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
sendButton[0].click() sendButton[0].click()
await timeout()
await timeout(2000)
selectState.val('send edit') selectState.val('send edit')
reactTriggerChange(selectState[0]) reactTriggerChange(selectState[0])
await timeout(2000) const confirmFromName = (await queryAsync($, '.confirm-screen-account-name')).first()
const confirmFromName = $('.confirm-screen-account-name').first()
assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name') assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name')
const confirmToName = $('.confirm-screen-account-name').last() const confirmToName = (await queryAsync($, '.confirm-screen-account-name')).last()
assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name') assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
const confirmScreenRows = $('.confirm-screen-rows') const confirmScreenRows = await queryAsync($, '.confirm-screen-rows')
const confirmScreenGas = confirmScreenRows.find('.confirm-screen-row-info')[2] const confirmScreenGas = confirmScreenRows.find('.confirm-screen-row-info')[2]
assert.equal(confirmScreenGas.textContent, '3.6 USD', 'confirm screen should show correct gas') assert.equal(confirmScreenGas.textContent, '3.6 USD', 'confirm screen should show correct gas')
const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[3] const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[3]
assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total') assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total')
const confirmScreenBackButton = $('.confirm-screen-back-button') const confirmScreenBackButton = await queryAsync($, '.confirm-screen-back-button')
confirmScreenBackButton[0].click() confirmScreenBackButton[0].click()
await timeout(1000) const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item')
const sendFromFieldItemInEdit = $('.account-list-item')
sendFromFieldItemInEdit[0].click() sendFromFieldItemInEdit[0].click()
await timeout() const sendFromDropdownListInEdit = await queryAsync($, '.send-v2__from-dropdown__list')
const sendFromDropdownListInEdit = $('.send-v2__from-dropdown__list')
sendFromDropdownListInEdit.children()[2].click() sendFromDropdownListInEdit.children()[2].click()
await timeout() const sendToFieldInputInEdit = await queryAsync($, '.send-v2__to-autocomplete__input')
const sendToFieldInputInEdit = $('.send-v2__to-autocomplete__input')
sendToFieldInputInEdit[0].focus() sendToFieldInputInEdit[0].focus()
sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb') sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb')
await timeout() const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(2)')
const sendAmountFieldInEdit = $('.send-v2__form-row:eq(2)')
sendAmountFieldInEdit.find('.currency-display')[0].click() sendAmountFieldInEdit.find('.currency-display')[0].click()
await timeout()
const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('input:text') const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('input:text')
sendAmountFieldInputInEdit.val('1.0') sendAmountFieldInputInEdit.val('1.0')
reactTriggerChange(sendAmountFieldInputInEdit[0]) reactTriggerChange(sendAmountFieldInputInEdit[0])
await timeout() const sendButtonInEdit = await queryAsync($, '.btn-clear.page-container__footer-button')
const sendButtonInEdit = $('.btn-clear.page-container__footer-button')
assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered') assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
sendButtonInEdit[0].click() sendButtonInEdit[0].click()
await timeout()
// TODO: Need a way to mock background so that we can test correct transition from editing to confirm // TODO: Need a way to mock background so that we can test correct transition from editing to confirm
selectState.val('confirm new ui') selectState.val('confirm new ui')
reactTriggerChange(selectState[0]) reactTriggerChange(selectState[0])
const confirmScreenConfirmButton = await queryAsync($, '.confirm-screen-confirm-button')
await timeout(2000)
const confirmScreenConfirmButton = $('.confirm-screen-confirm-button')
console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]); console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
confirmScreenConfirmButton[0].click() confirmScreenConfirmButton[0].click()
await timeout(2000) const txView = await queryAsync($, '.tx-view')
const txView = $('.tx-view')
console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]); console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]);
assert.ok(txView[0], 'Should return to the account details screen after confirming') assert.ok(txView[0], 'Should return to the account details screen after confirming')
} }
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

@ -0,0 +1,53 @@
module.exports = {
timeout,
queryAsync,
findAsync,
pollUntilTruthy,
}
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}
async function findAsync(container, selector, opts) {
try {
return await pollUntilTruthy(() => {
const result = container.find(selector)
if (result.length > 0) return result
}, opts)
} catch (err) {
throw new Error(`Failed to find element within interval: "${selector}"`)
}
}
async function queryAsync(jQuery, selector, opts) {
try {
return await pollUntilTruthy(() => {
const result = jQuery(selector)
if (result.length > 0) return result
}, opts)
} catch (err) {
throw new Error(`Failed to find element within interval: "${selector}"`)
}
}
async function pollUntilTruthy(fn, opts = {}){
const pollingInterval = opts.pollingInterval || 100
const timeoutInterval = opts.timeoutInterval || 5000
const start = Date.now()
let result
while (!result) {
// check if timedout
const now = Date.now()
if ((now - start) > timeoutInterval) {
throw new Error(`pollUntilTruthy - failed to return truthy within interval`)
}
// check for result
result = fn()
// run again after timeout
await timeout(pollingInterval, timeoutInterval)
}
return result
}

@ -15,11 +15,8 @@ describe('# Network Controller', function () {
beforeEach(function () { beforeEach(function () {
nock('https://api.infura.io')
.get('/*/')
.reply(200)
nock('https://rinkeby.infura.io') nock('https://rinkeby.infura.io')
.persist()
.post('/metamask') .post('/metamask')
.reply(200) .reply(200)
@ -29,6 +26,11 @@ describe('# Network Controller', function () {
networkController.initializeProvider(networkControllerProviderInit, provider) networkController.initializeProvider(networkControllerProviderInit, provider)
}) })
afterEach(function () {
nock.cleanAll()
})
describe('network', function () { describe('network', function () {
describe('#provider', function () { describe('#provider', function () {
it('provider should be updatable without reassignment', function () { it('provider should be updatable without reassignment', function () {

@ -2,6 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const t = require('../../../i18n')
import Select from 'react-select' import Select from 'react-select'
// Subviews // Subviews
@ -9,8 +10,8 @@ const JsonImportView = require('./json.js')
const PrivateKeyImportView = require('./private-key.js') const PrivateKeyImportView = require('./private-key.js')
const menuItems = [ const menuItems = [
'Private Key', t('privateKey'),
'JSON File', t('jsonFile'),
] ]
module.exports = connect(mapStateToProps)(AccountImportSubview) module.exports = connect(mapStateToProps)(AccountImportSubview)
@ -85,9 +86,9 @@ AccountImportSubview.prototype.renderImportView = function () {
const current = type || menuItems[0] const current = type || menuItems[0]
switch (current) { switch (current) {
case 'Private Key': case t('privateKey'):
return h(PrivateKeyImportView) return h(PrivateKeyImportView)
case 'JSON File': case t('jsonFile'):
return h(JsonImportView) return h(JsonImportView)
default: default:
return h(JsonImportView) return h(JsonImportView)

@ -1,106 +1,131 @@
const inherits = require('util').inherits
const Component = require('react').Component const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript') const h = require('react-hyperscript')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const FileInput = require('react-simple-file-input').default const FileInput = require('react-simple-file-input').default
const t = require('../../../i18n')
const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
module.exports = connect(mapStateToProps)(JsonImportSubview) class JsonImportSubview extends Component {
constructor (props) {
super(props)
function mapStateToProps (state) { this.state = {
return { file: null,
error: state.appState.warning, fileContents: '',
}
} }
}
inherits(JsonImportSubview, Component) render () {
function JsonImportSubview () { const { error } = this.props
Component.call(this)
} return (
h('div.new-account-import-form__json', [
h('p', t('usedByClients')),
h('a.warning', {
href: HELP_LINK,
target: '_blank',
}, t('fileImportFail')),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
margin: '20px 0px 12px 34%',
fontSize: '15px',
display: 'flex',
justifyContent: 'center',
},
}),
h('input.new-account-import-form__input-password', {
type: 'password',
placeholder: t('enterPassword'),
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
}),
h('div.new-account-create-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', {
onClick: () => this.props.goHome(),
}, [
t('cancel'),
]),
h('button.new-account-create-form__button-create', {
onClick: () => this.createNewKeychain(),
}, [
t('import'),
]),
JsonImportSubview.prototype.render = function () {
const { error } = this.props
return (
h('div.new-account-import-form__json', [
h('p', 'Used by a variety of different clients'),
h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
margin: '20px 0px 12px 34%',
fontSize: '15px',
display: 'flex',
justifyContent: 'center',
},
}),
h('input.new-account-import-form__input-password', {
type: 'password',
placeholder: 'Enter password',
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
}),
h('div.new-account-create-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', {
onClick: () => this.props.goHome(),
}, [
'CANCEL',
]), ]),
h('button.new-account-create-form__button-create', { error ? h('span.error', error) : null,
onClick: () => this.createNewKeychain.bind(this), ])
}, [ )
'IMPORT', }
]),
]), onLoad (event, file) {
this.setState({file: file, fileContents: event.target.result})
}
error ? h('span.error', error) : null, createKeyringOnEnter (event) {
]) if (event.key === 'Enter') {
) event.preventDefault()
} this.createNewKeychain()
}
}
JsonImportSubview.prototype.onLoad = function (event, file) { createNewKeychain () {
this.setState({file: file, fileContents: event.target.result}) const state = this.state
}
JsonImportSubview.prototype.createKeyringOnEnter = function (event) { if (!state) {
if (event.key === 'Enter') { const message = 'You must select a valid file to import.'
event.preventDefault() return this.props.displayWarning(message)
this.createNewKeychain() }
}
}
JsonImportSubview.prototype.createNewKeychain = function () { const { fileContents } = state
const state = this.state
if (!state) { if (!fileContents) {
const message = 'You must select a valid file to import.' const message = t('needImportFile')
return this.props.dispatch(actions.displayWarning(message)) return this.props.displayWarning(message)
} }
const passwordInput = document.getElementById('json-password-box')
const password = passwordInput.value
const { fileContents } = state if (!password) {
const message = t('needImportPassword')
return this.props.displayWarning(message)
}
if (!fileContents) { this.props.importNewJsonAccount([ fileContents, password ])
const message = 'You must select a file to import.'
return this.props.dispatch(actions.displayWarning(message))
} }
}
const passwordInput = document.getElementById('json-password-box') JsonImportSubview.propTypes = {
const password = passwordInput.value error: PropTypes.string,
goHome: PropTypes.func,
displayWarning: PropTypes.func,
importNewJsonAccount: PropTypes.func,
}
if (!password) { const mapStateToProps = state => {
const message = 'You must enter a password for the selected file.' return {
return this.props.dispatch(actions.displayWarning(message)) error: state.appState.warning,
} }
}
this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) const mapDispatchToProps = dispatch => {
return {
goHome: () => dispatch(actions.goHome()),
displayWarning: warning => dispatch(actions.displayWarning(warning)),
importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
}
} }
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)

@ -3,6 +3,7 @@ const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const t = require('../../../i18n')
module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView) module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
@ -33,9 +34,9 @@ PrivateKeyImportView.prototype.render = function () {
return ( return (
h('div.new-account-import-form__private-key', [ h('div.new-account-import-form__private-key', [
h('div.new-account-import-form__private-key-password-container', [ h('span.new-account-create-form__instruction', t('pastePrivateKey')),
h('span.new-account-import-form__instruction', 'Paste your private key string here:'), h('div.new-account-import-form__private-key-password-container', [
h('input.new-account-import-form__input-password', { h('input.new-account-import-form__input-password', {
type: 'password', type: 'password',
@ -47,16 +48,16 @@ PrivateKeyImportView.prototype.render = function () {
h('div.new-account-import-form__buttons', {}, [ h('div.new-account-import-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', { h('button.new-account-create-form__button-cancel.allcaps', {
onClick: () => goHome(), onClick: () => goHome(),
}, [ }, [
'CANCEL', t('cancel'),
]), ]),
h('button.new-account-create-form__button-create', { h('button.new-account-create-form__button-create.allcaps', {
onClick: () => this.createNewKeychain(), onClick: () => this.createNewKeychain(),
}, [ }, [
'IMPORT', t('import'),
]), ]),
]), ]),

@ -2,6 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const t = require('../../../i18n')
module.exports = connect(mapStateToProps)(SeedImportSubview) module.exports = connect(mapStateToProps)(SeedImportSubview)
@ -20,11 +21,10 @@ SeedImportSubview.prototype.render = function () {
style: { style: {
}, },
}, [ }, [
`Paste your seed phrase here!`, t('pasteSeed'),
h('textarea'), h('textarea'),
h('br'), h('br'),
h('button', 'Submit'), h('button', t('submit')),
]) ])
) )
} }

@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
const h = require('react-hyperscript') const h = require('react-hyperscript')
const { connect } = require('react-redux') const { connect } = require('react-redux')
const actions = require('../../actions') const actions = require('../../actions')
const t = require('../../../i18n')
class NewAccountCreateForm extends Component { class NewAccountCreateForm extends Component {
constructor (props) { constructor (props) {
@ -13,7 +14,7 @@ class NewAccountCreateForm extends Component {
this.state = { this.state = {
newAccountName: '', newAccountName: '',
defaultAccountName: `Account ${newAccountNumber}`, defaultAccountName: t('newAccountNumberName', newAccountNumber),
} }
} }
@ -24,7 +25,7 @@ class NewAccountCreateForm extends Component {
return h('div.new-account-create-form', [ return h('div.new-account-create-form', [
h('div.new-account-create-form__input-label', {}, [ h('div.new-account-create-form__input-label', {}, [
'Account Name', t('accountName'),
]), ]),
h('div.new-account-create-form__input-wrapper', {}, [ h('div.new-account-create-form__input-wrapper', {}, [
@ -37,16 +38,16 @@ class NewAccountCreateForm extends Component {
h('div.new-account-create-form__buttons', {}, [ h('div.new-account-create-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', { h('button.new-account-create-form__button-cancel.allcaps', {
onClick: () => this.props.goHome(), onClick: () => this.props.goHome(),
}, [ }, [
'CANCEL', t('cancel'),
]), ]),
h('button.new-account-create-form__button-create', { h('button.new-account-create-form__button-create.allcaps', {
onClick: () => this.props.createAccount(newAccountName || defaultAccountName), onClick: () => this.props.createAccount(newAccountName || defaultAccountName),
}, [ }, [
'CREATE', t('create'),
]), ]),
]), ]),

@ -3,6 +3,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const t = require('../../../i18n')
const { getCurrentViewContext } = require('../../selectors') const { getCurrentViewContext } = require('../../selectors')
const classnames = require('classnames') const classnames = require('classnames')
@ -45,7 +46,7 @@ AccountDetailsModal.prototype.render = function () {
h('div.new-account__header', [ h('div.new-account__header', [
h('div.new-account__title', 'New Account'), h('div.new-account__title', t('newAccount')),
h('div.new-account__tabs', [ h('div.new-account__tabs', [
@ -55,7 +56,7 @@ AccountDetailsModal.prototype.render = function () {
'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE', 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
}), }),
onClick: () => displayForm('CREATE'), onClick: () => displayForm('CREATE'),
}, 'Create'), }, t('createDen')),
h('div.new-account__tabs__tab', { h('div.new-account__tabs__tab', {
className: classnames('new-account__tabs__tab', { className: classnames('new-account__tabs__tab', {
@ -63,7 +64,7 @@ AccountDetailsModal.prototype.render = function () {
'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT', 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
}), }),
onClick: () => displayForm('IMPORT'), onClick: () => displayForm('IMPORT'),
}, 'Import'), }, t('import')),
]), ]),

@ -75,6 +75,8 @@ var actions = {
resetAccount, resetAccount,
showNewVaultSeed: showNewVaultSeed, showNewVaultSeed: showNewVaultSeed,
showInfoPage: showInfoPage, showInfoPage: showInfoPage,
CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN',
closeWelcomeScreen,
// seed recovery actions // seed recovery actions
REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION', REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
revealSeedConfirmation: revealSeedConfirmation, revealSeedConfirmation: revealSeedConfirmation,
@ -788,7 +790,7 @@ function updateTransaction (txData) {
function updateAndApproveTx (txData) { function updateAndApproveTx (txData) {
log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData)) log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
return (dispatch) => { return (dispatch) => {
log.debug(`actions calling background.updateAndApproveTx`) log.debug(`actions calling background.updateAndApproveTx.`)
background.updateAndApproveTransaction(txData, (err) => { background.updateAndApproveTransaction(txData, (err) => {
dispatch(actions.hideLoadingIndication()) dispatch(actions.hideLoadingIndication())
dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
@ -947,6 +949,12 @@ function showNewVaultSeed (seed) {
} }
} }
function closeWelcomeScreen () {
return {
type: actions.CLOSE_WELCOME_SCREEN,
}
}
function backToUnlockView () { function backToUnlockView () {
return { return {
type: actions.BACK_TO_UNLOCK_VIEW, type: actions.BACK_TO_UNLOCK_VIEW,

@ -71,13 +71,17 @@ AddTokenScreen.prototype.componentWillMount = function () {
} }
AddTokenScreen.prototype.toggleToken = function (address, token) { AddTokenScreen.prototype.toggleToken = function (address, token) {
const { selectedTokens, errors } = this.state const { selectedTokens = {}, errors } = this.state
const { [address]: selectedToken } = selectedTokens const selectedTokensCopy = { ...selectedTokens }
if (address in selectedTokensCopy) {
delete selectedTokensCopy[address]
} else {
selectedTokensCopy[address] = token
}
this.setState({ this.setState({
selectedTokens: { selectedTokens: selectedTokensCopy,
...selectedTokens,
[address]: selectedToken ? null : token,
},
errors: { errors: {
...errors, ...errors,
tokenSelector: null, tokenSelector: null,

@ -4,6 +4,7 @@ const connect = require('react-redux').connect
const h = require('react-hyperscript') const h = require('react-hyperscript')
const actions = require('./actions') const actions = require('./actions')
const classnames = require('classnames') const classnames = require('classnames')
const t = require('../i18n')
// mascara // mascara
const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraFirstTime = require('../../mascara/src/app/first-time').default
@ -12,6 +13,8 @@ const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ethe
const OldUIInitializeMenuScreen = require('./first-time/init-menu') const OldUIInitializeMenuScreen = require('./first-time/init-menu')
const InitializeMenuScreen = MascaraFirstTime const InitializeMenuScreen = MascaraFirstTime
const NewKeyChainScreen = require('./new-keychain') const NewKeyChainScreen = require('./new-keychain')
const WelcomeScreen = require('./welcome-screen').default
// accounts // accounts
const MainContainer = require('./main-container') const MainContainer = require('./main-container')
const SendTransactionScreen2 = require('./components/send/send-v2-container') const SendTransactionScreen2 = require('./components/send/send-v2-container')
@ -91,6 +94,7 @@ function mapStateToProps (state) {
betaUI: state.metamask.featureFlags.betaUI, betaUI: state.metamask.featureFlags.betaUI,
isRevealingSeedWords: state.metamask.isRevealingSeedWords, isRevealingSeedWords: state.metamask.isRevealingSeedWords,
Qr: state.appState.Qr, Qr: state.appState.Qr,
welcomeScreenSeen: state.metamask.welcomeScreenSeen,
// state needed to get account dropdown temporarily rendering from app bar // state needed to get account dropdown temporarily rendering from app bar
identities, identities,
@ -244,6 +248,7 @@ App.prototype.renderAppBar = function () {
isInitialized, isInitialized,
betaUI, betaUI,
isPopup, isPopup,
welcomeScreenSeen,
} = this.props } = this.props
if (window.METAMASK_UI_TYPE === 'notification') { if (window.METAMASK_UI_TYPE === 'notification') {
@ -269,7 +274,7 @@ App.prototype.renderAppBar = function () {
style: {}, style: {},
}, [ }, [
h('.app-header.flex-row.flex-space-between', { (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', {
className: classnames({ className: classnames({
'app-header--initialized': !isOnboarding, 'app-header--initialized': !isOnboarding,
}), }),
@ -289,12 +294,12 @@ App.prototype.renderAppBar = function () {
// metamask name // metamask name
h('.flex-row', [ h('.flex-row', [
h('h1', 'MetaMask'), h('h1', t('appName')),
h('div.beta-label', 'BETA'), h('div.beta-label', t('beta')),
]), ]),
]), ]),
h('div.header__right-actions', [ betaUI && isInitialized && h('div.header__right-actions', [
h('div.network-component-wrapper', { h('div.network-component-wrapper', {
style: {}, style: {},
}, [ }, [
@ -324,8 +329,12 @@ App.prototype.renderAppBar = function () {
]), ]),
]), ]),
!isInitialized && !isPopup && betaUI && h('h2.alpha-warning', !isInitialized && !isPopup && betaUI && h('h2', {
'Please be aware that this version is still under development'), className: classnames({
'alpha-warning': welcomeScreenSeen,
'alpha-warning-welcome-screen': !welcomeScreenSeen,
}),
}, 'Please be aware that this version is still under development'),
]) ])
) )
@ -369,11 +378,18 @@ App.prototype.renderPrimary = function () {
isOnboarding, isOnboarding,
betaUI, betaUI,
isRevealingSeedWords, isRevealingSeedWords,
welcomeScreenSeen,
Qr, Qr,
isInitialized,
isUnlocked,
} = props } = props
const isMascaraOnboarding = isMascara && isOnboarding const isMascaraOnboarding = isMascara && isOnboarding
const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords
if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) {
return h(WelcomeScreen)
}
if (isMascaraOnboarding || isBetaUIOnboarding) { if (isMascaraOnboarding || isBetaUIOnboarding) {
return h(MascaraFirstTime) return h(MascaraFirstTime)
} }

@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
const Identicon = require('./identicon') const Identicon = require('./identicon')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const copyToClipboard = require('copy-to-clipboard') const copyToClipboard = require('copy-to-clipboard')
const t = require('../../i18n')
class AccountDropdowns extends Component { class AccountDropdowns extends Component {
constructor (props) { constructor (props) {
@ -79,7 +80,7 @@ class AccountDropdowns extends Component {
try { // Sometimes keyrings aren't loaded yet: try { // Sometimes keyrings aren't loaded yet:
const type = keyring.type const type = keyring.type
const isLoose = type !== 'HD Key Tree' const isLoose = type !== 'HD Key Tree'
return isLoose ? h('.keyring-label', 'LOOSE') : null return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
} catch (e) { return } } catch (e) { return }
} }
@ -129,7 +130,7 @@ class AccountDropdowns extends Component {
diameter: 32, diameter: 32,
}, },
), ),
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'), h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, t('createAccount')),
], ],
), ),
h( h(
@ -154,7 +155,7 @@ class AccountDropdowns extends Component {
fontSize: '24px', fontSize: '24px',
marginBottom: '5px', marginBottom: '5px',
}, },
}, 'Import Account'), }, t('importAccount')),
] ]
), ),
] ]
@ -192,7 +193,7 @@ class AccountDropdowns extends Component {
global.platform.openWindow({ url }) global.platform.openWindow({ url })
}, },
}, },
'View account on Etherscan', t('etherscanView'),
), ),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -204,7 +205,7 @@ class AccountDropdowns extends Component {
actions.showQrView(selected, identity ? identity.name : '') actions.showQrView(selected, identity ? identity.name : '')
}, },
}, },
'Show QR Code', t('showQRCode'),
), ),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -216,7 +217,7 @@ class AccountDropdowns extends Component {
copyToClipboard(checkSumAddress) copyToClipboard(checkSumAddress)
}, },
}, },
'Copy Address to clipboard', t('copyAddress'),
), ),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -226,7 +227,7 @@ class AccountDropdowns extends Component {
actions.requestAccountExport() actions.requestAccountExport()
}, },
}, },
'Export Private Key', t('exportPrivateKey'),
), ),
] ]
) )

@ -6,6 +6,7 @@ const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions') const actions = require('../actions')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const t = require('../../i18n')
module.exports = connect(mapStateToProps)(ExportAccountView) module.exports = connect(mapStateToProps)(ExportAccountView)
@ -35,7 +36,7 @@ ExportAccountView.prototype.render = function () {
if (notExporting) return h('div') if (notExporting) return h('div')
if (exportRequested) { if (exportRequested) {
const warning = `Export private keys at your own risk.` const warning = t('exportPrivateKeyWarning')
return ( return (
h('div', { h('div', {
style: { style: {
@ -53,7 +54,7 @@ ExportAccountView.prototype.render = function () {
h('p.error', warning), h('p.error', warning),
h('input#exportAccount.sizing-input', { h('input#exportAccount.sizing-input', {
type: 'password', type: 'password',
placeholder: 'confirm password', placeholder: t('confirmPassword').toLowerCase(),
onKeyPress: this.onExportKeyPress.bind(this), onKeyPress: this.onExportKeyPress.bind(this),
style: { style: {
position: 'relative', position: 'relative',
@ -74,10 +75,10 @@ ExportAccountView.prototype.render = function () {
style: { style: {
marginRight: '10px', marginRight: '10px',
}, },
}, 'Submit'), }, t('submit')),
h('button', { h('button', {
onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
}, 'Cancel'), }, t('cancel')),
]), ]),
(this.props.warning) && ( (this.props.warning) && (
h('span.error', { h('span.error', {
@ -98,7 +99,7 @@ ExportAccountView.prototype.render = function () {
margin: '0 20px', margin: '0 20px',
}, },
}, [ }, [
h('label', 'Your private key (click to copy):'), h('label', t('copyPrivateKey') + ':'),
h('p.error.cursor-pointer', { h('p.error.cursor-pointer', {
style: { style: {
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
@ -112,13 +113,13 @@ ExportAccountView.prototype.render = function () {
}, plainKey), }, plainKey),
h('button', { h('button', {
onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
}, 'Done'), }, t('done')),
h('button', { h('button', {
style: { style: {
marginLeft: '10px', marginLeft: '10px',
}, },
onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey), onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
}, 'Save as File'), }, t('saveAsFile')),
]) ])
} }
} }

@ -6,6 +6,7 @@ const actions = require('../../actions')
const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu') const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
const Identicon = require('../identicon') const Identicon = require('../identicon')
const { formatBalance } = require('../../util') const { formatBalance } = require('../../util')
const t = require('../../../i18n')
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu) module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
@ -70,10 +71,10 @@ AccountMenu.prototype.render = function () {
h(Item, { h(Item, {
className: 'account-menu__header', className: 'account-menu__header',
}, [ }, [
'My Accounts', t('myAccounts'),
h('button.account-menu__logout-button', { h('button.account-menu__logout-button', {
onClick: lockMetamask, onClick: lockMetamask,
}, 'Log out'), }, t('logout')),
]), ]),
h(Divider), h(Divider),
h('div.account-menu__accounts', this.renderAccounts()), h('div.account-menu__accounts', this.renderAccounts()),
@ -81,23 +82,23 @@ AccountMenu.prototype.render = function () {
h(Item, { h(Item, {
onClick: () => showNewAccountPage('CREATE'), onClick: () => showNewAccountPage('CREATE'),
icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }), icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
text: 'Create Account', text: t('createAccount'),
}), }),
h(Item, { h(Item, {
onClick: () => showNewAccountPage('IMPORT'), onClick: () => showNewAccountPage('IMPORT'),
icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }), icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
text: 'Import Account', text: t('importAccount'),
}), }),
h(Divider), h(Divider),
h(Item, { h(Item, {
onClick: showInfoPage, onClick: showInfoPage,
icon: h('img.account-menu__item-icon', { src: 'images/mm-info-icon.svg' }), icon: h('img', { src: 'images/mm-info-icon.svg' }),
text: 'Info & Help', text: t('infoHelp'),
}), }),
h(Item, { h(Item, {
onClick: showConfigPage, onClick: showConfigPage,
icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }), icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
text: 'Settings', text: t('settings'),
}), }),
]) ])
} }
@ -155,6 +156,6 @@ AccountMenu.prototype.indicateIfLoose = function (keyring) {
try { // Sometimes keyrings aren't loaded yet: try { // Sometimes keyrings aren't loaded yet:
const type = keyring.type const type = keyring.type
const isLoose = type !== 'HD Key Tree' const isLoose = type !== 'HD Key Tree'
return isLoose ? h('.keyring-label', 'IMPORTED') : null return isLoose ? h('.keyring-label.allcaps', t('imported')) : null
} catch (e) { return } } catch (e) { return }
} }

@ -4,6 +4,7 @@ const inherits = require('util').inherits
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
const extend = require('xtend') const extend = require('xtend')
const t = require('../../i18n')
module.exports = BnAsDecimalInput module.exports = BnAsDecimalInput
@ -136,13 +137,13 @@ BnAsDecimalInput.prototype.constructWarning = function () {
let message = name ? name + ' ' : '' let message = name ? name + ' ' : ''
if (min && max) { if (min && max) {
message += `must be greater than or equal to ${newMin} ${suffix} and less than or equal to ${newMax} ${suffix}.` message += t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
} else if (min) { } else if (min) {
message += `must be greater than or equal to ${newMin} ${suffix}.` message += t('greaterThanMin', [`${newMin} ${suffix}`])
} else if (max) { } else if (max) {
message += `must be less than or equal to ${newMax} ${suffix}.` message += t('lessThanMax', [`${newMax} ${suffix}`])
} else { } else {
message += 'Invalid input.' message += t('invalidInput')
} }
return message return message

@ -9,6 +9,7 @@ const Loading = require('./loading')
const AccountPanel = require('./account-panel') const AccountPanel = require('./account-panel')
const RadioList = require('./custom-radio-list') const RadioList = require('./custom-radio-list')
const networkNames = require('../../../app/scripts/config.js').networkNames const networkNames = require('../../../app/scripts/config.js').networkNames
const t = require('../../i18n')
module.exports = connect(mapStateToProps)(BuyButtonSubview) module.exports = connect(mapStateToProps)(BuyButtonSubview)
@ -76,7 +77,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
paddingTop: '4px', paddingTop: '4px',
paddingBottom: '4px', paddingBottom: '4px',
}, },
}, 'Deposit Eth'), }, t('depositEth')),
]), ]),
// loading indication // loading indication
@ -118,7 +119,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
paddingTop: '4px', paddingTop: '4px',
paddingBottom: '4px', paddingBottom: '4px',
}, },
}, 'Select Service'), }, t('selectService')),
]), ]),
]) ])
@ -143,7 +144,7 @@ BuyButtonSubview.prototype.primarySubview = function () {
case '4': case '4':
case '42': case '42':
const networkName = networkNames[network] const networkName = networkNames[network]
const label = `${networkName} Test Faucet` const label = `${networkName} ${t('testFaucet')}`
return ( return (
h('div.flex-column', { h('div.flex-column', {
style: { style: {
@ -164,14 +165,14 @@ BuyButtonSubview.prototype.primarySubview = function () {
style: { style: {
marginTop: '15px', marginTop: '15px',
}, },
}, 'Borrow With Dharma (Beta)') }, t('borrowDharma'))
) : null, ) : null,
]) ])
) )
default: default:
return ( return (
h('h2.error', 'Unknown network ID') h('h2.error', t('unknownNetworkId'))
) )
} }
@ -203,8 +204,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () {
'ShapeShift', 'ShapeShift',
], ],
subtext: { subtext: {
'Coinbase': 'Crypto/FIAT (USA only)', 'Coinbase': `${t('crypto')}/${t('fiat')} (${t('usaOnly')})`,
'ShapeShift': 'Crypto', 'ShapeShift': t('crypto'),
}, },
onClick: this.radioHandler.bind(this), onClick: this.radioHandler.bind(this),
}), }),

@ -3,6 +3,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../actions') const actions = require('../actions')
const t = require('../../i18n')
module.exports = connect(mapStateToProps)(CoinbaseForm) module.exports = connect(mapStateToProps)(CoinbaseForm)
@ -37,11 +38,11 @@ CoinbaseForm.prototype.render = function () {
}, [ }, [
h('button.btn-green', { h('button.btn-green', {
onClick: this.toCoinbase.bind(this), onClick: this.toCoinbase.bind(this),
}, 'Continue to Coinbase'), }, t('continueToCoinbase')),
h('button.btn-red', { h('button.btn-red', {
onClick: () => props.dispatch(actions.goHome()), onClick: () => props.dispatch(actions.goHome()),
}, 'Cancel'), }, t('cancel')),
]), ]),
]) ])
} }

@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const copyToClipboard = require('copy-to-clipboard') const copyToClipboard = require('copy-to-clipboard')
const t = require('../../i18n')
const Tooltip = require('./tooltip') const Tooltip = require('./tooltip')
@ -22,7 +23,7 @@ CopyButton.prototype.render = function () {
const value = props.value const value = props.value
const copied = state.copied const copied = state.copied
const message = copied ? 'Copied' : props.title || ' Copy ' const message = copied ? t('copiedButton') : props.title || t('copyButton')
return h('.copy-button', { return h('.copy-button', {
style: { style: {

@ -4,6 +4,7 @@ const inherits = require('util').inherits
const Tooltip = require('./tooltip') const Tooltip = require('./tooltip')
const copyToClipboard = require('copy-to-clipboard') const copyToClipboard = require('copy-to-clipboard')
const t = require('../../i18n')
module.exports = Copyable module.exports = Copyable
@ -22,7 +23,7 @@ Copyable.prototype.render = function () {
const { copied } = state const { copied } = state
return h(Tooltip, { return h(Tooltip, {
title: copied ? 'Copied!' : 'Copy', title: copied ? t('copiedExclamation') : t('copy'),
position: 'bottom', position: 'bottom',
}, h('span', { }, h('span', {
style: { style: {

@ -3,6 +3,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const t = require('../../../i18n')
const GasModalCard = require('./gas-modal-card') const GasModalCard = require('./gas-modal-card')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
@ -146,7 +147,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
}) })
if (!balanceIsSufficient) { if (!balanceIsSufficient) {
error = 'Insufficient balance for current gas total' error = t('balanceIsInsufficientGas')
} }
const gasLimitTooLow = gasLimit && conversionGreaterThan( const gasLimitTooLow = gasLimit && conversionGreaterThan(
@ -162,7 +163,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
) )
if (gasLimitTooLow) { if (gasLimitTooLow) {
error = 'Gas limit must be at least 21000' error = t('gasLimitTooLow')
} }
this.setState({ error }) this.setState({ error })
@ -239,7 +240,7 @@ CustomizeGasModal.prototype.render = function () {
}, [ }, [
h('div.send-v2__customize-gas__header', {}, [ h('div.send-v2__customize-gas__header', {}, [
h('div.send-v2__customize-gas__title', 'Customize Gas'), h('div.send-v2__customize-gas__title', t('customGas')),
h('div.send-v2__customize-gas__close', { h('div.send-v2__customize-gas__close', {
onClick: hideModal, onClick: hideModal,
@ -255,8 +256,8 @@ CustomizeGasModal.prototype.render = function () {
// max: 1000, // max: 1000,
step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10), step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
onChange: value => this.convertAndSetGasPrice(value), onChange: value => this.convertAndSetGasPrice(value),
title: 'Gas Price (GWEI)', title: t('gasPrice'),
copy: 'We calculate the suggested gas prices based on network success rates.', copy: t('gasPriceCalculation'),
}), }),
h(GasModalCard, { h(GasModalCard, {
@ -265,8 +266,8 @@ CustomizeGasModal.prototype.render = function () {
// max: 100000, // max: 100000,
step: 1, step: 1,
onChange: value => this.convertAndSetGasLimit(value), onChange: value => this.convertAndSetGasLimit(value),
title: 'Gas Limit', title: t('gasLimit'),
copy: 'We calculate the suggested gas limit based on network success rates.', copy: t('gasLimitCalculation'),
}), }),
]), ]),
@ -279,16 +280,16 @@ CustomizeGasModal.prototype.render = function () {
h('div.send-v2__customize-gas__revert', { h('div.send-v2__customize-gas__revert', {
onClick: () => this.revert(), onClick: () => this.revert(),
}, ['Revert']), }, [t('revert')]),
h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__buttons', [
h('div.send-v2__customize-gas__cancel', { h('div.send-v2__customize-gas__cancel.allcaps', {
onClick: this.props.hideModal, onClick: this.props.hideModal,
}, ['CANCEL']), }, [t('cancel')]),
h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, { h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, {
onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
}, ['SAVE']), }, [t('save')]),
]), ]),
]), ]),

@ -10,6 +10,7 @@ const Identicon = require('../../identicon')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const copyToClipboard = require('copy-to-clipboard') const copyToClipboard = require('copy-to-clipboard')
const { formatBalance } = require('../../../util') const { formatBalance } = require('../../../util')
const t = require('../../../../i18n')
class AccountDropdowns extends Component { class AccountDropdowns extends Component {
constructor (props) { constructor (props) {
@ -121,7 +122,7 @@ class AccountDropdowns extends Component {
flex: '3 3 auto', flex: '3 3 auto',
}, },
}, [ }, [
h('span.account-dropdown-edit-button', { h('span.account-dropdown-edit-button.allcaps', {
style: { style: {
fontSize: '16px', fontSize: '16px',
}, },
@ -129,7 +130,7 @@ class AccountDropdowns extends Component {
actions.showEditAccountModal(identity) actions.showEditAccountModal(identity)
}, },
}, [ }, [
'Edit', t('edit'),
]), ]),
]), ]),
@ -143,7 +144,7 @@ class AccountDropdowns extends Component {
try { // Sometimes keyrings aren't loaded yet: try { // Sometimes keyrings aren't loaded yet:
const type = keyring.type const type = keyring.type
const isLoose = type !== 'HD Key Tree' const isLoose = type !== 'HD Key Tree'
return isLoose ? h('.keyring-label', 'IMPORTED') : null return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
} catch (e) { return } } catch (e) { return }
} }
@ -201,7 +202,7 @@ class AccountDropdowns extends Component {
fontSize: '16px', fontSize: '16px',
lineHeight: '23px', lineHeight: '23px',
}, },
}, 'Create Account'), }, t('createAccount')),
], ],
), ),
h( h(
@ -235,7 +236,7 @@ class AccountDropdowns extends Component {
fontSize: '16px', fontSize: '16px',
lineHeight: '23px', lineHeight: '23px',
}, },
}, 'Import Account'), }, t('importAccount')),
] ]
), ),
] ]
@ -286,7 +287,7 @@ class AccountDropdowns extends Component {
menuItemStyles, menuItemStyles,
), ),
}, },
'Account Details', t('accountDetails'),
), ),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -302,7 +303,7 @@ class AccountDropdowns extends Component {
menuItemStyles, menuItemStyles,
), ),
}, },
'View account on Etherscan', t('etherscanView'),
), ),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -318,7 +319,7 @@ class AccountDropdowns extends Component {
menuItemStyles, menuItemStyles,
), ),
}, },
'Copy Address to clipboard', t('copyAddress'),
), ),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -330,7 +331,7 @@ class AccountDropdowns extends Component {
menuItemStyles, menuItemStyles,
), ),
}, },
'Export Private Key', t('exportPrivateKey'),
), ),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -345,7 +346,7 @@ class AccountDropdowns extends Component {
menuItemStyles, menuItemStyles,
), ),
}, },
'Add Token', t('addToken'),
), ),
] ]
@ -463,4 +464,3 @@ function mapStateToProps (state) {
} }
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns) module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)

@ -6,6 +6,7 @@ const actions = require('../../actions')
const Dropdown = require('./components/dropdown').Dropdown const Dropdown = require('./components/dropdown').Dropdown
const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
const NetworkDropdownIcon = require('./components/network-dropdown-icon') const NetworkDropdownIcon = require('./components/network-dropdown-icon')
const t = require('../../../i18n')
const R = require('ramda') const R = require('ramda')
// classes from nodes of the toggle element. // classes from nodes of the toggle element.
@ -93,13 +94,13 @@ NetworkDropdown.prototype.render = function () {
}, [ }, [
h('div.network-dropdown-header', {}, [ h('div.network-dropdown-header', {}, [
h('div.network-dropdown-title', {}, 'Networks'), h('div.network-dropdown-title', {}, t('networks')),
h('div.network-dropdown-divider'), h('div.network-dropdown-divider'),
h('div.network-dropdown-content', h('div.network-dropdown-content',
{}, {},
'The default network for Ether transactions is Main Net.' t('defaultNetwork')
), ),
]), ]),
@ -121,7 +122,7 @@ NetworkDropdown.prototype.render = function () {
style: { style: {
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
}, },
}, 'Main Ethereum Network'), }, t('mainnet')),
] ]
), ),
@ -143,7 +144,7 @@ NetworkDropdown.prototype.render = function () {
style: { style: {
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
}, },
}, 'Ropsten Test Network'), }, t('ropsten')),
] ]
), ),
@ -165,7 +166,7 @@ NetworkDropdown.prototype.render = function () {
style: { style: {
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
}, },
}, 'Kovan Test Network'), }, t('kovan')),
] ]
), ),
@ -187,7 +188,7 @@ NetworkDropdown.prototype.render = function () {
style: { style: {
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
}, },
}, 'Rinkeby Test Network'), }, t('rinkeby')),
] ]
), ),
@ -209,7 +210,7 @@ NetworkDropdown.prototype.render = function () {
style: { style: {
color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
}, },
}, 'Localhost 8545'), }, t('localhost')),
] ]
), ),
@ -233,7 +234,7 @@ NetworkDropdown.prototype.render = function () {
style: { style: {
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
}, },
}, 'Custom RPC'), }, t('customRPC')),
] ]
), ),
@ -248,15 +249,15 @@ NetworkDropdown.prototype.getNetworkName = function () {
let name let name
if (providerName === 'mainnet') { if (providerName === 'mainnet') {
name = 'Main Ethereum Network' name = t('mainnet')
} else if (providerName === 'ropsten') { } else if (providerName === 'ropsten') {
name = 'Ropsten Test Network' name = t('ropsten')
} else if (providerName === 'kovan') { } else if (providerName === 'kovan') {
name = 'Kovan Test Network' name = t('kovan')
} else if (providerName === 'rinkeby') { } else if (providerName === 'rinkeby') {
name = 'Rinkeby Test Network' name = t('rinkeby')
} else { } else {
name = 'Unknown Private Network' name = t('unknownNetwork')
} }
return name return name

@ -3,6 +3,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const t = require('../../../i18n')
module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown) module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
@ -43,7 +44,7 @@ TokenMenuDropdown.prototype.render = function () {
showHideTokenConfirmationModal(this.props.token) showHideTokenConfirmationModal(this.props.token)
this.props.onClose() this.props.onClose()
}, },
}, 'Hide Token'), }, t('hideToken')),
]), ]),
]), ]),

@ -8,6 +8,7 @@ const ENS = require('ethjs-ens')
const networkMap = require('ethjs-ens/lib/network-map.json') const networkMap = require('ethjs-ens/lib/network-map.json')
const ensRE = /.+\..+$/ const ensRE = /.+\..+$/
const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
const t = require('../../i18n')
module.exports = EnsInput module.exports = EnsInput
@ -89,13 +90,13 @@ EnsInput.prototype.lookupEnsName = function () {
log.info(`ENS attempting to resolve name: ${recipient}`) log.info(`ENS attempting to resolve name: ${recipient}`)
this.ens.lookup(recipient.trim()) this.ens.lookup(recipient.trim())
.then((address) => { .then((address) => {
if (address === ZERO_ADDRESS) throw new Error('No address has been set for this name.') if (address === ZERO_ADDRESS) throw new Error(t('noAddressForName'))
if (address !== ensResolution) { if (address !== ensResolution) {
this.setState({ this.setState({
loadingEns: false, loadingEns: false,
ensResolution: address, ensResolution: address,
nickname: recipient.trim(), nickname: recipient.trim(),
hoverText: address + '\nClick to Copy', hoverText: address + '\n' + t('clickCopy'),
ensFailure: false, ensFailure: false,
}) })
} }

@ -4,6 +4,7 @@ const inherits = require('util').inherits
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
const extend = require('xtend') const extend = require('xtend')
const t = require('../../i18n')
module.exports = HexAsDecimalInput module.exports = HexAsDecimalInput
@ -126,13 +127,13 @@ HexAsDecimalInput.prototype.constructWarning = function () {
let message = name ? name + ' ' : '' let message = name ? name + ' ' : ''
if (min && max) { if (min && max) {
message += `must be greater than or equal to ${min} and less than or equal to ${max}.` message += t('betweenMinAndMax', [min, max])
} else if (min) { } else if (min) {
message += `must be greater than or equal to ${min}.` message += t('greaterThanMin', [min])
} else if (max) { } else if (max) {
message += `must be less than or equal to ${max}.` message += t('lessThanMax', [max])
} else { } else {
message += 'Invalid input.' message += t('invalidInput')
} }
return message return message

@ -8,6 +8,7 @@ const { getSelectedIdentity } = require('../../selectors')
const genAccountLink = require('../../../lib/account-link.js') const genAccountLink = require('../../../lib/account-link.js')
const QrView = require('../qr-code') const QrView = require('../qr-code')
const EditableLabel = require('../editable-label') const EditableLabel = require('../editable-label')
const t = require('../../../i18n')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -64,12 +65,12 @@ AccountDetailsModal.prototype.render = function () {
h('button.btn-clear.account-modal__button', { h('button.btn-clear.account-modal__button', {
onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
}, 'View account on Etherscan'), }, t('etherscanView')),
// Holding on redesign for Export Private Key functionality // Holding on redesign for Export Private Key functionality
h('button.btn-clear.account-modal__button', { h('button.btn-clear.account-modal__button', {
onClick: () => showExportPrivateKeyModal(), onClick: () => showExportPrivateKeyModal(),
}, 'Export private key'), }, t('exportPrivateKey')),
]) ])
} }

@ -5,6 +5,7 @@ const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const { getSelectedIdentity } = require('../../selectors') const { getSelectedIdentity } = require('../../selectors')
const Identicon = require('../identicon') const Identicon = require('../identicon')
const t = require('../../../i18n')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -59,7 +60,7 @@ AccountModalContainer.prototype.render = function () {
h('i.fa.fa-angle-left.fa-lg'), h('i.fa.fa-angle-left.fa-lg'),
h('span.account-modal-back__text', ' Back'), h('span.account-modal-back__text', ' ' + t('back')),
]), ]),

@ -4,6 +4,7 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const networkNames = require('../../../../app/scripts/config.js').networkNames const networkNames = require('../../../../app/scripts/config.js').networkNames
const t = require('../../../i18n')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -56,15 +57,15 @@ BuyOptions.prototype.render = function () {
}, [ }, [
h('div.buy-modal-content-title', { h('div.buy-modal-content-title', {
style: {}, style: {},
}, 'Transfers'), }, t('transfers')),
h('div', {}, 'How would you like to deposit Ether?'), h('div', {}, t('howToDeposit')),
]), ]),
h('div.buy-modal-content-options.flex-column.flex-center', {}, [ h('div.buy-modal-content-options.flex-column.flex-center', {}, [
isTestNetwork isTestNetwork
? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network)) ? this.renderModalContentOption(networkName, t('testFaucet'), () => toFaucet(network))
: this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)), : this.renderModalContentOption('Coinbase', t('depositFiat'), () => toCoinbase(address)),
// h('div.buy-modal-content-option', {}, [ // h('div.buy-modal-content-option', {}, [
// h('div.buy-modal-content-option-title', {}, 'Shapeshift'), // h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
@ -72,8 +73,8 @@ BuyOptions.prototype.render = function () {
// ]),, // ]),,
this.renderModalContentOption( this.renderModalContentOption(
'Direct Deposit', t('directDeposit'),
'Deposit from another account', t('depositFromAccount'),
() => this.goToAccountDetailsModal() () => this.goToAccountDetailsModal()
), ),
@ -84,7 +85,7 @@ BuyOptions.prototype.render = function () {
background: 'white', background: 'white',
}, },
onClick: () => { this.props.hideModal() }, onClick: () => { this.props.hideModal() },
}, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')), }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t('cancel'))),
]), ]),
]) ])
} }

@ -5,18 +5,18 @@ const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const networkNames = require('../../../../app/scripts/config.js').networkNames const networkNames = require('../../../../app/scripts/config.js').networkNames
const ShapeshiftForm = require('../shapeshift-form') const ShapeshiftForm = require('../shapeshift-form')
const t = require('../../../i18n')
const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether'
const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
your new wallet by direct deposit.` const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
const COINBASE_ROW_TITLE = 'Buy on Coinbase' const COINBASE_ROW_TITLE = t('buyCoinbase')
const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin, const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
ethereum, and litecoin.` const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether const FAUCET_ROW_TITLE = t('testFaucet')
directly into your MetaMask wallet. No Account Needed.` const facuetRowText = (networkName) => {
const FAUCET_ROW_TITLE = 'Test Faucet' return t('getEtherFromFaucet', [networkName])
const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` }
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({
]), ]),
h('div.deposit-ether-modal__buy-row__logo', [logo]), h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
h('div.deposit-ether-modal__buy-row__description', [ h('div.deposit-ether-modal__buy-row__description', [
@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () {
const isTestNetwork = ['3', '4', '42'].find(n => n === network) const isTestNetwork = ['3', '4', '42'].find(n => n === network)
const networkName = networkNames[network] const networkName = networkNames[network]
return h('div.deposit-ether-modal', {}, [ return h('div.page-container.page-container--full-width', {}, [
h('div.deposit-ether-modal__header', [ h('div.page-container__header', [
h('div.deposit-ether-modal__header__title', ['Deposit Ether']), h('div.page-container__title', [t('depositEther')]),
h('div.deposit-ether-modal__header__description', [ h('div.page-container__subtitle', [
'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', t('needEtherInWallet'),
]), ]),
h('div.deposit-ether-modal__header__close', { h('div.page-container__header-close', {
onClick: () => { onClick: () => {
this.setState({ buyingWithShapeshift: false }) this.setState({ buyingWithShapeshift: false })
this.props.hideWarning() this.props.hideWarning()
@ -129,54 +129,63 @@ DepositEtherModal.prototype.render = function () {
]), ]),
h('div.deposit-ether-modal__buy-rows', [ h('.page-container__content', {}, [
this.renderRow({ h('div.deposit-ether-modal__buy-rows', [
logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
title: DIRECT_DEPOSIT_ROW_TITLE,
text: DIRECT_DEPOSIT_ROW_TEXT,
buttonLabel: 'View Account',
onButtonClick: () => this.goToAccountDetailsModal(),
hide: buyingWithShapeshift,
}),
this.renderRow({ this.renderRow({
logo: h('i.fa.fa-tint.fa-2x'), logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
title: FAUCET_ROW_TITLE, title: DIRECT_DEPOSIT_ROW_TITLE,
text: facuetRowText(networkName), text: DIRECT_DEPOSIT_ROW_TEXT,
buttonLabel: 'Get Ether', buttonLabel: t('viewAccount'),
onButtonClick: () => toFaucet(network), onButtonClick: () => this.goToAccountDetailsModal(),
hide: !isTestNetwork || buyingWithShapeshift, hide: buyingWithShapeshift,
}), }),
this.renderRow({ this.renderRow({
logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', { logo: h('i.fa.fa-tint.fa-2x'),
src: '../../../images/coinbase logo.png', title: FAUCET_ROW_TITLE,
text: facuetRowText(networkName),
buttonLabel: t('getEther'),
onButtonClick: () => toFaucet(network),
hide: !isTestNetwork || buyingWithShapeshift,
}), }),
title: COINBASE_ROW_TITLE,
text: COINBASE_ROW_TEXT,
buttonLabel: 'Continue to Coinbase',
onButtonClick: () => toCoinbase(address),
hide: isTestNetwork || buyingWithShapeshift,
}),
this.renderRow({ this.renderRow({
logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', { logo: h('div.deposit-ether-modal__logo', {
src: '../../../images/shapeshift logo.png', style: {
backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
height: '40px',
},
}),
title: COINBASE_ROW_TITLE,
text: COINBASE_ROW_TEXT,
buttonLabel: t('continueToCoinbase'),
onButtonClick: () => toCoinbase(address),
hide: isTestNetwork || buyingWithShapeshift,
}),
this.renderRow({
logo: h('div.deposit-ether-modal__logo', {
style: {
backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
},
}),
title: SHAPESHIFT_ROW_TITLE,
text: SHAPESHIFT_ROW_TEXT,
buttonLabel: t('shapeshiftBuy'),
onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
hide: isTestNetwork,
hideButton: buyingWithShapeshift,
hideTitle: buyingWithShapeshift,
onBackClick: () => this.setState({ buyingWithShapeshift: false }),
showBackButton: this.state.buyingWithShapeshift,
className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
}), }),
title: SHAPESHIFT_ROW_TITLE,
text: SHAPESHIFT_ROW_TEXT,
buttonLabel: 'Buy with Shapeshift',
onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
hide: isTestNetwork,
hideButton: buyingWithShapeshift,
hideTitle: buyingWithShapeshift,
onBackClick: () => this.setState({ buyingWithShapeshift: false }),
showBackButton: this.state.buyingWithShapeshift,
className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
}),
buyingWithShapeshift && h(ShapeshiftForm), buyingWithShapeshift && h(ShapeshiftForm),
]),
]), ]),
]) ])

@ -4,6 +4,7 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const { getSelectedAccount } = require('../../selectors') const { getSelectedAccount } = require('../../selectors')
const t = require('../../../i18n')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -50,7 +51,7 @@ EditAccountNameModal.prototype.render = function () {
]), ]),
h('div.edit-account-name-modal-title', { h('div.edit-account-name-modal-title', {
}, ['Edit Account Name']), }, [t('editAccountName')]),
h('input.edit-account-name-modal-input', { h('input.edit-account-name-modal-input', {
placeholder: identity.name, placeholder: identity.name,
@ -60,7 +61,7 @@ EditAccountNameModal.prototype.render = function () {
value: this.state.inputText, value: this.state.inputText,
}, []), }, []),
h('button.btn-clear.edit-account-name-modal-save-button', { h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
onClick: () => { onClick: () => {
if (this.state.inputText.length !== 0) { if (this.state.inputText.length !== 0) {
saveAccountLabel(identity.address, this.state.inputText) saveAccountLabel(identity.address, this.state.inputText)
@ -69,7 +70,7 @@ EditAccountNameModal.prototype.render = function () {
}, },
disabled: this.state.inputText.length === 0, disabled: this.state.inputText.length === 0,
}, [ }, [
'SAVE', t('save'),
]), ]),
]), ]),

@ -7,6 +7,7 @@ const actions = require('../../actions')
const AccountModalContainer = require('./account-modal-container') const AccountModalContainer = require('./account-modal-container')
const { getSelectedIdentity } = require('../../selectors') const { getSelectedIdentity } = require('../../selectors')
const ReadOnlyInput = require('../readonly-input') const ReadOnlyInput = require('../readonly-input')
const t = require('../../../i18n')
const copyToClipboard = require('copy-to-clipboard') const copyToClipboard = require('copy-to-clipboard')
function mapStateToProps (state) { function mapStateToProps (state) {
@ -48,8 +49,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo
ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
return h('span.private-key-password-label', privateKey return h('span.private-key-password-label', privateKey
? 'This is your private key (click to copy)' ? t('copyPrivateKey')
: 'Type Your Password' : t('typePassword')
) )
} }
@ -86,8 +87,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
), ),
(privateKey (privateKey
? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done') ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done'))
: this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm') : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
), ),
]) ])
@ -120,7 +121,7 @@ ExportPrivateKeyModal.prototype.render = function () {
h('div.account-modal-divider'), h('div.account-modal-divider'),
h('span.modal-body-title', 'Show Private Keys'), h('span.modal-body-title', t('showPrivateKeys')),
h('div.private-key-password', {}, [ h('div.private-key-password', {}, [
this.renderPasswordLabel(privateKey), this.renderPasswordLabel(privateKey),
@ -130,10 +131,7 @@ ExportPrivateKeyModal.prototype.render = function () {
!warning ? null : h('span.private-key-password-error', warning), !warning ? null : h('span.private-key-password-error', warning),
]), ]),
h('div.private-key-password-warning', `Warning: Never disclose this key. h('div.private-key-password-warning', t('privateKeyWarning')),
Anyone with your private keys can take steal any assets held in your
account.`
),
this.renderButtons(privateKey, this.state.password, address, hideModal), this.renderButtons(privateKey, this.state.password, address, hideModal),

@ -4,6 +4,7 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const Identicon = require('../identicon') const Identicon = require('../identicon')
const t = require('../../../i18n')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -41,7 +42,7 @@ HideTokenConfirmationModal.prototype.render = function () {
h('div.hide-token-confirmation__container', { h('div.hide-token-confirmation__container', {
}, [ }, [
h('div.hide-token-confirmation__title', {}, [ h('div.hide-token-confirmation__title', {}, [
'Hide Token?', t('hideTokenPrompt'),
]), ]),
h(Identicon, { h(Identicon, {
@ -54,19 +55,19 @@ HideTokenConfirmationModal.prototype.render = function () {
h('div.hide-token-confirmation__symbol', {}, symbol), h('div.hide-token-confirmation__symbol', {}, symbol),
h('div.hide-token-confirmation__copy', {}, [ h('div.hide-token-confirmation__copy', {}, [
'You can add this token back in the future by going go to “Add token” in your accounts options menu.', t('readdToken'),
]), ]),
h('div.hide-token-confirmation__buttons', {}, [ h('div.hide-token-confirmation__buttons', {}, [
h('button.btn-cancel.hide-token-confirmation__button', { h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
onClick: () => hideModal(), onClick: () => hideModal(),
}, [ }, [
'CANCEL', t('cancel'),
]), ]),
h('button.btn-clear.hide-token-confirmation__button', { h('button.btn-clear.hide-token-confirmation__button.allcaps', {
onClick: () => hideToken(address), onClick: () => hideToken(address),
}, [ }, [
'HIDE', t('hide'),
]), ]),
]), ]),
]), ]),

@ -6,6 +6,7 @@ const FadeModal = require('boron').FadeModal
const actions = require('../../actions') const actions = require('../../actions')
const isMobileView = require('../../../lib/is-mobile-view') const isMobileView = require('../../../lib/is-mobile-view')
const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
const t = require('../../../i18n')
// Modal Components // Modal Components
const BuyOptions = require('./buy-options-modal') const BuyOptions = require('./buy-options-modal')
@ -92,18 +93,20 @@ const MODALS = {
display: 'flex', display: 'flex',
}, },
laptopModalStyle: { laptopModalStyle: {
width: '900px', width: '850px',
maxWidth: '900px',
top: 'calc(10% + 10px)', top: 'calc(10% + 10px)',
left: '0', left: '0',
right: '0', right: '0',
margin: '0 auto', margin: '0 auto',
boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)', boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
borderRadius: '8px', borderRadius: '7px',
transform: 'none', transform: 'none',
height: 'calc(80% - 20px)',
overflowY: 'hidden',
}, },
contentStyle: { contentStyle: {
borderRadius: '8px', borderRadius: '7px',
height: '100%',
}, },
}, },
@ -171,9 +174,8 @@ const MODALS = {
BETA_UI_NOTIFICATION_MODAL: { BETA_UI_NOTIFICATION_MODAL: {
contents: [ contents: [
h(NotifcationModal, { h(NotifcationModal, {
header: 'Welcome to the New UI (Beta)', header: t('uiWelcome'),
message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens, message: t('uiWelcomeMessage'),
and let us know if you have any issues.`,
}), }),
], ],
mobileModalStyle: { mobileModalStyle: {
@ -189,9 +191,8 @@ const MODALS = {
OLD_UI_NOTIFICATION_MODAL: { OLD_UI_NOTIFICATION_MODAL: {
contents: [ contents: [
h(NotifcationModal, { h(NotifcationModal, {
header: 'Old UI', header: t('oldUI'),
message: `You have returned to the old UI. You can switch back to the New UI through the option in the top message: t('oldUIMessage'),
right dropdown menu.`,
}), }),
], ],
mobileModalStyle: { mobileModalStyle: {

@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
const h = require('react-hyperscript') const h = require('react-hyperscript')
const { connect } = require('react-redux') const { connect } = require('react-redux')
const actions = require('../../actions') const actions = require('../../actions')
const t = require('../../../i18n')
class NewAccountModal extends Component { class NewAccountModal extends Component {
constructor (props) { constructor (props) {
@ -11,7 +12,7 @@ class NewAccountModal extends Component {
const newAccountNumber = numberOfExistingAccounts + 1 const newAccountNumber = numberOfExistingAccounts + 1
this.state = { this.state = {
newAccountName: `Account ${newAccountNumber}`, newAccountName: `${t('account')} ${newAccountNumber}`,
} }
} }
@ -22,7 +23,7 @@ class NewAccountModal extends Component {
h('div.new-account-modal-wrapper', { h('div.new-account-modal-wrapper', {
}, [ }, [
h('div.new-account-modal-header', {}, [ h('div.new-account-modal-header', {}, [
'New Account', t('newAccount'),
]), ]),
h('div.modal-close-x', { h('div.modal-close-x', {
@ -30,19 +31,19 @@ class NewAccountModal extends Component {
}), }),
h('div.new-account-modal-content', {}, [ h('div.new-account-modal-content', {}, [
'Account Name', t('accountName'),
]), ]),
h('div.new-account-input-wrapper', {}, [ h('div.new-account-input-wrapper', {}, [
h('input.new-account-input', { h('input.new-account-input', {
value: this.state.newAccountName, value: this.state.newAccountName,
placeholder: 'E.g. My new account', placeholder: t('sampleAccountName'),
onChange: event => this.setState({ newAccountName: event.target.value }), onChange: event => this.setState({ newAccountName: event.target.value }),
}, []), }, []),
]), ]),
h('div.new-account-modal-content.after-input', {}, [ h('div.new-account-modal-content.after-input', {}, [
'or', t('or'),
]), ]),
h('div.new-account-modal-content.after-input.pointer', { h('div.new-account-modal-content.after-input.pointer', {
@ -50,13 +51,13 @@ class NewAccountModal extends Component {
this.props.hideModal() this.props.hideModal()
this.props.showImportPage() this.props.showImportPage()
}, },
}, 'Import an account'), }, t('importAnAccount')),
h('div.new-account-modal-content.button', {}, [ h('div.new-account-modal-content.button.allcaps', {}, [
h('button.btn-clear', { h('button.btn-clear', {
onClick: () => this.props.createAccount(newAccountName), onClick: () => this.props.createAccount(newAccountName),
}, [ }, [
'SAVE', t('save'),
]), ]),
]), ]),
]), ]),

@ -3,6 +3,7 @@ const h = require('react-hyperscript')
const classnames = require('classnames') const classnames = require('classnames')
const inherits = require('util').inherits const inherits = require('util').inherits
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
const t = require('../../i18n')
module.exports = Network module.exports = Network
@ -33,7 +34,7 @@ Network.prototype.render = function () {
onClick: (event) => this.props.onClick(event), onClick: (event) => this.props.onClick(event),
}, [ }, [
h('img', { h('img', {
title: 'Attempting to connect to blockchain.', title: t('attemptingConnect'),
style: { style: {
width: '27px', width: '27px',
}, },
@ -41,22 +42,22 @@ Network.prototype.render = function () {
}), }),
]) ])
} else if (providerName === 'mainnet') { } else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network' hoverText = t('mainnet')
iconName = 'ethereum-network' iconName = 'ethereum-network'
} else if (providerName === 'ropsten') { } else if (providerName === 'ropsten') {
hoverText = 'Ropsten Test Network' hoverText = t('ropsten')
iconName = 'ropsten-test-network' iconName = 'ropsten-test-network'
} else if (parseInt(networkNumber) === 3) { } else if (parseInt(networkNumber) === 3) {
hoverText = 'Ropsten Test Network' hoverText = t('ropsten')
iconName = 'ropsten-test-network' iconName = 'ropsten-test-network'
} else if (providerName === 'kovan') { } else if (providerName === 'kovan') {
hoverText = 'Kovan Test Network' hoverText = t('kovan')
iconName = 'kovan-test-network' iconName = 'kovan-test-network'
} else if (providerName === 'rinkeby') { } else if (providerName === 'rinkeby') {
hoverText = 'Rinkeby Test Network' hoverText = t('rinkeby')
iconName = 'rinkeby-test-network' iconName = 'rinkeby-test-network'
} else { } else {
hoverText = 'Unknown Private Network' hoverText = t('unknownNetwork')
iconName = 'unknown-private-network' iconName = 'unknown-private-network'
} }
@ -84,7 +85,7 @@ Network.prototype.render = function () {
backgroundColor: '#038789', // $blue-lagoon backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2', nonSelectBackgroundColor: '#15afb2',
}), }),
h('.network-name', 'Main Network'), h('.network-name', t('mainnet')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
]) ])
case 'ropsten-test-network': case 'ropsten-test-network':
@ -93,7 +94,7 @@ Network.prototype.render = function () {
backgroundColor: '#e91550', // $crimson backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50', nonSelectBackgroundColor: '#ec2c50',
}), }),
h('.network-name', 'Ropsten Test Net'), h('.network-name', t('ropsten')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
]) ])
case 'kovan-test-network': case 'kovan-test-network':
@ -102,7 +103,7 @@ Network.prototype.render = function () {
backgroundColor: '#690496', // $purple backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3', nonSelectBackgroundColor: '#b039f3',
}), }),
h('.network-name', 'Kovan Test Net'), h('.network-name', t('kovan')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
]) ])
case 'rinkeby-test-network': case 'rinkeby-test-network':
@ -111,7 +112,7 @@ Network.prototype.render = function () {
backgroundColor: '#ebb33f', // $tulip-tree backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e', nonSelectBackgroundColor: '#ecb23e',
}), }),
h('.network-name', 'Rinkeby Test Net'), h('.network-name', t('rinkeby')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
]) ])
default: default:
@ -123,7 +124,7 @@ Network.prototype.render = function () {
}, },
}), }),
h('.network-name', 'Private Network'), h('.network-name', t('privateNetwork')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
]) ])
} }

@ -4,6 +4,7 @@ const h = require('react-hyperscript')
const ReactMarkdown = require('react-markdown') const ReactMarkdown = require('react-markdown')
const linker = require('extension-link-enabler') const linker = require('extension-link-enabler')
const findDOMNode = require('react-dom').findDOMNode const findDOMNode = require('react-dom').findDOMNode
const t = require('../../i18n')
module.exports = Notice module.exports = Notice
@ -110,7 +111,7 @@ Notice.prototype.render = function () {
style: { style: {
marginTop: '18px', marginTop: '18px',
}, },
}, 'Accept'), }, t('accept')),
]) ])
) )
} }

@ -1,6 +1,7 @@
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const t = require('../../i18n')
const AccountPanel = require('./account-panel') const AccountPanel = require('./account-panel')
@ -39,7 +40,7 @@ PendingMsgDetails.prototype.render = function () {
// message data // message data
h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
h('.flex-column.flex-space-between', [ h('.flex-column.flex-space-between', [
h('label.font-small', 'MESSAGE'), h('label.font-small.allcaps', t('message')),
h('span.font-small', msgParams.data), h('span.font-small', msgParams.data),
]), ]),
]), ]),
@ -47,4 +48,3 @@ PendingMsgDetails.prototype.render = function () {
]) ])
) )
} }

@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const PendingTxDetails = require('./pending-msg-details') const PendingTxDetails = require('./pending-msg-details')
const t = require('../../i18n')
module.exports = PendingMsg module.exports = PendingMsg
@ -29,17 +30,14 @@ PendingMsg.prototype.render = function () {
fontWeight: 'bold', fontWeight: 'bold',
textAlign: 'center', textAlign: 'center',
}, },
}, 'Sign Message'), }, t('signMessage')),
h('.error', { h('.error', {
style: { style: {
margin: '10px', margin: '10px',
}, },
}, [ }, [
`Signing this message can have t('signNotice'),
dangerous side effects. Only sign messages from
sites you fully trust with your entire account.
This dangerous method will be removed in a future version. `,
h('a', { h('a', {
href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527', href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
style: { color: 'rgb(247, 134, 28)' }, style: { color: 'rgb(247, 134, 28)' },
@ -48,7 +46,7 @@ PendingMsg.prototype.render = function () {
const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527' const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
global.platform.openWindow({ url }) global.platform.openWindow({ url })
}, },
}, 'Read more here.'), }, t('readMore')),
]), ]),
// message details // message details
@ -58,13 +56,12 @@ PendingMsg.prototype.render = function () {
h('.flex-row.flex-space-around', [ h('.flex-row.flex-space-around', [
h('button', { h('button', {
onClick: state.cancelMessage, onClick: state.cancelMessage,
}, 'Cancel'), }, t('cancel')),
h('button', { h('button', {
onClick: state.signMessage, onClick: state.signMessage,
}, 'Sign'), }, t('sign')),
]), ]),
]) ])
) )
} }

@ -1,6 +1,7 @@
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const t = require('../../i18n')
const AccountPanel = require('./account-panel') const AccountPanel = require('./account-panel')
const BinaryRenderer = require('./binary-renderer') const BinaryRenderer = require('./binary-renderer')
@ -45,7 +46,7 @@ PendingMsgDetails.prototype.render = function () {
height: '260px', height: '260px',
}, },
}, [ }, [
h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'), h('label.font-small.allcaps', { style: { display: 'block' } }, t('message')),
h(BinaryRenderer, { h(BinaryRenderer, {
value: data, value: data,
style: { style: {
@ -57,4 +58,3 @@ PendingMsgDetails.prototype.render = function () {
]) ])
) )
} }

@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
const { conversionUtil } = require('../../conversion-util') const { conversionUtil } = require('../../conversion-util')
const t = require('../../../i18n')
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
@ -55,7 +56,7 @@ ConfirmDeployContract.prototype.onSubmit = function (event) {
if (valid && this.verifyGasParams()) { if (valid && this.verifyGasParams()) {
this.props.sendTransaction(txMeta, event) this.props.sendTransaction(txMeta, event)
} else { } else {
this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
this.setState({ submitting: false }) this.setState({ submitting: false })
} }
} }
@ -200,7 +201,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () {
return ( return (
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
@ -239,8 +240,8 @@ ConfirmDeployContract.prototype.renderTotalPlusGas = function () {
return ( return (
h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('section.flex-row.flex-center.confirm-screen-total-box ', [
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('span.confirm-screen-label', [ 'Total ' ]), h('span.confirm-screen-label', [ t('total') + ' ' ]),
h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
]), ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
@ -271,10 +272,10 @@ ConfirmDeployContract.prototype.render = function () {
// Main Send token Card // Main Send token Card
h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('div.confirm-screen-wrapper.flex-column.flex-grow', [
h('h3.flex-center.confirm-screen-header', [ h('h3.flex-center.confirm-screen-header', [
h('button.confirm-screen-back-button', { h('button.confirm-screen-back-button.allcaps', {
onClick: () => backToAccountDetail(selectedAddress), onClick: () => backToAccountDetail(selectedAddress),
}, 'BACK'), }, t('back')),
h('div.confirm-screen-title', 'Confirm Contract'), h('div.confirm-screen-title', t('confirmContract')),
h('div.confirm-screen-header-tip'), h('div.confirm-screen-header-tip'),
]), ]),
h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.flex-row.flex-center.confirm-screen-identicons', [
@ -292,7 +293,7 @@ ConfirmDeployContract.prototype.render = function () {
h('i.fa.fa-arrow-right.fa-lg'), h('i.fa.fa-arrow-right.fa-lg'),
h('div.confirm-screen-account-wrapper', [ h('div.confirm-screen-account-wrapper', [
h('i.fa.fa-file-text-o'), h('i.fa.fa-file-text-o'),
h('span.confirm-screen-account-name', 'New Contract'), h('span.confirm-screen-account-name', t('newContract')),
h('span.confirm-screen-account-number', ' '), h('span.confirm-screen-account-number', ' '),
]), ]),
]), ]),
@ -310,7 +311,7 @@ ConfirmDeployContract.prototype.render = function () {
h('div.confirm-screen-rows', [ h('div.confirm-screen-rows', [
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', fromName), h('div.confirm-screen-row-info', fromName),
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@ -318,9 +319,9 @@ ConfirmDeployContract.prototype.render = function () {
]), ]),
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', 'New Contract'), h('div.confirm-screen-row-info', t('newContract')),
]), ]),
]), ]),
@ -335,12 +336,12 @@ ConfirmDeployContract.prototype.render = function () {
onSubmit: this.onSubmit, onSubmit: this.onSubmit,
}, [ }, [
// Cancel Button // Cancel Button
h('div.cancel.btn-light.confirm-screen-cancel-button', { h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
onClick: (event) => this.cancel(event, txMeta), onClick: (event) => this.cancel(event, txMeta),
}, 'CANCEL'), }, t('cancel')),
// Accept Button // Accept Button
h('button.confirm-screen-confirm-button', ['CONFIRM']), h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
]), ]),
]) ])

@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
const { conversionUtil, addCurrencies } = require('../../conversion-util') const { conversionUtil, addCurrencies } = require('../../conversion-util')
const t = require('../../../i18n')
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
@ -165,7 +166,7 @@ ConfirmSendEther.prototype.getData = function () {
}, },
to: { to: {
address: txParams.to, address: txParams.to,
name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', name: identities[txParams.to] ? identities[txParams.to].name : t('newRecipient'),
}, },
memo: txParams.memo || '', memo: txParams.memo || '',
gasFeeInFIAT, gasFeeInFIAT,
@ -266,7 +267,7 @@ ConfirmSendEther.prototype.render = function () {
h('div.confirm-screen-rows', [ h('div.confirm-screen-rows', [
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', fromName), h('div.confirm-screen-row-info', fromName),
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@ -274,7 +275,7 @@ ConfirmSendEther.prototype.render = function () {
]), ]),
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', toName), h('div.confirm-screen-row-info', toName),
h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@ -282,7 +283,7 @@ ConfirmSendEther.prototype.render = function () {
]), ]),
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
@ -293,8 +294,8 @@ ConfirmSendEther.prototype.render = function () {
h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('section.flex-row.flex-center.confirm-screen-total-box ', [
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('span.confirm-screen-label', [ 'Total ' ]), h('span.confirm-screen-label', [ t('total') + ' ' ]),
h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
]), ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
@ -389,15 +390,15 @@ ConfirmSendEther.prototype.render = function () {
onSubmit: this.onSubmit, onSubmit: this.onSubmit,
}, [ }, [
// Cancel Button // Cancel Button
h('div.cancel.btn-light.confirm-screen-cancel-button', { h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
onClick: (event) => { onClick: (event) => {
clearSend() clearSend()
this.cancel(event, txMeta) this.cancel(event, txMeta)
}, },
}, 'CANCEL'), }, t('cancel')),
// Accept Button // Accept Button
h('button.confirm-screen-confirm-button', ['CONFIRM']), h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
]), ]),
]) ])
) )
@ -412,7 +413,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
if (valid && this.verifyGasParams()) { if (valid && this.verifyGasParams()) {
this.props.sendTransaction(txMeta, event) this.props.sendTransaction(txMeta, event)
} else { } else {
this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
this.setState({ submitting: false }) this.setState({ submitting: false })
} }
} }

@ -6,6 +6,7 @@ const tokenAbi = require('human-standard-token-abi')
const abiDecoder = require('abi-decoder') const abiDecoder = require('abi-decoder')
abiDecoder.addABI(tokenAbi) abiDecoder.addABI(tokenAbi)
const actions = require('../../actions') const actions = require('../../actions')
const t = require('../../../i18n')
const clone = require('clone') const clone = require('clone')
const Identicon = require('../identicon') const Identicon = require('../identicon')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
@ -63,8 +64,8 @@ function mapDispatchToProps (dispatch, ownProps) {
updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)), updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
editTransaction: txMeta => { editTransaction: txMeta => {
const { token: { address } } = ownProps const { token: { address } } = ownProps
const { txParams, id } = txMeta const { txParams = {}, id } = txMeta
const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) || {}
const { params = [] } = tokenData const { params = [] } = tokenData
const { value: to } = params[0] || {} const { value: to } = params[0] || {}
const { value: tokenAmountInDec } = params[1] || {} const { value: tokenAmountInDec } = params[1] || {}
@ -133,7 +134,7 @@ ConfirmSendToken.prototype.getAmount = function () {
? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2) ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
: null, : null,
token: typeof value === 'undefined' token: typeof value === 'undefined'
? 'Unknown' ? t('unknown')
: +sendTokenAmount.toFixed(decimals), : +sendTokenAmount.toFixed(decimals),
} }
@ -204,7 +205,7 @@ ConfirmSendToken.prototype.getData = function () {
}, },
to: { to: {
address: value, address: value,
name: identities[value] ? identities[value].name : 'New Recipient', name: identities[value] ? identities[value].name : t('newRecipient'),
}, },
memo: txParams.memo || '', memo: txParams.memo || '',
} }
@ -244,7 +245,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
return ( return (
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`), h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`),
@ -266,8 +267,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
? ( ? (
h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('section.flex-row.flex-center.confirm-screen-total-box ', [
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('span.confirm-screen-label', [ 'Total ' ]), h('span.confirm-screen-label', [ t('total') + ' ' ]),
h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
]), ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
@ -279,13 +280,13 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
: ( : (
h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('section.flex-row.flex-center.confirm-screen-total-box ', [
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('span.confirm-screen-label', [ 'Total ' ]), h('span.confirm-screen-label', [ t('total') + ' ' ]),
h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
]), ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} Gas`), h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${t('gas')}`),
]), ]),
]) ])
) )
@ -314,9 +315,9 @@ ConfirmSendToken.prototype.render = function () {
h('div.page-container__header', [ h('div.page-container__header', [
h('button.confirm-screen-back-button', { h('button.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta), onClick: () => editTransaction(txMeta),
}, 'Edit'), }, t('edit')),
h('div.page-container__title', 'Confirm'), h('div.page-container__title', t('confirm')),
h('div.page-container__subtitle', `Please review your transaction.`), h('div.page-container__subtitle', t('pleaseReviewTransaction')),
]), ]),
h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.flex-row.flex-center.confirm-screen-identicons', [
h('div.confirm-screen-account-wrapper', [ h('div.confirm-screen-account-wrapper', [
@ -357,7 +358,7 @@ ConfirmSendToken.prototype.render = function () {
h('div.confirm-screen-rows', [ h('div.confirm-screen-rows', [
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', fromName), h('div.confirm-screen-row-info', fromName),
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@ -365,7 +366,7 @@ ConfirmSendToken.prototype.render = function () {
]), ]),
toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', toName), h('div.confirm-screen-row-info', toName),
h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@ -383,12 +384,12 @@ ConfirmSendToken.prototype.render = function () {
onSubmit: this.onSubmit, onSubmit: this.onSubmit,
}, [ }, [
// Cancel Button // Cancel Button
h('div.cancel.btn-light.confirm-screen-cancel-button', { h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
onClick: (event) => this.cancel(event, txMeta), onClick: (event) => this.cancel(event, txMeta),
}, 'CANCEL'), }, t('cancel')),
// Accept Button // Accept Button
h('button.confirm-screen-confirm-button', ['CONFIRM']), h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
]), ]),
@ -405,7 +406,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
if (valid && this.verifyGasParams()) { if (valid && this.verifyGasParams()) {
this.props.sendTransaction(txMeta, event) this.props.sendTransaction(txMeta, event)
} else { } else {
this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
this.setState({ submitting: false }) this.setState({ submitting: false })
} }
} }

@ -4,6 +4,7 @@ const inherits = require('util').inherits
const AccountPanel = require('./account-panel') const AccountPanel = require('./account-panel')
const TypedMessageRenderer = require('./typed-message-renderer') const TypedMessageRenderer = require('./typed-message-renderer')
const t = require('../../i18n')
module.exports = PendingMsgDetails module.exports = PendingMsgDetails
@ -45,7 +46,7 @@ PendingMsgDetails.prototype.render = function () {
height: '260px', height: '260px',
}, },
}, [ }, [
h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'), h('label.font-small.allcaps', { style: { display: 'block' } }, t('youSign')),
h(TypedMessageRenderer, { h(TypedMessageRenderer, {
value: data, value: data,
style: { style: {

@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const PendingTxDetails = require('./pending-typed-msg-details') const PendingTxDetails = require('./pending-typed-msg-details')
const t = require('../../i18n')
module.exports = PendingMsg module.exports = PendingMsg
@ -26,19 +27,19 @@ PendingMsg.prototype.render = function () {
fontWeight: 'bold', fontWeight: 'bold',
textAlign: 'center', textAlign: 'center',
}, },
}, 'Sign Message'), }, t('signMessage')),
// message details // message details
h(PendingTxDetails, state), h(PendingTxDetails, state),
// sign + cancel // sign + cancel
h('.flex-row.flex-space-around', [ h('.flex-row.flex-space-around', [
h('button', { h('button.allcaps', {
onClick: state.cancelTypedMessage, onClick: state.cancelTypedMessage,
}, 'Cancel'), }, t('cancel')),
h('button', { h('button.allcaps', {
onClick: state.signTypedMessage, onClick: state.signTypedMessage,
}, 'Sign'), }, t('sign')),
]), ]),
]) ])

@ -7,6 +7,7 @@ const inherits = require('util').inherits
const actions = require('../../actions') const actions = require('../../actions')
const selectors = require('../../selectors') const selectors = require('../../selectors')
const { isValidAddress, allNull } = require('../../util') const { isValidAddress, allNull } = require('../../util')
const t = require('../../../i18n')
// const BalanceComponent = require('./balance-component') // const BalanceComponent = require('./balance-component')
const Identicon = require('../identicon') const Identicon = require('../identicon')
@ -126,14 +127,14 @@ SendTokenScreen.prototype.validate = function () {
const amount = Number(stringAmount) const amount = Number(stringAmount)
const errors = { const errors = {
to: !to ? 'Required' : null, to: !to ? t('required') : null,
amount: !amount ? 'Required' : null, amount: !amount ? t('required') : null,
gasPrice: !gasPrice ? 'Gas Price Required' : null, gasPrice: !gasPrice ? t('gasPriceRequired') : null,
gasLimit: !gasLimit ? 'Gas Limit Required' : null, gasLimit: !gasLimit ? t('gasLimitRequired') : null,
} }
if (to && !isValidAddress(to)) { if (to && !isValidAddress(to)) {
errors.to = 'Invalid address' errors.to = t('invalidAddress')
} }
const isValid = Object.entries(errors).every(([key, value]) => value === null) const isValid = Object.entries(errors).every(([key, value]) => value === null)
@ -233,11 +234,11 @@ SendTokenScreen.prototype.renderToAddressInput = function () {
'send-screen-input-wrapper--error': errorMessage, 'send-screen-input-wrapper--error': errorMessage,
}), }),
}, [ }, [
h('div', ['To:']), h('div', [t('to') + ':']),
h('input.large-input.send-screen-input', { h('input.large-input.send-screen-input', {
name: 'address', name: 'address',
list: 'addresses', list: 'addresses',
placeholder: 'Address', placeholder: t('address'),
value: to, value: to,
onChange: e => this.setState({ onChange: e => this.setState({
to: e.target.value, to: e.target.value,
@ -290,7 +291,7 @@ SendTokenScreen.prototype.renderAmountInput = function () {
}), }),
}, [ }, [
h('div.send-screen-amount-labels', [ h('div.send-screen-amount-labels', [
h('span', ['Amount']), h('span', [t('amount')]),
h(CurrencyToggle, { h(CurrencyToggle, {
currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD', currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD',
currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [], currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [],
@ -355,8 +356,8 @@ SendTokenScreen.prototype.renderGasInput = function () {
}), }),
h('div.send-screen-gas-labels', {}, [ h('div.send-screen-gas-labels', {}, [
h('span', [ h('i.fa.fa-bolt'), 'Gas fee:']), h('span', [ h('i.fa.fa-bolt'), t('gasFee') + ':']),
h('span', ['What\'s this?']), h('span', [t('whatsThis')]),
]), ]),
h('div.large-input.send-screen-gas-input', [ h('div.large-input.send-screen-gas-input', [
h(GasFeeDisplay, { h(GasFeeDisplay, {
@ -370,7 +371,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
h( h(
'div.send-screen-gas-input-customize', 'div.send-screen-gas-input-customize',
{ onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) }, { onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) },
['Customize'] [t('customize')]
), ),
]), ]),
h('div.send-screen-input-wrapper__error-message', [ h('div.send-screen-input-wrapper__error-message', [
@ -381,7 +382,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
SendTokenScreen.prototype.renderMemoInput = function () { SendTokenScreen.prototype.renderMemoInput = function () {
return h('div.send-screen-input-wrapper', [ return h('div.send-screen-input-wrapper', [
h('div', {}, ['Transaction memo (optional)']), h('div', {}, [t('transactionMemo')]),
h( h(
'input.large-input.send-screen-input', 'input.large-input.send-screen-input',
{ onChange: e => this.setState({ memo: e.target.value }) } { onChange: e => this.setState({ memo: e.target.value }) }
@ -397,10 +398,10 @@ SendTokenScreen.prototype.renderButtons = function () {
h('button.send-token__button-next.btn-secondary', { h('button.send-token__button-next.btn-secondary', {
className: !isValid && 'send-screen__send-button__disabled', className: !isValid && 'send-screen__send-button__disabled',
onClick: () => isValid && this.submit(), onClick: () => isValid && this.submit(),
}, ['Next']), }, [t('next')]),
h('button.send-token__button-cancel.btn-tertiary', { h('button.send-token__button-cancel.btn-tertiary', {
onClick: () => backToAccountDetail(selectedAddress), onClick: () => backToAccountDetail(selectedAddress),
}, ['Cancel']), }, [t('cancel')]),
]) ])
} }
@ -417,9 +418,9 @@ SendTokenScreen.prototype.render = function () {
diameter: 75, diameter: 75,
address: selectedTokenAddress, address: selectedTokenAddress,
}), }),
h('div.send-token__title', ['Send Tokens']), h('div.send-token__title', [t('sendTokens')]),
h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']), h('div.send-token__description', [t('sendTokensAnywhere')]),
h('div.send-token__balance-text', ['Your Token Balance is:']), h('div.send-token__balance-text', [t('tokenBalance')]),
h('div.send-token__token-balance', [ h('div.send-token__token-balance', [
h(TokenBalance, { token: selectedToken, balanceOnly: true }), h(TokenBalance, { token: selectedToken, balanceOnly: true }),
]), ]),

@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const CurrencyDisplay = require('./currency-display') const CurrencyDisplay = require('./currency-display')
const t = require('../../../i18n')
module.exports = GasFeeDisplay module.exports = GasFeeDisplay
@ -30,7 +31,7 @@ GasFeeDisplay.prototype.render = function () {
convertedPrefix: '$', convertedPrefix: '$',
readOnly: true, readOnly: true,
}) })
: h('div.currency-display', 'Loading...'), : h('div.currency-display', t('loading')),
h('button.send-v2__sliders-icon-container', { h('button.send-v2__sliders-icon-container', {
onClick, onClick,
@ -41,4 +42,3 @@ GasFeeDisplay.prototype.render = function () {
]) ])
} }

@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const InputNumber = require('../input-number.js') const InputNumber = require('../input-number.js')
const t = require('../../../i18n')
module.exports = GasTooltip module.exports = GasTooltip
@ -81,7 +82,7 @@ GasTooltip.prototype.render = function () {
'marginTop': '81px', 'marginTop': '81px',
}, },
}, [ }, [
h('span.gas-tooltip-label', {}, ['Gas Limit']), h('span.gas-tooltip-label', {}, [t('gasLimit')]),
h('i.fa.fa-info-circle'), h('i.fa.fa-info-circle'),
]), ]),
h(InputNumber, { h(InputNumber, {
@ -97,4 +98,3 @@ GasTooltip.prototype.render = function () {
]), ]),
]) ])
} }

@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const AccountListItem = require('./account-list-item') const AccountListItem = require('./account-list-item')
const t = require('../../../i18n')
module.exports = ToAutoComplete module.exports = ToAutoComplete
@ -92,7 +93,7 @@ ToAutoComplete.prototype.render = function () {
return h('div.send-v2__to-autocomplete', {}, [ return h('div.send-v2__to-autocomplete', {}, [
h('input.send-v2__to-autocomplete__input', { h('input.send-v2__to-autocomplete__input', {
placeholder: 'Recipient Address', placeholder: t('recipientAddress'),
className: inError ? `send-v2__error-border` : '', className: inError ? `send-v2__error-border` : '',
value: to, value: to,
onChange: event => onChange(event.target.value), onChange: event => onChange(event.target.value),
@ -111,4 +112,3 @@ ToAutoComplete.prototype.render = function () {
]) ])
} }

@ -7,6 +7,7 @@ const { qrcode } = require('qrcode-npm')
const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions') const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
const { isValidAddress } = require('../util') const { isValidAddress } = require('../util')
const SimpleDropdown = require('./dropdowns/simple-dropdown') const SimpleDropdown = require('./dropdowns/simple-dropdown')
const t = require('../../i18n')
function mapStateToProps (state) { function mapStateToProps (state) {
const { const {
@ -93,7 +94,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
})) }))
.catch(() => this.setState({ .catch(() => this.setState({
showQrCode: false, showQrCode: false,
errorMessage: 'Invalid Request', errorMessage: t('invalidRequest'),
isLoading: false, isLoading: false,
})) }))
} }
@ -125,10 +126,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {
return h('div.shapeshift-form__metadata', {}, [ return h('div.shapeshift-form__metadata', {}, [
this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'), this.renderMetadata(t('status'), limit ? t('available') : t('unavailable')),
this.renderMetadata('Limit', limit), this.renderMetadata(t('limit'), limit),
this.renderMetadata('Exchange Rate', rate), this.renderMetadata(t('exchangeRate'), rate),
this.renderMetadata('Minimum', minimum), this.renderMetadata(t('min'), minimum),
]) ])
} }
@ -142,7 +143,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
return h('div.shapeshift-form', {}, [ return h('div.shapeshift-form', {}, [
h('div.shapeshift-form__deposit-instruction', [ h('div.shapeshift-form__deposit-instruction', [
`Deposit your ${depositCoin.toUpperCase()} to the address below:`, t('depositCoin', depositCoin.toUpperCase()),
]), ]),
h('div', depositAddress), h('div', depositAddress),
@ -179,7 +180,7 @@ ShapeshiftForm.prototype.render = function () {
h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector', [
h('div.shapeshift-form__selector-label', 'Deposit'), h('div.shapeshift-form__selector-label', t('deposit')),
h(SimpleDropdown, { h(SimpleDropdown, {
selectedOption: this.state.depositCoin, selectedOption: this.state.depositCoin,
@ -199,7 +200,7 @@ ShapeshiftForm.prototype.render = function () {
h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector', [
h('div.shapeshift-form__selector-label', [ h('div.shapeshift-form__selector-label', [
'Receive', t('receive'),
]), ]),
h('div.shapeshift-form__selector-input', ['ETH']), h('div.shapeshift-form__selector-input', ['ETH']),
@ -217,7 +218,7 @@ ShapeshiftForm.prototype.render = function () {
}, [ }, [
h('div.shapeshift-form__address-input-label', [ h('div.shapeshift-form__address-input-label', [
'Your Refund Address', t('refundAddress'),
]), ]),
h('input.shapeshift-form__address-input', { h('input.shapeshift-form__address-input', {
@ -239,7 +240,7 @@ ShapeshiftForm.prototype.render = function () {
className: btnClass, className: btnClass,
disabled: !token, disabled: !token,
onClick: () => this.onBuyWithShapeShift(), onClick: () => this.onBuyWithShapeShift(),
}, ['Buy']), }, [t('buy')]),
]) ])
} }

@ -6,6 +6,7 @@ const vreme = new (require('vreme'))()
const explorerLink = require('etherscan-link').createExplorerLink const explorerLink = require('etherscan-link').createExplorerLink
const actions = require('../actions') const actions = require('../actions')
const addressSummary = require('../util').addressSummary const addressSummary = require('../util').addressSummary
const t = require('../../i18n')
const CopyButton = require('./copyButton') const CopyButton = require('./copyButton')
const EthBalance = require('./eth-balance') const EthBalance = require('./eth-balance')
@ -75,7 +76,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
value: this.props.depositAddress, value: this.props.depositAddress,
}), }),
h(Tooltip, { h(Tooltip, {
title: 'QR Code', title: t('qrCode'),
}, [ }, [
h('i.fa.fa-qrcode.pointer.pop-hover', { h('i.fa.fa-qrcode.pointer.pop-hover', {
onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)), onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
@ -135,8 +136,8 @@ ShiftListItem.prototype.renderInfo = function () {
color: '#ABA9AA', color: '#ABA9AA',
width: '100%', width: '100%',
}, },
}, `${props.depositType} to ETH via ShapeShift`), }, t('toETHviaShapeShift', [props.depositType])),
h('div', 'No deposits received'), h('div', t('noDeposits')),
h('div', { h('div', {
style: { style: {
fontSize: 'x-small', fontSize: 'x-small',
@ -158,8 +159,8 @@ ShiftListItem.prototype.renderInfo = function () {
color: '#ABA9AA', color: '#ABA9AA',
width: '100%', width: '100%',
}, },
}, `${props.depositType} to ETH via ShapeShift`), }, t('toETHviaShapeShift', [props.depositType])),
h('div', 'Conversion in progress'), h('div', t('conversionProgress')),
h('div', { h('div', {
style: { style: {
fontSize: 'x-small', fontSize: 'x-small',
@ -184,7 +185,7 @@ ShiftListItem.prototype.renderInfo = function () {
color: '#ABA9AA', color: '#ABA9AA',
width: '100%', width: '100%',
}, },
}, 'From ShapeShift'), }, t('fromShapeShift')),
h('div', formatDate(props.time)), h('div', formatDate(props.time)),
h('div', { h('div', {
style: { style: {
@ -196,7 +197,7 @@ ShiftListItem.prototype.renderInfo = function () {
]) ])
case 'failed': case 'failed':
return h('span.error', '(Failed)') return h('span.error', '(' + t('failed') + ')')
default: default:
return '' return ''
} }

@ -9,6 +9,7 @@ const classnames = require('classnames')
const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
const actions = require('../actions') const actions = require('../actions')
const t = require('../../i18n')
const { conversionUtil } = require('../conversion-util') const { conversionUtil } = require('../conversion-util')
const { const {
@ -54,7 +55,7 @@ SignatureRequest.prototype.renderHeader = function () {
h('div.request-signature__header-background'), h('div.request-signature__header-background'),
h('div.request-signature__header__text', 'Signature Request'), h('div.request-signature__header__text', t('sigRequest')),
h('div.request-signature__header__tip-container', [ h('div.request-signature__header__tip-container', [
h('div.request-signature__header__tip'), h('div.request-signature__header__tip'),
@ -75,7 +76,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {
return h('div.request-signature__account', [ return h('div.request-signature__account', [
h('div.request-signature__account-text', ['Account:']), h('div.request-signature__account-text', [t('account') + ':']),
h(AccountDropdownMini, { h(AccountDropdownMini, {
selectedAccount, selectedAccount,
@ -102,7 +103,7 @@ SignatureRequest.prototype.renderBalance = function () {
return h('div.request-signature__balance', [ return h('div.request-signature__balance', [
h('div.request-signature__balance-text', ['Balance:']), h('div.request-signature__balance-text', [t('balance')]),
h('div.request-signature__balance-value', `${balanceInEther} ETH`), h('div.request-signature__balance-value', `${balanceInEther} ETH`),
@ -136,7 +137,7 @@ SignatureRequest.prototype.renderRequestInfo = function () {
return h('div.request-signature__request-info', [ return h('div.request-signature__request-info', [
h('div.request-signature__headline', [ h('div.request-signature__headline', [
`Your signature is being requested`, t('yourSigRequested'),
]), ]),
]) ])
@ -154,21 +155,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
SignatureRequest.prototype.renderBody = function () { SignatureRequest.prototype.renderBody = function () {
let rows let rows
let notice = 'You are signing:' let notice = t('youSign') + ':'
const { txData } = this.props const { txData } = this.props
const { type, msgParams: { data } } = txData const { type, msgParams: { data } } = txData
if (type === 'personal_sign') { if (type === 'personal_sign') {
rows = [{ name: 'Message', value: this.msgHexToText(data) }] rows = [{ name: t('message'), value: this.msgHexToText(data) }]
} else if (type === 'eth_signTypedData') { } else if (type === 'eth_signTypedData') {
rows = data rows = data
} else if (type === 'eth_sign') { } else if (type === 'eth_sign') {
rows = [{ name: 'Message', value: data }] rows = [{ name: t('message'), value: data }]
notice = `Signing this message can have notice = t('signNotice')
dangerous side effects. Only sign messages from
sites you fully trust with your entire account.
This dangerous method will be removed in a future version. `
} }
return h('div.request-signature__body', {}, [ return h('div.request-signature__body', {}, [
@ -227,10 +225,10 @@ SignatureRequest.prototype.renderFooter = function () {
return h('div.request-signature__footer', [ return h('div.request-signature__footer', [
h('button.request-signature__footer__cancel-button', { h('button.request-signature__footer__cancel-button', {
onClick: cancel, onClick: cancel,
}, 'CANCEL'), }, t('cancel')),
h('button.request-signature__footer__sign-button', { h('button.request-signature__footer__sign-button', {
onClick: sign, onClick: sign,
}, 'SIGN'), }, t('sign')),
]) ])
} }
@ -250,4 +248,3 @@ SignatureRequest.prototype.render = function () {
) )
} }

@ -5,6 +5,7 @@ const TokenTracker = require('eth-token-tracker')
const TokenCell = require('./token-cell.js') const TokenCell = require('./token-cell.js')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const selectors = require('../selectors') const selectors = require('../selectors')
const t = require('../../i18n')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -42,7 +43,7 @@ TokenList.prototype.render = function () {
const { tokens, isLoading, error } = state const { tokens, isLoading, error } = state
if (isLoading) { if (isLoading) {
return this.message('Loading Tokens...') return this.message(t('loadingTokens'))
} }
if (error) { if (error) {
@ -52,7 +53,7 @@ TokenList.prototype.render = function () {
padding: '80px', padding: '80px',
}, },
}, [ }, [
'We had trouble loading your token balances. You can view them ', t('troubleTokenBalances'),
h('span.hotFix', { h('span.hotFix', {
style: { style: {
color: 'rgba(247, 134, 28, 1)', color: 'rgba(247, 134, 28, 1)',
@ -63,7 +64,7 @@ TokenList.prototype.render = function () {
url: `https://ethplorer.io/address/${userAddress}`, url: `https://ethplorer.io/address/${userAddress}`,
}) })
}, },
}, 'here'), }, t('here')),
]) ])
} }

@ -11,6 +11,7 @@ const vreme = new (require('vreme'))()
const Tooltip = require('./tooltip') const Tooltip = require('./tooltip')
const numberToBN = require('number-to-bn') const numberToBN = require('number-to-bn')
const actions = require('../actions') const actions = require('../actions')
const t = require('../../i18n')
const TransactionIcon = require('./transaction-list-item-icon') const TransactionIcon = require('./transaction-list-item-icon')
const ShiftListItem = require('./shift-list-item') const ShiftListItem = require('./shift-list-item')
@ -85,7 +86,7 @@ TransactionListItem.prototype.render = function () {
]), ]),
h(Tooltip, { h(Tooltip, {
title: 'Transaction Number', title: t('transactionNumber'),
position: 'right', position: 'right',
}, [ }, [
h('span', { h('span', {
@ -142,12 +143,12 @@ TransactionListItem.prototype.render = function () {
style: { style: {
paddingRight: '2px', paddingRight: '2px',
}, },
}, 'Taking too long?'), }, t('takesTooLong')),
h('div', { h('div', {
style: { style: {
textDecoration: 'underline', textDecoration: 'underline',
}, },
}, 'Retry with a higher gas price here'), }, t('retryWithMoreGas')),
]), ]),
]) ])
) )
@ -176,11 +177,11 @@ function recipientField (txParams, transaction, isTx, isMsg) {
let message let message
if (isMsg) { if (isMsg) {
message = 'Signature Requested' message = t('sigRequested')
} else if (txParams.to) { } else if (txParams.to) {
message = addressSummary(txParams.to) message = addressSummary(txParams.to)
} else { } else {
message = 'Contract Deployment' message = t('contractDeployment')
} }
return h('div', { return h('div', {
@ -203,7 +204,7 @@ function renderErrorOrWarning (transaction) {
// show rejected // show rejected
if (status === 'rejected') { if (status === 'rejected') {
return h('span.error', ' (Rejected)') return h('span.error', ' (' + t('rejected') + ')')
} }
if (transaction.err || transaction.warning) { if (transaction.err || transaction.warning) {
const { err, warning = {} } = transaction const { err, warning = {} } = transaction
@ -219,7 +220,7 @@ function renderErrorOrWarning (transaction) {
title: message, title: message,
position: 'bottom', position: 'bottom',
}, [ }, [
h(`span.error`, ` (Failed)`), h(`span.error`, ` (` + t('failed') + `)`),
]) ])
) )
} }
@ -231,7 +232,7 @@ function renderErrorOrWarning (transaction) {
title: message, title: message,
position: 'bottom', position: 'bottom',
}, [ }, [
h(`span.warning`, ` (Warning)`), h(`span.warning`, ` (` + t('warning') + `)`),
]) ])
} }
} }

@ -3,6 +3,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const TransactionListItem = require('./transaction-list-item') const TransactionListItem = require('./transaction-list-item')
const t = require('../../i18n')
module.exports = TransactionList module.exports = TransactionList
@ -78,10 +79,9 @@ TransactionList.prototype.render = function () {
style: { style: {
marginTop: '50px', marginTop: '50px',
}, },
}, 'No transaction history.'), }, t('noTransactionHistory')),
]), ]),
]), ]),
]) ])
) )
} }

@ -13,6 +13,7 @@ const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
const { calcTokenAmount } = require('../token-util') const { calcTokenAmount } = require('../token-util')
const { getCurrentCurrency } = require('../selectors') const { getCurrentCurrency } = require('../selectors')
const t = require('../../i18n')
module.exports = connect(mapStateToProps)(TxListItem) module.exports = connect(mapStateToProps)(TxListItem)
@ -63,7 +64,7 @@ TxListItem.prototype.getAddressText = function () {
default: default:
return address return address
? `${address.slice(0, 10)}...${address.slice(-4)}` ? `${address.slice(0, 10)}...${address.slice(-4)}`
: 'Contract Deployment' : t('contractDeployment')
} }
} }

@ -10,6 +10,7 @@ const { formatDate } = require('../util')
const { showConfTxPage } = require('../actions') const { showConfTxPage } = require('../actions')
const classnames = require('classnames') const classnames = require('classnames')
const { tokenInfoGetter } = require('../token-util') const { tokenInfoGetter } = require('../token-util')
const t = require('../../i18n')
module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList) module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
@ -56,7 +57,7 @@ TxList.prototype.renderTransaction = function () {
: [h( : [h(
'div.tx-list-item.tx-list-item--empty', 'div.tx-list-item.tx-list-item--empty',
{ key: 'tx-list-none' }, { key: 'tx-list-none' },
[ 'No Transactions' ], [ t('noTransactions') ],
)] )]
} }
@ -107,7 +108,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
if (isUnapproved) { if (isUnapproved) {
opts.onClick = () => showConfTxPage({id: transActionId}) opts.onClick = () => showConfTxPage({id: transActionId})
opts.transactionStatus = 'Not Started' opts.transactionStatus = t('Not Started')
} else if (transactionHash) { } else if (transactionHash) {
opts.onClick = () => this.view(transactionHash, transactionNetworkId) opts.onClick = () => this.view(transactionHash, transactionNetworkId)
} }

@ -5,6 +5,7 @@ const ethUtil = require('ethereumjs-util')
const inherits = require('util').inherits const inherits = require('util').inherits
const actions = require('../actions') const actions = require('../actions')
const selectors = require('../selectors') const selectors = require('../selectors')
const t = require('../../i18n')
const BalanceComponent = require('./balance-component') const BalanceComponent = require('./balance-component')
const TxList = require('./tx-list') const TxList = require('./tx-list')
@ -68,25 +69,25 @@ TxView.prototype.renderButtons = function () {
return !selectedToken return !selectedToken
? ( ? (
h('div.flex-row.flex-center.hero-balance-buttons', [ h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear.hero-balance-button', { h('button.btn-clear.hero-balance-button.allcaps', {
onClick: () => showModal({ onClick: () => showModal({
name: 'DEPOSIT_ETHER', name: 'DEPOSIT_ETHER',
}), }),
}, 'DEPOSIT'), }, t('deposit')),
h('button.btn-clear.hero-balance-button', { h('button.btn-clear.hero-balance-button.allcaps', {
style: { style: {
marginLeft: '0.8em', marginLeft: '0.8em',
}, },
onClick: showSendPage, onClick: showSendPage,
}, 'SEND'), }, t('send')),
]) ])
) )
: ( : (
h('div.flex-row.flex-center.hero-balance-buttons', [ h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear.hero-balance-button', { h('button.btn-clear.hero-balance-button', {
onClick: showSendTokenPage, onClick: showSendTokenPage,
}, 'SEND'), }, t('send')),
]) ])
) )
} }
@ -100,9 +101,10 @@ TxView.prototype.render = function () {
h('div.flex-row.phone-visible', { h('div.flex-row.phone-visible', {
style: { style: {
margin: '1.5em 1.2em 0',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
flex: '0 0 auto',
margin: '10px',
}, },
}, [ }, [
@ -110,11 +112,10 @@ TxView.prototype.render = function () {
style: { style: {
fontSize: '1.3em', fontSize: '1.3em',
cursor: 'pointer', cursor: 'pointer',
padding: '10px',
}, },
onClick: () => { onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() }),
},
}, []),
h('.identicon-wrapper.select-none', { h('.identicon-wrapper.select-none', {
style: { style: {

@ -11,6 +11,7 @@ const actions = require('../actions')
const BalanceComponent = require('./balance-component') const BalanceComponent = require('./balance-component')
const TokenList = require('./token-list') const TokenList = require('./token-list')
const selectors = require('../selectors') const selectors = require('../selectors')
const t = require('../../i18n')
module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
@ -116,7 +117,7 @@ WalletView.prototype.render = function () {
onClick: hideSidebar, onClick: hideSidebar,
}), }),
h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''), h('div.wallet-view__keyring-label.allcaps', isLoose ? t('imported') : ''),
h('div.flex-column.flex-center.wallet-view__name-container', { h('div.flex-column.flex-center.wallet-view__name-container', {
style: { margin: '0 auto' }, style: { margin: '0 auto' },
@ -133,13 +134,13 @@ WalletView.prototype.render = function () {
selectedIdentity.name, selectedIdentity.name,
]), ]),
h('button.btn-clear.wallet-view__details-button', 'DETAILS'), h('button.btn-clear.wallet-view__details-button.allcaps', t('details')),
]), ]),
]), ]),
h(Tooltip, { h(Tooltip, {
position: 'bottom', position: 'bottom',
title: this.state.hasCopied ? 'Copied!' : 'Copy to clipboard', title: this.state.hasCopied ? t('copiedExclamation') : t('copyToClipboard'),
wrapperClassName: 'wallet-view__tooltip', wrapperClassName: 'wallet-view__tooltip',
}, [ }, [
h('button.wallet-view__address', { h('button.wallet-view__address', {
@ -172,7 +173,7 @@ WalletView.prototype.render = function () {
showAddTokenPage() showAddTokenPage()
hideSidebar() hideSidebar()
}, },
}, 'Add Token'), }, t('addToken')),
]) ])
} }

@ -5,9 +5,6 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: .3em .9em 0;
// height: 80vh;
// max-height: 225px;
flex: 0 0 auto; flex: 0 0 auto;
} }

@ -55,3 +55,6 @@
@import './new-account.scss'; @import './new-account.scss';
@import './tooltip.scss'; @import './tooltip.scss';
@import './welcome-screen.scss';

@ -641,32 +641,40 @@
&__buy-rows { &__buy-rows {
width: 100%; width: 100%;
padding: 33px; padding: 0 30px;
padding-top: 0px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
flex: 1; flex: 1;
overflow-y: auto;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
height: 0; height: 0;
} }
} }
&__logo {
height: 60px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__buy-row { &__buy-row {
border-bottom: 1px solid $alto; border-bottom: 1px solid $alto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex: 1; flex: 1 0 auto;
padding-bottom: 25px; padding: 30px 0 20px;
padding-top: 25px; min-height: 170px;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
min-height: 360px; min-height: 270px;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: flex-start;
padding-top: 45px;
} }
&__back { &__back {
@ -692,30 +700,35 @@
} }
} }
&__logo { &__logo-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex: 0.3 1 auto; flex: 0 0 auto;
padding: 0 20px;
@media screen and (min-width: 575px) { @media screen and (min-width: 576px) {
min-width: 215px; width: 12rem;
}
@media screen and (max-width: 575px) {
width: 100%;
max-height: 6rem;
padding-bottom: 20px;
} }
} }
&__coinbase-logo { &__coinbase-logo {
height: 40px; height: 40px;
width: 180px;
} }
&__shapeshift-logo { &__shapeshift-logo {
height: 60px; height: 60px;
width: 174px;
} }
&__eth-logo { &__eth-logo {
border-radius: 50%; border-radius: 50%;
width: 68px;
height: 68px; height: 68px;
width: 68px;
border: 3px solid $tundora; border: 3px solid $tundora;
z-index: 25; z-index: 25;
padding: 4px; padding: 4px;
@ -728,10 +741,11 @@
&__description { &__description {
color: $cape-cod; color: $cape-cod;
flex: 0.5 1 auto; padding-bottom: 20px;
align-self: flex-start;
@media screen and (min-width: 575px) { @media screen and (min-width: 575px) {
min-width: 315px; width: 15rem;
} }
&__title { &__title {

@ -161,15 +161,14 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
padding: 30px 30px 0;
&__input-label { &__input-label {
color: $scorpion; color: $scorpion;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
margin-top: 29px;
align-self: flex-start; align-self: flex-start;
margin-left: 30px;
} }
&__input { &__input {
@ -190,7 +189,7 @@
margin-top: 39px; margin-top: 39px;
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-evenly; justify-content: space-between;
} }
&__button-cancel, &__button-cancel,

@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px;
} }
// wallet view and sidebar // wallet view and sidebar
@ -291,7 +292,6 @@ $wallet-view-bg: $alabaster;
padding-right: 6px; padding-right: 6px;
} }
// first time // first time
.first-view-main { .first-view-main {
display: flex; display: flex;
@ -314,3 +314,22 @@ $wallet-view-bg: $alabaster;
width: 62vw; width: 62vw;
} }
} }
.unlock-screen-container {
z-index: $main-container-z-index;
font-family: Roboto;
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
background: #f7f7f7;
width: 100%;
}
.unlock-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 0 auto;
}

@ -0,0 +1,59 @@
.welcome-screen {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
font-family: Roboto;
font-weight: 400;
width: 100%;
flex: 1 0 auto;
padding: 70px 0;
background: $white;
@media screen and (max-width: 575px) {
padding: 0;
}
&__info {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
align-items: center;
&__header {
font-size: 1.65em;
margin-bottom: 14px;
@media screen and (max-width: 575px) {
font-size: 1.5em;
}
}
&__copy {
font-size: 1em;
width: 400px;
max-width: 90vw;
text-align: center;
@media screen and (max-width: 575px) {
font-size: 0.9em;
}
}
}
&__button {
height: 54px;
width: 198px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
color: #FFFFFF;
font-size: 20px;
font-weight: 500;
line-height: 26px;
text-align: center;
text-transform: uppercase;
margin: 35px 0 14px;
transition: 200ms ease-in-out;
background-color: rgba(247, 134, 28, 0.9);
}
}

@ -70,6 +70,10 @@ input.large-input {
height: 36px; height: 36px;
} }
.allcaps {
text-transform: uppercase;
}
.page-container { .page-container {
width: 400px; width: 400px;
background-color: $white; background-color: $white;
@ -77,25 +81,30 @@ input.large-input {
z-index: 25; z-index: 25;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border-radius: 7px;
height: 100%;
&__header { &__header {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border-bottom: 1px solid $geyser; border-bottom: 1px solid $geyser;
padding: 1.15rem 0.95rem; padding: 20px;
flex: 0 0 auto; flex: 0 0 auto;
background: $alabaster;
position: relative; position: relative;
} }
&__header-close::after { &__header-close {
content: '\00D7';
font-size: 40px;
color: $tundora; color: $tundora;
position: absolute; position: absolute;
top: 21.5px; top: 20px;
right: 28.5px; right: 20px;
cursor: pointer; cursor: pointer;
overflow: hidden;
&::after {
content: '\00D7';
font-size: 40px;
}
} }
&__footer { &__footer {
@ -114,7 +123,7 @@ input.large-input {
&__footer-button { &__footer-button {
width: 165px; width: 165px;
height: 60px; height: 55px;
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
margin-right: 1rem; margin-right: 1rem;
@ -130,7 +139,7 @@ input.large-input {
font-family: Roboto; font-family: Roboto;
font-size: 2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
line-height: initial; line-height: 2rem;
} }
&__subtitle { &__subtitle {
@ -174,6 +183,15 @@ input.large-input {
} }
} }
} }
&--full-width {
width: initial;
}
&__content {
height: 100%;
overflow-y: auto;
}
} }
@media screen and (max-width: 250px) { @media screen and (max-width: 250px) {
@ -200,5 +218,6 @@ input.large-input {
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
background-color: $white; background-color: $white;
border-radius: 0;
} }
} }

@ -6,6 +6,7 @@ const h = require('react-hyperscript')
const Mascot = require('../components/mascot') const Mascot = require('../components/mascot')
const actions = require('../actions') const actions = require('../actions')
const Tooltip = require('../components/tooltip') const Tooltip = require('../components/tooltip')
const t = require('../../i18n')
const getCaretCoordinates = require('textarea-caret') const getCaretCoordinates = require('textarea-caret')
const environmentType = require('../../../app/scripts/lib/environment-type') const environmentType = require('../../../app/scripts/lib/environment-type')
const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
@ -59,7 +60,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
color: '#7F8082', color: '#7F8082',
marginBottom: 10, marginBottom: 10,
}, },
}, 'MetaMask'), }, t('appName')),
h('div', [ h('div', [
@ -69,10 +70,10 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
color: '#7F8082', color: '#7F8082',
display: 'inline', display: 'inline',
}, },
}, 'Encrypt your new DEN'), }, t('encryptNewDen')),
h(Tooltip, { h(Tooltip, {
title: 'Your DEN is your password-encrypted storage within MetaMask.', title: t('denExplainer'),
}, [ }, [
h('i.fa.fa-question-circle.pointer', { h('i.fa.fa-question-circle.pointer', {
style: { style: {
@ -92,7 +93,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
h('input.large-input.letter-spacey', { h('input.large-input.letter-spacey', {
type: 'password', type: 'password',
id: 'password-box', id: 'password-box',
placeholder: 'New Password (min 8 chars)', placeholder: t('newPassword'),
onInput: this.inputChanged.bind(this), onInput: this.inputChanged.bind(this),
style: { style: {
width: 260, width: 260,
@ -104,7 +105,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
h('input.large-input.letter-spacey', { h('input.large-input.letter-spacey', {
type: 'password', type: 'password',
id: 'password-box-confirm', id: 'password-box-confirm',
placeholder: 'Confirm Password', placeholder: t('confirmPassword'),
onKeyPress: this.createVaultOnEnter.bind(this), onKeyPress: this.createVaultOnEnter.bind(this),
onInput: this.inputChanged.bind(this), onInput: this.inputChanged.bind(this),
style: { style: {
@ -119,7 +120,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
style: { style: {
margin: 12, margin: 12,
}, },
}, 'Create'), }, t('createDen')),
h('.flex-row.flex-center.flex-grow', [ h('.flex-row.flex-center.flex-grow', [
h('p.pointer', { h('p.pointer', {
@ -129,7 +130,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
color: 'rgb(247, 134, 28)', color: 'rgb(247, 134, 28)',
textDecoration: 'underline', textDecoration: 'underline',
}, },
}, 'Import Existing DEN'), }, t('importDen')),
]), ]),
h('.flex-row.flex-center.flex-grow', [ h('.flex-row.flex-center.flex-grow', [
@ -178,12 +179,12 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
var passwordConfirm = passwordConfirmBox.value var passwordConfirm = passwordConfirmBox.value
if (password.length < 8) { if (password.length < 8) {
this.warning = 'password not long enough' this.warning = t('passwordShort')
this.props.dispatch(actions.displayWarning(this.warning)) this.props.dispatch(actions.displayWarning(this.warning))
return return
} }
if (password !== passwordConfirm) { if (password !== passwordConfirm) {
this.warning = 'passwords don\'t match' this.warning = t('passwordMismatch')
this.props.dispatch(actions.displayWarning(this.warning)) this.props.dispatch(actions.displayWarning(this.warning))
return return
} }

@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
return h(Settings, {key: 'config'}) return h(Settings, {key: 'config'})
default: default:
log.debug('rendering locked screen') log.debug('rendering locked screen')
contents = { return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
component: UnlockScreen,
style: {
boxShadow: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#F7F7F7',
// must force 100%, because lock screen is full-width
width: '100%',
},
key: 'locked',
}
} }
} }

@ -44,6 +44,7 @@ function reduceMetamask (state, action) {
featureFlags: {}, featureFlags: {},
networkEndpointType: OLD_UI_NETWORK_TYPE, networkEndpointType: OLD_UI_NETWORK_TYPE,
isRevealingSeedWords: false, isRevealingSeedWords: false,
welcomeScreenSeen: false,
}, state.metamask) }, state.metamask)
switch (action.type) { switch (action.type) {
@ -347,6 +348,11 @@ function reduceMetamask (state, action) {
networkEndpointType: action.value, networkEndpointType: action.value,
}) })
case actions.CLOSE_WELCOME_SCREEN:
return extend(metamaskState, {
welcomeScreenSeen: true,
})
default: default:
return metamaskState return metamaskState

@ -5,6 +5,7 @@ const connect = require('react-redux').connect
const actions = require('./actions') const actions = require('./actions')
const getCaretCoordinates = require('textarea-caret') const getCaretCoordinates = require('textarea-caret')
const EventEmitter = require('events').EventEmitter const EventEmitter = require('events').EventEmitter
const t = require('../i18n')
const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
const environmentType = require('../../app/scripts/lib/environment-type') const environmentType = require('../../app/scripts/lib/environment-type')
@ -28,83 +29,72 @@ UnlockScreen.prototype.render = function () {
const state = this.props const state = this.props
const warning = state.warning const warning = state.warning
return ( return (
h('.flex-column', { h('.unlock-screen', [
style: {
width: 'inherit', h(Mascot, {
}, animationEventEmitter: this.animationEventEmitter,
}, [ }),
h('.unlock-screen.flex-column.flex-center.flex-grow', [
h('h1', {
h(Mascot, { style: {
animationEventEmitter: this.animationEventEmitter, fontSize: '1.4em',
}), textTransform: 'uppercase',
color: '#7F8082',
h('h1', { },
style: { }, t('appName')),
fontSize: '1.4em',
textTransform: 'uppercase', h('input.large-input', {
color: '#7F8082', type: 'password',
}, id: 'password-box',
}, 'MetaMask'), placeholder: 'enter password',
style: {
h('input.large-input', { background: 'white',
type: 'password', },
id: 'password-box', onKeyPress: this.onKeyPress.bind(this),
placeholder: 'enter password', onInput: this.inputChanged.bind(this),
style: { }),
background: 'white',
}, h('.error', {
onKeyPress: this.onKeyPress.bind(this), style: {
onInput: this.inputChanged.bind(this), display: warning ? 'block' : 'none',
}), padding: '0 20px',
textAlign: 'center',
h('.error', { },
style: { }, warning),
display: warning ? 'block' : 'none',
padding: '0 20px', h('button.primary.cursor-pointer', {
textAlign: 'center', onClick: this.onSubmit.bind(this),
}, style: {
}, warning), margin: 10,
},
h('button.primary.cursor-pointer', { }, 'Log In'),
onClick: this.onSubmit.bind(this),
style: { h('p.pointer', {
margin: 10, onClick: () => {
}, this.props.dispatch(actions.markPasswordForgotten())
}, 'Log In'), if (environmentType() === 'popup') {
]), global.platform.openExtensionInBrowser()
}
h('.flex-row.flex-center.flex-grow', [ },
h('p.pointer', { style: {
onClick: () => { fontSize: '0.8em',
this.props.dispatch(actions.markPasswordForgotten()) color: 'rgb(247, 134, 28)',
if (environmentType() === 'popup') { textDecoration: 'underline',
global.platform.openExtensionInBrowser() },
} }, 'Restore from seed phrase'),
},
style: { h('p.pointer', {
fontSize: '0.8em', onClick: () => {
color: 'rgb(247, 134, 28)', this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
textDecoration: 'underline', .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
}, },
}, 'Restore from seed phrase'), style: {
]), fontSize: '0.8em',
color: '#aeaeae',
h('.flex-row.flex-center.flex-grow', [ textDecoration: 'underline',
h('p.pointer', { marginTop: '32px',
onClick: () => { },
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) }, 'Use classic interface'),
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, 'Use classic interface'),
]),
]) ])
) )
} }

@ -0,0 +1,56 @@
import EventEmitter from 'events'
import h from 'react-hyperscript'
import { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {closeWelcomeScreen} from './actions'
import Mascot from './components/mascot'
class WelcomeScreen extends Component {
static propTypes = {
closeWelcomeScreen: PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.animationEventEmitter = new EventEmitter()
}
initiateAccountCreation = () => {
this.props.closeWelcomeScreen()
}
render () {
return h('div.welcome-screen', [
h('div.welcome-screen__info', [
h(Mascot, {
animationEventEmitter: this.animationEventEmitter,
width: '225',
height: '225',
}),
h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta'),
h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'),
h('div.welcome-screen__info__copy', `It allows you to hold ether & tokens,
and serves as your bridge to decentralized applications.`),
h('button.welcome-screen__button', {
onClick: this.initiateAccountCreation,
}, 'Continue'),
]),
])
}
}
export default connect(
null,
dispatch => ({
closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
})
)(WelcomeScreen)

@ -0,0 +1,33 @@
// cross-browser connection to extension i18n API
const chrome = chrome || null
const browser = browser || null
const extension = require('extensionizer')
var log = require('loglevel')
window.log = log
let getMessage
if (extension.i18n && extension.i18n.getMessage) {
getMessage = extension.i18n.getMessage
} else {
// fallback function
log.warn('browser.i18n API not available, calling back to english.')
const msg = require('../app/_locales/en/messages.json')
getMessage = function (key, substitutions) {
if (!msg[key]) {
log.error(key)
throw new Error(key)
}
let phrase = msg[key].message
if (substitutions && substitutions.length) {
phrase = phrase.replace(/\$1/g, substitutions[0])
if (substitutions.length > 1) {
phrase = phrase.replace(/\$2/g, substitutions[1])
}
}
return phrase
}
}
module.exports = getMessage

12549
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save