diff --git a/CHANGELOG.md b/CHANGELOG.md index e5735acd8..c61d566b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## Current Develop Branch +## 4.9.3 Wed Aug 15 2018 + +- (#4897)[https://github.com/MetaMask/metamask-extension/pull/4897]: QR code scan for recipient addresses. +- (#4961)[https://github.com/MetaMask/metamask-extension/pull/4961]: Add a download seed phrase link. +- (#5060)[https://github.com/MetaMask/metamask-extension/pull/5060]: Fix bug where gas was not updating properly. + ## 4.9.2 Mon Aug 09 2018 - [#5020](https://github.com/MetaMask/metamask-extension/pull/5020): Fix bug in migration #28 ( moving tokens to specific accounts ) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 1d2619672..c06a99250 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -84,7 +84,7 @@ "message": "Auf Coinbase kaufen" }, "buyCoinbaseExplainer": { - "message": "Coinbase ist die weltweit bekannteste Art und Weise um bitcoin, ethereum und litecoin zu kaufen und verkaufen." + "message": "Coinbase ist die weltweit bekannteste Art und Weise um Bitcoin, Ethereum und Litecoin zu kaufen und verkaufen." }, "ok": { "message": "Ok" @@ -828,7 +828,7 @@ "message": "Willkommen zur neuen Oberfläche (Beta)" }, "uiWelcomeMessage": { - "message": "Du verwendest nun die neue Metamask Oberfläche. Schau dich um, teste die neuen Features wie z.B. das Senden von Token und lass es uns wissen falls du irgendwelche Probleme hast." + "message": "Du verwendest nun die neue MetaMask Oberfläche. Schau dich um, teste die neuen Features wie z.B. das Senden von Token und lass es uns wissen falls du irgendwelche Probleme hast." }, "unapproved": { "message": "Nicht genehmigt" diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 1b0183c92..ddfcf6f12 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2,6 +2,9 @@ "accept": { "message": "Accept" }, + "accessingYourCamera": { + "message": "Accesing your camera..." + }, "account": { "message": "Account" }, @@ -96,7 +99,7 @@ "message": "Buy on Coinbase" }, "buyCoinbaseExplainer": { - "message": "Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin." + "message": "Coinbase is the world’s most popular way to buy and sell Bitcoin, Ethereum, and Litecoin." }, "bytes": { "message": "Bytes" @@ -117,7 +120,7 @@ "message": "Close" }, "chromeRequiredForTrezor":{ - "message": "You need to use Metamask on Google Chrome in order to connect to your TREZOR device." + "message": "You need to use MetaMask on Google Chrome in order to connect to your TREZOR device." }, "confirm": { "message": "Confirm" @@ -147,7 +150,7 @@ "message": "Connect to Trezor" }, "connectToTrezorHelp": { - "message": "Metamask is able to access your TREZOR ethereum accounts. First make sure your device is connected and unlocked." + "message": "MetaMask is able to access your TREZOR Ethereum accounts. First make sure your device is connected and unlocked." }, "connectToTrezorTrouble": { "message": "If you are having trouble, please make sure you are using the latest version of the TREZOR firmware." @@ -656,6 +659,12 @@ "notStarted": { "message": "Not Started" }, + "noWebcamFoundTitle": { + "message": "Webcam not found" + }, + "noWebcamFound": { + "message": "Your computer's webcam was not found. Please try again." + }, "oldUI": { "message": "Old UI" }, @@ -940,6 +949,12 @@ "info": { "message": "Info" }, + "scanInstructions": { + "message": "Place the QR code in front of your camera" + }, + "scanQrCode": { + "message": "Scan QR Code" + }, "shapeshiftBuy": { "message": "Buy with Shapeshift" }, @@ -1059,6 +1074,9 @@ "message": "We had trouble loading your token balances. You can view them ", "description": "Followed by a link (here) to view token balances" }, + "tryAgain": { + "message": "Try again" + }, "twelveWords": { "message": "These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret." }, @@ -1069,7 +1087,7 @@ "message": "Welcome to the New UI (Beta)" }, "uiWelcomeMessage": { - "message": "You are now using the new Metamask UI." + "message": "You are now using the new MetaMask UI." }, "unapproved": { "message": "Unapproved" @@ -1089,6 +1107,15 @@ "unknownNetworkId": { "message": "Unknown network ID" }, + "unknownQrCode": { + "message": "Error: We couldn't identify that QR code" + }, + "unknownCameraErrorTitle": { + "message": "Ooops! Something went wrong...." + }, + "unknownCameraError": { + "message": "There was an error while trying to access you camera. Please try again..." + }, "unlock": { "message": "Unlock" }, @@ -1135,6 +1162,9 @@ "whatsThis": { "message": "What's this?" }, + "youNeedToAllowCameraAccess": { + "message": "You need to allow camera access to use this feature." + }, "yourSigRequested": { "message": "Your signature is being requested" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index f287674f1..ed7f8f681 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -75,7 +75,7 @@ "message": "Pedir prestado con Dharma (Beta)" }, "builtInCalifornia": { - "message": "Metamask fue diseñado y construido en California" + "message": "MetaMask fue diseñado y construido en California" }, "buy": { "message": "Comprar" @@ -874,7 +874,7 @@ "message": "Advertencia" }, "welcomeBeta": { - "message": "Bienvenido a Metamask Beta" + "message": "Bienvenido a MetaMask Beta" }, "whatsThis": { "message": "¿Qué es esto?" diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index da2cfe4f8..1463e2b5f 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -63,7 +63,7 @@ "message": "Acheter sur Coinbase" }, "buyCoinbaseExplainer": { - "message": "Coinbase est le moyen le plus populaire au monde d'acheter et de vendre du bitcoin, de l'ethereum et du litecoin." + "message": "Coinbase est le moyen le plus populaire au monde d'acheter et de vendre du Bitcoin, de l'Ethereum et du Litecoin." }, "cancel": { "message": "Annuler" @@ -570,7 +570,7 @@ "message": "Bienvenue dans la nouvelle interface utilisateur (Beta)" }, "uiWelcomeMessage": { - "message": "Vous utilisez maintenant la nouvelle interface utilisateur Metamask. Jetez un coup d'oeil, essayez de nouvelles fonctionnalités comme l'envoi de jetons, et faites-nous savoir si vous avez des problèmes." + "message": "Vous utilisez maintenant la nouvelle interface utilisateur MetaMask. Jetez un coup d'oeil, essayez de nouvelles fonctionnalités comme l'envoi de jetons, et faites-nous savoir si vous avez des problèmes." }, "unavailable": { "message": "Indisponible" diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index ef3ed4025..2ae5fae72 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -81,7 +81,7 @@ "message": "Compra su Coinbase" }, "buyCoinbaseExplainer": { - "message": "Coinbase è il servizio più popolare al mondo per comprare e vendere bitcoin, ethereum e litecoin." + "message": "Coinbase è il servizio più popolare al mondo per comprare e vendere Bitcoin, Ethereum e Litecoin." }, "cancel": { "message": "Cancella" @@ -178,7 +178,7 @@ "message": "La rete predefinita per transazioni in Ether è la Rete Ethereum Principale." }, "denExplainer": { - "message": "Il DEN è il tuo archivio crittato con password dentro Metamask." + "message": "Il DEN è il tuo archivio crittato con password dentro MetaMask." }, "deposit": { "message": "Deposita" @@ -816,4 +816,4 @@ "youSign": { "message": "Ti stai connettendo" } -} \ No newline at end of file +} diff --git a/app/_locales/nl/messages.json b/app/_locales/nl/messages.json index 38289f602..46847f1bf 100644 --- a/app/_locales/nl/messages.json +++ b/app/_locales/nl/messages.json @@ -81,7 +81,7 @@ "message": "Koop op Coinbase" }, "buyCoinbaseExplainer": { - "message": "Coinbase is 's werelds populairste manier om bitcoin, ethereum en litecoin te kopen en verkopen." + "message": "Coinbase is 's werelds populairste manier om Bitcoin, Ethereum en Litecoin te kopen en verkopen." }, "cancel": { "message": "Annuleer" @@ -435,7 +435,7 @@ "message": "back-up woorden hebben alleen kleine letters" }, "mainnet": { - "message": "belangrijkste ethereum-netwerk" + "message": "belangrijkste Ethereum-netwerk" }, "message": { "message": "Bericht" @@ -762,7 +762,7 @@ "message": "Welkom bij de nieuwe gebruikersinterface (bèta)" }, "uiWelcomeMessage": { - "message": "U gebruikt nu de nieuwe gebruikersinterface van Metamask. Kijk rond, probeer nieuwe functies uit zoals het verzenden van tokens en laat ons weten of u problemen ondervindt." + "message": "U gebruikt nu de nieuwe gebruikersinterface van MetaMask. Kijk rond, probeer nieuwe functies uit zoals het verzenden van tokens en laat ons weten of u problemen ondervindt." }, "unavailable": { "message": "Niet beschikbaar" diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json index 29d63be02..9a243447a 100644 --- a/app/_locales/ph/messages.json +++ b/app/_locales/ph/messages.json @@ -63,7 +63,7 @@ "message": "Bumili sa Coinbase" }, "buyCoinbaseExplainer": { - "message": "Ang Coinbase ang pinakasikat na paraan upang bumili at magbenta ng bitcoin, ethereum, at litecoin sa buong mundo." + "message": "Ang Coinbase ang pinakasikat na paraan upang bumili at magbenta ng Bitcoin, Ethereum, at Litecoin sa buong mundo." }, "cancel": { "message": "Kanselahin" diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index e770392d0..6f0bb1584 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -81,7 +81,7 @@ "message": "Comprar no Coinbase" }, "buyCoinbaseExplainer": { - "message": "Coinbase é a forma mais conhecida para comprar e vender bitcoin, ethereum, e litecoin." + "message": "Coinbase é a forma mais conhecida para comprar e vender Bitcoin, Ethereum, e Litecoin." }, "cancel": { "message": "Cancelar" diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index b43251064..bb722735d 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -84,7 +84,7 @@ "message": "Купить на Coinbase" }, "buyCoinbaseExplainer": { - "message": "Биржа Coinbase – это наиболее популярный способ купить или продать bitcoin, ethereum и litecoin." + "message": "Биржа Coinbase – это наиболее популярный способ купить или продать Bitcoin, Ethereum и Litecoin." }, "ok": { "message": "ОК" diff --git a/app/_locales/th/messages.json b/app/_locales/th/messages.json index 3d7dec226..c9aaa0394 100644 --- a/app/_locales/th/messages.json +++ b/app/_locales/th/messages.json @@ -762,7 +762,7 @@ "message": "ยินดีต้อนรับสู่หน้าตาใหม่ (เบต้า)" }, "uiWelcomeMessage": { - "message": "ขณะนี้คุณใช้งาน Metamask หน้าตาใหม่แล้ว ลองใช้ความสามรถใหม่ ๆ เช่นการส่งโทเค็นและหากพบปัญหากรุณาแจ้งให้เราทราบ" + "message": "ขณะนี้คุณใช้งาน MetaMask หน้าตาใหม่แล้ว ลองใช้ความสามรถใหม่ ๆ เช่นการส่งโทเค็นและหากพบปัญหากรุณาแจ้งให้เราทราบ" }, "unavailable": { "message": "ใช้งานไม่ได้" diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index c2c09bc91..08ba6cde8 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -84,7 +84,7 @@ "message": "Coinbase'de satın al" }, "buyCoinbaseExplainer": { - "message": "Coinbase bitcoin, ethereum, and litecoin alıp satmanın dünyadaki en popüler yolu" + "message": "Coinbase Bitcoin, Ethereum, and Litecoin alıp satmanın dünyadaki en popüler yolu" }, "ok": { "message": "Tamam" @@ -852,7 +852,7 @@ "message": "Yeni UI (Beta)'ya hoşgeldiniz" }, "uiWelcomeMessage": { - "message": "Şu anda yeni Metamask UI kullanmaktasınız. Gözatın, jeton gönderme gibi yeni özellikleri deneyin ve herhangi bir sorunlar karşılaşırsanız bize haber verin" + "message": "Şu anda yeni MetaMask UI kullanmaktasınız. Gözatın, jeton gönderme gibi yeni özellikleri deneyin ve herhangi bir sorunlar karşılaşırsanız bize haber verin" }, "unapproved": { "message": "Onaylanmadı" @@ -909,4 +909,4 @@ "youSign": { "message": "İmzalıyorsunuz" } -} \ No newline at end of file +} diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index cd30de4de..782dfd119 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -570,7 +570,7 @@ "message": "Chào mừng bạn đến với giao diện mới (Beta)" }, "uiWelcomeMessage": { - "message": "Bạn đang sử dụng giao diện mới của Metamask. Chúng tôi khuyến khích bạn thử nghiệm và khám phá các tính năng mới như gửi token, và nếu bạn có gặp phải vấn đề gì khó khăn, xin hãy liên hệ ngay để chúng tôi có thể giúp đỡ bạn." + "message": "Bạn đang sử dụng giao diện mới của MetaMask. Chúng tôi khuyến khích bạn thử nghiệm và khám phá các tính năng mới như gửi token, và nếu bạn có gặp phải vấn đề gì khó khăn, xin hãy liên hệ ngay để chúng tôi có thể giúp đỡ bạn." }, "unavailable": { "message": "Không có sẵn" diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 241ea948d..a39bba9da 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -879,7 +879,7 @@ "message": "欢迎使用新版界面 （Beta）" }, "uiWelcomeMessage": { - "message": "你现在正在使用新的 Metamask 界面。 尝试发送代币等新功能，有任何问题请告知我们。" + "message": "你现在正在使用新的 MetaMask 界面。 尝试发送代币等新功能，有任何问题请告知我们。" }, "unapproved": { "message": "未批准" diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index 9aaee0e16..200c75c3c 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -362,7 +362,7 @@ "message": "你想怎麼存入 Ether？" }, "holdEther": { - "message": "Metamask 讓您能保存 ether 和代幣, 並成為您接觸分散式應用程式的途徑." + "message": "MetaMask 讓您能保存 ether 和代幣, 並成為您接觸分散式應用程式的途徑." }, "import": { "message": "導入", diff --git a/app/images/webcam.svg b/app/images/webcam.svg new file mode 100644 index 000000000..4b9b58148 --- /dev/null +++ b/app/images/webcam.svg @@ -0,0 +1,18 @@ + + + + webcam + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/manifest.json b/app/manifest.json index a5ab60f08..086d5ba00 100644 --- a/app/manifest.json +++ b/app/manifest.json @@ -1,7 +1,7 @@ { "name": "__MSG_appName__", "short_name": "__MSG_appName__", - "version": "4.9.2", + "version": "4.9.3", "manifest_version": 2, "author": "https://metamask.io", "description": "__MSG_appDescription__", diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js index b7496f318..e0a2b0061 100644 --- a/app/scripts/contentscript.js +++ b/app/scripts/contentscript.js @@ -198,6 +198,6 @@ function blacklistedDomainCheck () { */ function redirectToPhishingWarning () { console.log('MetaMask - routing to Phishing Warning component') - let extensionURL = extension.runtime.getURL('phishing.html') + const extensionURL = extension.runtime.getURL('phishing.html') window.location.href = extensionURL } diff --git a/app/scripts/lib/enums.js b/app/scripts/lib/enums.js index 0a3afca47..c6d57a1bc 100644 --- a/app/scripts/lib/enums.js +++ b/app/scripts/lib/enums.js @@ -2,8 +2,19 @@ const ENVIRONMENT_TYPE_POPUP = 'popup' const ENVIRONMENT_TYPE_NOTIFICATION = 'notification' const ENVIRONMENT_TYPE_FULLSCREEN = 'fullscreen' +const PLATFORM_BRAVE = 'Brave' +const PLATFORM_CHROME = 'Chrome' +const PLATFORM_EDGE = 'Edge' +const PLATFORM_FIREFOX = 'Firefox' +const PLATFORM_OPERA = 'Opera' + module.exports = { ENVIRONMENT_TYPE_POPUP, ENVIRONMENT_TYPE_NOTIFICATION, ENVIRONMENT_TYPE_FULLSCREEN, + PLATFORM_BRAVE, + PLATFORM_CHROME, + PLATFORM_EDGE, + PLATFORM_FIREFOX, + PLATFORM_OPERA, } diff --git a/app/scripts/lib/util.js b/app/scripts/lib/util.js index 51e9036cc..d7423f2ad 100644 --- a/app/scripts/lib/util.js +++ b/app/scripts/lib/util.js @@ -5,6 +5,11 @@ const { ENVIRONMENT_TYPE_POPUP, ENVIRONMENT_TYPE_NOTIFICATION, ENVIRONMENT_TYPE_FULLSCREEN, + PLATFORM_FIREFOX, + PLATFORM_OPERA, + PLATFORM_CHROME, + PLATFORM_EDGE, + PLATFORM_BRAVE, } = require('./enums') /** @@ -37,6 +42,29 @@ const getEnvironmentType = (url = window.location.href) => { } } +/** + * Returns the platform (browser) where the extension is running. + * + * @returns {string} the platform ENUM + * + */ +const getPlatform = _ => { + const ua = navigator.userAgent + if (ua.search('Firefox') !== -1) { + return PLATFORM_FIREFOX + } else { + if (window && window.chrome && window.chrome.ipcRenderer) { + return PLATFORM_BRAVE + } else if (ua.search('Edge') !== -1) { + return PLATFORM_EDGE + } else if (ua.search('OPR') !== -1) { + return PLATFORM_OPERA + } else { + return PLATFORM_CHROME + } + } +} + /** * Checks whether a given balance of ETH, represented as a hex string, is sufficient to pay a value plus a gas fee * @@ -100,6 +128,7 @@ function BnMultiplyByFraction (targetBN, numerator, denominator) { } module.exports = { + getPlatform, getStack, getEnvironmentType, sufficientBalance, diff --git a/app/scripts/platforms/extension.js b/app/scripts/platforms/extension.js index 0803164e8..71b162dd0 100644 --- a/app/scripts/platforms/extension.js +++ b/app/scripts/platforms/extension.js @@ -24,8 +24,13 @@ class ExtensionPlatform { return extension.runtime.getManifest().version } - openExtensionInBrowser (route = null) { + openExtensionInBrowser (route = null, queryString = null) { let extensionURL = extension.runtime.getURL('home.html') + + if (queryString) { + extensionURL += `?${queryString}` + } + if (route) { extensionURL += `#${route}` } diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 09e7d378d..2d05a48b8 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -340,6 +340,19 @@ min-width: 0; } +.backup-phrase__tips-text--link { + color: #2f9ae0; + cursor: pointer; +} + +.backup-phrase__tips-text--link:hover { + color: #2f9ae0; +} + +.backup-phrase__tips-text--strong { + font-weight: bold; +} + @media only screen and (max-width: 768px) { .backup-phrase__content-wrapper { flex-direction: column; diff --git a/mascara/src/app/first-time/seed-screen.js b/mascara/src/app/first-time/seed-screen.js index d004be77b..97d5d7930 100644 --- a/mascara/src/app/first-time/seed-screen.js +++ b/mascara/src/app/first-time/seed-screen.js @@ -5,6 +5,7 @@ import classnames from 'classnames' import { withRouter } from 'react-router-dom' import { compose } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' +import {exportAsFile} from '../../../../ui/app/util' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' import { DEFAULT_ROUTE, INITIALIZE_CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes' @@ -65,6 +66,12 @@ class BackupPhraseScreen extends Component { } } + exportSeedWords = () => { + const { seedWords } = this.props + + exportAsFile('MetaMask Secret Backup Phrase', seedWords, 'text/plain') + } + renderSecretWordsContainer () { const { isShowingSecret } = this.state @@ -111,7 +118,7 @@ class BackupPhraseScreen extends Component {
Tips:
- Store this phrase in a password manager like 1password. + Store this phrase in a password manager like 1Password.
Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations. @@ -119,6 +126,13 @@ class BackupPhraseScreen extends Component {
Memorize this phrase.
+
+ + + Download this Secret Backup Phrase + + and keep it stored safely on an external encrypted hard drive or storage medium. +
- Not yet deployed + Not clicked
diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js index 5582d4697..e14ee2361 100644 --- a/test/e2e/beta/from-import-beta-ui.spec.js +++ b/test/e2e/beta/from-import-beta-ui.spec.js @@ -89,7 +89,14 @@ describe('Using MetaMask with an existing account', function () { await driver.wait(until.stalenessOf(overlay)) } catch (e) {} - const button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) + let button + try { + button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) + } catch (e) { + await loadExtension(driver, extensionId) + await delay(largeDelayMs) + button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) + } await button.click() await delay(regularDelayMs) diff --git a/test/e2e/beta/helpers.js b/test/e2e/beta/helpers.js index 828f87db7..d90cd5d66 100644 --- a/test/e2e/beta/helpers.js +++ b/test/e2e/beta/helpers.js @@ -122,12 +122,14 @@ async function closeAllWindowHandlesExcept (driver, exceptions, windowHandles) { } async function assertElementNotPresent (webdriver, driver, by) { + let dataTab try { - const dataTab = await findElement(driver, by, 4000) - if (dataTab) { - assert(false, 'Data tab should not be present') - } + dataTab = await findElement(driver, by, 4000) } catch (err) { - assert(err instanceof webdriver.error.NoSuchElementError) + console.log(err) + assert(err instanceof webdriver.error.NoSuchElementError || err instanceof webdriver.error.TimeoutError) + } + if (dataTab) { + assert(false, 'Data tab should not be present') } } diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index 3ad5c2d61..43300bda6 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -88,7 +88,14 @@ describe('MetaMask', function () { await driver.wait(until.stalenessOf(overlay)) } catch (e) {} - const button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) + let button + try { + button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) + } catch (e) { + await loadExtension(driver, extensionId) + await delay(largeDelayMs) + button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) + } await button.click() await delay(regularDelayMs) @@ -345,8 +352,8 @@ describe('MetaMask', function () { const passwordInputs = await driver.findElements(By.css('input')) await delay(regularDelayMs) - passwordInputs[0].sendKeys('correct horse battery staple') - passwordInputs[1].sendKeys('correct horse battery staple') + await passwordInputs[0].sendKeys('correct horse battery staple') + await passwordInputs[1].sendKeys('correct horse battery staple') await driver.findElement(By.css('.first-time-flow__button')).click() await delay(regularDelayMs) }) @@ -438,7 +445,7 @@ describe('MetaMask', function () { await driver.switchTo().window(windowHandles[2]) await delay(regularDelayMs) - assertElementNotPresent(webdriver, driver, By.xpath(`//li[contains(text(), 'Data')]`)) + await assertElementNotPresent(webdriver, driver, By.xpath(`//li[contains(text(), 'Data')]`)) const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`), 10000) await confirmButton.click() @@ -453,6 +460,11 @@ describe('MetaMask', function () { const transactions = await findElements(driver, By.css('.tx-list-item')) assert.equal(transactions.length, 2) + await findElement(driver, By.xpath(`//span[contains(text(), 'Submitted')]`)) + + const txStatuses = await findElements(driver, By.css('.tx-list-status')) + await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/)) + const txValues = await findElement(driver, By.css('.tx-list-value')) await driver.wait(until.elementTextMatches(txValues, /3\sETH/), 10000) }) @@ -503,6 +515,8 @@ describe('MetaMask', function () { await confirmButton.click() await delay(regularDelayMs) + await findElement(driver, By.xpath(`//span[contains(text(), 'Submitted')]`)) + const txStatuses = await findElements(driver, By.css('.tx-list-status')) await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/)) @@ -515,15 +529,15 @@ describe('MetaMask', function () { await driver.switchTo().window(dapp) await delay(regularDelayMs) - let contractStatus = await driver.findElement(By.css('#contractStatus')) - await driver.wait(until.elementTextMatches(contractStatus, /Deployed/)) + let contractStatus = await findElement(driver, By.css('#contractStatus')) + await driver.wait(until.elementTextMatches(contractStatus, /Deployed/), 15000) const depositButton = await findElement(driver, By.css('#depositButton')) await depositButton.click() await delay(largeDelayMs) - contractStatus = await driver.findElement(By.css('#contractStatus')) - await driver.wait(until.elementTextMatches(contractStatus, /Deposit\sinitiated/)) + contractStatus = await findElement(driver, By.css('#contractStatus')) + await driver.wait(until.elementTextMatches(contractStatus, /Deposit\sinitiated/), 10000) await driver.switchTo().window(extension) await delay(largeDelayMs) @@ -539,8 +553,8 @@ describe('MetaMask', function () { await configureGas.click() await delay(regularDelayMs) - const gasModal = await driver.findElement(By.css('span .modal')) - await driver.wait(until.elementLocated(By.css('.customize-gas__title'))) + const gasModal = await findElement(driver, By.css('span .modal')) + await driver.wait(until.elementLocated(By.css('.customize-gas__title')), 10000) const [gasPriceInput, gasLimitInput] = await findElements(driver, By.css('.customize-gas-input')) await gasPriceInput.clear() diff --git a/ui/app/actions.js b/ui/app/actions.js index 9edb3511a..bd5d25327 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -12,6 +12,7 @@ const { fetchLocale } = require('../i18n-helper') const log = require('loglevel') const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums') const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util') +const WebcamUtils = require('../lib/webcam-utils') var actions = { _setBackgroundConnection: _setBackgroundConnection, @@ -33,6 +34,8 @@ var actions = { ALERT_CLOSE: 'UI_ALERT_CLOSE', showAlert: showAlert, hideAlert: hideAlert, + QR_CODE_DETECTED: 'UI_QR_CODE_DETECTED', + qrCodeDetected, // network dropdown open NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN', NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE', @@ -125,7 +128,8 @@ var actions = { SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE', SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE', SET_CURRENT_FIAT: 'SET_CURRENT_FIAT', - setCurrentCurrency: setCurrentCurrency, + showQrScanner, + setCurrentCurrency, setCurrentAccountTab, // account detail screen SHOW_SEND_PAGE: 'SHOW_SEND_PAGE', @@ -723,6 +727,28 @@ function showInfoPage () { } } +function showQrScanner (ROUTE) { + return (dispatch, getState) => { + return WebcamUtils.checkStatus() + .then(status => { + if (!status.environmentReady) { + // We need to switch to fullscreen mode to ask for permission + global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`) + } else { + dispatch(actions.showModal({ + name: 'QR_SCANNER', + })) + } + }).catch(e => { + dispatch(actions.showModal({ + name: 'QR_SCANNER', + error: true, + errorType: e.type, + })) + }) + } +} + function setCurrentCurrency (currencyCode) { return (dispatch) => { dispatch(actions.showLoadingIndication()) @@ -1809,6 +1835,17 @@ function hideAlert () { } } +/** + * This action will receive two types of values via qrCodeData + * an object with the following structure {type, values} + * or null (used to clear the previous value) + */ +function qrCodeDetected (qrCodeData) { + return { + type: actions.QR_CODE_DETECTED, + value: qrCodeData, + } +} function showLoadingIndication (message) { return { diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index b9f99b3d1..f538fd555 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -27,6 +27,7 @@ function EnsInput () { } EnsInput.prototype.onChange = function (recipient) { + const network = this.props.network const networkHasEnsSupport = getNetworkEnsSupport(network) @@ -54,6 +55,7 @@ EnsInput.prototype.render = function () { const opts = extend(props, { list: 'addresses', onChange: this.onChange.bind(this), + qrScanner: true, }) return h('div', { style: { width: '100%', position: 'relative' }, diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index e198cca44..0acccf172 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -1,5 +1,7 @@ @import './customize-gas/index'; +@import './qr-scanner/index'; + .modal-container { width: 100%; height: 100%; diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index f59825ed1..5dda50e52 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -21,6 +21,7 @@ const CustomizeGasModal = require('../customize-gas-modal') const NotifcationModal = require('./notification-modal') const ConfirmResetAccount = require('./confirm-reset-account') const ConfirmRemoveAccount = require('./confirm-remove-account') +const QRScanner = require('./qr-scanner') const TransactionConfirmed = require('./transaction-confirmed') const WelcomeBeta = require('./welcome-beta') const Notification = require('./notification') @@ -346,6 +347,18 @@ const MODALS = { borderRadius: '8px', }, }, + QR_SCANNER: { + contents: h(QRScanner), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, DEFAULT: { contents: [], diff --git a/ui/app/components/modals/qr-scanner/index.js b/ui/app/components/modals/qr-scanner/index.js new file mode 100644 index 000000000..470dee1f4 --- /dev/null +++ b/ui/app/components/modals/qr-scanner/index.js @@ -0,0 +1,2 @@ +import QrScanner from './qr-scanner.container' +module.exports = QrScanner diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss new file mode 100644 index 000000000..6fa81d51f --- /dev/null +++ b/ui/app/components/modals/qr-scanner/index.scss @@ -0,0 +1,83 @@ +.qr-scanner { + width: 100%; + height: 100%; + background-color: #fff; + display: flex; + flex-flow: column; + border-radius: 8px; + + &__title { + font-size: 1.5rem; + font-weight: 500; + padding: 16px 0; + text-align: center; + } + + &__content { + padding-left: 20px; + padding-right: 20px; + + &__video-wrapper { + overflow: hidden; + width: 100%; + height: 275px; + display: flex; + align-items: center; + justify-content: center; + + video { + transform: scaleX(-1); + width: auto; + height: 275px; + } + } + } + + &__status { + text-align: center; + font-size: 14px; + padding: 15px; + } + + &__image { + font-size: 1.5rem; + font-weight: 500; + padding: 16px 0 0; + text-align: center; + } + + &__error { + text-align: center; + font-size: 16px; + padding: 15px; + } + + &__footer { + padding: 20px; + flex-direction: row; + display: flex; + + button { + margin-right: 15px; + } + + button:last-of-type { + margin-right: 0; + background-color: #009eec; + border: none; + color: #fff; + } + } + + &__close::after { + content: '\00D7'; + font-size: 35px; + color: #9b9b9b; + position: absolute; + top: 4px; + right: 20px; + cursor: pointer; + font-weight: 300; + } +} + diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js new file mode 100644 index 000000000..cb8d07d83 --- /dev/null +++ b/ui/app/components/modals/qr-scanner/qr-scanner.component.js @@ -0,0 +1,216 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { BrowserQRCodeReader } from '@zxing/library' +import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars +import Spinner from '../../spinner' +import WebcamUtils from '../../../../lib/webcam-utils' +import PageContainerFooter from '../../page-container/page-container-footer/page-container-footer.component' + +export default class QrScanner extends Component { + static propTypes = { + hideModal: PropTypes.func.isRequired, + qrCodeDetected: PropTypes.func, + scanQrCode: PropTypes.func, + error: PropTypes.bool, + errorType: PropTypes.string, + } + + static contextTypes = { + t: PropTypes.func, + } + + constructor (props, context) { + super(props) + + this.state = { + ready: false, + msg: context.t('accessingYourCamera'), + } + this.codeReader = null + this.permissionChecker = null + this.needsToReinit = false + + // Clear pre-existing qr code data before scanning + this.props.qrCodeDetected(null) + } + + componentDidMount () { + this.initCamera() + } + + async checkPermisisions () { + const { permissions } = await WebcamUtils.checkStatus() + if (permissions) { + clearTimeout(this.permissionChecker) + // Let the video stream load first... + setTimeout(_ => { + this.setState({ + ready: true, + msg: this.context.t('scanInstructions'), + }) + if (this.needsToReinit) { + this.initCamera() + this.needsToReinit = false + } + }, 2000) + } else { + // Keep checking for permissions + this.permissionChecker = setTimeout(_ => { + this.checkPermisisions() + }, 1000) + } + } + + componentWillUnmount () { + clearTimeout(this.permissionChecker) + if (this.codeReader) { + this.codeReader.reset() + } + } + + initCamera () { + this.codeReader = new BrowserQRCodeReader() + this.codeReader.getVideoInputDevices() + .then(videoInputDevices => { + clearTimeout(this.permissionChecker) + this.checkPermisisions() + this.codeReader.decodeFromInputVideoDevice(undefined, 'video') + .then(content => { + const result = this.parseContent(content.text) + if (result.type !== 'unknown') { + this.props.qrCodeDetected(result) + this.stopAndClose() + } else { + this.setState({msg: this.context.t('unknownQrCode')}) + } + }) + .catch(err => { + if (err && err.name === 'NotAllowedError') { + this.setState({msg: this.context.t('youNeedToAllowCameraAccess')}) + clearTimeout(this.permissionChecker) + this.needsToReinit = true + this.checkPermisisions() + } + }) + }).catch(err => { + console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err) + }) + } + + parseContent (content) { + let type = 'unknown' + let values = {} + + // Here we could add more cases + // To parse other type of links + // For ex. EIP-681 (https://eips.ethereum.org/EIPS/eip-681) + + + // Ethereum address links - fox ex. ethereum:0x.....1111 + if (content.split('ethereum:').length > 1) { + + type = 'address' + values = {'address': content.split('ethereum:')[1] } + + // Regular ethereum addresses - fox ex. 0x.....1111 + } else if (content.substring(0, 2).toLowerCase() === '0x') { + + type = 'address' + values = {'address': content } + + } + return {type, values} + } + + + stopAndClose = () => { + if (this.codeReader) { + this.codeReader.reset() + } + this.setState({ ready: false }) + this.props.hideModal() + } + + tryAgain = () => { + // close the modal + this.stopAndClose() + // wait for the animation and try again + setTimeout(_ => { + this.props.scanQrCode() + }, 1000) + } + + renderVideo () { + return ( +
+
+ ) + } + + renderErrorModal () { + let title, msg + + if (this.props.error) { + if (this.props.errorType === 'NO_WEBCAM_FOUND') { + title = this.context.t('noWebcamFoundTitle') + msg = this.context.t('noWebcamFound') + } else { + title = this.context.t('unknownCameraErrorTitle') + msg = this.context.t('unknownCameraError') + } + } + + return ( +
+
+ +
+ +
+
+ { title } +
+
+ {msg} +
+ +
+ ) + } + + render () { + const { t } = this.context + + if (this.props.error) { + return this.renderErrorModal() + } + + return ( +
+
+
+ { `${t('scanQrCode')}` } +
+
+ { this.renderVideo() } +
+
+ {this.state.msg} +
+
+ ) + } +} diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/modals/qr-scanner/qr-scanner.container.js new file mode 100644 index 000000000..d0a35e03b --- /dev/null +++ b/ui/app/components/modals/qr-scanner/qr-scanner.container.js @@ -0,0 +1,24 @@ +import { connect } from 'react-redux' +import QrScanner from './qr-scanner.component' + +const { hideModal, qrCodeDetected, showQrScanner } = require('../../../actions') +import { + SEND_ROUTE, +} from '../../../routes' + +const mapStateToProps = state => { + return { + error: state.appState.modal.modalState.props.error, + errorType: state.appState.modal.modalState.props.errorType, + } +} + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => dispatch(hideModal()), + qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), + scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(QrScanner) diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js index 7a0b1a18e..df7bcb7cc 100644 --- a/ui/app/components/send/send-content/send-content.component.js +++ b/ui/app/components/send/send-content/send-content.component.js @@ -11,6 +11,7 @@ export default class SendContent extends Component { static propTypes = { updateGas: PropTypes.func, + scanQrCode: PropTypes.func, }; render () { @@ -18,7 +19,10 @@ export default class SendContent extends Component {
- this.props.updateGas(updateData)} /> + this.props.updateGas(updateData)} + scanQrCode={ _ => this.props.scanQrCode()} + /> this.props.updateGas(updateData)} /> diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js index 892ad5d67..1163dcffc 100644 --- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js +++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js @@ -17,6 +17,7 @@ export default class SendToRow extends Component { updateGas: PropTypes.func, updateSendTo: PropTypes.func, updateSendToError: PropTypes.func, + scanQrCode: PropTypes.func, }; static contextTypes = { @@ -51,6 +52,7 @@ export default class SendToRow extends Component { showError={inError} > this.props.scanQrCode()} accounts={toAccounts} closeDropdown={() => closeToDropdown()} dropdownOpen={toDropdownOpen} diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js index 6f1b20c55..0d8ffd179 100644 --- a/ui/app/components/send/send.component.js +++ b/ui/app/components/send/send.component.js @@ -38,12 +38,30 @@ export default class SendTransactionScreen extends PersistentForm { updateAndSetGasTotal: PropTypes.func, updateSendErrors: PropTypes.func, updateSendTokenBalance: PropTypes.func, + scanQrCode: PropTypes.func, + qrCodeDetected: PropTypes.func, + qrCodeData: PropTypes.object, }; static contextTypes = { t: PropTypes.func, }; + componentWillReceiveProps (nextProps) { + if (nextProps.qrCodeData) { + if (nextProps.qrCodeData.type === 'address') { + const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase() + const currentAddress = this.props.to && this.props.to.toLowerCase() + if (currentAddress !== scannedAddress) { + this.props.updateSendTo(scannedAddress) + this.updateGas({ to: scannedAddress }) + // Clean up QR code data after handling + this.props.qrCodeDetected(null) + } + } + } + } + updateGas ({ to: updatedToAddress, amount: value } = {}) { const { amount, @@ -158,6 +176,16 @@ export default class SendTransactionScreen extends PersistentForm { address, }) this.updateGas() + + // Show QR Scanner modal if ?scan=true + if (window.location.search === '?scan=true') { + this.props.scanQrCode() + + // Clear the queryString param after showing the modal + const cleanUrl = location.href.split('?')[0] + history.pushState({}, null, `${cleanUrl}`) + window.location.hash = '#send' + } } componentWillUnmount () { @@ -170,7 +198,10 @@ export default class SendTransactionScreen extends PersistentForm { return (
- this.updateGas(updateData)}/> + this.updateGas(updateData)} + scanQrCode={_ => this.props.scanQrCode()} + />
) diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js index 44ebd2792..41735de64 100644 --- a/ui/app/components/send/send.container.js +++ b/ui/app/components/send/send.container.js @@ -21,11 +21,15 @@ import { getSendFromObject, getSendTo, getTokenBalance, + getQrCodeData, } from './send.selectors' import { + updateSendTo, updateSendTokenBalance, updateGasData, setGasTotal, + showQrScanner, + qrCodeDetected, } from '../../actions' import { resetSendState, @@ -35,6 +39,10 @@ import { calcGasTotal, } from './send.utils.js' +import { + SEND_ROUTE, +} from '../../routes' + module.exports = compose( withRouter, connect(mapStateToProps, mapDispatchToProps) @@ -60,6 +68,7 @@ function mapStateToProps (state) { tokenBalance: getTokenBalance(state), tokenContract: getSelectedTokenContract(state), tokenToFiatRate: getSelectedTokenToFiatRate(state), + qrCodeData: getQrCodeData(state), } } @@ -89,5 +98,8 @@ function mapDispatchToProps (dispatch) { }, updateSendErrors: newError => dispatch(updateSendErrors(newError)), resetSendState: () => dispatch(resetSendState()), + scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)), + qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), + updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), } } diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js index cf07eafe1..ab3f6d34b 100644 --- a/ui/app/components/send/send.selectors.js +++ b/ui/app/components/send/send.selectors.js @@ -46,6 +46,7 @@ const selectors = { getTokenExchangeRate, getUnapprovedTxs, transactionsSelector, + getQrCodeData, } module.exports = selectors @@ -282,3 +283,7 @@ function transactionsSelector (state) { : txsToRender .sort((a, b) => b.time - a.time) } + +function getQrCodeData (state) { + return state.appState.qrCodeData +} diff --git a/ui/app/components/send/tests/send-container.test.js b/ui/app/components/send/tests/send-container.test.js index 7a9120d24..57e332780 100644 --- a/ui/app/components/send/tests/send-container.test.js +++ b/ui/app/components/send/tests/send-container.test.js @@ -44,6 +44,7 @@ proxyquire('../send.container.js', { getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`, getSendFromObject: (s) => `mockFrom:${s}`, getTokenBalance: (s) => `mockTokenBalance:${s}`, + getQrCodeData: (s) => `mockQrCodeData:${s}`, }, '../../actions': actionSpies, '../../ducks/send.duck': duckActionSpies, @@ -76,6 +77,7 @@ describe('send container', () => { tokenBalance: 'mockTokenBalance:mockState', tokenContract: 'mockTokenContract:mockState', tokenToFiatRate: 'mockTokenToFiatRate:mockState', + qrCodeData: 'mockQrCodeData:mockState', }) }) diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js index 80cfa7a85..49ebf49d9 100644 --- a/ui/app/components/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const AccountListItem = require('../account-list-item/account-list-item.component').default const connect = require('react-redux').connect +const Tooltip = require('../../tooltip') ToAutoComplete.contextTypes = { t: PropTypes.func, @@ -94,11 +95,12 @@ ToAutoComplete.prototype.render = function () { dropdownOpen, onChange, inError, + qrScanner, } = this.props return h('div.send-v2__to-autocomplete', {}, [ - h('input.send-v2__to-autocomplete__input', { + h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, { placeholder: this.context.t('recipientAddress'), className: inError ? `send-v2__error-border` : '', value: to, @@ -108,7 +110,13 @@ ToAutoComplete.prototype.render = function () { borderColor: inError ? 'red' : null, }, }), - + qrScanner && h(Tooltip, { + title: this.context.t('scanQrCode'), + position: 'bottom', + }, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, { + style: { color: '#33333' }, + onClick: () => this.props.scanQrCode(), + })), !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, { style: { color: '#dedede' }, onClick: () => this.handleInputEvent(), diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js index a7a226cc5..38f5f1c50 100644 --- a/ui/app/conversion-util.js +++ b/ui/app/conversion-util.js @@ -46,7 +46,7 @@ const decToBigNumberViaString = n => R.pipe(String, toBigNumber['dec']) // Setter Maps const toBigNumber = { hex: n => new BigNumber(stripHexPrefix(n), 16), - dec: n => new BigNumber(n, 10), + dec: n => new BigNumber(String(n), 10), BN: n => new BigNumber(n.toString(16), 16), } const toNormalizedDenomination = { @@ -154,7 +154,7 @@ const subtractCurrencies = (a, b, options = {}) => { bBase, ...conversionOptions } = options - const value = (new BigNumber(a, aBase)).minus(b, bBase) + const value = (new BigNumber(String(a), aBase)).minus(b, bBase) return converter({ value, diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index e9c872ea7..806ac8536 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -626,6 +626,23 @@ top: 18px; right: 12px; } + + &__qr-code { + position: absolute; + top: 13px; + right: 33px; + cursor: pointer; + padding: 8px 5px 5px; + border-radius: 4px; + } + + &__qr-code:hover { + background: #f1f1f1; + } + + &__input.with-qr { + padding-right: 65px; + } } &__to-autocomplete, &__memo-text-area, &__hex-data { diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js index a37778c19..76e80a8ac 100644 --- a/ui/app/helpers/confirm-transaction/util.js +++ b/ui/app/helpers/confirm-transaction/util.js @@ -141,7 +141,7 @@ export function hasUnconfirmedTransactions (state) { export function roundExponential (value) { const PRECISION = 4 - const bigNumberValue = new BigNumber(value) + const bigNumberValue = new BigNumber(String(value)) // In JS, numbers with exponentials greater than 20 get displayed as an exponential. return bigNumberValue.e > 20 ? Number(bigNumberValue.toPrecision(PRECISION)) : value diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index e4e4c8581..98d467163 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -51,6 +51,7 @@ function reduceApp (state, action) { sidebarOpen: false, alertOpen: false, alertMessage: null, + qrCodeData: null, networkDropdownOpen: false, currentView: seedWords ? seedConfView : defaultView, accountDetail: { @@ -91,7 +92,7 @@ function reduceApp (state, action) { sidebarOpen: false, }) - // sidebar methods + // alert methods case actions.ALERT_OPEN: return extend(appState, { alertOpen: true, @@ -104,6 +105,13 @@ function reduceApp (state, action) { alertMessage: null, }) + // qr scanner methods + case actions.QR_CODE_DETECTED: + return extend(appState, { + qrCodeData: action.value, + }) + + // modal methods: case actions.MODAL_OPEN: const { name, ...modalProps } = action.payload diff --git a/ui/app/token-util.js b/ui/app/token-util.js index 0d4233766..8798ed266 100644 --- a/ui/app/token-util.js +++ b/ui/app/token-util.js @@ -44,7 +44,7 @@ async function getSymbolAndDecimals (tokenAddress, existingTokens = []) { function calcTokenAmount (value, decimals) { const multiplier = Math.pow(10, Number(decimals || 0)) - return new BigNumber(value).div(multiplier).toNumber() + return new BigNumber(String(value)).div(multiplier).toNumber() } diff --git a/ui/app/util.js b/ui/app/util.js index 8b194e0c7..ade4fec8a 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -271,9 +271,9 @@ function getContractAtAddress (tokenAddress) { return global.eth.contract(abi).at(tokenAddress) } -function exportAsFile (filename, data) { +function exportAsFile (filename, data, type = 'text/csv') { // source: https://stackoverflow.com/a/33542499 by Ludovic Feltz - const blob = new Blob([data], {type: 'text/csv'}) + const blob = new Blob([data], {type}) if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, filename) } else { diff --git a/ui/lib/webcam-utils.js b/ui/lib/webcam-utils.js new file mode 100644 index 000000000..eb717b23a --- /dev/null +++ b/ui/lib/webcam-utils.js @@ -0,0 +1,36 @@ +'use strict' + +import DetectRTC from 'detectrtc' +const { ENVIRONMENT_TYPE_POPUP } = require('../../app/scripts/lib/enums') +const { getEnvironmentType, getPlatform } = require('../../app/scripts/lib/util') +const { PLATFORM_BRAVE, PLATFORM_FIREFOX } = require('../../app/scripts/lib/enums') + +class WebcamUtils { + + static checkStatus () { + return new Promise((resolve, reject) => { + const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP + const isFirefoxOrBrave = getPlatform() === (PLATFORM_FIREFOX || PLATFORM_BRAVE) + try { + DetectRTC.load(_ => { + if (DetectRTC.hasWebcam) { + let environmentReady = true + if ((isFirefoxOrBrave && isPopup) || (isPopup && !DetectRTC.isWebsiteHasWebcamPermissions)) { + environmentReady = false + } + resolve({ + permissions: DetectRTC.isWebsiteHasWebcamPermissions, + environmentReady, + }) + } else { + reject({type: 'NO_WEBCAM_FOUND'}) + } + }) + } catch (e) { + reject({type: 'UNKNOWN_ERROR'}) + } + }) + } +} + +module.exports = WebcamUtils