TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into Version-6.6.2

Browse Source
feature/default_network_editable
Thomas Huang 6 years ago committed by GitHub
parent 4f8bfded79 af79692e89
commit 3f8f2a9ae1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 422 additions and 241 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      CHANGELOG.md
  2. 2
      README.md
  3. 6
      app/_locales/en/messages.json
  4. 3
      app/_locales/zh_TW/messages.json
  5. 5
      app/images/icons/3dots.svg
  6. 3
      app/images/icons/caret-down.svg
  7. 7
      app/images/icons/hamburger.svg
  8. 157
      app/images/logo/metamask-fox.svg
  9. 2
      package.json
  10. 16
      test/e2e/beta/metamask-beta-ui.spec.js
  11. 2
      ui/app/components/app/account-menu/index.scss
  12. 2
      ui/app/components/app/app-header/app-header.component.js
  13. 5
      ui/app/components/app/app-header/index.scss
  14. 5
      ui/app/components/app/dropdowns/account-details-dropdown.js
  15. 4
      ui/app/components/app/dropdowns/components/menu.js
  16. 19
      ui/app/components/app/menu-bar/index.scss
  17. 4
      ui/app/components/app/menu-bar/menu-bar.component.js
  18. 12
      ui/app/components/app/network.js
  19. 11
      ui/app/components/app/selected-account/index.scss
  20. 19
      ui/app/components/app/transaction-list-item/index.scss
  21. 2
      ui/app/components/app/transaction-list-item/transaction-list-item.component.js
  22. 7
      ui/app/components/app/transaction-list/index.scss
  23. 5
      ui/app/components/app/transaction-status/index.scss
  24. 14
      ui/app/components/app/transaction-view-balance/index.scss
  25. 1
      ui/app/components/ui/currency-display/index.scss
  26. 4
      ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
  27. 7
      ui/app/css/itcss/components/menu.scss
  28. 20
      ui/app/css/itcss/components/network.scss
  29. 1
      ui/app/css/itcss/components/new-account.scss
  30. 18
      ui/app/css/itcss/settings/variables.scss
  31. 6
      ui/app/pages/create-account/import-account/json.js
  32. 29
      ui/app/pages/mobile-sync/index.js
  33. 10
      ui/app/pages/settings/index.scss
  34. 30
      ui/app/pages/settings/networks-tab/index.scss
  35. 128
      ui/app/pages/settings/networks-tab/network-form/network-form.component.js
  36. 80
      ui/app/pages/settings/networks-tab/networks-tab.component.js
  37. 9
      ui/app/pages/settings/networks-tab/networks-tab.constants.js
  38. 4
      ui/app/pages/settings/networks-tab/networks-tab.container.js
  39. 2
      ui/app/pages/settings/settings.component.js

2
CHANGELOG.md
Unescape View File

@ -1,10 +1,12 @@
# Changelog # Changelog
## Current Develop Branch ## 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 ## 6.6.2 Fri Jun 07 2019
- [#6690](https://github.com/MetaMask/metamask-extension/pull/6690): Update dependencies, re-enable npm audit CI job - [#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 ## 6.6.1 Thu Jun 06 2019

2
README.md
Unescape View File

@ -1,5 +1,5 @@
# MetaMask Browser Extension # MetaMask Browser Extension
[![Build Status](https://circleci.com/gh/MetaMask/metamask-extension.svg?style=shield&circle-token=a1ddcf3cd38e29267f254c9c59d556d513e3a1fd)](https://circleci.com/gh/MetaMask/metamask-extension) [![Coverage Status](https://coveralls.io/repos/github/MetaMask/metamask-extension/badge.svg?branch=master)](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) [![Stories in Ready](https://badge.waffle.io/MetaMask/metamask-extension.png?label=in%20progress&title=waffle.io)](https://waffle.io/MetaMask/metamask-extension) [![Build Status](https://circleci.com/gh/MetaMask/metamask-extension.svg?style=shield&circle-token=a1ddcf3cd38e29267f254c9c59d556d513e3a1fd)](https://circleci.com/gh/MetaMask/metamask-extension) [![Coverage Status](https://coveralls.io/repos/github/MetaMask/metamask-extension/badge.svg?branch=master)](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). 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).

6
app/_locales/en/messages.json
Unescape View File

@ -454,6 +454,9 @@
"defaultNetwork": { "defaultNetwork": {
"message": "The default network for Ether transactions is Main Net." "message": "The default network for Ether transactions is Main Net."
}, },
"delete": {
"message": "Delete"
},
"denExplainer": { "denExplainer": {
"message": "Your DEN is your password-encrypted storage within MetaMask." "message": "Your DEN is your password-encrypted storage within MetaMask."
}, },
@ -1742,6 +1745,9 @@
"viewAccount": { "viewAccount": {
"message": "View Account" "message": "View Account"
}, },
"viewinExplorer": {
"message": "View in Explorer"
},
"viewOnCustomBlockExplorer": { "viewOnCustomBlockExplorer": {
"message": "View at $1" "message": "View at $1"
}, },

3
app/_locales/zh_TW/messages.json
Unescape View File

@ -366,6 +366,9 @@
"defaultNetwork": { "defaultNetwork": {
"message": "預設乙太幣交易網路為主網路" "message": "預設乙太幣交易網路為主網路"
}, },
"delete": {
"message": "刪除"
},
"denExplainer": { "denExplainer": {
"message": "您的 DEN 是 MetaMask 中您的的密碼加密儲存庫。" "message": "您的 DEN 是 MetaMask 中您的的密碼加密儲存庫。"
}, },

5
app/images/icons/3dots.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 629 B

3
app/images/icons/caret-down.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 168 B

7
app/images/icons/hamburger.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 373 B

157
app/images/logo/metamask-fox.svg
Unescape View File

@ -1,128 +1,31 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <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"/>
<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events" <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"/>
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" <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"/>
style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve"> <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"/>
<style type="text/css"> <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"/>
.st0{fill:#161616;stroke:#161616;} <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"/>
.st1{fill:#E4761B;stroke:#E4761B;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"/>
.st2{fill:#763D16;stroke:#763D16;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"/>
.st3{fill:#F6851B;stroke:#F6851B;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"/>
.st4{fill:#E2761B;stroke:#E2761B;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"/>
.st5{fill:#CD6116;stroke:#CD6116;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"/>
.st6{fill:#C0AD9E;stroke:#C0AD9E;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"/>
.st7{fill:#D7C1B3;stroke:#D7C1B3;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"/>
.st8{fill:#E4751F;stroke:#E4751F;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"/>
.st9{fill:#233447;stroke:#233447;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"/>
.st10{fill:#161616;stroke:#161616;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"/>
</style> <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"/>
<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 <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"/>
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 <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"/>
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 "/> <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"/>
<g> <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"/>
<polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 "/> <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"/>
<polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 "/> <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"/>
<polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 "/> <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"/>
<polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 "/> <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"/>
<polygon class="st2" points="43.4,142 41.5,129.9 84,139 "/> <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"/>
<polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 "/> <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"/>
<polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 "/> <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"/>
<polygon class="st2" points="43.4,142 84,139 49.9,159.1 "/> <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"/>
<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> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

2
package.json
Unescape View File

@ -101,7 +101,7 @@
"eth-token-tracker": "^1.1.5", "eth-token-tracker": "^1.1.5",
"eth-trezor-keyring": "^0.4.0", "eth-trezor-keyring": "^0.4.0",
"ethereumjs-abi": "^0.6.4", "ethereumjs-abi": "^0.6.4",
"ethereumjs-tx": "^1.3.7", "ethereumjs-tx": "1.3.7",
"ethereumjs-util": "github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", "ethereumjs-util": "github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9",
"ethereumjs-wallet": "^0.6.0", "ethereumjs-wallet": "^0.6.0",
"etherscan-link": "^1.0.2", "etherscan-link": "^1.0.2",

16
test/e2e/beta/metamask-beta-ui.spec.js
Unescape View File

@ -1478,7 +1478,7 @@ describe('MetaMask', function () {
await customRpcInput.clear() await customRpcInput.clear()
await customRpcInput.sendKeys(customRpcUrl) 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 customRpcSave.click()
await delay(largeDelayMs * 2) await delay(largeDelayMs * 2)
}) })
@ -1504,5 +1504,19 @@ describe('MetaMask', function () {
assert.equal(customRpcs.length, customRpcUrls.length) 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)
})
}) })
}) })

2
ui/app/components/app/account-menu/index.scss
Unescape View File

@ -21,7 +21,7 @@
} }
&__icon { &__icon {
margin-left: 20px; margin-left: 1rem;
cursor: pointer; cursor: pointer;
&--disabled { &--disabled {

2
ui/app/components/app/app-header/app-header.component.js
Unescape View File

@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent {
<img <img
className="app-header__metafox-logo app-header__metafox-logo--icon" className="app-header__metafox-logo app-header__metafox-logo--icon"
src="/images/logo/metamask-fox.svg" src="/images/logo/metamask-fox.svg"
height={42}
width={42}
/> />
</div> </div>
<div className="app-header__account-menu-container"> <div className="app-header__account-menu-container">

5
ui/app/components/app/app-header/index.scss
Unescape View File

@ -1,6 +1,6 @@
.app-header { .app-header {
align-items: center; align-items: center;
background: $gallery; background: $Grey-000;
position: relative; position: relative;
z-index: $header-z-index; z-index: $header-z-index;
display: flex; display: flex;
@ -9,7 +9,7 @@
flex: 0 0 auto; flex: 0 0 auto;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
padding: 12px; padding: 1rem;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
z-index: $mobile-header-z-index; z-index: $mobile-header-z-index;
} }
@ -34,6 +34,7 @@
cursor: pointer; cursor: pointer;
&--icon { &--icon {
height: 32px;
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
display: none; display: none;
} }

5
ui/app/components/app/dropdowns/account-details-dropdown.js
Unescape View File

@ -119,8 +119,11 @@ AccountDetailsDropdown.prototype.render = function () {
this.props.onClose() this.props.onClose()
}, },
text: (rpcPrefs.blockExplorerUrl text: (rpcPrefs.blockExplorerUrl
? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]]) ? this.context.t('viewinExplorer')
: this.context.t('viewOnEtherscan')), : this.context.t('viewOnEtherscan')),
subText: (rpcPrefs.blockExplorerUrl
? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]
: null),
icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }), icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
}), }),
isRemovable ? h(Item, { isRemovable ? h(Item, {

4
ui/app/components/app/dropdowns/components/menu.js
Unescape View File

@ -20,16 +20,18 @@ Item.prototype.render = function () {
icon, icon,
children, children,
text, text,
subText,
className = '', className = '',
onClick, onClick,
} = this.props } = this.props
const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}` const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
const textComponent = text ? h('div.menu__item__text', text) : null const textComponent = text ? h('div.menu__item__text', text) : null
const subTextComponent = subText ? h('div.menu__item__subtext', subText) : null
return children return children
? h('div', { className: itemClassName, onClick }, 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)) .filter(d => Boolean(d))
) )
} }

19
ui/app/components/app/menu-bar/index.scss
Unescape View File

@ -5,19 +5,28 @@
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
margin-bottom: 16px; margin-bottom: 16px;
padding: 5px; padding: 0 22px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $Grey-100;
&__sidebar-button { &__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; cursor: pointer;
padding: 10px;
} }
&__open-in-browser { &__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; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px;
} }
} }

4
ui/app/components/app/menu-bar/menu-bar.component.js
Unescape View File

@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent {
position="bottom" position="bottom"
> >
<div <div
className="fa fa-bars menu-bar__sidebar-button" className="menu-bar__sidebar-button"
onClick={() => { onClick={() => {
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {
@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent {
position="bottom" position="bottom"
> >
<div <div
className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser" className="menu-bar__open-in-browser"
onClick={() => { onClick={() => {
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {

12
ui/app/components/app/network.js
Unescape View File

@ -82,7 +82,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('mainnet')), 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': case 'ropsten-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -92,7 +92,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('ropsten')), 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': case 'kovan-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -102,7 +102,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('kovan')), 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': case 'rinkeby-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -112,7 +112,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('rinkeby')), 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': case 'goerli-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -122,7 +122,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('goerli')), h('.network-name', context.t('goerli')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('.network-indicator__down-arrow'),
]) ])
default: default:
return h('.network-indicator', [ 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('.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'),
]) ])
} }
})(), })(),

11
ui/app/components/app/selected-account/index.scss
Unescape View File

@ -7,15 +7,21 @@
&__name { &__name {
max-width: 200px; max-width: 200px;
font-size: 1rem;
font-weight: 500;
line-height: 19px;
color: $black;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
margin-bottom: 4px;
} }
&__address { &__address {
font-size: .75rem; font-size: .75rem;
color: $silver-chalice; line-height: .75rem;
color: #989a9b;
} }
&__clickable { &__clickable {
@ -23,7 +29,8 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px 15px; margin: 4px 0;
padding: 6px 15px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;

19
ui/app/components/app/transaction-list-item/index.scss
Unescape View File

@ -1,7 +1,7 @@
.transaction-list-item { .transaction-list-item {
box-sizing: border-box; box-sizing: border-box;
min-height: 74px; min-height: 74px;
border-bottom: 1px solid $geyser; border-bottom: 1px solid $Grey-100;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -19,7 +19,7 @@
"identicon nonce status secondary-amount"; "identicon nonce status secondary-amount";
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding: 8px 20px 12px; padding: .5rem 1rem;
grid-template-columns: 45px 5fr 3fr; grid-template-columns: 45px 5fr 3fr;
grid-template-areas: grid-template-areas:
"nonce nonce nonce" "nonce nonce nonce"
@ -44,12 +44,13 @@
&__action { &__action {
text-transform: capitalize; text-transform: capitalize;
padding: 0 8px 2px 0; padding: 0 0 4px 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
grid-area: action; grid-area: action;
align-self: end; color: $Grey-800;
line-height: 20px;
} }
&__status { &__status {
@ -72,7 +73,8 @@
align-self: start; align-self: start;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding-bottom: 4px; padding-bottom: 8px;
line-height: 12px;
} }
} }
@ -88,19 +90,22 @@
grid-area: primary-amount; grid-area: primary-amount;
align-self: end; align-self: end;
justify-self: end; justify-self: end;
line-height: 20px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding-bottom: 2px; padding-bottom: 4px;
height: 100%;
color: $Grey-800;
} }
} }
&--secondary { &--secondary {
text-align: end; text-align: end;
font-size: .75rem; font-size: .75rem;
color: #5e6064;
grid-area: secondary-amount; grid-area: secondary-amount;
align-self: start; align-self: start;
justify-self: end; justify-self: end;
color: $Grey-500;
} }
} }

2
ui/app/components/app/transaction-list-item/transaction-list-item.component.js
Unescape View File

@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent {
<Identicon <Identicon
className="transaction-list-item__identicon" className="transaction-list-item__identicon"
address={toAddress} address={toAddress}
diameter={34} diameter={36}
image={assetImages[toAddress]} image={assetImages[toAddress]}
/> />
<TransactionAction <TransactionAction

7
ui/app/components/app/transaction-list/index.scss
Unescape View File

@ -12,9 +12,10 @@
&__header { &__header {
flex: 0 0 auto; flex: 0 0 auto;
font-size: .875rem; font-size: 14px;
color: $dusty-gray; line-height: 20px;
border-bottom: 1px solid $geyser; color: $Grey-400;
border-bottom: 1px solid $Grey-100;
padding: 8px 0 8px 20px; padding: 8px 0 8px 20px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {

5
ui/app/components/app/transaction-status/index.scss
Unescape View File

@ -12,8 +12,9 @@
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
height: 16px; height: 16px;
width: 72px; min-width: 72px;
font-size: .5rem; font-size: 10px;
padding: 0 12px;
} }
&--confirmed { &--confirmed {

14
ui/app/components/app/transaction-view-balance/index.scss
Unescape View File

@ -33,11 +33,14 @@
&__primary-balance { &__primary-balance {
font-size: 1.5rem; font-size: 1.5rem;
color: $black;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
font-size: 1.75rem; font-size: 32px;
line-height: 45px;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
} }
@ -51,12 +54,15 @@
&__cached-secondary-balance { &__cached-secondary-balance {
color: rgba(220, 153, 18, 0.6901960784313725); color: rgba(220, 153, 18, 0.6901960784313725);
font-size: 1.15rem; font-size: 16px;
line-height: 23px;
} }
&__secondary-balance { &__secondary-balance {
font-size: 1.15rem; font-size: 16px;
color: #a0a0a0; line-height: 23px;
font-weight: 400;
color: $Grey-400;
} }
&__balance-container { &__balance-container {

1
ui/app/components/ui/currency-display/index.scss
Unescape View File

@ -6,6 +6,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&__suffix { &__suffix {

4
ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
Unescape View File

@ -8,6 +8,7 @@ export default class PageContainerFooter extends Component {
children: PropTypes.node, children: PropTypes.node,
onCancel: PropTypes.func, onCancel: PropTypes.func,
cancelText: PropTypes.string, cancelText: PropTypes.string,
cancelButtonType: PropTypes.string,
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
submitText: PropTypes.string, submitText: PropTypes.string,
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -29,6 +30,7 @@ export default class PageContainerFooter extends Component {
disabled, disabled,
submitButtonType, submitButtonType,
hideCancel, hideCancel,
cancelButtonType,
} = this.props } = this.props
return ( return (
@ -36,7 +38,7 @@ export default class PageContainerFooter extends Component {
<header> <header>
{!hideCancel && <Button {!hideCancel && <Button
type="default" type={cancelButtonType || 'default'}
large large
className="page-container__footer-button" className="page-container__footer-button"
onClick={e => onCancel(e)} onClick={e => onCancel(e)}

7
ui/app/css/itcss/components/menu.scss
Unescape View File

@ -8,7 +8,7 @@
&__item { &__item {
padding: 18px; padding: 18px;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row wrap;
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 201; z-index: 201;
@ -39,6 +39,11 @@
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
} }
&__subtext {
font-size: 12px;
padding: 5px 0px 0px 30px;
}
} }
&__divider { &__divider {

20
ui/app/css/itcss/components/network.scss
Unescape View File

@ -8,9 +8,9 @@
} }
.network-component.pointer { .network-component.pointer {
border: 2px solid $silver; border: 2px solid $Grey-200;
border-radius: 82px; border-radius: 82px;
padding: 7px 3px; padding: 6px 3px;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
@ -47,11 +47,15 @@
align-items: center; align-items: center;
font-size: .6em; font-size: .6em;
.fa-caret-down { &__down-arrow {
line-height: 15px; height: 8px;
font-size: 12px; width: 12px;
padding: 0 4px; display: block;
flex: 0 0 auto; background-image: url(/images/icons/caret-down.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin: 0 8px;
} }
.fa-question-circle { .fa-question-circle {
@ -65,12 +69,14 @@
padding: 0 4px; padding: 0 4px;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
line-height: 14px;
flex: 1 1 auto; flex: 1 1 auto;
color: $tundora; color: $tundora;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
height: 16px;
} }
.dropdown-menu-item .fa.delete { .dropdown-menu-item .fa.delete {

1
ui/app/css/itcss/components/new-account.scss
Unescape View File

@ -143,6 +143,7 @@
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
margin-top: 29px; margin-top: 29px;
width: 100%;
} }
&__buttons { &__buttons {

18
ui/app/css/itcss/settings/variables.scss
Unescape View File

@ -99,7 +99,11 @@ $Blue-500: #037DD6;
$Blue-600: #0260a4; $Blue-600: #0260a4;
$Grey-000: #f2f3f4; $Grey-000: #f2f3f4;
$Grey-100: #D6D9DC;
$Grey-200: #bbc0c5;
$Grey-400: #848c96;
$Grey-500: #6A737D; $Grey-500: #6A737D;
$Grey-800: #24272a;
$Red-000: #fcf2f3; $Red-000: #fcf2f3;
$Red-500: #D73A49; $Red-500: #D73A49;
@ -109,3 +113,17 @@ $Orange-000: #fef5ef;
$Orange-500: #F66A0A; $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;

6
ui/app/pages/create-account/import-account/json.js
Unescape View File

@ -8,9 +8,10 @@ const actions = require('../../../store/actions')
const FileInput = require('react-simple-file-input').default const FileInput = require('react-simple-file-input').default
const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes') const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
const { getMetaMaskAccounts } = require('../../../selectors/selectors') const { getMetaMaskAccounts } = require('../../../selectors/selectors')
const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
import Button from '../../../components/ui/button' import Button from '../../../components/ui/button'
const HELP_LINK = 'https://metamask.zendesk.com/hc/en-us/articles/360015489351-Importing-Accounts'
class JsonImportSubview extends Component { class JsonImportSubview extends Component {
constructor (props) { constructor (props) {
super(props) super(props)
@ -37,10 +38,11 @@ class JsonImportSubview extends Component {
readAs: 'text', readAs: 'text',
onLoad: this.onLoad.bind(this), onLoad: this.onLoad.bind(this),
style: { style: {
margin: '20px 0px 12px 34%', padding: '20px 0px 12px 15%',
fontSize: '15px', fontSize: '15px',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%',
}, },
}), }),

29
ui/app/pages/mobile-sync/index.js
Unescape View File

@ -16,6 +16,7 @@ import LoadingScreen from '../../components/ui/loading-screen'
const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN' const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN' const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
const KEYS_GENERATION_TIME = 30000
class MobileSyncPage extends Component { class MobileSyncPage extends Component {
static propTypes = { static propTypes = {
@ -36,6 +37,8 @@ class MobileSyncPage extends Component {
error: null, error: null,
syncing: false, syncing: false,
completed: false, completed: false,
channelName: undefined,
cipherKey: undefined,
} }
this.syncing = false this.syncing = false
@ -53,16 +56,31 @@ class MobileSyncPage extends Component {
this.setState({ seedWords: null, error: null }) this.setState({ seedWords: null, error: null })
this.props.requestRevealSeedWords(this.state.password) this.props.requestRevealSeedWords(this.state.password)
.then(seedWords => { .then(seedWords => {
this.generateCipherKeyAndChannelName() this.startKeysGeneration()
this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }) this.setState({ seedWords, screen: REVEAL_SEED_SCREEN })
this.initWebsockets()
}) })
.catch(error => this.setState({ error: error.message })) .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 () { generateCipherKeyAndChannelName () {
this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}` this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}`
this.channelName = `mm-${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 () { initWebsockets () {
@ -83,6 +101,11 @@ class MobileSyncPage extends Component {
if (message.event === 'start-sync') { if (message.event === 'start-sync') {
this.startSyncing() 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') { } else if (message.event === 'end-sync') {
this.disconnectWebsockets() this.disconnectWebsockets()
this.setState({syncing: false, completed: true}) this.setState({syncing: false, completed: true})
@ -272,7 +295,7 @@ class MobileSyncPage extends Component {
renderRevealSeedContent () { renderRevealSeedContent () {
const qrImage = qrCode(0, 'M') 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() qrImage.make()
const { t } = this.context const { t } = this.context

10
ui/app/pages/settings/index.scss
Unescape View File

@ -28,6 +28,10 @@
font-size: 20px; font-size: 20px;
border-bottom: 1px solid $alto; border-bottom: 1px solid $alto;
margin-right: 24px; margin-right: 24px;
height: 72px;
align-items: center;
display: flex;
flex-flow: row nowrap;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
display: none; display: none;
@ -52,9 +56,7 @@
font-family: Roboto; font-family: Roboto;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 24px; font-size: 20px;
line-height: 24px;
color: black;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
font-size: 16px; font-size: 16px;
@ -123,7 +125,7 @@
&__body { &__body {
padding: 12px 24px; padding: 12px 24px;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
padding: 12px; padding: 12px;
} }

30
ui/app/pages/settings/networks-tab/index.scss
Unescape View File

@ -12,7 +12,7 @@
} }
&__body { &__body {
padding: 12px 24px; padding-right: 24px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -118,12 +118,12 @@
} }
&__add-network-header-button-wrapper { &__add-network-header-button-wrapper {
padding-top: 15px;
padding-bottom: 21px;
justify-content: center; justify-content: center;
.button { .button {
width: 178px; width: 138px;
padding: 10px;
line-height: 20px;
} }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
@ -197,4 +197,24 @@
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
} }
} }
.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;
}
}
}

128
ui/app/pages/settings/networks-tab/network-form/network-form.component.js
Unescape View File

@ -1,10 +1,10 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import validUrl from 'valid-url' import validUrl from 'valid-url'
import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
import TextField from '../../../../components/ui/text-field' 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 = { static contextTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
metricsEvent: PropTypes.func.isRequired, metricsEvent: PropTypes.func.isRequired,
@ -12,6 +12,7 @@ export default class NetworksTab extends PureComponent {
static propTypes = { static propTypes = {
editRpc: PropTypes.func.isRequired, editRpc: PropTypes.func.isRequired,
delRpcTarget: PropTypes.func.isRequired,
rpcUrl: PropTypes.string, rpcUrl: PropTypes.string,
chainId: PropTypes.string, chainId: PropTypes.string,
ticker: PropTypes.string, ticker: PropTypes.string,
@ -20,6 +21,7 @@ export default class NetworksTab extends PureComponent {
onClear: PropTypes.func.isRequired, onClear: PropTypes.func.isRequired,
setRpcTarget: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired,
networksTabIsInAddMode: PropTypes.bool, networksTabIsInAddMode: PropTypes.bool,
isCurrentRpcTarget: PropTypes.bool,
blockExplorerUrl: PropTypes.string, blockExplorerUrl: PropTypes.string,
rpcPrefs: PropTypes.object, 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 () { stateIsUnchanged () {
const { const {
rpcUrl, rpcUrl,
@ -152,16 +219,23 @@ export default class NetworksTab extends PureComponent {
} }
render () { render () {
const { setRpcTarget, viewOnly, rpcUrl: propsRpcUrl, editRpc, rpcPrefs = {} } = this.props const { t } = this.context
const {
viewOnly,
isCurrentRpcTarget,
networksTabIsInAddMode,
} = this.props
const { const {
networkName, networkName,
rpcUrl, rpcUrl,
chainId, chainId = '',
ticker, ticker,
blockExplorerUrl, blockExplorerUrl,
errors, errors,
} = this.state } = this.state
const isSubmitDisabled = viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl
const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
return ( return (
<div className="networks-tab__network-form"> <div className="networks-tab__network-form">
@ -198,26 +272,32 @@ export default class NetworksTab extends PureComponent {
blockExplorerUrl, blockExplorerUrl,
'optionalBlockExplorerUrl', 'optionalBlockExplorerUrl',
)} )}
<PageContainerFooter <div className="network-form__footer">
cancelText={this.context.t('cancel')} {
hideCancel={true} deletable && (
onSubmit={() => { <Button
if (propsRpcUrl && rpcUrl !== propsRpcUrl) { type="danger"
editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, { onClick={this.onDelete}
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, >
...rpcPrefs, { t('delete') }
}) </Button>
} else { )
setRpcTarget(rpcUrl, chainId, ticker, networkName, { }
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, <Button
...rpcPrefs, type="default"
}) onClick={this.onCancel}
} disabled={viewOnly || this.stateIsUnchanged()}
}} >
submitText={this.context.t('save')} { t('cancel') }
submitButtonType={'confirm'} </Button>
disabled={viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl} <Button
/> type="secondary"
disabled={isSubmitDisabled}
onClick={this.onSubmit}
>
{ t('save') }
</Button>
</div>
</div> </div>
) )
} }

80
ui/app/pages/settings/networks-tab/networks-tab.component.js
Unescape View File

@ -25,6 +25,7 @@ export default class NetworksTab extends PureComponent {
setNetworksTabAddMode: PropTypes.func.isRequired, setNetworksTabAddMode: PropTypes.func.isRequired,
setRpcTarget: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired,
setSelectedSettingsRpcUrl: PropTypes.func.isRequired, setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
delRpcTarget: PropTypes.func.isRequired,
providerUrl: PropTypes.string, providerUrl: PropTypes.string,
providerType: PropTypes.string, providerType: PropTypes.string,
networkDefaultedToProvider: PropTypes.bool, 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> <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span>
<div className="networks-tab__add-network-header-button-wrapper"> <div className="networks-tab__add-network-header-button-wrapper">
<Button <Button
type="primary" type="secondary"
onClick={event => { onClick={event => {
event.preventDefault() event.preventDefault()
setSelectedSettingsRpcUrl(null) setSelectedSettingsRpcUrl(null)
@ -125,19 +126,41 @@ export default class NetworksTab extends PureComponent {
renderNetworksList () { renderNetworksList () {
const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props
console.log(networksToRender)
return ( return (
<div className={classnames('networks-tab__networks-list', { <div
'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode, className={classnames('networks-tab__networks-list', {
})}> 'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
})}
>
{ networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) } { 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> </div>
) )
} }
renderNetworksTabContent () { renderNetworksTabContent () {
const { t } = this.context
const { const {
setRpcTarget, setRpcTarget,
delRpcTarget,
setSelectedSettingsRpcUrl, setSelectedSettingsRpcUrl,
setNetworksTabAddMode, setNetworksTabAddMode,
selectedNetwork: { selectedNetwork: {
@ -153,30 +176,39 @@ export default class NetworksTab extends PureComponent {
networksTabIsInAddMode, networksTabIsInAddMode,
editRpc, editRpc,
networkDefaultedToProvider, networkDefaultedToProvider,
providerUrl,
} = this.props } = this.props
const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
return ( return (
<div className="networks-tab__content"> <div className="networks-tab__content">
{this.renderNetworksList()} { this.renderNetworksList() }
{networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider) {
? <NetworkForm shouldRenderNetworkForm
setRpcTarget={setRpcTarget} ? (
editRpc={editRpc} <NetworkForm
networkName={label || labelKey && this.context.t(labelKey) || ''} setRpcTarget={setRpcTarget}
rpcUrl={rpcUrl} editRpc={editRpc}
chainId={chainId} networkName={label || labelKey && t(labelKey) || ''}
ticker={ticker} rpcUrl={rpcUrl}
onClear={() => { chainId={chainId}
setNetworksTabAddMode(false) ticker={ticker}
setSelectedSettingsRpcUrl(null) onClear={() => {
}} setNetworksTabAddMode(false)
viewOnly={viewOnly} setSelectedSettingsRpcUrl(null)
networksTabIsInAddMode={networksTabIsInAddMode} }}
rpcPrefs={rpcPrefs} delRpcTarget={delRpcTarget}
blockExplorerUrl={blockExplorerUrl} viewOnly={viewOnly}
/> isCurrentRpcTarget={providerUrl === rpcUrl}
: null networksTabIsInAddMode={networksTabIsInAddMode}
rpcPrefs={rpcPrefs}
blockExplorerUrl={blockExplorerUrl}
cancelText={t('cancel')}
/>
)
: null
} }
</div> </div>
) )

9
ui/app/pages/settings/networks-tab/networks-tab.constants.js
Unescape View File

@ -35,6 +35,15 @@ const defaultNetworksData = [
ticker: 'ETH', ticker: 'ETH',
blockExplorerUrl: 'https://rinkeby.etherscan.io', 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', labelKey: 'localhost',
iconColor: 'white', iconColor: 'white',

4
ui/app/pages/settings/networks-tab/networks-tab.container.js
Unescape View File

@ -8,6 +8,7 @@ import {
displayWarning, displayWarning,
setNetworksTabAddMode, setNetworksTabAddMode,
editRpc, editRpc,
delRpcTarget,
} from '../../../store/actions' } from '../../../store/actions'
import { defaultNetworksData } from './networks-tab.constants' import { defaultNetworksData } from './networks-tab.constants'
const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true })) const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true }))
@ -63,6 +64,9 @@ const mapDispatchToProps = dispatch => {
setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => { setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => {
dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs)) dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs))
}, },
delRpcTarget: (target) => {
dispatch(delRpcTarget(target))
},
displayWarning: warning => dispatch(displayWarning(warning)), displayWarning: warning => dispatch(displayWarning(warning)),
setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)), setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)),
editRpc: (oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs) => { editRpc: (oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs) => {

2
ui/app/pages/settings/settings.component.js
Unescape View File

@ -89,7 +89,7 @@ class SettingsPage extends PureComponent {
const { t } = this.context const { t } = this.context
const { location: { pathname } } = this.props const { location: { pathname } } = this.props
return ( return pathname !== NETWORKS_ROUTE && (
<div className="settings-page__subheader"> <div className="settings-page__subheader">
{t(ROUTES_TO_I18N_KEYS[pathname] || 'general')} {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
</div> </div>

Write Preview
Loading…
Cancel
Save