diff options
39 files changed, 422 insertions, 241 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 03f988d57..0f4377e14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,12 @@ # Changelog ## Current Develop Branch +- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link ## 6.6.2 Fri Jun 07 2019 - [#6690](https://github.com/MetaMask/metamask-extension/pull/6690): Update dependencies, re-enable npm audit CI job +- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link ## 6.6.1 Thu Jun 06 2019 @@ -1,5 +1,5 @@ # MetaMask Browser Extension -[](https://circleci.com/gh/MetaMask/metamask-extension) [](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) [](https://waffle.io/MetaMask/metamask-extension) +[](https://circleci.com/gh/MetaMask/metamask-extension) [](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) You can find the latest version of MetaMask on [our official website](https://metamask.io/). For help using MetaMask, visit our [User Support Site](https://metamask.zendesk.com/hc/en-us). diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 41ba7ef7a..774ae4c85 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -454,6 +454,9 @@ "defaultNetwork": { "message": "The default network for Ether transactions is Main Net." }, + "delete": { + "message": "Delete" + }, "denExplainer": { "message": "Your DEN is your password-encrypted storage within MetaMask." }, @@ -1742,6 +1745,9 @@ "viewAccount": { "message": "View Account" }, + "viewinExplorer": { + "message": "View in Explorer" + }, "viewOnCustomBlockExplorer": { "message": "View at $1" }, diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index c645f2af1..4df95f72f 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -366,6 +366,9 @@ "defaultNetwork": { "message": "預設乙太幣交易網路為主網路" }, + "delete": { + "message": "刪除" + }, "denExplainer": { "message": "您的 DEN 是 MetaMask 中您的的密碼加密儲存庫。" }, diff --git a/app/images/icons/3dots.svg b/app/images/icons/3dots.svg new file mode 100644 index 000000000..07bbad137 --- /dev/null +++ b/app/images/icons/3dots.svg @@ -0,0 +1,5 @@ +<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 0 2 0C0.89543 0 0 0.89543 0 2C0 3.10457 0.89543 4 2 4Z" fill="#6A737D"/> + <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4C11.1046 4 12 3.10457 12 2C12 0.89543 11.1046 0 10 0C8.89543 0 8 0.89543 8 2C8 3.10457 8.89543 4 10 4Z" fill="#6A737D"/> + <path fill-rule="evenodd" clip-rule="evenodd" d="M18 4C19.1046 4 20 3.10457 20 2C20 0.89543 19.1046 0 18 0C16.8954 0 16 0.89543 16 2C16 3.10457 16.8954 4 18 4Z" fill="#6A737D"/> +</svg> diff --git a/app/images/icons/caret-down.svg b/app/images/icons/caret-down.svg new file mode 100644 index 000000000..06790bf92 --- /dev/null +++ b/app/images/icons/caret-down.svg @@ -0,0 +1,3 @@ +<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M1 1L5.57143 5.57143L10.1407 1.0022" stroke="#545556"/> +</svg> diff --git a/app/images/icons/hamburger.svg b/app/images/icons/hamburger.svg new file mode 100644 index 000000000..7a6da3089 --- /dev/null +++ b/app/images/icons/hamburger.svg @@ -0,0 +1,7 @@ +<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="hamburger"> + <rect id="Rectangle 3" width="20" height="3" rx="1.5" fill="#6A737D"/> + <rect id="Rectangle 3_2" y="6" width="20" height="3" rx="1.5" fill="#6A737D"/> + <rect id="Rectangle 3_3" y="12" width="20" height="3" rx="1.5" fill="#6A737D"/> + </g> +</svg> diff --git a/app/images/logo/metamask-fox.svg b/app/images/logo/metamask-fox.svg index f3c24f79e..60a827b02 100644 --- a/app/images/logo/metamask-fox.svg +++ b/app/images/logo/metamask-fox.svg @@ -1,128 +1,31 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events" - xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6" - style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve"> -<style type="text/css"> - .st0{fill:#161616;stroke:#161616;} - .st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;} - .st2{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;} - .st3{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;} - .st4{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;} - .st5{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;} - .st6{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;} - .st7{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;} - .st8{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;} - .st9{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;} - .st10{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;} -</style> -<polygon class="st0" points="277.3,145.6 272.3,142 280.3,134.7 274.2,129.9 282.2,123.8 276.9,119.8 285.3,79 272.7,41.1 - 191.6,71.4 124.1,71.4 43,41.1 30.4,79 38.9,119.8 33.5,123.8 41.5,129.9 35.4,134.7 43.4,142 38.4,145.6 49.9,159.1 32.5,213.3 - 48.6,268.6 105.3,253 116.3,262 138.7,277.5 177,277.5 199.4,262 210.4,253 267.1,268.6 283.3,213.3 265.8,159.1 "/> -<g> - <polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 "/> - <polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 "/> - <polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 "/> - <polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 "/> - <polygon class="st2" points="43.4,142 41.5,129.9 84,139 "/> - <polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 "/> - <polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 "/> - <polygon class="st2" points="43.4,142 84,139 49.9,159.1 "/> - <polygon class="st2" points="231.8,139 276.9,119.8 274.2,129.9 "/> - <polygon class="st2" points="84,139 41.5,129.9 38.9,119.8 "/> - <polygon class="st3" points="124.1,71.4 191.6,71.4 176.5,112.5 "/> - <polygon class="st3" points="176.5,112.5 139.2,112.5 124.1,71.4 "/> - <polygon class="st2" points="276.9,119.8 231.8,139 231,87.4 "/> - <polygon class="st2" points="102.2,143.8 84,139 84.7,87.4 "/> - <polygon class="st2" points="84.7,87.4 84,139 38.9,119.8 "/> - <polygon class="st2" points="231,87.4 231.8,139 213.5,143.8 "/> - <polygon class="st1" points="139.2,112.5 43,41.1 124.1,71.4 "/> - <polygon class="st4" points="272.7,41.1 176.5,112.5 191.6,71.4 "/> - <polygon class="st1" points="210.4,253 236.9,213.3 283.3,213.3 "/> - <polygon class="st1" points="32.5,213.3 78.9,213.3 105.3,253 "/> - <polygon class="st3" points="229.3,167.7 283.3,213.3 236.9,213.3 "/> - <polygon class="st3" points="86.4,167.7 32.5,213.3 49.9,159.1 "/> - <polygon class="st3" points="78.9,213.3 32.5,213.3 86.4,167.7 "/> - <polygon class="st3" points="229.3,167.7 265.8,159.1 283.3,213.3 "/> - <polygon class="st2" points="84.7,87.4 139.2,112.5 102.2,143.8 "/> - <polygon class="st2" points="213.5,143.8 176.5,112.5 231,87.4 "/> - <polygon class="st2" points="265.8,159.1 272.3,142 277.3,145.6 "/> - <polygon class="st2" points="49.9,159.1 38.4,145.6 43.4,142 "/> - <polygon class="st2" points="272.3,142 274.2,129.9 280.3,134.7 "/> - <polygon class="st2" points="43.4,142 35.4,134.7 41.5,129.9 "/> - <polygon class="st2" points="33.5,123.8 38.9,119.8 41.5,129.9 "/> - <polygon class="st2" points="282.2,123.8 274.2,129.9 276.9,119.8 "/> - <polygon class="st3" points="49.9,159.1 102.2,143.8 86.4,167.7 "/> - <polygon class="st3" points="265.8,159.1 229.3,167.7 213.5,143.8 "/> - <polygon class="st2" points="38.9,119.8 30.4,79 84.7,87.4 "/> - <polygon class="st2" points="231,87.4 285.3,79 276.9,119.8 "/> - <polygon class="st1" points="102.2,143.8 139.2,112.5 142.6,170.2 "/> - <polygon class="st1" points="213.5,143.8 229.3,167.7 173.1,170.2 "/> - <polygon class="st1" points="173.1,170.2 176.5,112.5 213.5,143.8 "/> - <polygon class="st1" points="142.6,170.2 86.4,167.7 102.2,143.8 "/> - <polygon class="st2" points="272.7,41.1 285.3,79 231,87.4 "/> - <polygon class="st2" points="43,41.1 139.2,112.5 84.7,87.4 "/> - <polygon class="st2" points="231,87.4 176.5,112.5 272.7,41.1 "/> - <polygon class="st2" points="84.7,87.4 30.4,79 43,41.1 "/> - <polygon class="st5" points="105.3,253 78.9,213.3 110,213.7 "/> - <polygon class="st5" points="210.4,253 205.7,213.7 236.9,213.3 "/> - <polygon class="st3" points="173.1,170.2 142.6,170.2 139.2,112.5 "/> - <polygon class="st3" points="139.2,112.5 176.5,112.5 173.1,170.2 "/> - <polygon class="st6" points="116.3,262 105.3,253 136.8,267.9 "/> - <polygon class="st6" points="178.9,267.9 210.4,253 199.4,262 "/> - <polygon class="st7" points="136.6,258.6 136.8,267.9 105.3,253 "/> - <polygon class="st7" points="179.2,258.6 210.4,253 178.9,267.9 "/> - <polygon class="st3" points="86.4,167.7 110,213.7 78.9,213.3 "/> - <polygon class="st3" points="236.9,213.3 205.7,213.7 229.3,167.7 "/> - <polygon class="st8" points="86.4,167.7 109.2,190.8 110,213.7 "/> - <polygon class="st8" points="229.3,167.7 205.7,213.7 206.6,190.8 "/> - <polygon class="st7" points="105.3,253 139.2,236.5 136.6,258.6 "/> - <polygon class="st7" points="210.4,253 179.2,258.6 176.5,236.5 "/> - <polygon class="st1" points="139.2,236.5 105.3,253 110,213.7 "/> - <polygon class="st1" points="176.5,236.5 205.7,213.7 210.4,253 "/> - <polygon class="st5" points="173.1,170.2 229.3,167.7 206.6,190.8 "/> - <polygon class="st5" points="109.2,190.8 86.4,167.7 142.6,170.2 "/> - <polygon class="st5" points="142.6,170.2 129.1,181.7 109.2,190.8 "/> - <polygon class="st5" points="206.6,190.8 186.6,181.7 173.1,170.2 "/> - <polygon class="st3" points="205.7,213.7 178.3,199.1 206.6,190.8 "/> - <polygon class="st3" points="110,213.7 109.2,190.8 137.4,199.1 "/> - <polygon class="st9" points="137.4,199.1 109.2,190.8 129.1,181.7 "/> - <polygon class="st9" points="178.3,199.1 186.6,181.7 206.6,190.8 "/> - <polygon class="st5" points="186.6,181.7 178.3,199.1 173.1,170.2 "/> - <polygon class="st5" points="129.1,181.7 142.6,170.2 137.4,199.1 "/> - <polygon class="st6" points="199.4,262 177,277.5 178.9,267.9 "/> - <polygon class="st6" points="136.8,267.9 138.7,277.5 116.3,262 "/> - <polygon class="st4" points="178.3,199.1 171.8,188.4 173.1,170.2 "/> - <polygon class="st8" points="137.4,199.1 142.6,170.2 143.9,188.4 "/> - <polygon class="st3" points="173.1,170.2 171.8,188.4 143.9,188.4 "/> - <polygon class="st3" points="143.9,188.4 142.6,170.2 173.1,170.2 "/> - <polygon class="st3" points="178.3,199.1 205.7,213.7 176.5,236.5 "/> - <polygon class="st3" points="139.2,236.5 110,213.7 137.4,199.1 "/> - <polygon class="st3" points="137.4,199.1 144,233.2 139.2,236.5 "/> - <polygon class="st3" points="176.5,236.5 171.7,233.2 178.3,199.1 "/> - <polygon class="st8" points="171.8,188.4 178.3,199.1 171.7,233.2 "/> - <polygon class="st8" points="143.9,188.4 144,233.2 137.4,199.1 "/> - <polygon class="st3" points="143.9,188.4 171.8,188.4 171.7,233.2 "/> - <polygon class="st3" points="171.7,233.2 144,233.2 143.9,188.4 "/> - <polygon class="st6" points="179.2,258.6 178.9,267.9 177,277.5 "/> - <polygon class="st6" points="138.7,277.5 136.8,267.9 136.6,258.6 "/> - <polygon class="st6" points="136.6,258.6 139,256.4 138.7,277.5 "/> - <polygon class="st6" points="177,277.5 176.7,256.4 179.2,258.6 "/> - <polygon class="st6" points="138.7,277.5 139,256.4 176.7,256.4 "/> - <polygon class="st6" points="176.7,256.4 177,277.5 138.7,277.5 "/> - <polygon class="st10" points="176.5,236.5 179.2,258.6 176.7,256.4 "/> - <polygon class="st10" points="139,256.4 136.6,258.6 139.2,236.5 "/> - <polygon class="st10" points="139.2,236.5 140.7,241.2 139,256.4 "/> - <polygon class="st10" points="176.7,256.4 175,241.2 176.5,236.5 "/> - <polygon class="st10" points="143.7,237.7 140.7,241.2 139.2,236.5 "/> - <polygon class="st10" points="176.5,236.5 175,241.2 172,237.7 "/> - <polygon class="st10" points="172,237.7 171.7,233.2 176.5,236.5 "/> - <polygon class="st10" points="139.2,236.5 144,233.2 143.7,237.7 "/> - <polygon class="st10" points="171.7,233.2 172,237.7 143.7,237.7 "/> - <polygon class="st10" points="143.7,237.7 144,233.2 171.7,233.2 "/> - <polygon class="st10" points="140.7,241.2 175,241.2 176.7,256.4 "/> - <polygon class="st10" points="176.7,256.4 139,256.4 140.7,241.2 "/> - <polygon class="st10" points="140.7,241.2 143.7,237.7 172,237.7 "/> - <polygon class="st10" points="172,237.7 175,241.2 140.7,241.2 "/> -</g> +<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M32.9582 1L19.8241 10.7183L22.2665 4.99099L32.9582 1Z" fill="#E17726" stroke="#E17726" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M2.66296 1L15.6801 10.809L13.3547 4.99098L2.66296 1Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M28.2295 23.5335L24.7348 28.8721L32.2177 30.9324L34.3613 23.6501L28.2295 23.5335Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M1.27281 23.6501L3.40336 30.9324L10.8733 28.8721L7.39164 23.5335L1.27281 23.6501Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M10.4706 14.5149L8.392 17.6507L15.797 17.9876L15.5501 10.0186L10.4706 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M25.1505 14.5149L19.993 9.92786L19.8242 17.9876L27.2291 17.6507L25.1505 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M10.8733 28.8721L15.3552 26.7082L11.4969 23.702L10.8733 28.8721Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M20.2659 26.7082L24.7348 28.8721L24.1243 23.702L20.2659 26.7082Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M24.7348 28.8721L20.2658 26.7082L20.6296 29.6107L20.5906 30.8417L24.7348 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M10.8732 28.8721L15.0304 30.8417L15.0044 29.6107L15.3552 26.7082L10.8732 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M15.1084 21.7842L11.3929 20.6958L14.0172 19.4907L15.1084 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L20.5126 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M10.8733 28.8721L11.5228 23.5335L7.39163 23.6502L10.8733 28.8721Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M24.0982 23.5335L24.7348 28.8721L28.2294 23.6502L24.0982 23.5335Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M27.2291 17.6507L19.8241 17.9876L20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L27.2291 17.6507Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M11.3929 20.6958L14.0171 19.4907L15.1084 21.7842L15.7969 17.9876L8.39195 17.6507L11.3929 20.6958Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M8.392 17.6507L11.4969 23.702L11.393 20.6958L8.392 17.6507Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M24.2412 20.6958L24.1243 23.702L27.2292 17.6507L24.2412 20.6958Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M15.797 17.9876L15.1084 21.7843L15.9788 26.2676L16.1737 20.3589L15.797 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M19.8242 17.9876L19.4604 20.346L19.6423 26.2676L20.5127 21.7843L19.8242 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M20.5127 21.7842L19.6423 26.2676L20.2659 26.7082L24.1243 23.702L24.2412 20.6958L20.5127 21.7842Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M11.3929 20.6958L11.4969 23.702L15.3552 26.7082L15.9788 26.2676L15.1084 21.7842L11.3929 20.6958Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M20.5906 30.8417L20.6296 29.6107L20.2918 29.3256H15.3292L15.0044 29.6107L15.0304 30.8417L10.8732 28.8721L12.3283 30.0642L15.2772 32.0986H20.3308L23.2928 30.0642L24.7348 28.8721L20.5906 30.8417Z" fill="#C0AC9D" stroke="#C0AC9D" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M20.2659 26.7082L19.6423 26.2676H15.9788L15.3552 26.7082L15.0044 29.6107L15.3292 29.3256H20.2918L20.6296 29.6107L20.2659 26.7082Z" fill="#161616" stroke="#161616" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M33.5168 11.3532L34.6211 5.98873L32.9582 1L20.2659 10.3944L25.1505 14.5149L32.0488 16.5234L33.5688 14.7482L32.9062 14.2687L33.9585 13.3099L33.1531 12.6879L34.2054 11.8845L33.5168 11.3532Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M1 5.98873L2.11724 11.3532L1.40273 11.8845L2.468 12.6879L1.66255 13.3099L2.71483 14.2687L2.05228 14.7482L3.57225 16.5234L10.4706 14.5149L15.3552 10.3944L2.66287 1L1 5.98873Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M32.0489 16.5234L25.1506 14.5149L27.2292 17.6507L24.1243 23.702L28.2295 23.6501H34.3613L32.0489 16.5234Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M10.4705 14.5149L3.57222 16.5234L1.27278 23.6501H7.39161L11.4968 23.702L8.39193 17.6507L10.4705 14.5149Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M19.8241 17.9876L20.2658 10.3944L22.2665 4.991H13.3546L15.3552 10.3944L15.7969 17.9876L15.9658 20.3718L15.9788 26.2676H19.6423L19.6553 20.3718L19.8241 17.9876Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/> </svg> diff --git a/package.json b/package.json index bccc23ef9..8d700c897 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "eth-token-tracker": "^1.1.5", "eth-trezor-keyring": "^0.4.0", "ethereumjs-abi": "^0.6.4", - "ethereumjs-tx": "^1.3.7", + "ethereumjs-tx": "1.3.7", "ethereumjs-util": "github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", "ethereumjs-wallet": "^0.6.0", "etherscan-link": "^1.0.2", diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index 06778ab99..15087c57f 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -1478,7 +1478,7 @@ describe('MetaMask', function () { await customRpcInput.clear() await customRpcInput.sendKeys(customRpcUrl) - const customRpcSave = await findElement(driver, By.css('.page-container__footer-button')) + const customRpcSave = await findElement(driver, By.css('.network-form__footer .btn-secondary')) await customRpcSave.click() await delay(largeDelayMs * 2) }) @@ -1504,5 +1504,19 @@ describe('MetaMask', function () { assert.equal(customRpcs.length, customRpcUrls.length) }) + + it('deletes a custom RPC', async () => { + const networkListItems = await findElements(driver, By.css('.networks-tab__networks-list-name')) + const lastNetworkListItem = networkListItems[networkListItems.length - 1] + await lastNetworkListItem.click() + await delay(100) + + const deleteButton = await findElement(driver, By.css('.btn-danger')) + await deleteButton.click() + await delay(regularDelayMs) + const newNetworkListItems = await findElements(driver, By.css('.networks-tab__networks-list-name')) + + assert.equal(networkListItems.length - 1, newNetworkListItems.length) + }) }) }) diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss index 9a61bf887..435dd6b2a 100644 --- a/ui/app/components/app/account-menu/index.scss +++ b/ui/app/components/app/account-menu/index.scss @@ -21,7 +21,7 @@ } &__icon { - margin-left: 20px; + margin-left: 1rem; cursor: pointer; &--disabled { diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js index 343e0daab..171a3499f 100644 --- a/ui/app/components/app/app-header/app-header.component.js +++ b/ui/app/components/app/app-header/app-header.component.js @@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent { <img className="app-header__metafox-logo app-header__metafox-logo--icon" src="/images/logo/metamask-fox.svg" - height={42} - width={42} /> </div> <div className="app-header__account-menu-container"> diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss index d46b16f25..d3f37b7a2 100644 --- a/ui/app/components/app/app-header/index.scss +++ b/ui/app/components/app/app-header/index.scss @@ -1,6 +1,6 @@ .app-header { align-items: center; - background: $gallery; + background: $Grey-000; position: relative; z-index: $header-z-index; display: flex; @@ -9,7 +9,7 @@ flex: 0 0 auto; @media screen and (max-width: 575px) { - padding: 12px; + padding: 1rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } @@ -34,6 +34,7 @@ cursor: pointer; &--icon { + height: 32px; @media screen and (min-width: $break-large) { display: none; } diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js index cbeccdd81..a4c33620a 100644 --- a/ui/app/components/app/dropdowns/account-details-dropdown.js +++ b/ui/app/components/app/dropdowns/account-details-dropdown.js @@ -119,8 +119,11 @@ AccountDetailsDropdown.prototype.render = function () { this.props.onClose() }, text: (rpcPrefs.blockExplorerUrl - ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]]) + ? this.context.t('viewinExplorer') : this.context.t('viewOnEtherscan')), + subText: (rpcPrefs.blockExplorerUrl + ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1] + : null), icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }), }), isRemovable ? h(Item, { diff --git a/ui/app/components/app/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js index f6d8a139e..63501eaa9 100644 --- a/ui/app/components/app/dropdowns/components/menu.js +++ b/ui/app/components/app/dropdowns/components/menu.js @@ -20,16 +20,18 @@ Item.prototype.render = function () { icon, children, text, + subText, className = '', onClick, } = this.props const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}` const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null const textComponent = text ? h('div.menu__item__text', text) : null + const subTextComponent = subText ? h('div.menu__item__subtext', subText) : null return children ? h('div', { className: itemClassName, onClick }, children) - : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ] + : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent, subTextComponent ] .filter(d => Boolean(d)) ) } diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss index f699f4090..eaa50619c 100644 --- a/ui/app/components/app/menu-bar/index.scss +++ b/ui/app/components/app/menu-bar/index.scss @@ -5,19 +5,28 @@ align-items: center; flex: 0 0 auto; margin-bottom: 16px; - padding: 5px; - border-bottom: 1px solid #e5e5e5; + padding: 0 22px; + border-bottom: 1px solid $Grey-100; &__sidebar-button { - font-size: 1.25rem; + width: 20px; + height: 20px; + background-image: url(/images/icons/hamburger.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; cursor: pointer; - padding: 10px; } &__open-in-browser { + width: 20px; + height: 20px; + background-image: url(/images/icons/3dots.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; cursor: pointer; display: flex; justify-content: center; - padding: 10px; } } diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js index e37fddda4..c830d8a19 100644 --- a/ui/app/components/app/menu-bar/menu-bar.component.js +++ b/ui/app/components/app/menu-bar/menu-bar.component.js @@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent { position="bottom" > <div - className="fa fa-bars menu-bar__sidebar-button" + className="menu-bar__sidebar-button" onClick={() => { this.context.metricsEvent({ eventOpts: { @@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent { position="bottom" > <div - className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser" + className="menu-bar__open-in-browser" onClick={() => { this.context.metricsEvent({ eventOpts: { diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js index 9ee0a1e17..e778700cd 100644 --- a/ui/app/components/app/network.js +++ b/ui/app/components/app/network.js @@ -82,7 +82,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('mainnet')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'ropsten-test-network': return h('.network-indicator', [ @@ -92,7 +92,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('ropsten')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'kovan-test-network': return h('.network-indicator', [ @@ -102,7 +102,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('kovan')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'rinkeby-test-network': return h('.network-indicator', [ @@ -112,7 +112,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('rinkeby')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'goerli-test-network': return h('.network-indicator', [ @@ -122,7 +122,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('goerli')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) default: return h('.network-indicator', [ @@ -142,7 +142,7 @@ Network.prototype.render = function () { }), h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) } })(), diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss index 5339a228b..fa3079d77 100644 --- a/ui/app/components/app/selected-account/index.scss +++ b/ui/app/components/app/selected-account/index.scss @@ -7,15 +7,21 @@ &__name { max-width: 200px; + font-size: 1rem; + font-weight: 500; + line-height: 19px; + color: $black; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; + margin-bottom: 4px; } &__address { font-size: .75rem; - color: $silver-chalice; + line-height: .75rem; + color: #989a9b; } &__clickable { @@ -23,7 +29,8 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 5px 15px; + margin: 4px 0; + padding: 6px 15px; border-radius: 10px; cursor: pointer; diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss index 9e73a546c..4dba4b2c3 100644 --- a/ui/app/components/app/transaction-list-item/index.scss +++ b/ui/app/components/app/transaction-list-item/index.scss @@ -1,7 +1,7 @@ .transaction-list-item { box-sizing: border-box; min-height: 74px; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid $Grey-100; display: flex; justify-content: center; align-items: center; @@ -19,7 +19,7 @@ "identicon nonce status secondary-amount"; @media screen and (max-width: $break-small) { - padding: 8px 20px 12px; + padding: .5rem 1rem; grid-template-columns: 45px 5fr 3fr; grid-template-areas: "nonce nonce nonce" @@ -44,12 +44,13 @@ &__action { text-transform: capitalize; - padding: 0 8px 2px 0; + padding: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-area: action; - align-self: end; + color: $Grey-800; + line-height: 20px; } &__status { @@ -72,7 +73,8 @@ align-self: start; @media screen and (max-width: $break-small) { - padding-bottom: 4px; + padding-bottom: 8px; + line-height: 12px; } } @@ -88,19 +90,22 @@ grid-area: primary-amount; align-self: end; justify-self: end; + line-height: 20px; @media screen and (max-width: $break-small) { - padding-bottom: 2px; + padding-bottom: 4px; + height: 100%; + color: $Grey-800; } } &--secondary { text-align: end; font-size: .75rem; - color: #5e6064; grid-area: secondary-amount; align-self: start; justify-self: end; + color: $Grey-500; } } diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js index 0d4127b4f..80b26469b 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js @@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent { <Identicon className="transaction-list-item__identicon" address={toAddress} - diameter={34} + diameter={36} image={assetImages[toAddress]} /> <TransactionAction diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss index a486f4112..42eddd31e 100644 --- a/ui/app/components/app/transaction-list/index.scss +++ b/ui/app/components/app/transaction-list/index.scss @@ -12,9 +12,10 @@ &__header { flex: 0 0 auto; - font-size: .875rem; - color: $dusty-gray; - border-bottom: 1px solid $geyser; + font-size: 14px; + line-height: 20px; + color: $Grey-400; + border-bottom: 1px solid $Grey-100; padding: 8px 0 8px 20px; @media screen and (max-width: $break-small) { diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss index e7daafeef..024cbf2a1 100644 --- a/ui/app/components/app/transaction-status/index.scss +++ b/ui/app/components/app/transaction-status/index.scss @@ -12,8 +12,9 @@ @media screen and (max-width: $break-small) { height: 16px; - width: 72px; - font-size: .5rem; + min-width: 72px; + font-size: 10px; + padding: 0 12px; } &--confirmed { diff --git a/ui/app/components/app/transaction-view-balance/index.scss b/ui/app/components/app/transaction-view-balance/index.scss index bdcd536b0..cdb09db8a 100644 --- a/ui/app/components/app/transaction-view-balance/index.scss +++ b/ui/app/components/app/transaction-view-balance/index.scss @@ -33,11 +33,14 @@ &__primary-balance { font-size: 1.5rem; + color: $black; @media screen and (max-width: $break-small) { - font-size: 1.75rem; + font-size: 32px; + line-height: 45px; width: 100%; justify-content: center; + } } @@ -51,12 +54,15 @@ &__cached-secondary-balance { color: rgba(220, 153, 18, 0.6901960784313725); - font-size: 1.15rem; + font-size: 16px; + line-height: 23px; } &__secondary-balance { - font-size: 1.15rem; - color: #a0a0a0; + font-size: 16px; + line-height: 23px; + font-weight: 400; + color: $Grey-400; } &__balance-container { diff --git a/ui/app/components/ui/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss index 313c932b8..6d069eb05 100644 --- a/ui/app/components/ui/currency-display/index.scss +++ b/ui/app/components/ui/currency-display/index.scss @@ -6,6 +6,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } &__suffix { diff --git a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js index 4ef203521..a2cf0100b 100644 --- a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js +++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js @@ -8,6 +8,7 @@ export default class PageContainerFooter extends Component { children: PropTypes.node, onCancel: PropTypes.func, cancelText: PropTypes.string, + cancelButtonType: PropTypes.string, onSubmit: PropTypes.func, submitText: PropTypes.string, disabled: PropTypes.bool, @@ -29,6 +30,7 @@ export default class PageContainerFooter extends Component { disabled, submitButtonType, hideCancel, + cancelButtonType, } = this.props return ( @@ -36,7 +38,7 @@ export default class PageContainerFooter extends Component { <header> {!hideCancel && <Button - type="default" + type={cancelButtonType || 'default'} large className="page-container__footer-button" onClick={e => onCancel(e)} diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 6409ad545..7d71ea799 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -8,7 +8,7 @@ &__item { padding: 18px; display: flex; - flex-flow: row nowrap; + flex-flow: row wrap; align-items: center; position: relative; z-index: 201; @@ -39,6 +39,11 @@ font-size: 16px; line-height: 21px; } + + &__subtext { + font-size: 12px; + padding: 5px 0px 0px 30px; + } } &__divider { diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index da90b7910..4275ffe92 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -8,9 +8,9 @@ } .network-component.pointer { - border: 2px solid $silver; + border: 2px solid $Grey-200; border-radius: 82px; - padding: 7px 3px; + padding: 6px 3px; flex: 0 0 auto; display: flex; @@ -47,11 +47,15 @@ align-items: center; font-size: .6em; - .fa-caret-down { - line-height: 15px; - font-size: 12px; - padding: 0 4px; - flex: 0 0 auto; + &__down-arrow { + height: 8px; + width: 12px; + display: block; + background-image: url(/images/icons/caret-down.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + margin: 0 8px; } .fa-question-circle { @@ -65,12 +69,14 @@ padding: 0 4px; font-family: Roboto; font-size: 12px; + line-height: 14px; flex: 1 1 auto; color: $tundora; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + height: 16px; } .dropdown-menu-item .fa.delete { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 7bfa2d443..b3aae8eec 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -143,6 +143,7 @@ flex-flow: column; align-items: center; margin-top: 29px; + width: 100%; } &__buttons { diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index f7003b1f4..c02be0d98 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -99,7 +99,11 @@ $Blue-500: #037DD6; $Blue-600: #0260a4; $Grey-000: #f2f3f4; +$Grey-100: #D6D9DC; +$Grey-200: #bbc0c5; +$Grey-400: #848c96; $Grey-500: #6A737D; +$Grey-800: #24272a; $Red-000: #fcf2f3; $Red-500: #D73A49; @@ -109,3 +113,17 @@ $Orange-000: #fef5ef; $Orange-500: #F66A0A; +/* + Spacing Variables +*/ +$no-spacing: 0px; +$xxs-spacing: 4px; +$xs-spacing: 8px; +$s-spacing: 16px; +$base-spacing: 24px; +$medium-spacing: 32px; +$large-spacing: 40px; +$xlarge-spacing: 48px; +$xxlarge-spacing: 64px; + + diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js index ad430ba58..2482e49d1 100644 --- a/ui/app/pages/create-account/import-account/json.js +++ b/ui/app/pages/create-account/import-account/json.js @@ -8,9 +8,10 @@ const actions = require('../../../store/actions') const FileInput = require('react-simple-file-input').default const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes') const { getMetaMaskAccounts } = require('../../../selectors/selectors') -const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' import Button from '../../../components/ui/button' +const HELP_LINK = 'https://metamask.zendesk.com/hc/en-us/articles/360015489351-Importing-Accounts' + class JsonImportSubview extends Component { constructor (props) { super(props) @@ -37,10 +38,11 @@ class JsonImportSubview extends Component { readAs: 'text', onLoad: this.onLoad.bind(this), style: { - margin: '20px 0px 12px 34%', + padding: '20px 0px 12px 15%', fontSize: '15px', display: 'flex', justifyContent: 'center', + width: '100%', }, }), diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js index 00a514534..a8de4fce9 100644 --- a/ui/app/pages/mobile-sync/index.js +++ b/ui/app/pages/mobile-sync/index.js @@ -16,6 +16,7 @@ import LoadingScreen from '../../components/ui/loading-screen' const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN' const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN' +const KEYS_GENERATION_TIME = 30000 class MobileSyncPage extends Component { static propTypes = { @@ -36,6 +37,8 @@ class MobileSyncPage extends Component { error: null, syncing: false, completed: false, + channelName: undefined, + cipherKey: undefined, } this.syncing = false @@ -53,16 +56,31 @@ class MobileSyncPage extends Component { this.setState({ seedWords: null, error: null }) this.props.requestRevealSeedWords(this.state.password) .then(seedWords => { - this.generateCipherKeyAndChannelName() + this.startKeysGeneration() this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }) - this.initWebsockets() }) .catch(error => this.setState({ error: error.message })) } + startKeysGeneration () { + this.handle && clearTimeout(this.handle) + this.disconnectWebsockets() + this.generateCipherKeyAndChannelName() + this.initWebsockets() + this.handle = setTimeout(() => { + this.startKeysGeneration() + }, KEYS_GENERATION_TIME) + } + generateCipherKeyAndChannelName () { this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}` this.channelName = `mm-${PubNub.generateUUID()}` + this.setState({cipherKey: this.cipherKey, channelName: this.channelName}) + } + + initWithCipherKeyAndChannelName (cipherKey, channelName) { + this.cipherKey = cipherKey + this.channelName = channelName } initWebsockets () { @@ -83,6 +101,11 @@ class MobileSyncPage extends Component { if (message.event === 'start-sync') { this.startSyncing() + } else if (message.event === 'connection-info') { + this.handle && clearTimeout(this.handle) + this.disconnectWebsockets() + this.initWithCipherKeyAndChannelName(message.cipher, message.channel) + this.initWebsockets() } else if (message.event === 'end-sync') { this.disconnectWebsockets() this.setState({syncing: false, completed: true}) @@ -272,7 +295,7 @@ class MobileSyncPage extends Component { renderRevealSeedContent () { const qrImage = qrCode(0, 'M') - qrImage.addData(`metamask-sync:${this.channelName}|@|${this.cipherKey}`) + qrImage.addData(`metamask-sync:${this.state.channelName}|@|${this.state.cipherKey}`) qrImage.make() const { t } = this.context diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index 66959ba93..c516a84bb 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -28,6 +28,10 @@ font-size: 20px; border-bottom: 1px solid $alto; margin-right: 24px; + height: 72px; + align-items: center; + display: flex; + flex-flow: row nowrap; @media screen and (max-width: 575px) { display: none; @@ -52,9 +56,7 @@ font-family: Roboto; font-style: normal; font-weight: normal; - font-size: 24px; - line-height: 24px; - color: black; + font-size: 20px; @media screen and (max-width: 575px) { font-size: 16px; @@ -123,7 +125,7 @@ &__body { padding: 12px 24px; - + @media screen and (min-width: 576px) { padding: 12px; } diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss index b0020437d..bf83c7a14 100644 --- a/ui/app/pages/settings/networks-tab/index.scss +++ b/ui/app/pages/settings/networks-tab/index.scss @@ -12,7 +12,7 @@ } &__body { - padding: 12px 24px; + padding-right: 24px; height: 100%; display: flex; flex-direction: column; @@ -118,12 +118,12 @@ } &__add-network-header-button-wrapper { - padding-top: 15px; - padding-bottom: 21px; justify-content: center; .button { - width: 178px; + width: 138px; + padding: 10px; + line-height: 20px; } @media screen and (max-width: 575px) { @@ -197,4 +197,24 @@ font-weight: bold; color: #000000; } -}
\ No newline at end of file +} + +.network-form { + &__footer { + display: flex; + flex-flow: row nowrap; + margin: .75rem 0; + + .btn-default { + margin-right: .375rem; + } + + .btn-secondary { + margin-left: .375rem; + } + + .btn-danger { + margin-right: 3.75rem; + } + } +} diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js index 5e455b65e..388e2665f 100644 --- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js +++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import validUrl from 'valid-url' -import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' import TextField from '../../../../components/ui/text-field' +import Button from '../../../../components/ui/button' -export default class NetworksTab extends PureComponent { +export default class NetworkForm extends PureComponent { static contextTypes = { t: PropTypes.func.isRequired, metricsEvent: PropTypes.func.isRequired, @@ -12,6 +12,7 @@ export default class NetworksTab extends PureComponent { static propTypes = { editRpc: PropTypes.func.isRequired, + delRpcTarget: PropTypes.func.isRequired, rpcUrl: PropTypes.string, chainId: PropTypes.string, ticker: PropTypes.string, @@ -20,6 +21,7 @@ export default class NetworksTab extends PureComponent { onClear: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, networksTabIsInAddMode: PropTypes.bool, + isCurrentRpcTarget: PropTypes.bool, blockExplorerUrl: PropTypes.string, rpcPrefs: PropTypes.object, } @@ -70,6 +72,71 @@ export default class NetworksTab extends PureComponent { }) } + resetForm () { + const { + rpcUrl, + chainId, + ticker, + networkName, + blockExplorerUrl, + } = this.props + + this.setState({ rpcUrl, chainId, ticker, networkName, blockExplorerUrl, errors: {} }) + } + + onSubmit = () => { + const { + setRpcTarget, + rpcUrl: propsRpcUrl, + editRpc, + rpcPrefs = {}, + onClear, + networksTabIsInAddMode, + } = this.props + const { + networkName, + rpcUrl, + chainId, + ticker, + blockExplorerUrl, + } = this.state + if (propsRpcUrl && rpcUrl !== propsRpcUrl) { + editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, { + blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, + ...rpcPrefs, + }) + } else { + setRpcTarget(rpcUrl, chainId, ticker, networkName, { + blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, + ...rpcPrefs, + }) + } + + if (networksTabIsInAddMode) { + onClear() + } + } + + onCancel = () => { + const { + networksTabIsInAddMode, + onClear, + } = this.props + + if (networksTabIsInAddMode) { + onClear() + } else { + this.resetForm() + } + } + + onDelete = () => { + const { delRpcTarget, rpcUrl, onClear } = this.props + delRpcTarget(rpcUrl) + this.resetForm() + onClear() + } + stateIsUnchanged () { const { rpcUrl, @@ -152,16 +219,23 @@ export default class NetworksTab extends PureComponent { } render () { - const { setRpcTarget, viewOnly, rpcUrl: propsRpcUrl, editRpc, rpcPrefs = {} } = this.props + const { t } = this.context + const { + viewOnly, + isCurrentRpcTarget, + networksTabIsInAddMode, + } = this.props const { networkName, rpcUrl, - chainId, + chainId = '', ticker, blockExplorerUrl, errors, } = this.state + const isSubmitDisabled = viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl + const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly return ( <div className="networks-tab__network-form"> @@ -198,26 +272,32 @@ export default class NetworksTab extends PureComponent { blockExplorerUrl, 'optionalBlockExplorerUrl', )} - <PageContainerFooter - cancelText={this.context.t('cancel')} - hideCancel={true} - onSubmit={() => { - if (propsRpcUrl && rpcUrl !== propsRpcUrl) { - editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, { - blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, - ...rpcPrefs, - }) - } else { - setRpcTarget(rpcUrl, chainId, ticker, networkName, { - blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, - ...rpcPrefs, - }) - } - }} - submitText={this.context.t('save')} - submitButtonType={'confirm'} - disabled={viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl} - /> + <div className="network-form__footer"> + { + deletable && ( + <Button + type="danger" + onClick={this.onDelete} + > + { t('delete') } + </Button> + ) + } + <Button + type="default" + onClick={this.onCancel} + disabled={viewOnly || this.stateIsUnchanged()} + > + { t('cancel') } + </Button> + <Button + type="secondary" + disabled={isSubmitDisabled} + onClick={this.onSubmit} + > + { t('save') } + </Button> + </div> </div> ) } diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js index 2f921a892..f6c8443cf 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.component.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js @@ -25,6 +25,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, setSelectedSettingsRpcUrl: PropTypes.func.isRequired, + delRpcTarget: PropTypes.func.isRequired, providerUrl: PropTypes.string, providerType: PropTypes.string, networkDefaultedToProvider: PropTypes.bool, @@ -62,7 +63,7 @@ export default class NetworksTab extends PureComponent { <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span> <div className="networks-tab__add-network-header-button-wrapper"> <Button - type="primary" + type="secondary" onClick={event => { event.preventDefault() setSelectedSettingsRpcUrl(null) @@ -125,19 +126,41 @@ export default class NetworksTab extends PureComponent { renderNetworksList () { const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props - + console.log(networksToRender) return ( - <div className={classnames('networks-tab__networks-list', { - 'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode, - })}> + <div + className={classnames('networks-tab__networks-list', { + 'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode, + })} + > { networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) } + { + networksTabIsInAddMode && ( + <div + className="networks-tab__networks-list-item" + > + <NetworkDropdownIcon + backgroundColor="white" + innerBorder="1px solid rgb(106, 115, 125)" + /> + <div + className="networks-tab__networks-list-name networks-tab__networks-list-name--selected" + > + { this.context.t('newNetwork') } + </div> + <div className="networks-tab__networks-list-arrow" /> + </div> + ) + } </div> ) } renderNetworksTabContent () { + const { t } = this.context const { setRpcTarget, + delRpcTarget, setSelectedSettingsRpcUrl, setNetworksTabAddMode, selectedNetwork: { @@ -153,30 +176,39 @@ export default class NetworksTab extends PureComponent { networksTabIsInAddMode, editRpc, networkDefaultedToProvider, + providerUrl, } = this.props + const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP + const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider) return ( <div className="networks-tab__content"> - {this.renderNetworksList()} - {networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider) - ? <NetworkForm - setRpcTarget={setRpcTarget} - editRpc={editRpc} - networkName={label || labelKey && this.context.t(labelKey) || ''} - rpcUrl={rpcUrl} - chainId={chainId} - ticker={ticker} - onClear={() => { - setNetworksTabAddMode(false) - setSelectedSettingsRpcUrl(null) - }} - viewOnly={viewOnly} - networksTabIsInAddMode={networksTabIsInAddMode} - rpcPrefs={rpcPrefs} - blockExplorerUrl={blockExplorerUrl} - /> - : null + { this.renderNetworksList() } + { + shouldRenderNetworkForm + ? ( + <NetworkForm + setRpcTarget={setRpcTarget} + editRpc={editRpc} + networkName={label || labelKey && t(labelKey) || ''} + rpcUrl={rpcUrl} + chainId={chainId} + ticker={ticker} + onClear={() => { + setNetworksTabAddMode(false) + setSelectedSettingsRpcUrl(null) + }} + delRpcTarget={delRpcTarget} + viewOnly={viewOnly} + isCurrentRpcTarget={providerUrl === rpcUrl} + networksTabIsInAddMode={networksTabIsInAddMode} + rpcPrefs={rpcPrefs} + blockExplorerUrl={blockExplorerUrl} + cancelText={t('cancel')} + /> + ) + : null } </div> ) diff --git a/ui/app/pages/settings/networks-tab/networks-tab.constants.js b/ui/app/pages/settings/networks-tab/networks-tab.constants.js index d3d1a01cc..1a49ca04f 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.constants.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.constants.js @@ -36,6 +36,15 @@ const defaultNetworksData = [ blockExplorerUrl: 'https://rinkeby.etherscan.io', }, { + labelKey: 'goerli', + iconColor: '#3099f2', + providerType: 'goerli', + rpcUrl: 'https://api.infura.io/v1/jsonrpc/goerli', + chainId: '5', + ticker: 'ETH', + blockExplorerUrl: 'https://goerli.etherscan.io', + }, + { labelKey: 'localhost', iconColor: 'white', border: '1px solid #6A737D', diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js index a5d71f714..9e1098922 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.container.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js @@ -8,6 +8,7 @@ import { displayWarning, setNetworksTabAddMode, editRpc, + delRpcTarget, } from '../../../store/actions' import { defaultNetworksData } from './networks-tab.constants' const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true })) @@ -63,6 +64,9 @@ const mapDispatchToProps = dispatch => { setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => { dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs)) }, + delRpcTarget: (target) => { + dispatch(delRpcTarget(target)) + }, displayWarning: warning => dispatch(displayWarning(warning)), setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)), editRpc: (oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs) => { diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js index a2f137264..7f2045244 100644 --- a/ui/app/pages/settings/settings.component.js +++ b/ui/app/pages/settings/settings.component.js @@ -89,7 +89,7 @@ class SettingsPage extends PureComponent { const { t } = this.context const { location: { pathname } } = this.props - return ( + return pathname !== NETWORKS_ROUTE && ( <div className="settings-page__subheader"> {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')} </div> |
