diff options
Merge branch 'i3725-refactor-send-component-' into i3725-refactor-send-component-2
227 files changed, 11177 insertions, 2737 deletions
diff --git a/.circleci/config.yml b/.circleci/config.yml index ee2054130..6ed731225 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -19,15 +19,6 @@ workflows: requires: - prep-deps-npm - prep-build - - job-screens: - requires: - - prep-deps-npm - - prep-build - - job-publish: - requires: - - prep-deps-npm - - prep-build - - job-screens - test-unit: requires: - prep-deps-npm @@ -54,11 +45,21 @@ workflows: - test-lint - test-unit - test-e2e - - job-screens - test-integration-mascara-chrome - test-integration-mascara-firefox - test-integration-flat-chrome - test-integration-flat-firefox + - job-screens: + requires: + - prep-deps-npm + - prep-build + - all-tests-pass + - job-publish: + requires: + - prep-deps-npm + - prep-build + - job-screens + - all-tests-pass jobs: prep-deps-npm: @@ -35,7 +35,6 @@ "globals": { "document": false, - "log": true, "navigator": false, "web3": true, "window": false diff --git a/.gitignore b/.gitignore index dee5ec220..0e91a7d04 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,7 @@ dist builds/ disc/ builds.zip +docs/jsdocs development/bundle.js development/states.js diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 6dc5ecc6b..000000000 --- a/.jshintrc +++ /dev/null @@ -1,27 +0,0 @@ -{ - "node": true, - "browser": true, - "esnext": true, - "bitwise": true, - "camelcase": true, - "curly": true, - "eqeqeq": true, - "immed": true, - "indent": 2, - "latedef": true, - "newcap": true, - "noarg": true, - "quotmark": "single", - "regexp": true, - "undef": true, - "unused": true, - "strict": true, - "trailing": true, - "smarttabs": true, - "globals" : { - "chrome": true, - "crypto": true, - "describe": true, - "it": true - } -} diff --git a/CHANGELOG.md b/CHANGELOG.md index 4731faffc..3e2b481de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,27 @@ # Changelog ## Current Master + +- Correctly format currency conversion for locally selected preferred currency. +- Improved performance of 3D fox logo. +- Fetch token prices based on contract address, not symbol +- Fix bug that prevents setting language locale in settings. +- Show checksum addresses throughout the UI + +## 4.5.5 Fri Apr 06 2018 + +- Graceful handling of unknown keys in txParams +- Fixes buggy handling of historical transactions with unknown keys in txParams - Fix link for 'Learn More' in the Add Token Screen to open to a new tab. +- Fix Download State Logs button [#3791](https://github.com/MetaMask/metamask-extension/issues/3791) +- Enhanced migration error handling + reporting + +## 4.5.4 (aborted) Thu Apr 05 2018 +- Graceful handling of unknown keys in txParams +- Fix link for 'Learn More' in the Add Token Screen to open to a new tab. - Fix Download State Logs button [#3791](https://github.com/MetaMask/metamask-extension/issues/3791) +- Fix migration error reporting ## 4.5.3 Wed Apr 04 2018 @@ -1,6 +1,7 @@ # MetaMask Browser Extension [](https://circleci.com/gh/MetaMask/metamask-extension) [](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) [](https://greenkeeper.io/) [](https://waffle.io/MetaMask/metamask-extension) +[Internal documentation](./docs/jsdocs) ## Support @@ -68,6 +69,7 @@ To write tests that will be run in the browser using QUnit, add your test files - [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) +- [The MetaMask Team](./docs/team.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 add new networks to the Provider Menu](./docs/adding-new-networks.md) diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json new file mode 100644 index 000000000..6a4ebc8a5 --- /dev/null +++ b/app/_locales/cs/messages.json @@ -0,0 +1,912 @@ +{ + "accept": { + "message": "Přijmout" + }, + "account": { + "message": "Účet" + }, + "accountDetails": { + "message": "Detaily účtu" + }, + "accountName": { + "message": "Název účtu" + }, + "address": { + "message": "Adresa" + }, + "addCustomToken": { + "message": "Přidat vlastní token" + }, + "addToken": { + "message": "Přidat token" + }, + "addTokens": { + "message": "Přidat tokeny" + }, + "amount": { + "message": "Částka" + }, + "amountPlusGas": { + "message": "Částka + palivo" + }, + "appDescription": { + "message": "Ethereum rozšíření prohlížeče", + "description": "The description of the application" + }, + "appName": { + "message": "MetaMask", + "description": "The name of the application" + }, + "approved": { + "message": "Schváleno" + }, + "attemptingConnect": { + "message": "Pokouším se připojit k blockchainu." + }, + "attributions": { + "message": "Zásluhy" + }, + "available": { + "message": "Dostupné" + }, + "back": { + "message": "Zpět" + }, + "balance": { + "message": "Zůstatek:" + }, + "balances": { + "message": "Zůstatek tokenu" + }, + "balanceIsInsufficientGas": { + "message": "Nedostatek prostředků pro aktuální množství paliva" + }, + "beta": { + "message": "BETA" + }, + "betweenMinAndMax": { + "message": "musí být větší nebo roven $1 a menší nebo roven $2.", + "description": "helper for inputting hex as decimal input" + }, + "blockiesIdenticon": { + "message": "Použít Blockies Identicon" + }, + "borrowDharma": { + "message": "Pújčit si přes Dharma (Beta)" + }, + "builtInCalifornia": { + "message": "MetaMask je navržen a vytvořen v Kalifornii." + }, + "buy": { + "message": "Koupit" + }, + "buyCoinbase": { + "message": "Nákup na Coinbase" + }, + "buyCoinbaseExplainer": { + "message": "Coinbase je světově nejoblíbenější místo k nákupu a prodeji bitcoinu, etherea nebo litecoinu." + }, + "ok": { + "message": "Ok" + }, + "cancel": { + "message": "Zrušit" + }, + "classicInterface": { + "message": "Použít klasické rozhraní" + }, + "clickCopy": { + "message": "Kliknutím zkopírovat" + }, + "confirm": { + "message": "Potvrdit" + }, + "confirmed": { + "message": "Potvrzeno" + }, + "confirmContract": { + "message": "Potvrdit kontrakt" + }, + "confirmPassword": { + "message": "Potvrdit heslo" + }, + "confirmTransaction": { + "message": "Potvrdit transakci" + }, + "continue": { + "message": "Pokračovat" + }, + "continueToCoinbase": { + "message": "Přejít na Coinbase" + }, + "contractDeployment": { + "message": "Nasazení kontraktu" + }, + "conversionProgress": { + "message": "Provádí se převod" + }, + "copiedButton": { + "message": "Zkopírováno" + }, + "copiedClipboard": { + "message": "Zkopírováno do schránky" + }, + "copiedExclamation": { + "message": "Zkopírováno!" + }, + "copiedSafe": { + "message": "Zkopíroval jsem to na bezpečné místo" + }, + "copy": { + "message": "Kopírovat" + }, + "copyToClipboard": { + "message": "Kopírovat do schránky" + }, + "copyButton": { + "message": " Kopírovat " + }, + "copyPrivateKey": { + "message": "Toto je váš privátní klíč (kliknutím zkopírujte)" + }, + "create": { + "message": "Vytvořit" + }, + "createAccount": { + "message": "Vytvořit účet" + }, + "createDen": { + "message": "Vytvořit" + }, + "crypto": { + "message": "Krypto", + "description": "Exchange type (cryptocurrencies)" + }, + "currentConversion": { + "message": "Aktuální převod" + }, + "currentNetwork": { + "message": "Aktuální síť" + }, + "customGas": { + "message": "Nastavit palivo" + }, + "customToken": { + "message": "Vlastní token" + }, + "customize": { + "message": "Nastavit" + }, + "customRPC": { + "message": "Vlastní RPC" + }, + "decimalsMustZerotoTen": { + "message": "Desetinných míst musí být od 0 do 36." + }, + "decimal": { + "message": "Počet desetinných míst přesnosti" + }, + "defaultNetwork": { + "message": "Výchozí síť pro Etherové transakce je Main Net." + }, + "denExplainer": { + "message": "Váš DEN je heslem šifrované uložiště v MetaMasku." + }, + "deposit": { + "message": "Vklad" + }, + "depositBTC": { + "message": "Vložte BTC na níže uvedenou adresu:" + }, + "depositCoin": { + "message": "Vložte $1 na níže uvedenou adresu", + "description": "Tells the user what coin they have selected to deposit with shapeshift" + }, + "depositEth": { + "message": "Vložit Eth" + }, + "depositEther": { + "message": "Vložit Ether" + }, + "depositFiat": { + "message": "Vklad s fiat měnou" + }, + "depositFromAccount": { + "message": "Vložte z jiného účtu" + }, + "depositShapeShift": { + "message": "Vklad přes ShapeShift" + }, + "depositShapeShiftExplainer": { + "message": "Pokud vlastníte jiné kryptoměny, můžete je směnit Ether a vložit ho přímo do peněženky MetaMask. Bez založení účtu." + }, + "details": { + "message": "Podrobnosti" + }, + "directDeposit": { + "message": "Přímý vklad" + }, + "directDepositEther": { + "message": "Vložit Ether přímo" + }, + "directDepositEtherExplainer": { + "message": "Pokud už vlastníte nějaký Ether, nejrychleji ho dostanete do peněženky přímým vkladem." + }, + "done": { + "message": "Hotovo" + }, + "downloadStateLogs": { + "message": "Stáhnout stavové protokoly" + }, + "dropped": { + "message": "Zrušeno" + }, + "edit": { + "message": "Upravit" + }, + "editAccountName": { + "message": "Upravit název účtu" + }, + "emailUs": { + "message": "Napište nám e-mail!" + }, + "encryptNewDen": { + "message": "Zašifrujte svůj nový DEN" + }, + "enterPassword": { + "message": "Zadejte heslo" + }, + "enterPasswordConfirm": { + "message": "Zadejte heslo k potvrzení" + }, + "passwordNotLongEnough": { + "message": "Heslo není dost dlouhé" + }, + "passwordsDontMatch": { + "message": "Hesla nejsou stejná" + }, + "etherscanView": { + "message": "Prohlédněte si účet na Etherscan" + }, + "exchangeRate": { + "message": "Směnný kurz" + }, + "exportPrivateKey": { + "message": "Exportovat privátní klíč" + }, + "exportPrivateKeyWarning": { + "message": "Exportujte privátní klíč na vlastní riziko." + }, + "failed": { + "message": "Neúspěšné" + }, + "fiat": { + "message": "FIAT", + "description": "Exchange type" + }, + "fileImportFail": { + "message": "Import souboru nefunguje? Klikněte sem!", + "description": "Helps user import their account from a JSON file" + }, + "followTwitter": { + "message": "Sledujte nás na Twitteru" + }, + "from": { + "message": "Od" + }, + "fromToSame": { + "message": "Adresy odesílatele a příjemce nemohou být stejné" + }, + "fromShapeShift": { + "message": "Z ShapeShift" + }, + "gas": { + "message": "Palivo", + "description": "Short indication of gas cost" + }, + "gasFee": { + "message": "Poplatek za palivo" + }, + "gasLimit": { + "message": "Limit paliva" + }, + "gasLimitCalculation": { + "message": "Počítáme doporučený limit paliva na základě úspěšnosti v síti." + }, + "gasLimitRequired": { + "message": "Limit paliva je povinný" + }, + "gasLimitTooLow": { + "message": "Limit paliva musí být alespoň 21000" + }, + "generatingSeed": { + "message": "Generuji klíčovou frázi..." + }, + "gasPrice": { + "message": "Cena paliva (GWEI)" + }, + "gasPriceCalculation": { + "message": "Počítáme doporučenou cenu paliva na základě úspěšnosti v síti." + }, + "gasPriceRequired": { + "message": "Cena paliva je povinná" + }, + "getEther": { + "message": "Získejte Ether" + }, + "getEtherFromFaucet": { + "message": "Získejte Ether z faucetu za $1.", + "description": "Displays network name for Ether faucet" + }, + "greaterThanMin": { + "message": "musí být větší nebo roven $1.", + "description": "helper for inputting hex as decimal input" + }, + "here": { + "message": "zde", + "description": "as in -click here- for more information (goes with troubleTokenBalances)" + }, + "hereList": { + "message": "Tady je seznam!!!!" + }, + "hide": { + "message": "Skrýt" + }, + "hideToken": { + "message": "Skrýt token" + }, + "hideTokenPrompt": { + "message": "Skrýt token?" + }, + "howToDeposit": { + "message": "Jakým způsobem chcete vložit Ether?" + }, + "holdEther": { + "message": "Dovoluje vám držet ether a tokeny a slouží jako most k decentralizovaným aplikacím." + }, + "import": { + "message": "Import", + "description": "Button to import an account from a selected file" + }, + "importAccount": { + "message": "Import účtu" + }, + "importAccountMsg": { + "message":"Importované účty nebudou spojeny s vaší původní MetaMaskovou klíčovou frází. Zjistěte více o importovaných účtech " + }, + "importAnAccount": { + "message": "Import účtu" + }, + "importDen": { + "message": "Import existujícího DEN" + }, + "imported": { + "message": "Importováno", + "description": "status showing that an account has been fully loaded into the keyring" + }, + "infoHelp": { + "message": "Informace a nápověda" + }, + "insufficientFunds": { + "message": "Nedostatek finančních prostředků." + }, + "insufficientTokens": { + "message": "Nedostatek tokenů." + }, + "invalidAddress": { + "message": "Neplatná adresa" + }, + "invalidAddressRecipient": { + "message": "Adresa příjemce je neplatná" + }, + "invalidGasParams": { + "message": "Neplatná parametry paliva" + }, + "invalidInput": { + "message": "Neplatný vstup." + }, + "invalidRequest": { + "message": "Neplatný požadavek" + }, + "invalidRPC": { + "message": "Neplatné RPC URI" + }, + "jsonFail": { + "message": "Něco se pokazilo. Prosím, ujistěte se, že váš JSON soubor má správný formát." + }, + "jsonFile": { + "message": "JSON soubor", + "description": "format for importing an account" + }, + "keepTrackTokens": { + "message": "Udržujte si záznamy o tokenech, které jste koupili s účtem v MetaMasku." + }, + "kovan": { + "message": "Kovan Test Network" + }, + "knowledgeDataBase": { + "message": "Navštivte naši Knowledge Base" + }, + "max": { + "message": "Max" + }, + "learnMore": { + "message": "Zjistěte více." + }, + "lessThanMax": { + "message": "musí být menší nebo roven $1.", + "description": "helper for inputting hex as decimal input" + }, + "likeToAddTokens": { + "message": "Chcete přidat tyto tokeny?" + }, + "links": { + "message": "Odkazy" + }, + "limit": { + "message": "Limit" + }, + "loading": { + "message": "Načítám..." + }, + "loadingTokens": { + "message": "Načítám tokeny..." + }, + "localhost": { + "message": "Localhost 8545" + }, + "login": { + "message": "Přihlásit" + }, + "logout": { + "message": "Odhlásit" + }, + "loose": { + "message": "Nevázané" + }, + "loweCaseWords": { + "message": "slova klíčové fráze mají pouze malá písmena" + }, + "mainnet": { + "message": "Main Ethereum Network" + }, + "message": { + "message": "Zpráva" + }, + "metamaskDescription": { + "message": "MetaMask je bezpečný osobní trezor pro Ethereum." + }, + "min": { + "message": "Minimum" + }, + "myAccounts": { + "message": "Moje účty" + }, + "mustSelectOne": { + "message": "Musíte zvolit aspoň 1 token." + }, + "needEtherInWallet": { + "message": "Potřebujete Ether v peněžence, abyste mohli pomocí MetaMasku interagovat s decentralizovanými aplikacemi." + }, + "needImportFile": { + "message": "Musíte zvolit soubor k importu.", + "description": "User is important an account and needs to add a file to continue" + }, + "needImportPassword": { + "message": "Musíte zadat heslo pro zvolený soubor.", + "description": "Password and file needed to import an account" + }, + "negativeETH": { + "message": "Nelze odeslat zápornou částku ETH." + }, + "networks": { + "message": "Sítě" + }, + "newAccount": { + "message": "Nový účet" + }, + "newAccountNumberName": { + "message": "Účet $1", + "description": "Default name of next account to be created on create account screen" + }, + "newContract": { + "message": "Nový kontrakt" + }, + "newPassword": { + "message": "Nové heslo (min 8 znaků)" + }, + "newRecipient": { + "message": "Nový příjemce" + }, + "newRPC": { + "message": "Nová RPC URL" + }, + "next": { + "message": "Další" + }, + "noAddressForName": { + "message": "Pro toto jméno nebyla nastavena žádná adresa." + }, + "noDeposits": { + "message": "Žádný vklad" + }, + "noTransactionHistory": { + "message": "Žádná historie transakcí." + }, + "noTransactions": { + "message": "Žádné transakce" + }, + "notStarted": { + "message": "Nezačalo" + }, + "oldUI": { + "message": "Staré rozhraní" + }, + "oldUIMessage": { + "message": "Vrátili jste se ke starému rozhraní. Můžete přepnout na nové rozhraní v nastavení v pravém horním menu." + }, + "or": { + "message": "nebo", + "description": "choice between creating or importing a new account" + }, + "passwordCorrect": { + "message": "Ujistěte se, že je vaše heslo správně." + }, + "passwordMismatch": { + "message": "hesla nesouhlasí", + "description": "in password creation process, the two new password fields did not match" + }, + "passwordShort": { + "message": "heslo je krátké", + "description": "in password creation process, the password is not long enough to be secure" + }, + "pastePrivateKey": { + "message": "Vložte zde svůj privátní klíč:", + "description": "For importing an account from a private key" + }, + "pasteSeed": { + "message": "Svou klíčovou frázi vložte zde!" + }, + "personalAddressDetected": { + "message": "Detekována osobní adresa. Zadejte adresu kontraktu tokenu." + }, + "pleaseReviewTransaction": { + "message": "Zkontrolujte si transakci." + }, + "popularTokens": { + "message": "Oblíbené tokeny" + }, + "privacyMsg": { + "message": "Zásady ochrany osobních údajů" + }, + "privateKey": { + "message": "Privátní klíč", + "description": "select this type of file to use to import an account" + }, + "privateKeyWarning": { + "message": "Upozornění: Nikdy nezveřejněte tento klíč. Kdokoli může s vaším privátním klíčem odcizit vaše aktiva z účtu." + }, + "privateNetwork": { + "message": "Soukromá síť" + }, + "qrCode": { + "message": "Ukázat QR kód" + }, + "readdToken": { + "message": "Tento token můžete v budoucnu přidat zpět s „Přidat token“ v nastavení účtu." + }, + "readMore": { + "message": "Přečtěte si více zde." + }, + "readMore2": { + "message": "Přečtěte si více." + }, + "receive": { + "message": "Obrdžet" + }, + "recipientAddress": { + "message": "Adresa příjemce" + }, + "refundAddress": { + "message": "Adresa pro vrácení peněz" + }, + "rejected": { + "message": "Odmítnuto" + }, + "resetAccount": { + "message": "Resetovat účet" + }, + "restoreFromSeed": { + "message": "Obnovit z seed fráze" + }, + "restoreVault": { + "message": "Obnovit trezor" + }, + "required": { + "message": "Povinné" + }, + "retryWithMoreGas": { + "message": "Opakujte s vyšší cenou paliva" + }, + "walletSeed": { + "message": "Klíčová fráze peněženky" + }, + "revealSeedWords": { + "message": "Zobrazit slova klíčové fráze" + }, + "revealSeedWordsWarning": { + "message": "Nebnovujte slova klíčové fráze na veřejnosti! Tato slova mohou být použita k odcizení veškerých vyašich účtů." + }, + "revert": { + "message": "Zvrátit" + }, + "rinkeby": { + "message": "Rinkeby Test Network" + }, + "ropsten": { + "message": "Ropsten Test Network" + }, + "currentRpc": { + "message": "Současné RPC" + }, + "connectingToMainnet": { + "message": "Připojuji se k Main Ethereum Network" + }, + "connectingToRopsten": { + "message": "Připojuji se k Ropsten Test Network" + }, + "connectingToKovan": { + "message": "Připojuji se k Kovan Test Network" + }, + "connectingToRinkeby": { + "message": "Připojuji se k Rinkeby Test Network" + }, + "connectingToUnknown": { + "message": "Připojuji se k neznámé síti" + }, + "sampleAccountName": { + "message": "Např. můj nový účet", + "description": "Help user understand concept of adding a human-readable name to their account" + }, + "save": { + "message": "Uložit" + }, + "reprice_title": { + "message": "Změnit cenu transakce" + }, + "reprice_subtitle": { + "message": "Navyšte cenu paliva ve snaze k přepsání a urychlení vyší transakce" + }, + "saveAsFile": { + "message": "Uložit do souboru", + "description": "Account export process" + }, + "saveSeedAsFile": { + "message": "Uložit slova klíčové fráze do souboru" + }, + "search": { + "message": "Hledat" + }, + "secretPhrase": { + "message": "Zadejte svých 12 slov tajné fráze k obnovení trezoru." + }, + "newPassword8Chars": { + "message": "Nové heslo (min 8 znaků)" + }, + "seedPhraseReq": { + "message": "klíčové fráze mají 12 slov" + }, + "select": { + "message": "Vybrat" + }, + "selectCurrency": { + "message": "Vybrat měnu" + }, + "selectService": { + "message": "Vybrat službu" + }, + "selectType": { + "message": "Vybrat typ" + }, + "send": { + "message": "Odeslat" + }, + "sendETH": { + "message": "Odeslat ETH" + }, + "sendTokens": { + "message": "Odeslat tokeny" + }, + "onlySendToEtherAddress": { + "message": "Posílejte jen ETH na Ethereum adresu." + }, + "searchTokens": { + "message": "Hledat tokeny" + }, + "sendTokensAnywhere": { + "message": "Posílejte tokeny komukoli s Ethereum účtem" + }, + "settings": { + "message": "Nastavení" + }, + "info": { + "message": "Informace" + }, + "shapeshiftBuy": { + "message": "Nakoupit na ShapeShift" + }, + "showPrivateKeys": { + "message": "Zobrazit privátní klíče" + }, + "showQRCode": { + "message": "Zobrazit QR kód" + }, + "sign": { + "message": "Podepsat" + }, + "signed": { + "message": "Podepsáno" + }, + "signMessage": { + "message": "Podepsat zprávu" + }, + "signNotice": { + "message": "Podepsání zprávy může mít \nnebezpečný vedlejší učinek. Podepisujte zprávy pouze ze \nstránek, kterým plně důvěřujete celým svým účtem.\n Tato nebezpečná metoda bude odebrána v budoucí verzi. " + }, + "sigRequest": { + "message": "Požadavek podpisu" + }, + "sigRequested": { + "message": "Požádáno o podpis" + }, + "spaceBetween": { + "message": "mezi slovy může být pouze mezera" + }, + "status": { + "message": "Stav" + }, + "stateLogs": { + "message": "Stavové protokoly" + }, + "stateLogsDescription": { + "message": "Stavové protokoly obsahují vaše veřejné adresy účtů a odeslané transakce." + }, + "stateLogError": { + "message": "Chyba během získávání stavových protokolů." + }, + "submit": { + "message": "Odeslat" + }, + "submitted": { + "message": "Odesláno" + }, + "supportCenter": { + "message": "Navštivte naše centrum podpory" + }, + "symbolBetweenZeroTen": { + "message": "Symbol musí být mezi 0 a 10 znaky." + }, + "takesTooLong": { + "message": "Trvá to dlouho?" + }, + "terms": { + "message": "Podmínky použití" + }, + "testFaucet": { + "message": "Testovací faucet" + }, + "to": { + "message": "Komu: " + }, + "toETHviaShapeShift": { + "message": "$1 na ETH přes ShapeShift", + "description": "system will fill in deposit type in start of message" + }, + "tokenAddress": { + "message": "Adresa tokenu" + }, + "tokenAlreadyAdded": { + "message": "Token byl už přidán." + }, + "tokenBalance": { + "message": "Váš zůstatek tokenu je:" + }, + "tokenSelection": { + "message": "Vyhledejte token nebo je vyberte z našeho seznamu oblíbených tokenů." + }, + "tokenSymbol": { + "message": "Symbol tokenu" + }, + "tokenWarning1": { + "message": "Mějte přehled o tokenech, které jste koupili s účtem MetaMasku. Pokud jste koupili tokeny s jiným účtem, tyto tokeny se zde nezobrazí." + }, + "total": { + "message": "Celkem" + }, + "transactions": { + "message": "transakce" + }, + "transactionError": { + "message": "Chyba transakce. Vyhozena výjimka v kódu kontraktu." + }, + "transactionMemo": { + "message": "Poznámka transakce (nepovinné)" + }, + "transactionNumber": { + "message": "Číslo transakce" + }, + "transfers": { + "message": "Převody" + }, + "troubleTokenBalances": { + "message": "Měli jsme problém s načtením vašich tokenových zůstatků. Můžete je vidět ", + "description": "Followed by a link (here) to view token balances" + }, + "twelveWords": { + "message": "Těchto 12 slov je jedinou možností, jak obnovit MetaMask účet. \nUložte je na bezpečné a neveřejné místo." + }, + "typePassword": { + "message": "Zadejte své heslo" + }, + "uiWelcome": { + "message": "Vítejte v novém rozhraní (Beta)" + }, + "uiWelcomeMessage": { + "message": "Používáte nyní nové rozhraní MetaMasku. Rozhlédněte se kolem, vyzkoušejte nové funkce, jako jsou zasílání tokenů, a dejte nám vědět, pokud narazíte na problém." + }, + "unapproved": { + "message": "Neschváleno" + }, + "unavailable": { + "message": "Nedostupné" + }, + "unknown": { + "message": "Neznámé" + }, + "unknownNetwork": { + "message": "Neznámá soukromá síť" + }, + "unknownNetworkId": { + "message": "Neznámé ID sítě" + }, + "uriErrorMsg": { + "message": "URI vyžadují korektní HTTP/HTTPS prefix." + }, + "usaOnly": { + "message": "jen v USA", + "description": "Using this exchange is limited to people inside the USA" + }, + "usedByClients": { + "message": "Používána různými klienty" + }, + "useOldUI": { + "message": "Použijte staré rozhraní" + }, + "validFileImport": { + "message": "Musíte vybrat validní soubor k importu." + }, + "vaultCreated": { + "message": "Trezor vytvořen" + }, + "viewAccount": { + "message": "Zobrazit účet" + }, + "visitWebSite": { + "message": "Navštivte naši stránku" + }, + "warning": { + "message": "Varování" + }, + "welcomeBeta": { + "message": "Vítejte v MetaMask Beta" + }, + "whatsThis": { + "message": "Co to je?" + }, + "yourSigRequested": { + "message": "Je vyžadován váš podpis" + }, + "youSign": { + "message": "Podepisujete" + } +} diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index b372326ee..3b20ab49a 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -908,5 +908,8 @@ }, "youSign": { "message": "You are signing" + }, + "generatingTransaction": { + "message": "Generating transaction" } } diff --git a/app/_locales/hn/messages.json b/app/_locales/hn/messages.json index 323f4b4b3..b869560e5 100644 --- a/app/_locales/hn/messages.json +++ b/app/_locales/hn/messages.json @@ -9,7 +9,7 @@ "message": "खाता विवरण" }, "accountName": { - "message": "खाता का नाम" + "message": "खाते का नाम" }, "address": { "message": "खाते का पता" @@ -21,7 +21,7 @@ "message": "टोकन जोड़ें" }, "addTokens": { - "message": "टोकनो को जोड़ें" + "message": "टोकनों को जोड़ें" }, "amount": { "message": "राशि" @@ -30,7 +30,7 @@ "message": "राशि + गैस" }, "appDescription": { - "message": "एथरेम ब्राउज़र एक्सटेंशन", + "message": "इथीरियम ब्राउज़र एक्सटेंशन", "description": "आवेदन का विवरण" }, "appName": { @@ -53,7 +53,7 @@ "message": "उपलब्ध बैलेंस।" }, "balances": { - "message": "ापके उपलब्ध बैलेंस" + "message": "आपके उपलब्ध बैलेंस" }, "balanceIsInsufficientGas": { "message": "वर्तमान गैस कुल के लिए अपर्याप्त शेष" @@ -78,10 +78,10 @@ "message": "खरीदें" }, "buyCoinbase": { - "message": "कॉनबेस पर खरीदें" + "message": "कॉइनबेस पर खरीदें" }, "buyCoinbaseExplainer": { - "message": "बिल्टकोइन, एथरेम और लाइटकोइन खरीदने और बेचने के लिए दुनिया का सबसे लोकप्रिय तरीका Coinbase है।" + "message": "बिल्टकोइन, इथीरियम और लाइटकोइन खरीदने और बेचने के लिए दुनिया का सबसे लोकप्रिय तरीका कॉइनबेस है।" }, "cancel": { "message": "रद्द करें" @@ -108,7 +108,7 @@ "message": "जारी रखें" }, "continueToCoinbase": { - "message": "कॉ्ोनबेस को ब्हेजना जारी रखें" + "message": "कॉइनबेस को ब्हेजना जारी रखें" }, "contractDeployment": { "message": "अनुबंध परिनियोजन व तैनाती" @@ -435,13 +435,13 @@ "message": "बीज शब्द में केवल लोअरकेस वर्ण होते हैं" }, "mainnet": { - "message": "मुख्य ईथरम नेटवर्क" + "message": "मुख्य इथीरियम नेटवर्क" }, "message": { "message": "संदेश" }, "metamaskDescription": { - "message": "मेटामास्क एथर्मम के लिए एक सुरक्षित पहचान वॉल्ट है।" + "message": "मेटामास्क इथीरियम के लिए एक सुरक्षित पहचान वॉल्ट है।" }, "min": { "message": "न्यूनतम" @@ -649,7 +649,7 @@ "message": "भेजें टोकन" }, "sendTokensAnywhere": { - "message": "इटोरम खाते वाले किसी को भी टोकन भेजें" + "message": "इथीरियम खाते वाले किसी को भी टोकन भेजें" }, "settings": { "message": "सेटिंग्स" diff --git a/app/_locales/index.json b/app/_locales/index.json index c085deb72..7717502b7 100644 --- a/app/_locales/index.json +++ b/app/_locales/index.json @@ -1,4 +1,5 @@ [ + { "code": "cs", "name": "Czech" }, { "code": "de", "name": "German" }, { "code": "en", "name": "English" }, { "code": "es", "name": "Spanish" }, @@ -13,6 +14,8 @@ { "code": "ru", "name": "Russian" }, { "code": "sl", "name": "Slovenian" }, { "code": "th", "name": "Thai" }, + { "code": "tml", "name": "Tamil" }, + { "code": "tr", "name": "Turkish" }, { "code": "vi", "name": "Vietnamese" }, { "code": "zh_CN", "name": "Mandarin" }, { "code": "zh_TW", "name": "Taiwanese" } diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index d9762a3e9..3a664ec00 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -20,6 +20,9 @@ "addToken": { "message": "トークンを追加" }, + "addTokens": { + "message": "トークンを追加" + }, "amount": { "message": "金額" }, @@ -46,6 +49,9 @@ "balance": { "message": "残高:" }, + "balances": { + "message": "トークン残高" + }, "balanceIsInsufficientGas": { "message": "現在のガス総量に対して残高が不足しています" }, @@ -63,10 +69,10 @@ "message": "購入" }, "buyCoinbase": { - "message": "Coinbaseで購入" + "message": "Coinbaseのサイトで購入" }, "buyCoinbaseExplainer": { - "message": "Coinbaseは、世界的なBitcoin、Ethereum、そしてLitecoinの取引所です。" + "message": "Etherを購入できます。Coinbaseは、世界的なBitcoin、Ethereum、そしてLitecoinの取引所です。" }, "cancel": { "message": "キャンセル" @@ -90,7 +96,7 @@ "message": "トランザクションの確認" }, "continueToCoinbase": { - "message": "Coinbaseで続行" + "message": "Coinbaseを開く" }, "contractDeployment": { "message": "コントラクトのデプロイ" @@ -138,6 +144,9 @@ "customGas": { "message": "ガスのカスタマイズ" }, + "customToken": { + "message": "カスタムトークン" + }, "customize": { "message": "カスタマイズ" }, @@ -154,20 +163,20 @@ "message": "DENとは、あなたのパスワードが暗号化されたMetaMask内のストレージです。" }, "deposit": { - "message": "受取り" + "message": "振込" }, "depositBTC": { - "message": "あなたのBTCを次のアドレスへデポジット:" + "message": "BTCを下記のアドレスへ振込んでください:" }, "depositCoin": { - "message": "あなたの $1を次のアドレスへデポジット", + "message": "$1を下記のアドレスへ振込んでください", "description": "Tells the user what coin they have selected to deposit with shapeshift" }, "depositEth": { - "message": "ETHをデポジット" + "message": "ETHを入金" }, "depositEther": { - "message": "Etherをデポジット" + "message": "Etherを振込" }, "depositFiat": { "message": "法定通貨でデポジット" @@ -176,10 +185,10 @@ "message": "別のアカウントから入金" }, "depositShapeShift": { - "message": "ShapeShiftで入金" + "message": "ShapeShiftで交換" }, "depositShapeShiftExplainer": { - "message": "他の暗号通貨をEtherと交換してMetaMaskのウォレットへ入金できます。アカウント作成は不要です。" + "message": "他の暗号通貨とEtherを交換して、MetaMaskのウォレットへ入金できます。アカウント作成は不要です。" }, "details": { "message": "詳細" @@ -188,10 +197,10 @@ "message": "ダイレクトデポジット" }, "directDepositEther": { - "message": "Etherを直接受け取り" + "message": "Etherを直接入金" }, "directDepositEtherExplainer": { - "message": "Etherをすでにお持ちなら、MetaMaskの新しいウォレットにEtherを送信することができます。" + "message": "既にEtherをお持ちなら、MetaMaskの新しいウォレットにEtherを送信することができます。" }, "done": { "message": "完了" @@ -209,7 +218,7 @@ "message": "パスワードを入力" }, "etherscanView": { - "message": "Etherscanでアカウントを参照" + "message": "Etherscanでアカウントを確認" }, "exchangeRate": { "message": "交換レート" @@ -266,7 +275,7 @@ "message": "必要ガスプライス" }, "getEther": { - "message": "Etherをゲット" + "message": "Etherを取得する" }, "getEtherFromFaucet": { "message": "フォーセットで $1のEtherを得ることができます。", @@ -287,7 +296,7 @@ "message": "トークンを隠す" }, "hideTokenPrompt": { - "message": "トークンを隠しますか？?" + "message": "トークンを隠しますか?" }, "howToDeposit": { "message": "どのようにEtherをデポジットしますか?" @@ -300,7 +309,7 @@ "message": "アカウントのインポート" }, "importAccountMsg": { - "message":"追加したアカウントはMetaMaskのアカウントシードフレーズとは関連付けられません。インポートしたアカウントについての詳細は" + "message":"追加したアカウントはMetaMaskのアカウントパスフレーズとは関連付けられません。インポートしたアカウントについての詳細は" }, "importAnAccount": { "message": "アカウントをインポート" @@ -334,13 +343,22 @@ "message": "JSONファイル", "description": "format for importing an account" }, + "keepTrackTokens": { + "message": "MetaMaskアカウントで入手したトークンを検索できます。" + }, "kovan": { "message": "Kovanテストネットワーク" }, + "learnMore": { + "message": "詳細" + }, "lessThanMax": { "message": " $1以下にして下さい。", "description": "helper for inputting hex as decimal input" }, + "likeToAddTokens": { + "message": "トークンを追加しますか?" + }, "limit": { "message": "リミット" }, @@ -371,8 +389,11 @@ "myAccounts": { "message": "マイアカウント" }, + "mustSelectOne": { + "message": "一つ以上のトークンを選択してください。" + }, "needEtherInWallet": { - "message": "MetaMaskを使って分散型アプリケーションを使用するためには、このウォレットにEtherが必要です。" + "message": "MetaMaskで分散型アプリケーションを使用するためには、このウォレットにEtherが必要です。" }, "needImportFile": { "message": "インポートするファイルを選択してください。", @@ -411,7 +432,7 @@ "message": "この名前にはアドレスが設定されていません。" }, "noDeposits": { - "message": "デポジットがありません。" + "message": "振込みがありません。" }, "noTransactionHistory": { "message": "トランザクション履歴がありません。" @@ -445,10 +466,13 @@ "description": "For importing an account from a private key" }, "pasteSeed": { - "message": "シードをここにペーストして下さい!" + "message": "パスフレーズをここにペーストして下さい!" }, "pleaseReviewTransaction": { - "message": "トランザクションをレビューして下さい。" + "message": "トランザクションを確認して下さい。" + }, + "popularTokens": { + "message": "人気のトークン" }, "privateKey": { "message": "秘密鍵", @@ -470,13 +494,13 @@ "message": "もっと読む" }, "receive": { - "message": "受け取る" + "message": "受取" }, "recipientAddress": { "message": "受取人アドレス" }, "refundAddress": { - "message": "あなたの返金先アドレス" + "message": "受取アドレス" }, "rejected": { "message": "拒否されました" @@ -487,12 +511,18 @@ "restoreFromSeed": { "message": "パスフレーズから復元する" }, + "restoreVault": { + "message": "ウォレットを復元する" + }, "required": { "message": "必要です。" }, "retryWithMoreGas": { "message": "より高いガスプライスで再度試して下さい。" }, + "walletSeed": { + "message": "ウォレットのパスフレーズ" + }, "revealSeedWords": { "message": "パスフレーズを表示" }, @@ -519,23 +549,35 @@ "selectService": { "message": "サービスを選択" }, + "selectType": { + "message": "キーの種類" + }, "send": { "message": "送信" }, + "sendETH": { + "message": "ETHの送信" + }, "sendTokens": { "message": "トークンを送る" }, "onlySendToEtherAddress": { "message": "ETHはイーサリウムアカウントのみに送信できます。" }, + "searchTokens": { + "message": "トークンの検索" + }, "sendTokensAnywhere": { "message": "イーサリアムアカウントを持っている人にトークンを送る" }, "settings": { "message": "設定" }, + "info": { + "message": "情報" + }, "shapeshiftBuy": { - "message": "Shapeshiftで買う" + "message": "Shapeshiftで交換" }, "showPrivateKeys": { "message": "秘密鍵を表示" @@ -565,13 +607,13 @@ "message": "送信" }, "takesTooLong": { - "message": "長くかかりすぎていますか?" + "message": "送信に時間がかかりますか?" }, "testFaucet": { "message": "Faucetをテスト" }, "to": { - "message": "宛先" + "message": "送信先" }, "toETHviaShapeShift": { "message": "ShapeShiftで $1をETHにする", @@ -595,6 +637,9 @@ "total": { "message": "合計" }, + "transactions": { + "message": "トランザクション" + }, "transactionMemo": { "message": "トランザクションメモ (オプション)" }, @@ -609,7 +654,7 @@ "description": "Followed by a link (here) to view token balances" }, "typePassword": { - "message": "パスワードタイプ" + "message": "パスワードの入力" }, "uiWelcome": { "message": "新UIへようこそ！(ベータ版)" @@ -646,7 +691,7 @@ "message": "警告" }, "whatsThis": { - "message": "これは何でしょう?" + "message": "この機能について" }, "yourSigRequested": { "message": "あなたの署名がリクエストされています。" diff --git a/app/_locales/tml/messages.json b/app/_locales/tml/messages.json new file mode 100644 index 000000000..fcc418bac --- /dev/null +++ b/app/_locales/tml/messages.json @@ -0,0 +1,912 @@ +{ + "accept": { + "message": "ஏற்கவும்" + }, + "account": { + "message": "கணக்கு" + }, + "accountDetails": { + "message": "கணக்கு விவரங்கள்" + }, + "accountName": { + "message": "கணக்கின் பெயர்" + }, + "address": { + "message": "முகவரி" + }, + "addCustomToken": { + "message": "தனிப்பயன் டோக்கனைச் சேர்க்கவும்" + }, + "addToken": { + "message": "டோக்கனைச் சேர்" + }, + "addTokens": { + "message": "டோக்கன்களைச் சேர்" + }, + "amount": { + "message": "தொகை" + }, + "amountPlusGas": { + "message": "தொகை + எரிவாயு" + }, + "appDescription": { + "message": "எதெரியும் பிரௌசர் நீட்டிப்பு", + "description": "பயன்பாட்டின் விளக்கம்" + }, + "appName": { + "message": "மேடமஸ்க் ", + "description": "பயன்பாட்டின் பெயர்" + }, + "approved": { + "message": "அங்கீகரிக்கப்பட்ட" + }, + "attemptingConnect": { + "message": "இணைக்க முயற்சி செய்க ப்ளாக்சைன்" + }, + "attributions": { + "message": "பண்புகளும்" + }, + "available": { + "message": "கிடைக்கும்" + }, + "back": { + "message": "மீண்டும்" + }, + "balance": { + "message": "இருப்பு:" + }, + "balances": { + "message": "உங்கள் இருப்பு" + }, + "balanceIsInsufficientGas": { + "message": "நடப்பு வாயு மொத்தம் போதுமான சமநிலை" + }, + "beta": { + "message": "பீட்டா" + }, + "betweenMinAndMax": { + "message": "$ 1 க்கும் அதிகமாகவும் அல்லது $ 2 க்கு சமமாகவும் இருக்க வேண்டும்.", + "description": "ஹெக்ஸ் உள்ளீடு தசம உள்ளீடு என உதவி" + }, + "blockiesIdenticon": { + "message": "ப்ளாக்கிஸ் ஐடென்டிகோன் பயன்பாட்டு" + }, + "borrowDharma": { + "message": "தர்மத்துடன் கடன் வாங்குங்கள் (பீட்டா)" + }, + "builtInCalifornia": { + "message": "மேடமஸ்க் வடிவமைக்கப்பட்டு கலிபோர்னியாவில் கட்டப்பட்டுள்ளது." + }, + "buy": { + "message": "வாங்க" + }, + "buyCoinbase": { + "message": "கோஇன்பசே வாங்கவும்" + }, + "buyCoinbaseExplainer": { + "message": "கோஇன்பசே பிறகாய்ன் , எதெரியும் மற்றும் ளிட்டசோன் வாங்க மற்றும் விற்க உலகின் மிகவும் பிரபலமான வழி" + }, + "ok": { + "message": "சரி" + }, + "cancel": { + "message": "ரத்து" + }, + "classicInterface": { + "message": "கிளாசிக் இடைமுகத்தைப் பயன்படுத்தவும்" + }, + "clickCopy": { + "message": "நகலெடுக்க கிளிக் செய்யவும்" + }, + "confirm": { + "message": "உறுதிப்படுத்தவும்" + }, + "confirmed": { + "message": "உறுதி" + }, + "confirmContract": { + "message": "ஒப்பந்தத்தை உறுதிப்படுத்துக" + }, + "confirmPassword": { + "message": "கடவுச்சொல்லை உறுதிப்படுத்துக" + }, + "confirmTransaction": { + "message": "பரிவர்த்தனை உறுதிபடுத்தவும்" + }, + "continue": { + "message": "தொடர்ந்து" + }, + "continueToCoinbase": { + "message": "கோஇன்பசே ஐத் தொடரவும்" + }, + "contractDeployment": { + "message": "ஒப்பந்த வரிசைப்படுத்தல்" + }, + "conversionProgress": { + "message": "மாற்றம் முன்னேற்றம்" + }, + "copiedButton": { + "message": "நகலெடுக்கப்பட்டன" + }, + "copiedClipboard": { + "message": "கிளிப்போர்டுக்கு நகலெடுக்கப்பட்டது" + }, + "copiedExclamation": { + "message": "நகலெடுக்கப்பட்டன!" + }, + "copiedSafe": { + "message": "நான் எங்காவது பாதுகாப்பாக நகலெடுத்திருக்கிறேன்" + }, + "copy": { + "message": "நகல்" + }, + "copyToClipboard": { + "message": "கிளிப்போர்டுக்கு நகலெடுக்கப்பட்டது" + }, + "copyButton": { + "message": " நகல் " + }, + "copyPrivateKey": { + "message": "இது உங்கள் தனிப்பட்ட விசை (நகலெடுக்க கிளிக் செய்யவும்)" + }, + "create": { + "message": "உருவாக்கவும்" + }, + "createAccount": { + "message": "உங்கள் கணக்கை துவங்குங்கள்" + }, + "createDen": { + "message": "உருவாக்கவும்" + }, + "crypto": { + "message": "கிரிப்டோ", + "description": "பரிமாற்ற வகை (கிரிப்டோசுர்ரென்சிஸ்)" + }, + "currentConversion": { + "message": "தற்போதைய மாற்றம்" + }, + "currentNetwork": { + "message": "தற்போதைய நெட்வொர்க்" + }, + "customGas": { + "message": "எரிவாயுவைத் தனிப்பயனாக்குங்கள்" + }, + "customToken": { + "message": "தனிப்பயன் டோக்கன்" + }, + "customize": { + "message": "தனிப்பயனாக்கலாம்" + }, + "customRPC": { + "message": "விருப்ப RPC ஐ" + }, + "decimalsMustZerotoTen": { + "message": "தசமங்கள் குறைந்தபட்சம் 0, மற்றும் 36 க்கு மேல் இருக்க வேண்டும்." + }, + "decimal": { + "message": "துல்லியத்தின் முடிவு" + }, + "defaultNetwork": { + "message": "எதிர் பரிவர்த்தனைகளுக்கான முன்னிருப்பு வலையமைப்பு முதன்மை நிகரமாகும்." + }, + "denExplainer": { + "message": "உங்கள் DEN என்பது உங்கள் கடவுச்சொல்-மறைகுறியாக்கப்பட்ட சேமிப்பகம் மெட்டாமாஸ்க்கிற்குள்." + }, + "deposit": { + "message": "வைப்புத்தொகை" + }, + "depositBTC": { + "message": "கீழே உங்கள் முகவரிக்கு உங்கள் BTC வைப்போம்:" + }, + "depositCoin": { + "message": "உங்கள் முகவரிக்கு $ 1 ஐ கீழே உள்ளிடவும்", + "description": "சேபஷிபிட் உடன் வைப்புக்குத் தேர்ந்தெடுக்கப்பட்ட நாணயத்தை பயனரிடம் கூறுகிறார்" + }, + "depositEth": { + "message": "வைப்புத்தொகை எது " + }, + "depositEther": { + "message": "வைப்புத்தொகை எதிர் " + }, + "depositFiat": { + "message": "ஃபியட் உடன் வைப்பு" + }, + "depositFromAccount": { + "message": "மற்றொரு கணக்கிலிருந்து வைப்பு" + }, + "depositShapeShift": { + "message": "ShapeShift உடன் வைப்பு" + }, + "depositShapeShiftExplainer": { + "message": "நீங்கள் மற்ற கிரிப்டோகிராரன்கள் சொந்தமாக வைத்திருந்தால், உங்கள் மெட்டாமாஸ்க் பணப்பையில் நேரடியாக ஈதரை வர்த்தகம் செய்யலாம் மற்றும் வைப்பு செய்யலாம். கணக்கு தேவையில்லை." + }, + "details": { + "message": "விவரங்கள்" + }, + "directDeposit": { + "message": "நேரடி வைப்பு" + }, + "directDepositEther": { + "message": "நேரடியாக வைப்புத்தொகை" + }, + "directDepositEtherExplainer": { + "message": "நீங்கள் ஏற்கனவே ஏதெர் இருந்தால், நேரடி வைப்பு மூலம் உங்கள் புதிய பணப்பையில் ஈத்தர் பெற விரைவான வழி." + }, + "done": { + "message": "முடிந்தது" + }, + "downloadStateLogs": { + "message": "மாநில பதிவுகள் பதிவிறக்க" + }, + "dropped": { + "message": "நீக்கப்பட்டார்" + }, + "edit": { + "message": "தொகு" + }, + "editAccountName": { + "message": "கணக்கு பெயரை மாற்றுக" + }, + "emailUs": { + "message": "எங்களுக்கு மின்னஞ்சல்!" + }, + "encryptNewDen": { + "message": "உங்கள் புதிய DEN ஐ குறியாக்குக" + }, + "enterPassword": { + "message": "கடவுச்சொல்லை உள்ளிடவும்" + }, + "enterPasswordConfirm": { + "message": "உறுதிப்படுத்த உங்கள் கடவுச்சொல்லை உள்ளிடவும்" + }, + "passwordNotLongEnough": { + "message": "கடவுச்சொல் போதாது" + }, + "passwordsDontMatch": { + "message": "கடவுச்சொற்கள் பொருந்தாதே" + }, + "etherscanView": { + "message": "Etherscan கணக்கைப் பார்க்கவும்" + }, + "exchangeRate": { + "message": "மாற்று விகிதம்" + }, + "exportPrivateKey": { + "message": "தனியார் விசை ஐ ஏற்றுமதி செய்க" + }, + "exportPrivateKeyWarning": { + "message": "தனிப்பட்ட விசைகளை உங்கள் சொந்த ஆபத்தில் ஏற்றுமதி செய்யுங்கள்." + }, + "failed": { + "message": "தோல்வி" + }, + "fiat": { + "message": "FIAT", + "description": "பரிமாற்ற வகை" + }, + "fileImportFail": { + "message": "கோப்பு இறக்குமதி வேலை செய்யவில்லையா? இங்கே கிளிக் செய்யவும்!", + "description": "JSON கோப்பில் பயனர் கணக்கை தங்கள் கணக்கை இறக்குமதி செய்ய உதவுகிறது" + }, + "followTwitter": { + "message": "Twitter இல் எங்களைப் பின்தொடரவும்" + }, + "from": { + "message": "இருந்து" + }, + "fromToSame": { + "message": "இருந்து மற்றும் முகவரி அதே இருக்க முடியாது" + }, + "fromShapeShift": { + "message": "ShapeShift இலிருந்து" + }, + "gas": { + "message": "எரிவாயு", + "description": "எரிவாயு விலை குறையும்" + }, + "gasFee": { + "message": "எரிவாயு கட்டணம்" + }, + "gasLimit": { + "message": "எரிவாயு வரம்பு" + }, + "gasLimitCalculation": { + "message": "நெட்வொர்க் வெற்றி விகிதங்களின் அடிப்படையில் பரிந்துரைக்கப்பட்ட எரிவாயு வரம்பை நாங்கள் கணக்கிடுகிறோம்." + }, + "gasLimitRequired": { + "message": "எரிவாயு வரம்பு தேவை" + }, + "gasLimitTooLow": { + "message": "எரிவாயு வரம்பு குறைந்தது 21000 ஆக இருக்க வேண்டும்" + }, + "generatingSeed": { + "message": "விதை உருவாக்குகிறது ..." + }, + "gasPrice": { + "message": "எரிவாயு விலை (GWEI)" + }, + "gasPriceCalculation": { + "message": "நெட்வொர்க் வெற்றி விகிதங்களின் அடிப்படையில் பரிந்துரைக்கப்பட்ட எரிவாயு விலைகளை நாங்கள் கணக்கிடுகிறோம்." + }, + "gasPriceRequired": { + "message": "எரிவாயு விலை தேவைப்படுகிறது" + }, + "getEther": { + "message": "ஈத்தர் கிடைக்கும்" + }, + "getEtherFromFaucet": { + "message": "$ 1 க்கு ஒரு குழாய் இருந்து ஈதர் கிடைக்கும்$1", + "description": "ஈத்தர் குழாய் ஐந்து பிணைய பெயர் காட்டுகிறது" + }, + "greaterThanMin": { + "message": "$ 1 க்கும் அதிகமாகவோ அல்லது சமமாகவோ இருக்க வேண்டும்", + "description": "ஹெக்ஸ் உள்ளீடு தசம உள்ளீடு என உதவி" + }, + "here": { + "message": "இங்கே", + "description": "இங்கே-கிளிக் செய்யவும்- மேலும் தகவலுக்கு (troubleTokenBalances செல்கிறது)" + }, + "hereList": { + "message": "இங்கே ஒரு பட்டியல் !!!!" + }, + "hide": { + "message": "மறை" + }, + "hideToken": { + "message": "டோக்கனை மறை" + }, + "hideTokenPrompt": { + "message": "டோக்கனை மறை?" + }, + "howToDeposit": { + "message": "எப்படி ஈத்தர் வைப்பது?" + }, + "holdEther": { + "message": "இது நீங்கள் ஈத்தர் மற்றும் டோக்கன்களை வைத்திருக்க உதவுகிறது, மற்றும் பரவலாக்கப்பட்ட பயன்பாடுகளுக்கு உங்கள் பாலமாக செயல்படுகிறது." + }, + "import": { + "message": "இறக்குமதி", + "description": "தேர்ந்தெடுக்கப்பட்ட கோப்பிலிருந்து ஒரு கணக்கை இறக்குமதி செய்ய பொத்தானை அழுத்தவும்" + }, + "importAccount": { + "message": "கணக்கை இறக்குமதி செய்க" + }, + "importAccountMsg": { + "message":" இறக்குமதி செய்யப்பட்ட கணக்கு உங்கள் முதலில் உருவாக்கப்பட்ட மெட்டாமாஸ்க் கணக்கு விதை மூலம் தொடர்புடையதாக இருக்காது. இறக்குமதி செய்யப்பட்ட கணக்குகள் பற்றி மேலும் அறிக " + }, + "importAnAccount": { + "message": "ஒரு கணக்கை இறக்குமதி செய்க" + }, + "importDen": { + "message": "இறக்குமதி DEN இறக்குமதி" + }, + "imported": { + "message": "இறக்குமதி", + "description": "ஒரு கணக்கு முழுமையாக விசைப்பலகையில் ஏற்றப்பட்டதைக் காட்டுகிறது" + }, + "infoHelp": { + "message": "தகவல் மற்றும் உதவி" + }, + "insufficientFunds": { + "message": "போதுமான பணம் இல்லை." + }, + "insufficientTokens": { + "message": "போதுமான டோக்கன்கள்." + }, + "invalidAddress": { + "message": "தவறான முகவரி" + }, + "invalidAddressRecipient": { + "message": "பெறுநர் முகவரி தவறானது" + }, + "invalidGasParams": { + "message": "தவறான எரிவாயு அளவுருக்கள்" + }, + "invalidInput": { + "message": "தவறான உள்ளீடு.." + }, + "invalidRequest": { + "message": "தவறான கோரிக்கை" + }, + "invalidRPC": { + "message": "தவறான RPC URI" + }, + "jsonFail": { + "message": "ஏதோ தவறு நடந்துவிட்டது. உங்கள் JSON கோப்பு ஒழுங்காக வடிவமைக்கப்பட்டுள்ளது என்பதை உறுதிப்படுத்தவும்" + }, + "jsonFile": { + "message": "JSON கோப்பு", + "description": "ஒரு கணக்கை இறக்குமதி செய்ய வடிவமைக்கப்பட்டுள்ளது" + }, + "keepTrackTokens": { + "message": "உங்கள் மேடமஸ்க் கணக்குடன் நீங்கள் வாங்கிய டோக்கன்களை கண்காணியுங்கள்." + }, + "kovan": { + "message": "கோவன் டெஸ்ட் நெட்வொர்க்" + }, + "knowledgeDataBase": { + "message": "எங்கள் அறிவுத் தளத்தைப் பார்வையிடவும்" + }, + "max": { + "message": "மேக்ஸ்" + }, + "learnMore": { + "message": "மேலும் அறிக" + }, + "lessThanMax": { + "message": "$ 1 க்கும் குறைவாகவோ அல்லது சமமாகவோ இருக்க வேண்டும்.", + "description": "ஹெக்ஸ் உள்ளீடு தசம உள்ளீடு என உதவி" + }, + "likeToAddTokens": { + "message": "இந்த டோக்கன்களைச் சேர்க்க விரும்புகிறீர்களா?" + }, + "links": { + "message": "இணைப்புகள்" + }, + "limit": { + "message": "அளவு" + }, + "loading": { + "message": "ஏற்றுதல் ..." + }, + "loadingTokens": { + "message": "டோக்கன்களை ஏற்றுகிறது ..." + }, + "localhost": { + "message": "லோக்கல் ஹோஸ்ட் 8545" + }, + "login": { + "message": "உள் நுழை" + }, + "logout": { + "message": "வெளியேறு" + }, + "loose": { + "message": "லூஸ்" + }, + "loweCaseWords": { + "message": "விதை வார்த்தைகள் ஸ்மால் எழுத்துகள் மட்டுமே" + }, + "mainnet": { + "message": "முதன்மை எதெரியும் நெட்வொர்க்" + }, + "message": { + "message": "செய்தி" + }, + "metamaskDescription": { + "message": "மேடமஸ்க் என்பது ஒரு பாதுகாப்பான அடையாள வால்ட் எதெரியும்" + }, + "min": { + "message": "குறைந்தபட்ச" + }, + "myAccounts": { + "message": "எனது கணக்குகள்" + }, + "mustSelectOne": { + "message": "குறைந்தது 1 டோக்கனை தேர்ந்தெடுக்க வேண்டும்." + }, + "needEtherInWallet": { + "message": "மேடமஸ்க் ஐ பயன்படுத்தி பரவலாக்கப்பட்ட பயன்பாடுகளுடன் தொடர்பு கொள்ள, உங்கள் பணப்பரிமாற்றத்தில் ஈதர் தேவை." + }, + "needImportFile": { + "message": "இறக்குமதி செய்ய ஒரு கோப்பை நீங்கள் தேர்ந்தெடுக்க வேண்டும்.", + "description": "பயனர் ஒரு கணக்கு முக்கியம் மற்றும் தொடர ஒரு கோப்பு சேர்க்க வேண்டும்" + }, + "needImportPassword": { + "message": "நீங்கள் தேர்ந்தெடுத்த கோப்புக்கு ஒரு கடவுச்சொல்லை உள்ளிட வேண்டும்.", + "description": "ஒரு கணக்கை இறக்குமதி செய்ய கடவுச்சொல் மற்றும் கோப்பு தேவை" + }, + "negativeETH": { + "message": "ETH எதிர்மறை அளவுகளை அனுப்ப முடியாது." + }, + "networks": { + "message": "நெட்வொர்க்ஸ்" + }, + "newAccount": { + "message": "புதிய கணக்கு" + }, + "newAccountNumberName": { + "message": "கணக்கு $ 1", + "description": "கணக்கு கணக்கை உருவாக்குவதற்கு அடுத்த கணக்கின் இயல்புநிலை பெயர் உருவாக்கப்படும்" + }, + "newContract": { + "message": "புதிய ஒப்பந்தம்" + }, + "newPassword": { + "message": "புதிய கடவுச்சொல் (min 8 எழுத்துகள்)" + }, + "newRecipient": { + "message": "புதிய பெறுநர்" + }, + "newRPC": { + "message": "புதிய RPC URL" + }, + "next": { + "message": "அடுத்த" + }, + "noAddressForName": { + "message": "இந்த பெயருக்கான முகவரி அமைக்கப்படவில்லை." + }, + "noDeposits": { + "message": "எந்த வைப்புகளும் கிடைக்கவில்லை" + }, + "noTransactionHistory": { + "message": "பரிவர்த்தனை வரலாறு இல்லை." + }, + "noTransactions": { + "message": "பரிவர்த்தனைகள் இல்லை" + }, + "notStarted": { + "message": "துவங்கவில்லை" + }, + "oldUI": { + "message": "பழைய UI" + }, + "oldUIMessage": { + "message": "நீங்கள் பழைய UI க்கு திரும்பியுள்ளீர்கள். மேல் வலது கீழ்தோன்றும் மெனுவில் உள்ள விருப்பத்தின் மூலம் புதிய UI ஐ மீண்டும் மாறலாம்." + }, + "or": { + "message": "அல்லது", + "description": "ஒரு புதிய கணக்கை உருவாக்க அல்லது இறக்குமதி செய்வதற்கு இடையே தேர்வு" + }, + "passwordCorrect": { + "message": "தயவுசெய்து உங்கள் கடவுச்சொல் சரியானதா என உறுதிப்படுத்தவும்." + }, + "passwordMismatch": { + "message": "கடவுச்சொற்கள் பொருந்தவில்லை", + "description": "கடவுச்சொல் உருவாக்கத்தில், இரண்டு புதிய கடவுச்சொல் புலங்கள் பொருந்தவில்லை" + }, + "passwordShort": { + "message": "கடவுச்சொல் நீண்ட காலமாக இல்லை", + "description": "கடவுச்சொல் உருவாக்கத்தில், பாதுகாப்பானதாக இருக்கும் கடவுச்சொல் போதும்" + }, + "pastePrivateKey": { + "message": "இங்கே உங்கள் தனிப்பட்ட விசை சரத்தை ஒட்டுக:", + "description": "ஒரு தனிப்பட்ட விசை ஒரு கணக்கை இறக்குமதி செய்ய" + }, + "pasteSeed": { + "message": "இங்கே உங்கள் விதை சொற்றொடரை ஒட்டவும்!" + }, + "personalAddressDetected": { + "message": "தனிப்பட்ட முகவரி கண்டறியப்பட்டது. டோக்கன் ஒப்பந்த முகவரியை உள்ளிடவும்." + }, + "pleaseReviewTransaction": { + "message": "உங்கள் பரிவர்த்தனை மதிப்பாய்வு செய்யவும்." + }, + "popularTokens": { + "message": "பிரபலமான டோக்கன்கள்" + }, + "privacyMsg": { + "message": "தனியுரிமை கொள்கை" + }, + "privateKey": { + "message": "தனிப்பட்ட விசை", + "description": "ஒரு கணக்கை இறக்குமதி செய்ய பயன்படுத்த இந்த வகை கோப்பை தேர்ந்தெடுக்கவும்" + }, + "privateKeyWarning": { + "message": "எச்சரிக்கை: இந்த விசையை எப்போதும் வெளியிட வேண்டாம். உங்கள் தனிப்பட்ட விசைகளைக் கொண்ட எவரும் உங்கள் கணக்கில் உள்ள எந்த சொத்துக்களையும் திருடலாம்." + }, + "privateNetwork": { + "message": "தனியார் நெட்வொர்க்" + }, + "qrCode": { + "message": "QR குறியீட்டைக் காட்டு" + }, + "readdToken": { + "message": "உங்கள் கணக்கு விருப்பங்கள் மெனுவில் \"டோக்கனைச் சேர்\" என்பதன் மூலம் நீங்கள் எதிர்காலத்தில் இந்த டோக்கனை மீண்டும் சேர்க்கலாம்." + }, + "readMore": { + "message": "மேலும் வாசிக்க இங்கே." + }, + "readMore2": { + "message": "மேலும் வாசிக்க." + }, + "receive": { + "message": "பெறுக" + }, + "recipientAddress": { + "message": "பெறுநர் முகவரி" + }, + "refundAddress": { + "message": "உங்கள் பணத்தை திருப்பி அனுப்பும் முகவரி" + }, + "rejected": { + "message": "நிராகரிக்கப்பட்டது" + }, + "resetAccount": { + "message": "கணக்கை மீட்டமை" + }, + "restoreFromSeed": { + "message": "விதை வாக்கியத்திலிருந்து மீட்கவும்" + }, + "restoreVault": { + "message": "வால்ட் மீட்கவும்" + }, + "required": { + "message": "தேவையான" + }, + "retryWithMoreGas": { + "message": "இங்கே அதிக எரிவாயு விலை மீண்டும் முயற்சிக்கவும்" + }, + "walletSeed": { + "message": "வால்ட் விதை" + }, + "revealSeedWords": { + "message": "விதை வார்த்தைகள் வெளிப்படுத்த" + }, + "revealSeedWordsWarning": { + "message": "உங்கள் விதை வார்த்தைகள் ஒரு பொது இடத்தில் மீட்க வேண்டாம்! உங்கள் எல்லா கணக்குகளையும் திருட இந்த வார்த்தைகள் பயன்படுத்தப்படலாம்." + }, + "revert": { + "message": "மாற்றியமை" + }, + "rinkeby": { + "message": "ரிங்கெப்ய டெஸ்ட் நெட்வொர்க்" + }, + "ropsten": { + "message": "ரொப்ஸ்டென் டெஸ்ட் நெட்வொர்க்" + }, + "currentRpc": { + "message": "தற்போதைய RPC" + }, + "connectingToMainnet": { + "message": "முக்கிய எதெரியும் நெட்வொர்க் இணைக்கும்" + }, + "connectingToRopsten": { + "message": "ரொப்ஸ்டென் டெஸ்ட் நெட்வொர்க்குடன் இணைக்கிறது" + }, + "connectingToKovan": { + "message": "கோவன் டெஸ்ட் நெட்வொர்க்குடன் இணைத்தல்" + }, + "connectingToRinkeby": { + "message": "ரிங்கெப்ய டெஸ்ட் நெட்வொர்க்குடன் இணைக்கிறது" + }, + "connectingToUnknown": { + "message": "தெரியாத நெட்வொர்க்குடன் இணைக்கிறது" + }, + "sampleAccountName": { + "message": "உதாரணமாக எனது புதிய கணக்கு", + "description": "தங்கள் கணக்கில் மனிதர் படிக்கக்கூடிய பெயரைச் சேர்க்கும் கருத்தை பயனர் புரிந்து கொள்ள உதவுங்கள்" + }, + "save": { + "message": "சேமி" + }, + "reprice_title": { + "message": "ரெப்ரிஸ் பரிவர்த்தனை" + }, + "reprice_subtitle": { + "message": "உங்கள் பரிவர்த்தனைகளை மேலெழுதும் முயற்சியை அதிகரிக்க உங்கள் எரிவாயு விலையை அதிகரிக்கவும்" + }, + "saveAsFile": { + "message": "கோப்பாக சேமிக்கவும்", + "description": "கணக்கு ஏற்றுமதி செயல்முறை" + }, + "saveSeedAsFile": { + "message": "கோப்பு என விதை வார்த்தைகள் சேமிக்கவும்" + }, + "search": { + "message": "தேடல்" + }, + "secretPhrase": { + "message": "உங்கள் பெட்டகத்தை மீட்டெடுப்பதற்காக இங்கே உங்கள் ரகசிய பன்னிரண்டு வார்த்தை சொற்றொடரை உள்ளிடவும்." + }, + "newPassword8Chars": { + "message": "புதிய கடவுச்சொல் (குறைந்தபட்சம் 8 எழுத்துகள்)" + }, + "seedPhraseReq": { + "message": "விதை வாக்கியங்கள் 12 வார்த்தைகள் நீண்டவை" + }, + "select": { + "message": "தேர்வு" + }, + "selectCurrency": { + "message": "நாணயத்தைத் தேர்ந்தெடு" + }, + "selectService": { + "message": "சேவை தேர்ந்தெடுக்கவும்" + }, + "selectType": { + "message": "வகை தேர்ந்தெடு" + }, + "send": { + "message": "அனுப்பு" + }, + "sendETH": { + "message": "ETH ஐ அனுப்பு" + }, + "sendTokens": { + "message": "டோக்கன்களை அனுப்பவும்" + }, + "onlySendToEtherAddress": { + "message": "ETH ஐ ஒரு எதரியும் முகவரிக்கு மட்டும் அனுப்பவும்." + }, + "searchTokens": { + "message": "தேடல் டோக்கன்ஸ்" + }, + "sendTokensAnywhere": { + "message": "யாருடனும் டோக்கன்களை அனுப்பவும் எதெரியும் கணக்கு" + }, + "settings": { + "message": "அமைப்புகள்" + }, + "info": { + "message": "தகவல்" + }, + "shapeshiftBuy": { + "message": "Shapeshift உடன் வாங்கவும்" + }, + "showPrivateKeys": { + "message": "தனிப்பட்ட விசைகளைக் காண்பி" + }, + "showQRCode": { + "message": "QR குறியீட்டைக் காட்டு" + }, + "sign": { + "message": "உள்நுழை" + }, + "signed": { + "message": "கையொப்பமிடப்பட்ட" + }, + "signMessage": { + "message": "செய்தியை பதிவு செய்க" + }, + "signNotice": { + "message": "இந்த செய்தியில் கையொப்பமிடலாம் \nஆபத்தான பக்க விளைவுகள் இருக்கலாம். \n உங்கள் மொத்த கணக்கில் முழுமையாக நம்பக்கூடிய தளங்களில் செய்திகளை மட்டுமே கையொப்பமிடுங்கள். \n இந்த ஆபத்தான முறை எதிர்கால பதிப்பில் அகற்றப்படும்." + }, + "sigRequest": { + "message": "கையொப்பம் கோரிக்கை" + }, + "sigRequested": { + "message": "கையொப்பம் கோரப்பட்டது" + }, + "spaceBetween": { + "message": "வார்த்தைகள் இடையே இடைவெளி மட்டுமே இருக்க முடியும்" + }, + "status": { + "message": "நிலைமை" + }, + "stateLogs": { + "message": "மாநில பதிவுகள்" + }, + "stateLogsDescription": { + "message": "மாநில பதிவுகள் உங்கள் பொது கணக்கு முகவரிகள் மற்றும் பரிமாற்றங்களை அனுப்பியுள்ளன." + }, + "stateLogError": { + "message": "மாநில பதிவுகளை மீட்டெடுப்பதில் பிழை." + }, + "submit": { + "message": "சமர்ப்பி" + }, + "submitted": { + "message": "சமர்ப்பிக்கப்பட்டது" + }, + "supportCenter": { + "message": "எங்கள் ஆதரவு மையத்தைப் பார்வையிடவும்" + }, + "symbolBetweenZeroTen": { + "message": "குறியீடு 0 மற்றும் 10 எழுத்துகளுக்கு இடையில் இருக்க வேண்டும்." + }, + "takesTooLong": { + "message": "நீண்ட நேரம் எடுத்துக்கொள்கிறது?" + }, + "terms": { + "message": "பயன்பாட்டு விதிமுறைகளை" + }, + "testFaucet": { + "message": "சோதனை குழாய்" + }, + "to": { + "message": "பெறுநர்: " + }, + "toETHviaShapeShift": { + "message": "$ 1 முதல் ETH வரை வடிவம்", + "description": "செய்தி தொடக்கத்தில் வைப்பு வகைகளில் நிரப்பப்படும்" + }, + "tokenAddress": { + "message": "டோக்கன் முகவரி" + }, + "tokenAlreadyAdded": { + "message": "டோக்கன் ஏற்கனவே சேர்க்கப்பட்டது." + }, + "tokenBalance": { + "message": "உங்கள் டோக்கன் இருப்பு:" + }, + "tokenSelection": { + "message": "டோக்கன்களைத் தேடு அல்லது பிரபல டோக்கன்களின் பட்டியலிலிருந்து தேர்ந்தெடுக்கவும்." + }, + "tokenSymbol": { + "message": "டோக்கன் சின்னம்" + }, + "tokenWarning1": { + "message": "உங்கள் மேடமஸ்க் கணக்குடன் நீங்கள் வாங்கிய டோக்கன்களை கண்காணியுங்கள். வேறு கணக்கைப் பயன்படுத்தி டோக்கன்களை வாங்கிவிட்டால், அந்த டோக்கன்கள் இங்கே தோன்றாது." + }, + "total": { + "message": "மொத்த" + }, + "transactions": { + "message": "பரிவர்த்தனைகள்" + }, + "transactionError": { + "message": "பரிவர்த்தனை பிழை. விதிமுறை ஒப்பந்தத்தில் விதிவிலக்கு." + }, + "transactionMemo": { + "message": "பரிவர்த்தனை குறிப்பு (விருப்பம்)" + }, + "transactionNumber": { + "message": "பரிவர்த்தனை எண்" + }, + "transfers": { + "message": "இடமாற்றங்கள்" + }, + "troubleTokenBalances": { + "message": "உங்கள் டோக்கன் நிலுவைகளை ஏற்றுவதில் சிக்கல் ஏற்பட்டது. நீங்கள் அவர்களை பார்க்க முடியும்.", + "description": "டோக்கன் நிலுவைகளை காண ஒரு இணைப்பு (இங்கே) தொடர்ந்து" + }, + "twelveWords": { + "message": "இந்த 12 வார்த்தைகள் உங்கள் மெட்டாமாஸ்க் கணக்கை மீட்க ஒரே வழி. \n அவற்றை எங்காவது பாதுகாப்பாகவும் ரகசியமாகவும் சேமிக்கவும்." + }, + "typePassword": { + "message": "உங்கள் கடவுச்சொல்லை தட்டச்சு செய்யவும்" + }, + "uiWelcome": { + "message": "புதிய UI (பீட்டா) க்கு வரவேற்கிறோம்" + }, + "uiWelcomeMessage": { + "message": "இப்போது நீங்கள் புதிய மெட்டாமாஸ்க்கு UI ஐ பயன்படுத்துகிறீர்கள். சுற்றி பாருங்கள், டோக்கன்களை அனுப்பும் புதிய அம்சங்களை முயற்சிக்கவும், உங்களிடம் ஏதேனும் சிக்கல் இருந்தால் எங்களுக்குத் தெரியப்படுத்தவும்." + }, + "unapproved": { + "message": "அங்கீகரிக்கப்படாத" + }, + "unavailable": { + "message": "கிடைக்கவில்லை" + }, + "unknown": { + "message": "தெரியாத" + }, + "unknownNetwork": { + "message": "அறியப்படாத தனியார் நெட்வொர்க்" + }, + "unknownNetworkId": { + "message": "தெரியாத நெட்வொர்க் ஐடி" + }, + "uriErrorMsg": { + "message": "URI கள் சரியான HTTP / HTTPS முன்னொட்டு தேவை." + }, + "usaOnly": { + "message": "அமெரிக்கா மட்டும்", + "description": "இந்த பரிமாற்றத்தைப் பயன்படுத்தி அமெரிக்காவில் உள்ளவர்களுக்கு மட்டுமே இது வரையறுக்கப்படுகிறது" + }, + "usedByClients": { + "message": "பல்வேறு வாடிக்கையாளர்கள் பல்வேறு பயன்படுத்திய" + }, + "useOldUI": { + "message": "உஸ் ஓல்ட் உய் " + }, + "validFileImport": { + "message": "இறக்குமதி செய்ய சரியான கோப்பு தேர்ந்தெடுக்க வேண்டும்." + }, + "vaultCreated": { + "message": "வால்ட் உருவாக்கப்பட்டது" + }, + "viewAccount": { + "message": "கணக்கைக் காட்டு" + }, + "visitWebSite": { + "message": "எங்கள் வலைத்தளத்தைப் பார்வையிடவும்" + }, + "warning": { + "message": "எச்சரிக்கை" + }, + "welcomeBeta": { + "message": "மெட்டாமாஸ்க் பீட்டாவுக்கு வருக" + }, + "whatsThis": { + "message": "இது என்ன?" + }, + "yourSigRequested": { + "message": "உங்கள் கையொப்பம் கோரப்படுகிறது" + }, + "youSign": { + "message": "நீங்கள் கையெழுத்திடுகிறீர்கள்" + } +} diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json new file mode 100644 index 000000000..c2c09bc91 --- /dev/null +++ b/app/_locales/tr/messages.json @@ -0,0 +1,912 @@ +{ + "accept": { + "message": "Kabul et" + }, + "account": { + "message": "Hesap" + }, + "accountDetails": { + "message": "Hesap Detayları" + }, + "accountName": { + "message": "Hesap İsmi" + }, + "address": { + "message": "Adres" + }, + "addCustomToken": { + "message": "Özel jeton ekle" + }, + "addToken": { + "message": "Jeton ekle" + }, + "addTokens": { + "message": "Jetonlar ekle" + }, + "amount": { + "message": "Tutar" + }, + "amountPlusGas": { + "message": "Tutar + Gas" + }, + "appDescription": { + "message": "Ethereum Tarayıcı Uzantısı", + "description": "Uygulama açıklaması" + }, + "appName": { + "message": "MetaMask", + "description": "Uygulama ismi" + }, + "approved": { + "message": "Onaylandı" + }, + "attemptingConnect": { + "message": "Blockchain'e bağlanmayı deniyor" + }, + "attributions": { + "message": "Atıflar" + }, + "available": { + "message": "Müsait" + }, + "back": { + "message": "Geri" + }, + "balance": { + "message": "Bakiye:" + }, + "balances": { + "message": "Jeton bakiyesi" + }, + "balanceIsInsufficientGas": { + "message": "Toplam gas için yetersiz bakiye" + }, + "beta": { + "message": "BETA" + }, + "betweenMinAndMax": { + "message": "$1'e eşit veya daha büyük olmalı ve $2'den küçük veya eşit olmalı", + "description": "Onaltılık sayının ondalık sayı olarak girişi için yardımcı" + }, + "blockiesIdenticon": { + "message": "Blockies Identicon kullan" + }, + "borrowDharma": { + "message": "Dharma (Beta) ile ödünç al" + }, + "builtInCalifornia": { + "message": "MetaMask California'da tasarlandı ve yaratıldı" + }, + "buy": { + "message": "Satın al" + }, + "buyCoinbase": { + "message": "Coinbase'de satın al" + }, + "buyCoinbaseExplainer": { + "message": "Coinbase bitcoin, ethereum, and litecoin alıp satmanın dünyadaki en popüler yolu" + }, + "ok": { + "message": "Tamam" + }, + "cancel": { + "message": "Vazgeç" + }, + "classicInterface": { + "message": "Klasik arayüzü kullan" + }, + "clickCopy": { + "message": "Kopyalamak için tıkla" + }, + "confirm": { + "message": "Onayla" + }, + "confirmed": { + "message": "Onaylandı" + }, + "confirmContract": { + "message": "Sözleşmeyi onayla" + }, + "confirmPassword": { + "message": "Şifreyi onayla" + }, + "confirmTransaction": { + "message": "İşlemi onayla" + }, + "continue": { + "message": "Devam et" + }, + "continueToCoinbase": { + "message": "Coinbase'e devam et" + }, + "contractDeployment": { + "message": "Sözleşme kurulumu" + }, + "conversionProgress": { + "message": "Çevirim devam ediyor" + }, + "copiedButton": { + "message": "Kopyalandı" + }, + "copiedClipboard": { + "message": "Panoya kopyalandı" + }, + "copiedExclamation": { + "message": "Kopyalandı!" + }, + "copiedSafe": { + "message": "Güvenli bir yere kopyaladım" + }, + "copy": { + "message": "Kopyala" + }, + "copyToClipboard": { + "message": "Panoya kopyala" + }, + "copyButton": { + "message": " Kopyala " + }, + "copyPrivateKey": { + "message": "Bu sizin özel anahtarınız (kopyalamak için tıklayın)" + }, + "create": { + "message": "Yarat" + }, + "createAccount": { + "message": "Hesap Oluştur" + }, + "createDen": { + "message": "Yarat" + }, + "crypto": { + "message": "Kripto", + "description": "Kambiyo tipi (kripto para)" + }, + "currentConversion": { + "message": "Geçerli çevirme" + }, + "currentNetwork": { + "message": "Geçerli Ağ" + }, + "customGas": { + "message": "Gas'i özelleştir" + }, + "customToken": { + "message": "Özel Jeton" + }, + "customize": { + "message": "Özelleştir" + }, + "customRPC": { + "message": "Özel RPC" + }, + "decimalsMustZerotoTen": { + "message": "Ondalıklar en azından 0 olmalı ve 36'dan büyük olmamalı." + }, + "decimal": { + "message": "Ondalık hassasiyeti" + }, + "defaultNetwork": { + "message": "Ether işlemleri için varsayılan ağ Main Net." + }, + "denExplainer": { + "message": "DEN'iniz MetaMask içersinde parola-şifrelenmiş deponuzdur." + }, + "deposit": { + "message": "Yatır" + }, + "depositBTC": { + "message": "BTC'inizi aşağıdaki adrese yatırın:" + }, + "depositCoin": { + "message": "$1'nızı aşağıdaki adrese yatırın", + "description": "Kullanıcıya hangi jetonu seçtiyse onu yatırmasını shapeshift ile söyler." + }, + "depositEth": { + "message": "Eth yatır" + }, + "depositEther": { + "message": "Ether yatır" + }, + "depositFiat": { + "message": "Para yatır" + }, + "depositFromAccount": { + "message": "Başka bir hesaptan yatır" + }, + "depositShapeShift": { + "message": "ShapeShift ile yatır" + }, + "depositShapeShiftExplainer": { + "message": "Eğer başka kripto paralara sahipseniz, MetaMask cüzdanınıza direk olarak Ether yatırabilirsiniz. Hesaba gerek yoktur." + }, + "details": { + "message": "Ayrıntılar" + }, + "directDeposit": { + "message": "Direk Yatırma" + }, + "directDepositEther": { + "message": "Direk Ether Yatırma" + }, + "directDepositEtherExplainer": { + "message": "Eğer çoktan Etheriniz varsa, yeni hesabınıza Ether aktarmanın en kolay yolu direk yatırmadır." + }, + "done": { + "message": "Bitti" + }, + "downloadStateLogs": { + "message": "Durum kayıtlarını indir" + }, + "dropped": { + "message": "Bırakıldı" + }, + "edit": { + "message": "Düzenle" + }, + "editAccountName": { + "message": "Hesap ismini düzenle" + }, + "emailUs": { + "message": "Bize e-posta atın!" + }, + "encryptNewDen": { + "message": "Yeni DEN'inizi şifreleyin" + }, + "enterPassword": { + "message": "Parolanızı girin" + }, + "enterPasswordConfirm": { + "message": "Onaylamak için parolanızı girin" + }, + "passwordNotLongEnough": { + "message": "Parola yeterince uzun değil" + }, + "passwordsDontMatch": { + "message": "Parolalar eşleşmiyor" + }, + "etherscanView": { + "message": "Hesabı Etherscan üzerinde izle" + }, + "exchangeRate": { + "message": "Döviz kuru" + }, + "exportPrivateKey": { + "message": "Özel anahtarı ver" + }, + "exportPrivateKeyWarning": { + "message": "Özel anahtarınızı vermek sizin sorumluluğunuzdadır." + }, + "failed": { + "message": "Başarısız oldu" + }, + "fiat": { + "message": "Para", + "description": "Döviz türü" + }, + "fileImportFail": { + "message": "Dosya alma çalışmıyor mu? Buraya tıklayın!", + "description": "Kullanıcıların hesaplarını JSON dosyasından almalarına yardım eder" + }, + "followTwitter": { + "message": "Bizi twitter'da takip edin" + }, + "from": { + "message": "Kimden" + }, + "fromToSame": { + "message": "Kimden ve kime adresi aynı olamaz" + }, + "fromShapeShift": { + "message": "ShapeShift'den" + }, + "gas": { + "message": "Gas", + "description": "Gas maliyetinin kısa indikatörü" + }, + "gasFee": { + "message": "Gas Ücreti" + }, + "gasLimit": { + "message": "Gas Limiti" + }, + "gasLimitCalculation": { + "message": "Önerilen gas limitini ağ başarı oranını baz alarak hesaplıyoruz." + }, + "gasLimitRequired": { + "message": "Gas limiti gereklidir" + }, + "gasLimitTooLow": { + "message": "Gas limiti en az 21000 olmalıdır" + }, + "generatingSeed": { + "message": "Kaynak Oluşturuyor..." + }, + "gasPrice": { + "message": "Gas Fiyatı (GWEI)" + }, + "gasPriceCalculation": { + "message": "Önerilen gas fiyatını ağ başarı oranını baz alarak hesaplıyoruz." + }, + "gasPriceRequired": { + "message": "Gas Fiyatı Gereklidir" + }, + "getEther": { + "message": "Ether Al" + }, + "getEtherFromFaucet": { + "message": "Musluktan $1 karşılığı Ether alın", + "description": "Ether musluğunun ağ ismini gösterir" + }, + "greaterThanMin": { + "message": "must be greater than or equal to $1.", + "description": "helper for inputting hex as decimal input" + }, + "here": { + "message": "burada", + "description": "daha fazla bilgi için -buraya tıklayın- (troubleTokenBalances ile gidiyor)" + }, + "hereList": { + "message": "İşte bir liste!!!!" + }, + "hide": { + "message": "Gizle" + }, + "hideToken": { + "message": "Jetonu gizle" + }, + "hideTokenPrompt": { + "message": "Jetonu gizle?" + }, + "howToDeposit": { + "message": "Ether'i nasıl yatırmak istersiniz?" + }, + "holdEther": { + "message": "Ether ve jeton tutmanızı sağlar ve merkezi olmayan uygulamalar ve sizin aranızda köprü vazifesi görür." + }, + "import": { + "message": "Al", + "description": "Seçilen dosyadan hesap alma düğmesi. " + }, + "importAccount": { + "message": "Hesap Al" + }, + "importAccountMsg": { + "message":" Alınan hesaplar orjinal kaynakifadenizle yarattığınız MetaMask hesabınızla ilişkilendirilmez. Alınan hesaplar ile ilgili daha fazla bilgi edinin " + }, + "importAnAccount": { + "message": "Hesap al" + }, + "importDen": { + "message": "Varolan DEN al" + }, + "imported": { + "message": "Alındı", + "description": "Hesabın keyringe başarı ile alındığını gösteren durum" + }, + "infoHelp": { + "message": "Bilgi ve yardım" + }, + "insufficientFunds": { + "message": "Yetersiz kaynak." + }, + "insufficientTokens": { + "message": "Yetersiz Jeton." + }, + "invalidAddress": { + "message": "Geçersiz adres" + }, + "invalidAddressRecipient": { + "message": "Alıcı adresi geçersiz" + }, + "invalidGasParams": { + "message": "Geçersiz gas parametreleri" + }, + "invalidInput": { + "message": "Geçersiz giriş." + }, + "invalidRequest": { + "message": "Geçersiz istek" + }, + "invalidRPC": { + "message": "Geçersiz RPC URI" + }, + "jsonFail": { + "message": "Birşeyler yanlış gitti. JSON dosyanızın düzgün derlendiğinden emin olun." + }, + "jsonFile": { + "message": "JSON Dosyası", + "description": "Hesap alımı için düzenle" + }, + "keepTrackTokens": { + "message": "MetaMask hesabınızla satın aldığınız jetonların kaydını tutun." + }, + "kovan": { + "message": "Kovan Test Ağı" + }, + "knowledgeDataBase": { + "message": "Bilgi veritabanımızı ziyaret edin" + }, + "max": { + "message": "Maksimum" + }, + "learnMore": { + "message": "Daha fazla bilgi." + }, + "lessThanMax": { + "message": "$1'den az veya eşit olmalıdır.", + "description": "Onaltılık sayıyı ondalık olarak girmek için yardımcı" + }, + "likeToAddTokens": { + "message": "Bu jetonlara adres eklemek ister misiniz?" + }, + "links": { + "message": "Bağlantılar" + }, + "limit": { + "message": "Limit" + }, + "loading": { + "message": "Yükleniyor..." + }, + "loadingTokens": { + "message": "Jetonlar yükleniyor..." + }, + "localhost": { + "message": "Localhost 8545" + }, + "login": { + "message": "Giriş yap" + }, + "logout": { + "message": "Çıkış" + }, + "loose": { + "message": "Gevşek" + }, + "loweCaseWords": { + "message": "kaynak kelimeleri sadece küçük harflerden oluşabilir." + }, + "mainnet": { + "message": "Main Ethereum Ağı" + }, + "message": { + "message": "Mesaj" + }, + "metamaskDescription": { + "message": "MetaMask Ethereum için güvenli bir kimlik kasasıdır." + }, + "min": { + "message": "Minimum" + }, + "myAccounts": { + "message": "Hesaplarım" + }, + "mustSelectOne": { + "message": "En az bir jeton seçilmeli" + }, + "needEtherInWallet": { + "message": "MetaMask kullanarak merkezi olamayan uygulamalarla etkileşmek için cüzdanınızda Ether bulunmalıdır." + }, + "needImportFile": { + "message": "Almak için bir dosya seçmelisiniz.", + "description": "Kullanıcı bir hesap alır ve devam etmek içinbir dosya seçmelidir." + }, + "needImportPassword": { + "message": "Seçilen dosya için bir parola girmelisiniz.", + "description": "Hesap almak için parola ve dosya gerekiyor." + }, + "negativeETH": { + "message": "Negatif ETH miktarları gönderilemez." + }, + "networks": { + "message": "Ağlar" + }, + "newAccount": { + "message": "Yeni Hesap" + }, + "newAccountNumberName": { + "message": "Hesap $1", + "description": "Hesap yaratma ekranındaki bir sonraki hesabın varsayılan ismi" + }, + "newContract": { + "message": "Yeni Sözleşme" + }, + "newPassword": { + "message": "Yeni Parola (min 8 karakter)" + }, + "newRecipient": { + "message": "Yeni alıcı" + }, + "newRPC": { + "message": "Yeni RPC URL" + }, + "next": { + "message": "Sonraki" + }, + "noAddressForName": { + "message": "Bu isim için bir adres tanımlanmamış." + }, + "noDeposits": { + "message": "Yatırma alınmadı" + }, + "noTransactionHistory": { + "message": "İşlem geçmişi yok." + }, + "noTransactions": { + "message": "İşlem yok" + }, + "notStarted": { + "message": "Başlamadı" + }, + "oldUI": { + "message": "Eski UI" + }, + "oldUIMessage": { + "message": "Eski UI'a döndünüz. Yeni UI'a üst sağ sekme menüsündeki seçenek ile dönebilirsiniz." + }, + "or": { + "message": "veya", + "description": "Yeni bir hesap yaratmak veya almak arasındaki seçim" + }, + "passwordCorrect": { + "message": "Lütfen parolanın doğru olduğuna emin olun." + }, + "passwordMismatch": { + "message": "parolalar eşleşmiyor", + "description": "parola yaratma işleminde, iki yeni parola alanı eşleşmiyor." + }, + "passwordShort": { + "message": "parola yeterince uzun değil", + "description": "parola yaratma işleminde, parola güvenli olacak kadar uzun değil." + }, + "pastePrivateKey": { + "message": "Özel anahtar dizinizi buraya yapıştırın:", + "description": "Özel anahtardan hesap almak için" + }, + "pasteSeed": { + "message": "Kaynak ifadenizi buraya yapıştırın!" + }, + "personalAddressDetected": { + "message": "Kişisel adres tespit edilidi. Jeton sözleşme adresini girin." + }, + "pleaseReviewTransaction": { + "message": "Lütfen işleminizi gözden geçirin." + }, + "popularTokens": { + "message": "Popüler Jetonlar" + }, + "privacyMsg": { + "message": "Gizlilik Şartları" + }, + "privateKey": { + "message": "Özel Anahtar", + "description": "Hesap alırken bu tip bir dosya seçin" + }, + "privateKeyWarning": { + "message": "Uyarı: Bu anahtarı kimse ile paylaşmayın. Özel anahtarlarınıza sahip herkes hesaplarınızıdaki tüm varlığınızı çalabilir." + }, + "privateNetwork": { + "message": "Özel Ağ" + }, + "qrCode": { + "message": "QR Kodunu göster" + }, + "readdToken": { + "message": "Gelecekte Bu jetonu hesap seçenekleri menüsünde “Jeton ekle”'ye giderek geri ekleyebilirsiniz." + }, + "readMore": { + "message": "Burada daha fazla okuyun." + }, + "readMore2": { + "message": "Daha fazla okuyun." + }, + "receive": { + "message": "Al" + }, + "recipientAddress": { + "message": "Alıcı adresi" + }, + "refundAddress": { + "message": "İade adresiniz" + }, + "rejected": { + "message": "Rededildi" + }, + "resetAccount": { + "message": "Hesabı sıfıla" + }, + "restoreFromSeed": { + "message": "Kaynak ifadeden geri getir. Restore from seed phrase" + }, + "restoreVault": { + "message": "Kasayı geri getir" + }, + "required": { + "message": "Gerekli" + }, + "retryWithMoreGas": { + "message": "Daha yüksek bir gas fiyatı ile tekrar dene" + }, + "walletSeed": { + "message": "Cüzdan Kaynağı" + }, + "revealSeedWords": { + "message": "Kaynak kelimelerini göster" + }, + "revealSeedWordsWarning": { + "message": "Açık bir yerde kaynak kelimeliriniz geri getirmeyin! Bu kelimeler tüm hesaplarınızı çalmak için kullanılabilir." + }, + "revert": { + "message": "Geri döndür" + }, + "rinkeby": { + "message": "Rinkeby Test Ağı" + }, + "ropsten": { + "message": "Ropsten Test Ağı" + }, + "currentRpc": { + "message": "Geçerli RPC" + }, + "connectingToMainnet": { + "message": "Main Ethereum Ağına bağlanıyor" + }, + "connectingToRopsten": { + "message": "Ropsten Test Ağına bağlanıyor" + }, + "connectingToKovan": { + "message": "Kovan Test Ağına bağlanıyor" + }, + "connectingToRinkeby": { + "message": "Rinkeby Test Ağına bağlanıyor" + }, + "connectingToUnknown": { + "message": "Bilinmeyen Ağa bağlanıyor" + }, + "sampleAccountName": { + "message": "E.g. Yeni hesabım", + "description": "Kullanıcının hesabına okunabilir isim ekleme konseptini anlamasına yardımcı olmak." + }, + "save": { + "message": "Kaydet" + }, + "reprice_title": { + "message": "İşlemi Yeniden Fiyatlandır" + }, + "reprice_subtitle": { + "message": "İşlemizi hızlandırmayı denemek için gas fiyatınızı yükseltin." + }, + "saveAsFile": { + "message": "Dosya olarak kaydet", + "description": "Hesap verme işlemi" + }, + "saveSeedAsFile": { + "message": "Kaynak Kelimelerini Dosya olarak Kaydet" + }, + "search": { + "message": "Ara" + }, + "secretPhrase": { + "message": "Kasanızı geri getirmek için gizli 12 kelimelik ifadenizi giriniz." + }, + "newPassword8Chars": { + "message": "Yeni Parola (minumum 8 karakter)" + }, + "seedPhraseReq": { + "message": "Kaynak ifadeleri 12 kelimedir." + }, + "select": { + "message": "Seç" + }, + "selectCurrency": { + "message": "Döviz Seç" + }, + "selectService": { + "message": "Servis Seç" + }, + "selectType": { + "message": "Tip Seç" + }, + "send": { + "message": "Gönder" + }, + "sendETH": { + "message": "ETH Gönder" + }, + "sendTokens": { + "message": "Jeton Gönder" + }, + "onlySendToEtherAddress": { + "message": "Ethereum adresine sadece ETH gönder." + }, + "searchTokens": { + "message": "Jeton ara" + }, + "sendTokensAnywhere": { + "message": "Ethereum hesabı olan birine Jeton gönder" + }, + "settings": { + "message": "Ayarlar" + }, + "info": { + "message": "Bilgi" + }, + "shapeshiftBuy": { + "message": "Shapeshift ile satın al" + }, + "showPrivateKeys": { + "message": "Özel anahtarları göster" + }, + "showQRCode": { + "message": "QR Kodu göster" + }, + "sign": { + "message": "İmza" + }, + "signed": { + "message": "İmzalandı" + }, + "signMessage": { + "message": "Mesajı İmzala" + }, + "signNotice": { + "message": "Bu mesajı imzalamanın tehlikeli \nyan etkileri olabilir. Tamamen güvendiğiniz sitelerden \ngelen mesajları hesabınızla imzalayınız.\n Bu tehlikeli metod gelecek versiyonlarda çıkarılacaktır. " + }, + "sigRequest": { + "message": "İmza isteği" + }, + "sigRequested": { + "message": "İmza isteniyor" + }, + "spaceBetween": { + "message": "Kelimeler arası sadece bir boşluk olabilir." + }, + "status": { + "message": "Durum" + }, + "stateLogs": { + "message": "Durum Kayıtları" + }, + "stateLogsDescription": { + "message": "Durum kayıtları açık hesap adresinizi ve gönderilen işlemleri içerir." + }, + "stateLogError": { + "message": "Durum kayıtlarını alma hatası" + }, + "submit": { + "message": "Gönder" + }, + "submitted": { + "message": "Gönderildi" + }, + "supportCenter": { + "message": "Destek merkezimizi ziyaret edin" + }, + "symbolBetweenZeroTen": { + "message": "Sembol 0 ve 10 karakter aralığında olmalıdır." + }, + "takesTooLong": { + "message": "Çok mu uzun sürüyor?" + }, + "terms": { + "message": "Kullanım şartları" + }, + "testFaucet": { + "message": "Test Musluğu" + }, + "to": { + "message": "Kime: " + }, + "toETHviaShapeShift": { + "message": "ShapeShift üstünden $1'dan ETH'e", + "description": "system will fill in deposit type in start of message" + }, + "tokenAddress": { + "message": "Jeton Adresi" + }, + "tokenAlreadyAdded": { + "message": "Jeton çoktan eklenmiş." + }, + "tokenBalance": { + "message": "Jeton bakiyeniz:" + }, + "tokenSelection": { + "message": "Jeton arayın veya popüler jeton listemizden seçin." + }, + "tokenSymbol": { + "message": "Jeton Sembolü" + }, + "tokenWarning1": { + "message": "MetaMask hesabınızla aldığınız jetonların kaydını tutun. Başka bir hesapla jetonlar satın aldıysanız, o jetonlar burada gözükmeyecektir." + }, + "total": { + "message": "Toplam" + }, + "transactions": { + "message": "işlemler" + }, + "transactionError": { + "message": "İşlem Hatası. Sözleşme kodundan kural dışı durum fırlatıldı." + }, + "transactionMemo": { + "message": "İşlem notu (opsiyonel)" + }, + "transactionNumber": { + "message": "İşlem numarası" + }, + "transfers": { + "message": "Transferler" + }, + "troubleTokenBalances": { + "message": "Jeton bakiyelerinizi yüklerken sorun yaşadık. Buradan izleyebilirsiniz ", + "description": "Jeton bakiyelerini görmek için bir link (burası) ile takip ediliyor" + }, + "twelveWords": { + "message": "MetaMask hesaplarınızı geri getirmenin tek yolu bu 12 kelimedir.\nBu kelimeleri güvenli ve gizli bir yerde saklayın." + }, + "typePassword": { + "message": "Parolanızı girin" + }, + "uiWelcome": { + "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" + }, + "unapproved": { + "message": "Onaylanmadı" + }, + "unavailable": { + "message": "Mevcut değil" + }, + "unknown": { + "message": "Bilinmeyen" + }, + "unknownNetwork": { + "message": "Bilinmeyen özel ağ" + }, + "unknownNetworkId": { + "message": "Bilinmeyen ağ IDsi" + }, + "uriErrorMsg": { + "message": "URIler için HTTP/HTTPS öneki gerekmektedir." + }, + "usaOnly": { + "message": "Sadece ABD", + "description": "Bu dövizi sadece ABD ikamet edenler kullanabilir" + }, + "usedByClients": { + "message": "Farklı istemciler tarafından kullanılmakta" + }, + "useOldUI": { + "message": "Eski UI kullan" + }, + "validFileImport": { + "message": "Almak için geçerli bir dosya seçmelisiniz" + }, + "vaultCreated": { + "message": "Kasa Yaratıldı" + }, + "viewAccount": { + "message": "Hesabı İncele" + }, + "visitWebSite": { + "message": "Web sitemizi ziyaret edin" + }, + "warning": { + "message": "Uyarı" + }, + "welcomeBeta": { + "message": "MetaMask Beta'ya Hoşgeldiniz" + }, + "whatsThis": { + "message": "Bu nedir?" + }, + "yourSigRequested": { + "message": "İmzanız isteniyor" + }, + "youSign": { + "message": "İmzalıyorsunuz" + } +}
\ No newline at end of file diff --git a/app/manifest.json b/app/manifest.json index 61d2c5b5e..dc46f1ca4 100644 --- a/app/manifest.json +++ b/app/manifest.json @@ -1,7 +1,7 @@ { "name": "__MSG_appName__", "short_name": "__MSG_appName__", - "version": "4.5.3", + "version": "4.5.5", "manifest_version": 2, "author": "https://metamask.io", "description": "__MSG_appDescription__", diff --git a/app/scripts/background.js b/app/scripts/background.js index ec586f642..38b871bb5 100644 --- a/app/scripts/background.js +++ b/app/scripts/background.js @@ -1,3 +1,7 @@ +/** + * @file The entry point for the web extension singleton process. + */ + const urlUtil = require('url') const endOfStream = require('end-of-stream') const pump = require('pump') @@ -21,12 +25,16 @@ const setupMetamaskMeshMetrics = require('./lib/setupMetamaskMeshMetrics') const EdgeEncryptor = require('./edge-encryptor') const getFirstPreferredLangCode = require('./lib/get-first-preferred-lang-code') const getObjStructure = require('./lib/getObjStructure') +const { + ENVIRONMENT_TYPE_POPUP, + ENVIRONMENT_TYPE_NOTIFICATION, + ENVIRONMENT_TYPE_FULLSCREEN, +} = require('./lib/enums') const STORAGE_KEY = 'metamask-config' const METAMASK_DEBUG = process.env.METAMASK_DEBUG -window.log = log -log.setDefaultLevel(METAMASK_DEBUG ? 'debug' : 'warn') +log.setDefaultLevel(process.env.METAMASK_DEBUG ? 'debug' : 'warn') const platform = new ExtensionPlatform() const notificationManager = new NotificationManager() @@ -44,7 +52,7 @@ const isEdge = !isIE && !!window.StyleMedia let popupIsOpen = false let notificationIsOpen = false -let openMetamaskTabsIDs = {} +const openMetamaskTabsIDs = {} // state persistence const diskStore = new LocalStorageStore({ storageKey: STORAGE_KEY }) @@ -57,6 +65,90 @@ initialize().catch(log.error) // setup metamask mesh testing container setupMetamaskMeshMetrics() +/** + * An object representing a transaction, in whatever state it is in. + * @typedef TransactionMeta + * + * @property {number} id - An internally unique tx identifier. + * @property {number} time - Time the tx was first suggested, in unix epoch time (ms). + * @property {string} status - The current transaction status (unapproved, signed, submitted, dropped, failed, rejected), as defined in `tx-state-manager.js`. + * @property {string} metamaskNetworkId - The transaction's network ID, used for EIP-155 compliance. + * @property {boolean} loadingDefaults - TODO: Document + * @property {Object} txParams - The tx params as passed to the network provider. + * @property {Object[]} history - A history of mutations to this TransactionMeta object. + * @property {boolean} gasPriceSpecified - True if the suggesting dapp specified a gas price, prevents auto-estimation. + * @property {boolean} gasLimitSpecified - True if the suggesting dapp specified a gas limit, prevents auto-estimation. + * @property {string} estimatedGas - A hex string represented the estimated gas limit required to complete the transaction. + * @property {string} origin - A string representing the interface that suggested the transaction. + * @property {Object} nonceDetails - A metadata object containing information used to derive the suggested nonce, useful for debugging nonce issues. + * @property {string} rawTx - A hex string of the final signed transaction, ready to submit to the network. + * @property {string} hash - A hex string of the transaction hash, used to identify the transaction on the network. + * @property {number} submittedTime - The time the transaction was submitted to the network, in Unix epoch time (ms). + */ + +/** + * The data emitted from the MetaMaskController.store EventEmitter, also used to initialize the MetaMaskController. Available in UI on React state as state.metamask. + * @typedef MetaMaskState + * @property {boolean} isInitialized - Whether the first vault has been created. + * @property {boolean} isUnlocked - Whether the vault is currently decrypted and accounts are available for selection. + * @property {boolean} isAccountMenuOpen - Represents whether the main account selection UI is currently displayed. + * @property {boolean} isMascara - True if the current context is the extensionless MetaMascara project. + * @property {boolean} isPopup - Returns true if the current view is an externally-triggered notification. + * @property {string} rpcTarget - DEPRECATED - The URL of the current RPC provider. + * @property {Object} identities - An object matching lower-case hex addresses to Identity objects with "address" and "name" (nickname) keys. + * @property {Object} unapprovedTxs - An object mapping transaction hashes to unapproved transactions. + * @property {boolean} noActiveNotices - False if there are notices the user should confirm before using the application. + * @property {Array} frequentRpcList - A list of frequently used RPCs, including custom user-provided ones. + * @property {Array} addressBook - A list of previously sent to addresses. + * @property {address} selectedTokenAddress - Used to indicate if a token is globally selected. Should be deprecated in favor of UI-centric token selection. + * @property {Object} tokenExchangeRates - Info about current token prices. + * @property {Array} tokens - Tokens held by the current user, including their balances. + * @property {Object} send - TODO: Document + * @property {Object} coinOptions - TODO: Document + * @property {boolean} useBlockie - Indicates preferred user identicon format. True for blockie, false for Jazzicon. + * @property {Object} featureFlags - An object for optional feature flags. + * @property {string} networkEndpointType - TODO: Document + * @property {boolean} isRevealingSeedWords - True if seed words are currently being recovered, and should be shown to user. + * @property {boolean} welcomeScreen - True if welcome screen should be shown. + * @property {string} currentLocale - A locale string matching the user's preferred display language. + * @property {Object} provider - The current selected network provider. + * @property {string} provider.rpcTarget - The address for the RPC API, if using an RPC API. + * @property {string} provider.type - An identifier for the type of network selected, allows MetaMask to use custom provider strategies for known networks. + * @property {string} network - A stringified number of the current network ID. + * @property {Object} accounts - An object mapping lower-case hex addresses to objects with "balance" and "address" keys, both storing hex string values. + * @property {hex} currentBlockGasLimit - The most recently seen block gas limit, in a lower case hex prefixed string. + * @property {TransactionMeta[]} selectedAddressTxList - An array of transactions associated with the currently selected account. + * @property {Object} unapprovedMsgs - An object of messages associated with the currently selected account, mapping a unique ID to the options. + * @property {number} unapprovedMsgCount - The number of messages in unapprovedMsgs. + * @property {Object} unapprovedPersonalMsgs - An object of messages associated with the currently selected account, mapping a unique ID to the options. + * @property {number} unapprovedPersonalMsgCount - The number of messages in unapprovedPersonalMsgs. + * @property {Object} unapprovedTypedMsgs - An object of messages associated with the currently selected account, mapping a unique ID to the options. + * @property {number} unapprovedTypedMsgCount - The number of messages in unapprovedTypedMsgs. + * @property {string[]} keyringTypes - An array of unique keyring identifying strings, representing available strategies for creating accounts. + * @property {Keyring[]} keyrings - An array of keyring descriptions, summarizing the accounts that are available for use, and what keyrings they belong to. + * @property {Object} computedBalances - Maps accounts to their balances, accounting for balance changes from pending transactions. + * @property {string} currentAccountTab - A view identifying string for displaying the current displayed view, allows user to have a preferred tab in the old UI (between tokens and history). + * @property {string} selectedAddress - A lower case hex string of the currently selected address. + * @property {string} currentCurrency - A string identifying the user's preferred display currency, for use in showing conversion rates. + * @property {number} conversionRate - A number representing the current exchange rate from the user's preferred currency to Ether. + * @property {number} conversionDate - A unix epoch date (ms) for the time the current conversion rate was last retrieved. + * @property {Object} infuraNetworkStatus - An object of infura network status checks. + * @property {Block[]} recentBlocks - An array of recent blocks, used to calculate an effective but cheap gas price. + * @property {Array} shapeShiftTxList - An array of objects describing shapeshift exchange attempts. + * @property {Array} lostAccounts - TODO: Remove this feature. A leftover from the version-3 migration where our seed-phrase library changed to fix a bug where some accounts were mis-generated, but we recovered the old accounts as "lost" instead of losing them. + * @property {boolean} forgottenPassword - Returns true if the user has initiated the password recovery screen, is recovering from seed phrase. + */ + +/** + * @typedef VersionedData + * @property {MetaMaskState} data - The data emitted from MetaMask controller, or used to initialize it. + * @property {Number} version - The latest migration version that has been run. + */ + +/** + * Initializes the MetaMask controller, and sets up all platform configuration. + * @returns {Promise} Setup complete. + */ async function initialize () { const initState = await loadStateFromPersistence() const initLangCode = await getFirstPreferredLangCode() @@ -68,6 +160,11 @@ async function initialize () { // State and Persistence // +/** + * Loads any stored data, prioritizing the latest storage strategy. + * Migrates that data schema in case it was last loaded on an older version. + * @returns {Promise<MetaMaskState>} Last data emitted from previous instance of MetaMask. + */ async function loadStateFromPersistence () { // migrations const migrator = new Migrator({ migrations }) @@ -78,6 +175,28 @@ async function loadStateFromPersistence () { diskStore.getState() || migrator.generateInitialState(firstTimeState) + // check if somehow state is empty + // this should never happen but new error reporting suggests that it has + // for a small number of users + // https://github.com/metamask/metamask-extension/issues/3919 + if (versionedData && !versionedData.data) { + // try to recover from diskStore incase only localStore is bad + const diskStoreState = diskStore.getState() + if (diskStoreState && diskStoreState.data) { + // we were able to recover (though it might be old) + versionedData = diskStoreState + const vaultStructure = getObjStructure(versionedData) + raven.captureMessage('MetaMask - Empty vault found - recovered from diskStore', { + // "extra" key is required by Sentry + extra: { vaultStructure }, + }) + } else { + // unable to recover, clear state + versionedData = migrator.generateInitialState(firstTimeState) + raven.captureMessage('MetaMask - Empty vault found - unable to recover') + } + } + // report migration errors to sentry migrator.on('error', (err) => { // get vault structure without secrets @@ -108,6 +227,16 @@ async function loadStateFromPersistence () { return versionedData.data } +/** + * Initializes the MetaMask Controller with any initial state and default language. + * Configures platform-specific error reporting strategy. + * Streams emitted state updates to platform-specific storage strategy. + * Creates platform listeners for new Dapps/Contexts, and sets up their data connections to the controller. + * + * @param {Object} initState - The initial state to start the controller with, matches the state that is emitted from the controller. + * @param {String} initLangCode - The region code for the language preferred by the current user. + * @returns {Promise} After setup is complete. + */ function setupController (initState, initLangCode) { // // MetaMask Controller @@ -140,18 +269,29 @@ function setupController (initState, initLangCode) { asStream(controller.store), debounce(1000), storeTransform(versionifyData), - storeTransform(syncDataWithExtension), + storeTransform(persistData), (error) => { - log.error('pump hit error', error) + log.error('MetaMask - Persistence pipeline failed', error) } ) + /** + * Assigns the given state to the versioned object (with metadata), and returns that. + * @param {Object} state - The state object as emitted by the MetaMaskController. + * @returns {VersionedData} The state object wrapped in an object that includes a metadata key. + */ function versionifyData (state) { versionedData.data = state return versionedData } - function syncDataWithExtension(state) { + function persistData (state) { + if (!state) { + throw new Error('MetaMask - updated state is missing', state) + } + if (!state.data) { + throw new Error('MetaMask - updated state does not have data', state) + } if (localStore.isSupported) { localStore.set(state) .catch((err) => { @@ -164,30 +304,65 @@ function setupController (initState, initLangCode) { // // connect to other contexts // - extension.runtime.onConnect.addListener(connectRemote) + + const metamaskInternalProcessHash = { + [ENVIRONMENT_TYPE_POPUP]: true, + [ENVIRONMENT_TYPE_NOTIFICATION]: true, + [ENVIRONMENT_TYPE_FULLSCREEN]: true, + } + + const isClientOpenStatus = () => { + return popupIsOpen || Boolean(Object.keys(openMetamaskTabsIDs).length) || notificationIsOpen + } + + /** + * A runtime.Port object, as provided by the browser: + * @link https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/Port + * @typedef Port + * @type Object + */ + + /** + * Connects a Port to the MetaMask controller via a multiplexed duplex stream. + * This method identifies trusted (MetaMask) interfaces, and connects them differently from untrusted (web pages). + * @param {Port} remotePort - The port provided by a new context. + */ function connectRemote (remotePort) { - const isMetaMaskInternalProcess = remotePort.name === 'popup' || remotePort.name === 'notification' + const processName = remotePort.name + const isMetaMaskInternalProcess = metamaskInternalProcessHash[processName] const portStream = new PortStream(remotePort) + if (isMetaMaskInternalProcess) { // communication with popup - popupIsOpen = popupIsOpen || (remotePort.name === 'popup') + controller.isClientOpen = true controller.setupTrustedCommunication(portStream, 'MetaMask') - // record popup as closed - if (remotePort.sender.url.match(/home.html$/)) { - openMetamaskTabsIDs[remotePort.sender.tab.id] = true - } - if (remotePort.name === 'popup') { + + if (processName === ENVIRONMENT_TYPE_POPUP) { + popupIsOpen = true + endOfStream(portStream, () => { popupIsOpen = false - if (remotePort.sender.url.match(/home.html$/)) { - openMetamaskTabsIDs[remotePort.sender.tab.id] = false - } + controller.isClientOpen = isClientOpenStatus() }) } - if (remotePort.name === 'notification') { + + if (processName === ENVIRONMENT_TYPE_NOTIFICATION) { + notificationIsOpen = true + endOfStream(portStream, () => { notificationIsOpen = false + controller.isClientOpen = isClientOpenStatus() + }) + } + + if (processName === ENVIRONMENT_TYPE_FULLSCREEN) { + const tabId = remotePort.sender.tab.id + openMetamaskTabsIDs[tabId] = true + + endOfStream(portStream, () => { + delete openMetamaskTabsIDs[tabId] + controller.isClientOpen = isClientOpenStatus() }) } } else { @@ -206,7 +381,10 @@ function setupController (initState, initLangCode) { controller.messageManager.on('updateBadge', updateBadge) controller.personalMessageManager.on('updateBadge', updateBadge) - // plugin badge text + /** + * Updates the Web Extension's "badge" number, on the little fox in the toolbar. + * The number reflects the current number of pending transactions or message signatures needing user approval. + */ function updateBadge () { var label = '' var unapprovedTxCount = controller.txController.getUnapprovedTxCount() @@ -228,12 +406,15 @@ function setupController (initState, initLangCode) { // Etc... // -// popup trigger +/** + * Opens the browser popup for user confirmation + */ function triggerUi () { - extension.tabs.query({ active: true }, (tabs) => { - const currentlyActiveMetamaskTab = tabs.find(tab => openMetamaskTabsIDs[tab.id]) - if (!popupIsOpen && !currentlyActiveMetamaskTab && !notificationIsOpen) notificationManager.showPopup() - notificationIsOpen = true + extension.tabs.query({ active: true }, tabs => { + const currentlyActiveMetamaskTab = Boolean(tabs.find(tab => openMetamaskTabsIDs[tab.id])) + if (!popupIsOpen && !currentlyActiveMetamaskTab && !notificationIsOpen) { + notificationManager.showPopup() + } }) } diff --git a/app/scripts/config.js b/app/scripts/config.js deleted file mode 100644 index a8470ed82..000000000 --- a/app/scripts/config.js +++ /dev/null @@ -1,44 +0,0 @@ -const MAINET_RPC_URL = 'https://mainnet.infura.io/metamask' -const ROPSTEN_RPC_URL = 'https://ropsten.infura.io/metamask' -const KOVAN_RPC_URL = 'https://kovan.infura.io/metamask' -const RINKEBY_RPC_URL = 'https://rinkeby.infura.io/metamask' -const LOCALHOST_RPC_URL = 'http://localhost:8545' - -const MAINET_RPC_URL_BETA = 'https://mainnet.infura.io/metamask2' -const ROPSTEN_RPC_URL_BETA = 'https://ropsten.infura.io/metamask2' -const KOVAN_RPC_URL_BETA = 'https://kovan.infura.io/metamask2' -const RINKEBY_RPC_URL_BETA = 'https://rinkeby.infura.io/metamask2' - -const DEFAULT_RPC = 'rinkeby' -const OLD_UI_NETWORK_TYPE = 'network' -const BETA_UI_NETWORK_TYPE = 'networkBeta' - -global.METAMASK_DEBUG = process.env.METAMASK_DEBUG - -module.exports = { - network: { - localhost: LOCALHOST_RPC_URL, - mainnet: MAINET_RPC_URL, - ropsten: ROPSTEN_RPC_URL, - kovan: KOVAN_RPC_URL, - rinkeby: RINKEBY_RPC_URL, - }, - // Used for beta UI - networkBeta: { - localhost: LOCALHOST_RPC_URL, - mainnet: MAINET_RPC_URL_BETA, - ropsten: ROPSTEN_RPC_URL_BETA, - kovan: KOVAN_RPC_URL_BETA, - rinkeby: RINKEBY_RPC_URL_BETA, - }, - networkNames: { - 3: 'Ropsten', - 4: 'Rinkeby', - 42: 'Kovan', - }, - enums: { - DEFAULT_RPC, - OLD_UI_NETWORK_TYPE, - BETA_UI_NETWORK_TYPE, - }, -} diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js index fe1766273..dbf1c6d4c 100644 --- a/app/scripts/contentscript.js +++ b/app/scripts/contentscript.js @@ -23,6 +23,9 @@ if (shouldInjectWeb3()) { setupStreams() } +/** + * Creates a script tag that injects inpage.js + */ function setupInjection () { try { // inject in-page script @@ -37,6 +40,10 @@ function setupInjection () { } } +/** + * Sets up two-way communication streams between the + * browser extension and local per-page browser context + */ function setupStreams () { // setup communication to page and plugin const pageStream = new LocalMessageDuplexStream({ @@ -89,17 +96,34 @@ function setupStreams () { mux.ignoreStream('publicConfig') } + +/** + * Error handler for page to plugin stream disconnections + * + * @param {string} remoteLabel Remote stream name + * @param {Error} err Stream connection error + */ function logStreamDisconnectWarning (remoteLabel, err) { let warningMsg = `MetamaskContentscript - lost connection to ${remoteLabel}` if (err) warningMsg += '\n' + err.stack console.warn(warningMsg) } +/** + * Determines if Web3 should be injected + * + * @returns {boolean} {@code true} if Web3 should be injected + */ function shouldInjectWeb3 () { return doctypeCheck() && suffixCheck() && documentElementCheck() && !blacklistedDomainCheck() } +/** + * Checks the doctype of the current document if it exists + * + * @returns {boolean} {@code true} if the doctype is html or if none exists + */ function doctypeCheck () { const doctype = window.document.doctype if (doctype) { @@ -109,6 +133,11 @@ function doctypeCheck () { } } +/** + * Checks the current document extension + * + * @returns {boolean} {@code true} if the current extension is not prohibited + */ function suffixCheck () { var prohibitedTypes = ['xml', 'pdf'] var currentUrl = window.location.href @@ -122,6 +151,11 @@ function suffixCheck () { return true } +/** + * Checks the documentElement of the current document + * + * @returns {boolean} {@code true} if the documentElement is an html node or if none exists + */ function documentElementCheck () { var documentElement = document.documentElement.nodeName if (documentElement) { @@ -130,6 +164,11 @@ function documentElementCheck () { return true } +/** + * Checks if the current domain is blacklisted + * + * @returns {boolean} {@code true} if the current domain is blacklisted + */ function blacklistedDomainCheck () { var blacklistedDomains = [ 'uscourts.gov', @@ -148,6 +187,9 @@ function blacklistedDomainCheck () { return false } +/** + * Redirects the current page to a phishing information page + */ function redirectToPhishingWarning () { console.log('MetaMask - redirecting to phishing warning') window.location.href = 'https://metamask.io/phishing.html' diff --git a/app/scripts/controllers/address-book.js b/app/scripts/controllers/address-book.js index 6fb4ee114..c91e6b2e4 100644 --- a/app/scripts/controllers/address-book.js +++ b/app/scripts/controllers/address-book.js @@ -4,9 +4,22 @@ const extend = require('xtend') class AddressBookController { - // Controller in charge of managing the address book functionality from the - // recipients field on the send screen. Manages a history of all saved - // addresses and all currently owned addresses. + /** + * Controller in charge of managing the address book functionality from the + * recipients field on the send screen. Manages a history of all saved + * addresses and all currently owned addresses. + * + * @typedef {Object} AddressBookController + * @param {object} opts Overrides the defaults for the initial state of this.store + * @property {array} opts.initState initializes the the state of the AddressBookController. Can contain an + * addressBook property to initialize the addressBook array + * @param {KeyringController} keyringController (Soon to be deprecated) The keyringController used in the current + * MetamaskController. Contains the identities used in this AddressBookController. + * @property {object} store The the store of the current users address book + * @property {array} store.addressBook An array of addresses and nicknames. These are set by the user when sending + * to a new address. + * + */ constructor (opts = {}, keyringController) { const initState = extend({ addressBook: [], @@ -19,7 +32,14 @@ class AddressBookController { // PUBLIC METHODS // - // Sets a new address book in store by accepting a new address and nickname. + /** + * Sets a new address book in store by accepting a new address and nickname. + * + * @param {string} address A hex address of a new account that the user is sending to. + * @param {string} name The name the user wishes to associate with the new account + * @returns {Promise<void>} Promise resolves with undefined + * + */ setAddressBook (address, name) { return this._addToAddressBook(address, name) .then((addressBook) => { @@ -30,14 +50,16 @@ class AddressBookController { }) } - // - // PRIVATE METHODS - // - - - // Performs the logic to add the address and name into the address book. The - // pushed object is an object of two fields. Current behavior does not set an - // upper limit to the number of addresses. + /** + * Performs the logic to add the address and name into the address book. The pushed object is an object of two + * fields. Current behavior does not set an upper limit to the number of addresses. + * + * @private + * @param {string} address A hex address of a new account that the user is sending to. + * @param {string} name The name the user wishes to associate with the new account + * @returns {Promise<array>} Promises the updated addressBook array + * + */ _addToAddressBook (address, name) { const addressBook = this._getAddressBook() const identities = this._getIdentities() @@ -62,14 +84,26 @@ class AddressBookController { return Promise.resolve(addressBook) } - // Internal method to get the address book. Current persistence behavior - // should not require that this method be called from the UI directly. + /** + * Internal method to get the address book. Current persistence behavior should not require that this method be + * called from the UI directly. + * + * @private + * @returns {array} The addressBook array from the store. + * + */ _getAddressBook () { return this.store.getState().addressBook } - // Retrieves identities from the keyring controller in order to avoid - // duplication + /** + * Retrieves identities from the keyring controller in order to avoid + * duplication + * + * @deprecated + * @returns {array} Returns the identies array from the keyringContoller's state + * + */ _getIdentities () { return this.keyringController.memStore.getState().identities } diff --git a/app/scripts/controllers/blacklist.js b/app/scripts/controllers/blacklist.js index df41c90c0..d965f80b8 100644 --- a/app/scripts/controllers/blacklist.js +++ b/app/scripts/controllers/blacklist.js @@ -1,6 +1,7 @@ const ObservableStore = require('obs-store') const extend = require('xtend') const PhishingDetector = require('eth-phishing-detect/src/detector') +const log = require('loglevel') // compute phishing lists const PHISHING_DETECTION_CONFIG = require('eth-phishing-detect/src/config.json') diff --git a/app/scripts/controllers/computed-balances.js b/app/scripts/controllers/computed-balances.js index 907b087cf..1a6802f9a 100644 --- a/app/scripts/controllers/computed-balances.js +++ b/app/scripts/controllers/computed-balances.js @@ -2,8 +2,24 @@ const ObservableStore = require('obs-store') const extend = require('xtend') const BalanceController = require('./balance') -class ComputedbalancesController { +/** + * @typedef {Object} ComputedBalancesOptions + * @property {Object} accountTracker Account tracker store reference + * @property {Object} txController Token controller reference + * @property {Object} blockTracker Block tracker reference + * @property {Object} initState Initial state to populate this internal store with + */ +/** + * Background controller responsible for syncing + * and computing ETH balances for all accounts + */ +class ComputedbalancesController { + /** + * Creates a new controller instance + * + * @param {ComputedBalancesOptions} [opts] Controller configuration parameters + */ constructor (opts = {}) { const { accountTracker, txController, blockTracker } = opts this.accountTracker = accountTracker @@ -19,6 +35,9 @@ class ComputedbalancesController { this._initBalanceUpdating() } + /** + * Updates balances associated with each internal address + */ updateAllBalances () { Object.keys(this.balances).forEach((balance) => { const address = balance.address @@ -26,12 +45,23 @@ class ComputedbalancesController { }) } + /** + * Initializes internal address tracking + * + * @private + */ _initBalanceUpdating () { const store = this.accountTracker.store.getState() this.syncAllAccountsFromStore(store) this.accountTracker.store.subscribe(this.syncAllAccountsFromStore.bind(this)) } + /** + * Uses current account state to sync and track all + * addresses associated with the current account + * + * @param {{ accounts: Object }} store Account tracking state + */ syncAllAccountsFromStore (store) { const upstream = Object.keys(store.accounts) const balances = Object.keys(this.balances) @@ -50,6 +80,13 @@ class ComputedbalancesController { }) } + /** + * Conditionally establishes a new subscription + * to track an address associated with the current + * account + * + * @param {string} address Address to conditionally subscribe to + */ trackAddressIfNotAlready (address) { const state = this.store.getState() if (!(address in state.computedBalances)) { @@ -57,6 +94,12 @@ class ComputedbalancesController { } } + /** + * Establishes a new subscription to track an + * address associated with the current account + * + * @param {string} address Address to conditionally subscribe to + */ trackAddress (address) { const updater = new BalanceController({ address, diff --git a/app/scripts/controllers/currency.js b/app/scripts/controllers/currency.js index 36b8808aa..480c08b1c 100644 --- a/app/scripts/controllers/currency.js +++ b/app/scripts/controllers/currency.js @@ -1,11 +1,28 @@ -const ObservableStore = require('obs-store') + const ObservableStore = require('obs-store') const extend = require('xtend') +const log = require('loglevel') // every ten minutes const POLLING_INTERVAL = 600000 class CurrencyController { + /** + * Controller responsible for managing data associated with the currently selected currency. + * + * @typedef {Object} CurrencyController + * @param {object} opts Overrides the defaults for the initial state of this.store + * @property {array} opts.initState initializes the the state of the CurrencyController. Can contain an + * currentCurrency, conversionRate and conversionDate properties + * @property {string} currentCurrency A 2-4 character shorthand that describes a specific currency, currently + * selected by the user + * @property {number} conversionRate The conversion rate from ETH to the selected currency. + * @property {string} conversionDate The date at which the conversion rate was set. Expressed in in milliseconds + * since midnight of January 1, 1970 + * @property {number} conversionInterval The id of the interval created by the scheduleConversionInterval method. + * Used to clear an existing interval on subsequent calls of that method. + * + */ constructor (opts = {}) { const initState = extend({ currentCurrency: 'usd', @@ -19,30 +36,73 @@ class CurrencyController { // PUBLIC METHODS // + /** + * A getter for the currentCurrency property + * + * @returns {string} A 2-4 character shorthand that describes a specific currency, currently selected by the user + * + */ getCurrentCurrency () { return this.store.getState().currentCurrency } + /** + * A setter for the currentCurrency property + * + * @param {string} currentCurrency The new currency to set as the currentCurrency in the store + * + */ setCurrentCurrency (currentCurrency) { this.store.updateState({ currentCurrency }) } + /** + * A getter for the conversionRate property + * + * @returns {string} The conversion rate from ETH to the selected currency. + * + */ getConversionRate () { return this.store.getState().conversionRate } + /** + * A setter for the conversionRate property + * + * @param {number} conversionRate The new rate to set as the conversionRate in the store + * + */ setConversionRate (conversionRate) { this.store.updateState({ conversionRate }) } + /** + * A getter for the conversionDate property + * + * @returns {string} The date at which the conversion rate was set. Expressed in milliseconds since midnight of + * January 1, 1970 + * + */ getConversionDate () { return this.store.getState().conversionDate } + /** + * A setter for the conversionDate property + * + * @param {number} conversionDate The date, expressed in milliseconds since midnight of January 1, 1970, that the + * conversionRate was set + * + */ setConversionDate (conversionDate) { this.store.updateState({ conversionDate }) } + /** + * Updates the conversionRate and conversionDate properties associated with the currentCurrency. Updated info is + * fetched from an external API + * + */ async updateConversionRate () { let currentCurrency try { @@ -58,6 +118,12 @@ class CurrencyController { } } + /** + * Creates a new poll, using setInterval, to periodically call updateConversionRate. The id of the interval is + * stored at the controller's conversionInterval property. If it is called and such an id already exists, the + * previous interval is clear and a new one is created. + * + */ scheduleConversionInterval () { if (this.conversionInterval) { clearInterval(this.conversionInterval) diff --git a/app/scripts/controllers/infura.js b/app/scripts/controllers/infura.js index c6b4c9de2..8f6dd837e 100644 --- a/app/scripts/controllers/infura.js +++ b/app/scripts/controllers/infura.js @@ -1,5 +1,6 @@ const ObservableStore = require('obs-store') const extend = require('xtend') +const log = require('loglevel') // every ten minutes const POLLING_INTERVAL = 10 * 60 * 1000 diff --git a/app/scripts/controllers/network/enums.js b/app/scripts/controllers/network/enums.js new file mode 100644 index 000000000..4f29e301b --- /dev/null +++ b/app/scripts/controllers/network/enums.js @@ -0,0 +1,56 @@ +const ROPSTEN = 'ropsten' +const RINKEBY = 'rinkeby' +const KOVAN = 'kovan' +const MAINNET = 'mainnet' +const LOCALHOST = 'localhost' + +const ROPSTEN_CODE = 3 +const RINKEYBY_CODE = 4 +const KOVAN_CODE = 42 + +const ROPSTEN_DISPLAY_NAME = 'Ropsten' +const RINKEBY_DISPLAY_NAME = 'Rinkeby' +const KOVAN_DISPLAY_NAME = 'Kovan' +const MAINNET_DISPLAY_NAME = 'Main Ethereum Network' + +const MAINNET_RPC_URL = 'https://mainnet.infura.io/metamask' +const ROPSTEN_RPC_URL = 'https://ropsten.infura.io/metamask' +const KOVAN_RPC_URL = 'https://kovan.infura.io/metamask' +const RINKEBY_RPC_URL = 'https://rinkeby.infura.io/metamask' +const LOCALHOST_RPC_URL = 'http://localhost:8545' + +const MAINNET_RPC_URL_BETA = 'https://mainnet.infura.io/metamask2' +const ROPSTEN_RPC_URL_BETA = 'https://ropsten.infura.io/metamask2' +const KOVAN_RPC_URL_BETA = 'https://kovan.infura.io/metamask2' +const RINKEBY_RPC_URL_BETA = 'https://rinkeby.infura.io/metamask2' + +const DEFAULT_NETWORK = 'rinkeby' +const OLD_UI_NETWORK_TYPE = 'network' +const BETA_UI_NETWORK_TYPE = 'networkBeta' + +module.exports = { + ROPSTEN, + RINKEBY, + KOVAN, + MAINNET, + LOCALHOST, + ROPSTEN_CODE, + RINKEYBY_CODE, + KOVAN_CODE, + ROPSTEN_DISPLAY_NAME, + RINKEBY_DISPLAY_NAME, + KOVAN_DISPLAY_NAME, + MAINNET_DISPLAY_NAME, + MAINNET_RPC_URL, + ROPSTEN_RPC_URL, + KOVAN_RPC_URL, + RINKEBY_RPC_URL, + LOCALHOST_RPC_URL, + MAINNET_RPC_URL_BETA, + ROPSTEN_RPC_URL_BETA, + KOVAN_RPC_URL_BETA, + RINKEBY_RPC_URL_BETA, + DEFAULT_NETWORK, + OLD_UI_NETWORK_TYPE, + BETA_UI_NETWORK_TYPE, +} diff --git a/app/scripts/controllers/network/index.js b/app/scripts/controllers/network/index.js new file mode 100644 index 000000000..fb095bf33 --- /dev/null +++ b/app/scripts/controllers/network/index.js @@ -0,0 +1,2 @@ +const NetworkController = require('./network') +module.exports = NetworkController diff --git a/app/scripts/controllers/network.js b/app/scripts/controllers/network/network.js index 617456cd7..6fd983bb2 100644 --- a/app/scripts/controllers/network.js +++ b/app/scripts/controllers/network/network.js @@ -7,10 +7,18 @@ const ObservableStore = require('obs-store') const ComposedStore = require('obs-store/lib/composed') const extend = require('xtend') const EthQuery = require('eth-query') -const createEventEmitterProxy = require('../lib/events-proxy.js') -const networkConfig = require('../config.js') -const { OLD_UI_NETWORK_TYPE, DEFAULT_RPC } = networkConfig.enums -const INFURA_PROVIDER_TYPES = ['ropsten', 'rinkeby', 'kovan', 'mainnet'] +const createEventEmitterProxy = require('../../lib/events-proxy.js') +const log = require('loglevel') +const { + ROPSTEN, + RINKEBY, + KOVAN, + MAINNET, + OLD_UI_NETWORK_TYPE, + DEFAULT_NETWORK, +} = require('./enums') +const { getNetworkEndpoints } = require('./util') +const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET] module.exports = class NetworkController extends EventEmitter { @@ -18,8 +26,8 @@ module.exports = class NetworkController extends EventEmitter { super() this._networkEndpointVersion = OLD_UI_NETWORK_TYPE - this._networkEndpoints = this.getNetworkEndpoints(OLD_UI_NETWORK_TYPE) - this._defaultRpc = this._networkEndpoints[DEFAULT_RPC] + this._networkEndpoints = getNetworkEndpoints(OLD_UI_NETWORK_TYPE) + this._defaultRpc = this._networkEndpoints[DEFAULT_NETWORK] config.provider.rpcTarget = this.getRpcAddressForType(config.provider.type, config.provider) this.networkStore = new ObservableStore('loading') @@ -36,17 +44,13 @@ module.exports = class NetworkController extends EventEmitter { } this._networkEndpointVersion = version - this._networkEndpoints = this.getNetworkEndpoints(version) - this._defaultRpc = this._networkEndpoints[DEFAULT_RPC] + this._networkEndpoints = getNetworkEndpoints(version) + this._defaultRpc = this._networkEndpoints[DEFAULT_NETWORK] const { type } = this.getProviderConfig() return this.setProviderType(type, true) } - getNetworkEndpoints (version = OLD_UI_NETWORK_TYPE) { - return networkConfig[version] - } - initializeProvider (_providerParams) { this._baseProviderParams = _providerParams const { type, rpcTarget } = this.providerStore.getState() diff --git a/app/scripts/controllers/network/util.js b/app/scripts/controllers/network/util.js new file mode 100644 index 000000000..4f38ccda4 --- /dev/null +++ b/app/scripts/controllers/network/util.js @@ -0,0 +1,65 @@ +const { + ROPSTEN, + RINKEBY, + KOVAN, + MAINNET, + LOCALHOST, + ROPSTEN_CODE, + RINKEYBY_CODE, + KOVAN_CODE, + ROPSTEN_DISPLAY_NAME, + RINKEBY_DISPLAY_NAME, + KOVAN_DISPLAY_NAME, + MAINNET_DISPLAY_NAME, + MAINNET_RPC_URL, + ROPSTEN_RPC_URL, + KOVAN_RPC_URL, + RINKEBY_RPC_URL, + LOCALHOST_RPC_URL, + MAINNET_RPC_URL_BETA, + ROPSTEN_RPC_URL_BETA, + KOVAN_RPC_URL_BETA, + RINKEBY_RPC_URL_BETA, + OLD_UI_NETWORK_TYPE, + BETA_UI_NETWORK_TYPE, +} = require('./enums') + +const networkToNameMap = { + [ROPSTEN]: ROPSTEN_DISPLAY_NAME, + [RINKEBY]: RINKEBY_DISPLAY_NAME, + [KOVAN]: KOVAN_DISPLAY_NAME, + [MAINNET]: MAINNET_DISPLAY_NAME, + [ROPSTEN_CODE]: ROPSTEN_DISPLAY_NAME, + [RINKEYBY_CODE]: RINKEBY_DISPLAY_NAME, + [KOVAN_CODE]: KOVAN_DISPLAY_NAME, +} + +const networkEndpointsMap = { + [OLD_UI_NETWORK_TYPE]: { + [LOCALHOST]: LOCALHOST_RPC_URL, + [MAINNET]: MAINNET_RPC_URL, + [ROPSTEN]: ROPSTEN_RPC_URL, + [KOVAN]: KOVAN_RPC_URL, + [RINKEBY]: RINKEBY_RPC_URL, + }, + [BETA_UI_NETWORK_TYPE]: { + [LOCALHOST]: LOCALHOST_RPC_URL, + [MAINNET]: MAINNET_RPC_URL_BETA, + [ROPSTEN]: ROPSTEN_RPC_URL_BETA, + [KOVAN]: KOVAN_RPC_URL_BETA, + [RINKEBY]: RINKEBY_RPC_URL_BETA, + }, +} + +const getNetworkDisplayName = key => networkToNameMap[key] + +const getNetworkEndpoints = (networkType = OLD_UI_NETWORK_TYPE) => { + return { + ...networkEndpointsMap[networkType], + } +} + +module.exports = { + getNetworkDisplayName, + getNetworkEndpoints, +} diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index b4819d951..d4d508026 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -4,6 +4,21 @@ const extend = require('xtend') class PreferencesController { + /** + * + * @typedef {Object} PreferencesController + * @param {object} opts Overrides the defaults for the initial state of this.store + * @property {object} store The an object containing a users preferences, stored in local storage + * @property {array} store.frequentRpcList A list of custom rpcs to provide the user + * @property {string} store.currentAccountTab Indicates the selected tab in the ui + * @property {array} store.tokens The tokens the user wants display in their token lists + * @property {boolean} store.useBlockie The users preference for blockie identicons within the UI + * @property {object} store.featureFlags A key-boolean map, where keys refer to features and booleans to whether the + * user wishes to see that feature + * @property {string} store.currentLocale The preferred language locale key + * @property {string} store.selectedAddress A hex string that matches the currently selected address in the app + * + */ constructor (opts = {}) { const initState = extend({ frequentRpcList: [], @@ -17,18 +32,43 @@ class PreferencesController { } // PUBLIC METHODS + /** + * Setter for the `useBlockie` property + * + * @param {boolean} val Whether or not the user prefers blockie indicators + * + */ setUseBlockie (val) { this.store.updateState({ useBlockie: val }) } + /** + * Getter for the `useBlockie` property + * + * @returns {boolean} this.store.useBlockie + * + */ getUseBlockie () { return this.store.getState().useBlockie } + /** + * Setter for the `currentLocale` property + * + * @param {string} key he preferred language locale key + * + */ setCurrentLocale (key) { this.store.updateState({ currentLocale: key }) } + /** + * Setter for the `selectedAddress` property + * + * @param {string} _address A new hex address for an account + * @returns {Promise<void>} Promise resolves with undefined + * + */ setSelectedAddress (_address) { return new Promise((resolve, reject) => { const address = normalizeAddress(_address) @@ -37,10 +77,37 @@ class PreferencesController { }) } + /** + * Getter for the `selectedAddress` property + * + * @returns {string} The hex address for the currently selected account + * + */ getSelectedAddress () { return this.store.getState().selectedAddress } + /** + * Contains data about tokens users add to their account. + * @typedef {Object} AddedToken + * @property {string} address - The hex address for the token contract. Will be all lower cased and hex-prefixed. + * @property {string} symbol - The symbol of the token, usually 3 or 4 capitalized letters + * {@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-20.md#symbol} + * @property {boolean} decimals - The number of decimals the token uses. + * {@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-20.md#decimals} + */ + + /** + * Adds a new token to the token array, or updates the token if passed an address that already exists. + * Modifies the existing tokens array from the store. All objects in the tokens array array AddedToken objects. + * @see AddedToken {@link AddedToken} + * + * @param {string} rawAddress Hex address of the token contract. May or may not be a checksum address. + * @param {string} symbol The symbol of the token + * @param {number} decimals The number of decimals the token uses. + * @returns {Promise<array>} Promises the new array of AddedToken objects. + * + */ async addToken (rawAddress, symbol, decimals) { const address = normalizeAddress(rawAddress) const newEntry = { address, symbol, decimals } @@ -62,6 +129,13 @@ class PreferencesController { return Promise.resolve(tokens) } + /** + * Removes a specified token from the tokens array. + * + * @param {string} rawAddress Hex address of the token contract to remove. + * @returns {Promise<array>} The new array of AddedToken objects + * + */ removeToken (rawAddress) { const tokens = this.store.getState().tokens @@ -71,10 +145,23 @@ class PreferencesController { return Promise.resolve(updatedTokens) } + /** + * A getter for the `tokens` property + * + * @returns {array} The current array of AddedToken objects + * + */ getTokens () { return this.store.getState().tokens } + /** + * Gets an updated rpc list from this.addToFrequentRpcList() and sets the `frequentRpcList` to this update list. + * + * @param {string} _url The the new rpc url to add to the updated list + * @returns {Promise<void>} Promise resolves with undefined + * + */ updateFrequentRpcList (_url) { return this.addToFrequentRpcList(_url) .then((rpcList) => { @@ -83,6 +170,13 @@ class PreferencesController { }) } + /** + * Setter for the `currentAccountTab` property + * + * @param {string} currentAccountTab Specifies the new tab to be marked as current + * @returns {Promise<void>} Promise resolves with undefined + * + */ setCurrentAccountTab (currentAccountTab) { return new Promise((resolve, reject) => { this.store.updateState({ currentAccountTab }) @@ -90,6 +184,15 @@ class PreferencesController { }) } + /** + * Returns an updated rpcList based on the passed url and the current list. + * The returned list will have a max length of 2. If the _url currently exists it the list, it will be moved to the + * end of the list. The current list is modified and returned as a promise. + * + * @param {string} _url The rpc url to add to the frequentRpcList. + * @returns {Promise<array>} The updated frequentRpcList. + * + */ addToFrequentRpcList (_url) { const rpcList = this.getFrequentRpcList() const index = rpcList.findIndex((element) => { return element === _url }) @@ -105,10 +208,24 @@ class PreferencesController { return Promise.resolve(rpcList) } + /** + * Getter for the `frequentRpcList` property. + * + * @returns {array<string>} An array of one or two rpc urls. + * + */ getFrequentRpcList () { return this.store.getState().frequentRpcList } + /** + * Updates the `featureFlags` property, which is an object. One property within that object will be set to a boolean. + * + * @param {string} feature A key that corresponds to a UI feature. + * @param {boolean} activated Indicates whether or not the UI feature should be displayed + * @returns {Promise<object>} Promises a new object; the updated featureFlags object. + * + */ setFeatureFlag (feature, activated) { const currentFeatureFlags = this.store.getState().featureFlags const updatedFeatureFlags = { @@ -121,6 +238,13 @@ class PreferencesController { return Promise.resolve(updatedFeatureFlags) } + /** + * A getter for the `featureFlags` property + * + * @returns {object} A key-boolean map, where keys refer to features and booleans to whether the + * user wishes to see that feature + * + */ getFeatureFlags () { return this.store.getState().featureFlags } diff --git a/app/scripts/controllers/recent-blocks.js b/app/scripts/controllers/recent-blocks.js index 4ae3810eb..0c1ee4e38 100644 --- a/app/scripts/controllers/recent-blocks.js +++ b/app/scripts/controllers/recent-blocks.js @@ -2,6 +2,7 @@ const ObservableStore = require('obs-store') const extend = require('xtend') const BN = require('ethereumjs-util').BN const EthQuery = require('eth-query') +const log = require('loglevel') class RecentBlocksController { diff --git a/app/scripts/controllers/shapeshift.js b/app/scripts/controllers/shapeshift.js index 3bbfaa1c5..b2a1462c2 100644 --- a/app/scripts/controllers/shapeshift.js +++ b/app/scripts/controllers/shapeshift.js @@ -1,11 +1,23 @@ const ObservableStore = require('obs-store') const extend = require('xtend') +const log = require('loglevel') // every three seconds when an incomplete tx is waiting const POLLING_INTERVAL = 3000 class ShapeshiftController { + /** + * Controller responsible for managing the list of shapeshift transactions. On construction, it initiates a poll + * that queries a shapeshift.io API for updates to any pending shapeshift transactions + * + * @typedef {Object} ShapeshiftController + * @param {object} opts Overrides the defaults for the initial state of this.store + * @property {array} opts.initState initializes the the state of the ShapeshiftController. Can contain an + * shapeShiftTxList array. + * @property {array} shapeShiftTxList An array of ShapeShiftTx objects + * + */ constructor (opts = {}) { const initState = extend({ shapeShiftTxList: [], @@ -14,21 +26,54 @@ class ShapeshiftController { this.pollForUpdates() } + /** + * Represents, and contains data about, a single shapeshift transaction. + * @typedef {Object} ShapeShiftTx + * @property {string} depositAddress - An address at which to send a crypto deposit, so that eth can be sent to the + * user's Metamask account + * @property {string} depositType - An abbreviation of the type of crypto currency to be deposited. + * @property {string} key - The 'shapeshift' key differentiates this from other types of txs in Metamask + * @property {number} time - The time at which the tx was created + * @property {object} response - Initiated as an empty object, which will be replaced by a Response object. @see {@link + * https://developer.mozilla.org/en-US/docs/Web/API/Response} + */ + // // PUBLIC METHODS // + /** + * A getter for the shapeShiftTxList property + * + * @returns {array<ShapeShiftTx>} + * + */ getShapeShiftTxList () { const shapeShiftTxList = this.store.getState().shapeShiftTxList return shapeShiftTxList } + /** + * A getter for all ShapeShiftTx in the shapeShiftTxList that have not successfully completed a deposit. + * + * @returns {array<ShapeShiftTx>} Only includes ShapeShiftTx which has a response property with a status !== complete + * + */ getPendingTxs () { const txs = this.getShapeShiftTxList() const pending = txs.filter(tx => tx.response && tx.response.status !== 'complete') return pending } + /** + * A poll that exists as long as there are pending transactions. Each call attempts to update the data of any + * pendingTxs, and then calls itself again. If there are no pending txs, the recursive call is not made and + * the polling stops. + * + * this.updateTx is used to attempt the update to the pendingTxs in the ShapeShiftTxList, and that updated data + * is saved with saveTx. + * + */ pollForUpdates () { const pendingTxs = this.getPendingTxs() @@ -45,6 +90,15 @@ class ShapeshiftController { }) } + /** + * Attempts to update a ShapeShiftTx with data from a shapeshift.io API. Both the response and time properties + * can be updated. The response property is updated with every call, but the time property is only updated when + * the response status updates to 'complete'. This will occur once the user makes a deposit as the ShapeShiftTx + * depositAddress + * + * @param {ShapeShiftTx} tx The tx to update + * + */ async updateTx (tx) { try { const url = `https://shapeshift.io/txStat/${tx.depositAddress}` @@ -60,6 +114,13 @@ class ShapeshiftController { } } + /** + * Saves an updated to a ShapeShiftTx in the shapeShiftTxList. If the passed ShapeShiftTx is not in the + * shapeShiftTxList, nothing happens. + * + * @param {ShapeShiftTx} tx The updated tx to save, if it exists in the current shapeShiftTxList + * + */ saveTx (tx) { const { shapeShiftTxList } = this.store.getState() const index = shapeShiftTxList.indexOf(tx) @@ -69,6 +130,12 @@ class ShapeshiftController { } } + /** + * Removes a ShapeShiftTx from the shapeShiftTxList + * + * @param {ShapeShiftTx} tx The tx to remove + * + */ removeShapeShiftTx (tx) { const { shapeShiftTxList } = this.store.getState() const index = shapeShiftTxList.indexOf(index) @@ -78,6 +145,14 @@ class ShapeshiftController { this.updateState({ shapeShiftTxList }) } + /** + * Creates a new ShapeShiftTx, adds it to the shapeShiftTxList, and initiates a new poll for updates of pending txs + * + * @param {string} depositAddress - An address at which to send a crypto deposit, so that eth can be sent to the + * user's Metamask account + * @param {string} depositType - An abbreviation of the type of crypto currency to be deposited. + * + */ createShapeShiftTx (depositAddress, depositType) { const state = this.store.getState() let { shapeShiftTxList } = state diff --git a/app/scripts/controllers/token-rates.js b/app/scripts/controllers/token-rates.js new file mode 100644 index 000000000..21384f262 --- /dev/null +++ b/app/scripts/controllers/token-rates.js @@ -0,0 +1,77 @@ +const ObservableStore = require('obs-store') + +// By default, poll every 3 minutes +const DEFAULT_INTERVAL = 180 * 1000 + +/** + * A controller that polls for token exchange + * rates based on a user's current token list + */ +class TokenRatesController { + /** + * Creates a TokenRatesController + * + * @param {Object} [config] - Options to configure controller + */ + constructor ({ interval = DEFAULT_INTERVAL, preferences } = {}) { + this.store = new ObservableStore() + this.preferences = preferences + this.interval = interval + } + + /** + * Updates exchange rates for all tokens + */ + async updateExchangeRates () { + if (!this.isActive) { return } + const contractExchangeRates = {} + for (const i in this._tokens) { + const address = this._tokens[i].address + contractExchangeRates[address] = await this.fetchExchangeRate(address) + } + this.store.putState({ contractExchangeRates }) + } + + /** + * Fetches a token exchange rate by address + * + * @param {String} address - Token contract address + */ + async fetchExchangeRate (address) { + try { + const response = await fetch(`https://metamask.dev.balanc3.net/prices?from=${address}&to=ETH&autoConversion=false&summaryOnly=true`) + const json = await response.json() + return json && json.length ? json[0].averagePrice : 0 + } catch (error) { } + } + + /** + * @type {Number} + */ + set interval (interval) { + this._handle && clearInterval(this._handle) + if (!interval) { return } + this._handle = setInterval(() => { this.updateExchangeRates() }, interval) + } + + /** + * @type {Object} + */ + set preferences (preferences) { + this._preferences && this._preferences.unsubscribe() + if (!preferences) { return } + this._preferences = preferences + this.tokens = preferences.getState().tokens + preferences.subscribe(({ tokens = [] }) => { this.tokens = tokens }) + } + + /** + * @type {Array} + */ + set tokens (tokens) { + this._tokens = tokens + this.updateExchangeRates() + } +} + +module.exports = TokenRatesController diff --git a/app/scripts/controllers/transactions.js b/app/scripts/controllers/transactions.js index 336b0d8f7..c8211ebd7 100644 --- a/app/scripts/controllers/transactions.js +++ b/app/scripts/controllers/transactions.js @@ -7,6 +7,7 @@ const TransactionStateManager = require('../lib/tx-state-manager') const TxGasUtil = require('../lib/tx-gas-utils') const PendingTransactionTracker = require('../lib/pending-tx-tracker') const NonceTracker = require('../lib/nonce-tracker') +const log = require('loglevel') /* Transaction Controller is an aggregate of sub-controllers and trackers diff --git a/app/scripts/edge-encryptor.js b/app/scripts/edge-encryptor.js index 24c0c93a8..dcb06873b 100644 --- a/app/scripts/edge-encryptor.js +++ b/app/scripts/edge-encryptor.js @@ -1,69 +1,97 @@ const asmcrypto = require('asmcrypto.js') const Unibabel = require('browserify-unibabel') +/** + * A Microsoft Edge-specific encryption class that exposes + * the interface expected by eth-keykeyring-controller + */ class EdgeEncryptor { + /** + * Encrypts an arbitrary object to ciphertext + * + * @param {string} password Used to generate a key to encrypt the data + * @param {Object} dataObject Data to encrypt + * @returns {Promise<string>} Promise resolving to an object with ciphertext + */ + encrypt (password, dataObject) { + var salt = this._generateSalt() + return this._keyFromPassword(password, salt) + .then(function (key) { + var data = JSON.stringify(dataObject) + var dataBuffer = Unibabel.utf8ToBuffer(data) + var vector = global.crypto.getRandomValues(new Uint8Array(16)) + var resultbuffer = asmcrypto.AES_GCM.encrypt(dataBuffer, key, vector) - encrypt (password, dataObject) { + var buffer = new Uint8Array(resultbuffer) + var vectorStr = Unibabel.bufferToBase64(vector) + var vaultStr = Unibabel.bufferToBase64(buffer) + return JSON.stringify({ + data: vaultStr, + iv: vectorStr, + salt: salt, + }) + }) + } - var salt = this._generateSalt() - return this._keyFromPassword(password, salt) - .then(function (key) { + /** + * Decrypts an arbitrary object from ciphertext + * + * @param {string} password Used to generate a key to decrypt the data + * @param {string} text Ciphertext of an encrypted object + * @returns {Promise<Object>} Promise resolving to copy of decrypted object + */ + decrypt (password, text) { + const payload = JSON.parse(text) + const salt = payload.salt + return this._keyFromPassword(password, salt) + .then(function (key) { + const encryptedData = Unibabel.base64ToBuffer(payload.data) + const vector = Unibabel.base64ToBuffer(payload.iv) + return new Promise((resolve, reject) => { + var result + try { + result = asmcrypto.AES_GCM.decrypt(encryptedData, key, vector) + } catch (err) { + return reject(new Error('Incorrect password')) + } + const decryptedData = new Uint8Array(result) + const decryptedStr = Unibabel.bufferToUtf8(decryptedData) + const decryptedObj = JSON.parse(decryptedStr) + resolve(decryptedObj) + }) + }) + } - var data = JSON.stringify(dataObject) - var dataBuffer = Unibabel.utf8ToBuffer(data) - var vector = global.crypto.getRandomValues(new Uint8Array(16)) - var resultbuffer = asmcrypto.AES_GCM.encrypt(dataBuffer, key, vector) + /** + * Retrieves a cryptographic key using a password + * + * @private + * @param {string} password Password used to unlock a cryptographic key + * @param {string} salt Random base64 data + * @returns {Promise<Object>} Promise resolving to a derived key + */ + _keyFromPassword (password, salt) { - var buffer = new Uint8Array(resultbuffer) - var vectorStr = Unibabel.bufferToBase64(vector) - var vaultStr = Unibabel.bufferToBase64(buffer) - return JSON.stringify({ - data: vaultStr, - iv: vectorStr, - salt: salt, - }) - }) - } + var passBuffer = Unibabel.utf8ToBuffer(password) + var saltBuffer = Unibabel.base64ToBuffer(salt) + return new Promise((resolve) => { + var key = asmcrypto.PBKDF2_HMAC_SHA256.bytes(passBuffer, saltBuffer, 10000) + resolve(key) + }) + } - decrypt (password, text) { - - const payload = JSON.parse(text) - const salt = payload.salt - return this._keyFromPassword(password, salt) - .then(function (key) { - const encryptedData = Unibabel.base64ToBuffer(payload.data) - const vector = Unibabel.base64ToBuffer(payload.iv) - return new Promise((resolve, reject) => { - var result - try { - result = asmcrypto.AES_GCM.decrypt(encryptedData, key, vector) - } catch (err) { - return reject(new Error('Incorrect password')) - } - const decryptedData = new Uint8Array(result) - const decryptedStr = Unibabel.bufferToUtf8(decryptedData) - const decryptedObj = JSON.parse(decryptedStr) - resolve(decryptedObj) - }) - }) - } - - _keyFromPassword (password, salt) { - - var passBuffer = Unibabel.utf8ToBuffer(password) - var saltBuffer = Unibabel.base64ToBuffer(salt) - return new Promise((resolve) => { - var key = asmcrypto.PBKDF2_HMAC_SHA256.bytes(passBuffer, saltBuffer, 10000) - resolve(key) - }) - } - - _generateSalt (byteCount = 32) { - var view = new Uint8Array(byteCount) - global.crypto.getRandomValues(view) - var b64encoded = btoa(String.fromCharCode.apply(null, view)) - return b64encoded - } + /** + * Generates random base64 encoded data + * + * @private + * @returns {string} Randomized base64 encoded data + */ + _generateSalt (byteCount = 32) { + var view = new Uint8Array(byteCount) + global.crypto.getRandomValues(view) + var b64encoded = btoa(String.fromCharCode.apply(null, view)) + return b64encoded + } } module.exports = EdgeEncryptor diff --git a/app/scripts/first-time-state.js b/app/scripts/first-time-state.js index 3063df627..c49d89288 100644 --- a/app/scripts/first-time-state.js +++ b/app/scripts/first-time-state.js @@ -1,15 +1,24 @@ // test and development environment variables const env = process.env.METAMASK_ENV const METAMASK_DEBUG = process.env.METAMASK_DEBUG +const { DEFAULT_NETWORK, MAINNET } = require('./controllers/network/enums') -// -// The default state of MetaMask -// -module.exports = { +/** + * @typedef {Object} FirstTimeState + * @property {Object} config Initial configuration parameters + * @property {Object} NetworkController Network controller state + */ + +/** + * @type {FirstTimeState} + */ +const initialState = { config: {}, NetworkController: { provider: { - type: (METAMASK_DEBUG || env === 'test') ? 'rinkeby' : 'mainnet', + type: (METAMASK_DEBUG || env === 'test') ? DEFAULT_NETWORK : MAINNET, }, }, } + +module.exports = initialState diff --git a/app/scripts/inpage.js b/app/scripts/inpage.js index ec99bfc35..6d16eebd4 100644 --- a/app/scripts/inpage.js +++ b/app/scripts/inpage.js @@ -3,16 +3,11 @@ cleanContextForImports() require('web3/dist/web3.min.js') const log = require('loglevel') const LocalMessageDuplexStream = require('post-message-stream') -// const PingStream = require('ping-pong-stream/ping') -// const endOfStream = require('end-of-stream') const setupDappAutoReload = require('./lib/auto-reload.js') const MetamaskInpageProvider = require('./lib/inpage-provider.js') restoreContextAfterImports() -const METAMASK_DEBUG = process.env.METAMASK_DEBUG -window.log = log -log.setDefaultLevel(METAMASK_DEBUG ? 'debug' : 'warn') - +log.setDefaultLevel(process.env.METAMASK_DEBUG ? 'debug' : 'warn') // // setup plugin communication @@ -47,20 +42,20 @@ log.debug('MetaMask - injected web3') setupDappAutoReload(web3, inpageProvider.publicConfigStore) // set web3 defaultAccount - inpageProvider.publicConfigStore.subscribe(function (state) { web3.eth.defaultAccount = state.selectedAddress }) -// -// util -// - // need to make sure we aren't affected by overlapping namespaces // and that we dont affect the app with our namespace // mostly a fix for web3's BigNumber if AMD's "define" is defined... var __define +/** + * Caches reference to global define object and deletes it to + * avoid conflicts with other global define objects, such as + * AMD's define function + */ function cleanContextForImports () { __define = global.define try { @@ -70,6 +65,9 @@ function cleanContextForImports () { } } +/** + * Restores global define object from cached reference + */ function restoreContextAfterImports () { try { global.define = __define diff --git a/app/scripts/lib/ComposableObservableStore.js b/app/scripts/lib/ComposableObservableStore.js new file mode 100644 index 000000000..d5ee708a1 --- /dev/null +++ b/app/scripts/lib/ComposableObservableStore.js @@ -0,0 +1,49 @@ +const ObservableStore = require('obs-store') + +/** + * An ObservableStore that can composes a flat + * structure of child stores based on configuration + */ +class ComposableObservableStore extends ObservableStore { + /** + * Create a new store + * + * @param {Object} [initState] - The initial store state + * @param {Object} [config] - Map of internal state keys to child stores + */ + constructor (initState, config) { + super(initState) + this.updateStructure(config) + } + + /** + * Composes a new internal store subscription structure + * + * @param {Object} [config] - Map of internal state keys to child stores + */ + updateStructure (config) { + this.config = config + this.removeAllListeners() + for (const key in config) { + config[key].subscribe((state) => { + this.updateState({ [key]: state }) + }) + } + } + + /** + * Merges all child store state into a single object rather than + * returning an object keyed by child store class name + * + * @returns {Object} - Object containing merged child store state + */ + getFlatState () { + let flatState = {} + for (const key in this.config) { + flatState = { ...flatState, ...this.config[key].getState() } + } + return flatState + } +} + +module.exports = ComposableObservableStore diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js index b9dde3c28..4e2d0bc79 100644 --- a/app/scripts/lib/buy-eth-url.js +++ b/app/scripts/lib/buy-eth-url.js @@ -1,5 +1,16 @@ module.exports = getBuyEthUrl +/** + * Gives the caller a url at which the user can acquire eth, depending on the network they are in + * + * @param {object} opts Options required to determine the correct url + * @param {string} opts.network The network for which to return a url + * @param {string} opts.amount The amount of ETH to buy on coinbase. Only relevant if network === '1'. + * @param {string} opts.address The address the bought ETH should be sent to. Only relevant if network === '1'. + * @returns {string|undefined} The url at which the user can access ETH, while in the given network. If the passed + * network does not match any of the specified cases, or if no network is given, returns undefined. + * + */ function getBuyEthUrl ({ network, amount, address }) { let url switch (network) { diff --git a/app/scripts/lib/config-manager.js b/app/scripts/lib/config-manager.js index 34b603b96..c10ff2f4e 100644 --- a/app/scripts/lib/config-manager.js +++ b/app/scripts/lib/config-manager.js @@ -1,12 +1,11 @@ const ethUtil = require('ethereumjs-util') const normalize = require('eth-sig-util').normalize -const MetamaskConfig = require('../config.js') - - -const MAINNET_RPC = MetamaskConfig.network.mainnet -const ROPSTEN_RPC = MetamaskConfig.network.ropsten -const KOVAN_RPC = MetamaskConfig.network.kovan -const RINKEBY_RPC = MetamaskConfig.network.rinkeby +const { + MAINNET_RPC_URL, + ROPSTEN_RPC_URL, + KOVAN_RPC_URL, + RINKEBY_RPC_URL, +} = require('../controllers/network/enums') /* The config-manager is a convenience object * wrapping a pojo-migrator. @@ -102,7 +101,6 @@ ConfigManager.prototype.setShowSeedWords = function (should) { this.setData(data) } - ConfigManager.prototype.getShouldShowSeedWords = function () { var data = this.getData() return data.showSeedWords @@ -118,6 +116,27 @@ ConfigManager.prototype.getSeedWords = function () { var data = this.getData() return data.seedWords } + +/** + * Called to set the isRevealingSeedWords flag. This happens only when the user chooses to reveal + * the seed words and not during the first time flow. + * @param {boolean} reveal - Value to set the isRevealingSeedWords flag. + */ +ConfigManager.prototype.setIsRevealingSeedWords = function (reveal = false) { + const data = this.getData() + data.isRevealingSeedWords = reveal + this.setData(data) +} + +/** + * Returns the isRevealingSeedWords flag. + * @returns {boolean|undefined} + */ +ConfigManager.prototype.getIsRevealingSeedWords = function () { + const data = this.getData() + return data.isRevealingSeedWords +} + ConfigManager.prototype.setRpcTarget = function (rpcUrl) { var config = this.getConfig() config.provider = { @@ -154,19 +173,19 @@ ConfigManager.prototype.getCurrentRpcAddress = function () { switch (provider.type) { case 'mainnet': - return MAINNET_RPC + return MAINNET_RPC_URL case 'ropsten': - return ROPSTEN_RPC + return ROPSTEN_RPC_URL case 'kovan': - return KOVAN_RPC + return KOVAN_RPC_URL case 'rinkeby': - return RINKEBY_RPC + return RINKEBY_RPC_URL default: - return provider && provider.rpcTarget ? provider.rpcTarget : RINKEBY_RPC + return provider && provider.rpcTarget ? provider.rpcTarget : RINKEBY_RPC_URL } } diff --git a/app/scripts/lib/createLoggerMiddleware.js b/app/scripts/lib/createLoggerMiddleware.js index 2707cbd9e..996c3477c 100644 --- a/app/scripts/lib/createLoggerMiddleware.js +++ b/app/scripts/lib/createLoggerMiddleware.js @@ -1,14 +1,20 @@ -// log rpc activity +const log = require('loglevel') + module.exports = createLoggerMiddleware -function createLoggerMiddleware ({ origin }) { - return function loggerMiddleware (req, res, next, end) { - next((cb) => { +/** + * Returns a middleware that logs RPC activity + * @param {{ origin: string }} opts - The middleware options + * @returns {Function} + */ +function createLoggerMiddleware (opts) { + return function loggerMiddleware (/** @type {any} */ req, /** @type {any} */ res, /** @type {Function} */ next) { + next((/** @type {Function} */ cb) => { if (res.error) { log.error('Error in RPC response:\n', res) } if (req.isMetamaskInternal) return - log.info(`RPC (${origin}):`, req, '->', res) + log.info(`RPC (${opts.origin}):`, req, '->', res) cb() }) } diff --git a/app/scripts/lib/createOriginMiddleware.js b/app/scripts/lib/createOriginMiddleware.js index f8bdb2dc2..98bb0e3b3 100644 --- a/app/scripts/lib/createOriginMiddleware.js +++ b/app/scripts/lib/createOriginMiddleware.js @@ -1,9 +1,13 @@ -// append dapp origin domain to request module.exports = createOriginMiddleware -function createOriginMiddleware ({ origin }) { - return function originMiddleware (req, res, next, end) { - req.origin = origin +/** + * Returns a middleware that appends the DApp origin to request + * @param {{ origin: string }} opts - The middleware options + * @returns {Function} + */ +function createOriginMiddleware (opts) { + return function originMiddleware (/** @type {any} */ req, /** @type {any} */ _, /** @type {Function} */ next) { + req.origin = opts.origin next() } } diff --git a/app/scripts/lib/createProviderMiddleware.js b/app/scripts/lib/createProviderMiddleware.js index 4e667bac2..8a939ba4e 100644 --- a/app/scripts/lib/createProviderMiddleware.js +++ b/app/scripts/lib/createProviderMiddleware.js @@ -1,6 +1,10 @@ module.exports = createProviderMiddleware -// forward requests to provider +/** + * Forwards an HTTP request to the current Web3 provider + * + * @param {{ provider: Object }} config Configuration containing current Web3 provider + */ function createProviderMiddleware ({ provider }) { return (req, res, next, end) => { provider.sendAsync(req, (err, _res) => { diff --git a/app/scripts/lib/enums.js b/app/scripts/lib/enums.js new file mode 100644 index 000000000..0a3afca47 --- /dev/null +++ b/app/scripts/lib/enums.js @@ -0,0 +1,9 @@ +const ENVIRONMENT_TYPE_POPUP = 'popup' +const ENVIRONMENT_TYPE_NOTIFICATION = 'notification' +const ENVIRONMENT_TYPE_FULLSCREEN = 'fullscreen' + +module.exports = { + ENVIRONMENT_TYPE_POPUP, + ENVIRONMENT_TYPE_NOTIFICATION, + ENVIRONMENT_TYPE_FULLSCREEN, +} diff --git a/app/scripts/lib/environment-type.js b/app/scripts/lib/environment-type.js deleted file mode 100644 index 7966926eb..000000000 --- a/app/scripts/lib/environment-type.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = function environmentType () { - const url = window.location.href - if (url.match(/popup.html$/)) { - return 'popup' - } else if (url.match(/home.html$/)) { - return 'responsive' - } else { - return 'notification' - } -} diff --git a/app/scripts/lib/events-proxy.js b/app/scripts/lib/events-proxy.js index c0a490b05..f83773ccc 100644 --- a/app/scripts/lib/events-proxy.js +++ b/app/scripts/lib/events-proxy.js @@ -1,26 +1,37 @@ +/** + * Returns an EventEmitter that proxies events from the given event emitter + * @param {any} eventEmitter + * @param {object} listeners - The listeners to proxy to + * @returns {any} + */ module.exports = function createEventEmitterProxy (eventEmitter, listeners) { let target = eventEmitter const eventHandlers = listeners || {} - const proxy = new Proxy({}, { - get: (obj, name) => { + const proxy = /** @type {any} */ (new Proxy({}, { + get: (_, name) => { // intercept listeners if (name === 'on') return addListener if (name === 'setTarget') return setTarget if (name === 'proxyEventHandlers') return eventHandlers - return target[name] + return (/** @type {any} */ (target))[name] }, - set: (obj, name, value) => { + set: (_, name, value) => { target[name] = value return true }, - }) - function setTarget (eventEmitter) { + })) + function setTarget (/** @type {EventEmitter} */ eventEmitter) { target = eventEmitter // migrate listeners Object.keys(eventHandlers).forEach((name) => { - eventHandlers[name].forEach((handler) => target.on(name, handler)) + /** @type {Array<Function>} */ (eventHandlers[name]).forEach((handler) => target.on(name, handler)) }) } + /** + * Attaches a function to be called whenever the specified event is emitted + * @param {string} name + * @param {Function} handler + */ function addListener (name, handler) { if (!eventHandlers[name]) eventHandlers[name] = [] eventHandlers[name].push(handler) diff --git a/app/scripts/lib/get-first-preferred-lang-code.js b/app/scripts/lib/get-first-preferred-lang-code.js index e3635434e..5473fccf0 100644 --- a/app/scripts/lib/get-first-preferred-lang-code.js +++ b/app/scripts/lib/get-first-preferred-lang-code.js @@ -4,6 +4,13 @@ const allLocales = require('../../_locales/index.json') const existingLocaleCodes = allLocales.map(locale => locale.code.toLowerCase().replace('_', '-')) +/** + * Returns a preferred language code, based on settings within the user's browser. If we have no translations for the + * users preferred locales, 'en' is returned. + * + * @returns {Promise<string>} Promises a locale code, either one from the user's preferred list that we have a translation for, or 'en' + * + */ async function getFirstPreferredLangCode () { const userPreferredLocaleCodes = await promisify( extension.i18n.getAcceptLanguages, diff --git a/app/scripts/lib/hex-to-bn.js b/app/scripts/lib/hex-to-bn.js index 184217279..b28746920 100644 --- a/app/scripts/lib/hex-to-bn.js +++ b/app/scripts/lib/hex-to-bn.js @@ -1,6 +1,11 @@ -const ethUtil = require('ethereumjs-util') +const ethUtil = (/** @type {object} */ (require('ethereumjs-util'))) const BN = ethUtil.BN +/** + * Returns a [BinaryNumber]{@link BN} representation of the given hex value + * @param {string} hex + * @return {any} + */ module.exports = function hexToBn (hex) { return new BN(ethUtil.stripHexPrefix(hex), 16) } diff --git a/app/scripts/lib/is-popup-or-notification.js b/app/scripts/lib/is-popup-or-notification.js deleted file mode 100644 index e2999411f..000000000 --- a/app/scripts/lib/is-popup-or-notification.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = function isPopupOrNotification () { - const url = window.location.href - // if (url.match(/popup.html$/) || url.match(/home.html$/)) { - // Below regexes needed for feature toggles (e.g. see line ~340 in ui/app/app.js) - // Revert below regexes to above commented out regexes before merge to master - if (url.match(/popup.html(?:\?.+)*$/) || url.match(/home.html(?:\?.+)*$/)) { - return 'popup' - } else { - return 'notification' - } -} diff --git a/app/scripts/lib/local-store.js b/app/scripts/lib/local-store.js index 5b47985f6..139ff86bd 100644 --- a/app/scripts/lib/local-store.js +++ b/app/scripts/lib/local-store.js @@ -1,10 +1,13 @@ -// We should not rely on local storage in an extension! -// We should use this instead! -// https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage/local - const extension = require('extensionizer') +const log = require('loglevel') +/** + * A wrapper around the extension's storage local API + */ module.exports = class ExtensionStore { + /** + * @constructor + */ constructor() { this.isSupported = !!(extension.storage.local) if (!this.isSupported) { @@ -12,6 +15,10 @@ module.exports = class ExtensionStore { } } + /** + * Returns all of the keys currently saved + * @return {Promise<*>} + */ async get() { if (!this.isSupported) return undefined const result = await this._get() @@ -24,14 +31,24 @@ module.exports = class ExtensionStore { } } + /** + * Sets the key in local state + * @param {object} state - The state to set + * @return {Promise<void>} + */ async set(state) { return this._set(state) } + /** + * Returns all of the keys currently saved + * @private + * @return {object} the key-value map from local storage + */ _get() { const local = extension.storage.local return new Promise((resolve, reject) => { - local.get(null, (result) => { + local.get(null, (/** @type {any} */ result) => { const err = extension.runtime.lastError if (err) { reject(err) @@ -42,6 +59,12 @@ module.exports = class ExtensionStore { }) } + /** + * Sets the key in local state + * @param {object} obj - The key to set + * @return {Promise<void>} + * @private + */ _set(obj) { const local = extension.storage.local return new Promise((resolve, reject) => { @@ -57,6 +80,11 @@ module.exports = class ExtensionStore { } } +/** + * Returns whether or not the given object contains no keys + * @param {object} obj - The object to check + * @returns {boolean} + */ function isEmpty(obj) { return Object.keys(obj).length === 0 } diff --git a/app/scripts/lib/migrator/index.js b/app/scripts/lib/migrator/index.js index 85c2717ea..345ca8001 100644 --- a/app/scripts/lib/migrator/index.js +++ b/app/scripts/lib/migrator/index.js @@ -1,7 +1,23 @@ const EventEmitter = require('events') +/** + * @typedef {object} Migration + * @property {number} version - The migration version + * @property {Function} migrate - Returns a promise of the migrated data + */ + +/** + * @typedef {object} MigratorOptions + * @property {Array<Migration>} [migrations] - The list of migrations to apply + * @property {number} [defaultVersion] - The version to use in the initial state + */ + class Migrator extends EventEmitter { + /** + * @constructor + * @param {MigratorOptions} opts + */ constructor (opts = {}) { super() const migrations = opts.migrations || [] @@ -42,19 +58,30 @@ class Migrator extends EventEmitter { return versionedData - // migration is "pending" if it has a higher - // version number than currentVersion + /** + * Returns whether or not the migration is pending + * + * A migration is considered "pending" if it has a higher + * version number than the current version. + * @param {Migration} migration + * @returns {boolean} + */ function migrationIsPending (migration) { return migration.version > versionedData.meta.version } } - generateInitialState (initState) { + /** + * Returns the initial state for the migrator + * @param {object} [data] - The data for the initial state + * @returns {{meta: {version: number}, data: any}} + */ + generateInitialState (data) { return { meta: { version: this.defaultVersion, }, - data: initState, + data, } } diff --git a/app/scripts/lib/nodeify.js b/app/scripts/lib/nodeify.js index 9b595d93c..25be6537b 100644 --- a/app/scripts/lib/nodeify.js +++ b/app/scripts/lib/nodeify.js @@ -1,6 +1,14 @@ const promiseToCallback = require('promise-to-callback') const noop = function () {} +/** + * A generator that returns a function which, when passed a promise, can treat that promise as a node style callback. + * The prime advantage being that callbacks are better for error handling. + * + * @param {Function} fn The function to handle as a callback + * @param {Object} context The context in which the fn is to be called, most often a this reference + * + */ module.exports = function nodeify (fn, context) { return function () { const args = [].slice.call(arguments) diff --git a/app/scripts/lib/personal-message-manager.js b/app/scripts/lib/personal-message-manager.js index 6602f5aa8..43a7d0b42 100644 --- a/app/scripts/lib/personal-message-manager.js +++ b/app/scripts/lib/personal-message-manager.js @@ -3,6 +3,7 @@ const ObservableStore = require('obs-store') const ethUtil = require('ethereumjs-util') const createId = require('./random-id') const hexRe = /^[0-9A-Fa-f]+$/g +const log = require('loglevel') module.exports = class PersonalMessageManager extends EventEmitter { diff --git a/app/scripts/lib/port-stream.js b/app/scripts/lib/port-stream.js index a9716fb00..5c4224fd9 100644 --- a/app/scripts/lib/port-stream.js +++ b/app/scripts/lib/port-stream.js @@ -6,6 +6,13 @@ module.exports = PortDuplexStream inherits(PortDuplexStream, Duplex) +/** + * Creates a stream that's both readable and writable. + * The stream supports arbitrary objects. + * + * @class + * @param {Object} port Remote Port object + */ function PortDuplexStream (port) { Duplex.call(this, { objectMode: true, @@ -15,8 +22,13 @@ function PortDuplexStream (port) { port.onDisconnect.addListener(this._onDisconnect.bind(this)) } -// private - +/** + * Callback triggered when a message is received from + * the remote Port associated with this Stream. + * + * @private + * @param {Object} msg - Payload from the onMessage listener of Port + */ PortDuplexStream.prototype._onMessage = function (msg) { if (Buffer.isBuffer(msg)) { delete msg._isBuffer @@ -27,14 +39,31 @@ PortDuplexStream.prototype._onMessage = function (msg) { } } +/** + * Callback triggered when the remote Port + * associated with this Stream disconnects. + * + * @private + */ PortDuplexStream.prototype._onDisconnect = function () { this.destroy() } -// stream plumbing - +/** + * Explicitly sets read operations to a no-op + */ PortDuplexStream.prototype._read = noop + +/** + * Called internally when data should be written to + * this writable stream. + * + * @private + * @param {*} msg Arbitrary object to write + * @param {string} encoding Encoding to use when writing payload + * @param {Function} cb Called when writing is complete or an error occurs + */ PortDuplexStream.prototype._write = function (msg, encoding, cb) { try { if (Buffer.isBuffer(msg)) { diff --git a/app/scripts/lib/seed-phrase-verifier.js b/app/scripts/lib/seed-phrase-verifier.js index 9cea22029..7ba712c0d 100644 --- a/app/scripts/lib/seed-phrase-verifier.js +++ b/app/scripts/lib/seed-phrase-verifier.js @@ -1,4 +1,5 @@ const KeyringController = require('eth-keyring-controller') +const log = require('loglevel') const seedPhraseVerifier = { diff --git a/app/scripts/lib/setupMetamaskMeshMetrics.js b/app/scripts/lib/setupMetamaskMeshMetrics.js index 40343f017..02690a948 100644 --- a/app/scripts/lib/setupMetamaskMeshMetrics.js +++ b/app/scripts/lib/setupMetamaskMeshMetrics.js @@ -1,6 +1,9 @@ module.exports = setupMetamaskMeshMetrics +/** + * Injects an iframe into the current document for testing + */ function setupMetamaskMeshMetrics() { const testingContainer = document.createElement('iframe') testingContainer.src = 'https://metamask.github.io/mesh-testing/' diff --git a/app/scripts/lib/stream-utils.js b/app/scripts/lib/stream-utils.js index 8bb0b4f3c..3dbc064b5 100644 --- a/app/scripts/lib/stream-utils.js +++ b/app/scripts/lib/stream-utils.js @@ -8,20 +8,34 @@ module.exports = { setupMultiplex: setupMultiplex, } +/** + * Returns a stream transform that parses JSON strings passing through + * @return {stream.Transform} + */ function jsonParseStream () { - return Through.obj(function (serialized, encoding, cb) { + return Through.obj(function (serialized, _, cb) { this.push(JSON.parse(serialized)) cb() }) } +/** + * Returns a stream transform that calls {@code JSON.stringify} + * on objects passing through + * @return {stream.Transform} the stream transform + */ function jsonStringifyStream () { - return Through.obj(function (obj, encoding, cb) { + return Through.obj(function (obj, _, cb) { this.push(JSON.stringify(obj)) cb() }) } +/** + * Sets up stream multiplexing for the given stream + * @param {any} connectionStream - the stream to mux + * @return {stream.Stream} the multiplexed stream + */ function setupMultiplex (connectionStream) { const mux = new ObjectMultiplex() pump( diff --git a/app/scripts/lib/tx-state-manager.js b/app/scripts/lib/tx-state-manager.js index d8ea17400..c6d10ee62 100644 --- a/app/scripts/lib/tx-state-manager.js +++ b/app/scripts/lib/tx-state-manager.js @@ -92,8 +92,10 @@ module.exports = class TransactionStateManager extends EventEmitter { // or rejected tx's. // not tx's that are pending or unapproved if (txCount > txHistoryLimit - 1) { - const index = transactions.findIndex((metaTx) => metaTx.status === 'confirmed' || metaTx.status === 'rejected') - transactions.splice(index, 1) + let index = transactions.findIndex((metaTx) => metaTx.status === 'confirmed' || metaTx.status === 'rejected') + if (index !== -1) { + transactions.splice(index, 1) + } } transactions.push(txMeta) this._saveTxList(transactions) diff --git a/app/scripts/lib/typed-message-manager.js b/app/scripts/lib/typed-message-manager.js index 8b760790e..60042155e 100644 --- a/app/scripts/lib/typed-message-manager.js +++ b/app/scripts/lib/typed-message-manager.js @@ -3,7 +3,7 @@ const ObservableStore = require('obs-store') const createId = require('./random-id') const assert = require('assert') const sigUtil = require('eth-sig-util') - +const log = require('loglevel') module.exports = class TypedMessageManager extends EventEmitter { constructor (opts) { diff --git a/app/scripts/lib/util.js b/app/scripts/lib/util.js index 6dee9edf0..431d1e59c 100644 --- a/app/scripts/lib/util.js +++ b/app/scripts/lib/util.js @@ -1,20 +1,53 @@ const ethUtil = require('ethereumjs-util') const assert = require('assert') const BN = require('bn.js') +const { + ENVIRONMENT_TYPE_POPUP, + ENVIRONMENT_TYPE_NOTIFICATION, + ENVIRONMENT_TYPE_FULLSCREEN, +} = require('./enums') -module.exports = { - getStack, - sufficientBalance, - hexToBn, - bnToHex, - BnMultiplyByFraction, -} - +/** + * Generates an example stack trace + * + * @returns {string} A stack trace + * + */ function getStack () { const stack = new Error('Stack trace generator - not an error').stack return stack } +/** + * Used to determine the window type through which the app is being viewed. + * - 'popup' refers to the extension opened through the browser app icon (in top right corner in chrome and firefox) + * - 'responsive' refers to the main browser window + * - 'notification' refers to the popup that appears in its own window when taking action outside of metamask + * + * @returns {string} A single word label that represents the type of window through which the app is being viewed + * + */ +const getEnvironmentType = (url = window.location.href) => { + if (url.match(/popup.html(?:\?.+)*$/)) { + return ENVIRONMENT_TYPE_POPUP + } else if (url.match(/home.html(?:\?.+)*$/) || url.match(/home.html(?:#.*)*$/)) { + return ENVIRONMENT_TYPE_FULLSCREEN + } else { + return ENVIRONMENT_TYPE_NOTIFICATION + } +} + +/** + * Checks whether a given balance of ETH, represented as a hex string, is sufficient to pay a value plus a gas fee + * + * @param {object} txParams Contains data about a transaction + * @param {string} txParams.gas The gas for a transaction + * @param {string} txParams.gasPrice The price per gas for the transaction + * @param {string} txParams.value The value of ETH to send + * @param {string} hexBalance A balance of ETH represented as a hex string + * @returns {boolean} Whether the balance is greater than or equal to the value plus the value of gas times gasPrice + * + */ function sufficientBalance (txParams, hexBalance) { // validate hexBalance is a hex string assert.equal(typeof hexBalance, 'string', 'sufficientBalance - hexBalance is not a hex string') @@ -29,16 +62,48 @@ function sufficientBalance (txParams, hexBalance) { return balance.gte(maxCost) } +/** + * Converts a BN object to a hex string with a '0x' prefix + * + * @param {BN} inputBn The BN to convert to a hex string + * @returns {string} A '0x' prefixed hex string + * + */ function bnToHex (inputBn) { return ethUtil.addHexPrefix(inputBn.toString(16)) } +/** + * Converts a hex string to a BN object + * + * @param {string} inputHex A number represented as a hex string + * @returns {Object} A BN object + * + */ function hexToBn (inputHex) { return new BN(ethUtil.stripHexPrefix(inputHex), 16) } +/** + * Used to multiply a BN by a fraction + * + * @param {BN} targetBN The number to multiply by a fraction + * @param {number|string} numerator The numerator of the fraction multiplier + * @param {number|string} denominator The denominator of the fraction multiplier + * @returns {BN} The product of the multiplication + * + */ function BnMultiplyByFraction (targetBN, numerator, denominator) { const numBN = new BN(numerator) const denomBN = new BN(denominator) return targetBN.mul(numBN).div(denomBN) } + +module.exports = { + getStack, + getEnvironmentType, + sufficientBalance, + hexToBn, + bnToHex, + BnMultiplyByFraction, +} diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index b96acc9da..edde38819 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -5,10 +5,10 @@ */ const EventEmitter = require('events') -const extend = require('xtend') const pump = require('pump') const Dnode = require('dnode') const ObservableStore = require('obs-store') +const ComposableObservableStore = require('./lib/ComposableObservableStore') const asStream = require('obs-store/lib/asStream') const AccountTracker = require('./lib/account-tracker') const RpcEngine = require('json-rpc-engine') @@ -34,6 +34,7 @@ const PersonalMessageManager = require('./lib/personal-message-manager') const TypedMessageManager = require('./lib/typed-message-manager') const TransactionController = require('./controllers/transactions') const BalancesController = require('./controllers/computed-balances') +const TokenRatesController = require('./controllers/token-rates') const ConfigManager = require('./lib/config-manager') const nodeify = require('./lib/nodeify') const accountImporter = require('./account-import-strategies') @@ -44,6 +45,7 @@ const BN = require('ethereumjs-util').BN const GWEI_BN = new BN('1000000000') const percentile = require('percentile') const seedPhraseVerifier = require('./lib/seed-phrase-verifier') +const log = require('loglevel') module.exports = class MetamaskController extends EventEmitter { @@ -65,7 +67,7 @@ module.exports = class MetamaskController extends EventEmitter { this.platform = opts.platform // observable state store - this.store = new ObservableStore(initState) + this.store = new ComposableObservableStore(initState) // lock to ensure only one vault created at once this.createVaultMutex = new Mutex() @@ -104,6 +106,11 @@ module.exports = class MetamaskController extends EventEmitter { this.provider = this.initializeProvider() this.blockTracker = this.provider._blockTracker + // token exchange rate tracker + this.tokenRatesController = new TokenRatesController({ + preferences: this.preferencesController.store, + }) + this.recentBlocksController = new RecentBlocksController({ blockTracker: this.blockTracker, provider: this.provider, @@ -184,53 +191,37 @@ module.exports = class MetamaskController extends EventEmitter { this.typedMessageManager = new TypedMessageManager() this.publicConfigStore = this.initPublicConfigStore() - // manual disk state subscriptions - this.txController.store.subscribe((state) => { - this.store.updateState({ TransactionController: state }) - }) - this.keyringController.store.subscribe((state) => { - this.store.updateState({ KeyringController: state }) - }) - this.preferencesController.store.subscribe((state) => { - this.store.updateState({ PreferencesController: state }) - }) - this.addressBookController.store.subscribe((state) => { - this.store.updateState({ AddressBookController: state }) - }) - this.currencyController.store.subscribe((state) => { - this.store.updateState({ CurrencyController: state }) - }) - this.noticeController.store.subscribe((state) => { - this.store.updateState({ NoticeController: state }) - }) - this.shapeshiftController.store.subscribe((state) => { - this.store.updateState({ ShapeShiftController: state }) - }) - this.networkController.store.subscribe((state) => { - this.store.updateState({ NetworkController: state }) + this.store.updateStructure({ + TransactionController: this.txController.store, + KeyringController: this.keyringController.store, + PreferencesController: this.preferencesController.store, + AddressBookController: this.addressBookController.store, + CurrencyController: this.currencyController.store, + NoticeController: this.noticeController.store, + ShapeShiftController: this.shapeshiftController.store, + NetworkController: this.networkController.store, + InfuraController: this.infuraController.store, }) - this.infuraController.store.subscribe((state) => { - this.store.updateState({ InfuraController: state }) + this.memStore = new ComposableObservableStore(null, { + NetworkController: this.networkController.store, + AccountTracker: this.accountTracker.store, + TxController: this.txController.memStore, + BalancesController: this.balancesController.store, + TokenRatesController: this.tokenRatesController.store, + MessageManager: this.messageManager.memStore, + PersonalMessageManager: this.personalMessageManager.memStore, + TypesMessageManager: this.typedMessageManager.memStore, + KeyringController: this.keyringController.memStore, + PreferencesController: this.preferencesController.store, + RecentBlocksController: this.recentBlocksController.store, + AddressBookController: this.addressBookController.store, + CurrencyController: this.currencyController.store, + NoticeController: this.noticeController.memStore, + ShapeshiftController: this.shapeshiftController.store, + InfuraController: this.infuraController.store, }) - - // manual mem state subscriptions - const sendUpdate = this.sendUpdate.bind(this) - this.networkController.store.subscribe(sendUpdate) - this.accountTracker.store.subscribe(sendUpdate) - this.txController.memStore.subscribe(sendUpdate) - this.balancesController.store.subscribe(sendUpdate) - this.messageManager.memStore.subscribe(sendUpdate) - this.personalMessageManager.memStore.subscribe(sendUpdate) - this.typedMessageManager.memStore.subscribe(sendUpdate) - this.keyringController.memStore.subscribe(sendUpdate) - this.preferencesController.store.subscribe(sendUpdate) - this.recentBlocksController.store.subscribe(sendUpdate) - this.addressBookController.store.subscribe(sendUpdate) - this.currencyController.store.subscribe(sendUpdate) - this.noticeController.memStore.subscribe(sendUpdate) - this.shapeshiftController.store.subscribe(sendUpdate) - this.infuraController.store.subscribe(sendUpdate) + this.memStore.subscribe(this.sendUpdate.bind(this)) } /** @@ -272,6 +263,7 @@ module.exports = class MetamaskController extends EventEmitter { /** * Constructor helper: initialize a public config store. + * This store is used to make some config info available to Dapps synchronously. */ initPublicConfigStore () { // get init state @@ -279,6 +271,7 @@ module.exports = class MetamaskController extends EventEmitter { // memStore -> transform -> publicConfigStore this.on('update', (memState) => { + this.isClientOpenAndUnlocked = memState.isUnlocked && this._isClientOpen const publicState = selectPublicState(memState) publicConfigStore.putState(publicState) }) @@ -308,39 +301,25 @@ module.exports = class MetamaskController extends EventEmitter { const vault = this.keyringController.store.getState().vault const isInitialized = (!!wallet || !!vault) - return extend( - { - isInitialized, - }, - this.networkController.store.getState(), - this.accountTracker.store.getState(), - this.txController.memStore.getState(), - this.messageManager.memStore.getState(), - this.personalMessageManager.memStore.getState(), - this.typedMessageManager.memStore.getState(), - this.keyringController.memStore.getState(), - this.balancesController.store.getState(), - this.preferencesController.store.getState(), - this.addressBookController.store.getState(), - this.currencyController.store.getState(), - this.noticeController.memStore.getState(), - this.infuraController.store.getState(), - this.recentBlocksController.store.getState(), - // config manager - this.configManager.getConfig(), - this.shapeshiftController.store.getState(), - { + return { + ...{ isInitialized }, + ...this.memStore.getFlatState(), + ...this.configManager.getConfig(), + ...{ lostAccounts: this.configManager.getLostAccounts(), seedWords: this.configManager.getSeedWords(), forgottenPassword: this.configManager.getPasswordForgotten(), - } - ) + isRevealingSeedWords: Boolean(this.configManager.getIsRevealingSeedWords()), + }, + } } /** - * Returns an api-object which is consumed by the UI + * Returns an Object containing API Callback Functions. + * These functions are the interface for the UI. + * The API object can be transmitted over a stream with dnode. * - * @returns {Object} + * @returns {Object} Object containing API functions. */ getApi () { const keyringController = this.keyringController @@ -372,6 +351,7 @@ module.exports = class MetamaskController extends EventEmitter { clearSeedWordCache: this.clearSeedWordCache.bind(this), resetAccount: nodeify(this.resetAccount, this), importAccountWithStrategy: this.importAccountWithStrategy.bind(this), + setIsRevealingSeedWords: this.configManager.setIsRevealingSeedWords.bind(this.configManager), // vault management submitPassword: nodeify(keyringController.submitPassword, keyringController), @@ -430,16 +410,18 @@ module.exports = class MetamaskController extends EventEmitter { //============================================================================= /** - * Creates a new Vault(?) and create a new keychain(?) - * - * A vault is ... + * Creates a new Vault and create a new keychain. * - * A keychain is ... + * A vault, or KeyringController, is a controller that contains + * many different account strategies, currently called Keyrings. + * Creating it new means wiping all previous keyrings. * + * A keychain, or keyring, controls many accounts with a single backup and signing strategy. + * For example, a mnemonic phrase can generate many accounts, and is a keyring. * - * @param {} password + * @param {string} password * - * @returns {} vault + * @returns {Object} vault */ async createNewVaultAndKeychain (password) { const release = await this.createVaultMutex.acquire() @@ -465,7 +447,7 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * Create a new Vault and restore an existent keychain + * Create a new Vault and restore an existent keyring. * @param {} password * @param {} seed */ @@ -483,10 +465,16 @@ module.exports = class MetamaskController extends EventEmitter { } /** + * @type Identity + * @property {string} name - The account nickname. + * @property {string} address - The account's ethereum address, in lower case. + * @property {boolean} mayBeFauceting - Whether this account is currently + * receiving funds from our automatic Ropsten faucet. + */ + + /** * Retrieves the first Identiy from the passed Vault and selects the related address * - * An Identity is ... - * * @param {} vault */ selectFirstIdentity (vault) { @@ -495,12 +483,12 @@ module.exports = class MetamaskController extends EventEmitter { this.preferencesController.setSelectedAddress(address) } - // ? - // Opinionated Keyring Management + // + // Account Management // /** - * Adds a new account to ... + * Adds a new account to the default (first) HD seed phrase Keyring. * * @returns {} keyState */ @@ -530,6 +518,8 @@ module.exports = class MetamaskController extends EventEmitter { * * Used when creating a first vault, to allow confirmation. * Also used when revealing the seed words in the confirmation view. + * + * @param {Function} cb - A callback called on completion. */ placeSeedWords (cb) { @@ -549,6 +539,8 @@ module.exports = class MetamaskController extends EventEmitter { * Validity: seed phrase restores the accounts belonging to the current vault. * * Called when the first account is created and on unlocking the vault. + * + * @returns {Promise<string>} Seed phrase to be confirmed by the user. */ async verifySeedPhrase () { @@ -579,6 +571,7 @@ module.exports = class MetamaskController extends EventEmitter { * * The seed phrase remains available in the background process. * + * @param {function} cb Callback function called with the current address. */ clearSeedWordCache (cb) { this.configManager.setSeedWords(null) @@ -586,9 +579,13 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * ? + * Clears the transaction history, to allow users to force-reset their nonces. + * Mostly used in development environments, when networks are restarted with + * the same network ID. + * + * @returns Promise<string> The current selected address. */ - async resetAccount (cb) { + async resetAccount () { const selectedAddress = this.preferencesController.getSelectedAddress() this.txController.wipeTransactions(selectedAddress) @@ -600,11 +597,13 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * Imports an account ... ? + * Imports an account with the specified import strategy. + * These are defined in app/scripts/account-import-strategies + * Each strategy represents a different way of serializing an Ethereum key pair. * - * @param {} strategy - * @param {} args - * @param {} cb + * @param {string} strategy - A unique identifier for an account import strategy. + * @param {any} args - The data required by that strategy to import an account. + * @param {Function} cb - A callback function called with a state update on success. */ importAccountWithStrategy (strategy, args, cb) { accountImporter.importAccount(strategy, args) @@ -618,13 +617,42 @@ module.exports = class MetamaskController extends EventEmitter { } // --------------------------------------------------------------------------- - // Identity Management (sign) + // Identity Management (signature operations) + + // eth_sign methods: + + /** + * Called when a Dapp uses the eth_sign method, to request user approval. + * eth_sign is a pure signature of arbitrary data. It is on a deprecation + * path, since this data can be a transaction, or can leak private key + * information. + * + * @param {Object} msgParams - The params passed to eth_sign. + * @param {Function} cb = The callback function called with the signature. + */ + newUnsignedMessage (msgParams, cb) { + const msgId = this.messageManager.addUnapprovedMessage(msgParams) + this.sendUpdate() + this.opts.showUnconfirmedMessage() + this.messageManager.once(`${msgId}:finished`, (data) => { + switch (data.status) { + case 'signed': + return cb(null, data.rawSig) + case 'rejected': + return cb(new Error('MetaMask Message Signature: User denied message signature.')) + default: + return cb(new Error(`MetaMask Message Signature: Unknown problem: ${JSON.stringify(msgParams)}`)) + } + }) + } /** - * @param {} msgParams - * @param {} cb + * Signifies user intent to complete an eth_sign method. + * + * @param {Object} msgParams The params passed to eth_call. + * @returns {Promise<Object>} Full state update. */ - signMessage (msgParams, cb) { + signMessage (msgParams) { log.info('MetaMaskController - signMessage') const msgId = msgParams.metamaskId @@ -643,14 +671,37 @@ module.exports = class MetamaskController extends EventEmitter { }) } - // Prefixed Style Message Signing Methods: + /** + * Used to cancel a message submitted via eth_sign. + * + * @param {string} msgId - The id of the message to cancel. + */ + cancelMessage (msgId, cb) { + const messageManager = this.messageManager + messageManager.rejectMsg(msgId) + if (cb && typeof cb === 'function') { + cb(null, this.getState()) + } + } + + // personal_sign methods: /** + * Called when a dapp uses the personal_sign method. + * This is identical to the Geth eth_sign method, and may eventually replace + * eth_sign. * - * @param {} msgParams - * @param {} cb + * We currently define our eth_sign and personal_sign mostly for legacy Dapps. + * + * @param {Object} msgParams - The params of the message to sign & return to the Dapp. + * @param {Function} cb - The callback function called with the signature. + * Passed back to the requesting Dapp. */ - approvePersonalMessage (msgParams, cb) { + newUnsignedPersonalMessage (msgParams, cb) { + if (!msgParams.from) { + return cb(new Error('MetaMask Message Signature: from field is required.')) + } + const msgId = this.personalMessageManager.addUnapprovedMessage(msgParams) this.sendUpdate() this.opts.showUnconfirmedMessage() @@ -659,7 +710,7 @@ module.exports = class MetamaskController extends EventEmitter { case 'signed': return cb(null, data.rawSig) case 'rejected': - return cb(new Error('MetaMask Message Signature: User denied transaction signature.')) + return cb(new Error('MetaMask Message Signature: User denied message signature.')) default: return cb(new Error(`MetaMask Message Signature: Unknown problem: ${JSON.stringify(msgParams)}`)) } @@ -667,7 +718,11 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * @param {} msgParams + * Signifies a user's approval to sign a personal_sign message in queue. + * Triggers signing, and the callback function from newUnsignedPersonalMessage. + * + * @param {Object} msgParams - The params of the message to sign & return to the Dapp. + * @returns {Promise<Object>} - A full state update. */ signPersonalMessage (msgParams) { log.info('MetaMaskController - signPersonalMessage') @@ -688,7 +743,54 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * @param {} msgParams + * Used to cancel a personal_sign type message. + * @param {string} msgId - The ID of the message to cancel. + * @param {Function} cb - The callback function called with a full state update. + */ + cancelPersonalMessage (msgId, cb) { + const messageManager = this.personalMessageManager + messageManager.rejectMsg(msgId) + if (cb && typeof cb === 'function') { + cb(null, this.getState()) + } + } + + // eth_signTypedData methods + + /** + * Called when a dapp uses the eth_signTypedData method, per EIP 712. + * + * @param {Object} msgParams - The params passed to eth_signTypedData. + * @param {Function} cb - The callback function, called with the signature. + */ + newUnsignedTypedMessage (msgParams, cb) { + let msgId + try { + msgId = this.typedMessageManager.addUnapprovedMessage(msgParams) + this.sendUpdate() + this.opts.showUnconfirmedMessage() + } catch (e) { + return cb(e) + } + + this.typedMessageManager.once(`${msgId}:finished`, (data) => { + switch (data.status) { + case 'signed': + return cb(null, data.rawSig) + case 'rejected': + return cb(new Error('MetaMask Message Signature: User denied message signature.')) + default: + return cb(new Error(`MetaMask Message Signature: Unknown problem: ${JSON.stringify(msgParams)}`)) + } + }) + } + + /** + * The method for a user approving a call to eth_signTypedData, per EIP 712. + * Triggers the callback in newUnsignedTypedMessage. + * + * @param {Object} msgParams - The params passed to eth_signTypedData. + * @returns {Object} Full state update. */ signTypedMessage (msgParams) { log.info('MetaMaskController - signTypedMessage') @@ -708,12 +810,30 @@ module.exports = class MetamaskController extends EventEmitter { }) } + /** + * Used to cancel a eth_signTypedData type message. + * @param {string} msgId - The ID of the message to cancel. + * @param {Function} cb - The callback function called with a full state update. + */ + cancelTypedMessage (msgId, cb) { + const messageManager = this.typedMessageManager + messageManager.rejectMsg(msgId) + if (cb && typeof cb === 'function') { + cb(null, this.getState()) + } + } + // --------------------------------------------------------------------------- - // Account Restauration + // MetaMask Version 3 Migration Account Restauration Methods /** - * ? + * A legacy method (probably dead code) that was used when we swapped out our + * key management library that we depended on. * + * Described in: + * https://medium.com/metamask/metamask-3-migration-guide-914b79533cdd + * + * @deprecated * @param {} migratorOutput */ restoreOldVaultAccounts (migratorOutput) { @@ -723,8 +843,26 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * ? + * A legacy method used to record user confirmation that they understand + * that some of their accounts have been recovered but should be backed up. + * + * @deprecated + * @param {Function} cb - A callback function called with a full state update. + */ + markAccountsFound (cb) { + this.configManager.setLostAccounts([]) + this.sendUpdate() + cb(null, this.getState()) + } + + /** + * A legacy method (probably dead code) that was used when we swapped out our + * key management library that we depended on. + * + * Described in: + * https://medium.com/metamask/metamask-3-migration-guide-914b79533cdd * + * @deprecated * @param {} migratorOutput */ restoreOldLostAccounts (migratorOutput) { @@ -737,12 +875,23 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * Import (lost) Accounts + * An account object + * @typedef Account + * @property string privateKey - The private key of the account. + */ + + /** + * Probably no longer needed, related to the Version 3 migration. + * Imports a hash of accounts to private keys into the vault. * - * @param {Object} {lostAccounts} @Array accounts <{ address, privateKey }> + * Described in: + * https://medium.com/metamask/metamask-3-migration-guide-914b79533cdd * * Uses the array's private keys to create a new Simple Key Pair keychain * and add it to the keyring controller. + * @deprecated + * @param {Account[]} lostAccounts - + * @returns {Keyring[]} An array of the restored keyrings. */ importLostAccounts ({ lostAccounts }) { const privKeys = lostAccounts.map(acct => acct.privateKey) @@ -756,113 +905,37 @@ module.exports = class MetamaskController extends EventEmitter { // END (VAULT / KEYRING RELATED METHODS) //============================================================================= -// - -//============================================================================= -// MESSAGES -//============================================================================= - + /** + * Allows a user to try to speed up a transaction by retrying it + * with higher gas. + * + * @param {string} txId - The ID of the transaction to speed up. + * @param {Function} cb - The callback function called with a full state update. + */ async retryTransaction (txId, cb) { await this.txController.retryTransaction(txId) const state = await this.getState() return state } +//============================================================================= +// PASSWORD MANAGEMENT +//============================================================================= - newUnsignedMessage (msgParams, cb) { - const msgId = this.messageManager.addUnapprovedMessage(msgParams) - this.sendUpdate() - this.opts.showUnconfirmedMessage() - this.messageManager.once(`${msgId}:finished`, (data) => { - switch (data.status) { - case 'signed': - return cb(null, data.rawSig) - case 'rejected': - return cb(new Error('MetaMask Message Signature: User denied message signature.')) - default: - return cb(new Error(`MetaMask Message Signature: Unknown problem: ${JSON.stringify(msgParams)}`)) - } - }) - } - - newUnsignedPersonalMessage (msgParams, cb) { - if (!msgParams.from) { - return cb(new Error('MetaMask Message Signature: from field is required.')) - } - - const msgId = this.personalMessageManager.addUnapprovedMessage(msgParams) - this.sendUpdate() - this.opts.showUnconfirmedMessage() - this.personalMessageManager.once(`${msgId}:finished`, (data) => { - switch (data.status) { - case 'signed': - return cb(null, data.rawSig) - case 'rejected': - return cb(new Error('MetaMask Message Signature: User denied message signature.')) - default: - return cb(new Error(`MetaMask Message Signature: Unknown problem: ${JSON.stringify(msgParams)}`)) - } - }) - } - - newUnsignedTypedMessage (msgParams, cb) { - let msgId - try { - msgId = this.typedMessageManager.addUnapprovedMessage(msgParams) - this.sendUpdate() - this.opts.showUnconfirmedMessage() - } catch (e) { - return cb(e) - } - - this.typedMessageManager.once(`${msgId}:finished`, (data) => { - switch (data.status) { - case 'signed': - return cb(null, data.rawSig) - case 'rejected': - return cb(new Error('MetaMask Message Signature: User denied message signature.')) - default: - return cb(new Error(`MetaMask Message Signature: Unknown problem: ${JSON.stringify(msgParams)}`)) - } - }) - } - - cancelMessage (msgId, cb) { - const messageManager = this.messageManager - messageManager.rejectMsg(msgId) - if (cb && typeof cb === 'function') { - cb(null, this.getState()) - } - } - - cancelPersonalMessage (msgId, cb) { - const messageManager = this.personalMessageManager - messageManager.rejectMsg(msgId) - if (cb && typeof cb === 'function') { - cb(null, this.getState()) - } - } - - cancelTypedMessage (msgId, cb) { - const messageManager = this.typedMessageManager - messageManager.rejectMsg(msgId) - if (cb && typeof cb === 'function') { - cb(null, this.getState()) - } - } - - markAccountsFound (cb) { - this.configManager.setLostAccounts([]) - this.sendUpdate() - cb(null, this.getState()) - } - + /** + * Allows a user to begin the seed phrase recovery process. + * @param {Function} cb - A callback function called when complete. + */ markPasswordForgotten(cb) { this.configManager.setPasswordForgotten(true) this.sendUpdate() cb() } + /** + * Allows a user to end the seed phrase recovery process. + * @param {Function} cb - A callback function called when complete. + */ unMarkPasswordForgotten(cb) { this.configManager.setPasswordForgotten(false) this.sendUpdate() @@ -873,6 +946,13 @@ module.exports = class MetamaskController extends EventEmitter { // SETUP //============================================================================= + /** + * Used to create a multiplexed stream for connecting to an untrusted context + * like a Dapp or other extension. + * @param {*} connectionStream - The Duplex stream to connect to. + * @param {string} originDomain - The domain requesting the stream, which + * may trigger a blacklist reload. + */ setupUntrustedCommunication (connectionStream, originDomain) { // Check if new connection is blacklisted if (this.blacklistController.checkForPhishing(originDomain)) { @@ -888,6 +968,16 @@ module.exports = class MetamaskController extends EventEmitter { this.setupPublicConfig(mux.createStream('publicConfig')) } + /** + * Used to create a multiplexed stream for connecting to a trusted context, + * like our own user interfaces, which have the provider APIs, but also + * receive the exported API from this controller, which includes trusted + * functions, like the ability to approve transactions or sign messages. + * + * @param {*} connectionStream - The duplex stream to connect to. + * @param {string} originDomain - The domain requesting the connection, + * used in logging and error reporting. + */ setupTrustedCommunication (connectionStream, originDomain) { // setup multiplexing const mux = setupMultiplex(connectionStream) @@ -896,12 +986,25 @@ module.exports = class MetamaskController extends EventEmitter { this.setupProviderConnection(mux.createStream('provider'), originDomain) } + /** + * Called when we detect a suspicious domain. Requests the browser redirects + * to our anti-phishing page. + * + * @private + * @param {*} connectionStream - The duplex stream to the per-page script, + * for sending the reload attempt to. + * @param {string} hostname - The URL that triggered the suspicion. + */ sendPhishingWarning (connectionStream, hostname) { const mux = setupMultiplex(connectionStream) const phishingStream = mux.createStream('phishing') phishingStream.write({ hostname }) } + /** + * A method for providing our API over a stream using Dnode. + * @param {*} outStream - The stream to provide our API over. + */ setupControllerConnection (outStream) { const api = this.getApi() const dnode = Dnode(api) @@ -920,6 +1023,11 @@ module.exports = class MetamaskController extends EventEmitter { }) } + /** + * A method for serving our ethereum provider over a given stream. + * @param {*} outStream - The stream to provide over. + * @param {string} origin - The URI of the requesting resource. + */ setupProviderConnection (outStream, origin) { // setup json rpc engine stack const engine = new RpcEngine() @@ -949,6 +1057,16 @@ module.exports = class MetamaskController extends EventEmitter { ) } + /** + * A method for providing our public config info over a stream. + * This includes info we like to be synchronous if possible, like + * the current selected account, and network ID. + * + * Since synchronous methods have been deprecated in web3, + * this is a good candidate for deprecation. + * + * @param {*} outStream - The stream to provide public config over. + */ setupPublicConfig (outStream) { pump( asStream(this.publicConfigStore), @@ -959,10 +1077,21 @@ module.exports = class MetamaskController extends EventEmitter { ) } + /** + * A method for emitting the full MetaMask state to all registered listeners. + * @private + */ privateSendUpdate () { this.emit('update', this.getState()) } + /** + * A method for estimating a good gas price at recent prices. + * Returns the lowest price that would have been included in + * 50% of recent blocks. + * + * @returns {string} A hex representation of the suggested wei gas price. + */ getGasPrice () { const { recentBlocksController } = this const { recentBlocks } = recentBlocksController.store.getState() @@ -996,6 +1125,11 @@ module.exports = class MetamaskController extends EventEmitter { // Log blocks + /** + * A method for setting the user's preferred display currency. + * @param {string} currencyCode - The code of the preferred currency. + * @param {Function} cb - A callback function returning currency info. + */ setCurrentCurrency (currencyCode, cb) { try { this.currencyController.setCurrentCurrency(currencyCode) @@ -1011,6 +1145,13 @@ module.exports = class MetamaskController extends EventEmitter { } } + /** + * A method for forwarding the user to the easiest way to obtain ether, + * or the network "gas" currency, for the current selected network. + * + * @param {string} address - The address to fund. + * @param {string} amount - The amount of ether desired, as a base 10 string. + */ buyEth (address, amount) { if (!amount) amount = '5' const network = this.networkController.getNetworkState() @@ -1018,18 +1159,33 @@ module.exports = class MetamaskController extends EventEmitter { if (url) this.platform.openWindow({ url }) } + /** + * A method for triggering a shapeshift currency transfer. + * @param {string} depositAddress - The address to deposit to. + * @property {string} depositType - An abbreviation of the type of crypto currency to be deposited. + */ createShapeShiftTx (depositAddress, depositType) { this.shapeshiftController.createShapeShiftTx(depositAddress, depositType) } // network - async setCustomRpc (rpcTarget, rpcList) { + /** + * A method for selecting a custom URL for an ethereum RPC provider. + * @param {string} rpcTarget - A URL for a valid Ethereum RPC API. + * @returns {Promise<String>} - The RPC Target URL confirmed. + */ + async setCustomRpc (rpcTarget) { this.networkController.setRpcTarget(rpcTarget) await this.preferencesController.updateFrequentRpcList(rpcTarget) return rpcTarget } + /** + * Sets whether or not to use the blockie identicon format. + * @param {boolean} val - True for bockie, false for jazzicon. + * @param {Function} cb - A callback function called when complete. + */ setUseBlockie (val, cb) { try { this.preferencesController.setUseBlockie(val) @@ -1039,6 +1195,11 @@ module.exports = class MetamaskController extends EventEmitter { } } + /** + * A method for setting a user's current locale, affecting the language rendered. + * @param {string} key - Locale identifier. + * @param {Function} cb - A callback function called when complete. + */ setCurrentLocale (key, cb) { try { this.preferencesController.setCurrentLocale(key) @@ -1048,6 +1209,11 @@ module.exports = class MetamaskController extends EventEmitter { } } + /** + * A method for initializing storage the first time. + * @param {Object} initState - The default state to initialize with. + * @private + */ recordFirstTimeInfo (initState) { if (!('firstTimeInfo' in initState)) { initState.firstTimeInfo = { @@ -1057,4 +1223,22 @@ module.exports = class MetamaskController extends EventEmitter { } } + /** + * A method for recording whether the MetaMask user interface is open or not. + * @private + * @param {boolean} open + */ + set isClientOpen (open) { + this._isClientOpen = open + this.isClientOpenAndUnlocked = this.getState().isUnlocked && open + } + + /** + * A method for activating the retrieval of price data, which should only be fetched when the UI is visible. + * @private + * @param {boolean} active - True if price data should be getting fetched. + */ + set isClientOpenAndUnlocked (active) { + this.tokenRatesController.isActive = active + } } diff --git a/app/scripts/migrations/013.js b/app/scripts/migrations/013.js index 8f11e510e..15a9b28d4 100644 --- a/app/scripts/migrations/013.js +++ b/app/scripts/migrations/013.js @@ -27,8 +27,11 @@ module.exports = { function transformState (state) { const newState = state - if (newState.config.provider.type === 'testnet') { - newState.config.provider.type = 'ropsten' + const { config } = newState + if ( config && config.provider ) { + if (config.provider.type === 'testnet') { + newState.config.provider.type = 'ropsten' + } } return newState } diff --git a/app/scripts/migrations/015.js b/app/scripts/migrations/015.js index 4b839580b..5e2f9e63b 100644 --- a/app/scripts/migrations/015.js +++ b/app/scripts/migrations/015.js @@ -28,11 +28,14 @@ module.exports = { function transformState (state) { const newState = state - const transactions = newState.TransactionController.transactions - newState.TransactionController.transactions = transactions.map((txMeta) => { - if (!txMeta.err) return txMeta - else if (txMeta.err.message === 'Gave up submitting tx.') txMeta.status = 'failed' - return txMeta - }) + const { TransactionController } = newState + if (TransactionController && TransactionController.transactions) { + const transactions = TransactionController.transactions + newState.TransactionController.transactions = transactions.map((txMeta) => { + if (!txMeta.err) return txMeta + else if (txMeta.err.message === 'Gave up submitting tx.') txMeta.status = 'failed' + return txMeta + }) + } return newState } diff --git a/app/scripts/migrations/016.js b/app/scripts/migrations/016.js index 4fc534f1c..048c7a40e 100644 --- a/app/scripts/migrations/016.js +++ b/app/scripts/migrations/016.js @@ -28,14 +28,18 @@ module.exports = { function transformState (state) { const newState = state - const transactions = newState.TransactionController.transactions - newState.TransactionController.transactions = transactions.map((txMeta) => { - if (!txMeta.err) return txMeta - if (txMeta.err === 'transaction with the same hash was already imported.') { - txMeta.status = 'submitted' - delete txMeta.err - } - return txMeta - }) + const { TransactionController } = newState + if (TransactionController && TransactionController.transactions) { + const transactions = newState.TransactionController.transactions + + newState.TransactionController.transactions = transactions.map((txMeta) => { + if (!txMeta.err) return txMeta + if (txMeta.err === 'transaction with the same hash was already imported.') { + txMeta.status = 'submitted' + delete txMeta.err + } + return txMeta + }) + } return newState } diff --git a/app/scripts/migrations/017.js b/app/scripts/migrations/017.js index 24959cd3a..5f6d906d6 100644 --- a/app/scripts/migrations/017.js +++ b/app/scripts/migrations/017.js @@ -27,14 +27,17 @@ module.exports = { function transformState (state) { const newState = state - const transactions = newState.TransactionController.transactions - newState.TransactionController.transactions = transactions.map((txMeta) => { - if (!txMeta.status === 'failed') return txMeta - if (txMeta.retryCount > 0 && txMeta.retryCount < 2) { - txMeta.status = 'submitted' - delete txMeta.err - } - return txMeta - }) + const { TransactionController } = newState + if (TransactionController && TransactionController.transactions) { + const transactions = newState.TransactionController.transactions + newState.TransactionController.transactions = transactions.map((txMeta) => { + if (!txMeta.status === 'failed') return txMeta + if (txMeta.retryCount > 0 && txMeta.retryCount < 2) { + txMeta.status = 'submitted' + delete txMeta.err + } + return txMeta + }) + } return newState } diff --git a/app/scripts/migrations/018.js b/app/scripts/migrations/018.js index d27fe3f46..bea1fe3da 100644 --- a/app/scripts/migrations/018.js +++ b/app/scripts/migrations/018.js @@ -29,24 +29,27 @@ module.exports = { function transformState (state) { const newState = state - const transactions = newState.TransactionController.transactions - newState.TransactionController.transactions = transactions.map((txMeta) => { - // no history: initialize - if (!txMeta.history || txMeta.history.length === 0) { - const snapshot = txStateHistoryHelper.snapshotFromTxMeta(txMeta) - txMeta.history = [snapshot] + const { TransactionController } = newState + if (TransactionController && TransactionController.transactions) { + const transactions = newState.TransactionController.transactions + newState.TransactionController.transactions = transactions.map((txMeta) => { + // no history: initialize + if (!txMeta.history || txMeta.history.length === 0) { + const snapshot = txStateHistoryHelper.snapshotFromTxMeta(txMeta) + txMeta.history = [snapshot] + return txMeta + } + // has history: migrate + const newHistory = ( + txStateHistoryHelper.migrateFromSnapshotsToDiffs(txMeta.history) + // remove empty diffs + .filter((entry) => { + return !Array.isArray(entry) || entry.length > 0 + }) + ) + txMeta.history = newHistory return txMeta - } - // has history: migrate - const newHistory = ( - txStateHistoryHelper.migrateFromSnapshotsToDiffs(txMeta.history) - // remove empty diffs - .filter((entry) => { - return !Array.isArray(entry) || entry.length > 0 - }) - ) - txMeta.history = newHistory - return txMeta - }) + }) + } return newState } diff --git a/app/scripts/migrations/019.js b/app/scripts/migrations/019.js index 072c96370..ce5da6859 100644 --- a/app/scripts/migrations/019.js +++ b/app/scripts/migrations/019.js @@ -29,32 +29,36 @@ module.exports = { function transformState (state) { const newState = state - const transactions = newState.TransactionController.transactions + const { TransactionController } = newState + if (TransactionController && TransactionController.transactions) { - newState.TransactionController.transactions = transactions.map((txMeta, _, txList) => { - if (txMeta.status !== 'submitted') return txMeta + const transactions = newState.TransactionController.transactions - const confirmedTxs = txList.filter((tx) => tx.status === 'confirmed') - .filter((tx) => tx.txParams.from === txMeta.txParams.from) - .filter((tx) => tx.metamaskNetworkId.from === txMeta.metamaskNetworkId.from) - const highestConfirmedNonce = getHighestNonce(confirmedTxs) + newState.TransactionController.transactions = transactions.map((txMeta, _, txList) => { + if (txMeta.status !== 'submitted') return txMeta - const pendingTxs = txList.filter((tx) => tx.status === 'submitted') - .filter((tx) => tx.txParams.from === txMeta.txParams.from) - .filter((tx) => tx.metamaskNetworkId.from === txMeta.metamaskNetworkId.from) - const highestContinuousNonce = getHighestContinuousFrom(pendingTxs, highestConfirmedNonce) + const confirmedTxs = txList.filter((tx) => tx.status === 'confirmed') + .filter((tx) => tx.txParams.from === txMeta.txParams.from) + .filter((tx) => tx.metamaskNetworkId.from === txMeta.metamaskNetworkId.from) + const highestConfirmedNonce = getHighestNonce(confirmedTxs) - const maxNonce = Math.max(highestContinuousNonce, highestConfirmedNonce) + const pendingTxs = txList.filter((tx) => tx.status === 'submitted') + .filter((tx) => tx.txParams.from === txMeta.txParams.from) + .filter((tx) => tx.metamaskNetworkId.from === txMeta.metamaskNetworkId.from) + const highestContinuousNonce = getHighestContinuousFrom(pendingTxs, highestConfirmedNonce) - if (parseInt(txMeta.txParams.nonce, 16) > maxNonce + 1) { - txMeta.status = 'failed' - txMeta.err = { - message: 'nonce too high', - note: 'migration 019 custom error', + const maxNonce = Math.max(highestContinuousNonce, highestConfirmedNonce) + + if (parseInt(txMeta.txParams.nonce, 16) > maxNonce + 1) { + txMeta.status = 'failed' + txMeta.err = { + message: 'nonce too high', + note: 'migration 019 custom error', + } } - } - return txMeta - }) + return txMeta + }) + } return newState } diff --git a/app/scripts/migrations/022.js b/app/scripts/migrations/022.js index c3c0d53ef..1fbe241e6 100644 --- a/app/scripts/migrations/022.js +++ b/app/scripts/migrations/022.js @@ -28,12 +28,15 @@ module.exports = { function transformState (state) { const newState = state - const transactions = newState.TransactionController.transactions - - newState.TransactionController.transactions = transactions.map((txMeta) => { - if (txMeta.status !== 'submitted' || txMeta.submittedTime) return txMeta - txMeta.submittedTime = (new Date()).getTime() - return txMeta - }) + const { TransactionController } = newState + if (TransactionController && TransactionController.transactions) { + const transactions = newState.TransactionController.transactions + + newState.TransactionController.transactions = transactions.map((txMeta) => { + if (txMeta.status !== 'submitted' || txMeta.submittedTime) return txMeta + txMeta.submittedTime = (new Date()).getTime() + return txMeta + }) + } return newState } diff --git a/app/scripts/migrations/023.js b/app/scripts/migrations/023.js index bce0a5bea..151496b06 100644 --- a/app/scripts/migrations/023.js +++ b/app/scripts/migrations/023.js @@ -28,23 +28,27 @@ module.exports = { function transformState (state) { const newState = state - const transactions = newState.TransactionController.transactions - - if (transactions.length <= 40) return newState - - let reverseTxList = transactions.reverse() - let stripping = true - while (reverseTxList.length > 40 && stripping) { - let txIndex = reverseTxList.findIndex((txMeta) => { - return (txMeta.status === 'failed' || - txMeta.status === 'rejected' || - txMeta.status === 'confirmed' || - txMeta.status === 'dropped') - }) - if (txIndex < 0) stripping = false - else reverseTxList.splice(txIndex, 1) - } - newState.TransactionController.transactions = reverseTxList.reverse() + const { TransactionController } = newState + if (TransactionController && TransactionController.transactions) { + const transactions = newState.TransactionController.transactions + + if (transactions.length <= 40) return newState + + let reverseTxList = transactions.reverse() + let stripping = true + while (reverseTxList.length > 40 && stripping) { + let txIndex = reverseTxList.findIndex((txMeta) => { + return (txMeta.status === 'failed' || + txMeta.status === 'rejected' || + txMeta.status === 'confirmed' || + txMeta.status === 'dropped') + }) + if (txIndex < 0) stripping = false + else reverseTxList.splice(txIndex, 1) + } + + newState.TransactionController.transactions = reverseTxList.reverse() + } return newState } diff --git a/app/scripts/platforms/sw.js b/app/scripts/platforms/sw.js index 007d8dc5b..56c5f2774 100644 --- a/app/scripts/platforms/sw.js +++ b/app/scripts/platforms/sw.js @@ -1,20 +1,25 @@ - class SwPlatform { - - // - // Public - // - + /** + * Reloads the platform + */ reload () { - // you cant actually do this - global.location.reload() + // TODO: you can't actually do this + /** @type {any} */ (global).location.reload() } - openWindow ({ url }) { - // this doesnt actually work - global.open(url, '_blank') + /** + * Opens a window + * @param {{url: string}} opts - The window options + */ + openWindow (opts) { + // TODO: this doesn't actually work + /** @type {any} */ (global).open(opts.url, '_blank') } + /** + * Returns the platform version + * @returns {string} + */ getVersion () { return '<unable to read version>' } diff --git a/app/scripts/platforms/window.js b/app/scripts/platforms/window.js index 1527c008b..943b2a703 100644 --- a/app/scripts/platforms/window.js +++ b/app/scripts/platforms/window.js @@ -1,18 +1,23 @@ - class WindowPlatform { - - // - // Public - // - + /** + * Reload the platform + */ reload () { - global.location.reload() + /** @type {any} */ (global).location.reload() } - openWindow ({ url }) { - global.open(url, '_blank') + /** + * Opens a window + * @param {{url: string}} opts - The window options + */ + openWindow (opts) { + /** @type {any} */ (global).open(opts.url, '_blank') } + /** + * Returns the platform version + * @returns {string} + */ getVersion () { return '<unable to read version>' } diff --git a/app/scripts/popup-core.js b/app/scripts/popup-core.js index 2e4334bb1..6325b8a8d 100644 --- a/app/scripts/popup-core.js +++ b/app/scripts/popup-core.js @@ -7,10 +7,14 @@ const launchMetamaskUi = require('../../ui') const StreamProvider = require('web3-stream-provider') const setupMultiplex = require('./lib/stream-utils.js').setupMultiplex - module.exports = initializePopup - +/** + * Asynchronously initializes the MetaMask popup UI + * + * @param {{ container: Element, connectionStream: * }} config Popup configuration object + * @param {Function} cb Called when initialization is complete + */ function initializePopup ({ container, connectionStream }, cb) { // setup app async.waterfall([ @@ -19,6 +23,12 @@ function initializePopup ({ container, connectionStream }, cb) { ], cb) } +/** + * Establishes streamed connections to background scripts and a Web3 provider + * + * @param {PortDuplexStream} connectionStream PortStream instance establishing a background connection + * @param {Function} cb Called when controller connection is established + */ function connectToAccountManager (connectionStream, cb) { // setup communication with background // setup multiplexing @@ -28,6 +38,11 @@ function connectToAccountManager (connectionStream, cb) { setupWeb3Connection(mx.createStream('provider')) } +/** + * Establishes a streamed connection to a Web3 provider + * + * @param {PortDuplexStream} connectionStream PortStream instance establishing a background connection + */ function setupWeb3Connection (connectionStream) { var providerStream = new StreamProvider() providerStream.pipe(connectionStream).pipe(providerStream) @@ -38,6 +53,12 @@ function setupWeb3Connection (connectionStream) { global.eth = new Eth(providerStream) } +/** + * Establishes a streamed connection to the background account manager + * + * @param {PortDuplexStream} connectionStream PortStream instance establishing a background connection + * @param {Function} cb Called when the remote account manager connection is established + */ function setupControllerConnection (connectionStream, cb) { // this is a really sneaky way of adding EventEmitter api // to a bi-directional dnode instance diff --git a/app/scripts/ui.js b/app/scripts/ui.js index 13c7ac5ec..bdab29c1e 100644 --- a/app/scripts/ui.js +++ b/app/scripts/ui.js @@ -3,12 +3,14 @@ const OldMetaMaskUiCss = require('../../old-ui/css') const NewMetaMaskUiCss = require('../../ui/css') const startPopup = require('./popup-core') const PortStream = require('./lib/port-stream.js') -const isPopupOrNotification = require('./lib/is-popup-or-notification') +const { getEnvironmentType } = require('./lib/util') +const { ENVIRONMENT_TYPE_NOTIFICATION } = require('./lib/enums') const extension = require('extensionizer') const ExtensionPlatform = require('./platforms/extension') const NotificationManager = require('./lib/notification-manager') const notificationManager = new NotificationManager() const setupRaven = require('./lib/setupRaven') +const log = require('loglevel') start().catch(log.error) @@ -26,7 +28,7 @@ async function start() { // injectCss(css) // identify window type (popup, notification) - const windowType = isPopupOrNotification() + const windowType = getEnvironmentType(window.location.href) global.METAMASK_UI_TYPE = windowType closePopupIfOpen(windowType) @@ -68,7 +70,7 @@ async function start() { function closePopupIfOpen (windowType) { - if (windowType !== 'notification') { + if (windowType !== ENVIRONMENT_TYPE_NOTIFICATION) { // should close only chrome popup notificationManager.closePopup() } diff --git a/development/mock-dev.js b/development/mock-dev.js index a1fb3a86d..f332633d5 100644 --- a/development/mock-dev.js +++ b/development/mock-dev.js @@ -36,15 +36,28 @@ log.setLevel('debug') // const qs = require('qs') -let queryString = qs.parse(window.location.href.split('#')[1]) -let selectedView = queryString.view || 'first time' +const routerPath = window.location.href.split('#')[1] +let queryString = {} +let selectedView + +if (routerPath) { + queryString = qs.parse(routerPath.split('?')[1]) +} + +selectedView = queryString.view || 'first time' const firstState = states[selectedView] updateQueryParams(selectedView) -function updateQueryParams(newView) { +function updateQueryParams (newView) { queryString.view = newView const params = qs.stringify(queryString) - window.location.href = window.location.href.split('#')[0] + `#${params}` + const locationPaths = window.location.href.split('#') + const routerPath = locationPaths[1] || '' + const newPath = locationPaths[0] + '#' + routerPath.split('?')[0] + `?${params}` + + if (window.location.href !== newPath) { + window.location.href = newPath + } } // diff --git a/development/states/confirm-new-ui.json b/development/states/confirm-new-ui.json index ae3098ecb..71ccbd96c 100644 --- a/development/states/confirm-new-ui.json +++ b/development/states/confirm-new-ui.json @@ -151,5 +151,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/states/currency-localization.json b/development/states/currency-localization.json new file mode 100644 index 000000000..302e24c11 --- /dev/null +++ b/development/states/currency-localization.json @@ -0,0 +1,134 @@ +{ + "metamask": { + "isInitialized": true, + "isUnlocked": true, + "featureFlags": {"betaUI": true}, + "rpcTarget": "https://rawtestrpc.metamask.io/", + "identities": { + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": { + "address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "name": "Send Account 1" + }, + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": { + "address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "name": "Send Account 2" + }, + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d": { + "address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d", + "name": "Send Account 3" + }, + "0xd85a4b6a394794842887b8284293d69163007bbb": { + "address": "0xd85a4b6a394794842887b8284293d69163007bbb", + "name": "Send Account 4" + } + }, + "unapprovedTxs": {}, + "currentCurrency": "USD", + "conversionRate": 19855, + "conversionDate": 1489013762, + "noActiveNotices": true, + "frequentRpcList": [], + "network": "3", + "accounts": { + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": { + "code": "0x", + "balance": "0x47c9d71831c76efe", + "nonce": "0x1b", + "address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825" + }, + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": { + "code": "0x", + "balance": "0x37452b1315889f80", + "nonce": "0xa", + "address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb" + }, + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d": { + "code": "0x", + "balance": "0x30c9d71831c76efe", + "nonce": "0x1c", + "address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" + }, + "0xd85a4b6a394794842887b8284293d69163007bbb": { + "code": "0x", + "balance": "0x0", + "nonce": "0x0", + "address": "0xd85a4b6a394794842887b8284293d69163007bbb" + } + }, + "addressBook": [ + { + "address": "0x06195827297c7a80a443b6894d3bdb8824b43896", + "name": "Address Book Account 1" + } + ], + "tokens": [], + "transactions": {}, + "selectedAddressTxList": [], + "unapprovedMsgs": {}, + "unapprovedMsgCount": 0, + "unapprovedPersonalMsgs": {}, + "unapprovedPersonalMsgCount": 0, + "keyringTypes": [ + "Simple Key Pair", + "HD Key Tree" + ], + "keyrings": [ + { + "type": "HD Key Tree", + "accounts": [ + "fdea65c8e26263f6d9a1b5de9555d2931a33b825", + "c5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "2f8d4a878cfa04a6e60d46362f5644deab66572d" + ] + }, + { + "type": "Simple Key Pair", + "accounts": [ + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825" + ] + } + ], + "selectedAddress": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "currentCurrency": "PHP", + "provider": { + "type": "testnet" + }, + "shapeShiftTxList": [], + "lostAccounts": [], + "send": { + "gasLimit": null, + "gasPrice": null, + "gasTotal": "0xb451dc41b578", + "tokenBalance": null, + "from": "", + "to": "", + "amount": "0x0", + "memo": "", + "errors": {}, + "maxModeOn": false, + "editingTransactionId": null + }, + "currentLocale": "en" + }, + "appState": { + "menuOpen": false, + "currentView": { + "name": "accountDetail", + "detailView": null, + "context": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc" + }, + "accountDetail": { + "subview": "transactions" + }, + "modal": { + "modalState": {}, + "previousModalState": {} + }, + "transForward": true, + "isLoading": false, + "warning": null, + "scrollToBottom": false, + "forgottenPassword": null + }, + "identities": {} +} diff --git a/development/states/send-edit.json b/development/states/send-edit.json index ae3098ecb..71ccbd96c 100644 --- a/development/states/send-edit.json +++ b/development/states/send-edit.json @@ -151,5 +151,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/states/send-new-ui.json b/development/states/send-new-ui.json index 1297a9139..4b2d20730 100644 --- a/development/states/send-new-ui.json +++ b/development/states/send-new-ui.json @@ -130,5 +130,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/states/tx-list-items.js b/development/states/tx-list-items.json index d567e3fed..43e6f4b90 100644 --- a/development/states/tx-list-items.js +++ b/development/states/tx-list-items.json @@ -124,5 +124,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/tools/.jsdoc.json b/development/tools/.jsdoc.json new file mode 100644 index 000000000..fd90bf89f --- /dev/null +++ b/development/tools/.jsdoc.json @@ -0,0 +1,25 @@ +{ + "tags": { + "allowUnknownTags": false + }, + "source": { + "include": "app/scripts/", + "includePattern": ".js$", + "excludePattern": "(node_modules/|docs)" + }, + "plugins": [ + "plugins/markdown" + ], + "opts": { + "template": "node_modules/radgrad-jsdoc-template/", + "encoding": "utf8", + "destination": "docs/jsdocs", + "recurse": true, + "verbose": true + }, + "templates": { + "cleverLinks": false, + "monospaceLinks": false + } +} + diff --git a/development/tools/README.md b/development/tools/README.md new file mode 100644 index 000000000..caef51fe6 --- /dev/null +++ b/development/tools/README.md @@ -0,0 +1,15 @@ +# Development Tools & Configurations + +This folder contains configuration files which are used by the the different +development-tools, like e.g. JsDoc. + + +## Appveyor + + +https://www.appveyor.com/docs/build-configuration/#alternative-yaml-file-location + +Withtin the configuration, point to a weblocation of a txt config file: + +https://ci.appveyor.com/project/lazaridiscom/mm-vault/settings +https://raw.githubusercontent.com/lazaridiscom/mm-vault/master/dev/tools/appveyor.txt diff --git a/development/tools/appveyor.txt b/development/tools/appveyor.txt new file mode 100644 index 000000000..4ed974079 --- /dev/null +++ b/development/tools/appveyor.txt @@ -0,0 +1,21 @@ +# Test against the latest version of this Node.js version +environment: + nodejs_version: "8" + +# Install scripts. (runs after repo cloning) +install: + # Get the latest stable version of Node.js or io.js + - ps: Install-Product node $env:nodejs_version + # install modules + - npm install + +# Post-install test scripts. +test_script: + # Output useful info for debugging. + - node --version + - npm --version + # run tests + - npm test + +# Don't actually build. +build: off diff --git a/docs/QA_Guide.md b/docs/QA_Guide.md new file mode 100644 index 000000000..0b7c0e023 --- /dev/null +++ b/docs/QA_Guide.md @@ -0,0 +1,48 @@ +# QA Guide + +Steps to mark a full pass of QA complete. +* Browsers: Opera, Chrome, Firefox, Edge. +* OS: Ubuntu, Mac OSX, Windows +* Load older version of MetaMask and attempt to simulate updating the extension. +* Open Developer Console in background and popup, inspect errors. +* Watch the state logs + * Transactions (unapproved txs -> rejected/submitted -> confirmed) + * Nonces/LocalNonces +* Vault integrity + * create vault + * Log out + * Log in again + * Log out + * Restore from seed + * Create a second account + * Import a loose account (not related to HD Wallet) + * Import old existing vault seed phrase (pref with test Ether) + * Download State Logs, Priv key file, seed phrase file. +* Send Ether + * by address + * by ens name +* Web3 API Stability + * Create a contract from a Ðapp (remix) + * Load a Ðapp that reads using events/logs (ENS) + * Connect to MEW/MyCypto + * Send a transaction from any Ðapp + - MEW + - EtherDelta + - Leeroy + - Aragon + - (https://tmashuang.github.io/demo-dapp) + * Check account balances +* Token Management + * create a token with tokenfactory (http://tokenfactory.surge.sh/#/factory) + * Add that token to the token view + * Send that token to another metamask address. + * confirm the token arrived. +* Send a transaction and sign a message (https://danfinlay.github.io/js-eth-personal-sign-examples/) for each keyring type + * hd keyring + * imported keyring +* Change network from mainnet → ropsten → rinkeby → localhost (ganache) +* Ganache set blocktime to simulate retryTx in MetaMask +* Copy public key to clipboard +* Export private key + +* Explore changes in master, target features that have been changed and break. diff --git a/docs/team.md b/docs/team.md new file mode 100644 index 000000000..72f9d3226 --- /dev/null +++ b/docs/team.md @@ -0,0 +1,78 @@ +# The Team + +Here is an overview of the current MetaMask team, and their primary roles and responsibilities, in the order they joined the team. + +## Core Team Members + +The core team maintains aspects of the main product (the extension) and the core libraries (the MetaMask Controller, provider-engine, etc). + +### Aaron Davis + +@kumavis +Founder / Technical Lead + +Especially in charge of connection to the blockchain. Wrote [provider-engine](https://github.com/MetaMask/provider-engine), and is currently working with @hermanjunge on our JavaScript light-client. + +### Dan Finlay + +@danfinlay +Software Engineer / Product Lead + +Focused on the deliverable, user-valuable aspects of MetaMask, including usability and documentation. Coordinates efforts between different branches of the team, and integrations with other projects. + +### Frankie Pangilinan + +@frankiebee +Software Engineer / Transaction Manager Lead + +Frankie contributes code throughout MetaMask, but has become especially specialized in the way MetaMask manages transactions. She is also the original lead of the [Mascara](https://github.com/MetaMask/mascara) project. + +### Kevin Serrano + +@Zanibas +Software Engineer / Project Management Lead + +Kevin is a software engineer, but also spends a lot of his time keeping the team's administrative operations running smoothly. + +### Thomas Huang + +@tmashuang +QA Engineer + +Thomas is the head of MetaMask Quality Assurance. He both takes the final pass of branches of code before we ship to production, and is also in charge of continuously improving our automated quality assurance process. + +### Christian Jeria + +@cjeria +User Experience Designer + +Christian is the lead of MetaMask's user experience. He is continuously designing prototypes, testing them with users, and refining them with our developers for production. + +### Paul Bouchon + +@bitpshr +Software Engineer + +The newest member of the team! Paul is currently being onboarded, and finding his niche within the team. + +## Laboratory Team Members + +These team members are working on projects that will benefit MetaMask, but are not directly working on the product itself. + +### Herman Junge + +@hermanjunge +Software Engineer + +Herman is currently leading the Mustekala project, a JavaScript, IPFS-based Ethereum light client. + +## Kyokan Team Members + +[Kyokan](http://kyokan.io/) is a consulting firm that has been working closely with the MetaMask team on the latest version of our user interface. Their team members are not members of ConsenSys LLC, but they contribute a lot to the project. + +- Daniel Tsui (@sdsui) +- Chi Kei Chan (@chikeichan) +- Dan Miller (@danjm) +- David Yoo (@yookd) +- Whymarrh Whitby (@whymarrh) + diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js new file mode 100644 index 000000000..7c0431431 --- /dev/null +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -0,0 +1,161 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import classnames from 'classnames' +import shuffle from 'lodash.shuffle' +import { compose } from 'recompose' +import Identicon from '../../../../ui/app/components/identicon' +import { confirmSeedWords, showModal } from '../../../../ui/app/actions' +import Breadcrumbs from './breadcrumbs' +import LoadingScreen from './loading-screen' +import { DEFAULT_ROUTE, INITIALIZE_BACKUP_PHRASE_ROUTE } from '../../../../ui/app/routes' + +class ConfirmSeedScreen extends Component { + static propTypes = { + isLoading: PropTypes.bool, + address: PropTypes.string, + seedWords: PropTypes.string, + confirmSeedWords: PropTypes.func, + history: PropTypes.object, + openBuyEtherModal: PropTypes.func, + }; + + static defaultProps = { + seedWords: '', + } + + constructor (props) { + super(props) + const { seedWords } = props + this.state = { + selectedSeeds: [], + shuffledSeeds: seedWords && shuffle(seedWords.split(' ')) || [], + } + } + + componentWillMount () { + const { seedWords, history } = this.props + + if (!seedWords) { + history.push(DEFAULT_ROUTE) + } + } + + handleClick () { + const { confirmSeedWords, history, openBuyEtherModal } = this.props + + confirmSeedWords() + .then(() => { + history.push(DEFAULT_ROUTE) + openBuyEtherModal() + }) + } + + render () { + const { seedWords, history } = this.props + const { selectedSeeds, shuffledSeeds } = this.state + const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') + + return ( + <div className="first-time-flow"> + { + this.props.isLoading + ? <LoadingScreen loadingMessage="Creating your new account" /> + : ( + <div className="first-view-main-wrapper"> + <div className="first-view-main"> + <div className="backup-phrase"> + <a + className="backup-phrase__back-button" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_BACKUP_PHRASE_ROUTE) + }} + href="#" + > + {`< Back`} + </a> + <Identicon address={this.props.address} diameter={70} /> + <div className="backup-phrase__content-wrapper"> + <div> + <div className="backup-phrase__title"> + Confirm your Secret Backup Phrase + </div> + <div className="backup-phrase__body-text"> + Please select each phrase in order to make sure it is correct. + </div> + <div className="backup-phrase__confirm-secret"> + {selectedSeeds.map(([_, word], i) => ( + <button + key={i} + className="backup-phrase__confirm-seed-option" + > + {word} + </button> + ))} + </div> + <div className="backup-phrase__confirm-seed-options"> + {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + + return ( + <button + key={i} + className={classnames('backup-phrase__confirm-seed-option', { + 'backup-phrase__confirm-seed-option--selected': isSelected, + })} + onClick={() => { + if (!isSelected) { + this.setState({ + selectedSeeds: [...selectedSeeds, [i, word]], + }) + } else { + this.setState({ + selectedSeeds: selectedSeeds + .filter(([index, seed]) => !(seed === word && index === i)), + }) + } + }} + > + {word} + </button> + ) + })} + </div> + <button + className="first-time-flow__button" + onClick={() => isValid && this.handleClick()} + disabled={!isValid} + > + Confirm + </button> + </div> + </div> + <Breadcrumbs total={3} currentIndex={1} /> + </div> + </div> + </div> + ) + } + </div> + ) + } +} + +export default compose( + withRouter, + connect( + ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ + seedWords, + isLoading, + address: selectedAddress, + }), + dispatch => ({ + confirmSeedWords: () => dispatch(confirmSeedWords()), + openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), + }) + ) +)(ConfirmSeedScreen) diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 192da3399..6ec05e11d 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,20 +1,26 @@ -import EventEmitter from 'events' import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' -import classnames from 'classnames' -import {createNewVaultAndKeychain} from '../../../../ui/app/actions' -import LoadingScreen from './loading-screen' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' +import { createNewVaultAndKeychain } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' +import EventEmitter from 'events' import Mascot from '../../../../ui/app/components/mascot' +import classnames from 'classnames' +import { + INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_NOTICE_ROUTE, +} from '../../../../ui/app/routes' class CreatePasswordScreen extends Component { static propTypes = { isLoading: PropTypes.bool.isRequired, createAccount: PropTypes.func.isRequired, - goToImportWithSeedPhrase: PropTypes.func.isRequired, - goToImportAccount: PropTypes.func.isRequired, - next: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, + isInitialized: PropTypes.bool, + isUnlocked: PropTypes.bool, isMascara: PropTypes.bool.isRequired, } @@ -23,13 +29,21 @@ class CreatePasswordScreen extends Component { confirmPassword: '', } - constructor () { - super() + constructor (props) { + super(props) this.animationEventEmitter = new EventEmitter() } + componentWillMount () { + const { isInitialized, history } = this.props + + if (isInitialized) { + history.push(INITIALIZE_NOTICE_ROUTE) + } + } + isValid () { - const {password, confirmPassword} = this.state + const { password, confirmPassword } = this.state if (!password || !confirmPassword) { return false @@ -47,93 +61,182 @@ class CreatePasswordScreen extends Component { return } - const {password} = this.state - const {createAccount, next} = this.props + const { password } = this.state + const { createAccount, history } = this.props + this.setState({ isLoading: true }) createAccount(password) - .then(next) + .then(() => history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)) + } + + renderFields () { + const { isMascara, history } = this.props + + return ( + <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> + <div className={classnames({ + 'first-view-main': !isMascara, + 'first-view-main__mascara': isMascara, + })}> + {isMascara && <div className="mascara-info first-view-phone-invisible"> + <Mascot + animationEventEmitter={this.animationEventEmitter} + width="225" + height="225" + /> + <div className="info"> + MetaMask is a secure identity vault for Ethereum. + </div> + <div className="info"> + It allows you to hold ether & tokens, and interact with decentralized applications. + </div> + </div>} + <div className="create-password"> + <div className="create-password__title"> + Create Password + </div> + <input + className="first-time-flow__input" + type="password" + placeholder="New Password (min 8 characters)" + onChange={e => this.setState({password: e.target.value})} + /> + <input + className="first-time-flow__input create-password__confirm-input" + type="password" + placeholder="Confirm Password" + onChange={e => this.setState({confirmPassword: e.target.value})} + /> + <button + className="first-time-flow__button" + disabled={!this.isValid()} + onClick={this.createAccount} + > + Create + </button> + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + }} + > + Import with seed phrase + </a> + { /* } + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) + }} + > + Import an account + </a> + { */ } + <Breadcrumbs total={3} currentIndex={0} /> + </div> + </div> + </div> + ) } render () { - const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props - - return isLoading - ? <LoadingScreen loadingMessage="Creating your new account" /> - : ( - <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> - <div className={classnames({ - 'first-view-main': !isMascara, - 'first-view-main__mascara': isMascara, - })}> - {isMascara && <div className="mascara-info first-view-phone-invisible"> - <Mascot - animationEventEmitter={this.animationEventEmitter} - width="225" - height="225" - /> - <div className="info"> - MetaMask is a secure identity vault for Ethereum. - </div> - <div className="info"> - It allows you to hold ether & tokens, and interact with decentralized applications. - </div> - </div>} - <div className="create-password"> - <div className="create-password__title"> - Create Password - </div> - <input - className="first-time-flow__input" - type="password" - placeholder="New Password (min 8 characters)" - onChange={e => this.setState({password: e.target.value})} - /> - <input - className="first-time-flow__input create-password__confirm-input" - type="password" - placeholder="Confirm Password" - onChange={e => this.setState({confirmPassword: e.target.value})} - /> - <button - className="first-time-flow__button" - disabled={!this.isValid()} - onClick={this.createAccount} - > - Create - </button> - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - goToImportWithSeedPhrase() - }} - > - Import with seed phrase - </a> - { /* } - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - goToImportAccount() - }} - > - Import an account - </a> - { */ } - <Breadcrumbs total={3} currentIndex={0} /> + const { history, isMascara } = this.props + + return ( + <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> + <div className={classnames({ + 'first-view-main': !isMascara, + 'first-view-main__mascara': isMascara, + })}> + {isMascara && <div className="mascara-info first-view-phone-invisible"> + <Mascot + animationEventEmitter={this.animationEventEmitter} + width="225" + height="225" + /> + <div className="info"> + MetaMask is a secure identity vault for Ethereum. + </div> + <div className="info"> + It allows you to hold ether & tokens, and interact with decentralized applications. </div> + </div>} + <div className="create-password"> + <div className="create-password__title"> + Create Password + </div> + <input + className="first-time-flow__input" + type="password" + placeholder="New Password (min 8 characters)" + onChange={e => this.setState({password: e.target.value})} + /> + <input + className="first-time-flow__input create-password__confirm-input" + type="password" + placeholder="Confirm Password" + onChange={e => this.setState({confirmPassword: e.target.value})} + /> + <button + className="first-time-flow__button" + disabled={!this.isValid()} + onClick={this.createAccount} + > + Create + </button> + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + }} + > + Import with seed phrase + </a> + { /* } + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) + }} + > + Import an account + </a> + { */ } + <Breadcrumbs total={3} currentIndex={0} /> </div> </div> - ) + </div> + ) + } +} + +const mapStateToProps = ({ metamask, appState }) => { + const { isInitialized, isUnlocked, isMascara, noActiveNotices } = metamask + const { isLoading } = appState + + return { + isLoading, + isInitialized, + isUnlocked, + isMascara, + noActiveNotices, } } -export default connect( - ({ appState: { isLoading }, metamask: { isMascara } }) => ({ isLoading, isMascara }), - dispatch => ({ - createAccount: password => dispatch(createNewVaultAndKeychain(password)), - }) +export default compose( + withRouter, + connect( + mapStateToProps, + dispatch => ({ + createAccount: password => dispatch(createNewVaultAndKeychain(password)), + }) + ) )(CreatePasswordScreen) diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js index 86f02ceac..5834919de 100644 --- a/mascara/src/app/first-time/import-seed-phrase-screen.js +++ b/mascara/src/app/first-time/import-seed-phrase-screen.js @@ -8,16 +8,16 @@ import { displayWarning, unMarkPasswordForgotten, } from '../../../../ui/app/actions' +import { DEFAULT_ROUTE, INITIALIZE_NOTICE_ROUTE } from '../../../../ui/app/routes' class ImportSeedPhraseScreen extends Component { static propTypes = { warning: PropTypes.string, - back: PropTypes.func.isRequired, - next: PropTypes.func.isRequired, createNewVaultAndRestore: PropTypes.func.isRequired, hideWarning: PropTypes.func.isRequired, displayWarning: PropTypes.func, leaveImportSeedScreenState: PropTypes.func, + history: PropTypes.object, }; state = { @@ -64,20 +64,21 @@ class ImportSeedPhraseScreen extends Component { const { password, seedPhrase } = this.state const { createNewVaultAndRestore, - next, displayWarning, leaveImportSeedScreenState, + history, } = this.props leaveImportSeedScreenState() createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase)) - .then(next) + .then(() => history.push(INITIALIZE_NOTICE_ROUTE)) } render () { const { seedPhrase, password, confirmPassword } = this.state - const { warning } = this.props - const importDisabled = warning || !seedPhrase || !password || !confirmPassword + const { warning, isLoading } = this.props + const importDisabled = warning || !seedPhrase || !password || !confirmPassword || isLoading + return ( <div className="first-view-main-wrapper"> <div className="first-view-main"> @@ -86,7 +87,7 @@ class ImportSeedPhraseScreen extends Component { className="import-account__back-button" onClick={e => { e.preventDefault() - this.props.back() + this.props.history.goBack() }} href="#" > @@ -152,7 +153,7 @@ class ImportSeedPhraseScreen extends Component { } export default connect( - ({ appState: { warning } }) => ({ warning }), + ({ appState: { warning, isLoading } }) => ({ warning, isLoading }), dispatch => ({ leaveImportSeedScreenState: () => { dispatch(unMarkPasswordForgotten()) diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index 0cc3b4b0e..01e5d67a6 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -1,17 +1,26 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' +import { withRouter, Switch, Route } from 'react-router-dom' +import { compose } from 'recompose' import CreatePasswordScreen from './create-password-screen' import UniqueImageScreen from './unique-image-screen' import NoticeScreen from './notice-screen' -import BackupPhraseScreen from './backup-phrase-screen' +import BackupPhraseScreen from './seed-screen' import ImportAccountScreen from './import-account-screen' import ImportSeedPhraseScreen from './import-seed-phrase-screen' +import ConfirmSeed from './confirm-seed-screen' import { - onboardingBuyEthView, - unMarkPasswordForgotten, - showModal, -} from '../../../../ui/app/actions' + INITIALIZE_ROUTE, + INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_NOTICE_ROUTE, + INITIALIZE_BACKUP_PHRASE_ROUTE, + INITIALIZE_CONFIRM_SEED_ROUTE, + INITIALIZE_CREATE_PASSWORD_ROUTE, +} from '../../../../ui/app/routes' +import WelcomeScreen from '../../../../ui/app/welcome-screen' class FirstTimeFlow extends Component { @@ -20,6 +29,10 @@ class FirstTimeFlow extends Component { seedWords: PropTypes.string, address: PropTypes.string, noActiveNotices: PropTypes.bool, + goToBuyEtherView: PropTypes.func, + isUnlocked: PropTypes.bool, + history: PropTypes.object, + welcomeScreenSeen: PropTypes.bool, }; static defaultProps = { @@ -28,145 +41,53 @@ class FirstTimeFlow extends Component { noActiveNotices: false, }; - static SCREEN_TYPE = { - CREATE_PASSWORD: 'create_password', - IMPORT_ACCOUNT: 'import_account', - IMPORT_SEED_PHRASE: 'import_seed_phrase', - UNIQUE_IMAGE: 'unique_image', - NOTICE: 'notice', - BACK_UP_PHRASE: 'back_up_phrase', - CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase', - LOADING: 'loading', - }; - - constructor (props) { - super(props) - this.state = { - screenType: this.getScreenType(), - } - } - - setScreenType (screenType) { - this.setState({ screenType }) - } - - getScreenType () { - const { - isInitialized, - seedWords, - noActiveNotices, - forgottenPassword, - } = this.props - const {SCREEN_TYPE} = FirstTimeFlow - - // return SCREEN_TYPE.NOTICE - - if (forgottenPassword) { - return SCREEN_TYPE.IMPORT_SEED_PHRASE - } - if (!isInitialized) { - return SCREEN_TYPE.CREATE_PASSWORD - } - - if (!noActiveNotices) { - return SCREEN_TYPE.NOTICE - } - - if (seedWords) { - return SCREEN_TYPE.BACK_UP_PHRASE - } - }; - - renderScreen () { - const {SCREEN_TYPE} = FirstTimeFlow - const { - openBuyEtherModal, - address, - restoreCreatePasswordScreen, - forgottenPassword, - leaveImportSeedScreenState, - } = this.props - - switch (this.state.screenType) { - case SCREEN_TYPE.CREATE_PASSWORD: - return ( - <CreatePasswordScreen - next={() => this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)} - goToImportAccount={() => this.setScreenType(SCREEN_TYPE.IMPORT_ACCOUNT)} - goToImportWithSeedPhrase={() => this.setScreenType(SCREEN_TYPE.IMPORT_SEED_PHRASE)} - /> - ) - case SCREEN_TYPE.IMPORT_ACCOUNT: - return ( - <ImportAccountScreen - back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)} - next={() => this.setScreenType(SCREEN_TYPE.NOTICE)} - /> - ) - case SCREEN_TYPE.IMPORT_SEED_PHRASE: - return ( - <ImportSeedPhraseScreen - back={() => { - leaveImportSeedScreenState() - this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD) - }} - next={() => { - const newScreenType = forgottenPassword ? null : SCREEN_TYPE.NOTICE - this.setScreenType(newScreenType) - }} - /> - ) - case SCREEN_TYPE.UNIQUE_IMAGE: - return ( - <UniqueImageScreen - next={() => this.setScreenType(SCREEN_TYPE.NOTICE)} - /> - ) - case SCREEN_TYPE.NOTICE: - return ( - <NoticeScreen - next={() => this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)} - /> - ) - case SCREEN_TYPE.BACK_UP_PHRASE: - return ( - <BackupPhraseScreen - next={() => openBuyEtherModal()} - /> - ) - default: - return <noscript /> - } - } - render () { return ( <div className="first-time-flow"> - {this.renderScreen()} + <Switch> + <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} /> + <Route + exact + path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE} + component={ImportSeedPhraseScreen} + /> + <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImageScreen} /> + <Route exact path={INITIALIZE_NOTICE_ROUTE} component={NoticeScreen} /> + <Route exact path={INITIALIZE_BACKUP_PHRASE_ROUTE} component={BackupPhraseScreen} /> + <Route exact path={INITIALIZE_CONFIRM_SEED_ROUTE} component={ConfirmSeed} /> + <Route exact path={INITIALIZE_CREATE_PASSWORD_ROUTE} component={CreatePasswordScreen} /> + <Route exact path={INITIALIZE_ROUTE} component={WelcomeScreen} /> + </Switch> </div> ) } - } -export default connect( - ({ - metamask: { - isInitialized, - seedWords, - noActiveNotices, - selectedAddress, - forgottenPassword, - } - }) => ({ +const mapStateToProps = ({ metamask }) => { + const { + isInitialized, + seedWords, + noActiveNotices, + selectedAddress, + forgottenPassword, + isMascara, + isUnlocked, + welcomeScreenSeen, + } = metamask + + return { + isMascara, isInitialized, seedWords, noActiveNotices, address: selectedAddress, forgottenPassword, - }), - dispatch => ({ - leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()), - openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), - }) + isUnlocked, + welcomeScreenSeen, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) )(FirstTimeFlow) diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index cbd8f9f5b..a449ccfa9 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -1,11 +1,14 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Markdown from 'react-markdown' -import {connect} from 'react-redux' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import debounce from 'lodash.debounce' -import {markNoticeRead} from '../../../../ui/app/actions' +import { markNoticeRead } from '../../../../ui/app/actions' import Identicon from '../../../../ui/app/components/identicon' import Breadcrumbs from './breadcrumbs' +import { INITIALIZE_BACKUP_PHRASE_ROUTE } from '../../../../ui/app/routes' import LoadingScreen from './loading-screen' class NoticeScreen extends Component { @@ -16,8 +19,15 @@ class NoticeScreen extends Component { date: PropTypes.string, body: PropTypes.string, }), - next: PropTypes.func.isRequired, + location: PropTypes.shape({ + state: PropTypes.shape({ + next: PropTypes.func.isRequired, + }), + }), markNoticeRead: PropTypes.func, + history: PropTypes.object, + isLoading: PropTypes.bool, + noActiveNotices: PropTypes.bool, }; static defaultProps = { @@ -29,17 +39,24 @@ class NoticeScreen extends Component { } componentDidMount () { + if (this.props.noActiveNotices) { + this.props.history.push(INITIALIZE_BACKUP_PHRASE_ROUTE) + } + this.onScroll() } acceptTerms = () => { - const { markNoticeRead, lastUnreadNotice, next } = this.props - const defer = markNoticeRead(lastUnreadNotice) - .then(() => this.setState({ atBottom: false })) - - if ((/terms/gi).test(lastUnreadNotice.title)) { - defer.then(next) - } + const { markNoticeRead, lastUnreadNotice, history } = this.props + markNoticeRead(lastUnreadNotice) + .then(hasActiveNotices => { + if (!hasActiveNotices) { + history.push(INITIALIZE_BACKUP_PHRASE_ROUTE) + } else { + this.setState({ atBottom: false }) + this.onScroll() + } + }) } onScroll = debounce(() => { @@ -64,27 +81,29 @@ class NoticeScreen extends Component { isLoading ? <LoadingScreen /> : ( - <div className="first-view-main-wrapper"> - <div className="first-view-main"> - <div - className="tou" - onScroll={this.onScroll} - > - <Identicon address={address} diameter={70} /> - <div className="tou__title">{title}</div> - <Markdown - className="tou__body markdown" - source={body} - skipHtml - /> - <button - className="first-time-flow__button" - onClick={atBottom && this.acceptTerms} - disabled={!atBottom} + <div className="first-time-flow"> + <div className="first-view-main-wrapper"> + <div className="first-view-main"> + <div + className="tou" + onScroll={this.onScroll} > - Accept - </button> - <Breadcrumbs total={3} currentIndex={2} /> + <Identicon address={address} diameter={70} /> + <div className="tou__title">{title}</div> + <Markdown + className="tou__body markdown" + source={body} + skipHtml + /> + <button + className="first-time-flow__button" + onClick={atBottom && this.acceptTerms} + disabled={!atBottom} + > + Accept + </button> + <Breadcrumbs total={3} currentIndex={2} /> + </div> </div> </div> </div> @@ -93,12 +112,24 @@ class NoticeScreen extends Component { } } -export default connect( - ({ metamask: { selectedAddress, lastUnreadNotice }, appState: { isLoading } }) => ({ - lastUnreadNotice, +const mapStateToProps = ({ metamask, appState }) => { + const { selectedAddress, lastUnreadNotice, noActiveNotices } = metamask + const { isLoading } = appState + + return { address: selectedAddress, - }), - dispatch => ({ - markNoticeRead: notice => dispatch(markNoticeRead(notice)), - }) + lastUnreadNotice, + noActiveNotices, + isLoading, + } +} + +export default compose( + withRouter, + connect( + mapStateToProps, + dispatch => ({ + markNoticeRead: notice => dispatch(markNoticeRead(notice)), + }) + ) )(NoticeScreen) diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/seed-screen.js index 6819abcf3..9af9ca3be 100644 --- a/mascara/src/app/first-time/backup-phrase-screen.js +++ b/mascara/src/app/first-time/seed-screen.js @@ -1,13 +1,14 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import {connect} from 'react-redux' +import { connect } from 'react-redux' import classnames from 'classnames' -import shuffle from 'lodash.shuffle' -import {compose, onlyUpdateForPropTypes} from 'recompose' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' -import {confirmSeedWords} from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' +import { DEFAULT_ROUTE, INITIALIZE_CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes' +import { confirmSeedWords } from '../../../../ui/app/actions' const LockIcon = props => ( <svg @@ -36,34 +37,42 @@ const LockIcon = props => ( /> </g> </svg> -); +) class BackupPhraseScreen extends Component { static propTypes = { isLoading: PropTypes.bool.isRequired, address: PropTypes.string.isRequired, - seedWords: PropTypes.string.isRequired, - next: PropTypes.func.isRequired, - confirmSeedWords: PropTypes.func.isRequired, + seedWords: PropTypes.string, + history: PropTypes.object, + isRevealingSeedWords: PropTypes.bool, + clearSeedWords: PropTypes.func, }; static defaultProps = { - seedWords: '' - }; - - static PAGE = { - SECRET: 'secret', - CONFIRM: 'confirm' - }; + seedWords: '', + } - constructor(props) { - const {seedWords} = props + constructor (props) { super(props) this.state = { isShowingSecret: false, - page: BackupPhraseScreen.PAGE.SECRET, - selectedSeeds: [], - shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), + } + } + + componentWillMount () { + this.checkSeedWords() + } + + componentDidUpdate () { + this.checkSeedWords() + } + + checkSeedWords () { + const { seedWords, history } = this.props + + if (!seedWords) { + history.push(DEFAULT_ROUTE) } } @@ -73,7 +82,7 @@ class BackupPhraseScreen extends Component { return ( <div className="backup-phrase__secret"> <div className={classnames('backup-phrase__secret-words', { - 'backup-phrase__secret-words--hidden': !isShowingSecret + 'backup-phrase__secret-words--hidden': !isShowingSecret, })}> {this.props.seedWords} </div> @@ -94,9 +103,30 @@ class BackupPhraseScreen extends Component { ) } - renderSecretScreen () { + renderSubmitButton () { + const { isRevealingSeedWords, clearSeedWords, history } = this.props const { isShowingSecret } = this.state + return isRevealingSeedWords + ? <button + className="first-time-flow__button" + onClick={() => clearSeedWords().then(() => history.push(DEFAULT_ROUTE))} + disabled={!isShowingSecret} + > + Done + </button> + : <button + className="first-time-flow__button" + onClick={() => isShowingSecret && history.push(INITIALIZE_CONFIRM_SEED_ROUTE)} + disabled={!isShowingSecret} + > + Next + </button> + } + + renderSecretScreen () { + const { isRevealingSeedWords } = this.props + return ( <div className="backup-phrase__content-wrapper"> <div className="backup-phrase__phrase"> @@ -122,115 +152,13 @@ class BackupPhraseScreen extends Component { </div> </div> <div className="backup-phrase__next-button"> - <button - className="first-time-flow__button" - onClick={() => isShowingSecret && this.setState({ - isShowingSecret: false, - page: BackupPhraseScreen.PAGE.CONFIRM, - })} - disabled={!isShowingSecret} - > - Next - </button> - <Breadcrumbs total={3} currentIndex={1} /> + { this.renderSubmitButton() } + { !isRevealingSeedWords && <Breadcrumbs total={3} currentIndex={1} />} </div> </div> ) } - renderConfirmationScreen() { - const { seedWords, confirmSeedWords, next } = this.props; - const { selectedSeeds, shuffledSeeds } = this.state; - const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') - - return ( - <div className="backup-phrase__content-wrapper"> - <div> - <div className="backup-phrase__title">Confirm your Secret Backup Phrase</div> - <div className="backup-phrase__body-text"> - Please select each phrase in order to make sure it is correct. - </div> - <div className="backup-phrase__confirm-secret"> - {selectedSeeds.map(([_, word], i) => ( - <button - key={i} - className="backup-phrase__confirm-seed-option" - > - {word} - </button> - ))} - </div> - <div className="backup-phrase__confirm-seed-options"> - {shuffledSeeds.map((word, i) => { - const isSelected = selectedSeeds - .filter(([index, seed]) => seed === word && index === i) - .length - - return ( - <button - key={i} - className={classnames('backup-phrase__confirm-seed-option', { - 'backup-phrase__confirm-seed-option--selected': isSelected - })} - onClick={() => { - if (!isSelected) { - this.setState({ - selectedSeeds: [...selectedSeeds, [i, word]] - }) - } else { - this.setState({ - selectedSeeds: selectedSeeds - .filter(([index, seed]) => !(seed === word && index === i)) - }) - } - }} - > - {word} - </button> - ) - })} - </div> - <button - className="first-time-flow__button" - onClick={() => isValid && confirmSeedWords().then(next)} - disabled={!isValid} - > - Confirm - </button> - </div> - </div> - ) - } - - renderBack () { - return this.state.page === BackupPhraseScreen.PAGE.CONFIRM - ? ( - <a - className="backup-phrase__back-button" - onClick={e => { - e.preventDefault() - this.setState({ - page: BackupPhraseScreen.PAGE.SECRET - }) - }} - href="#" - > - {`< Back`} - </a> - ) - : null - } - - renderContent () { - switch (this.state.page) { - case BackupPhraseScreen.PAGE.CONFIRM: - return this.renderConfirmationScreen() - case BackupPhraseScreen.PAGE.SECRET: - default: - return this.renderSecretScreen() - } - } - render () { return this.props.isLoading ? <LoadingScreen loadingMessage="Creating your new account" /> @@ -238,9 +166,8 @@ class BackupPhraseScreen extends Component { <div className="first-view-main-wrapper"> <div className="first-view-main"> <div className="backup-phrase"> - {this.renderBack()} <Identicon address={this.props.address} diameter={70} /> - {this.renderContent()} + {this.renderSecretScreen()} </div> </div> </div> @@ -248,16 +175,25 @@ class BackupPhraseScreen extends Component { } } +const mapStateToProps = ({ metamask, appState }) => { + const { selectedAddress, seedWords, isRevealingSeedWords } = metamask + const { isLoading } = appState + + return { + seedWords, + isRevealingSeedWords, + isLoading, + address: selectedAddress, + } +} + +const mapDispatchToProps = dispatch => { + return { + clearSeedWords: () => dispatch(confirmSeedWords()), + } +} + export default compose( - onlyUpdateForPropTypes, - connect( - ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ - seedWords, - isLoading, - address: selectedAddress, - }), - dispatch => ({ - confirmSeedWords: () => dispatch(confirmSeedWords()), - }) - ) + withRouter, + connect(mapStateToProps, mapDispatchToProps), )(BackupPhraseScreen) diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js index ede17ee3d..9555e5318 100644 --- a/mascara/src/app/first-time/unique-image-screen.js +++ b/mascara/src/app/first-time/unique-image-screen.js @@ -1,13 +1,16 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import {connect} from 'react-redux' import Identicon from '../../../../ui/app/components/identicon' import Breadcrumbs from './breadcrumbs' +import { INITIALIZE_NOTICE_ROUTE } from '../../../../ui/app/routes' class UniqueImageScreen extends Component { static propTypes = { address: PropTypes.string, - next: PropTypes.func.isRequired, + history: PropTypes.object, } render () { @@ -25,7 +28,7 @@ class UniqueImageScreen extends Component { </div> <button className="first-time-flow__button" - onClick={this.props.next} + onClick={() => this.props.history.push(INITIALIZE_NOTICE_ROUTE)} > Next </button> @@ -37,8 +40,11 @@ class UniqueImageScreen extends Component { } } -export default connect( - ({ metamask: { selectedAddress } }) => ({ - address: selectedAddress, - }) +export default compose( + withRouter, + connect( + ({ metamask: { selectedAddress } }) => ({ + address: selectedAddress, + }) + ) )(UniqueImageScreen) diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 37611987f..3aa845b3a 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -3,6 +3,7 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../../ui/app/actions') +const log = require('loglevel') // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default @@ -34,7 +35,7 @@ const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns -const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums +const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/controllers/network/enums') module.exports = connect(mapStateToProps)(App) diff --git a/old-ui/app/components/buy-button-subview.js b/old-ui/app/components/buy-button-subview.js index 56d173839..8bb73ae3e 100644 --- a/old-ui/app/components/buy-button-subview.js +++ b/old-ui/app/components/buy-button-subview.js @@ -8,7 +8,7 @@ const ShapeshiftForm = require('./shapeshift-form') const Loading = require('./loading') const AccountPanel = require('./account-panel') const RadioList = require('./custom-radio-list') -const networkNames = require('../../../app/scripts/config.js').networkNames +const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util') module.exports = connect(mapStateToProps)(BuyButtonSubview) @@ -142,7 +142,7 @@ BuyButtonSubview.prototype.primarySubview = function () { case '3': case '4': case '42': - const networkName = networkNames[network] + const networkName = getNetworkDisplayName(network) const label = `${networkName} Test Faucet` return ( h('div.flex-column', { diff --git a/old-ui/app/components/ens-input.js b/old-ui/app/components/ens-input.js index c85a23514..d09c30644 100644 --- a/old-ui/app/components/ens-input.js +++ b/old-ui/app/components/ens-input.js @@ -8,6 +8,7 @@ const ENS = require('ethjs-ens') const networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' +const log = require('loglevel') module.exports = EnsInput diff --git a/old-ui/app/components/pending-tx.js b/old-ui/app/components/pending-tx.js index 7f63d9fdf..cd4189fc4 100644 --- a/old-ui/app/components/pending-tx.js +++ b/old-ui/app/components/pending-tx.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const actions = require('../../../ui/app/actions') const clone = require('clone') +const log = require('loglevel') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN diff --git a/old-ui/app/components/token-list.js b/old-ui/app/components/token-list.js index 149733b89..e20594b61 100644 --- a/old-ui/app/components/token-list.js +++ b/old-ui/app/components/token-list.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const TokenTracker = require('eth-token-tracker') const TokenCell = require('./token-cell.js') +const log = require('loglevel') module.exports = TokenList diff --git a/old-ui/app/conf-tx.js b/old-ui/app/conf-tx.js index 1bb8eb97c..dc1dc0538 100644 --- a/old-ui/app/conf-tx.js +++ b/old-ui/app/conf-tx.js @@ -6,7 +6,9 @@ const actions = require('../../ui/app/actions') const NetworkIndicator = require('./components/network') const LoadingIndicator = require('./components/loading') const txHelper = require('../lib/tx-helper') -const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification') +const log = require('loglevel') +const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums') +const { getEnvironmentType } = require('../../app/scripts/lib/util') const PendingTx = require('./components/pending-tx') const PendingMsg = require('./components/pending-msg') @@ -50,7 +52,7 @@ ConfirmTxScreen.prototype.render = function () { var txData = unconfTxList[props.index] || {} var txParams = txData.params || {} - var isNotification = isPopupOrNotification() === 'notification' + var isNotification = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`) if (unconfTxList.length === 0) return h(Loading, { isLoading: true }) diff --git a/old-ui/lib/tx-helper.js b/old-ui/lib/tx-helper.js index de3f00d2d..0a6f55a63 100644 --- a/old-ui/lib/tx-helper.js +++ b/old-ui/lib/tx-helper.js @@ -1,4 +1,5 @@ const valuesFor = require('../app/util').valuesFor +const log = require('loglevel') module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, typedMessages, network) { log.debug('tx-helper called with params:') diff --git a/package-lock.json b/package-lock.json index 2c1589bec..8ff344cdf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -344,6 +344,11 @@ "negotiator": "0.6.1" } }, + "accounting": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/accounting/-/accounting-0.4.1.tgz", + "integrity": "sha1-h91BA+/39EYPHhhvXGd+1s9WaIM=" + }, "acorn": { "version": "4.0.13", "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz", @@ -2972,6 +2977,15 @@ "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" }, + "catharsis": { + "version": "0.8.9", + "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.8.9.tgz", + "integrity": "sha1-mMyJDKZS3S7w5ws3klMQ/56Q/Is=", + "dev": true, + "requires": { + "underscore-contrib": "0.3.0" + } + }, "center-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", @@ -4073,6 +4087,16 @@ "cssom": "0.3.2" } }, + "currency-formatter": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/currency-formatter/-/currency-formatter-1.4.2.tgz", + "integrity": "sha512-rQ5HB3DenCZwfVPdpVTuVcAORodVO0VoqIbjhdUSuy0sE2b9jBdCaVKbA355NUc2KhPbu5ojHs3WypuEwPLfNg==", + "requires": { + "accounting": "0.4.1", + "locale-currency": "0.0.1", + "object-assign": "4.1.1" + } + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -5112,7 +5136,7 @@ "lodash": "4.17.4", "object.assign": "4.1.0", "object.values": "1.0.4", - "prop-types": "15.6.0" + "prop-types": "15.6.1" } }, "enzyme-adapter-utils": { @@ -5123,7 +5147,7 @@ "requires": { "lodash": "4.17.4", "object.assign": "4.1.0", - "prop-types": "15.6.0" + "prop-types": "15.6.1" } }, "errno": { @@ -5454,7 +5478,7 @@ "doctrine": "2.0.2", "has": "1.0.1", "jsx-ast-utils": "2.0.1", - "prop-types": "15.6.0" + "prop-types": "15.6.1" } }, "eslint-scope": { @@ -5727,9 +5751,9 @@ } }, "eth-keyring-controller": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/eth-keyring-controller/-/eth-keyring-controller-2.1.4.tgz", - "integrity": "sha1-BRjZ2Jrw2K82Kigh5NVQqL4UqAc=", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/eth-keyring-controller/-/eth-keyring-controller-2.2.0.tgz", + "integrity": "sha512-f/g1ZrxciWJs2aHgpfvYmZ3ImP48GA+pobTU0EFNF/y5Yylf1zQyDw671W5opGpIt5TgV4F9sYXcvyjlgbL0Pg==", "requires": { "bip39": "2.4.0", "bluebird": "3.5.1", @@ -5737,7 +5761,7 @@ "eth-hd-keyring": "1.2.2", "eth-sig-util": "1.4.2", "eth-simple-keyring": "1.2.1", - "ethereumjs-util": "5.1.3", + "ethereumjs-util": "5.1.5", "loglevel": "1.6.0", "obs-store": "2.4.1", "promise-filter": "1.1.0" @@ -5752,35 +5776,10 @@ "object-assign": "4.1.1" } }, - "eth-hd-keyring": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/eth-hd-keyring/-/eth-hd-keyring-1.2.2.tgz", - "integrity": "sha1-rV9HkHRDapO0ObC5XHkJXCh5GII=", - "requires": { - "bip39": "2.4.0", - "eth-sig-util": "1.4.2", - "ethereumjs-util": "5.1.3", - "ethereumjs-wallet": "0.6.0", - "events": "1.1.1", - "xtend": "4.0.1" - } - }, - "eth-simple-keyring": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/eth-simple-keyring/-/eth-simple-keyring-1.2.1.tgz", - "integrity": "sha1-bXs1LcWppQINYfafryHvsvY2P0U=", - "requires": { - "eth-sig-util": "1.4.2", - "ethereumjs-util": "5.1.3", - "ethereumjs-wallet": "0.6.0", - "events": "1.1.1", - "xtend": "4.0.1" - } - }, "ethereumjs-util": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.1.3.tgz", - "integrity": "sha512-U/wmHagElZVxnpo3bFsvk5beFADegUcEzqtA/NfQbitAPOs6JoYq8M4SY9NfH4HD8236i63UOkkXafd7bqBL9A==", + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.1.5.tgz", + "integrity": "sha512-xPaSEATYJpMTCGowIt0oMZwFP4R1bxd6QsWgkcDvFL0JtXsr39p32WEcD14RscCjfP41YXZPCVWA4yAg0nrJmw==", "requires": { "bn.js": "4.11.8", "create-hash": "1.1.3", @@ -5827,29 +5826,15 @@ "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz", "integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=", "requires": { - "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#71f123b676f2b2d81bc20f343670d90045a3d3d8", + "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#4ea2fdfed09e8f99117d9362d17c6b01b64a2bcf", "ethereumjs-util": "5.1.3" }, "dependencies": { "ethereumjs-abi": { - "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#71f123b676f2b2d81bc20f343670d90045a3d3d8", + "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#4ea2fdfed09e8f99117d9362d17c6b01b64a2bcf", "requires": { "bn.js": "4.11.8", - "ethereumjs-util": "4.5.0" - }, - "dependencies": { - "ethereumjs-util": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-4.5.0.tgz", - "integrity": "sha1-PpQosxfuvaPXJg2FT93alUsfG8Y=", - "requires": { - "bn.js": "4.11.8", - "create-hash": "1.1.3", - "keccakjs": "0.2.1", - "rlp": "2.0.0", - "secp256k1": "3.4.0" - } - } + "ethereumjs-util": "5.1.3" } }, "ethereumjs-util": { @@ -5868,6 +5853,34 @@ } } }, + "eth-simple-keyring": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/eth-simple-keyring/-/eth-simple-keyring-1.2.1.tgz", + "integrity": "sha1-bXs1LcWppQINYfafryHvsvY2P0U=", + "requires": { + "eth-sig-util": "1.4.2", + "ethereumjs-util": "5.1.5", + "ethereumjs-wallet": "0.6.0", + "events": "1.1.1", + "xtend": "4.0.1" + }, + "dependencies": { + "ethereumjs-util": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.1.5.tgz", + "integrity": "sha512-xPaSEATYJpMTCGowIt0oMZwFP4R1bxd6QsWgkcDvFL0JtXsr39p32WEcD14RscCjfP41YXZPCVWA4yAg0nrJmw==", + "requires": { + "bn.js": "4.11.8", + "create-hash": "1.1.3", + "ethjs-util": "0.1.4", + "keccak": "1.4.0", + "rlp": "2.0.0", + "safe-buffer": "5.1.1", + "secp256k1": "3.4.0" + } + } + } + }, "eth-token-tracker": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/eth-token-tracker/-/eth-token-tracker-1.1.4.tgz", @@ -5915,6 +5928,61 @@ } } }, + "ethjs": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/ethjs/-/ethjs-0.2.9.tgz", + "integrity": "sha1-yagNR7ydVg9Z53gEnSIlXlgfMSs=", + "requires": { + "bn.js": "4.11.6", + "ethjs-abi": "0.2.0", + "ethjs-contract": "0.1.9", + "ethjs-filter": "0.1.5", + "ethjs-provider-http": "0.1.6", + "ethjs-query": "0.3.0", + "ethjs-unit": "0.1.6", + "ethjs-util": "0.1.3", + "js-sha3": "0.5.5", + "number-to-bn": "1.7.0" + }, + "dependencies": { + "ethjs-format": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/ethjs-format/-/ethjs-format-0.2.3.tgz", + "integrity": "sha1-m9hnyu6CstvtmEYAuzAiDPPLWDA=", + "requires": { + "bn.js": "4.11.6", + "ethjs-schema": "0.1.9", + "ethjs-util": "0.1.3", + "is-hex-prefixed": "1.0.0", + "number-to-bn": "1.7.0", + "strip-hex-prefix": "1.0.0" + } + }, + "ethjs-query": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/ethjs-query/-/ethjs-query-0.3.0.tgz", + "integrity": "sha1-CAmNYQ+BvV+VSnpXq0mJ9+mBX8Q=", + "requires": { + "ethjs-format": "0.2.3", + "ethjs-rpc": "0.1.5" + } + }, + "ethjs-schema": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/ethjs-schema/-/ethjs-schema-0.1.9.tgz", + "integrity": "sha1-hYwqXacGrgSBK0zosetLSSHjMJI=" + }, + "ethjs-util": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.3.tgz", + "integrity": "sha1-39XqSkANxeQhqInK9H4IGtp4u1U=", + "requires": { + "is-hex-prefixed": "1.0.0", + "strip-hex-prefix": "1.0.0" + } + } + } + }, "ethjs-format": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/ethjs-format/-/ethjs-format-0.2.2.tgz", @@ -5952,6 +6020,11 @@ "version": "0.1.5", "resolved": "https://registry.npmjs.org/ethjs-schema/-/ethjs-schema-0.1.5.tgz", "integrity": "sha1-WXQOOzl3vNu5sRvDBoIB6Kzquw0=" + }, + "js-sha3": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.5.5.tgz", + "integrity": "sha1-uvDA6MVK1ZA0R9+Wreekobynmko=" } } }, @@ -6134,16 +6207,16 @@ "integrity": "sha1-x7kULEtZUJsziiBLYyiupA3Txk4=" }, "ethjs": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/ethjs/-/ethjs-0.2.9.tgz", - "integrity": "sha1-yagNR7ydVg9Z53gEnSIlXlgfMSs=", + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/ethjs/-/ethjs-0.3.6.tgz", + "integrity": "sha512-9ojnSkV5XXSM5vo0pKgZpE+SNBPxqSUN0dZmMP5dBZVFOYctRd9tfaZ80Jnde3M4JrfUhhkbG5QFvewitaAY7Q==", "requires": { "bn.js": "4.11.6", - "ethjs-abi": "0.2.0", + "ethjs-abi": "0.2.1", "ethjs-contract": "0.1.9", "ethjs-filter": "0.1.5", "ethjs-provider-http": "0.1.6", - "ethjs-query": "0.3.0", + "ethjs-query": "0.3.4", "ethjs-unit": "0.1.6", "ethjs-util": "0.1.3", "js-sha3": "0.5.5", @@ -6155,13 +6228,14 @@ "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.6.tgz", "integrity": "sha1-UzRK2xRhehP26N0s4okF0cC6MhU=" }, - "ethjs-query": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/ethjs-query/-/ethjs-query-0.3.0.tgz", - "integrity": "sha1-CAmNYQ+BvV+VSnpXq0mJ9+mBX8Q=", + "ethjs-abi": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/ethjs-abi/-/ethjs-abi-0.2.1.tgz", + "integrity": "sha1-4KepOn6BFjqUR3utVu3lJKtt5TM=", "requires": { - "ethjs-format": "0.2.3", - "ethjs-rpc": "0.1.5" + "bn.js": "4.11.6", + "js-sha3": "0.5.5", + "number-to-bn": "1.7.0" } }, "ethjs-util": { @@ -6288,35 +6362,6 @@ "resolved": "https://registry.npmjs.org/ethjs-filter/-/ethjs-filter-0.1.5.tgz", "integrity": "sha1-ARKvYBfCRnfjK4/esg5hlgGbdZg=" }, - "ethjs-format": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/ethjs-format/-/ethjs-format-0.2.3.tgz", - "integrity": "sha1-m9hnyu6CstvtmEYAuzAiDPPLWDA=", - "requires": { - "bn.js": "4.11.6", - "ethjs-schema": "0.1.9", - "ethjs-util": "0.1.3", - "is-hex-prefixed": "1.0.0", - "number-to-bn": "1.7.0", - "strip-hex-prefix": "1.0.0" - }, - "dependencies": { - "bn.js": { - "version": "4.11.6", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.6.tgz", - "integrity": "sha1-UzRK2xRhehP26N0s4okF0cC6MhU=" - }, - "ethjs-util": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.3.tgz", - "integrity": "sha1-39XqSkANxeQhqInK9H4IGtp4u1U=", - "requires": { - "is-hex-prefixed": "1.0.0", - "strip-hex-prefix": "1.0.0" - } - } - } - }, "ethjs-provider-http": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/ethjs-provider-http/-/ethjs-provider-http-0.1.6.tgz", @@ -6378,11 +6423,6 @@ "resolved": "https://registry.npmjs.org/ethjs-rpc/-/ethjs-rpc-0.1.5.tgz", "integrity": "sha1-CZ4i8n3EwYtpeKSF/DaxsPeWkIA=" }, - "ethjs-schema": { - "version": "0.1.9", - "resolved": "https://registry.npmjs.org/ethjs-schema/-/ethjs-schema-0.1.9.tgz", - "integrity": "sha1-hYwqXacGrgSBK0zosetLSSHjMJI=" - }, "ethjs-unit": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/ethjs-unit/-/ethjs-unit-0.1.6.tgz", @@ -9370,15 +9410,336 @@ } }, "gulp-sass": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.1.0.tgz", - "integrity": "sha1-U9xLaKH13f5EJKtMJHZVJpqLdLc=", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.1.tgz", + "integrity": "sha512-OMQEgWNggpog8Tc5v1MuI6eo+5iiPkVeLL76iBhDoEEScLUPfZlpvzmgTnLkpcqdrNodZxpz5qcv6mS2rulk3g==", "requires": { - "gulp-util": "3.0.8", + "chalk": "2.3.2", "lodash.clonedeep": "4.5.0", - "node-sass": "4.7.2", + "node-sass": "4.8.3", + "plugin-error": "1.0.1", + "replace-ext": "1.0.0", + "strip-ansi": "4.0.0", "through2": "2.0.3", "vinyl-sourcemaps-apply": "0.2.1" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "requires": { + "color-convert": "1.9.1" + } + }, + "arr-diff": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", + "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=" + }, + "assert-plus": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", + "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=" + }, + "aws-sign2": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", + "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=" + }, + "boom": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", + "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", + "requires": { + "hoek": "2.16.3" + } + }, + "caseless": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz", + "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=" + }, + "chalk": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", + "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "requires": { + "ansi-styles": "3.2.1", + "escape-string-regexp": "1.0.5", + "supports-color": "5.3.0" + } + }, + "cross-spawn": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", + "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", + "requires": { + "lru-cache": "4.1.1", + "which": "1.3.0" + } + }, + "cryptiles": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", + "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", + "requires": { + "boom": "2.10.1" + } + }, + "extend-shallow": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", + "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=", + "requires": { + "assign-symbols": "1.0.0", + "is-extendable": "1.0.1" + } + }, + "form-data": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", + "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", + "requires": { + "asynckit": "0.4.0", + "combined-stream": "1.0.5", + "mime-types": "2.1.17" + } + }, + "get-stdin": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", + "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=" + }, + "har-validator": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz", + "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=", + "requires": { + "chalk": "1.1.3", + "commander": "2.11.0", + "is-my-json-valid": "2.17.2", + "pinkie-promise": "2.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "requires": { + "ansi-styles": "2.2.1", + "escape-string-regexp": "1.0.5", + "has-ansi": "2.0.0", + "strip-ansi": "3.0.1", + "supports-color": "2.0.0" + } + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "requires": { + "ansi-regex": "2.1.1" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" + } + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + }, + "hawk": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", + "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", + "requires": { + "boom": "2.10.1", + "cryptiles": "2.0.5", + "hoek": "2.16.3", + "sntp": "1.0.9" + } + }, + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=" + }, + "http-signature": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", + "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "requires": { + "assert-plus": "0.2.0", + "jsprim": "1.4.1", + "sshpk": "1.13.1" + } + }, + "is-extendable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", + "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", + "requires": { + "is-plain-object": "2.0.4" + } + }, + "nan": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz", + "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==" + }, + "node-sass": { + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.8.3.tgz", + "integrity": "sha512-tfFWhUsCk/Y19zarDcPo5xpj+IW3qCfOjVdHtYeG6S1CKbQOh1zqylnQK6cV3z9k80yxAnFX9Y+a9+XysDhhfg==", + "requires": { + "async-foreach": "0.1.3", + "chalk": "1.1.3", + "cross-spawn": "3.0.1", + "gaze": "1.1.2", + "get-stdin": "4.0.1", + "glob": "7.1.2", + "in-publish": "2.0.0", + "lodash.assign": "4.2.0", + "lodash.clonedeep": "4.5.0", + "lodash.mergewith": "4.6.1", + "meow": "3.7.0", + "mkdirp": "0.5.1", + "nan": "2.10.0", + "node-gyp": "3.6.2", + "npmlog": "4.1.2", + "request": "2.79.0", + "sass-graph": "2.2.4", + "stdout-stream": "1.4.0", + "true-case-path": "1.0.2" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "requires": { + "ansi-styles": "2.2.1", + "escape-string-regexp": "1.0.5", + "has-ansi": "2.0.0", + "strip-ansi": "3.0.1", + "supports-color": "2.0.0" + } + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "requires": { + "ansi-regex": "2.1.1" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" + } + } + }, + "plugin-error": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", + "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", + "requires": { + "ansi-colors": "1.0.1", + "arr-diff": "4.0.0", + "arr-union": "3.1.0", + "extend-shallow": "3.0.2" + } + }, + "qs": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz", + "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=" + }, + "request": { + "version": "2.79.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz", + "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=", + "requires": { + "aws-sign2": "0.6.0", + "aws4": "1.6.0", + "caseless": "0.11.0", + "combined-stream": "1.0.5", + "extend": "3.0.1", + "forever-agent": "0.6.1", + "form-data": "2.1.4", + "har-validator": "2.0.6", + "hawk": "3.1.3", + "http-signature": "1.1.1", + "is-typedarray": "1.0.0", + "isstream": "0.1.2", + "json-stringify-safe": "5.0.1", + "mime-types": "2.1.17", + "oauth-sign": "0.8.2", + "qs": "6.3.2", + "stringstream": "0.0.5", + "tough-cookie": "2.3.3", + "tunnel-agent": "0.4.3", + "uuid": "3.2.1" + } + }, + "sntp": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", + "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", + "requires": { + "hoek": "2.16.3" + } + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "requires": { + "ansi-regex": "3.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" + } + } + }, + "supports-color": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz", + "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==", + "requires": { + "has-flag": "3.0.0" + } + }, + "tunnel-agent": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz", + "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=" + }, + "uuid": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz", + "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==" + } } }, "gulp-sourcemaps": { @@ -10394,6 +10755,18 @@ "request": "2.83.0" } }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "2.2.2", + "loose-envify": "1.3.1", + "resolve-pathname": "2.2.0", + "value-equal": "0.4.0", + "warning": "3.0.0" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -11640,6 +12013,15 @@ "esprima": "4.0.0" } }, + "js2xmlparser": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-3.0.0.tgz", + "integrity": "sha1-P7YOqgicVED5MZ9RdgzNB+JJlzM=", + "dev": true, + "requires": { + "xmlcreate": "1.0.2" + } + }, "jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", @@ -11746,6 +12128,49 @@ } } }, + "jsdoc": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-3.5.5.tgz", + "integrity": "sha512-6PxB65TAU4WO0Wzyr/4/YhlGovXl0EVYfpKbpSroSj0qBxT4/xod/l40Opkm38dRHRdQgdeY836M0uVnJQG7kg==", + "dev": true, + "requires": { + "babylon": "7.0.0-beta.19", + "bluebird": "3.5.1", + "catharsis": "0.8.9", + "escape-string-regexp": "1.0.5", + "js2xmlparser": "3.0.0", + "klaw": "2.0.0", + "marked": "0.3.19", + "mkdirp": "0.5.1", + "requizzle": "0.2.1", + "strip-json-comments": "2.0.1", + "taffydb": "2.6.2", + "underscore": "1.8.3" + }, + "dependencies": { + "babylon": { + "version": "7.0.0-beta.19", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.19.tgz", + "integrity": "sha512-Vg0C9s/REX6/WIXN37UKpv5ZhRi6A4pjHlpkE34+8/a6c2W1Q692n3hmc+SZG5lKRnaExLUbxtJ1SVT+KaCQ/A==", + "dev": true + }, + "klaw": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-2.0.0.tgz", + "integrity": "sha1-WcEo4Nxc5BAgEVEZTuucv4WGUPY=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11" + } + }, + "underscore": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz", + "integrity": "sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI=", + "dev": true + } + } + }, "jsdom": { "version": "11.5.1", "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.5.1.tgz", @@ -13074,6 +13499,11 @@ "object-assign": "4.1.1" } }, + "locale-currency": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/locale-currency/-/locale-currency-0.0.1.tgz", + "integrity": "sha1-yeFaIv9XW0tLuUekv5KsI2vR/ps=" + }, "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", @@ -13825,6 +14255,12 @@ "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.1.tgz", "integrity": "sha1-GZTfLTr0gR3lmmcUk0wrIpJzRRg=" }, + "marked": { + "version": "0.3.19", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz", + "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==", + "dev": true + }, "matchdep": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz", @@ -14423,9 +14859,9 @@ } }, "metamask-logo": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/metamask-logo/-/metamask-logo-2.1.3.tgz", - "integrity": "sha1-F1zleuUMc0Szsdwy0v0LCOOXj9A=", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/metamask-logo/-/metamask-logo-2.1.4.tgz", + "integrity": "sha512-hg/FzMfijpzGgLdZWH+KJKS56cRYaMEwcOq8UcnL/MznpgK4OMlJEaIfO8lg7P2F4Z74Ki+ulrTrFW6jf9L2bw==", "requires": { "gl-mat4": "1.1.4", "gl-vec3": "1.0.3" @@ -15170,6 +15606,7 @@ "version": "4.7.2", "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz", "integrity": "sha512-CaV+wLqZ7//Jdom5aUFCpGNoECd7BbNhjuwdsX/LkXBrHl8eb1Wjw4HvWqcFvhr5KuNgAk8i/myf/MQ1YYeroA==", + "dev": true, "requires": { "async-foreach": "0.1.3", "chalk": "1.1.3", @@ -15195,17 +15632,20 @@ "assert-plus": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", - "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=" + "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", + "dev": true }, "aws-sign2": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", - "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=" + "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", + "dev": true }, "boom": { "version": "2.10.1", "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", + "dev": true, "requires": { "hoek": "2.16.3" } @@ -15213,12 +15653,14 @@ "caseless": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz", - "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=" + "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=", + "dev": true }, "cross-spawn": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", + "dev": true, "requires": { "lru-cache": "4.1.1", "which": "1.3.0" @@ -15228,6 +15670,7 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", + "dev": true, "requires": { "boom": "2.10.1" } @@ -15236,6 +15679,7 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", + "dev": true, "requires": { "asynckit": "0.4.0", "combined-stream": "1.0.5", @@ -15245,12 +15689,14 @@ "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", - "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=" + "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", + "dev": true }, "har-validator": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz", "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=", + "dev": true, "requires": { "chalk": "1.1.3", "commander": "2.11.0", @@ -15262,6 +15708,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", + "dev": true, "requires": { "boom": "2.10.1", "cryptiles": "2.0.5", @@ -15272,12 +15719,14 @@ "hoek": { "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", - "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=" + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", + "dev": true }, "http-signature": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "dev": true, "requires": { "assert-plus": "0.2.0", "jsprim": "1.4.1", @@ -15287,12 +15736,14 @@ "qs": { "version": "6.3.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz", - "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=" + "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=", + "dev": true }, "request": { "version": "2.79.0", "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz", "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=", + "dev": true, "requires": { "aws-sign2": "0.6.0", "aws4": "1.6.0", @@ -15320,6 +15771,7 @@ "version": "1.0.9", "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", + "dev": true, "requires": { "hoek": "2.16.3" } @@ -15327,12 +15779,14 @@ "tunnel-agent": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz", - "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=" + "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=", + "dev": true }, "uuid": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz", - "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==" + "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==", + "dev": true } } }, @@ -18886,9 +19340,9 @@ } }, "prop-types": { - "version": "15.6.0", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", - "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", + "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -19195,6 +19649,12 @@ } } }, + "radgrad-jsdoc-template": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/radgrad-jsdoc-template/-/radgrad-jsdoc-template-1.1.3.tgz", + "integrity": "sha512-yk1XB6NlrP6JIr3xHzCrNwCmkONNgqM+sZxFAdmTU/CsaT7N/lns2/Wfa048li3wrao5b6KwYrdu6KgiGh9nIQ==", + "dev": true + }, "raf": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz", @@ -19292,9 +19752,9 @@ } }, "raven-js": { - "version": "3.24.0", - "resolved": "https://registry.npmjs.org/raven-js/-/raven-js-3.24.0.tgz", - "integrity": "sha512-+/ygcWib8PXAE7Xq53j1tYxCgkzFyp9z05LYAKp2PA9KwO4Ek74q1tkGwZyPWI/FoXOgas6jNtQ7O3tdPif6uA==" + "version": "3.24.2", + "resolved": "https://registry.npmjs.org/raven-js/-/raven-js-3.24.2.tgz", + "integrity": "sha512-Dy/FHDxuo5pXywVf8Nrs5utB2juMATpkxWGqHjVbpFD3m8CaWYLvkB5SEXjWFUZ5GvUsrBVVQ+Dfcp0x6Z7SOg==" }, "raw-body": { "version": "2.3.2", @@ -19316,7 +19776,7 @@ "fbjs": "0.8.16", "loose-envify": "1.3.1", "object-assign": "4.1.1", - "prop-types": "15.6.0" + "prop-types": "15.6.1" } }, "react-addons-css-transition-group": { @@ -19335,7 +19795,7 @@ "chain-function": "1.0.0", "dom-helpers": "3.3.1", "loose-envify": "1.3.1", - "prop-types": "15.6.0", + "prop-types": "15.6.1", "warning": "3.0.0" } } @@ -19355,7 +19815,7 @@ "fbjs": "0.8.16", "loose-envify": "1.3.1", "object-assign": "4.1.1", - "prop-types": "15.6.0" + "prop-types": "15.6.1" } }, "react-hyperscript": { @@ -19368,7 +19828,7 @@ "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.1.2.tgz", "integrity": "sha512-uAfIE4XEfBNXqjqQvd31Eoo20UkVk0xHJpfgP8HRT8gLczaN4LEmB1e2d8CJ5ziEt4clWnsk/1+QhTN27iO/EA==", "requires": { - "prop-types": "15.6.0" + "prop-types": "15.6.1" } }, "react-markdown": { @@ -19376,7 +19836,7 @@ "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-3.1.4.tgz", "integrity": "sha512-i8WueytRXbYzyJ2GemIOTMRx/NigPo8r4m3R/KvWD7r+PxPyc9ke66cI3DR7MBRSS+nVG82VWEgRDE1VaZUCqA==", "requires": { - "prop-types": "15.6.0", + "prop-types": "15.6.1", "remark-parse": "4.0.0", "unified": "6.1.6", "unist-util-visit": "1.3.0", @@ -19389,7 +19849,7 @@ "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==", "requires": { "performance-now": "0.2.0", - "prop-types": "15.6.0", + "prop-types": "15.6.1", "raf": "3.4.0" }, "dependencies": { @@ -19410,7 +19870,49 @@ "lodash": "4.17.4", "lodash-es": "4.17.4", "loose-envify": "1.3.1", - "prop-types": "15.6.0" + "prop-types": "15.6.1" + } + }, + "react-router": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz", + "integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==", + "requires": { + "history": "4.7.2", + "hoist-non-react-statics": "2.3.1", + "invariant": "2.2.2", + "loose-envify": "1.3.1", + "path-to-regexp": "1.7.0", + "prop-types": "15.6.1", + "warning": "3.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz", + "integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==", + "requires": { + "history": "4.7.2", + "invariant": "2.2.2", + "loose-envify": "1.3.1", + "prop-types": "15.6.1", + "react-router": "4.2.0", + "warning": "3.0.0" } }, "react-select": { @@ -19419,7 +19921,7 @@ "integrity": "sha512-c4CdxweEHN9ra85HGWjSjIMBlJ5c0fsIXOymLFZS5UbZEQCiJGHnZTVLTt6/wDh8RKQnxl85gHUwzhG5XZLcyw==", "requires": { "classnames": "2.2.5", - "prop-types": "15.6.0", + "prop-types": "15.6.1", "react-input-autosize": "2.1.2" } }, @@ -19428,7 +19930,7 @@ "resolved": "https://registry.npmjs.org/react-simple-file-input/-/react-simple-file-input-2.0.1.tgz", "integrity": "sha1-Fa1P/Hj+sbiCZJrWsBwDPvJ1ceY=", "requires": { - "prop-types": "15.6.0" + "prop-types": "15.6.1" } }, "react-test-renderer": { @@ -19472,7 +19974,7 @@ "resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz", "integrity": "sha1-obkhQ6oN9BRkL8sUHwh59UW8Wok=", "requires": { - "prop-types": "15.6.0", + "prop-types": "15.6.1", "react-motion": "0.5.2" } }, @@ -19499,7 +20001,7 @@ "classnames": "2.2.5", "dom-helpers": "3.3.1", "loose-envify": "1.3.1", - "prop-types": "15.6.0", + "prop-types": "15.6.1", "warning": "3.0.0" } }, @@ -20011,6 +20513,23 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "requizzle": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.1.tgz", + "integrity": "sha1-aUPDUwxNmn5G8c3dUcFY/GcM294=", + "dev": true, + "requires": { + "underscore": "1.6.0" + }, + "dependencies": { + "underscore": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz", + "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=", + "dev": true + } + } + }, "resolve": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz", @@ -20058,6 +20577,11 @@ "value-or-function": "3.0.0" } }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -22553,6 +23077,12 @@ } } }, + "taffydb": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/taffydb/-/taffydb-2.6.2.tgz", + "integrity": "sha1-fLy2S1oUG2ou/CxdLGe04VCyomg=", + "dev": true + }, "tap-parser": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/tap-parser/-/tap-parser-5.4.0.tgz", @@ -23345,6 +23875,23 @@ "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=", "dev": true }, + "underscore-contrib": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/underscore-contrib/-/underscore-contrib-0.3.0.tgz", + "integrity": "sha1-ZltmwkeD+PorGMn4y7Dix9SMJsc=", + "dev": true, + "requires": { + "underscore": "1.6.0" + }, + "dependencies": { + "underscore": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz", + "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=", + "dev": true + } + } + }, "undertaker": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.2.0.tgz", @@ -23736,6 +24283,11 @@ "spdx-expression-parse": "1.0.4" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "value-or-function": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz", @@ -25006,6 +25558,12 @@ "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=", "dev": true }, + "xmlcreate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-1.0.2.tgz", + "integrity": "sha1-+mv3YqYKQT+z3Y9LA8WyaSONMI8=", + "dev": true + }, "xmldom": { "version": "0.1.27", "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz", diff --git a/package.json b/package.json index 310e357ca..88f73a609 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,9 @@ "start": "gulp dev:extension", "mascara": "gulp dev:mascara & node ./mascara/example/server", "dist": "gulp dist", + "doc": "jsdoc -c development/tools/.jsdoc.json", "test": "npm run test:unit && npm run test:integration && npm run lint", - "test:unit": "cross-env 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 test/setup.js --recursive \"test/unit/**/*.js\"", "test:single": "cross-env METAMASK_ENV=test mocha --require test/helper.js", "test:integration": "npm run test:integration:build && npm run test:flat && npm run test:mascara", "test:integration:build": "gulp build:scss", @@ -75,6 +76,7 @@ "classnames": "^2.2.5", "clone": "^2.1.1", "copy-to-clipboard": "^3.0.8", + "currency-formatter": "^1.4.2", "debounce": "^1.0.0", "debounce-stream": "^2.0.0", "deep-extend": "^0.5.0", @@ -90,7 +92,7 @@ "eth-hd-keyring": "^1.2.1", "eth-json-rpc-filters": "^1.2.5", "eth-json-rpc-infura": "^3.0.0", - "eth-keyring-controller": "^2.1.4", + "eth-keyring-controller": "^2.2.0", "eth-phishing-detect": "^1.1.4", "eth-query": "^2.1.2", "eth-sig-util": "^1.4.2", @@ -100,8 +102,8 @@ "ethereumjs-util": "github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", "ethereumjs-wallet": "^0.6.0", "etherscan-link": "^1.0.2", - "ethjs": "^0.2.8", - "ethjs-contract": "^0.1.9", + "ethjs": "^0.3.4", + "ethjs-contract": "^0.2.0", "ethjs-ens": "^2.0.0", "ethjs-query": "^0.3.4", "express": "^4.15.5", @@ -114,7 +116,7 @@ "gulp-autoprefixer": "^5.0.0", "gulp-debug": "^3.2.0", "gulp-eslint": "^4.0.0", - "gulp-sass": "^3.1.0", + "gulp-sass": "^4.0.0", "hat": "0.0.3", "human-standard-token-abi": "^1.0.2", "idb-global": "^2.1.0", @@ -131,7 +133,7 @@ "lodash.uniqby": "^4.7.0", "loglevel": "^1.4.1", "metamascara": "^2.0.0", - "metamask-logo": "^2.1.2", + "metamask-logo": "^2.1.4", "mkdirp": "^0.5.1", "multiplex": "^6.7.0", "number-to-bn": "^1.7.0", @@ -145,17 +147,19 @@ "post-message-stream": "^3.0.0", "promise-filter": "^1.1.0", "promise-to-callback": "^1.0.0", + "prop-types": "^15.6.1", "pump": "^3.0.0", "pumpify": "^1.3.4", "qrcode-npm": "0.0.3", "ramda": "^0.24.1", - "raven-js": "^3.24.0", + "raven-js": "^3.24.2", "react": "^15.6.2", "react-addons-css-transition-group": "^15.6.0", "react-dom": "^15.6.2", "react-hyperscript": "^3.0.0", "react-markdown": "^3.0.0", "react-redux": "^5.0.5", + "react-router-dom": "^4.2.2", "react-select": "^1.0.0", "react-simple-file-input": "^2.0.0", "react-tippy": "^1.2.2", @@ -234,6 +238,7 @@ "gulp-zip": "^4.0.0", "image-size": "^0.6.2", "isomorphic-fetch": "^2.2.1", + "jsdoc": "^3.5.5", "jsdom": "^11.2.0", "jsdom-global": "^3.0.2", "jshint-stylish": "~2.2.1", @@ -255,6 +260,7 @@ "prompt": "^1.0.0", "qs": "^6.2.0", "qunitjs": "^2.4.1", + "radgrad-jsdoc-template": "^1.1.3", "react-addons-test-utils": "^15.5.1", "react-test-renderer": "^15.6.2", "react-testutils-additions": "^15.2.0", @@ -272,6 +278,6 @@ "watchify": "^3.9.0" }, "engines": { - "node": ">=0.8.0" + "node": ">=8.0.0" } } diff --git a/test/integration/index.js b/test/integration/index.js index b266ddf37..7789eb283 100644 --- a/test/integration/index.js +++ b/test/integration/index.js @@ -2,7 +2,8 @@ const fs = require('fs') const path = require('path') const pump = require('pump') const browserify = require('browserify') -const tests = fs.readdirSync(path.join(__dirname, 'lib')) +let tests = fs.readdirSync(path.join(__dirname, 'lib')) +tests = tests.filter(fln => fln.match(/send/)) const bundlePath = path.join(__dirname, 'bundle.js') const b = browserify() diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js index f1116d1a6..3936ac5fa 100644 --- a/test/integration/lib/confirm-sig-requests.js +++ b/test/integration/lib/confirm-sig-requests.js @@ -21,11 +21,22 @@ async function runConfirmSigRequestsTest(assert, done) { selectState.val('confirm sig requests') reactTriggerChange(selectState[0]) + // await timeout(1000000) + + const pendingRequestItem = $.find('.tx-list-item.tx-list-pending-item-container.tx-list-clickable') + + if (pendingRequestItem[0]) { + pendingRequestItem[0].click() + } + let confirmSigHeadline = await queryAsync($, '.request-signature__headline') assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested') + let confirmSigMessage = await queryAsync($, '.request-signature__notice') + assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/)) + let confirmSigRowValue = await queryAsync($, '.request-signature__row-value') - assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/)) + assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0') let confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg') confirmSigSignButton[0].click() @@ -33,11 +44,8 @@ async function runConfirmSigRequestsTest(assert, done) { confirmSigHeadline = await queryAsync($, '.request-signature__headline') assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested') - let confirmSigMessage = await queryAsync($, '.request-signature__notice') - assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/)) - confirmSigRowValue = await queryAsync($, '.request-signature__row-value') - assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0') + assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/)) confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg') confirmSigSignButton[0].click() diff --git a/test/integration/lib/currency-localization.js b/test/integration/lib/currency-localization.js new file mode 100644 index 000000000..7705c9720 --- /dev/null +++ b/test/integration/lib/currency-localization.js @@ -0,0 +1,28 @@ +const reactTriggerChange = require('../../lib/react-trigger-change') +const { + timeout, + queryAsync, + findAsync, +} = require('../../lib/util') + +QUnit.module('currency localization') + +QUnit.test('renders localized currency', (assert) => { + const done = assert.async() + runCurrencyLocalizationTest(assert).then(done).catch((err) => { + assert.notOk(err, `Error was thrown: ${err.stack}`) + done() + }) +}) + +async function runCurrencyLocalizationTest(assert, done) { + console.log('*** start runCurrencyLocalizationTest') + const selectState = await queryAsync($, 'select') + selectState.val('currency localization') + reactTriggerChange(selectState[0]) + await timeout(1000) + const txView = await queryAsync($, '.tx-view') + const heroBalance = await findAsync($(txView), '.hero-balance') + const fiatAmount = await findAsync($(heroBalance), '.fiat-amount') + assert.equal(fiatAmount[0].textContent, '₱102,707.97') +} diff --git a/test/integration/lib/mascara-first-time.js b/test/integration/lib/mascara-first-time.js index 564852585..5e07ab0b4 100644 --- a/test/integration/lib/mascara-first-time.js +++ b/test/integration/lib/mascara-first-time.js @@ -13,6 +13,9 @@ async function runFirstTimeUsageTest (assert, done) { await skipNotices(app) + const welcomeButton = (await findAsync(app, '.welcome-screen__button'))[0] + welcomeButton.click() + // Scroll through terms const title = (await findAsync(app, '.create-password__title')).text() assert.equal(title, 'Create Password', 'create password screen') diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index 163f3658c..09a074750 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -53,7 +53,7 @@ async function runSendFlowTest(assert, done) { assert.equal(sendFromDropdownList.children().length, 4, 'send from dropdown shows all accounts') sendFromDropdownList.children()[1].click() - sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name') + sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name') assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name') let sendToFieldInput = await queryAsync($, '.send-v2__to-autocomplete__input') @@ -91,7 +91,7 @@ async function runSendFlowTest(assert, done) { ) assert.equal( sendGasField.find('.currency-display__converted-value')[0].textContent, - '0.24 USD', + '$0.24 USD', 'send gas field should show estimated gas total converted to USD' ) @@ -118,7 +118,7 @@ async function runSendFlowTest(assert, done) { ) assert.equal( (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' ) @@ -138,9 +138,9 @@ async function runSendFlowTest(assert, done) { const confirmScreenRows = await queryAsync($, '.confirm-screen-rows') const confirmScreenGas = confirmScreenRows.find('.currency-display__converted-value')[0] - assert.equal(confirmScreenGas.textContent, '3.60 USD', 'confirm screen should show correct gas') + assert.equal(confirmScreenGas.textContent, '$3.60 USD', 'confirm screen should show correct gas') const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[2] - assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total') + assert.equal(confirmScreenTotal.textContent, '$2,405.36 USD', 'confirm screen should show correct total') const confirmScreenBackButton = await queryAsync($, '.page-container__back-button') confirmScreenBackButton[0].click() @@ -164,17 +164,27 @@ async function runSendFlowTest(assert, done) { const sendButtonInEdit = await queryAsync($, '.btn-primary--lg.page-container__footer-button') assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered') - sendButtonInEdit[0].click() - // 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('send new ui') reactTriggerChange(selectState[0]) - const confirmScreenConfirmButton = await queryAsync($, '.btn-confirm.page-container__footer-button') - console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]); - confirmScreenConfirmButton[0].click() - const txView = await queryAsync($, '.tx-view') - console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]); + const cancelButtonInEdit = await queryAsync($, '.btn-secondary--lg.page-container__footer-button') + cancelButtonInEdit[0].click() + // sendButtonInEdit[0].click() + + // // TODO: Need a way to mock background so that we can test correct transition from editing to confirm + // selectState.val('confirm new ui') + // reactTriggerChange(selectState[0]) + + + // const confirmScreenConfirmButton = await queryAsync($, '.btn-confirm.page-container__footer-button') + // console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]); + // confirmScreenConfirmButton[0].click() + + // await timeout(10000000) + + // const txView = await queryAsync($, '.tx-view') + // 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') } diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js index d0056eb94..0c0c5a77f 100644 --- a/test/integration/lib/tx-list-items.js +++ b/test/integration/lib/tx-list-items.js @@ -53,7 +53,7 @@ async function runTxListItemsTest(assert, done) { const confirmedTokenTx = txListItems[6] const confirmedTokenTxAddress = await findAsync($(confirmedTokenTx), '.tx-list-account') - assert.equal(confirmedTokenTxAddress[0].textContent, '0xe7884118...81a9', 'confirmedTokenTx has correct address') + assert.equal(confirmedTokenTxAddress[0].textContent, '0xE7884118...81a9', 'confirmedTokenTx has correct address') const rejectedTx = txListItems[7] const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.tx-list-status') diff --git a/test/setup.js b/test/setup.js new file mode 100644 index 000000000..8e7965a37 --- /dev/null +++ b/test/setup.js @@ -0,0 +1,5 @@ +require('babel-register')({ + ignore: name => name.includes('node_modules') && !name.includes('obs-store'), +}) + +require('./helper') diff --git a/test/unit/ComposableObservableStore.js b/test/unit/ComposableObservableStore.js new file mode 100644 index 000000000..3fba200c1 --- /dev/null +++ b/test/unit/ComposableObservableStore.js @@ -0,0 +1,35 @@ +const assert = require('assert') +const ComposableObservableStore = require('../../app/scripts/lib/ComposableObservableStore') +const ObservableStore = require('obs-store') + +describe('ComposableObservableStore', () => { + it('should register initial state', () => { + const store = new ComposableObservableStore('state') + assert.strictEqual(store.getState(), 'state') + }) + + it('should register initial structure', () => { + const testStore = new ObservableStore() + const store = new ComposableObservableStore(null, { TestStore: testStore }) + testStore.putState('state') + assert.deepEqual(store.getState(), { TestStore: 'state' }) + }) + + it('should update structure', () => { + const testStore = new ObservableStore() + const store = new ComposableObservableStore() + store.updateStructure({ TestStore: testStore }) + testStore.putState('state') + assert.deepEqual(store.getState(), { TestStore: 'state' }) + }) + + it('should return flattened state', () => { + const fooStore = new ObservableStore({ foo: 'foo' }) + const barStore = new ObservableStore({ bar: 'bar' }) + const store = new ComposableObservableStore(null, { + FooStore: fooStore, + BarStore: barStore, + }) + assert.deepEqual(store.getFlatState(), { foo: 'foo', bar: 'bar' }) + }) +}) diff --git a/test/unit/balance-formatter-test.js b/test/unit/balance-formatter-test.js new file mode 100644 index 000000000..ab6daa19c --- /dev/null +++ b/test/unit/balance-formatter-test.js @@ -0,0 +1,27 @@ +const assert = require('assert') +const currencyFormatter = require('currency-formatter') +const infuraConversion = require('../../ui/app/infura-conversion.json') + +describe('currencyFormatting', function () { + it('be able to format any infura currency', function (done) { + const number = 10000 + + infuraConversion.objects.forEach((conversion) => { + const code = conversion.quote.code.toUpperCase() + const result = currencyFormatter.format(number, { code }) + + switch (code) { + case 'USD': + assert.equal(result, '$10,000.00') + break + case 'JPY': + assert.equal(result, '¥10,000') + break + default: + assert.ok(result, `Currency ${code} formatted as ${result}`) + } + }) + + done() + }) +}) diff --git a/test/unit/migrator-test.js b/test/unit/migrator-test.js index 2bad7da51..4404e1dc4 100644 --- a/test/unit/migrator-test.js +++ b/test/unit/migrator-test.js @@ -50,11 +50,19 @@ describe('Migrator', () => { const migrator = new Migrator({ migrations: liveMigrations }) migrator.migrateData(firstTimeState) .then((migratedData) => { - console.log(migratedData) const last = liveMigrations.length - 1 assert.equal(migratedData.meta.version, liveMigrations[last].version) done() }).catch(done) }) + it('should emit an error', function (done) { + this.timeout(15000) + const migrator = new Migrator({ migrations: [{ version: 1, migrate: async () => { throw new Error('test') } } ] }) + migrator.on('error', () => done()) + migrator.migrateData({ meta: {version: 0} }) + .then((migratedData) => { + }).catch(done) + }) + }) diff --git a/test/unit/network-contoller-test.js b/test/unit/network-contoller-test.js index dd0b52365..2b905718b 100644 --- a/test/unit/network-contoller-test.js +++ b/test/unit/network-contoller-test.js @@ -1,6 +1,10 @@ const assert = require('assert') const nock = require('nock') const NetworkController = require('../../app/scripts/controllers/network') +const { + getNetworkDisplayName, + getNetworkEndpoints, +} = require('../../app/scripts/controllers/network/util') const { createTestProviderTools } = require('../stub/provider') const providerResultStub = {} @@ -79,4 +83,40 @@ describe('# Network Controller', function () { }) }) }) -})
\ No newline at end of file +}) + +describe('# Network utils', () => { + it('getNetworkDisplayName should return the correct network name', () => { + const tests = [ + { + input: 3, + expected: 'Ropsten', + }, { + input: 4, + expected: 'Rinkeby', + }, { + input: 42, + expected: 'Kovan', + }, { + input: 'ropsten', + expected: 'Ropsten', + }, { + input: 'rinkeby', + expected: 'Rinkeby', + }, { + input: 'kovan', + expected: 'Kovan', + }, { + input: 'mainnet', + expected: 'Main Ethereum Network', + }, + ] + + tests.forEach(({ input, expected }) => assert.equal(getNetworkDisplayName(input), expected)) + }) + + it('getNetworkEndpoints should return the correct endpoints', () => { + assert.equal(getNetworkEndpoints('networkBeta').ropsten, 'https://ropsten.infura.io/metamask2') + assert.equal(getNetworkEndpoints('network').rinkeby, 'https://rinkeby.infura.io/metamask') + }) +}) diff --git a/test/unit/token-rates-controller.js b/test/unit/token-rates-controller.js new file mode 100644 index 000000000..a49547313 --- /dev/null +++ b/test/unit/token-rates-controller.js @@ -0,0 +1,29 @@ +const assert = require('assert') +const sinon = require('sinon') +const TokenRatesController = require('../../app/scripts/controllers/token-rates') +const ObservableStore = require('obs-store') + +describe('TokenRatesController', () => { + it('should listen for preferences store updates', () => { + const preferences = new ObservableStore({ tokens: [] }) + const controller = new TokenRatesController({ preferences }) + preferences.putState({ tokens: ['foo'] }) + assert.deepEqual(controller._tokens, ['foo']) + }) + + it('should poll on correct interval', async () => { + const stub = sinon.stub(global, 'setInterval') + new TokenRatesController({ interval: 1337 }) // eslint-disable-line no-new + assert.strictEqual(stub.getCall(0).args[1], 1337) + stub.restore() + }) + + it('should fetch each token rate based on address', async () => { + const controller = new TokenRatesController() + controller.isActive = true + controller.fetchExchangeRate = address => address + controller.tokens = [{ address: 'foo' }, { address: 'bar' }] + await controller.updateExchangeRates() + assert.deepEqual(controller.store.getState().contractExchangeRates, { foo: 'foo', bar: 'bar' }) + }) +}) diff --git a/ui/app/actions.js b/ui/app/actions.js index aae037a2d..7b838940a 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1,8 +1,14 @@ const abi = require('human-standard-token-abi') const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url') const { getTokenAddressFromTokenObject } = require('./util') +const { + calcGasTotal, + getParamsForGasEstimate, + calcTokenBalance, +} = require('./components/send_/send.utils') const ethUtil = require('ethereumjs-util') const { fetchLocale } = require('../i18n-helper') +const log = require('loglevel') var actions = { _setBackgroundConnection: _setBackgroundConnection, @@ -172,14 +178,16 @@ var actions = { updateGasLimit, updateGasPrice, updateGasTotal, + setGasTotal, + setSendTokenBalance, updateSendTokenBalance, updateSendFrom, updateSendTo, updateSendAmount, updateSendMemo, - updateSendErrors, setMaxModeTo, updateSend, + updateSendErrors, clearSend, setSelectedAddress, // app messages @@ -222,8 +230,6 @@ var actions = { coinBaseSubview: coinBaseSubview, SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW', shapeShiftSubview: shapeShiftSubview, - UPDATE_TOKEN_EXCHANGE_RATE: 'UPDATE_TOKEN_EXCHANGE_RATE', - updateTokenExchangeRate, PAIR_UPDATE: 'PAIR_UPDATE', pairUpdate: pairUpdate, coinShiftRquest: coinShiftRquest, @@ -348,16 +354,14 @@ function transitionBackward () { } } -function confirmSeedWords () { - return (dispatch) => { - dispatch(actions.showLoadingIndication()) - log.debug(`background.clearSeedWordCache`) +function clearSeedWordCache () { + log.debug(`background.clearSeedWordCache`) + return dispatch => { return new Promise((resolve, reject) => { background.clearSeedWordCache((err, account) => { - dispatch(actions.hideLoadingIndication()) if (err) { dispatch(actions.displayWarning(err.message)) - reject(err) + return reject(err) } log.info('Seed word cache cleared. ' + account) @@ -368,6 +372,22 @@ function confirmSeedWords () { } } +function confirmSeedWords () { + return async dispatch => { + dispatch(actions.showLoadingIndication()) + const account = await dispatch(clearSeedWordCache()) + return dispatch(setIsRevealingSeedWords(false)) + .then(() => { + dispatch(actions.hideLoadingIndication()) + return account + }) + .catch(() => { + dispatch(actions.hideLoadingIndication()) + return account + }) + } +} + function createNewVaultAndRestore (password, seed) { return (dispatch) => { dispatch(actions.showLoadingIndication()) @@ -449,11 +469,13 @@ function requestRevealSeed (password) { } dispatch(actions.showNewVaultSeed(result)) - dispatch(actions.hideLoadingIndication()) resolve() }) }) }) + .then(() => dispatch(setIsRevealingSeedWords(true))) + .then(() => dispatch(actions.hideLoadingIndication())) + .catch(() => dispatch(actions.hideLoadingIndication())) } } @@ -573,35 +595,47 @@ function signMsg (msgData) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - log.debug(`actions calling background.signMessage`) - background.signMessage(msgData, (err, newState) => { - log.debug('signMessage called back') - dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.hideLoadingIndication()) + return new Promise((resolve, reject) => { + log.debug(`actions calling background.signMessage`) + background.signMessage(msgData, (err, newState) => { + log.debug('signMessage called back') + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) - if (err) log.error(err) - if (err) return dispatch(actions.displayWarning(err.message)) + if (err) { + log.error(err) + dispatch(actions.displayWarning(err.message)) + return reject(err) + } - dispatch(actions.completedTx(msgData.metamaskId)) + dispatch(actions.completedTx(msgData.metamaskId)) + return resolve(msgData) + }) }) } } function signPersonalMsg (msgData) { log.debug('action - signPersonalMsg') - return (dispatch) => { + return dispatch => { dispatch(actions.showLoadingIndication()) - log.debug(`actions calling background.signPersonalMessage`) - background.signPersonalMessage(msgData, (err, newState) => { - log.debug('signPersonalMessage called back') - dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.hideLoadingIndication()) + return new Promise((resolve, reject) => { + log.debug(`actions calling background.signPersonalMessage`) + background.signPersonalMessage(msgData, (err, newState) => { + log.debug('signPersonalMessage called back') + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) - if (err) log.error(err) - if (err) return dispatch(actions.displayWarning(err.message)) + if (err) { + log.error(err) + dispatch(actions.displayWarning(err.message)) + return reject(err) + } - dispatch(actions.completedTx(msgData.metamaskId)) + dispatch(actions.completedTx(msgData.metamaskId)) + return resolve(msgData) + }) }) } } @@ -611,16 +645,22 @@ function signTypedMsg (msgData) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - log.debug(`actions calling background.signTypedMessage`) - background.signTypedMessage(msgData, (err, newState) => { - log.debug('signTypedMessage called back') - dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.hideLoadingIndication()) + return new Promise((resolve, reject) => { + log.debug(`actions calling background.signTypedMessage`) + background.signTypedMessage(msgData, (err, newState) => { + log.debug('signTypedMessage called back') + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) - if (err) log.error(err) - if (err) return dispatch(actions.displayWarning(err.message)) + if (err) { + log.error(err) + dispatch(actions.displayWarning(err.message)) + return reject(err) + } - dispatch(actions.completedTx(msgData.metamaskId)) + dispatch(actions.completedTx(msgData.metamaskId)) + return resolve(msgData) + }) }) } } @@ -683,14 +723,64 @@ function updateGasPrice (gasPrice) { } } -function updateGasTotal (gasTotal) { +function setGasTotal (gasTotal) { return { type: actions.UPDATE_GAS_TOTAL, value: gasTotal, } } -function updateSendTokenBalance (tokenBalance) { +function updateGasTotal ({ selectedAddress, selectedToken, data }) { + return (dispatch) => { + const { symbol } = selectedToken || {} + const estimateGasParams = getParamsForGasEstimate(selectedAddress, symbol, data) + return Promise.all([ + dispatch(actions.getGasPrice()), + dispatch(actions.estimateGas(estimateGasParams)), + ]) + .then(([gasPrice, gas]) => { + const newGasTotal = calcGasTotal(gas, gasPrice) + dispatch(actions.setGasTotal(newGasTotal)) + dispatch(updateSendErrors({ gasLoadingError: null })) + }) + .catch(err => { + log.error(err) + dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' })) + }) + } +} + +function updateSendTokenBalance ({ + selectedToken, + tokenContract, + address, +}) { + return (dispatch) => { + const tokenBalancePromise = tokenContract + ? tokenContract.balanceOf(address) + : Promise.resolve() + return tokenBalancePromise + .then(usersToken => { + if (usersToken) { + const newTokenBalance = calcTokenBalance({ selectedToken, usersToken }) + dispatch(setSendTokenBalance(newTokenBalance)) + } + }) + .catch(err => { + log.error(err) + updateSendErrors({ tokenBalance: 'tokenBalanceError' }) + }) + } +} + +function updateSendErrors (errorObject) { + return { + type: actions.UPDATE_SEND_ERRORS, + value: errorObject, + } +} + +function setSendTokenBalance (tokenBalance) { return { type: actions.UPDATE_SEND_TOKEN_BALANCE, value: tokenBalance, @@ -725,13 +815,6 @@ function updateSendMemo (memo) { } } -function updateSendErrors (error) { - return { - type: actions.UPDATE_SEND_ERRORS, - value: error, - } -} - function setMaxModeTo (bool) { return { type: actions.UPDATE_MAX_MODE, @@ -800,17 +883,24 @@ function updateTransaction (txData) { function updateAndApproveTx (txData) { log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData)) return (dispatch) => { - log.debug(`actions calling background.updateAndApproveTx.`) - background.updateAndApproveTransaction(txData, (err) => { - dispatch(actions.hideLoadingIndication()) - dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) - dispatch(actions.clearSend()) - if (err) { - dispatch(actions.txError(err)) - dispatch(actions.goHome()) - return log.error(err.message) - } - dispatch(actions.completedTx(txData.id)) + log.debug(`actions calling background.updateAndApproveTx`) + + return new Promise((resolve, reject) => { + background.updateAndApproveTransaction(txData, err => { + dispatch(actions.hideLoadingIndication()) + dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) + dispatch(actions.clearSend()) + + if (err) { + dispatch(actions.txError(err)) + dispatch(actions.goHome()) + log.error(err.message) + reject(err) + } + + dispatch(actions.completedTx(txData.id)) + resolve(txData) + }) }) } } @@ -838,29 +928,77 @@ function txError (err) { } function cancelMsg (msgData) { - log.debug(`background.cancelMessage`) - background.cancelMessage(msgData.id) - return actions.completedTx(msgData.id) + return dispatch => { + dispatch(actions.showLoadingIndication()) + + return new Promise((resolve, reject) => { + log.debug(`background.cancelMessage`) + background.cancelMessage(msgData.id, (err, newState) => { + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) + + if (err) { + return reject(err) + } + + dispatch(actions.completedTx(msgData.id)) + return resolve(msgData) + }) + }) + } } function cancelPersonalMsg (msgData) { - const id = msgData.id - background.cancelPersonalMessage(id) - return actions.completedTx(id) + return dispatch => { + dispatch(actions.showLoadingIndication()) + + return new Promise((resolve, reject) => { + const id = msgData.id + background.cancelPersonalMessage(id, (err, newState) => { + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) + + if (err) { + return reject(err) + } + + dispatch(actions.completedTx(id)) + return resolve(msgData) + }) + }) + } } function cancelTypedMsg (msgData) { - const id = msgData.id - background.cancelTypedMessage(id) - return actions.completedTx(id) + return dispatch => { + dispatch(actions.showLoadingIndication()) + + return new Promise((resolve, reject) => { + const id = msgData.id + background.cancelTypedMessage(id, (err, newState) => { + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) + + if (err) { + return reject(err) + } + + dispatch(actions.completedTx(id)) + return resolve(msgData) + }) + }) + } } function cancelTx (txData) { - return (dispatch) => { + return dispatch => { log.debug(`background.cancelTransaction`) - background.cancelTransaction(txData.id, () => { - dispatch(actions.clearSend()) - dispatch(actions.completedTx(txData.id)) + return new Promise((resolve, reject) => { + background.cancelTransaction(txData.id, () => { + dispatch(actions.clearSend()) + dispatch(actions.completedTx(txData.id)) + resolve(txData) + }) }) } } @@ -1251,12 +1389,13 @@ function markNoticeRead (notice) { dispatch(actions.displayWarning(err)) return reject(err) } + if (notice) { dispatch(actions.showNotice(notice)) - resolve() + resolve(true) } else { dispatch(actions.clearNotices()) - resolve() + resolve(false) } }) }) @@ -1679,28 +1818,6 @@ function shapeShiftRequest (query, options, cb) { } } -function updateTokenExchangeRate (token = '') { - const pair = `${token.toLowerCase()}_eth` - - return dispatch => { - if (!token) { - return - } - - shapeShiftRequest('marketinfo', { pair }, marketinfo => { - if (!marketinfo.error) { - dispatch({ - type: actions.UPDATE_TOKEN_EXCHANGE_RATE, - payload: { - pair, - marketinfo, - }, - }) - } - }) - } -} - function setFeatureFlag (feature, activated, notificationType) { return (dispatch) => { dispatch(actions.showLoadingIndication()) @@ -1775,7 +1892,7 @@ function forceUpdateMetamaskState (dispatch) { } dispatch(actions.updateMetamaskState(newState)) - resolve() + resolve(newState) }) }) } @@ -1858,3 +1975,11 @@ function updateNetworkEndpointType (networkEndpointType) { value: networkEndpointType, } } + +function setIsRevealingSeedWords (reveal) { + return dispatch => { + log.debug(`background.setIsRevealingSeedWords`) + background.setIsRevealingSeedWords(reveal) + return forceUpdateMetamaskState(dispatch) + } +} diff --git a/ui/app/app.js b/ui/app/app.js index 0b7a7a1e0..6511979b2 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,62 +1,420 @@ -const inherits = require('util').inherits -const Component = require('react').Component +const { Component } = require('react') +const PropTypes = require('prop-types') const connect = require('react-redux').connect +const { Route, Switch, withRouter } = require('react-router-dom') +const { compose } = require('recompose') const h = require('react-hyperscript') -const PropTypes = require('prop-types') const actions = require('./actions') const classnames = require('classnames') +const log = require('loglevel') -// mascara -const MascaraFirstTime = require('../../mascara/src/app/first-time').default -const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default // init -const OldUIInitializeMenuScreen = require('./first-time/init-menu') -const InitializeMenuScreen = MascaraFirstTime -const NewKeyChainScreen = require('./new-keychain') -const WelcomeScreen = require('./welcome-screen').default - +const InitializeScreen = require('../../mascara/src/app/first-time').default // accounts -const MainContainer = require('./main-container') -const SendTransactionScreen2 = require('./components/send/send-v2-container') +const SendTransactionScreen = require('./components/send_/send.container') const ConfirmTxScreen = require('./conf-tx') -// notice -const NoticeScreen = require('./components/notice') -const generateLostAccountsNotice = require('../lib/lost-accounts-notice') // slideout menu const WalletView = require('./components/wallet-view') // other views -const Settings = require('./settings') -const AddTokenScreen = require('./add-token') -const Import = require('./accounts/import') -const NewAccount = require('./accounts/new-account') +const Home = require('./components/pages/home') +const Authenticated = require('./components/pages/authenticated') +const Initialized = require('./components/pages/initialized') +const Settings = require('./components/pages/settings') +const UnlockPage = require('./components/pages/unlock') +const RestoreVaultPage = require('./components/pages/keychains/restore-vault') +const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') +const AddTokenPage = require('./components/pages/add-token') +const CreateAccountPage = require('./components/pages/create-account') +const NoticeScreen = require('./components/pages/notice') + const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') -const BuyView = require('./components/buy-button-subview') -const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') -const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') -const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') const AccountMenu = require('./components/account-menu') -const QrView = require('./components/qr-code') // Global Modals const Modal = require('./components/modals/index').Modal -App.contextTypes = { - t: PropTypes.func, -} +// Routes +const { + DEFAULT_ROUTE, + UNLOCK_ROUTE, + SETTINGS_ROUTE, + REVEAL_SEED_ROUTE, + RESTORE_VAULT_ROUTE, + ADD_TOKEN_ROUTE, + NEW_ACCOUNT_ROUTE, + SEND_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + INITIALIZE_ROUTE, + NOTICE_ROUTE, +} = require('./routes') + +class App extends Component { + componentWillMount () { + const { + currentCurrency, + setCurrentCurrencyToUSD, + isRevealingSeedWords, + clearSeedWords, + } = this.props + + if (!currentCurrency) { + setCurrentCurrencyToUSD() + } + + if (isRevealingSeedWords) { + clearSeedWords() + } + } + + renderRoutes () { + const exact = true + + return ( + h(Switch, [ + h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }), + h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedConfirmation }), + h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), + h(Initialized, { path: SETTINGS_ROUTE, component: Settings }), + h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), + h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen }), + h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }), + h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen }), + h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), + h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }), + h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }), + ]) + ) + } + + render () { + const { + isLoading, + loadingMessage, + network, + isMouseUser, + provider, + frequentRpcList, + currentView, + setMouseUserState, + } = this.props + const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' + const loadMessage = loadingMessage || isLoadingNetwork ? + this.getConnectingLabel() : null + log.debug('Main ui render function') + + return ( + h('.flex-column.full-height', { + className: classnames({ 'mouse-user-styles': isMouseUser }), + style: { + overflowX: 'hidden', + position: 'relative', + alignItems: 'center', + }, + tabIndex: '0', + onClick: () => setMouseUserState(true), + onKeyDown: (e) => { + if (e.keyCode === 9) { + setMouseUserState(false) + } + }, + }, [ + + // global modal + h(Modal, {}, []), + + // app bar + this.renderAppBar(), + + // sidebar + this.renderSidebar(), + + // network dropdown + h(NetworkDropdown, { + provider, + frequentRpcList, + }, []), + + h(AccountMenu), + + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), + + // content + this.renderRoutes(), + ]) + ) + } + + renderGlobalModal () { + return h(Modal, { + ref: 'modalRef', + }, [ + // h(BuyOptions, {}, []), + ]) + } + + renderSidebar () { + return h('div', [ + h('style', ` + .sidebar-enter { + transition: transform 300ms ease-in-out; + transform: translateX(-100%); + } + .sidebar-enter.sidebar-enter-active { + transition: transform 300ms ease-in-out; + transform: translateX(0%); + } + .sidebar-leave { + transition: transform 200ms ease-out; + transform: translateX(0%); + } + .sidebar-leave.sidebar-leave-active { + transition: transform 200ms ease-out; + transform: translateX(-100%); + } + `), + + h(ReactCSSTransitionGroup, { + transitionName: 'sidebar', + transitionEnterTimeout: 300, + transitionLeaveTimeout: 200, + }, [ + // A second instance of Walletview is used for non-mobile viewports + this.props.sidebarOpen ? h(WalletView, { + responsiveDisplayClassname: '.sidebar', + style: {}, + }) : undefined, + + ]), + + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div.sidebar-overlay', { + style: {}, + onClick: () => { + this.props.hideSidebar() + }, + }, []) : undefined, + ]) + } + + renderAppBar () { + const { + isUnlocked, + network, + provider, + networkDropdownOpen, + showNetworkDropdown, + hideNetworkDropdown, + isInitialized, + welcomeScreenSeen, + isPopup, + betaUI, + } = this.props + + if (window.METAMASK_UI_TYPE === 'notification') { + return null + } + + const props = this.props + const {isMascara, isOnboarding} = props + + // Do not render header if user is in mascara onboarding + if (isMascara && isOnboarding) { + return null + } + + // Do not render header if user is in mascara buy ether + if (isMascara && props.currentView.name === 'buyEth') { + return null + } + + return ( + + h('.full-width', { + style: {}, + }, [ + + (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', { + className: classnames({ + 'app-header--initialized': !isOnboarding, + }), + }, [ + h('div.app-header-contents', {}, [ + h('div.left-menu-wrapper', { + onClick: () => props.history.push(DEFAULT_ROUTE), + }, [ + // mini logo + h('img.metafox-icon', { + height: 42, + width: 42, + src: '/images/metamask-fox.svg', + }), + + // metamask name + h('.flex-row', [ + h('h1', this.context.t('appName')), + h('div.beta-label', this.context.t('beta')), + ]), + + ]), + + betaUI && isInitialized && h('div.header__right-actions', [ + h('div.network-component-wrapper', { + style: {}, + }, [ + // Network Indicator + h(NetworkIndicator, { + network, + provider, + disabled: this.props.location.pathname === CONFIRM_TRANSACTION_ROUTE, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + return networkDropdownOpen === false + ? showNetworkDropdown() + : hideNetworkDropdown() + }, + }), + + ]), + + isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ + h(Identicon, { + address: this.props.selectedAddress, + diameter: 32, + }), + ]), + ]), + ]), + ]), -module.exports = connect(mapStateToProps, mapDispatchToProps)(App) + !isInitialized && !isPopup && betaUI && h('.alpha-warning__container', {}, [ + h('h2', { + className: classnames({ + 'alpha-warning': welcomeScreenSeen, + 'alpha-warning-welcome-screen': !welcomeScreenSeen, + }), + }, 'Please be aware that this version is still under development'), + ]), + ]) + ) + } -inherits(App, Component) -function App () { Component.call(this) } + toggleMetamaskActive () { + if (!this.props.isUnlocked) { + // currently inactive: redirect to password box + var passwordBox = document.querySelector('input[type=password]') + if (!passwordBox) return + passwordBox.focus() + } else { + // currently active: deactivate + this.props.dispatch(actions.lockMetamask(false)) + } + } + + getConnectingLabel = function () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = this.context.t('connectingToMainnet') + } else if (providerName === 'ropsten') { + name = this.context.t('connectingToRopsten') + } else if (providerName === 'kovan') { + name = this.context.t('connectingToRopsten') + } else if (providerName === 'rinkeby') { + name = this.context.t('connectingToRinkeby') + } else { + name = this.context.t('connectingToUnknown') + } + + return name + } + + getNetworkName () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = this.context.t('mainnet') + } else if (providerName === 'ropsten') { + name = this.context.t('ropsten') + } else if (providerName === 'kovan') { + name = this.context.t('kovan') + } else if (providerName === 'rinkeby') { + name = this.context.t('rinkeby') + } else { + name = this.context.t('unknownNetwork') + } + + return name + } +} + +App.propTypes = { + currentCurrency: PropTypes.string, + setCurrentCurrencyToUSD: PropTypes.func, + isLoading: PropTypes.bool, + loadingMessage: PropTypes.string, + network: PropTypes.string, + provider: PropTypes.object, + frequentRpcList: PropTypes.array, + currentView: PropTypes.object, + sidebarOpen: PropTypes.bool, + hideSidebar: PropTypes.func, + isMascara: PropTypes.bool, + isOnboarding: PropTypes.bool, + isUnlocked: PropTypes.bool, + networkDropdownOpen: PropTypes.bool, + showNetworkDropdown: PropTypes.func, + hideNetworkDropdown: PropTypes.func, + history: PropTypes.object, + location: PropTypes.object, + dispatch: PropTypes.func, + toggleAccountMenu: PropTypes.func, + selectedAddress: PropTypes.string, + noActiveNotices: PropTypes.bool, + lostAccounts: PropTypes.array, + isInitialized: PropTypes.bool, + forgottenPassword: PropTypes.bool, + activeAddress: PropTypes.string, + unapprovedTxs: PropTypes.object, + seedWords: PropTypes.string, + unapprovedMsgCount: PropTypes.number, + unapprovedPersonalMsgCount: PropTypes.number, + unapprovedTypedMessagesCount: PropTypes.number, + welcomeScreenSeen: PropTypes.bool, + isPopup: PropTypes.bool, + betaUI: PropTypes.bool, + isMouseUser: PropTypes.bool, + setMouseUserState: PropTypes.func, + t: PropTypes.func, + isRevealingSeedWords: PropTypes.bool, + clearSeedWords: PropTypes.func, +} function mapStateToProps (state) { + const { appState, metamask } = state + const { + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + } = appState + const { identities, accounts, @@ -65,17 +423,23 @@ function mapStateToProps (state) { isInitialized, noActiveNotices, seedWords, - } = state.metamask + unapprovedTxs, + lastUnreadNotice, + lostAccounts, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + } = metamask const selected = address || Object.keys(accounts)[0] return { // state from plugin - networkDropdownOpen: state.appState.networkDropdownOpen, - sidebarOpen: state.appState.sidebarOpen, - isLoading: state.appState.isLoading, - loadingMessage: state.appState.loadingMessage, - noActiveNotices: state.metamask.noActiveNotices, - isInitialized: state.metamask.isInitialized, + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + noActiveNotices, + isInitialized, isUnlocked: state.metamask.isUnlocked, selectedAddress: state.metamask.selectedAddress, currentView: state.appState.currentView, @@ -85,14 +449,17 @@ function mapStateToProps (state) { isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), isPopup: state.metamask.isPopup, seedWords: state.metamask.seedWords, - unapprovedTxs: state.metamask.unapprovedTxs, + unapprovedTxs, unapprovedMsgs: state.metamask.unapprovedMsgs, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, menuOpen: state.appState.menuOpen, network: state.metamask.network, provider: state.metamask.provider, - forgottenPassword: state.metamask.forgottenPassword, - lastUnreadNotice: state.metamask.lastUnreadNotice, - lostAccounts: state.metamask.lostAccounts, + forgottenPassword: state.appState.forgottenPassword, + lastUnreadNotice, + lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], currentCurrency: state.metamask.currentCurrency, isMouseUser: state.appState.isMouseUser, @@ -117,482 +484,15 @@ function mapDispatchToProps (dispatch, ownProps) { setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)), + clearSeedWords: () => dispatch(actions.confirmSeedWords()), } } -App.prototype.componentWillMount = function () { - if (!this.props.currentCurrency) { - this.props.setCurrentCurrencyToUSD() - } -} - -App.prototype.render = function () { - var props = this.props - const { - isLoading, - loadingMessage, - network, - isMouseUser, - setMouseUserState, - } = props - const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' - const loadMessage = loadingMessage || isLoadingNetwork ? - this.getConnectingLabel() : null - log.debug('Main ui render function') - - return ( - h('.flex-column.full-height', { - className: classnames({ 'mouse-user-styles': isMouseUser }), - style: { - overflowX: 'hidden', - position: 'relative', - alignItems: 'center', - }, - tabIndex: '0', - onClick: () => setMouseUserState(true), - onKeyDown: (e) => { - if (e.keyCode === 9) { - setMouseUserState(false) - } - }, - }, [ - - // global modal - h(Modal, {}, []), - - // app bar - this.renderAppBar(), - - // sidebar - this.renderSidebar(), - - // network dropdown - h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, - }, []), - - h(AccountMenu), - - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), - - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), - - // content - this.renderPrimary(), - ]) - ) -} - -App.prototype.renderGlobalModal = function () { - return h(Modal, { - ref: 'modalRef', - }, [ - // h(BuyOptions, {}, []), - ]) -} - -App.prototype.renderSidebar = function () { - - return h('div', { - }, [ - h('style', ` - .sidebar-enter { - transition: transform 300ms ease-in-out; - transform: translateX(-100%); - } - .sidebar-enter.sidebar-enter-active { - transition: transform 300ms ease-in-out; - transform: translateX(0%); - } - .sidebar-leave { - transition: transform 200ms ease-out; - transform: translateX(0%); - } - .sidebar-leave.sidebar-leave-active { - transition: transform 200ms ease-out; - transform: translateX(-100%); - } - `), - - h(ReactCSSTransitionGroup, { - transitionName: 'sidebar', - transitionEnterTimeout: 300, - transitionLeaveTimeout: 200, - }, [ - // A second instance of Walletview is used for non-mobile viewports - this.props.sidebarOpen ? h(WalletView, { - responsiveDisplayClassname: '.sidebar', - style: {}, - }) : undefined, - - ]), - - // overlay - // TODO: add onClick for overlay to close sidebar - this.props.sidebarOpen ? h('div.sidebar-overlay', { - style: {}, - onClick: () => { - this.props.hideSidebar() - }, - }, []) : undefined, - ]) -} - -App.prototype.renderAppBar = function () { - const { - isUnlocked, - network, - provider, - networkDropdownOpen, - showNetworkDropdown, - hideNetworkDropdown, - currentView, - isInitialized, - betaUI, - isPopup, - welcomeScreenSeen, - } = this.props - - if (window.METAMASK_UI_TYPE === 'notification') { - return null - } - - const props = this.props - const {isMascara, isOnboarding} = props - - // Do not render header if user is in mascara onboarding - if (isMascara && isOnboarding) { - return null - } - - // Do not render header if user is in mascara buy ether - if (isMascara && props.currentView.name === 'buyEth') { - return null - } - - return ( - - h('.full-width', { - style: {}, - }, [ - - (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', { - className: classnames({ - 'app-header--initialized': !isOnboarding, - }), - }, [ - h('div.app-header-contents', {}, [ - h('div.left-menu-wrapper', { - onClick: () => { - props.dispatch(actions.backToAccountDetail(props.activeAddress)) - }, - }, [ - // mini logo - h('img.metafox-icon', { - height: 42, - width: 42, - src: './images/metamask-fox.svg', - }), - - // metamask name - h('.flex-row', [ - h('h1', this.context.t('appName')), - h('div.beta-label', this.context.t('beta')), - ]), - ]), - - betaUI && isInitialized && h('div.header__right-actions', [ - h('div.network-component-wrapper', { - style: {}, - }, [ - // Network Indicator - h(NetworkIndicator, { - network, - provider, - disabled: currentView.name === 'confTx', - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - return networkDropdownOpen === false - ? showNetworkDropdown() - : hideNetworkDropdown() - }, - }), - - ]), - - isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ - h(Identicon, { - address: this.props.selectedAddress, - diameter: 32, - }), - ]), - ]), - ]), - ]), - - !isInitialized && !isPopup && betaUI && h('.alpha-warning__container', {}, [ - h('h2', { - className: classnames({ - 'alpha-warning': welcomeScreenSeen, - 'alpha-warning-welcome-screen': !welcomeScreenSeen, - }), - }, 'Please be aware that this version is still under development'), - ]), - - ]) - ) -} - -App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) { - const { isMascara } = this.props - - return isMascara - ? null - : h(Loading, { - isLoading: isLoading || isLoadingNetwork, - loadingMessage: loadMessage, - }) -} - -App.prototype.renderBackButton = function (style, justArrow = false) { - var props = this.props - return ( - h('.flex-row', { - key: 'leftArrow', - style: style, - onClick: () => props.dispatch(actions.goBackToInitView()), - }, [ - h('i.fa.fa-arrow-left.cursor-pointer'), - justArrow ? null : h('div.cursor-pointer', { - style: { - marginLeft: '3px', - }, - onClick: () => props.dispatch(actions.goBackToInitView()), - }, 'BACK'), - ]) - ) -} - -App.prototype.renderPrimary = function () { - log.debug('rendering primary') - var props = this.props - const { - isMascara, - isOnboarding, - betaUI, - isRevealingSeedWords, - welcomeScreenSeen, - Qr, - isInitialized, - isUnlocked, - } = props - const isMascaraOnboarding = isMascara && isOnboarding - const isBetaUIOnboarding = betaUI && isOnboarding - - if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) { - return h(WelcomeScreen) - } - - if (isMascaraOnboarding || isBetaUIOnboarding) { - return h(MascaraFirstTime) - } - - // notices - if (!props.noActiveNotices && !betaUI) { - log.debug('rendering notice screen for unread notices.') - return h(NoticeScreen, { - notice: props.lastUnreadNotice, - key: 'NoticeScreen', - onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), - }) - } else if (props.lostAccounts && props.lostAccounts.length > 0) { - log.debug('rendering notice screen for lost accounts view.') - return h(NoticeScreen, { - notice: generateLostAccountsNotice(props.lostAccounts), - key: 'LostAccountsNotice', - onConfirm: () => props.dispatch(actions.markAccountsFound()), - }) - } - - if (props.isInitialized && props.forgottenPassword) { - log.debug('rendering restore vault screen') - return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - } else if (!props.isInitialized && !props.isUnlocked && !isRevealingSeedWords) { - log.debug('rendering menu screen') - return !betaUI - ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) - : h(InitializeMenuScreen, {key: 'menuScreenInit'}) - } - - // show unlock screen - if (!props.isUnlocked) { - return h(MainContainer, { - currentViewName: props.currentView.name, - isUnlocked: props.isUnlocked, - }) - } - - // show seed words screen - if (props.seedWords) { - log.debug('rendering seed words') - return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) - } - - // show current view - switch (props.currentView.name) { - - case 'accountDetail': - log.debug('rendering main container') - return h(MainContainer, {key: 'account-detail'}) - - case 'sendTransaction': - log.debug('rendering send tx screen') - - // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // const SendComponentToRender = checkFeatureToggle('send-v2') - // ? SendTransactionScreen2 - // : SendTransactionScreen - - return h(SendTransactionScreen2, {key: 'send-transaction'}) - - case 'sendToken': - log.debug('rendering send token screen') - - // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // const SendTokenComponentToRender = checkFeatureToggle('send-v2') - // ? SendTransactionScreen2 - // : SendTokenScreen - - return h(SendTransactionScreen2, {key: 'sendToken'}) - - case 'newKeychain': - log.debug('rendering new keychain screen') - return h(NewKeyChainScreen, {key: 'new-keychain'}) - - case 'confTx': - log.debug('rendering confirm tx screen') - return h(ConfirmTxScreen, {key: 'confirm-tx'}) - - case 'add-token': - log.debug('rendering add-token screen from unlock screen.') - return h(AddTokenScreen, {key: 'add-token'}) - - case 'config': - log.debug('rendering config screen') - return h(Settings, {key: 'config'}) - - case 'import-menu': - log.debug('rendering import screen') - return h(Import, {key: 'import-menu'}) - - case 'new-account-page': - log.debug('rendering new account screen') - return h(NewAccount, {key: 'new-account'}) - - case 'reveal-seed-conf': - log.debug('rendering reveal seed confirmation screen') - return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) - - case 'info': - log.debug('rendering info screen') - return h(Settings, {key: 'info', tab: 'info'}) - - case 'buyEth': - log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) - - case 'onboardingBuyEth': - log.debug('rendering onboarding buy ether screen') - return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) - - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => props.dispatch(actions.backToAccountDetail(props.activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ - h(QrView, {key: 'qr', Qr}), - ]), - ]) - - default: - log.debug('rendering default, account detail screen') - return h(MainContainer, {key: 'account-detail'}) - } -} - -App.prototype.toggleMetamaskActive = function () { - if (!this.props.isUnlocked) { - // currently inactive: redirect to password box - var passwordBox = document.querySelector('input[type=password]') - if (!passwordBox) return - passwordBox.focus() - } else { - // currently active: deactivate - this.props.dispatch(actions.lockMetamask(false)) - } -} - -App.prototype.getConnectingLabel = function () { - const { provider } = this.props - const providerName = provider.type - - let name - - if (providerName === 'mainnet') { - name = this.context.t('connectingToMainnet') - } else if (providerName === 'ropsten') { - name = this.context.t('connectingToRopsten') - } else if (providerName === 'kovan') { - name = this.context.t('connectingToRopsten') - } else if (providerName === 'rinkeby') { - name = this.context.t('connectingToRinkeby') - } else { - name = this.context.t('connectingToUnknown') - } - - return name +App.contextTypes = { + t: PropTypes.func, } -App.prototype.getNetworkName = function () { - const { provider } = this.props - const providerName = provider.type - - let name - - if (providerName === 'mainnet') { - name = this.context.t('mainnet') - } else if (providerName === 'ropsten') { - name = this.context.t('ropsten') - } else if (providerName === 'kovan') { - name = this.context.t('kovan') - } else if (providerName === 'rinkeby') { - name = this.context.t('rinkeby') - } else { - name = this.context.t('unknownNetwork') - } - - return name -} +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(App) diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 03955e077..043008a36 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -7,8 +7,8 @@ const connect = require('react-redux').connect const Dropdown = require('./dropdown').Dropdown const DropdownMenuItem = require('./dropdown').DropdownMenuItem const Identicon = require('./identicon') -const ethUtil = require('ethereumjs-util') const copyToClipboard = require('copy-to-clipboard') +const { checksumAddress } = require('../util') class AccountDropdowns extends Component { constructor (props) { @@ -212,8 +212,7 @@ class AccountDropdowns extends Component { closeMenu: () => {}, onClick: () => { const { selected } = this.props - const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) - copyToClipboard(checkSumAddress) + copyToClipboard(checksumAddress(selected)) }, }, this.context.t('copyAddress'), diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 21de358d6..7638995ea 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -1,20 +1,31 @@ const inherits = require('util').inherits const Component = require('react').Component -const PropTypes = require('prop-types') const connect = require('react-redux').connect +const { compose } = require('recompose') +const { withRouter } = require('react-router-dom') +const PropTypes = require('prop-types') const h = require('react-hyperscript') const actions = require('../../actions') const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu') const Identicon = require('../identicon') const { formatBalance } = require('../../util') +const { + SETTINGS_ROUTE, + INFO_ROUTE, + NEW_ACCOUNT_ROUTE, + IMPORT_ACCOUNT_ROUTE, + DEFAULT_ROUTE, +} = require('../../routes') + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(AccountMenu) AccountMenu.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu) - - inherits(AccountMenu, Component) function AccountMenu () { Component.call(this) } @@ -25,7 +36,6 @@ function mapStateToProps (state) { keyrings: state.metamask.keyrings, identities: state.metamask.identities, accounts: state.metamask.accounts, - } } @@ -48,11 +58,6 @@ function mapDispatchToProps (dispatch) { dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, - showNewAccountPage: (formToSelect) => { - dispatch(actions.showNewAccountPage(formToSelect)) - dispatch(actions.hideSidebar()) - dispatch(actions.toggleAccountMenu()) - }, showInfoPage: () => { dispatch(actions.showInfoPage()) dispatch(actions.hideSidebar()) @@ -65,10 +70,8 @@ AccountMenu.prototype.render = function () { const { isAccountMenuOpen, toggleAccountMenu, - showNewAccountPage, lockMetamask, - showConfigPage, - showInfoPage, + history, } = this.props return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [ @@ -78,30 +81,45 @@ AccountMenu.prototype.render = function () { }, [ this.context.t('myAccounts'), h('button.account-menu__logout-button', { - onClick: lockMetamask, + onClick: () => { + lockMetamask() + history.push(DEFAULT_ROUTE) + }, }, this.context.t('logout')), ]), h(Divider), h('div.account-menu__accounts', this.renderAccounts()), h(Divider), h(Item, { - onClick: () => showNewAccountPage('CREATE'), + onClick: () => { + toggleAccountMenu() + history.push(NEW_ACCOUNT_ROUTE) + }, icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }), text: this.context.t('createAccount'), }), h(Item, { - onClick: () => showNewAccountPage('IMPORT'), + onClick: () => { + toggleAccountMenu() + history.push(IMPORT_ACCOUNT_ROUTE) + }, icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }), text: this.context.t('importAccount'), }), h(Divider), h(Item, { - onClick: showInfoPage, + onClick: () => { + toggleAccountMenu() + history.push(INFO_ROUTE) + }, icon: h('img', { src: 'images/mm-info-icon.svg' }), text: this.context.t('infoHelp'), }), h(Item, { - onClick: showConfigPage, + onClick: () => { + toggleAccountMenu() + history.push(SETTINGS_ROUTE) + }, icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }), text: this.context.t('settings'), }), diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index d591ab455..e31552f2d 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -4,6 +4,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const TokenBalance = require('./token-balance') const Identicon = require('./identicon') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') const { formatBalance, generateBalanceObject } = require('../util') @@ -97,9 +99,17 @@ BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatS const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0 if (shouldNotRenderFiat) return null + const upperCaseFiatSuffix = fiatSuffix.toUpperCase() + + const display = currencies.find(currency => currency.code === upperCaseFiatSuffix) + ? currencyFormatter.format(Number(fiatDisplayNumber), { + code: upperCaseFiatSuffix, + }) + : `${fiatPrefix}${fiatDisplayNumber} ${upperCaseFiatSuffix}` + return h('div.fiat-amount', { style: {}, - }, `${fiatPrefix}${fiatDisplayNumber} ${fiatSuffix}`) + }, display) } BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) { @@ -117,5 +127,9 @@ BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, co const splitBalance = formattedBalance.split(' ') - return (Number(splitBalance[0]) * conversionRate).toFixed(2) + const convertedNumber = (Number(splitBalance[0]) * conversionRate) + const wholePart = Math.floor(convertedNumber) + const decimalPart = convertedNumber - wholePart + + return wholePart + Number(decimalPart.toPrecision(2)) } diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 9ac565cf4..fda7c3e17 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -9,7 +9,7 @@ const ShapeshiftForm = require('./shapeshift-form') const Loading = require('./loading') const AccountPanel = require('./account-panel') const RadioList = require('./custom-radio-list') -const networkNames = require('../../../app/scripts/config.js').networkNames +const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util') BuyButtonSubview.contextTypes = { t: PropTypes.func, @@ -148,7 +148,7 @@ BuyButtonSubview.prototype.primarySubview = function () { case '3': case '4': case '42': - const networkName = networkNames[network] + const networkName = getNetworkDisplayName(network) const label = `${networkName} ${this.context.t('testFaucet')}` return ( h('div.flex-column', { diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 4c693d1c3..0761faa99 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -8,6 +8,10 @@ const GasModalCard = require('./gas-modal-card') const ethUtil = require('ethereumjs-util') +import { + updateSendErrors, +} from '../../ducks/send' + const { MIN_GAS_PRICE_DEC, MIN_GAS_LIMIT_DEC, @@ -63,9 +67,9 @@ function mapDispatchToProps (dispatch) { hideModal: () => dispatch(actions.hideModal()), updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), - updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)), + updateGasTotal: newGasTotal => dispatch(actions.setGasTotal(newGasTotal)), updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), - updateSendErrors: error => dispatch(actions.updateSendErrors(error)), + updateSendErrors: error => dispatch(updateSendErrors(error)), } } diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index a133f0e29..179b6617f 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -7,7 +7,7 @@ const connect = require('react-redux').connect const Dropdown = require('./dropdown').Dropdown const DropdownMenuItem = require('./dropdown').DropdownMenuItem const Identicon = require('../../identicon') -const ethUtil = require('ethereumjs-util') +const { checksumAddress } = require('../../../util') const copyToClipboard = require('copy-to-clipboard') const { formatBalance } = require('../../../util') @@ -311,8 +311,7 @@ class AccountDropdowns extends Component { closeMenu: () => {}, onClick: () => { const { selected } = this.props - const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) - copyToClipboard(checkSumAddress) + copyToClipboard(checksumAddress(selected)) }, style: Object.assign( dropdownMenuItemStyle, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 9e47f38ef..dcd6b4370 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -3,12 +3,14 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const actions = require('../../actions') const Dropdown = require('./components/dropdown').Dropdown const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const NetworkDropdownIcon = require('./components/network-dropdown-icon') const R = require('ramda') - +const { SETTINGS_ROUTE } = require('../../routes') // classes from nodes of the toggle element. const notToggleElementClassnames = [ @@ -41,9 +43,6 @@ function mapDispatchToProps (dispatch) { setRpcTarget: (target) => { dispatch(actions.setRpcTarget(target)) }, - showConfigPage: () => { - dispatch(actions.showConfigPage()) - }, showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), } @@ -59,7 +58,10 @@ NetworkDropdown.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(NetworkDropdown) // TODO: specify default props and proptypes @@ -227,7 +229,7 @@ NetworkDropdown.prototype.render = function () { DropdownMenuItem, { closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => this.props.showConfigPage(), + onClick: () => this.props.history.push(SETTINGS_ROUTE), style: dropdownMenuItemStyle, }, [ diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index feb0a7037..aff4b6ef6 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -11,6 +11,7 @@ const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const connect = require('react-redux').connect const ToAutoComplete = require('./send/to-autocomplete') +const log = require('loglevel') EnsInput.contextTypes = { t: PropTypes.func, diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index cb6fa51fb..b9afc550f 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -1,6 +1,7 @@ const { Component } = require('react') const h = require('react-hyperscript') const PropTypes = require('prop-types') +const classnames = require('classnames') class LoadingIndicator extends Component { renderMessage () { @@ -10,14 +11,16 @@ class LoadingIndicator extends Component { render () { return ( - h('.full-flex-height.loading-overlay', {}, [ - h('img', { - src: 'images/loading.svg', - }), + h('.loading-overlay', { + className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }), + }, [ + h('.flex-center.flex-column', [ + h('img', { + src: 'images/loading.svg', + }), - h('br'), - - this.renderMessage(), + this.renderMessage(), + ]), ]) ) } @@ -25,6 +28,7 @@ class LoadingIndicator extends Component { LoadingIndicator.propTypes = { loadingMessage: PropTypes.string, + fullScreen: PropTypes.bool, } module.exports = LoadingIndicator diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index d871e7516..c70510b5f 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -4,7 +4,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') -const networkNames = require('../../../../app/scripts/config.js').networkNames +const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util') function mapStateToProps (state) { return { @@ -52,7 +52,7 @@ BuyOptions.prototype.renderModalContentOption = function (title, header, onClick BuyOptions.prototype.render = function () { const { network, toCoinbase, address, toFaucet } = this.props const isTestNetwork = ['3', '4', '42'].find(n => n === network) - const networkName = networkNames[network] + const networkName = getNetworkDisplayName(network) return h('div', {}, [ h('div.buy-modal-content.transfers-subview', { diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 0dc611f50..ad5f9b695 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -4,7 +4,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') -const networkNames = require('../../../../app/scripts/config.js').networkNames +const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util') const ShapeshiftForm = require('../shapeshift-form') let DIRECT_DEPOSIT_ROW_TITLE @@ -122,7 +122,7 @@ DepositEtherModal.prototype.render = function () { const { buyingWithShapeshift } = this.state const isTestNetwork = ['3', '4', '42'].find(n => n === network) - const networkName = networkNames[network] + const networkName = getNetworkDisplayName(network) return h('div.page-container.page-container--full-width.page-container--full-height', {}, [ diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 1f80aed39..447e43b7a 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -3,12 +3,13 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect -const ethUtil = require('ethereumjs-util') +const { stripHexPrefix } = require('ethereumjs-util') const actions = require('../../actions') const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity } = require('../../selectors') const ReadOnlyInput = require('../readonly-input') const copyToClipboard = require('copy-to-clipboard') +const { checksumAddress } = require('../../util') function mapStateToProps (state) { return { @@ -60,7 +61,7 @@ ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { } ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { - const plainKey = privateKey && ethUtil.stripHexPrefix(privateKey) + const plainKey = privateKey && stripHexPrefix(privateKey) return privateKey ? h(ReadOnlyInput, { @@ -121,7 +122,7 @@ ExportPrivateKeyModal.prototype.render = function () { h(ReadOnlyInput, { wrapperClass: 'ellip-address-wrapper', inputClass: 'qr-ellip-address ellip-address', - value: address, + value: checksumAddress(address), }), h('div.account-modal-divider'), diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 9250cc77e..43dcd20ae 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -5,7 +5,8 @@ const connect = require('react-redux').connect const FadeModal = require('boron').FadeModal const actions = require('../../actions') const isMobileView = require('../../../lib/is-mobile-view') -const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') +const { getEnvironmentType } = require('../../../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums') // Modal Components const BuyOptions = require('./buy-options-modal') @@ -162,7 +163,7 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '449px', @@ -179,7 +180,7 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '449px', @@ -196,7 +197,7 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '449px', @@ -208,7 +209,7 @@ const MODALS = { contents: h(ConfirmResetAccount), mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '473px', diff --git a/ui/app/components/page-container/page-container-content.component.js b/ui/app/components/page-container/page-container-content.component.js new file mode 100644 index 000000000..a1d6988cc --- /dev/null +++ b/ui/app/components/page-container/page-container-content.component.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerContent extends Component { + + static propTypes = { + children: PropTypes.node.isRequired, + }; + + render () { + return ( + <div className="page-container__content"> + {this.props.children} + </div> + ) + } + +} diff --git a/ui/app/components/page-container/page-container-header.component.js b/ui/app/components/page-container/page-container-header.component.js new file mode 100644 index 000000000..5c9d63221 --- /dev/null +++ b/ui/app/components/page-container/page-container-header.component.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerHeader extends Component { + + static propTypes = { + title: PropTypes.string, + subtitle: PropTypes.string, + onClose: PropTypes.func, + }; + + render () { + const { title, subtitle, onClose } = this.props + + return ( + <div className="page-container__header"> + + <div className="page-container__title"> + {title} + </div> + + <div className="page-container__subtitle"> + {subtitle} + </div> + + <div + className="page-container__header-close" + onClick={() => onClose()} + /> + + </div> + ) + } + +} diff --git a/ui/app/add-token.js b/ui/app/components/pages/add-token.js index 46564a5e5..566e42450 100644 --- a/ui/app/add-token.js +++ b/ui/app/components/pages/add-token.js @@ -7,8 +7,8 @@ const connect = require('react-redux').connect const R = require('ramda') const Fuse = require('fuse.js') const contractMap = require('eth-contract-metadata') -const TokenBalance = require('./components/token-balance') -const Identicon = require('./components/identicon') +const TokenBalance = require('../../components/token-balance') +const Identicon = require('../../components/identicon') const contractList = Object.entries(contractMap) .map(([ _, tokenData]) => tokenData) .filter(tokenData => Boolean(tokenData.erc20)) @@ -24,9 +24,10 @@ const fuse = new Fuse(contractList, { { name: 'symbol', weight: 0.5 }, ], }) -const actions = require('./actions') +const actions = require('../../actions') const ethUtil = require('ethereumjs-util') -const { tokenInfoGetter } = require('./token-util') +const { tokenInfoGetter } = require('../../token-util') +const { DEFAULT_ROUTE } = require('../../routes') const emptyAddr = '0x0000000000000000000000000000000000000000' @@ -47,7 +48,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - goHome: () => dispatch(actions.goHome()), addTokens: tokens => dispatch(actions.addTokens(tokens)), } } @@ -296,7 +296,7 @@ AddTokenScreen.prototype.renderConfirmation = function () { selectedTokens, } = this.state - const { addTokens, goHome } = this.props + const { addTokens, history } = this.props const customToken = { address, @@ -333,7 +333,7 @@ AddTokenScreen.prototype.renderConfirmation = function () { onClick: () => this.setState({ isShowingConfirmation: false }), }, this.context.t('back')), h('button.btn-primary--lg', { - onClick: () => addTokens(tokens).then(goHome), + onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)), }, this.context.t('addTokens')), ]), ]) @@ -382,12 +382,12 @@ AddTokenScreen.prototype.render = function () { isShowingConfirmation, displayedTab, } = this.state - const { goHome } = this.props + const { history } = this.props return h('div.add-token', [ h('div.add-token__header', [ h('div.add-token__header__cancel', { - onClick: () => goHome(), + onClick: () => history.push(DEFAULT_ROUTE), }, [ h('i.fa.fa-angle-left.fa-lg'), h('span', this.context.t('cancel')), @@ -414,14 +414,14 @@ AddTokenScreen.prototype.render = function () { ]), ]), -// + isShowingConfirmation ? this.renderConfirmation() : this.renderTabs(), !isShowingConfirmation && h('div.add-token__buttons', [ h('button.btn-secondary--lg.add-token__cancel-button', { - onClick: goHome, + onClick: () => history.push(DEFAULT_ROUTE), }, this.context.t('cancel')), h('button.btn-primary--lg.add-token__confirm-button', { onClick: this.onNext, diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js new file mode 100644 index 000000000..1f6b0be49 --- /dev/null +++ b/ui/app/components/pages/authenticated.js @@ -0,0 +1,34 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Redirect } = require('react-router-dom') +const h = require('react-hyperscript') +const MetamaskRoute = require('./metamask-route') +const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes') + +const Authenticated = props => { + const { isUnlocked, isInitialized } = props + + switch (true) { + case isUnlocked && isInitialized: + return h(MetamaskRoute, { ...props }) + case !isInitialized: + return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) + default: + return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) + } +} + +Authenticated.propTypes = { + isUnlocked: PropTypes.bool, + isInitialized: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isUnlocked, isInitialized } } = state + return { + isUnlocked, + isInitialized, + } +} + +module.exports = connect(mapStateToProps)(Authenticated) diff --git a/ui/app/accounts/import/index.js b/ui/app/components/pages/create-account/import-account/index.js index 52d3dcde9..52d3dcde9 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/components/pages/create-account/import-account/index.js diff --git a/ui/app/accounts/import/json.js b/ui/app/components/pages/create-account/import-account/json.js index e53c1c9ca..946907a47 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -1,11 +1,12 @@ const Component = require('react').Component const PropTypes = require('prop-types') const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const connect = require('react-redux').connect -const actions = require('../../actions') +const actions = require('../../../../actions') const FileInput = require('react-simple-file-input').default - - +const { DEFAULT_ROUTE } = require('../../../../routes') const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' class JsonImportSubview extends Component { @@ -51,7 +52,7 @@ class JsonImportSubview extends Component { h('div.new-account-create-form__buttons', {}, [ h('button.btn-secondary.new-account-create-form__button', { - onClick: () => this.props.goHome(), + onClick: () => this.props.history.push(DEFAULT_ROUTE), }, [ this.context.t('cancel'), ]), @@ -112,6 +113,7 @@ JsonImportSubview.propTypes = { goHome: PropTypes.func, displayWarning: PropTypes.func, importNewJsonAccount: PropTypes.func, + history: PropTypes.object, t: PropTypes.func, } @@ -133,5 +135,7 @@ JsonImportSubview.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview) - +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(JsonImportSubview) diff --git a/ui/app/accounts/import/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js index 0d2898cda..c77612ea4 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -1,15 +1,21 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const PropTypes = require('prop-types') const connect = require('react-redux').connect -const actions = require('../../actions') +const actions = require('../../../../actions') +const { DEFAULT_ROUTE } = require('../../../../routes') PrivateKeyImportView.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(PrivateKeyImportView) function mapStateToProps (state) { @@ -20,9 +26,8 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - goHome: () => dispatch(actions.goHome()), importNewAccount: (strategy, [ privateKey ]) => { - dispatch(actions.importNewAccount(strategy, [ privateKey ])) + return dispatch(actions.importNewAccount(strategy, [ privateKey ])) }, displayWarning: () => dispatch(actions.displayWarning(null)), } @@ -35,7 +40,7 @@ function PrivateKeyImportView () { } PrivateKeyImportView.prototype.render = function () { - const { error, goHome } = this.props + const { error } = this.props return ( h('div.new-account-import-form__private-key', [ @@ -55,7 +60,7 @@ PrivateKeyImportView.prototype.render = function () { h('div.new-account-import-form__buttons', {}, [ h('button.btn-secondary--lg.new-account-create-form__button', { - onClick: () => goHome(), + onClick: () => this.props.history.push(DEFAULT_ROUTE), }, [ this.context.t('cancel'), ]), @@ -83,6 +88,8 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { PrivateKeyImportView.prototype.createNewKeychain = function () { const input = document.getElementById('private-key-box') const privateKey = input.value + const { importNewAccount, history } = this.props - this.props.importNewAccount('Private Key', [ privateKey ]) + importNewAccount('Private Key', [ privateKey ]) + .then(() => history.push(DEFAULT_ROUTE)) } diff --git a/ui/app/accounts/import/seed.js b/ui/app/components/pages/create-account/import-account/seed.js index d98909baa..d98909baa 100644 --- a/ui/app/accounts/import/seed.js +++ b/ui/app/components/pages/create-account/import-account/seed.js diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js new file mode 100644 index 000000000..0962477d8 --- /dev/null +++ b/ui/app/components/pages/create-account/index.js @@ -0,0 +1,81 @@ +const Component = require('react').Component +const { Switch, Route, matchPath } = require('react-router-dom') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const actions = require('../../../actions') +const { getCurrentViewContext } = require('../../../selectors') +const classnames = require('classnames') +const NewAccountCreateForm = require('./new-account') +const NewAccountImportForm = require('./import-account') +const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes') + +class CreateAccountPage extends Component { + renderTabs () { + const { history, location } = this.props + + return h('div.new-account__tabs', [ + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': matchPath(location.pathname, { + path: NEW_ACCOUNT_ROUTE, exact: true, + }), + }), + onClick: () => history.push(NEW_ACCOUNT_ROUTE), + }, 'Create'), + + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': matchPath(location.pathname, { + path: IMPORT_ACCOUNT_ROUTE, exact: true, + }), + }), + onClick: () => history.push(IMPORT_ACCOUNT_ROUTE), + }, 'Import'), + ]) + } + + render () { + return h('div.new-account', {}, [ + h('div.new-account__header', [ + h('div.new-account__title', 'New Account'), + this.renderTabs(), + ]), + h('div.new-account__form', [ + h(Switch, [ + h(Route, { + exact: true, + path: NEW_ACCOUNT_ROUTE, + component: NewAccountCreateForm, + }), + h(Route, { + exact: true, + path: IMPORT_ACCOUNT_ROUTE, + component: NewAccountImportForm, + }), + ]), + ]), + ]) + } +} + +CreateAccountPage.propTypes = { + location: PropTypes.object, + history: PropTypes.object, +} + +const mapStateToProps = state => ({ + displayedForm: getCurrentViewContext(state), +}) + +const mapDispatchToProps = dispatch => ({ + displayForm: form => dispatch(actions.setNewAccountForm(form)), + showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), + showExportPrivateKeyModal: () => { + dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) + }, + hideModal: () => dispatch(actions.hideModal()), + saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)), +}) + +module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage) diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/components/pages/create-account/new-account.js index 48c74192a..40fa584be 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/components/pages/create-account/new-account.js @@ -2,7 +2,8 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') const connect = require('react-redux').connect -const actions = require('../../actions') +const actions = require('../../../actions') +const { DEFAULT_ROUTE } = require('../../../routes') class NewAccountCreateForm extends Component { constructor (props, context) { @@ -19,7 +20,7 @@ class NewAccountCreateForm extends Component { render () { const { newAccountName, defaultAccountName } = this.state - + const { history, createAccount } = this.props return h('div.new-account-create-form', [ @@ -38,13 +39,16 @@ class NewAccountCreateForm extends Component { h('div.new-account-create-form__buttons', {}, [ h('button.btn-secondary--lg.new-account-create-form__button', { - onClick: () => this.props.goHome(), + onClick: () => history.push(DEFAULT_ROUTE), }, [ this.context.t('cancel'), ]), h('button.btn-primary--lg.new-account-create-form__button', { - onClick: () => this.props.createAccount(newAccountName || defaultAccountName), + onClick: () => { + createAccount(newAccountName || defaultAccountName) + .then(() => history.push(DEFAULT_ROUTE)) + }, }, [ this.context.t('create'), ]), @@ -59,8 +63,8 @@ NewAccountCreateForm.propTypes = { hideModal: PropTypes.func, showImportPage: PropTypes.func, createAccount: PropTypes.func, - goHome: PropTypes.func, numberOfExistingAccounts: PropTypes.number, + history: PropTypes.object, t: PropTypes.func, } @@ -77,23 +81,17 @@ const mapStateToProps = state => { const mapDispatchToProps = dispatch => { return { - toCoinbase: (address) => { - dispatch(actions.buyEth({ network: '1', address, amount: 0 })) - }, - hideModal: () => { - dispatch(actions.hideModal()) - }, - createAccount: (newAccountName) => { - dispatch(actions.addNewAccount()) - .then((newAccountAddress) => { + toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })), + hideModal: () => dispatch(actions.hideModal()), + createAccount: newAccountName => { + return dispatch(actions.addNewAccount()) + .then(newAccountAddress => { if (newAccountName) { dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) } - dispatch(actions.goHome()) }) }, showImportPage: () => dispatch(actions.showImportPage()), - goHome: () => dispatch(actions.goHome()), } } diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js new file mode 100644 index 000000000..90b8e1d37 --- /dev/null +++ b/ui/app/components/pages/home.js @@ -0,0 +1,333 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const connect = require('../../metamask-connect') +const { Redirect, withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const h = require('react-hyperscript') +const actions = require('../../actions') +const log = require('loglevel') + +// init +const NewKeyChainScreen = require('../../new-keychain') +// mascara +const MascaraBuyEtherScreen = require('../../../../mascara/src/app/first-time/buy-ether-screen').default + +// accounts +const MainContainer = require('../../main-container') + +// other views +const BuyView = require('../../components/buy-button-subview') +const QrView = require('../../components/qr-code') + +// Routes +const { + REVEAL_SEED_ROUTE, + RESTORE_VAULT_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + NOTICE_ROUTE, +} = require('../../routes') + +class Home extends Component { + componentDidMount () { + const { + history, + unapprovedTxs = {}, + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, + } = this.props + + // unapprovedTxs and unapproved messages + if (Object.keys(unapprovedTxs).length || + unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + history.push(CONFIRM_TRANSACTION_ROUTE) + } + } + + render () { + log.debug('rendering primary') + const { + noActiveNotices, + lostAccounts, + forgottenPassword, + currentView, + activeAddress, + seedWords, + } = this.props + + // notices + if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + return h(Redirect, { + to: { + pathname: NOTICE_ROUTE, + }, + }) + } + + // seed words + if (seedWords) { + log.debug('rendering seed words') + return h(Redirect, { + to: { + pathname: REVEAL_SEED_ROUTE, + }, + }) + } + + if (forgottenPassword) { + log.debug('rendering restore vault screen') + return h(Redirect, { + to: { + pathname: RESTORE_VAULT_ROUTE, + }, + }) + } + + // if (!props.noActiveNotices) { + // log.debug('rendering notice screen for unread notices.') + // return h(NoticeScreen, { + // notice: props.lastUnreadNotice, + // key: 'NoticeScreen', + // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + // }) + // } else if (props.lostAccounts && props.lostAccounts.length > 0) { + // log.debug('rendering notice screen for lost accounts view.') + // return h(NoticeScreen, { + // notice: generateLostAccountsNotice(props.lostAccounts), + // key: 'LostAccountsNotice', + // onConfirm: () => props.dispatch(actions.markAccountsFound()), + // }) + // } + + // if (props.seedWords) { + // log.debug('rendering seed words') + // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + // } + + // show initialize screen + // if (!isInitialized || forgottenPassword) { + // // show current view + // log.debug('rendering an initialize screen') + // // switch (props.currentView.name) { + + // // case 'restoreVault': + // // log.debug('rendering restore vault screen') + // // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + + // // default: + // // log.debug('rendering menu screen') + // // return h(InitializeScreen, {key: 'menuScreenInit'}) + // // } + // } + + // // show unlock screen + // if (!props.isUnlocked) { + // return h(MainContainer, { + // currentViewName: props.currentView.name, + // isUnlocked: props.isUnlocked, + // }) + // } + + // show current view + switch (currentView.name) { + + case 'accountDetail': + log.debug('rendering main container') + return h(MainContainer, {key: 'account-detail'}) + + // case 'sendTransaction': + // log.debug('rendering send tx screen') + + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTransactionScreen + + // return h(SendTransactionScreen2, {key: 'send-transaction'}) + + // case 'sendToken': + // log.debug('rendering send token screen') + + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTokenScreen + + // return h(SendTransactionScreen2, {key: 'sendToken'}) + + case 'newKeychain': + log.debug('rendering new keychain screen') + return h(NewKeyChainScreen, {key: 'new-keychain'}) + + // case 'confTx': + // log.debug('rendering confirm tx screen') + // return h(Redirect, { + // to: { + // pathname: CONFIRM_TRANSACTION_ROUTE, + // }, + // }) + // return h(ConfirmTxScreen, {key: 'confirm-tx'}) + + // case 'add-token': + // log.debug('rendering add-token screen from unlock screen.') + // return h(AddTokenScreen, {key: 'add-token'}) + + // case 'config': + // log.debug('rendering config screen') + // return h(Settings, {key: 'config'}) + + // case 'import-menu': + // log.debug('rendering import screen') + // return h(Import, {key: 'import-menu'}) + + // case 'reveal-seed-conf': + // log.debug('rendering reveal seed confirmation screen') + // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) + + // case 'info': + // log.debug('rendering info screen') + // return h(Settings, {key: 'info', tab: 'info'}) + + case 'buyEth': + log.debug('rendering buy ether screen') + return h(BuyView, {key: 'buyEthView'}) + + case 'onboardingBuyEth': + log.debug('rendering onboarding buy ether screen') + return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + + case 'qr': + log.debug('rendering show qr screen') + return h('div', { + style: { + position: 'absolute', + height: '100%', + top: '0px', + left: '0px', + }, + }, [ + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), + style: { + marginLeft: '10px', + marginTop: '50px', + }, + }), + h('div', { + style: { + position: 'absolute', + left: '44px', + width: '285px', + }, + }, [ + h(QrView, {key: 'qr'}), + ]), + ]) + + default: + log.debug('rendering default, account detail screen') + return h(MainContainer, {key: 'account-detail'}) + } + } +} + +Home.propTypes = { + currentCurrency: PropTypes.string, + isLoading: PropTypes.bool, + loadingMessage: PropTypes.string, + network: PropTypes.string, + provider: PropTypes.object, + frequentRpcList: PropTypes.array, + currentView: PropTypes.object, + sidebarOpen: PropTypes.bool, + isMascara: PropTypes.bool, + isOnboarding: PropTypes.bool, + isUnlocked: PropTypes.bool, + networkDropdownOpen: PropTypes.bool, + history: PropTypes.object, + dispatch: PropTypes.func, + selectedAddress: PropTypes.string, + noActiveNotices: PropTypes.bool, + lostAccounts: PropTypes.array, + isInitialized: PropTypes.bool, + forgottenPassword: PropTypes.bool, + activeAddress: PropTypes.string, + unapprovedTxs: PropTypes.object, + seedWords: PropTypes.string, + unapprovedMsgCount: PropTypes.number, + unapprovedPersonalMsgCount: PropTypes.number, + unapprovedTypedMessagesCount: PropTypes.number, + welcomeScreenSeen: PropTypes.bool, + isPopup: PropTypes.bool, + isMouseUser: PropTypes.bool, + t: PropTypes.func, +} + +function mapStateToProps (state) { + const { appState, metamask } = state + const { + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + } = appState + + const { + accounts, + address, + isInitialized, + noActiveNotices, + seedWords, + unapprovedTxs, + lastUnreadNotice, + lostAccounts, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + } = metamask + const selected = address || Object.keys(accounts)[0] + + return { + // state from plugin + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + noActiveNotices, + isInitialized, + isUnlocked: state.metamask.isUnlocked, + selectedAddress: state.metamask.selectedAddress, + currentView: state.appState.currentView, + activeAddress: state.appState.activeAddress, + transForward: state.appState.transForward, + isMascara: state.metamask.isMascara, + isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), + isPopup: state.metamask.isPopup, + seedWords: state.metamask.seedWords, + unapprovedTxs, + unapprovedMsgs: state.metamask.unapprovedMsgs, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + menuOpen: state.appState.menuOpen, + network: state.metamask.network, + provider: state.metamask.provider, + forgottenPassword: state.appState.forgottenPassword, + lastUnreadNotice, + lostAccounts, + frequentRpcList: state.metamask.frequentRpcList || [], + currentCurrency: state.metamask.currentCurrency, + isMouseUser: state.appState.isMouseUser, + isRevealingSeedWords: state.metamask.isRevealingSeedWords, + Qr: state.appState.Qr, + welcomeScreenSeen: state.metamask.welcomeScreenSeen, + + // state needed to get account dropdown temporarily rendering from app bar + selected, + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps) +)(Home) diff --git a/ui/app/components/pages/initialized.js b/ui/app/components/pages/initialized.js new file mode 100644 index 000000000..3adf67b28 --- /dev/null +++ b/ui/app/components/pages/initialized.js @@ -0,0 +1,25 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Redirect } = require('react-router-dom') +const h = require('react-hyperscript') +const { INITIALIZE_ROUTE } = require('../../routes') +const MetamaskRoute = require('./metamask-route') + +const Initialized = props => { + return props.isInitialized + ? h(MetamaskRoute, { ...props }) + : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) +} + +Initialized.propTypes = { + isInitialized: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isInitialized } } = state + return { + isInitialized, + } +} + +module.exports = connect(mapStateToProps)(Initialized) diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js new file mode 100644 index 000000000..33575bfbb --- /dev/null +++ b/ui/app/components/pages/keychains/restore-vault.js @@ -0,0 +1,178 @@ +const { withRouter } = require('react-router-dom') +const PropTypes = require('prop-types') +const { compose } = require('recompose') +const PersistentForm = require('../../../../lib/persistent-form') +const connect = require('../../../metamask-connect') +const h = require('react-hyperscript') +const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions') +const { DEFAULT_ROUTE } = require('../../../routes') +const log = require('loglevel') + +class RestoreVaultPage extends PersistentForm { + constructor (props) { + super(props) + + this.state = { + error: null, + } + } + + createOnEnter (event) { + if (event.key === 'Enter') { + this.createNewVaultAndRestore() + } + } + + cancel () { + this.props.unMarkPasswordForgotten() + .then(this.props.history.push(DEFAULT_ROUTE)) + } + + createNewVaultAndRestore () { + this.setState({ error: null }) + + // check password + var passwordBox = document.getElementById('password-box') + var password = passwordBox.value + var passwordConfirmBox = document.getElementById('password-box-confirm') + var passwordConfirm = passwordConfirmBox.value + + if (password.length < 8) { + this.setState({ error: 'Password not long enough' }) + return + } + + if (password !== passwordConfirm) { + this.setState({ error: 'Passwords don\'t match' }) + return + } + + // check seed + var seedBox = document.querySelector('textarea.twelve-word-phrase') + var seed = seedBox.value.trim() + if (seed.split(' ').length !== 12) { + this.setState({ error: 'Seed phrases are 12 words long' }) + return + } + + // submit + this.props.createNewVaultAndRestore(password, seed) + .then(() => this.props.history.push(DEFAULT_ROUTE)) + .catch(({ message }) => { + this.setState({ error: message }) + log.error(message) + }) + } + + render () { + const { error } = this.state + this.persistentFormParentId = 'restore-vault-form' + + return ( + h('.initialize-screen.flex-column.flex-center.flex-grow', [ + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + this.props.t('restoreVault'), + ]), + + // wallet seed entry + h('h3', 'Wallet Seed'), + h('textarea.twelve-word-phrase.letter-spacey', { + dataset: { + persistentFormId: 'wallet-seed', + }, + placeholder: this.props.t('secretPhrase'), + }), + + // password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box', + placeholder: this.props.t('newPassword8Chars'), + dataset: { + persistentFormId: 'password', + }, + style: { + width: 260, + marginTop: 12, + }, + }), + + // confirm password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box-confirm', + placeholder: this.props.t('confirmPassword'), + onKeyPress: this.createOnEnter.bind(this), + dataset: { + persistentFormId: 'password-confirmation', + }, + style: { + width: 260, + marginTop: 16, + }, + }), + + error && ( + h('span.error.in-progress-notification', error) + ), + + // submit + h('.flex-row.flex-space-between', { + style: { + marginTop: 30, + width: '50%', + }, + }, [ + + // cancel + h('button.primary', { + onClick: () => this.cancel(), + }, this.props.t('cancel')), + + // submit + h('button.primary', { + onClick: this.createNewVaultAndRestore.bind(this), + }, this.props.t('ok')), + + ]), + ]) + ) + } +} + +RestoreVaultPage.propTypes = { + history: PropTypes.object, +} + +const mapStateToProps = state => { + const { appState: { warning, forgottenPassword } } = state + + return { + warning, + forgottenPassword, + } +} + +const mapDispatchToProps = dispatch => { + return { + createNewVaultAndRestore: (password, seed) => { + return dispatch(createNewVaultAndRestore(password, seed)) + }, + unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()), + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(RestoreVaultPage) diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js new file mode 100644 index 000000000..247f3c8e2 --- /dev/null +++ b/ui/app/components/pages/keychains/reveal-seed.js @@ -0,0 +1,195 @@ +const { Component } = require('react') +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { exportAsFile } = require('../../../util') +const { requestRevealSeed, confirmSeedWords } = require('../../../actions') +const { DEFAULT_ROUTE } = require('../../../routes') + +class RevealSeedPage extends Component { + componentDidMount () { + const passwordBox = document.getElementById('password-box') + if (passwordBox) { + passwordBox.focus() + } + } + + checkConfirmation (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.revealSeedWords() + } + } + + revealSeedWords () { + const password = document.getElementById('password-box').value + this.props.requestRevealSeed(password) + } + + renderSeed () { + const { seedWords, confirmSeedWords, history } = this.props + + return ( + h('.initialize-screen.flex-column.flex-center.flex-grow', [ + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginTop: 36, + marginBottom: 8, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Vault Created', + ]), + + h('div', { + style: { + fontSize: '1em', + marginTop: '10px', + textAlign: 'center', + }, + }, [ + h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'), + ]), + + h('textarea.twelve-word-phrase', { + readOnly: true, + value: seedWords, + }), + + h('button.primary', { + onClick: () => confirmSeedWords().then(() => history.push(DEFAULT_ROUTE)), + style: { + margin: '24px', + fontSize: '0.9em', + marginBottom: '10px', + }, + }, 'I\'ve copied it somewhere safe'), + + h('button.primary', { + onClick: () => exportAsFile(`MetaMask Seed Words`, seedWords), + style: { + margin: '10px', + fontSize: '0.9em', + }, + }, 'Save Seed Words As File'), + ]) + ) + } + + renderConfirmation () { + const { history, warning, inProgress } = this.props + + return ( + h('.initialize-screen.flex-column.flex-center.flex-grow', { + style: { maxWidth: '420px' }, + }, [ + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Reveal Seed Words', + ]), + + h('.div', { + style: { + display: 'flex', + flexDirection: 'column', + padding: '20px', + justifyContent: 'center', + }, + }, [ + + h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), + + // confirmation + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box', + placeholder: 'Enter your password to confirm', + onKeyPress: this.checkConfirmation.bind(this), + style: { + width: 260, + marginTop: '12px', + }, + }), + + h('.flex-row.flex-start', { + style: { + marginTop: 30, + width: '50%', + }, + }, [ + // cancel + h('button.primary', { + onClick: () => history.push(DEFAULT_ROUTE), + }, 'CANCEL'), + + // submit + h('button.primary', { + style: { marginLeft: '10px' }, + onClick: this.revealSeedWords.bind(this), + }, 'OK'), + + ]), + + warning && ( + h('span.error', { + style: { + margin: '20px', + }, + }, warning.split('-')) + ), + + inProgress && ( + h('span.in-progress-notification', 'Generating Seed...') + ), + ]), + ]) + ) + } + + render () { + return this.props.seedWords + ? this.renderSeed() + : this.renderConfirmation() + } +} + +RevealSeedPage.propTypes = { + requestRevealSeed: PropTypes.func, + confirmSeedWords: PropTypes.func, + seedWords: PropTypes.string, + inProgress: PropTypes.bool, + history: PropTypes.object, + warning: PropTypes.string, +} + +const mapStateToProps = state => { + const { appState: { warning }, metamask: { seedWords } } = state + + return { + warning, + seedWords, + } +} + +const mapDispatchToProps = dispatch => { + return { + requestRevealSeed: password => dispatch(requestRevealSeed(password)), + confirmSeedWords: () => dispatch(confirmSeedWords()), + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage) diff --git a/ui/app/components/pages/metamask-route.js b/ui/app/components/pages/metamask-route.js new file mode 100644 index 000000000..23c5b5199 --- /dev/null +++ b/ui/app/components/pages/metamask-route.js @@ -0,0 +1,28 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Route } = require('react-router-dom') +const h = require('react-hyperscript') + +const MetamaskRoute = ({ component, mascaraComponent, isMascara, ...props }) => { + return ( + h(Route, { + ...props, + component: isMascara && mascaraComponent ? mascaraComponent : component, + }) + ) +} + +MetamaskRoute.propTypes = { + component: PropTypes.func, + mascaraComponent: PropTypes.func, + isMascara: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isMascara } } = state + return { + isMascara, + } +} + +module.exports = connect(mapStateToProps)(MetamaskRoute) diff --git a/ui/app/components/pages/notice.js b/ui/app/components/pages/notice.js new file mode 100644 index 000000000..2329a9147 --- /dev/null +++ b/ui/app/components/pages/notice.js @@ -0,0 +1,203 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const ReactMarkdown = require('react-markdown') +const linker = require('extension-link-enabler') +const generateLostAccountsNotice = require('../../../lib/lost-accounts-notice') +const findDOMNode = require('react-dom').findDOMNode +const actions = require('../../actions') +const { DEFAULT_ROUTE } = require('../../routes') + +class Notice extends Component { + constructor (props) { + super(props) + + this.state = { + disclaimerDisabled: true, + } + } + + componentWillMount () { + if (!this.props.notice) { + this.props.history.push(DEFAULT_ROUTE) + } + } + + componentDidMount () { + // eslint-disable-next-line react/no-find-dom-node + var node = findDOMNode(this) + linker.setupListener(node) + if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) { + this.setState({ disclaimerDisabled: false }) + } + } + + componentWillReceiveProps (nextProps) { + if (!nextProps.notice) { + this.props.history.push(DEFAULT_ROUTE) + } + } + + componentWillUnmount () { + // eslint-disable-next-line react/no-find-dom-node + var node = findDOMNode(this) + linker.teardownListener(node) + } + + handleAccept () { + this.setState({ disclaimerDisabled: true }) + this.props.onConfirm() + } + + render () { + const { notice = {} } = this.props + const { title, date, body } = notice + const { disclaimerDisabled } = this.state + + return ( + h('.flex-column.flex-center.flex-grow', { + style: { + width: '100%', + }, + }, [ + h('h3.flex-center.text-transform-uppercase.terms-header', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + width: '100%', + fontSize: '20px', + textAlign: 'center', + padding: 6, + }, + }, [ + title, + ]), + + h('h5.flex-center.text-transform-uppercase.terms-header', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + textAlign: 'center', + padding: 6, + }, + }, [ + date, + ]), + + h('style', ` + + .markdown { + overflow-x: hidden; + } + + .markdown h1, .markdown h2, .markdown h3 { + margin: 10px 0; + font-weight: bold; + } + + .markdown strong { + font-weight: bold; + } + .markdown em { + font-style: italic; + } + + .markdown p { + margin: 10px 0; + } + + .markdown a { + color: #df6b0e; + } + + `), + + h('div.markdown', { + onScroll: (e) => { + var object = e.currentTarget + if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) { + this.setState({ disclaimerDisabled: false }) + } + }, + style: { + background: 'rgb(235, 235, 235)', + height: '310px', + padding: '6px', + width: '90%', + overflowY: 'scroll', + scroll: 'auto', + }, + }, [ + h(ReactMarkdown, { + className: 'notice-box', + source: body, + skipHtml: true, + }), + ]), + + h('button.primary', { + disabled: disclaimerDisabled, + onClick: () => this.handleAccept(), + style: { + marginTop: '18px', + }, + }, 'Accept'), + ]) + ) + } + +} + +const mapStateToProps = state => { + const { metamask } = state + const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask + + return { + noActiveNotices, + lastUnreadNotice, + lostAccounts, + } +} + +Notice.propTypes = { + notice: PropTypes.object, + onConfirm: PropTypes.func, + history: PropTypes.object, +} + +const mapDispatchToProps = dispatch => { + return { + markNoticeRead: lastUnreadNotice => dispatch(actions.markNoticeRead(lastUnreadNotice)), + markAccountsFound: () => dispatch(actions.markAccountsFound()), + } +} + +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const { noActiveNotices, lastUnreadNotice, lostAccounts } = stateProps + const { markNoticeRead, markAccountsFound } = dispatchProps + + let notice + let onConfirm + + if (!noActiveNotices) { + notice = lastUnreadNotice + onConfirm = () => markNoticeRead(lastUnreadNotice) + } else if (lostAccounts && lostAccounts.length > 0) { + notice = generateLostAccountsNotice(lostAccounts) + onConfirm = () => markAccountsFound() + } + + return { + ...stateProps, + ...dispatchProps, + ...ownProps, + notice, + onConfirm, + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notice) diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js new file mode 100644 index 000000000..384ae4b41 --- /dev/null +++ b/ui/app/components/pages/settings/index.js @@ -0,0 +1,59 @@ +const { Component } = require('react') +const { Switch, Route, matchPath } = require('react-router-dom') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const TabBar = require('../../tab-bar') +const Settings = require('./settings') +const Info = require('./info') +const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes') + +class Config extends Component { + renderTabs () { + const { history, location } = this.props + + return h('div.settings__tabs', [ + h(TabBar, { + tabs: [ + { content: 'Settings', key: SETTINGS_ROUTE }, + { content: 'Info', key: INFO_ROUTE }, + ], + isActive: key => matchPath(location.pathname, { path: key, exact: true }), + onSelect: key => history.push(key), + }), + ]) + } + + render () { + const { history } = this.props + + return ( + h('.main-container.settings', {}, [ + h('.settings__header', [ + h('div.settings__close-button', { + onClick: () => history.push(DEFAULT_ROUTE), + }), + this.renderTabs(), + ]), + h(Switch, [ + h(Route, { + exact: true, + path: INFO_ROUTE, + component: Info, + }), + h(Route, { + exact: true, + path: SETTINGS_ROUTE, + component: Settings, + }), + ]), + ]) + ) + } +} + +Config.propTypes = { + location: PropTypes.object, + history: PropTypes.object, +} + +module.exports = Config diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js new file mode 100644 index 000000000..bd9040499 --- /dev/null +++ b/ui/app/components/pages/settings/info.js @@ -0,0 +1,120 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') + +class Info extends Component { + constructor (props) { + super(props) + + this.state = { + version: global.platform.getVersion(), + } + } + + renderLogo () { + return ( + h('div.settings__info-logo-wrapper', [ + h('img.settings__info-logo', { src: 'images/info-logo.png' }), + ]) + ) + } + + renderInfoLinks () { + return ( + h('div.settings__content-item.settings__content-item--without-height', [ + h('div.settings__info-link-header', this.context.t('links')), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/privacy.html', + target: '_blank', + }, [ + h('span.settings__info-link', this.context.t('privacyMsg')), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/terms.html', + target: '_blank', + }, [ + h('span.settings__info-link', this.context.t('terms')), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/attributions.html', + target: '_blank', + }, [ + h('span.settings__info-link', this.context.t('attributions')), + ]), + ]), + h('hr.settings__info-separator'), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://support.metamask.io', + target: '_blank', + }, [ + h('span.settings__info-link', this.context.t('supportCenter')), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/', + target: '_blank', + }, [ + h('span.settings__info-link', this.context.t('visitWebSite')), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + target: '_blank', + href: 'mailto:help@metamask.io?subject=Feedback', + }, [ + h('span.settings__info-link', this.context.t('emailUs')), + ]), + ]), + ]) + ) + } + + render () { + return ( + h('div.settings__content', [ + h('div.settings__content-row', [ + h('div.settings__content-item.settings__content-item--without-height', [ + this.renderLogo(), + h('div.settings__info-item', [ + h('div.settings__info-version-header', 'MetaMask Version'), + h('div.settings__info-version-number', this.state.version), + ]), + h('div.settings__info-item', [ + h( + 'div.settings__info-about', + this.context.t('builtInCalifornia') + ), + ]), + ]), + this.renderInfoLinks(), + ]), + ]) + ) + } +} + +Info.propTypes = { + tab: PropTypes.string, + metamask: PropTypes.object, + setCurrentCurrency: PropTypes.func, + setRpcTarget: PropTypes.func, + displayWarning: PropTypes.func, + revealSeedConfirmation: PropTypes.func, + warning: PropTypes.string, + location: PropTypes.object, + history: PropTypes.object, + t: PropTypes.func, +} + +Info.contextTypes = { + t: PropTypes.func, +} + +module.exports = Info diff --git a/ui/app/settings.js b/ui/app/components/pages/settings/settings.js index 3aa7b9c6b..bdefe56f8 100644 --- a/ui/app/settings.js +++ b/ui/app/components/pages/settings/settings.js @@ -1,16 +1,18 @@ const { Component } = require('react') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const PropTypes = require('prop-types') const h = require('react-hyperscript') const connect = require('react-redux').connect -const actions = require('./actions') -const infuraCurrencies = require('./infura-conversion.json') +const actions = require('../../../actions') +const infuraCurrencies = require('../../../infura-conversion.json') const validUrl = require('valid-url') -const { exportAsFile } = require('./util') -const TabBar = require('./components/tab-bar') -const SimpleDropdown = require('./components/dropdowns/simple-dropdown') +const { exportAsFile } = require('../../../util') +const SimpleDropdown = require('../../dropdowns/simple-dropdown') const ToggleButton = require('react-toggle-button') -const locales = require('../../app/_locales/index.json') -const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums +const { REVEAL_SEED_ROUTE } = require('../../../routes') +const locales = require('../../../../../app/_locales/index.json') +const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/controllers/network/enums') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -40,30 +42,11 @@ class Settings extends Component { constructor (props) { super(props) - const { tab } = props - const activeTab = tab === 'info' ? 'info' : 'settings' - this.state = { - activeTab, newRpc: '', } } - renderTabs () { - const { activeTab } = this.state - - return h('div.settings__tabs', [ - h(TabBar, { - tabs: [ - { content: this.context.t('settings'), key: 'settings' }, - { content: this.context.t('info'), key: 'info' }, - ], - defaultTab: activeTab, - tabSelected: key => this.setState({ activeTab: key }), - }), - ]) - } - renderBlockieOptIn () { const { metamask: { useBlockie }, setUseBlockie } = this.props @@ -253,7 +236,7 @@ class Settings extends Component { } renderSeedWords () { - const { revealSeedConfirmation } = this.props + const { history } = this.props return ( h('div.settings__content-row', [ @@ -261,9 +244,9 @@ class Settings extends Component { h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.btn-primary--lg.settings__button--red', { - onClick (event) { + onClick: event => { event.preventDefault() - revealSeedConfirmation() + history.push(REVEAL_SEED_ROUTE) }, }, this.context.t('revealSeedWords')), ]), @@ -310,7 +293,7 @@ class Settings extends Component { ]) } - renderSettingsContent () { + render () { const { warning, isMascara } = this.props return ( @@ -328,120 +311,9 @@ class Settings extends Component { ]) ) } - - renderLogo () { - return ( - h('div.settings__info-logo-wrapper', [ - h('img.settings__info-logo', { src: 'images/info-logo.png' }), - ]) - ) - } - - renderInfoLinks () { - return ( - h('div.settings__content-item.settings__content-item--without-height', [ - h('div.settings__info-link-header', this.context.t('links')), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/privacy.html', - target: '_blank', - }, [ - h('span.settings__info-link', this.context.t('privacyMsg')), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/terms.html', - target: '_blank', - }, [ - h('span.settings__info-link', this.context.t('terms')), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/attributions.html', - target: '_blank', - }, [ - h('span.settings__info-link', this.context.t('attributions')), - ]), - ]), - h('hr.settings__info-separator'), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://support.metamask.io', - target: '_blank', - }, [ - h('span.settings__info-link', this.context.t('supportCenter')), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/', - target: '_blank', - }, [ - h('span.settings__info-link', this.context.t('visitWebSite')), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - target: '_blank', - href: 'mailto:help@metamask.io?subject=Feedback', - }, [ - h('span.settings__info-link', this.context.t('emailUs')), - ]), - ]), - ]) - ) - } - - renderInfoContent () { - const version = global.platform.getVersion() - - return ( - h('div.settings__content', [ - h('div.settings__content-row', [ - h('div.settings__content-item.settings__content-item--without-height', [ - this.renderLogo(), - h('div.settings__info-item', [ - h('div.settings__info-version-header', 'MetaMask Version'), - h('div.settings__info-version-number', `${version}`), - ]), - h('div.settings__info-item', [ - h( - 'div.settings__info-about', - this.context.t('builtInCalifornia') - ), - ]), - ]), - this.renderInfoLinks(), - ]), - ]) - ) - } - - render () { - const { goHome } = this.props - const { activeTab } = this.state - - return ( - h('.main-container.settings', {}, [ - h('.settings__header', [ - h('div.settings__close-button', { - onClick: goHome, - }), - this.renderTabs(), - ]), - - activeTab === 'settings' - ? this.renderSettingsContent() - : this.renderInfoContent(), - ]) - ) - } } Settings.propTypes = { - tab: PropTypes.string, metamask: PropTypes.object, setUseBlockie: PropTypes.func, setCurrentCurrency: PropTypes.func, @@ -451,7 +323,7 @@ Settings.propTypes = { setFeatureFlagToBeta: PropTypes.func, showResetAccountConfirmationModal: PropTypes.func, warning: PropTypes.string, - goHome: PropTypes.func, + history: PropTypes.object, isMascara: PropTypes.bool, updateCurrentLocale: PropTypes.func, currentLocale: PropTypes.string, @@ -469,7 +341,6 @@ const mapStateToProps = state => { const mapDispatchToProps = dispatch => { return { - goHome: () => dispatch(actions.goHome()), setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)), setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)), displayWarning: warning => dispatch(actions.displayWarning(warning)), @@ -490,5 +361,7 @@ Settings.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings) - +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(Settings) diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js new file mode 100644 index 000000000..30144b978 --- /dev/null +++ b/ui/app/components/pages/unlock.js @@ -0,0 +1,194 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const connect = require('../../metamask-connect') +const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const { + tryUnlockMetamask, + forgotPassword, + markPasswordForgotten, + setNetworkEndpoints, + setFeatureFlag, +} = require('../../actions') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums') +const { getEnvironmentType } = require('../../../../app/scripts/lib/util') +const getCaretCoordinates = require('textarea-caret') +const EventEmitter = require('events').EventEmitter +const Mascot = require('../mascot') +const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/controllers/network/enums') +const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes') + +class UnlockScreen extends Component { + constructor (props) { + super(props) + + this.state = { + error: null, + } + + this.animationEventEmitter = new EventEmitter() + } + + componentWillMount () { + const { isUnlocked, history } = this.props + + if (isUnlocked) { + history.push(DEFAULT_ROUTE) + } + } + + componentDidMount () { + const passwordBox = document.getElementById('password-box') + + if (passwordBox) { + passwordBox.focus() + } + } + + tryUnlockMetamask (password) { + const { tryUnlockMetamask, history } = this.props + tryUnlockMetamask(password) + .then(() => history.push(DEFAULT_ROUTE)) + .catch(({ message }) => this.setState({ error: message })) + } + + onSubmit (event) { + const input = document.getElementById('password-box') + const password = input.value + this.tryUnlockMetamask(password) + } + + onKeyPress (event) { + if (event.key === 'Enter') { + this.submitPassword(event) + } + } + + submitPassword (event) { + var element = event.target + var password = element.value + // reset input + element.value = '' + this.tryUnlockMetamask(password) + } + + inputChanged (event) { + // tell mascot to look at page action + var element = event.target + var boundingRect = element.getBoundingClientRect() + var coordinates = getCaretCoordinates(element, element.selectionEnd) + this.animationEventEmitter.emit('point', { + x: boundingRect.left + coordinates.left - element.scrollLeft, + y: boundingRect.top + coordinates.top - element.scrollTop, + }) + } + + render () { + const { error } = this.state + return ( + h('.unlock-screen', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), + + h('h1', { + style: { + fontSize: '1.4em', + textTransform: 'uppercase', + color: '#7F8082', + }, + }, this.props.t('appName')), + + h('input.large-input', { + type: 'password', + id: 'password-box', + placeholder: 'enter password', + style: { + background: 'white', + }, + onKeyPress: this.onKeyPress.bind(this), + onInput: this.inputChanged.bind(this), + }), + + h('.error', { + style: { + display: error ? 'block' : 'none', + padding: '0 20px', + textAlign: 'center', + }, + }, error), + + h('button.primary.cursor-pointer', { + onClick: this.onSubmit.bind(this), + style: { + margin: 10, + }, + }, this.props.t('login')), + + h('p.pointer', { + onClick: () => { + this.props.markPasswordForgotten() + this.props.history.push(RESTORE_VAULT_ROUTE) + + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { + global.platform.openExtensionInBrowser() + } + }, + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, this.props.t('restoreFromSeed')), + + h('p.pointer', { + onClick: () => { + this.props.useOldInterface() + .then(() => this.props.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)) + }, + style: { + fontSize: '0.8em', + color: '#aeaeae', + textDecoration: 'underline', + marginTop: '32px', + }, + }, this.props.t('classicInterface')), + ]) + ) + } +} + +UnlockScreen.propTypes = { + forgotPassword: PropTypes.func, + tryUnlockMetamask: PropTypes.func, + markPasswordForgotten: PropTypes.func, + history: PropTypes.object, + isUnlocked: PropTypes.bool, + t: PropTypes.func, + useOldInterface: PropTypes.func, + setNetworkEndpoints: PropTypes.func, +} + +const mapStateToProps = state => { + const { metamask: { isUnlocked } } = state + return { + isUnlocked, + } +} + +const mapDispatchToProps = dispatch => { + return { + forgotPassword: () => dispatch(forgotPassword()), + tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), + markPasswordForgotten: () => dispatch(markPasswordForgotten()), + useOldInterface: () => dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')), + setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)), + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(UnlockScreen) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 7bf20bced..ac1b15a4f 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -1,4 +1,6 @@ const Component = require('react').Component +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') @@ -21,14 +23,24 @@ const { const GasFeeDisplay = require('../send/gas-fee-display-v2') const SenderToRecipient = require('../sender-to-recipient') const NetworkDisplay = require('../network-display') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') +const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') + +import { + updateSendErrors, +} from '../../ducks/send' ConfirmSendEther.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(ConfirmSendEther) function mapStateToProps (state) { @@ -72,7 +84,6 @@ function mapDispatchToProps (dispatch) { errors: { to: null, amount: null }, editingTransactionId: id, })) - dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { @@ -98,7 +109,7 @@ function mapDispatchToProps (dispatch) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, - updateSendErrors: error => dispatch(actions.updateSendErrors(error)), + updateSendErrors: error => dispatch(updateSendErrors(error)), } } @@ -134,7 +145,7 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { if (shouldUpdateBalanceSendErrors) { const balanceIsSufficient = this.isBalanceSufficient(txMeta) updateSendErrors({ - insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), + insufficientFunds: balanceIsSufficient ? false : 'insufficientFunds', }) } @@ -142,7 +153,7 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { if (shouldUpdateSimulationSendError) { updateSendErrors({ - simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'), + simulationFails: !txMeta.simulationFails ? false : 'transactionError', }) } } @@ -270,9 +281,24 @@ ConfirmSendEther.prototype.getData = function () { } } +ConfirmSendEther.prototype.convertToRenderableCurrency = function (value, currencyCode) { + const upperCaseCurrencyCode = currencyCode.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(value), { + code: upperCaseCurrencyCode, + }) + : value +} + +ConfirmSendEther.prototype.editTransaction = function (txMeta) { + const { editTransaction, history } = this.props + editTransaction(txMeta) + history.push(SEND_ROUTE) +} + ConfirmSendEther.prototype.render = function () { const { - editTransaction, currentCurrency, clearSend, conversionRate, @@ -309,6 +335,9 @@ ConfirmSendEther.prototype.render = function () { ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' : 'Please review your transaction.' + const convertedAmountInFiat = this.convertToRenderableCurrency(amountInFIAT, currentCurrency) + const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency) + // This is from the latest master // It handles some of the errors that we are not currently handling // Leaving as comments fo reference @@ -328,7 +357,7 @@ ConfirmSendEther.prototype.render = function () { h('.page-container__header', [ h('.page-container__header-row', [ h('span.page-container__back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), style: { visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden', }, @@ -355,7 +384,7 @@ ConfirmSendEther.prototype.render = function () { // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, // ]), - h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount', [`${convertedAmountInFiat}`]), h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), @@ -402,7 +431,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), + h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${totalInETH} ETH`), ]), @@ -506,7 +535,9 @@ ConfirmSendEther.prototype.render = function () { }, this.context.t('cancel')), // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]), + h('button.btn-confirm.page-container__footer-button.allcaps', { + onClick: event => this.onSubmit(event), + }, this.context.t('confirm')), ]), ]), ]) @@ -532,9 +563,9 @@ ConfirmSendEther.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) } else if (!balanceIsSufficient) { - updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) + updateSendErrors({ insufficientFunds: 'insufficientFunds' }) } else { - updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') }) + updateSendErrors({ invalidGasParams: 'invalidGasParams' }) this.setState({ submitting: false }) } } @@ -544,6 +575,7 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) { const { cancelTransaction } = this.props cancelTransaction(txMeta) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) { @@ -631,4 +663,4 @@ ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator, const numBN = new BN(numerator) const denomBN = new BN(denominator) return targetBN.mul(numBN).div(denomBN) -}
\ No newline at end of file +} diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 19e591fd6..e1abc6d3d 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -1,4 +1,6 @@ const Component = require('react').Component +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') @@ -25,6 +27,8 @@ const { calcTokenAmount, } = require('../../token-util') const classnames = require('classnames') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -33,16 +37,24 @@ const { getSelectedAddress, getSelectedTokenContract, } = require('../../selectors') +const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') + +import { + updateSendErrors, +} from '../../ducks/send' ConfirmSendToken.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(ConfirmSendToken) function mapStateToProps (state, ownProps) { - const { token: { symbol }, txData } = ownProps + const { token: { address }, txData } = ownProps const { txParams } = txData || {} const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) @@ -53,7 +65,7 @@ function mapStateToProps (state, ownProps) { } = state.metamask const accounts = state.metamask.accounts const selectedAddress = getSelectedAddress(state) - const tokenExchangeRate = getTokenExchangeRate(state, symbol) + const tokenExchangeRate = getTokenExchangeRate(state, address) const { balance } = accounts[selectedAddress] return { conversionRate, @@ -69,12 +81,9 @@ function mapStateToProps (state, ownProps) { } function mapDispatchToProps (dispatch, ownProps) { - const { token: { symbol } } = ownProps - return { backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), - updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)), editTransaction: txMeta => { const { token: { address } } = ownProps const { txParams = {}, id } = txMeta @@ -136,7 +145,7 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, - updateSendErrors: error => dispatch(actions.updateSendErrors(error)), + updateSendErrors: error => dispatch(updateSendErrors(error)), } } @@ -147,6 +156,12 @@ function ConfirmSendToken () { this.onSubmit = this.onSubmit.bind(this) } +ConfirmSendToken.prototype.editTransaction = function (txMeta) { + const { editTransaction, history } = this.props + editTransaction(txMeta) + history.push(SEND_ROUTE) +} + ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) { const { balance: oldBalance, @@ -191,7 +206,6 @@ ConfirmSendToken.prototype.componentWillMount = function () { .balanceOf(selectedAddress) .then(usersToken => { }) - this.props.updateTokenExchangeRate() this.updateComponentSendErrors({}) } @@ -310,10 +324,12 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { const txParams = txMeta.txParams || {} const { memo = '' } = txParams + const convertedAmountInFiat = this.convertToRenderableCurrency(fiatAmount, currentCurrency) + return fiatAmount ? ( h('div.confirm-send-token__hero-amount-wrapper', [ - h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount', `${convertedAmountInFiat}`), h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), @@ -361,6 +377,9 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() + const totalInFIAT = fiatAmount && fiatGas && addCurrencies(fiatAmount, fiatGas) + const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency) + return fiatAmount && fiatGas ? ( h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ @@ -370,7 +389,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${addCurrencies(fiatAmount, fiatGas)} ${currentCurrency}`), + h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency}`), h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`), ]), ]) @@ -405,8 +424,17 @@ ConfirmSendToken.prototype.renderErrorMessage = function (message) { : null } +ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, currencyCode) { + const upperCaseCurrencyCode = currencyCode.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(value), { + code: upperCaseCurrencyCode, + }) + : value +} + ConfirmSendToken.prototype.render = function () { - const { editTransaction } = this.props const txMeta = this.gatherTxMeta() const { from: { @@ -433,7 +461,7 @@ ConfirmSendToken.prototype.render = function () { h('div.page-container', [ h('div.page-container__header', [ !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), }, this.context.t('edit')), h('div.page-container__title', title), h('div.page-container__subtitle', subtitle), @@ -513,7 +541,9 @@ ConfirmSendToken.prototype.render = function () { }, this.context.t('cancel')), // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]), + h('button.btn-confirm.page-container__footer-button.allcaps', { + onClick: event => this.onSubmit(event), + }, [this.context.t('confirm')]), ]), ]), ]), @@ -532,9 +562,9 @@ ConfirmSendToken.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) } else if (!balanceIsSufficient) { - updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) + updateSendErrors({ insufficientFunds: 'insufficientFunds' }) } else { - updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') }) + updateSendErrors({ invalidGasParams: 'invalidGasParams' }) this.setState({ submitting: false }) } } @@ -566,6 +596,7 @@ ConfirmSendToken.prototype.cancel = function (event, txMeta) { const { cancelTransaction } = this.props cancelTransaction(txMeta) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } ConfirmSendToken.prototype.checkValidity = function () { diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index acdd99364..6ee83ba7e 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -1,6 +1,7 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') +const PropTypes = require('prop-types') const clone = require('clone') const abi = require('human-standard-token-abi') const abiDecoder = require('abi-decoder') @@ -11,6 +12,7 @@ const util = require('../../util') const ConfirmSendEther = require('./confirm-send-ether') const ConfirmSendToken = require('./confirm-send-token') const ConfirmDeployContract = require('./confirm-deploy-contract') +const Loading = require('../loading') const TX_TYPES = { DEPLOY_CONTRACT: 'deploy_contract', @@ -53,10 +55,24 @@ function PendingTx () { } } -PendingTx.prototype.componentWillMount = async function () { +PendingTx.prototype.componentDidMount = function () { + this.setTokenData() +} + +PendingTx.prototype.componentDidUpdate = function (prevProps, prevState) { + if (prevState.isFetching) { + this.setTokenData() + } +} + +PendingTx.prototype.setTokenData = async function () { const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} + if (txMeta.loadingDefaults) { + return + } + if (!txParams.to) { return this.setState({ transactionType: TX_TYPES.DEPLOY_CONTRACT, @@ -125,7 +141,10 @@ PendingTx.prototype.render = function () { const { sendTransaction } = this.props if (isFetching) { - return h('noscript') + return h(Loading, { + fullScreen: true, + loadingMessage: this.context.t('generatingTransaction'), + }) } switch (transactionType) { @@ -150,6 +169,12 @@ PendingTx.prototype.render = function () { sendTransaction, }) default: - return h('noscript') + return h(Loading, { + fullScreen: true, + }) } } + +PendingTx.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js index 83885539c..3b2c62f49 100644 --- a/ui/app/components/qr-code.js +++ b/ui/app/components/qr-code.js @@ -3,8 +3,9 @@ const h = require('react-hyperscript') const qrCode = require('qrcode-npm').qrcode const inherits = require('util').inherits const connect = require('react-redux').connect -const isHexPrefixed = require('ethereumjs-util').isHexPrefixed +const { isHexPrefixed } = require('ethereumjs-util') const ReadOnlyInput = require('./readonly-input') +const { checksumAddress } = require('../util') module.exports = connect(mapStateToProps)(QrCodeView) @@ -24,16 +25,16 @@ function QrCodeView () { QrCodeView.prototype.render = function () { const props = this.props - const Qr = props.Qr - const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}` + const { message, data } = props.Qr + const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${data}` const qrImage = qrCode(4, 'M') qrImage.addData(address) qrImage.make() return h('.div.flex-column.flex-center', [ - Array.isArray(Qr.message) + Array.isArray(message) ? h('.message-container', this.renderMultiMessage()) - : Qr.message && h('.qr-header', Qr.message), + : message && h('.qr-header', message), this.props.warning ? this.props.warning && h('span.error.flex-center', { style: { @@ -50,7 +51,7 @@ QrCodeView.prototype.render = function () { h(ReadOnlyInput, { wrapperClass: 'ellip-address-wrapper', inputClass: 'qr-ellip-address', - value: Qr.data, + value: checksumAddress(data), }), ]) } diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js index 1ad3f69c1..b5e604a6e 100644 --- a/ui/app/components/send/account-list-item.js +++ b/ui/app/components/send/account-list-item.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect +const { checksumAddress } = require('../../util') const Identicon = require('../identicon') const CurrencyDisplay = require('./currency-display') const { conversionRateSelector, getCurrentCurrency } = require('../../selectors') @@ -56,7 +57,7 @@ AccountListItem.prototype.render = function () { ]), - displayAddress && name && h('div.account-list-item__account-address', address), + displayAddress && name && h('div.account-list-item__account-address', checksumAddress(address)), displayBalance && h(CurrencyDisplay, { primaryCurrency: 'ETH', diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 819fee0a0..a7bd5d7ea 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -3,6 +3,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const CurrencyInput = require('../currency-input') const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') module.exports = CurrencyDisplay @@ -53,12 +55,32 @@ CurrencyDisplay.prototype.getValueToRender = function () { }) } +CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) { + const { primaryCurrency, convertedCurrency, conversionRate } = this.props + + let convertedValue = conversionUtil(nonFormattedValue, { + fromNumericBase: 'dec', + fromCurrency: primaryCurrency, + toCurrency: convertedCurrency, + numberOfDecimals: 2, + conversionRate, + }) + convertedValue = Number(convertedValue).toFixed(2) + + const upperCaseCurrencyCode = convertedCurrency.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(convertedValue), { + code: upperCaseCurrencyCode, + }) + : convertedValue +} + CurrencyDisplay.prototype.render = function () { const { className = 'currency-display', primaryBalanceClassName = 'currency-display__input', convertedBalanceClassName = 'currency-display__converted-value', - conversionRate, primaryCurrency, convertedCurrency, readOnly = false, @@ -68,14 +90,7 @@ CurrencyDisplay.prototype.render = function () { const valueToRender = this.getValueToRender() - let convertedValue = conversionUtil(valueToRender, { - fromNumericBase: 'dec', - fromCurrency: primaryCurrency, - toCurrency: convertedCurrency, - numberOfDecimals: 2, - conversionRate, - }) - convertedValue = Number(convertedValue).toFixed(2) + const convertedValueToRender = this.getConvertedValueToRender(valueToRender) return h('div', { className, @@ -108,7 +123,7 @@ CurrencyDisplay.prototype.render = function () { h('div', { className: convertedBalanceClassName, - }, `${convertedValue} ${convertedCurrency.toUpperCase()}`), + }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`), ]) diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index edd0657f7..cdbee0cdc 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -2,6 +2,8 @@ const connect = require('react-redux').connect const actions = require('../../actions') const abi = require('ethereumjs-abi') const SendEther = require('../../send-v2') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const { accountsWithSendEtherInfoSelector, @@ -16,7 +18,14 @@ const { getSelectedTokenContract, } = require('../../selectors') -module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther) +import { + updateSendErrors, +} from '../../ducks/send' + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(SendEther) function mapStateToProps (state) { const fromAccounts = accountsWithSendEtherInfoSelector(state) @@ -62,7 +71,6 @@ function mapDispatchToProps (dispatch) { showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })), estimateGas: params => dispatch(actions.estimateGas(params)), getGasPrice: () => dispatch(actions.getGasPrice()), - updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)), signTokenTx: (tokenAddress, toAddress, amount, txData) => ( dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData)) ), @@ -71,7 +79,8 @@ function mapDispatchToProps (dispatch) { updateTx: txData => dispatch(actions.updateTransaction(txData)), setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)), addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)), - updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)), + setGasTotal: newTotal => dispatch(actions.setGasTotal(newTotal)), + updateGasTotal: () => dispatch(actions.updateGasTotal()), updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)), @@ -79,8 +88,7 @@ function mapDispatchToProps (dispatch) { updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)), updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)), - updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)), - goHome: () => dispatch(actions.goHome()), + updateSendErrors: newError => dispatch(updateSendErrors(newError)), clearSend: () => dispatch(actions.clearSend()), setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)), } diff --git a/ui/app/components/send_/account-list-item/account-list-item-README.md b/ui/app/components/send_/account-list-item/account-list-item-README.md new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/ui/app/components/send_/account-list-item/account-list-item-README.md diff --git a/ui/app/components/send_/account-list-item/account-list-item.component.js b/ui/app/components/send_/account-list-item/account-list-item.component.js new file mode 100644 index 000000000..b8407d147 --- /dev/null +++ b/ui/app/components/send_/account-list-item/account-list-item.component.js @@ -0,0 +1,74 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { checksumAddress } from '../../../util' +import Identicon from '../../identicon' +import CurrencyDisplay from '../../send/currency-display' + +export default class AccountListItem extends Component { + + static propTypes = { + account: PropTypes.object, + className: PropTypes.string, + conversionRate: PropTypes.number, + currentCurrency: PropTypes.string, + displayAddress: PropTypes.bool, + displayBalance: PropTypes.bool, + handleClick: PropTypes.func, + icon: PropTypes.node, + }; + + render () { + const { + account, + className, + conversionRate, + currentCurrency, + displayAddress = false, + displayBalance = true, + handleClick, + icon = null, + } = this.props + + const { name, address, balance } = account || {} + + return (<div + className={`account-list-item ${className}`} + onClick={() => handleClick({ name, address, balance })} + > + + <div className="account-list-item__top-row"> + <Identicon + address={address} + className="account-list-item__identicon" + diameter={18} + /> + + <div className="account-list-item__account-name">{ name || address }</div> + + {icon && <div className="account-list-item__icon">{ icon }</div>} + + </div> + + {displayAddress && name && <div className="account-list-item__account-address"> + { checksumAddress(address) } + </div>} + + {displayBalance && <CurrencyDisplay + className="account-list-item__account-balances" + conversionRate={conversionRate} + convertedBalanceClassName="account-list-item__account-secondary-balance" + convertedCurrency={currentCurrency} + primaryBalanceClassName="account-list-item__account-primary-balance" + primaryCurrency="ETH" + readOnly={true} + value={balance} + />} + + </div>) + } +} + +AccountListItem.contextTypes = { + t: PropTypes.func, +} + diff --git a/ui/app/components/send_/account-list-item/account-list-item.container.js b/ui/app/components/send_/account-list-item/account-list-item.container.js new file mode 100644 index 000000000..3151b1f1d --- /dev/null +++ b/ui/app/components/send_/account-list-item/account-list-item.container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux' +import { + getConversionRate, + getConvertedCurrency, +} from '../send.selectors.js' +import AccountListItem from './account-list-item.component' + +export default connect(mapStateToProps)(AccountListItem) + +function mapStateToProps (state) { + return { + conversionRate: getConversionRate(state), + currentCurrency: getConvertedCurrency(state), + } +} diff --git a/ui/app/components/send_/account-list-item/account-list-item.scss b/ui/app/components/send_/account-list-item/account-list-item.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/ui/app/components/send_/account-list-item/account-list-item.scss diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js index e69de29bb..bdf12b738 100644 --- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class AmountMaxButton extends Component { + + static propTypes = { + balance: PropTypes.string, + gasTotal: PropTypes.string, + maxModeOn: PropTypes.bool, + selectedToken: PropTypes.object, + setAmountToMax: PropTypes.func, + setMaxModeTo: PropTypes.func, + tokenBalance: PropTypes.string, + }; + + setMaxAmount () { + const { + balance, + gasTotal, + selectedToken, + setAmountToMax, + tokenBalance, + } = this.props + + setAmountToMax({ + balance, + gasTotal, + selectedToken, + tokenBalance, + }) + } + + render () { + const { setMaxModeTo, maxModeOn } = this.props + + return ( + <div + className="send-v2__amount-max" + onClick={(event) => { + event.preventDefault() + setMaxModeTo(true) + this.setMaxAmount() + }} + > + {!maxModeOn ? this.context.t('max') : ''} + </div> + ) + } + +} + +AmountMaxButton.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js index e69de29bb..a72f41775 100644 --- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js @@ -0,0 +1,40 @@ +import { connect } from 'react-redux' +import { + getGasTotal, + getSelectedToken, + getSendFromBalance, + getTokenBalance, +} from '../../../send.selectors.js' +import { getMaxModeOn } from './amount-max-button.selectors.js' +import { calcMaxAmount } from './amount-max-button.utils.js' +import { + updateSendAmount, + setMaxModeTo, +} from '../../../../../actions' +import AmountMaxButton from './amount-max-button.component' +import { + updateSendErrors, +} from '../../../../../ducks/send' + +export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton) + +function mapStateToProps (state) { + + return { + balance: getSendFromBalance(state), + gasTotal: getGasTotal(state), + maxModeOn: getMaxModeOn(state), + selectedToken: getSelectedToken(state), + tokenBalance: getTokenBalance(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + setAmountToMax: maxAmountDataObject => { + dispatch(updateSendErrors({ amount: null })) + dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject))) + }, + setMaxModeTo: bool => dispatch(setMaxModeTo(bool)), + } +} diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js index e69de29bb..69fec1994 100644 --- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js @@ -0,0 +1,9 @@ +const selectors = { + getMaxModeOn, +} + +module.exports = selectors + +function getMaxModeOn (state) { + return state.metamask.send.maxModeOn +} diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js index e69de29bb..b490a7fd7 100644 --- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js @@ -0,0 +1,22 @@ +const { + multiplyCurrencies, + subtractCurrencies, +} = require('../../../../../conversion-util') +const ethUtil = require('ethereumjs-util') + +function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) { + const { decimals } = selectedToken || {} + const multiplier = Math.pow(10, Number(decimals || 0)) + + return selectedToken + ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'}) + : subtractCurrencies( + ethUtil.addHexPrefix(balance), + ethUtil.addHexPrefix(gasTotal), + { toNumericBase: 'hex' } + ) +} + +module.exports = { + calcMaxAmount, +} diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js index e69de29bb..8e201ae41 100644 --- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js +++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js @@ -0,0 +1,96 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component' +import AmountMaxButton from './amount-max-button/amount-max-button.container' +import CurrencyDisplay from '../../../send/currency-display' + +export default class SendAmountRow extends Component { + + static propTypes = { + amount: PropTypes.string, + amountConversionRate: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), + balance: PropTypes.string, + conversionRate: PropTypes.number, + convertedCurrency: PropTypes.string, + gasTotal: PropTypes.string, + inError: PropTypes.bool, + primaryCurrency: PropTypes.string, + selectedToken: PropTypes.object, + setMaxModeTo: PropTypes.func, + tokenBalance: PropTypes.string, + updateSendAmount: PropTypes.func, + updateSendAmountError: PropTypes.func, + } + + validateAmount (amount) { + const { + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, + updateSendAmountError, + } = this.props + + updateSendAmountError({ + amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, + }) + } + + handleAmountChange (amount) { + const { updateSendAmount, setMaxModeTo } = this.props + + setMaxModeTo(false) + this.validateAmount(amount) + updateSendAmount(amount) + } + + render () { + const { + amount, + amountConversionRate, + convertedCurrency, + gasTotal, + inError, + primaryCurrency = 'ETH', + selectedToken, + } = this.props + + return ( + <SendRowWrapper + label={`${this.context.t('amount')}:`} + showError={inError} + errorType={'amount'} + > + {!inError && gasTotal && <AmountMaxButton />} + <CurrencyDisplay + conversionRate={amountConversionRate} + convertedCurrency={convertedCurrency} + handleChange={newAmount => this.handleAmountChange(newAmount)} + inError={inError} + primaryCurrency={primaryCurrency} + selectedToken={selectedToken} + value={amount || '0x0'} + /> + </SendRowWrapper> + ) + } + +} + +SendAmountRow.contextTypes = { + t: PropTypes.func, +} + diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js index 6ae80e7f2..13888ec53 100644 --- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js +++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js @@ -1,48 +1,51 @@ +import { connect } from 'react-redux' import { - getSelectedToken, - getPrimaryCurrency, getAmountConversionRate, + getConversionRate, getConvertedCurrency, - getSendAmount, getGasTotal, - getSelectedBalance, + getPrimaryCurrency, + getSelectedToken, + getSendAmount, + getSendFromBalance, getTokenBalance, -} from '../../send.selectors.js' +} from '../../send.selectors' import { - getMaxModeOn, - getSendAmountError, -} from './send-amount-row.selectors.js' -import { getAmountErrorObject } from './send-to-row.utils.js' + sendAmountIsInError, +} from './send-amount-row.selectors' +import { getAmountErrorObject } from '../../send.utils' import { - updateSendErrors, - updateSendTo, -} from '../../../actions' + setMaxModeTo, + updateSendAmount, +} from '../../../../actions' import { - openToDropdown, - closeToDropdown, -} from '../../../ducks/send' -import SendToRow from './send-to-row.component' + updateSendErrors, +} from '../../../../ducks/send' +import SendAmountRow from './send-amount-row.component' -export default connect(mapStateToProps, mapDispatchToProps)(SendToRow) +export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow) function mapStateToProps (state) { -updateSendTo -return { - to: getSendTo(state), - toAccounts: getSendToAccounts(state), - toDropdownOpen: getToDropdownOpen(state), - inError: sendToIsInError(state), - network: getCurrentNetwork(state), -} + return { + amount: getSendAmount(state), + amountConversionRate: getAmountConversionRate(state), + balance: getSendFromBalance(state), + conversionRate: getConversionRate(state), + convertedCurrency: getConvertedCurrency(state), + gasTotal: getGasTotal(state), + inError: sendAmountIsInError(state), + primaryCurrency: getPrimaryCurrency(state), + selectedToken: getSelectedToken(state), + tokenBalance: getTokenBalance(state), + } } function mapDispatchToProps (dispatch) { -return { - updateSendToError: (to) => { - dispatch(updateSendErrors(getToErrorObject(to))) - }, - updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), - openToDropdown: () => dispatch(()), - closeToDropdown: () => dispatch(()), + return { + setMaxModeTo: bool => dispatch(setMaxModeTo(bool)), + updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)), + updateSendAmountError: (amountDataObject) => { + dispatch(updateSendErrors(getAmountErrorObject(amountDataObject))) + }, + } } -}
\ No newline at end of file diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js index e69de29bb..fb08c7ed7 100644 --- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js +++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js @@ -0,0 +1,9 @@ +const selectors = { + sendAmountIsInError, +} + +module.exports = selectors + +function sendAmountIsInError (state) { + return Boolean(state.send.errors.amount) +} 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 e69de29bb..e213cfcf3 100644 --- a/ui/app/components/send_/send-content/send-content.component.js +++ b/ui/app/components/send_/send-content/send-content.component.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react' +import PageContainerContent from '../../page-container/page-container-content.component' +import SendAmountRow from './send-amount-row/send-amount-row.container' +import SendFromRow from './send-from-row/send-from-row.container' +import SendGasRow from './send-gas-row/send-gas-row.container' +import SendToRow from './send-to-row/send-to-row.container' + +export default class SendContent extends Component { + + render () { + return ( + <PageContainerContent> + <div className="send-v2__form"> + <SendFromRow /> + <SendToRow /> + <SendAmountRow /> + <SendGasRow /> + </div> + </PageContainerContent> + ) + } + +} diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js index e69de29bb..337228122 100644 --- a/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js +++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js @@ -0,0 +1,75 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import AccountListItem from '../../../account-list-item/account-list-item.container' + +export default class FromDropdown extends Component { + + static propTypes = { + accounts: PropTypes.array, + closeDropdown: PropTypes.func, + dropdownOpen: PropTypes.bool, + onSelect: PropTypes.func, + openDropdown: PropTypes.func, + selectedAccount: PropTypes.object, + }; + + renderListItemIcon (icon, color) { + return <i className={`fa ${icon} fa-lg`} style={ { color } }/> + } + + getListItemIcon (currentAccount, selectedAccount) { + return currentAccount.address === selectedAccount.address + ? this.renderListItemIcon('fa-check', '#02c9b1') + : null + } + + renderDropdown () { + const { + accounts, + closeDropdown, + onSelect, + selectedAccount, + } = this.props + + return (<div> + <div + className="send-v2__from-dropdown__close-area" + onClick={() => closeDropdown} + /> + <div className="send-v2__from-dropdown__list"> + {accounts.map((account, index) => <AccountListItem + account={account} + className="account-list-item__dropdown" + handleClick={() => { + onSelect(account) + closeDropdown() + }} + icon={this.getListItemIcon(account, selectedAccount.address)} + key={`from-dropdown-account-#${index}`} + />)} + </div> + </div>) + } + + render () { + const { + dropdownOpen, + openDropdown, + selectedAccount, + } = this.props + + return <div className="send-v2__from-dropdown"> + <AccountListItem + account={selectedAccount} + handleClick={openDropdown} + icon={this.renderListItemIcon('fa-caret-down', '#dedede')} + /> + {dropdownOpen && this.renderDropdown()}, + </div> + } + +} + +FromDropdown.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js index 7582cb2e6..17e7f8e46 100644 --- a/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js +++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js @@ -1,60 +1,59 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import SendRowWrapper from '../../../send/from-dropdown' -import FromDropdown from '' +import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component' +import FromDropdown from './from-dropdown/from-dropdown.component' export default class SendFromRow extends Component { static propTypes = { closeFromDropdown: PropTypes.func, - conversionRate: PropTypes.string, - from: PropTypes.string, + conversionRate: PropTypes.number, + from: PropTypes.object, fromAccounts: PropTypes.array, fromDropdownOpen: PropTypes.bool, openFromDropdown: PropTypes.func, tokenContract: PropTypes.object, updateSendFrom: PropTypes.func, - updateSendTokenBalance: PropTypes.func, + setSendTokenBalance: PropTypes.func, }; async handleFromChange (newFrom) { const { updateSendFrom, tokenContract, - updateSendTokenBalance, + setSendTokenBalance, } = this.props if (tokenContract) { const usersToken = await tokenContract.balanceOf(newFrom.address) - updateSendTokenBalance(usersToken) + setSendTokenBalance(usersToken) } updateSendFrom(newFrom) } render () { const { + closeFromDropdown, + conversionRate, from, fromAccounts, - conversionRate, fromDropdownOpen, - tokenContract, openFromDropdown, - closeFromDropdown, } = this.props return ( <SendRowWrapper label={`${this.context.t('from')}:`}> <FromDropdown - dropdownOpen={fromDropdownOpen} accounts={fromAccounts} - selectedAccount={from} - onSelect={newFrom => this.handleFromChange(newFrom)} - openDropdown={() => openFromDropdown()} closeDropdown={() => closeFromDropdown()} conversionRate={conversionRate} + dropdownOpen={fromDropdownOpen} + onSelect={newFrom => this.handleFromChange(newFrom)} + openDropdown={() => openFromDropdown()} + selectedAccount={from} /> </SendRowWrapper> - ); + ) } } diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js index 2ff3f0ccd..9e366445d 100644 --- a/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js +++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js @@ -1,29 +1,31 @@ +import { connect } from 'react-redux' import { - getSendFrom, - conversionRateSelector, - getSelectedTokenContract, - getCurrentAccountWithSendEtherInfo, accountsWithSendEtherInfoSelector, + getConversionRate, + getSelectedTokenContract, + getSendFromObject, } from '../../send.selectors.js' -import { getFromDropdownOpen } from './send-from-row.selectors.js' +import { + getFromDropdownOpen, +} from './send-from-row.selectors.js' import { calcTokenUpdateAmount } from './send-from-row.utils.js' import { - updateSendTokenBalance, updateSendFrom, -} from '../../../actions' + setSendTokenBalance, +} from '../../../../actions' import { - openFromDropdown, closeFromDropdown, -} from '../../../ducks/send' + openFromDropdown, +} from '../../../../ducks/send' import SendFromRow from './send-from-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendFromRow) function mapStateToProps (state) { return { - from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state), + conversionRate: getConversionRate(state), + from: getSendFromObject(state), fromAccounts: accountsWithSendEtherInfoSelector(state), - conversionRate: conversionRateSelector(state), fromDropdownOpen: getFromDropdownOpen(state), tokenContract: getSelectedTokenContract(state), } @@ -31,14 +33,14 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - updateSendTokenBalance: (usersToken, selectedToken) => { + closeFromDropdown: () => dispatch(closeFromDropdown()), + openFromDropdown: () => dispatch(openFromDropdown()), + updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)), + setSendTokenBalance: (usersToken, selectedToken) => { if (!usersToken) return const tokenBalance = calcTokenUpdateAmount(selectedToken, selectedToken) - dispatch(updateSendTokenBalance(tokenBalance)) + dispatch(setSendTokenBalance(tokenBalance)) }, - updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)), - openFromDropdown: () => dispatch(()), - closeFromDropdown: () => dispatch(()), } } diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js index 2be25816f..0aaaef793 100644 --- a/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js +++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js @@ -1,6 +1,6 @@ const { calcTokenAmount, -} = require('../../token-util') +} = require('../../../../token-util') function calcTokenUpdateAmount (usersToken, selectedToken) { const { decimals } = selectedToken || {} @@ -8,5 +8,5 @@ function calcTokenUpdateAmount (usersToken, selectedToken) { } module.exports = { - calcTokenUpdateAmount + calcTokenUpdateAmount, } diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js index e69de29bb..c62c110e0 100644 --- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component' +import GasFeeDisplay from '../../../send/gas-fee-display-v2' + +export default class SendGasRow extends Component { + + static propTypes = { + closeFromDropdown: PropTypes.func, + conversionRate: PropTypes.number, + convertedCurrency: PropTypes.string, + from: PropTypes.string, + fromAccounts: PropTypes.array, + fromDropdownOpen: PropTypes.bool, + gasLoadingError: PropTypes.bool, + gasTotal: PropTypes.string, + openFromDropdown: PropTypes.func, + showCustomizeGasModal: PropTypes.func, + tokenContract: PropTypes.object, + updateSendFrom: PropTypes.func, + }; + + render () { + const { + conversionRate, + convertedCurrency, + gasLoadingError, + gasTotal, + showCustomizeGasModal, + } = this.props + + return ( + <SendRowWrapper label={`${this.context.t('gasFee')}:`}> + <GasFeeDisplay + conversionRate={conversionRate} + convertedCurrency={convertedCurrency} + gasLoadingError={gasLoadingError} + gasTotal={gasTotal} + onClick={() => showCustomizeGasModal()} + /> + </SendRowWrapper> + ) + } + +} + +SendGasRow.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js index e69de29bb..20d3daa59 100644 --- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js +++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js @@ -0,0 +1,26 @@ +import { connect } from 'react-redux' +import { + getConversionRate, + getConvertedCurrency, + getGasTotal, +} from '../../send.selectors.js' +import { sendGasIsInError } from './send-gas-row.selectors.js' +import { showModal } from '../../../../actions' +import SendGasRow from './send-gas-row.component' + +export default connect(mapStateToProps, mapDispatchToProps)(SendGasRow) + +function mapStateToProps (state) { + return { + conversionRate: getConversionRate(state), + convertedCurrency: getConvertedCurrency(state), + gasTotal: getGasTotal(state), + gasLoadingError: sendGasIsInError(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS' })), + } +} diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js index e69de29bb..ad4ef4877 100644 --- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js +++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js @@ -0,0 +1,9 @@ +const selectors = { + sendGasIsInError, +} + +module.exports = selectors + +function sendGasIsInError (state) { + return state.metamask.send.errors.gasLoading +} diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js index 08f830cc5..0d314208b 100644 --- a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js @@ -1,3 +1,6 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + export default class SendRowErrorMessage extends Component { static propTypes = { @@ -7,17 +10,18 @@ export default class SendRowErrorMessage extends Component { render () { const { errors, errorType } = this.props + const errorMessage = errors[errorType] return ( errorMessage - ? <div className='send-v2__error'>{errorMessage}</div> + ? <div className="send-v2__error">{this.context.t(errorMessage)}</div> : null - ); + ) } } SendRowErrorMessage.contextTypes = { t: PropTypes.func, -}
\ No newline at end of file +} diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js index 2278dbe63..59622047f 100644 --- a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js @@ -1,3 +1,4 @@ +import { connect } from 'react-redux' import { getSendErrors } from '../../../send.selectors' import SendRowErrorMessage from './send-row-error-message.component' @@ -8,4 +9,4 @@ function mapStateToProps (state, ownProps) { errors: getSendErrors(state), errorType: ownProps.errorType, } -}
\ No newline at end of file +} diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js index a1ac591b9..707b3ae80 100644 --- a/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js @@ -5,31 +5,35 @@ import SendRowErrorMessage from './send-row-error-message/send-row-error-message export default class SendRowWrapper extends Component { static propTypes = { - label: PropTypes.string, - showError: PropTypes.bool, children: PropTypes.node, errorType: PropTypes.string, + label: PropTypes.string, + showError: PropTypes.bool, }; render () { const { - label, - errorType = '', - showError = false, - children, + children, + errorType = '', + label, + showError = false, } = this.props + const formField = Array.isArray(children) ? children[1] || children[0] : children + const customLabelContent = children.length > 1 ? children[0] : null + return ( <div className="send-v2__form-row"> <div className="send-v2__form-label"> {label} - (showError && <SendRowErrorMessage errorType={errorType}/>) + {showError && <SendRowErrorMessage errorType={errorType}/>} + {customLabelContent} </div> <div className="send-v2__form-field"> - {children} + {formField} </div> </div> - ); + ) } } 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 abcb54efc..a6e4c1624 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 @@ -1,57 +1,59 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import SendRowWrapper from '../../../send/from-dropdown' -import ToDropdown from '../../../ens-input' +import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component' +import EnsInput from '../../../ens-input' export default class SendToRow extends Component { static propTypes = { + closeToDropdown: PropTypes.func, + inError: PropTypes.bool, + network: PropTypes.string, + openToDropdown: PropTypes.func, to: PropTypes.string, toAccounts: PropTypes.array, toDropdownOpen: PropTypes.bool, - inError: PropTypes.bool, updateSendTo: PropTypes.func, updateSendToError: PropTypes.func, - openToDropdown: PropTypes.func, - closeToDropdown: PropTypes.func, - network: PropTypes.number, }; handleToChange (to, nickname = '') { const { updateSendTo, updateSendToError } = this.props updateSendTo(to, nickname) - updateSendErrors(to) + updateSendToError(to) } render () { const { - from, - fromAccounts, - conversionRate, - fromDropdownOpen, - tokenContract, - openToDropdown, closeToDropdown, - network, inError, + network, + openToDropdown, + to, + toAccounts, + toDropdownOpen, } = this.props return ( - <SendRowWrapper label={`${this.context.t('to')}:`}> + <SendRowWrapper + errorType={'to'} + label={`${this.context.t('to')}:`} + showError={inError} + > <EnsInput - name={'address'} - placeholder={this.context.t('recipient Address')} - network={network}, - to={to}, accounts={toAccounts} - dropdownOpen={toDropdownOpen} - openDropdown={() => openToDropdown()} closeDropdown={() => closeToDropdown()} - onChange={this.handleToChange} + dropdownOpen={toDropdownOpen} inError={inError} + name={'address'} + network={network} + onChange={(newTo, newNickname) => this.handleToChange(newTo, newNickname)} + openDropdown={() => openToDropdown()} + placeholder={this.context.t('recipientAddress')} + to={to} /> </SendRowWrapper> - ); + ) } } diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js index 1c446c168..bffdda49c 100644 --- a/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js +++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js @@ -1,7 +1,8 @@ +import { connect } from 'react-redux' import { - getSendTo, - getToAccounts, getCurrentNetwork, + getSendTo, + getSendToAccounts, } from '../../send.selectors.js' import { getToDropdownOpen, @@ -9,35 +10,34 @@ import { } from './send-to-row.selectors.js' import { getToErrorObject } from './send-to-row.utils.js' import { - updateSendErrors, updateSendTo, -} from '../../../actions' +} from '../../../../actions' import { - openToDropdown, - closeToDropdown, -} from '../../../ducks/send' + updateSendErrors, + openToDropdown, + closeToDropdown, +} from '../../../../ducks/send' import SendToRow from './send-to-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendToRow) function mapStateToProps (state) { - updateSendTo return { + inError: sendToIsInError(state), + network: getCurrentNetwork(state), to: getSendTo(state), toAccounts: getSendToAccounts(state), toDropdownOpen: getToDropdownOpen(state), - inError: sendToIsInError(state), - network: getCurrentNetwork(state), } } function mapDispatchToProps (dispatch) { return { + closeToDropdown: () => dispatch(closeToDropdown()), + openToDropdown: () => dispatch(openToDropdown()), + updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), updateSendToError: (to) => { dispatch(updateSendErrors(getToErrorObject(to))) }, - updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), - openToDropdown: () => dispatch(()), - closeToDropdown: () => dispatch(()), } -}
\ No newline at end of file +} diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js index 05bb65fa3..8919014be 100644 --- a/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js +++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js @@ -10,5 +10,5 @@ function getToDropdownOpen (state) { } function sendToIsInError (state) { - return Boolean(state.metamask.send.to) + return Boolean(state.send.errors.to) } diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js index 52bfde009..22e2e1f34 100644 --- a/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js +++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js @@ -1,17 +1,21 @@ +const { + REQUIRED_ERROR, + INVALID_RECIPIENT_ADDRESS_ERROR, +} = require('../../send.constants') const { isValidAddress } = require('../../../../util') function getToErrorObject (to) { let toError = null if (!to) { - toError = 'required' + toError = REQUIRED_ERROR } else if (!isValidAddress(to)) { - toError = 'invalidAddressRecipient' + toError = INVALID_RECIPIENT_ADDRESS_ERROR } - + return { to: toError } } module.exports = { - getToErrorObject + getToErrorObject, } diff --git a/ui/app/components/send_/send-footer/send-footer.component.js b/ui/app/components/send_/send-footer/send-footer.component.js index e69de29bb..fc7a78a94 100644 --- a/ui/app/components/send_/send-footer/send-footer.component.js +++ b/ui/app/components/send_/send-footer/send-footer.component.js @@ -0,0 +1,93 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerFooter from '../../page-container/page-container-footer' +import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../routes' + +export default class SendFooter extends Component { + + static propTypes = { + addToAddressBookIfNew: PropTypes.func, + amount: PropTypes.string, + clearSend: PropTypes.func, + disabled: PropTypes.bool, + editingTransactionId: PropTypes.string, + errors: PropTypes.object, + from: PropTypes.object, + gasLimit: PropTypes.string, + gasPrice: PropTypes.string, + gasTotal: PropTypes.string, + history: PropTypes.object, + selectedToken: PropTypes.object, + sign: PropTypes.func, + to: PropTypes.string, + toAccounts: PropTypes.array, + tokenBalance: PropTypes.string, + unapprovedTxs: PropTypes.object, + update: PropTypes.func, + }; + + onSubmit (event) { + event.preventDefault() + const { + addToAddressBookIfNew, + amount, + editingTransactionId, + from: {address: from}, + gasLimit: gas, + gasPrice, + selectedToken, + sign, + to, + unapprovedTxs, + // updateTx, + update, + toAccounts, + } = this.props + + // Should not be needed because submit should be disabled if there are no errors. + // const noErrors = !amountError && toError === null + + // if (!noErrors) { + // return + // } + + // TODO: add nickname functionality + addToAddressBookIfNew(to, toAccounts) + + editingTransactionId + ? update({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, + }) + : sign({ selectedToken, to, amount, from, gas, gasPrice }) + + this.props.history.push(CONFIRM_TRANSACTION_ROUTE) + } + + + render () { + const { clearSend, disabled, history } = this.props + + return ( + <PageContainerFooter + onCancel={() => { + clearSend() + history.push(DEFAULT_ROUTE) + }} + onSubmit={e => this.onSubmit(e)} + disabled={disabled} + /> + ) + } + +} + +SendFooter.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-footer/send-footer.container.js b/ui/app/components/send_/send-footer/send-footer.container.js index e69de29bb..022b2db08 100644 --- a/ui/app/components/send_/send-footer/send-footer.container.js +++ b/ui/app/components/send_/send-footer/send-footer.container.js @@ -0,0 +1,106 @@ +import { connect } from 'react-redux' +import ethUtil from 'ethereumjs-util' +import { + addToAddressBook, + clearSend, + signTokenTx, + signTx, + updateTransaction, +} from '../../../actions' +import SendFooter from './send-footer.component' +import { + getGasLimit, + getGasPrice, + getGasTotal, + getSelectedToken, + getSendAmount, + getSendEditingTransactionId, + getSendFromObject, + getSendTo, + getSendToAccounts, + getTokenBalance, + getUnapprovedTxs, +} from '../send.selectors' +import { + isSendFormInError, +} from './send-footer.selectors' +import { + addressIsNew, + constructTxParams, + constructUpdatedTx, + formShouldBeDisabled, +} from './send-footer.utils' + +export default connect(mapStateToProps, mapDispatchToProps)(SendFooter) + +function mapStateToProps (state) { + return { + amount: getSendAmount(state), + disabled: formShouldBeDisabled({ + inError: isSendFormInError(state), + selectedToken: getSelectedToken(state), + tokenBalance: getTokenBalance(state), + gasTotal: getGasTotal(state), + }), + editingTransactionId: getSendEditingTransactionId(state), + from: getSendFromObject(state), + gasLimit: getGasLimit(state), + gasPrice: getGasPrice(state), + inError: isSendFormInError(state), + isToken: Boolean(getSelectedToken(state)), + selectedToken: getSelectedToken(state), + to: getSendTo(state), + toAccounts: getSendToAccounts(state), + unapprovedTxs: getUnapprovedTxs(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + clearSend: () => dispatch(clearSend()), + sign: ({ selectedToken, to, amount, from, gas, gasPrice }) => { + const txParams = constructTxParams({ + amount, + from, + gas, + gasPrice, + selectedToken, + to, + }) + + selectedToken + ? dispatch(signTokenTx(selectedToken.address, to, amount, txParams)) + : dispatch(signTx(txParams)) + }, + update: ({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, + }) => { + const editingTx = constructUpdatedTx({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, + }) + + dispatch(updateTransaction(editingTx)) + }, + addToAddressBookIfNew: (newAddress, toAccounts, nickname = '') => { + const hexPrefixedAddress = ethUtil.addHexPrefix(newAddress) + if (addressIsNew(toAccounts)) { + // TODO: nickname, i.e. addToAddressBook(recipient, nickname) + dispatch(addToAddressBook(hexPrefixedAddress, nickname)) + } + }, + } +} diff --git a/ui/app/components/send_/send-footer/send-footer.selectors.js b/ui/app/components/send_/send-footer/send-footer.selectors.js index e69de29bb..e8fef6be6 100644 --- a/ui/app/components/send_/send-footer/send-footer.selectors.js +++ b/ui/app/components/send_/send-footer/send-footer.selectors.js @@ -0,0 +1,12 @@ +import { getSendErrors } from '../send.selectors' + +const selectors = { + isSendFormInError, +} + +module.exports = selectors + +function isSendFormInError (state) { + const { amount, to } = getSendErrors(state) + return Boolean(amount || to !== null) +} diff --git a/ui/app/components/send_/send-footer/send-footer.utils.js b/ui/app/components/send_/send-footer/send-footer.utils.js index e69de29bb..353c0e347 100644 --- a/ui/app/components/send_/send-footer/send-footer.utils.js +++ b/ui/app/components/send_/send-footer/send-footer.utils.js @@ -0,0 +1,84 @@ +import ethAbi from 'ethereumjs-abi' +import ethUtil from 'ethereumjs-util' +import { TOKEN_TRANSFER_FUNCTION_SIGNATURE } from '../send.constants' + +function formShouldBeDisabled ({ inError, selectedToken, tokenBalance, gasTotal }) { + const missingTokenBalance = selectedToken && !tokenBalance + return inError || !gasTotal || missingTokenBalance +} + +function addHexPrefixToObjectValues (obj) { + return Object.keys(obj).reduce((newObj, key) => { + return { ...newObj, [key]: ethUtil.addHexPrefix(obj[key]) } + }, {}) +} + +function constructTxParams ({ selectedToken, to, amount, from, gas, gasPrice }) { + const txParams = { + from, + value: '0', + gas, + gasPrice, + } + + if (!selectedToken) { + txParams.value = amount + txParams.to = to + } + + const hexPrefixedTxParams = addHexPrefixToObjectValues(txParams) + + return hexPrefixedTxParams +} + +function constructUpdatedTx ({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, +}) { + const editingTx = { + ...unapprovedTxs[editingTransactionId], + txParams: addHexPrefixToObjectValues({ from, gas, gasPrice }), + } + + if (selectedToken) { + const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( + ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), + x => ('00' + x.toString(16)).slice(-2) + ).join('') + + Object.assign(editingTx.txParams, addHexPrefixToObjectValues({ + value: '0', + to: selectedToken.address, + data, + })) + } else { + const { data } = unapprovedTxs[editingTransactionId].txParams + + Object.assign(editingTx.txParams, addHexPrefixToObjectValues({ + value: amount, + to, + data, + })) + + if (typeof editingTx.txParams.data === 'undefined') { + delete editingTx.txParams.data + } + } +} + +function addressIsNew (toAccounts, newAddress) { + return !toAccounts.find(({ address }) => newAddress === address) +} + +module.exports = { + addressIsNew, + formShouldBeDisabled, + constructTxParams, + constructUpdatedTx, +} diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js index 99adfc7e8..dc4190b93 100644 --- a/ui/app/components/send_/send-header/send-header.component.js +++ b/ui/app/components/send_/send-header/send-header.component.js @@ -1,28 +1,29 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PageContainerHeader from '../../page-container/page-container-header.component' +import PageContainerHeader from '../../page-container/page-container-header' +import { DEFAULT_ROUTE } from '../../../routes' export default class SendHeader extends Component { static propTypes = { - isToken: PropTypes.bool, clearSend: PropTypes.func, - goHome: PropTypes.func, + history: PropTypes.object, + isToken: PropTypes.bool, }; render () { - const { isToken, clearSend, goHome } = this.props + const { isToken, clearSend, history } = this.props return ( <PageContainerHeader - title={isToken ? this.context.t('sendTokens') : this.context.t('sendETH')} - subtitle={this.context.t('onlySendToEtherAddress')} onClose={() => { clearSend() - goHome() + history.push(DEFAULT_ROUTE) }} + subtitle={this.context.t('onlySendToEtherAddress')} + title={isToken ? this.context.t('sendTokens') : this.context.t('sendETH')} /> - ); + ) } } diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js index a4d3ac54f..0c92da3a6 100644 --- a/ui/app/components/send_/send-header/send-header.container.js +++ b/ui/app/components/send_/send-header/send-header.container.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux' -import { goHome, clearSend } from '../../../actions' +import { clearSend } from '../../../actions' import SendHeader from './send-header.component' import { getSelectedToken } from '../../../selectors' @@ -7,13 +7,12 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendHeader) function mapStateToProps (state) { return { - isToken: Boolean(getSelectedToken(state)) + isToken: Boolean(getSelectedToken(state)), } } function mapDispatchToProps (dispatch) { return { - goHome: () => dispatch(goHome()), clearSend: () => dispatch(clearSend()), } } diff --git a/ui/app/components/send_/send.component.js b/ui/app/components/send_/send.component.js index e69de29bb..e14a97537 100644 --- a/ui/app/components/send_/send.component.js +++ b/ui/app/components/send_/send.component.js @@ -0,0 +1,142 @@ +import React from 'react' +import PropTypes from 'prop-types' +import PersistentForm from '../../../lib/persistent-form' +import { + getAmountErrorObject, + doesAmountErrorRequireUpdate, +} from './send.utils' + +import SendHeader from './send-header/send-header.container' +import SendContent from './send-content/send-content.component' +import SendFooter from './send-footer/send-footer.container' + +export default class SendTransactionScreen extends PersistentForm { + + static propTypes = { + amount: PropTypes.string, + amountConversionRate: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), + conversionRate: PropTypes.number, + data: PropTypes.string, + editingTransactionId: PropTypes.string, + from: PropTypes.object, + gasLimit: PropTypes.string, + gasPrice: PropTypes.string, + gasTotal: PropTypes.string, + history: PropTypes.object, + network: PropTypes.string, + primaryCurrency: PropTypes.string, + selectedAddress: PropTypes.string, + selectedToken: PropTypes.object, + tokenBalance: PropTypes.string, + tokenContract: PropTypes.object, + updateAndSetGasTotal: PropTypes.func, + updateSendErrors: PropTypes.func, + updateSendTokenBalance: PropTypes.func, + }; + + updateGas () { + const { + data, + editingTransactionId, + gasLimit, + gasPrice, + selectedAddress, + selectedToken = {}, + updateAndSetGasTotal, + } = this.props + + updateAndSetGasTotal({ + data, + editingTransactionId, + gasLimit, + gasPrice, + selectedAddress, + selectedToken, + }) + } + + componentDidUpdate (prevProps) { + const { + amount, + amountConversionRate, + conversionRate, + from: { address, balance }, + gasTotal, + network, + primaryCurrency, + selectedToken, + tokenBalance, + updateSendErrors, + updateSendTokenBalance, + tokenContract, + } = this.props + + const { + from: { balance: prevBalance }, + gasTotal: prevGasTotal, + tokenBalance: prevTokenBalance, + network: prevNetwork, + } = prevProps + + const uninitialized = [prevBalance, prevGasTotal].every(n => n === null) + + if (!uninitialized) { + const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({ + balance, + gasTotal, + prevBalance, + prevGasTotal, + prevTokenBalance, + selectedToken, + tokenBalance, + }) + + if (amountErrorRequiresUpdate) { + const amountErrorObject = getAmountErrorObject({ + amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, + }) + updateSendErrors(amountErrorObject) + } + + if (network !== prevNetwork && network !== 'loading') { + updateSendTokenBalance({ + selectedToken, + tokenContract, + address, + }) + this.updateGas() + } + } + } + + componentWillMount () { + this.updateGas() + } + + render () { + const { history } = this.props + + return ( + <div className="page-container"> + <SendHeader history={history}/> + <SendContent/> + <SendFooter history={history}/> + </div> + ) + } + +} + +SendTransactionScreen.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send.constants.js b/ui/app/components/send_/send.constants.js new file mode 100644 index 000000000..d047ed704 --- /dev/null +++ b/ui/app/components/send_/send.constants.js @@ -0,0 +1,44 @@ +const ethUtil = require('ethereumjs-util') +const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') + +const MIN_GAS_PRICE_HEX = (100000000).toString(16) +const MIN_GAS_PRICE_DEC = '100000000' +const MIN_GAS_LIMIT_DEC = '21000' +const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16) + +const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, { + fromDenomination: 'WEI', + toDenomination: 'GWEI', + fromNumericBase: 'hex', + toNumericBase: 'hex', + numberOfDecimals: 1, +})) + +const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, +}) + +const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb' + +const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds' +const INSUFFICIENT_TOKENS_ERROR = 'insufficientTokens' +const NEGATIVE_ETH_ERROR = 'negativeETH' +const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient' +const REQUIRED_ERROR = 'required' + +module.exports = { + INSUFFICIENT_FUNDS_ERROR, + INSUFFICIENT_TOKENS_ERROR, + INVALID_RECIPIENT_ADDRESS_ERROR, + MIN_GAS_LIMIT_DEC, + MIN_GAS_LIMIT_HEX, + MIN_GAS_PRICE_DEC, + MIN_GAS_PRICE_GWEI, + MIN_GAS_PRICE_HEX, + MIN_GAS_TOTAL, + NEGATIVE_ETH_ERROR, + REQUIRED_ERROR, + TOKEN_TRANSFER_FUNCTION_SIGNATURE, +} diff --git a/ui/app/components/send_/send.container.js b/ui/app/components/send_/send.container.js index e69de29bb..df605469a 100644 --- a/ui/app/components/send_/send.container.js +++ b/ui/app/components/send_/send.container.js @@ -0,0 +1,88 @@ +import { connect } from 'react-redux' +import abi from 'ethereumjs-abi' +import SendEther from './send.component' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' +import { + getAmountConversionRate, + getConversionRate, + getCurrentNetwork, + getGasLimit, + getGasPrice, + getGasTotal, + getPrimaryCurrency, + getSelectedAddress, + getSelectedToken, + getSelectedTokenContract, + getSelectedTokenToFiatRate, + getSendAmount, + getSendEditingTransactionId, + getSendFromObject, + getTokenBalance, +} from './send.selectors' +import { + updateSendTokenBalance, + updateGasTotal, + setGasTotal, +} from '../../actions' +import { + updateSendErrors, +} from '../../ducks/send' +import { + calcGasTotal, + generateTokenTransferData, +} from './send.utils.js' + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(SendEther) + +function mapStateToProps (state) { + const selectedAddress = getSelectedAddress(state) + const selectedToken = getSelectedToken(state) + + return { + amount: getSendAmount(state), + amountConversionRate: getAmountConversionRate(state), + conversionRate: getConversionRate(state), + data: generateTokenTransferData(abi, selectedAddress, selectedToken), + editingTransactionId: getSendEditingTransactionId(state), + from: getSendFromObject(state), + gasLimit: getGasLimit(state), + gasPrice: getGasPrice(state), + gasTotal: getGasTotal(state), + network: getCurrentNetwork(state), + primaryCurrency: getPrimaryCurrency(state), + selectedAddress: getSelectedAddress(state), + selectedToken: getSelectedToken(state), + tokenBalance: getTokenBalance(state), + tokenContract: getSelectedTokenContract(state), + tokenToFiatRate: getSelectedTokenToFiatRate(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + updateAndSetGasTotal: ({ + data, + editingTransactionId, + gasLimit, + gasPrice, + selectedAddress, + selectedToken, + }) => { + !editingTransactionId + ? dispatch(updateGasTotal({ selectedAddress, selectedToken, data })) + : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice))) + }, + updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => { + dispatch(updateSendTokenBalance({ + selectedToken, + tokenContract, + address, + })) + }, + updateSendErrors: newError => dispatch(updateSendErrors(newError)), + } +} diff --git a/ui/app/components/send_/send.selectors.js b/ui/app/components/send_/send.selectors.js index 8c088098e..761b15182 100644 --- a/ui/app/components/send_/send.selectors.js +++ b/ui/app/components/send_/send.selectors.js @@ -2,105 +2,95 @@ import { valuesFor } from '../../util' import abi from 'human-standard-token-abi' import { multiplyCurrencies, -} from './conversion-util' +} from '../../conversion-util' const selectors = { + accountsWithSendEtherInfoSelector, + autoAddToBetaUI, + getAddressBook, + getAmountConversionRate, + getConversionRate, + getConvertedCurrency, + getCurrentAccountWithSendEtherInfo, + getCurrentCurrency, + getCurrentNetwork, + getCurrentViewContext, + getForceGasMin, + getGasLimit, + getGasPrice, + getGasTotal, + getPrimaryCurrency, + getSelectedAccount, getSelectedAddress, getSelectedIdentity, - getSelectedAccount, getSelectedToken, + getSelectedTokenContract, getSelectedTokenExchangeRate, - getTokenExchangeRate, - conversionRateSelector, - transactionsSelector, - accountsWithSendEtherInfoSelector, - getCurrentAccountWithSendEtherInfo, - getGasPrice, - getGasLimit, - getForceGasMin, - getAddressBook, - getSendFrom, - getCurrentCurrency, - getSendAmount, getSelectedTokenToFiatRate, - getSelectedTokenContract, - autoAddToBetaUI, - getSendMaxModeState, - getCurrentViewContext, + getSendAmount, + getSendEditingTransactionId, getSendErrors, + getSendFrom, + getSendFromBalance, + getSendFromObject, + getSendMaxModeState, getSendTo, - getCurrentNetwork, + getSendToAccounts, + getTokenBalance, + getTokenExchangeRate, + getUnapprovedTxs, + isSendFormInError, + transactionsSelector, } module.exports = selectors -function getSelectedAddress (state) { - const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0] - - return selectedAddress -} +function accountsWithSendEtherInfoSelector (state) { + const { + accounts, + identities, + } = state.metamask -function getSelectedIdentity (state) { - const selectedAddress = getSelectedAddress(state) - const identities = state.metamask.identities + const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => { + return Object.assign({}, account, identities[key]) + }) - return identities[selectedAddress] + return accountsWithSendEtherInfo } -function getSelectedAccount (state) { - const accounts = state.metamask.accounts - const selectedAddress = getSelectedAddress(state) +function autoAddToBetaUI (state) { + const autoAddTransactionThreshold = 12 + const autoAddAccountsThreshold = 2 + const autoAddTokensThreshold = 1 - return accounts[selectedAddress] -} + const numberOfTransactions = state.metamask.selectedAddressTxList.length + const numberOfAccounts = Object.keys(state.metamask.accounts).length + const numberOfTokensAdded = state.metamask.tokens.length -function getSelectedToken (state) { - const tokens = state.metamask.tokens || [] - const selectedTokenAddress = state.metamask.selectedTokenAddress - const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0] - const sendToken = state.metamask.send.token + const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) && + (numberOfAccounts > autoAddAccountsThreshold) && + (numberOfTokensAdded > autoAddTokensThreshold) + const userIsNotInBeta = !state.metamask.featureFlags.betaUI - return selectedToken || sendToken || null + return userIsNotInBeta && userPassesThreshold } -function getSelectedTokenExchangeRate (state) { - const tokenExchangeRates = state.metamask.tokenExchangeRates - const selectedToken = getSelectedToken(state) || {} - const { symbol = '' } = selectedToken - - const pair = `${symbol.toLowerCase()}_eth` - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} - - return tokenExchangeRate +function getAddressBook (state) { + return state.metamask.addressBook } -function getTokenExchangeRate (state, tokenSymbol) { - const pair = `${tokenSymbol.toLowerCase()}_eth` - const tokenExchangeRates = state.metamask.tokenExchangeRates - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} - - return tokenExchangeRate +function getAmountConversionRate (state) { + return getSelectedToken(state) + ? getSelectedTokenToFiatRate(state) + : getConversionRate(state) } -function conversionRateSelector (state) { +function getConversionRate (state) { return state.metamask.conversionRate } -function getAddressBook (state) { - return state.metamask.addressBook -} - -function accountsWithSendEtherInfoSelector (state) { - const { - accounts, - identities, - } = state.metamask - - const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => { - return Object.assign({}, account, identities[key]) - }) - - return accountsWithSendEtherInfo +function getConvertedCurrency (state) { + return state.metamask.currentCurrency } function getCurrentAccountWithSendEtherInfo (state) { @@ -110,20 +100,21 @@ function getCurrentAccountWithSendEtherInfo (state) { return accounts.find(({ address }) => address === currentAddress) } -function transactionsSelector (state) { - const { network, selectedTokenAddress } = state.metamask - const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs) - const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined - const transactions = state.metamask.selectedAddressTxList || [] - const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList) +function getCurrentCurrency (state) { + return state.metamask.currentCurrency +} - // console.log({txsToRender, selectedTokenAddress}) - return selectedTokenAddress - ? txsToRender - .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress) - .sort((a, b) => b.time - a.time) - : txsToRender - .sort((a, b) => b.time - a.time) +function getCurrentNetwork (state) { + return state.metamask.network +} + +function getCurrentViewContext (state) { + const { currentView = {} } = state.appState + return currentView.context +} + +function getForceGasMin (state) { + return state.metamask.send.forceGasMin } function getGasPrice (state) { @@ -134,29 +125,64 @@ function getGasLimit (state) { return state.metamask.send.gasLimit } -function getForceGasMin (state) { - return state.metamask.send.forceGasMin +function getGasTotal (state) { + return state.metamask.send.gasTotal } -function getSendFrom (state) { - return state.metamask.send.from +function getPrimaryCurrency (state) { + const selectedToken = getSelectedToken(state) + return selectedToken && selectedToken.symbol } -function getSendAmount (state) { - return state.metamask.send.amount +function getSelectedAccount (state) { + const accounts = state.metamask.accounts + const selectedAddress = getSelectedAddress(state) + + return accounts[selectedAddress] } -function getSendMaxModeState (state) { - return state.metamask.send.maxModeOn +function getSelectedAddress (state) { + const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0] + + return selectedAddress } -function getCurrentCurrency (state) { - return state.metamask.currentCurrency +function getSelectedIdentity (state) { + const selectedAddress = getSelectedAddress(state) + const identities = state.metamask.identities + + return identities[selectedAddress] +} + +function getSelectedToken (state) { + const tokens = state.metamask.tokens || [] + const selectedTokenAddress = state.metamask.selectedTokenAddress + const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0] + const sendToken = state.metamask.send.token + + return selectedToken || sendToken || null +} + +function getSelectedTokenContract (state) { + const selectedToken = getSelectedToken(state) + return selectedToken + ? global.eth.contract(abi).at(selectedToken.address) + : null +} + +function getSelectedTokenExchangeRate (state) { + const tokenExchangeRates = state.metamask.tokenExchangeRates + const selectedToken = getSelectedToken(state) || {} + const { symbol = '' } = selectedToken + const pair = `${symbol.toLowerCase()}_eth` + const { rate: tokenExchangeRate = 0 } = tokenExchangeRates && tokenExchangeRates[pair] || {} + + return tokenExchangeRate } function getSelectedTokenToFiatRate (state) { const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state) - const conversionRate = conversionRateSelector(state) + const conversionRate = getConversionRate(state) const tokenToFiatRate = multiplyCurrencies( conversionRate, @@ -167,37 +193,33 @@ function getSelectedTokenToFiatRate (state) { return tokenToFiatRate } -function getSelectedTokenContract (state) { - const selectedToken = getSelectedToken(state) - return selectedToken - ? global.eth.contract(abi).at(selectedToken.address) - : null +function getSendAmount (state) { + return state.metamask.send.amount } -function autoAddToBetaUI (state) { - const autoAddTransactionThreshold = 12 - const autoAddAccountsThreshold = 2 - const autoAddTokensThreshold = 1 +function getSendEditingTransactionId (state) { + return state.metamask.send.editingTransactionId +} - const numberOfTransactions = state.metamask.selectedAddressTxList.length - const numberOfAccounts = Object.keys(state.metamask.accounts).length - const numberOfTokensAdded = state.metamask.tokens.length +function getSendErrors (state) { + return state.send.errors +} - const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) && - (numberOfAccounts > autoAddAccountsThreshold) && - (numberOfTokensAdded > autoAddTokensThreshold) - const userIsNotInBeta = !state.metamask.featureFlags.betaUI +function getSendFrom (state) { + return state.metamask.send.from +} - return userIsNotInBeta && userPassesThreshold +function getSendFromBalance (state) { + const from = getSendFrom(state) || getSelectedAccount(state) + return from.balance } -function getCurrentViewContext (state) { - const { currentView = {} } = state.appState - return currentView.context +function getSendFromObject (state) { + return getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state) } -function getSendErrors (state) { - return state.metamask.send.errors +function getSendMaxModeState (state) { + return state.metamask.send.maxModeOn } function getSendTo (state) { @@ -212,6 +234,38 @@ function getSendToAccounts (state) { return Object.entries(allAccounts).map(([key, account]) => account) } -function getCurrentNetwork (state) { - return state.metamask.network -}
\ No newline at end of file +function getTokenBalance (state) { + return state.metamask.send.tokenBalance +} + +function getTokenExchangeRate (state, tokenSymbol) { + const pair = `${tokenSymbol.toLowerCase()}_eth` + const tokenExchangeRates = state.metamask.tokenExchangeRates + const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} + + return tokenExchangeRate +} + +function getUnapprovedTxs (state) { + return state.metamask.unapprovedTxs +} + +function isSendFormInError (state) { + const { amount, to } = getSendErrors(state) + return Boolean(amount || to !== null) +} + +function transactionsSelector (state) { + const { network, selectedTokenAddress } = state.metamask + const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs) + const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined + const transactions = state.metamask.selectedAddressTxList || [] + const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList) + + return selectedTokenAddress + ? txsToRender + .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress) + .sort((a, b) => b.time - a.time) + : txsToRender + .sort((a, b) => b.time - a.time) +} diff --git a/ui/app/components/send_/send.utils.js b/ui/app/components/send_/send.utils.js index e69de29bb..e537d5624 100644 --- a/ui/app/components/send_/send.utils.js +++ b/ui/app/components/send_/send.utils.js @@ -0,0 +1,188 @@ +const { + addCurrencies, + conversionUtil, + conversionGTE, + multiplyCurrencies, +} = require('../../conversion-util') +const { + calcTokenAmount, +} = require('../../token-util') +const { + conversionGreaterThan, +} = require('../../conversion-util') +const { + INSUFFICIENT_FUNDS_ERROR, + INSUFFICIENT_TOKENS_ERROR, + NEGATIVE_ETH_ERROR, +} = require('./send.constants') + +module.exports = { + calcGasTotal, + doesAmountErrorRequireUpdate, + generateTokenTransferData, + getAmountErrorObject, + getParamsForGasEstimate, + calcTokenBalance, + isBalanceSufficient, + isTokenBalanceSufficient, +} + +function calcGasTotal (gasLimit, gasPrice) { + return multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) +} + +function isBalanceSufficient ({ + amount = '0x0', + amountConversionRate, + balance, + conversionRate, + gasTotal = '0x0', + primaryCurrency, +}) { + const totalAmount = addCurrencies(amount, gasTotal, { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + }) + + const balanceIsSufficient = conversionGTE( + { + value: balance, + fromNumericBase: 'hex', + fromCurrency: primaryCurrency, + conversionRate, + }, + { + value: totalAmount, + fromNumericBase: 'hex', + conversionRate: amountConversionRate || conversionRate, + fromCurrency: primaryCurrency, + }, + ) + + return balanceIsSufficient +} + +function isTokenBalanceSufficient ({ + amount = '0x0', + tokenBalance, + decimals, +}) { + const amountInDec = conversionUtil(amount, { + fromNumericBase: 'hex', + }) + + const tokenBalanceIsSufficient = conversionGTE( + { + value: tokenBalance, + fromNumericBase: 'dec', + }, + { + value: calcTokenAmount(amountInDec, decimals), + fromNumericBase: 'dec', + }, + ) + + return tokenBalanceIsSufficient +} + +function getAmountErrorObject ({ + amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, +}) { + let insufficientFunds = false + if (gasTotal && conversionRate) { + insufficientFunds = !isBalanceSufficient({ + amount: selectedToken ? '0x0' : amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + }) + } + + let inSufficientTokens = false + if (selectedToken && tokenBalance !== null) { + const { decimals } = selectedToken + inSufficientTokens = !isTokenBalanceSufficient({ + tokenBalance, + amount, + decimals, + }) + } + + const amountLessThanZero = conversionGreaterThan( + { value: 0, fromNumericBase: 'dec' }, + { value: amount, fromNumericBase: 'hex' }, + ) + + let amountError = null + + if (insufficientFunds) { + amountError = INSUFFICIENT_FUNDS_ERROR + } else if (inSufficientTokens) { + amountError = INSUFFICIENT_TOKENS_ERROR + } else if (amountLessThanZero) { + amountError = NEGATIVE_ETH_ERROR + } + + return { amount: amountError } +} + +function getParamsForGasEstimate (selectedAddress, symbol, data) { + const estimatedGasParams = { + from: selectedAddress, + gas: '746a528800', + } + + if (symbol) { + Object.assign(estimatedGasParams, { value: '0x0' }) + } + + if (data) { + Object.assign(estimatedGasParams, { data }) + } + + return estimatedGasParams +} + +function calcTokenBalance ({ selectedToken, usersToken }) { + const { decimals } = selectedToken || {} + return calcTokenAmount(usersToken.balance.toString(), decimals) +} + +function doesAmountErrorRequireUpdate ({ + balance, + gasTotal, + prevBalance, + prevGasTotal, + prevTokenBalance, + selectedToken, + tokenBalance, +}) { + const balanceHasChanged = balance !== prevBalance + const gasTotalHasChange = gasTotal !== prevGasTotal + const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance + const amountErrorRequiresUpdate = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged + + return amountErrorRequiresUpdate +} + +function generateTokenTransferData (abi, selectedAddress, selectedToken) { + if (!selectedToken) return + return Array.prototype.map.call( + abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']), + x => ('00' + x.toString(16)).slice(-2) + ).join('') +} diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 41415411e..b958a2d2d 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -6,6 +6,8 @@ const Identicon = require('./identicon') const connect = require('react-redux').connect const ethUtil = require('ethereumjs-util') const classnames = require('classnames') +const { compose } = require('recompose') +const { withRouter } = require('react-router-dom') const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') @@ -20,6 +22,8 @@ const { conversionRateSelector, } = require('../selectors.js') +const { DEFAULT_ROUTE } = require('../routes') + function mapStateToProps (state) { return { balance: getSelectedAccount(state).balance, @@ -42,7 +46,10 @@ SignatureRequest.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(SignatureRequest) inherits(SignatureRequest, Component) @@ -229,10 +236,14 @@ SignatureRequest.prototype.renderFooter = function () { return h('div.request-signature__footer', [ h('button.btn-secondary--lg.request-signature__footer__cancel-button', { - onClick: cancel, + onClick: event => { + cancel(event).then(() => this.props.history.push(DEFAULT_ROUTE)) + }, }, this.context.t('cancel')), h('button.btn-primary--lg', { - onClick: sign, + onClick: event => { + sign(event).then(() => this.props.history.push(DEFAULT_ROUTE)) + }, }, this.context.t('sign')), ]) } diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js index a80640116..0016a09c1 100644 --- a/ui/app/components/tab-bar.js +++ b/ui/app/components/tab-bar.js @@ -4,31 +4,17 @@ const PropTypes = require('prop-types') const classnames = require('classnames') class TabBar extends Component { - constructor (props) { - super(props) - const { defaultTab, tabs } = props - - this.state = { - subview: defaultTab || tabs[0].key, - } - } - render () { - const { tabs = [], tabSelected } = this.props - const { subview } = this.state + const { tabs = [], onSelect, isActive } = this.props return ( h('.tab-bar', {}, [ - tabs.map((tab) => { - const { key, content } = tab + tabs.map(({ key, content }) => { return h('div', { className: classnames('tab-bar__tab pointer', { - 'tab-bar__tab--active': subview === key, + 'tab-bar__tab--active': isActive(key, content), }), - onClick: () => { - this.setState({ subview: key }) - tabSelected(key) - }, + onClick: () => onSelect(key), key, }, content) }), @@ -39,9 +25,9 @@ class TabBar extends Component { } TabBar.propTypes = { - defaultTab: PropTypes.string, + isActive: PropTypes.func.isRequired, tabs: PropTypes.array, - tabSelected: PropTypes.func, + onSelect: PropTypes.func, } module.exports = TabBar diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 2f71c0687..1900ccec7 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const TokenTracker = require('eth-token-tracker') const connect = require('react-redux').connect const selectors = require('../selectors') +const log = require('loglevel') function mapStateToProps (state) { return { diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 0332fde88..c84117d84 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -16,7 +16,7 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, selectedTokenAddress: state.metamask.selectedTokenAddress, userAddress: selectors.getSelectedAddress(state), - tokenExchangeRates: state.metamask.tokenExchangeRates, + contractExchangeRates: state.metamask.contractExchangeRates, conversionRate: state.metamask.conversionRate, sidebarOpen: state.appState.sidebarOpen, } @@ -25,7 +25,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { setSelectedToken: address => dispatch(actions.setSelectedToken(address)), - updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)), hideSidebar: () => dispatch(actions.hideSidebar()), } } @@ -41,15 +40,6 @@ function TokenCell () { } } -TokenCell.prototype.componentWillMount = function () { - const { - updateTokenExchangeRate, - symbol, - } = this.props - - updateTokenExchangeRate(symbol) -} - TokenCell.prototype.render = function () { const { tokenMenuOpen } = this.state const props = this.props @@ -60,7 +50,7 @@ TokenCell.prototype.render = function () { network, setSelectedToken, selectedTokenAddress, - tokenExchangeRates, + contractExchangeRates, conversionRate, hideSidebar, sidebarOpen, @@ -68,15 +58,13 @@ TokenCell.prototype.render = function () { // userAddress, } = props - const pair = `${symbol.toLowerCase()}_eth` - let currentTokenToFiatRate let currentTokenInFiat let formattedFiat = '' - if (tokenExchangeRates[pair]) { + if (contractExchangeRates[address]) { currentTokenToFiatRate = multiplyCurrencies( - tokenExchangeRates[pair].rate, + contractExchangeRates[address], conversionRate ) currentTokenInFiat = conversionUtil(string, { diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 150a3762d..4189cf801 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -6,6 +6,7 @@ const TokenTracker = require('eth-token-tracker') const TokenCell = require('./token-cell.js') const connect = require('react-redux').connect const selectors = require('../selectors') +const log = require('loglevel') function mapStateToProps (state) { return { diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 42c008798..bd4ea80a6 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -9,6 +9,7 @@ const abiDecoder = require('abi-decoder') abiDecoder.addABI(abi) const Identicon = require('./identicon') const contractMap = require('eth-contract-metadata') +const { checksumAddress } = require('../util') const actions = require('../actions') const { conversionUtil, multiplyCurrencies } = require('../conversion-util') @@ -27,7 +28,7 @@ function mapStateToProps (state) { return { tokens: state.metamask.tokens, currentCurrency: getCurrentCurrency(state), - tokenExchangeRates: state.metamask.tokenExchangeRates, + contractExchangeRates: state.metamask.contractExchangeRates, selectedAddressTxList: state.metamask.selectedAddressTxList, } } @@ -74,10 +75,12 @@ TxListItem.prototype.getAddressText = function () { const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { name: txDataName, params = [] } = decodedData || {} const { value } = params[0] || {} + const checksummedAddress = checksumAddress(address) + const checksummedValue = checksumAddress(value) let addressText if (txDataName === 'transfer' || address) { - const addressToRender = txDataName === 'transfer' ? value : address + const addressToRender = txDataName === 'transfer' ? checksummedValue : checksummedAddress addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}` } else if (isMsg) { addressText = this.context.t('sigRequest') @@ -142,31 +145,29 @@ TxListItem.prototype.getTokenInfo = async function () { ({ decimals, symbol } = await tokenInfoGetter(toAddress)) } - return { decimals, symbol } + return { decimals, symbol, address: toAddress } } TxListItem.prototype.getSendTokenTotal = async function () { const { txParams = {}, conversionRate, - tokenExchangeRates, + contractExchangeRates, currentCurrency, } = this.props const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { params = [] } = decodedData || {} const { value } = params[1] || {} - const { decimals, symbol } = await this.getTokenInfo() + const { decimals, symbol, address } = await this.getTokenInfo() const total = calcTokenAmount(value, decimals) - const pair = symbol && `${symbol.toLowerCase()}_eth` - let tokenToFiatRate let totalInFiat - if (tokenExchangeRates[pair]) { + if (contractExchangeRates[address]) { tokenToFiatRate = multiplyCurrencies( - tokenExchangeRates[pair].rate, + contractExchangeRates[address], conversionRate ) @@ -220,7 +221,6 @@ TxListItem.prototype.resubmit = function () { TxListItem.prototype.render = function () { const { transactionStatus, - transactionAmount, onClick, transactionId, dateString, @@ -229,7 +229,6 @@ TxListItem.prototype.render = function () { txParams, } = this.props const { total, fiatTotal, isTokenTx } = this.state - const showFiatTotal = transactionAmount !== '0x0' && fiatTotal return h(`div${className || ''}`, { key: transactionId, @@ -288,7 +287,7 @@ TxListItem.prototype.render = function () { h('span.tx-list-value', total), - showFiatTotal && h('span.tx-list-fiat-value', fiatTotal), + fiatTotal && h('span.tx-list-fiat-value', fiatTotal), ]), ]), diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 740c4a4ab..554febcff 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -11,14 +11,19 @@ const { formatDate } = require('../util') const { showConfTxPage } = require('../actions') const classnames = require('classnames') const { tokenInfoGetter } = require('../token-util') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const { CONFIRM_TRANSACTION_ROUTE } = require('../routes') + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(TxList) TxList.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList) - - function mapStateToProps (state) { return { txsToRender: selectors.transactionsSelector(state), @@ -96,7 +101,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionNetworkId, transactionSubmittedTime, } = props - const { showConfTxPage } = this.props + const { history } = this.props const opts = { key: transactionId || transactionHash, @@ -116,7 +121,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const isUnapproved = transactionStatus === 'unapproved' if (isUnapproved) { - opts.onClick = () => showConfTxPage({ id: transactionId }) + opts.onClick = () => { + this.props.showConfTxPage({ id: transactionId }) + history.push(CONFIRM_TRANSACTION_ROUTE) + } opts.transactionStatus = this.context.t('notStarted') } else if (transactionHash) { opts.onClick = () => this.view(transactionHash, transactionNetworkId) diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index ca24e813f..263f992c0 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -2,22 +2,27 @@ const Component = require('react').Component const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') -const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const actions = require('../actions') const selectors = require('../selectors') +const { SEND_ROUTE } = require('../routes') +const { checksumAddress: toChecksumAddress } = require('../util') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') const Identicon = require('./identicon') +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(TxView) + TxView.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) - - function mapStateToProps (state) { const sidebarOpen = state.appState.sidebarOpen const isMascara = state.appState.isMascara @@ -27,7 +32,7 @@ function mapStateToProps (state) { const network = state.metamask.network const selectedTokenAddress = state.metamask.selectedTokenAddress const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] - const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress) + const checksumAddress = toChecksumAddress(selectedAddress) const identity = identities[selectedAddress] return { @@ -69,7 +74,7 @@ TxView.prototype.renderHeroBalance = function () { } TxView.prototype.renderButtons = function () { - const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props + const {selectedToken, showModal, history } = this.props return !selectedToken ? ( @@ -84,14 +89,14 @@ TxView.prototype.renderButtons = function () { style: { marginLeft: '0.8em', }, - onClick: showSendPage, + onClick: () => history.push(SEND_ROUTE), }, this.context.t('send')), ]) ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ h('button.btn-primary.hero-balance-button', { - onClick: showSendTokenPage, + onClick: () => history.push(SEND_ROUTE), }, this.context.t('send')), ]) ) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index e6b94ad12..9e430f87b 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -2,8 +2,11 @@ const Component = require('react').Component const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const inherits = require('util').inherits const classnames = require('classnames') +const { checksumAddress } = require('../util') const Identicon = require('./identicon') // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns const Tooltip = require('./tooltip-v2.js') @@ -12,14 +15,17 @@ const actions = require('../actions') const BalanceComponent = require('./balance-component') const TokenList = require('./token-list') const selectors = require('../selectors') +const { ADD_TOKEN_ROUTE } = require('../routes') + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(WalletView) WalletView.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) - - function mapStateToProps (state) { return { @@ -97,11 +103,13 @@ WalletView.prototype.render = function () { keyrings, showAccountDetailModal, hideSidebar, - showAddTokenPage, + history, } = this.props // temporary logs + fake extra wallets // console.log('walletview, selectedAccount:', selectedAccount) + const checksummedAddress = checksumAddress(selectedAddress) + const keyring = keyrings.find((kr) => { return kr.accounts.includes(selectedAddress) || kr.accounts.includes(selectedIdentity.address) @@ -130,7 +138,7 @@ WalletView.prototype.render = function () { }, [ h(Identicon, { diameter: 54, - address: selectedAddress, + address: checksummedAddress, }), h('span.account-name', { @@ -153,7 +161,7 @@ WalletView.prototype.render = function () { 'wallet-view__address__pressed': this.state.copyToClipboardPressed, }), onClick: () => { - copyToClipboard(selectedAddress) + copyToClipboard(checksummedAddress) this.setState({ hasCopied: true }) setTimeout(() => this.setState({ hasCopied: false }), 3000) }, @@ -164,7 +172,7 @@ WalletView.prototype.render = function () { this.setState({ copyToClipboardPressed: false }) }, }, [ - `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, + `${checksummedAddress.slice(0, 4)}...${checksummedAddress.slice(-4)}`, h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), ]), ]), @@ -174,10 +182,7 @@ WalletView.prototype.render = function () { h(TokenList), h('button.btn-primary.wallet-view__add-token-button', { - onClick: () => { - showAddTokenPage() - hideSidebar() - }, + onClick: () => history.push(ADD_TOKEN_ROUTE), }, this.context.t('addToken')), ]) } diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 1070436c3..b71538e31 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -2,8 +2,11 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const actions = require('./actions') const txHelper = require('../lib/tx-helper') +const log = require('loglevel') const PendingTx = require('./components/pending-tx') const SignatureRequest = require('./components/signature-request') @@ -11,19 +14,21 @@ const SignatureRequest = require('./components/signature-request') // const PendingPersonalMsg = require('./components/pending-personal-msg') // const PendingTypedMsg = require('./components/pending-typed-msg') const Loading = require('./components/loading') +const { DEFAULT_ROUTE } = require('./routes') -// const contentDivider = h('div', { -// style: { -// marginLeft: '16px', -// marginRight: '16px', -// height:'1px', -// background:'#E7E7E7', -// }, -// }) - -module.exports = connect(mapStateToProps)(ConfirmTxScreen) +module.exports = compose( + withRouter, + connect(mapStateToProps) +)(ConfirmTxScreen) function mapStateToProps (state) { + const { metamask } = state + const { + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + } = metamask + return { identities: state.metamask.identities, accounts: state.metamask.accounts, @@ -40,6 +45,10 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, blockGasLimit: state.metamask.currentBlockGasLimit, computedBalances: state.metamask.computedBalances, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + send: state.metamask.send, selectedAddressTxList: state.metamask.selectedAddressTxList, } } @@ -49,11 +58,35 @@ function ConfirmTxScreen () { Component.call(this) } +ConfirmTxScreen.prototype.getUnapprovedMessagesTotal = function () { + const { + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, + } = this.props + + return unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount +} + +ConfirmTxScreen.prototype.componentDidMount = function () { + const { + unapprovedTxs = {}, + network, + send, + } = this.props + const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) + + if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) { + this.props.history.push(DEFAULT_ROUTE) + } +} + ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) { const { - unapprovedTxs, + unapprovedTxs = {}, network, selectedAddressTxList, + send, } = this.props const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network) @@ -61,8 +94,9 @@ ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) { const prevTx = selectedAddressTxList.find(({ id }) => id === prevTxData.id) || {} const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) - if (prevTx.status === 'dropped' && unconfTxList.length === 0) { - this.goHome({}) + if (unconfTxList.length === 0 && + (prevTx.status === 'dropped' || !send.to && this.getUnapprovedMessagesTotal() === 0)) { + this.props.history.push(DEFAULT_ROUTE) } } @@ -103,7 +137,6 @@ ConfirmTxScreen.prototype.render = function () { */ log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`) - if (unconfTxList.length === 0) return h(Loading) return currentTxView({ // Properties @@ -152,6 +185,7 @@ function currentTxView (opts) { // return h(PendingTypedMsg, opts) // } } + return h(Loading) } @@ -163,6 +197,7 @@ ConfirmTxScreen.prototype.buyEth = function (address, event) { ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { this.stopPropagation(event) this.props.dispatch(actions.updateAndApproveTx(txData)) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { @@ -182,7 +217,7 @@ ConfirmTxScreen.prototype.signMessage = function (msgData, event) { var params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) - this.props.dispatch(actions.signMsg(params)) + return this.props.dispatch(actions.signMsg(params)) } ConfirmTxScreen.prototype.stopPropagation = function (event) { @@ -196,7 +231,7 @@ ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) { var params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) - this.props.dispatch(actions.signPersonalMsg(params)) + return this.props.dispatch(actions.signPersonalMsg(params)) } ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) { @@ -204,25 +239,25 @@ ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) { var params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) - this.props.dispatch(actions.signTypedMsg(params)) + return this.props.dispatch(actions.signTypedMsg(params)) } ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) { log.info('canceling message') this.stopPropagation(event) - this.props.dispatch(actions.cancelMsg(msgData)) + return this.props.dispatch(actions.cancelMsg(msgData)) } ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) { log.info('canceling personal message') this.stopPropagation(event) - this.props.dispatch(actions.cancelPersonalMsg(msgData)) + return this.props.dispatch(actions.cancelPersonalMsg(msgData)) } ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) { log.info('canceling typed message') this.stopPropagation(event) - this.props.dispatch(actions.cancelTypedMsg(msgData)) + return this.props.dispatch(actions.cancelTypedMsg(msgData)) } ConfirmTxScreen.prototype.goHome = function (event) { diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index 445c819ff..c068028f8 100644 --- a/ui/app/css/index.scss +++ b/ui/app/css/index.scss @@ -6,9 +6,15 @@ */ @import './itcss/settings/index.scss'; + @import './itcss/tools/index.scss'; + @import './itcss/generic/index.scss'; + @import './itcss/base/index.scss'; + @import './itcss/objects/index.scss'; + @import './itcss/components/index.scss'; + @import './itcss/trumps/index.scss'; diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 2fdda6f43..01579c27c 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -36,6 +36,7 @@ font-weight: 400; line-height: 21px; margin-left: 8px; + cursor:pointer; } } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index ffd43ecbf..959eb9d15 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -52,6 +52,8 @@ @import './editable-label.scss'; +@import './pages/index.scss'; + @import './new-account.scss'; @import './tooltip.scss'; diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index 15009c1e6..a92fffec5 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -1,13 +1,14 @@ .loading-overlay { - left: 0px; + left: 0; z-index: 50; position: absolute; flex-direction: column; display: flex; justify-content: center; align-items: center; + flex: 1 1 auto; width: 100%; - background: rgba(255, 255, 255, 0.8); + background: rgba(255, 255, 255, .8); @media screen and (max-width: 575px) { margin-top: 56px; @@ -18,4 +19,11 @@ margin-top: 75px; height: calc(100% - 75px); } + + &--full-screen { + position: fixed; + height: 100vh; + width: 100vw; + margin-top: 0; + } } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index c34b5cd06..6c8be0b6d 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -139,7 +139,7 @@ .network-dropdown-title { height: 25px; - width: 75px; + width: 120px; color: $white; font-family: Roboto; font-size: 18px; diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index aa7fed956..293579058 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -35,13 +35,14 @@ font-size: 18px; line-height: 24px; text-align: center; + cursor: pointer; } &__tab:first-of-type { margin-right: 20px; } - &__unselected:hover { + &__tab:hover { color: $black; border-bottom: none; } @@ -49,9 +50,9 @@ &__selected { color: $curious-blue; border-bottom: 3px solid $curious-blue; + cursor: initial; } } - } .new-account-import-disclaimer { diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss new file mode 100644 index 000000000..82446fd7a --- /dev/null +++ b/ui/app/css/itcss/components/pages/index.scss @@ -0,0 +1 @@ +@import './unlock.scss'; diff --git a/ui/app/css/itcss/components/pages/unlock.scss b/ui/app/css/itcss/components/pages/unlock.scss new file mode 100644 index 000000000..5d438377b --- /dev/null +++ b/ui/app/css/itcss/components/pages/unlock.scss @@ -0,0 +1,9 @@ +.unlock-page { + box-shadow: none; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: rgb(247, 247, 247); + width: 100%; +} diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 388aea175..ace46bd8a 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -17,6 +17,12 @@ textarea.twelve-word-phrase { resize: none; } +.initialize-screen { + width: 100%; + z-index: $main-container-z-index; + background: #f7f7f7; +} + .initialize-screen hr { width: 60px; margin: 12px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 89d2be891..362feeec8 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -789,6 +789,7 @@ display: flex; justify-content: center; align-items: center; + padding: 0 3px; cursor: pointer; } diff --git a/ui/app/ducks/send.js b/ui/app/ducks/send.js index aeca9f92f..aef493ea0 100644 --- a/ui/app/ducks/send.js +++ b/ui/app/ducks/send.js @@ -1,19 +1,21 @@ import extend from 'xtend' // Actions -const OPEN_FROM_DROPDOWN = 'metamask/send/OPEN_FROM_DROPDOWN'; -const CLOSE_FROM_DROPDOWN = 'metamask/send/CLOSE_FROM_DROPDOWN'; -const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN'; -const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN'; +const OPEN_FROM_DROPDOWN = 'metamask/send/OPEN_FROM_DROPDOWN' +const CLOSE_FROM_DROPDOWN = 'metamask/send/CLOSE_FROM_DROPDOWN' +const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN' +const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN' +const UPDATE_SEND_ERRORS = 'metamask/send/UPDATE_SEND_ERRORS' // TODO: determine if this approach to initState is consistent with conventional ducks pattern const initState = { fromDropdownOpen: false, toDropdownOpen: false, + errors: {}, } // Reducer -export default function reducer(state = initState, action = {}) { +export default function reducer ({ send: sendState = initState }, action = {}) { switch (action.type) { case OPEN_FROM_DROPDOWN: return extend(sendState, { @@ -31,24 +33,38 @@ export default function reducer(state = initState, action = {}) { return extend(sendState, { toDropdownOpen: false, }) + case UPDATE_SEND_ERRORS: + return extend(sendState, { + errors: { + ...sendState.errors, + ...action.value, + }, + }) default: return sendState } } // Action Creators -export function openFromDropdown() { - return { type: OPEN_FROM_DROPDOWN }; +export function openFromDropdown () { + return { type: OPEN_FROM_DROPDOWN } +} + +export function closeFromDropdown () { + return { type: CLOSE_FROM_DROPDOWN } } -export function closeFromDropdown() { - return { type: CLOSE_FROM_DROPDOWN }; +export function openToDropdown () { + return { type: OPEN_TO_DROPDOWN } } -export function openToDropdown() { - return { type: OPEN_TO_DROPDOWN }; +export function closeToDropdown () { + return { type: CLOSE_TO_DROPDOWN } } -export function closeToDropdown() { - return { type: CLOSE_TO_DROPDOWN }; -}
\ No newline at end of file +export function updateSendErrors (errorObject) { + return { + type: UPDATE_SEND_ERRORS, + value: errorObject, + } +} diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 4ab5f06c0..6cb548bb9 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -1,6 +1,5 @@ -const inherits = require('util').inherits -const EventEmitter = require('events').EventEmitter -const Component = require('react').Component +const { EventEmitter } = require('events') +const { Component } = require('react') const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') @@ -8,205 +7,220 @@ const Mascot = require('../components/mascot') const actions = require('../actions') const Tooltip = require('../components/tooltip') const getCaretCoordinates = require('textarea-caret') -const environmentType = require('../../../app/scripts/lib/environment-type') -const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums - -let isSubmitting = false - -InitializeMenuScreen.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps)(InitializeMenuScreen) - - -inherits(InitializeMenuScreen, Component) -function InitializeMenuScreen () { - Component.call(this) - this.animationEventEmitter = new EventEmitter() -} - -function mapStateToProps (state) { - return { - // state from plugin - currentView: state.appState.currentView, - warning: state.appState.warning, +const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes') +const { getEnvironmentType } = require('../../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums') +const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/controllers/network/enums') + +class InitializeMenuScreen extends Component { + constructor (props) { + super(props) + + this.animationEventEmitter = new EventEmitter() + this.state = { + warning: null, + } } -} - -InitializeMenuScreen.prototype.render = function () { - var state = this.props - - switch (state.currentView.name) { - - default: - return this.renderMenu(state) + componentWillMount () { + const { isInitialized, isUnlocked, history } = this.props + if (isInitialized || isUnlocked) { + history.push(DEFAULT_ROUTE) + } } -} - -// InitializeMenuScreen.prototype.componentDidMount = function(){ -// document.getElementById('password-box').focus() -// } -InitializeMenuScreen.prototype.renderMenu = function (state) { - return ( - - h('.initialize-screen.flex-column.flex-center.flex-grow', [ + componentDidMount () { + document.getElementById('password-box').focus() + } - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), + render () { + const { warning } = this.state - h('h1', { - style: { - fontSize: '1.3em', - textTransform: 'uppercase', - color: '#7F8082', - marginBottom: 10, - }, - }, this.context.t('appName')), + return ( + h('.initialize-screen.flex-column.flex-center', [ + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), - h('div', [ - h('h3', { + h('h1', { style: { - fontSize: '0.8em', + fontSize: '1.3em', + textTransform: 'uppercase', color: '#7F8082', - display: 'inline', + marginBottom: 10, }, - }, this.context.t('encryptNewDen')), + }, this.context.t('appName')), - h(Tooltip, { - title: this.context.t('denExplainer'), - }, [ - h('i.fa.fa-question-circle.pointer', { + h('div', [ + h('h3', { style: { - fontSize: '18px', - position: 'relative', - color: 'rgb(247, 134, 28)', - top: '2px', - marginLeft: '4px', + fontSize: '0.8em', + color: '#7F8082', + display: 'inline', }, - }), + }, this.context.t('encryptNewDen')), + + h(Tooltip, { + title: this.context.t('denExplainer'), + }, [ + h('i.fa.fa-question-circle.pointer', { + style: { + fontSize: '18px', + position: 'relative', + color: 'rgb(247, 134, 28)', + top: '2px', + marginLeft: '4px', + }, + }), + ]), ]), - ]), - - h('span.in-progress-notification', state.warning), - - // password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box', - placeholder: this.context.t('newPassword'), - onInput: this.inputChanged.bind(this), - style: { - width: 260, - marginTop: 12, - }, - }), - - // confirm password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box-confirm', - placeholder: this.context.t('confirmPassword'), - onKeyPress: this.createVaultOnEnter.bind(this), - onInput: this.inputChanged.bind(this), - style: { - width: 260, - marginTop: 16, - }, - }), - - - h('button.primary', { - onClick: this.createNewVaultAndKeychain.bind(this), - style: { - margin: 12, - }, - }, this.context.t('createDen')), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: this.showRestoreVault.bind(this), + + h('span.error.in-progress-notification', warning), + + // password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box', + placeholder: this.context.t('newPassword'), + onInput: this.inputChanged.bind(this), style: { - fontSize: '0.8em', - color: 'rgb(247, 134, 28)', - textDecoration: 'underline', + width: 260, + marginTop: 12, }, - }, this.context.t('importDen')), - ]), + }), + + // confirm password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box-confirm', + placeholder: this.context.t('confirmPassword'), + onKeyPress: this.createVaultOnEnter.bind(this), + onInput: this.inputChanged.bind(this), + style: { + width: 260, + marginTop: 16, + }, + }), - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: this.showOldUI.bind(this), + + h('button.primary', { + onClick: this.createNewVaultAndKeychain.bind(this), style: { - fontSize: '0.8em', - color: '#aeaeae', - textDecoration: 'underline', - marginTop: '32px', + margin: 12, }, - }, 'Use classic interface'), - ]), + }, this.context.t('createDen')), - ]) - ) -} + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: () => this.showRestoreVault(), + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, this.context.t('importDen')), + ]), -InitializeMenuScreen.prototype.createVaultOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewVaultAndKeychain() + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: this.showOldUI.bind(this), + style: { + fontSize: '0.8em', + color: '#aeaeae', + textDecoration: 'underline', + marginTop: '32px', + }, + }, 'Use classic interface'), + ]), + + ]) + ) } -} -InitializeMenuScreen.prototype.componentDidMount = function () { - document.getElementById('password-box').focus() -} + createVaultOnEnter (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewVaultAndKeychain() + } + } + + createNewVaultAndKeychain () { + const { history } = this.props + var passwordBox = document.getElementById('password-box') + var password = passwordBox.value + var passwordConfirmBox = document.getElementById('password-box-confirm') + var passwordConfirm = passwordConfirmBox.value + + this.setState({ warning: null }) + + if (password.length < 8) { + this.setState({ warning: this.context.t('passwordShort') }) + return + } -InitializeMenuScreen.prototype.showRestoreVault = function () { - this.props.dispatch(actions.markPasswordForgotten()) - if (environmentType() === 'popup') { - global.platform.openExtensionInBrowser() + if (password !== passwordConfirm) { + this.setState({ warning: this.context.t('passwordMismatch') }) + return + } + + this.props.createNewVaultAndKeychain(password) + .then(() => history.push(DEFAULT_ROUTE)) } -} -InitializeMenuScreen.prototype.showOldUI = function () { - this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) - .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) -} + inputChanged (event) { + // tell mascot to look at page action + var element = event.target + var boundingRect = element.getBoundingClientRect() + var coordinates = getCaretCoordinates(element, element.selectionEnd) + this.animationEventEmitter.emit('point', { + x: boundingRect.left + coordinates.left - element.scrollLeft, + y: boundingRect.top + coordinates.top - element.scrollTop, + }) + } -InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { - var passwordBox = document.getElementById('password-box') - var password = passwordBox.value - var passwordConfirmBox = document.getElementById('password-box-confirm') - var passwordConfirm = passwordConfirmBox.value + showRestoreVault () { + this.props.markPasswordForgotten() + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { + global.platform.openExtensionInBrowser() + } - if (password.length < 8) { - this.warning = this.context.t('passwordShort') - this.props.dispatch(actions.displayWarning(this.warning)) - return + this.props.history.push(RESTORE_VAULT_ROUTE) } - if (password !== passwordConfirm) { - this.warning = this.context.t('passwordMismatch') - this.props.dispatch(actions.displayWarning(this.warning)) - return + + showOldUI () { + this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) + .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) } +} + +InitializeMenuScreen.propTypes = { + history: PropTypes.object, + isInitialized: PropTypes.bool, + isUnlocked: PropTypes.bool, + createNewVaultAndKeychain: PropTypes.func, + markPasswordForgotten: PropTypes.func, + dispatch: PropTypes.func, +} + +InitializeMenuScreen.contextTypes = { + t: PropTypes.func, +} - if (!isSubmitting) { - isSubmitting = true - this.props.dispatch(actions.createNewVaultAndKeychain(password)) +const mapStateToProps = state => { + const { metamask: { isInitialized, isUnlocked } } = state + + return { + isInitialized, + isUnlocked, } } -InitializeMenuScreen.prototype.inputChanged = function (event) { - // tell mascot to look at page action - var element = event.target - var boundingRect = element.getBoundingClientRect() - var coordinates = getCaretCoordinates(element, element.selectionEnd) - this.animationEventEmitter.emit('point', { - x: boundingRect.left + coordinates.left - element.scrollLeft, - y: boundingRect.top + coordinates.top - element.scrollTop, - }) +const mapDispatchToProps = dispatch => { + return { + createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)), + markPasswordForgotten: () => dispatch(actions.markPasswordForgotten()), + } } + +module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen) diff --git a/ui/app/i18n-provider.js b/ui/app/i18n-provider.js index fe6d62c67..4ef618018 100644 --- a/ui/app/i18n-provider.js +++ b/ui/app/i18n-provider.js @@ -1,6 +1,8 @@ const { Component } = require('react') const connect = require('react-redux').connect const PropTypes = require('prop-types') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const t = require('../i18n-helper').getMessage class I18nProvider extends Component { @@ -32,5 +34,8 @@ const mapStateToProps = state => { } } -module.exports = connect(mapStateToProps)(I18nProvider) +module.exports = compose( + withRouter, + connect(mapStateToProps) +)(I18nProvider) diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js index 02183f096..eb588415f 100644 --- a/ui/app/keychains/hd/recover-seed/confirmation.js +++ b/ui/app/keychains/hd/recover-seed/confirmation.js @@ -4,12 +4,21 @@ const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../../../actions') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const { + DEFAULT_ROUTE, + INITIALIZE_BACKUP_PHRASE_ROUTE, +} = require('../../../routes') RevealSeedConfirmation.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps)(RevealSeedConfirmation) +module.exports = compose( + withRouter, + connect(mapStateToProps) +)(RevealSeedConfirmation) inherits(RevealSeedConfirmation, Component) @@ -109,6 +118,8 @@ RevealSeedConfirmation.prototype.componentDidMount = function () { RevealSeedConfirmation.prototype.goHome = function () { this.props.dispatch(actions.showConfigPage(false)) + this.props.dispatch(actions.confirmSeedWords()) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } // create vault @@ -123,4 +134,5 @@ RevealSeedConfirmation.prototype.checkConfirmation = function (event) { RevealSeedConfirmation.prototype.revealSeedWords = function () { var password = document.getElementById('password-box').value this.props.dispatch(actions.requestRevealSeed(password)) + .then(() => this.props.history.push(INITIALIZE_BACKUP_PHRASE_ROUTE)) } diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index 38ad14adb..913d20505 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -4,6 +4,7 @@ const PersistentForm = require('../../../lib/persistent-form') const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../../actions') +const log = require('loglevel') RestoreVaultScreen.contextTypes = { t: PropTypes.func, diff --git a/ui/app/main-container.js b/ui/app/main-container.js index eed4bd164..c305687ea 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -2,8 +2,9 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const AccountAndTransactionDetails = require('./account-and-transaction-details') -const Settings = require('./settings') -const UnlockScreen = require('./unlock') +const Settings = require('./components/pages/settings') +const UnlockScreen = require('./components/pages/unlock') +const log = require('loglevel') module.exports = MainContainer diff --git a/ui/app/reducers.js b/ui/app/reducers.js index ff766e856..26bf66c3c 100644 --- a/ui/app/reducers.js +++ b/ui/app/reducers.js @@ -8,7 +8,7 @@ const reduceIdentities = require('./reducers/identities') const reduceMetamask = require('./reducers/metamask') const reduceApp = require('./reducers/app') const reduceLocale = require('./reducers/locale') -const reduceSend = require('./ducks/send') +const reduceSend = require('./ducks/send').default window.METAMASK_CACHED_LOG_STATE = null diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 74a0f9299..2b39eb8db 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -1,6 +1,7 @@ const extend = require('xtend') const actions = require('../actions') const txHelper = require('../../lib/tx-helper') +const log = require('loglevel') module.exports = reduceApp diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 6d0a5bb10..5564c8080 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -1,8 +1,9 @@ const extend = require('xtend') const actions = require('../actions') const MetamascaraPlatform = require('../../../app/scripts/platforms/window') -const environmentType = require('../../../app/scripts/lib/environment-type') -const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums +const { getEnvironmentType } = require('../../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums') +const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/controllers/network/enums') module.exports = reduceMetamask @@ -15,7 +16,7 @@ function reduceMetamask (state, action) { isUnlocked: false, isAccountMenuOpen: false, isMascara: window.platform instanceof MetamascaraPlatform, - isPopup: environmentType() === 'popup', + isPopup: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP, rpcTarget: 'https://rawtestrpc.metamask.io/', identities: {}, unapprovedTxs: {}, @@ -24,6 +25,7 @@ function reduceMetamask (state, action) { frequentRpcList: [], addressBook: [], selectedTokenAddress: null, + contractExchangeRates: {}, tokenExchangeRates: {}, tokens: [], send: { @@ -176,15 +178,6 @@ function reduceMetamask (state, action) { conversionDate: action.value.conversionDate, }) - case actions.UPDATE_TOKEN_EXCHANGE_RATE: - const { payload: { pair, marketinfo } } = action - return extend(metamaskState, { - tokenExchangeRates: { - ...metamaskState.tokenExchangeRates, - [pair]: marketinfo, - }, - }) - case actions.UPDATE_TOKENS: return extend(metamaskState, { tokens: action.newTokens, @@ -261,17 +254,6 @@ function reduceMetamask (state, action) { }, }) - case actions.UPDATE_SEND_ERRORS: - return extend(metamaskState, { - send: { - ...metamaskState.send, - errors: { - ...metamaskState.send.errors, - ...action.value, - }, - }, - }) - case actions.UPDATE_MAX_MODE: return extend(metamaskState, { send: { @@ -358,7 +340,7 @@ function reduceMetamask (state, action) { welcomeScreenSeen: true, }) - case action.SET_CURRENT_LOCALE: + case actions.SET_CURRENT_LOCALE: return extend(metamaskState, { currentLocale: action.value, }) diff --git a/ui/app/root.js b/ui/app/root.js index 21d6d1829..09deae1b1 100644 --- a/ui/app/root.js +++ b/ui/app/root.js @@ -1,22 +1,23 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const Provider = require('react-redux').Provider +const { Component } = require('react') +const PropTypes = require('prop-types') +const { Provider } = require('react-redux') const h = require('react-hyperscript') const SelectedApp = require('./select-app') -module.exports = Root - -inherits(Root, Component) -function Root () { Component.call(this) } - -Root.prototype.render = function () { - return ( +class Root extends Component { + render () { + const { store } = this.props - h(Provider, { - store: this.props.store, - }, [ - h(SelectedApp), - ]) + return ( + h(Provider, { store }, [ + h(SelectedApp), + ]) + ) + } +} - ) +Root.propTypes = { + store: PropTypes.object, } + +module.exports = Root diff --git a/ui/app/routes.js b/ui/app/routes.js new file mode 100644 index 000000000..4b3f8f4d8 --- /dev/null +++ b/ui/app/routes.js @@ -0,0 +1,49 @@ +const DEFAULT_ROUTE = '/' +const UNLOCK_ROUTE = '/unlock' +const SETTINGS_ROUTE = '/settings' +const INFO_ROUTE = '/settings/info' +const REVEAL_SEED_ROUTE = '/seed' +const CONFIRM_SEED_ROUTE = '/confirm-seed' +const RESTORE_VAULT_ROUTE = '/restore-vault' +const ADD_TOKEN_ROUTE = '/add-token' +const NEW_ACCOUNT_ROUTE = '/new-account' +const IMPORT_ACCOUNT_ROUTE = '/new-account/import' +const SEND_ROUTE = '/send' +const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' +const SIGNATURE_REQUEST_ROUTE = '/confirm-transaction/signature-request' +const NOTICE_ROUTE = '/notice' +const WELCOME_ROUTE = '/welcome' +const INITIALIZE_ROUTE = '/initialize' +const INITIALIZE_CREATE_PASSWORD_ROUTE = '/initialize/create-password' +const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account' +const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase' +const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/unique-image' +const INITIALIZE_NOTICE_ROUTE = '/initialize/notice' +const INITIALIZE_BACKUP_PHRASE_ROUTE = '/initialize/backup-phrase' +const INITIALIZE_CONFIRM_SEED_ROUTE = '/initialize/confirm-phrase' + +module.exports = { + DEFAULT_ROUTE, + UNLOCK_ROUTE, + SETTINGS_ROUTE, + INFO_ROUTE, + REVEAL_SEED_ROUTE, + CONFIRM_SEED_ROUTE, + RESTORE_VAULT_ROUTE, + ADD_TOKEN_ROUTE, + NEW_ACCOUNT_ROUTE, + IMPORT_ACCOUNT_ROUTE, + SEND_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + NOTICE_ROUTE, + SIGNATURE_REQUEST_ROUTE, + WELCOME_ROUTE, + INITIALIZE_ROUTE, + INITIALIZE_CREATE_PASSWORD_ROUTE, + INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_NOTICE_ROUTE, + INITIALIZE_BACKUP_PHRASE_ROUTE, + INITIALIZE_CONFIRM_SEED_ROUTE, +} diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 101eb1cf6..808f9ba56 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -2,11 +2,12 @@ const inherits = require('util').inherits const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') +const { HashRouter } = require('react-router-dom') const App = require('./app') const OldApp = require('../../old-ui/app/app') const { autoAddToBetaUI } = require('./selectors') const { setFeatureFlag, setNetworkEndpoints } = require('./actions') -const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums +const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/controllers/network/enums') const I18nProvider = require('./i18n-provider') function mapStateToProps (state) { @@ -63,7 +64,12 @@ SelectedApp.prototype.render = function () { // const Selected = betaUI || isMascara || firstTime ? App : OldApp const { betaUI, isMascara } = this.props - const Selected = betaUI || isMascara ? h(I18nProvider, [ h(App) ]) : h(OldApp) - return Selected + return betaUI || isMascara + ? h(HashRouter, { + hashType: 'noslash', + }, [ + h(I18nProvider, [ h(App) ]), + ]) + : h(OldApp) } diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 2bdc39004..a29294b86 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -62,22 +62,15 @@ function getSelectedToken (state) { } function getSelectedTokenExchangeRate (state) { - const tokenExchangeRates = state.metamask.tokenExchangeRates + const contractExchangeRates = state.metamask.contractExchangeRates const selectedToken = getSelectedToken(state) || {} - const { symbol = '' } = selectedToken - - const pair = `${symbol.toLowerCase()}_eth` - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} - - return tokenExchangeRate + const { address } = selectedToken + return contractExchangeRates[address] || 0 } -function getTokenExchangeRate (state, tokenSymbol) { - const pair = `${tokenSymbol.toLowerCase()}_eth` - const tokenExchangeRates = state.metamask.tokenExchangeRates - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} - - return tokenExchangeRate +function getTokenExchangeRate (state, address) { + const contractExchangeRates = state.metamask.contractExchangeRates + return contractExchangeRates[address] || 0 } function conversionRateSelector (state) { @@ -192,4 +185,4 @@ function autoAddToBetaUI (state) { function getCurrentViewContext (state) { const { currentView = {} } = state.appState return currentView.context -}
\ No newline at end of file +} diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 84d8b7e7c..099e5f9c6 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -6,8 +6,9 @@ const connect = require('react-redux').connect const actions = require('./actions') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter -const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums -const environmentType = require('../../app/scripts/lib/environment-type') +const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/controllers/network/enums') +const { getEnvironmentType } = require('../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../app/scripts/lib/enums') const Mascot = require('./components/mascot') @@ -77,7 +78,7 @@ UnlockScreen.prototype.render = function () { h('p.pointer', { onClick: () => { this.props.dispatch(actions.markPasswordForgotten()) - if (environmentType() === 'popup') { + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { global.platform.openExtensionInBrowser() } }, diff --git a/ui/app/util.js b/ui/app/util.js index bbe2bb09e..8e9390dfb 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -57,6 +57,7 @@ module.exports = { isInvalidChecksumAddress, allNull, getTokenAddressFromTokenObject, + checksumAddress, } function valuesFor (obj) { @@ -67,7 +68,7 @@ function valuesFor (obj) { function addressSummary (address, firstSegLength = 10, lastSegLength = 4, includeHex = true) { if (!address) return '' - let checked = ethUtil.toChecksumAddress(address) + let checked = checksumAddress(address) if (!includeHex) { checked = ethUtil.stripHexPrefix(checked) } @@ -76,7 +77,7 @@ function addressSummary (address, firstSegLength = 10, lastSegLength = 4, includ function miniAddressSummary (address) { if (!address) return '' - var checked = ethUtil.toChecksumAddress(address) + var checked = checksumAddress(address) return checked ? checked.slice(0, 4) + '...' + checked.slice(-4) : '...' } @@ -287,3 +288,13 @@ function allNull (obj) { function getTokenAddressFromTokenObject (token) { return Object.values(token)[0].address.toLowerCase() } + +/** + * Safely checksumms a potentially-null address + * + * @param {String} [address] - address to checksum + * @returns {String} - checksummed address + */ +function checksumAddress (address) { + return address ? ethUtil.toChecksumAddress(address) : '' +} diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index cdbb6dba8..2fa244d9f 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -3,21 +3,35 @@ import h from 'react-hyperscript' import { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import {closeWelcomeScreen} from './actions' import Mascot from './components/mascot' +import { INITIALIZE_CREATE_PASSWORD_ROUTE } from './routes' class WelcomeScreen extends Component { static propTypes = { closeWelcomeScreen: PropTypes.func.isRequired, + welcomeScreenSeen: PropTypes.bool, + history: PropTypes.object, } - constructor(props) { + constructor (props) { super(props) this.animationEventEmitter = new EventEmitter() } + componentWillMount () { + const { history, welcomeScreenSeen } = this.props + + if (welcomeScreenSeen) { + history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + } + } + initiateAccountCreation = () => { this.props.closeWelcomeScreen() + this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) } render () { @@ -48,9 +62,18 @@ class WelcomeScreen extends Component { } } -export default connect( - null, - dispatch => ({ - closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), - }) +const mapStateToProps = ({ metamask: { welcomeScreenSeen } }) => { + return { + welcomeScreenSeen, + } +} + +export default compose( + withRouter, + connect( + mapStateToProps, + dispatch => ({ + closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), + }) + ) )(WelcomeScreen) diff --git a/ui/index.js b/ui/index.js index 746e28eab..075faf66d 100644 --- a/ui/index.js +++ b/ui/index.js @@ -5,9 +5,12 @@ const actions = require('./app/actions') const configureStore = require('./app/store') const txHelper = require('./lib/tx-helper') const { fetchLocale } = require('./i18n-helper') -const { OLD_UI_NETWORK_TYPE, BETA_UI_NETWORK_TYPE } = require('../app/scripts/config').enums +const { + OLD_UI_NETWORK_TYPE, + BETA_UI_NETWORK_TYPE, +} = require('../app/scripts/controllers/network/enums') -global.log = require('loglevel') +const log = require('loglevel') module.exports = launchMetamaskUi diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js index 31498a3a9..7fadbceff 100644 --- a/ui/lib/icon-factory.js +++ b/ui/lib/icon-factory.js @@ -1,6 +1,6 @@ var iconFactory const isValidAddress = require('ethereumjs-util').isValidAddress -const toChecksumAddress = require('ethereumjs-util').toChecksumAddress +const { checksumAddress } = require('../app/util') const contractMap = require('eth-contract-metadata') module.exports = function (jazzicon) { @@ -16,7 +16,7 @@ function IconFactory (jazzicon) { } IconFactory.prototype.iconForAddress = function (address, diameter) { - const addr = toChecksumAddress(address) + const addr = checksumAddress(address) if (iconExistsFor(addr)) { return imageElFor(addr) } diff --git a/ui/lib/tx-helper.js b/ui/lib/tx-helper.js index de3f00d2d..0a6f55a63 100644 --- a/ui/lib/tx-helper.js +++ b/ui/lib/tx-helper.js @@ -1,4 +1,5 @@ const valuesFor = require('../app/util').valuesFor +const log = require('loglevel') module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, typedMessages, network) { log.debug('tx-helper called with params:') |