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

design done

Browse Source
feature/default_network_editable
brunobar79 6 years ago
parent cbb14f1d5e
commit 49d1bdea8a
7 changed files with 385 additions and 48 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. 44
      app/_locales/en/messages.json
  2. 44
      app/images/hardware-wallet-step-1.svg
  3. 81
      app/images/hardware-wallet-step-2.svg
  4. 42
      app/images/hardware-wallet-step-3.svg
  5. 2
      ui/app/components/account-menu/index.js
  6. 99
      ui/app/components/pages/create-account/connect-hardware/connect-screen.js
  7. 111
      ui/app/css/itcss/components/new-account.scss

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

@ -134,7 +134,7 @@
"confirmTransaction": { "confirmTransaction": {
"message": "Confirm Transaction" "message": "Confirm Transaction"
}, },
"connectHardware": { "connectHardwareWallet": {
"message": "Connect Hardware Wallet" "message": "Connect Hardware Wallet"
}, },
"connect": { "connect": {
@ -286,6 +286,9 @@
"downloadStateLogs": { "downloadStateLogs": {
"message": "Download State Logs" "message": "Download State Logs"
}, },
"dontHaveATrezorWallet": {
"message": "Don't have a TREZOR hardware wallet?"
},
"dropped": { "dropped": {
"message": "Dropped" "message": "Dropped"
}, },
@ -407,8 +410,8 @@
"message": "Get Ether from a faucet for the $1", "message": "Get Ether from a faucet for the $1",
"description": "Displays network name for Ether faucet" "description": "Displays network name for Ether faucet"
}, },
"getYourTrezor": { "getHelp": {
"message": "Don't have a TREZOR hardware wallet? Order yours now!" "message": "Get Help."
}, },
"greaterThanMin": { "greaterThanMin": {
"message": "must be greater than or equal to $1.", "message": "must be greater than or equal to $1.",
@ -417,6 +420,15 @@
"hardware": { "hardware": {
"message": "hardware" "message": "hardware"
}, },
"hardwareSupport": {
"message": "Hardware Support"
},
"hardwareSupportMsg": {
"message": "You can now view your Hardware accounts in MetaMask! Scroll down and read how it works."
},
"havingTroubleConnecting": {
"message": "Having trouble connecting?"
},
"here": { "here": {
"message": "here", "message": "here",
"description": "as in -click here- for more information (goes with troubleTokenBalances)" "description": "as in -click here- for more information (goes with troubleTokenBalances)"
@ -515,7 +527,7 @@
"message": "Max" "message": "Max"
}, },
"learnMore": { "learnMore": {
"message": "Learn more." "message": "Learn more"
}, },
"lessThanMax": { "lessThanMax": {
"message": "must be less than or equal to $1.", "message": "must be less than or equal to $1.",
@ -778,6 +790,9 @@
"removeAccountDescription": { "removeAccountDescription": {
"message": "This account will be removed from your wallet. Please make sure you have the original seed phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. " "message": "This account will be removed from your wallet. Please make sure you have the original seed phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. "
}, },
"readyToConnect": {
"message": "Ready to Connect?"
},
"rinkeby": { "rinkeby": {
"message": "Rinkeby Test Network" "message": "Rinkeby Test Network"
}, },
@ -874,6 +889,9 @@
"message": "Only send $1 to an Ethereum account address.", "message": "Only send $1 to an Ethereum account address.",
"description": "displays token symbol" "description": "displays token symbol"
}, },
"orderOneHere": {
"message": "Order one here."
},
"searchTokens": { "searchTokens": {
"message": "Search Tokens" "message": "Search Tokens"
}, },
@ -892,6 +910,24 @@
"settings": { "settings": {
"message": "Settings" "message": "Settings"
}, },
"step1HardwareWallet": {
"message": "1. Connect Hardware Wallet"
},
"step1HardwareWalletMsg": {
"message": "Connect your hardware wallet directly to your computer."
},
"step2HardwareWallet": {
"message": "2. Select an Account"
},
"step2HardwareWalletMsg": {
"message": "Select the account you want to view. You can only choose one at a time."
},
"step3HardwareWallet": {
"message": "3. Start using dApps and more!"
},
"step3HardwareWalletMsg": {
"message": "Use your hardware account like you would with any Ethereum account. Log in to dApps, send Eth, buy and store ERC20 tokens and Non-Fungible tokens like CryptoKitties."
},
"info": { "info": {
"message": "Info" "message": "Info"
}, },

44
app/images/hardware-wallet-step-1.svg
Unescape View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="213px" height="78px" viewBox="0 0 213 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>2981A924-C7CB-4957-87AD-8C680802DAD7</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Import-account" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hardware-connect" transform="translate(-406.000000, -602.000000)">
<g id="Group-9" transform="translate(356.000000, 522.000000)">
<g id="connect-hardware" transform="translate(51.000000, 81.000000)">
<path d="M4,9 L70,9 L70,17 L4,17 C1.790861,17 2.705415e-16,15.209139 0,13 L0,13 C-2.705415e-16,10.790861 1.790861,9 4,9 Z" id="Rectangle" fill="#D9F0FF"></path>
<g id="Group-4-Copy">
<g id="Group-2" transform="translate(91.000000, 31.000000)" stroke="#3098DC">
<polyline id="Stroke-10" points="7.33333333 0 13.4253333 5.29042105 7.33333333 10.5802632"></polyline>
<path d="M0,5.21052632 L13.5,5.21052632" id="Stroke-11"></path>
</g>
<g id="Group-3" transform="translate(109.000000, 0.000000)">
<path d="M92.535988,75.1897419 L9.16167665,75.1897419 C7.13816766,75.1897419 5.49700599,73.5434839 5.49700599,71.5123226 L5.49700599,3.67741935 C5.49700599,1.64625806 7.13816766,0 9.16167665,0 L92.535988,0 C94.5601078,0 96.2006587,1.64625806 96.2006587,3.67741935 L96.2006587,71.5123226 C96.2006587,73.5434839 94.5601078,75.1897419 92.535988,75.1897419" id="Fill-12" fill="#FEFEFE"></path>
<path d="M92.535988,75.1897419 L9.16167665,75.1897419 C7.13816766,75.1897419 5.49700599,73.5434839 5.49700599,71.5123226 L5.49700599,3.67741935 C5.49700599,1.64625806 7.13816766,0 9.16167665,0 L92.535988,0 C94.5601078,0 96.2006587,1.64625806 96.2006587,3.67741935 L96.2006587,71.5123226 C96.2006587,73.5434839 94.5601078,75.1897419 92.535988,75.1897419 Z" id="Stroke-13" stroke="#3098DC"></path>
<path d="M100.70576,75.6298065 L1.22155689,75.6298065 C0.546646707,75.6298065 0,75.0812581 0,74.404 L0,69.8709677 C0,69.1937097 0.546646707,68.6451613 1.22155689,68.6451613 L100.70576,68.6451613 C101.38006,68.6451613 101.927317,69.1937097 101.927317,69.8709677 L101.927317,74.404 C101.927317,75.0812581 101.38006,75.6298065 100.70576,75.6298065" id="Fill-14" fill="#D9F0FF"></path>
<path d="M100.70576,75.6298065 L1.22155689,75.6298065 C0.546646707,75.6298065 0,75.0812581 0,74.404 L0,69.8709677 C0,69.1937097 0.546646707,68.6451613 1.22155689,68.6451613 L100.70576,68.6451613 C101.38006,68.6451613 101.927317,69.1937097 101.927317,69.8709677 L101.927317,74.404 C101.927317,75.0812581 101.38006,75.6298065 100.70576,75.6298065 Z" id="Stroke-15" stroke="#3098DC"></path>
<polygon id="Fill-16" fill="#FEFEFE" points="9.77245509 63.6953548 92.1554731 63.6953548 92.1554731 4.90322581 9.77245509 4.90322581"></polygon>
<polygon id="Stroke-17" stroke="#3098DC" points="9.77245509 63.6953548 92.1554731 63.6953548 92.1554731 4.90322581 9.77245509 4.90322581"></polygon>
<path d="M53.4327111,51.4764454 L48.3815734,51.4764454 C48.2930105,51.4764454 48.2081123,51.4494776 48.1354296,51.3986067 L45.1462799,49.3073809 L43.8318847,48.2207035 L36.536747,50.2488002 C36.3101482,50.3113164 36.0719446,50.1770906 36.0059805,49.9490906 L33.8908548,42.6077357 C33.8664237,42.523768 33.8676452,42.4361228 33.8939087,42.352768 L36.1409626,35.2823164 L34.7923638,33.6826389 C34.7141841,33.5900906 34.6775374,33.4675099 34.6921961,33.346768 C34.7068548,33.226026 34.7709865,33.1157035 34.8693219,33.0446067 L35.1105793,32.8693164 L34.4368907,32.2484454 C34.3428308,32.1608002 34.2915255,32.0376067 34.2958009,31.9095099 C34.3006871,31.7808002 34.3611542,31.6612841 34.4607111,31.5822196 L34.8406153,31.2806712 L34.2218967,30.8044454 C34.1150105,30.7223164 34.0508787,30.5905422 34.0521003,30.4544776 C34.0533219,30.3178002 34.1180644,30.1872518 34.2273937,30.1057357 L34.6818129,29.7655744 L33.6019566,24.5289293 C33.5860763,24.4541551 33.5909626,24.3744776 33.6160045,24.3003164 L35.2620524,19.299026 C35.2993099,19.1862518 35.3805434,19.0930906 35.4862081,19.0428325 C35.5918728,18.9919615 35.7140284,18.9864454 35.8233578,19.0275099 L46.4826632,23.0506067 L55.3316213,23.0506067 L65.9903159,19.0275099 C66.0996452,18.9858325 66.2224117,18.9919615 66.3280763,19.0428325 C66.4343518,19.0937035 66.5155853,19.1868647 66.552232,19.299026 L68.1988907,24.3021551 C68.2227111,24.3732518 68.2275973,24.4517035 68.2123278,24.5277035 L67.1440763,29.7674131 L67.5911662,30.1081873 C67.6998847,30.1909293 67.7621841,30.3178002 67.7627949,30.4550906 C67.7634057,30.5905422 67.6998847,30.7210906 67.5936093,30.8038325 L66.9742799,31.2806712 L67.3535734,31.5822196 C67.453741,31.661897 67.5135973,31.7814131 67.5178728,31.9095099 C67.522759,32.0382196 67.4714536,32.1614131 67.3773937,32.2478325 L66.7037051,32.8693164 L66.9455734,33.0452196 C67.0432979,33.1157035 67.1074296,33.226026 67.1220883,33.3473809 C67.136747,33.4681228 67.0994895,33.5907035 67.0213099,33.6832518 L65.6739326,35.2817035 L67.9332021,42.3515422 C67.9600763,42.4336712 67.9612979,42.5225422 67.9374775,42.6071228 L65.8076931,49.9497035 C65.7423398,50.1770906 65.5035255,50.3100906 65.2775374,50.2488002 L57.9823997,48.2207035 L56.6283039,49.3368002 L53.6788548,51.3986067 C53.6061722,51.4494776 53.5206632,51.4764454 53.4327111,51.4764454" id="Fill-18" fill="#FEFEFE"></path>
<path d="M53.4327111,51.4764454 L48.3815734,51.4764454 C48.2930105,51.4764454 48.2081123,51.4494776 48.1354296,51.3986067 L45.1462799,49.3073809 L43.8318847,48.2207035 L36.536747,50.2488002 C36.3101482,50.3113164 36.0719446,50.1770906 36.0059805,49.9490906 L33.8908548,42.6077357 C33.8664237,42.523768 33.8676452,42.4361228 33.8939087,42.352768 L36.1409626,35.2823164 L34.7923638,33.6826389 C34.7141841,33.5900906 34.6775374,33.4675099 34.6921961,33.346768 C34.7068548,33.226026 34.7709865,33.1157035 34.8693219,33.0446067 L35.1105793,32.8693164 L34.4368907,32.2484454 C34.3428308,32.1608002 34.2915255,32.0376067 34.2958009,31.9095099 C34.3006871,31.7808002 34.3611542,31.6612841 34.4607111,31.5822196 L34.8406153,31.2806712 L34.2218967,30.8044454 C34.1150105,30.7223164 34.0508787,30.5905422 34.0521003,30.4544776 C34.0533219,30.3178002 34.1180644,30.1872518 34.2273937,30.1057357 L34.6818129,29.7655744 L33.6019566,24.5289293 C33.5860763,24.4541551 33.5909626,24.3744776 33.6160045,24.3003164 L35.2620524,19.299026 C35.2993099,19.1862518 35.3805434,19.0930906 35.4862081,19.0428325 C35.5918728,18.9919615 35.7140284,18.9864454 35.8233578,19.0275099 L46.4826632,23.0506067 L55.3316213,23.0506067 L65.9903159,19.0275099 C66.0996452,18.9858325 66.2224117,18.9919615 66.3280763,19.0428325 C66.4343518,19.0937035 66.5155853,19.1868647 66.552232,19.299026 L68.1988907,24.3021551 C68.2227111,24.3732518 68.2275973,24.4517035 68.2123278,24.5277035 L67.1440763,29.7674131 L67.5911662,30.1081873 C67.6998847,30.1909293 67.7621841,30.3178002 67.7627949,30.4550906 C67.7634057,30.5905422 67.6998847,30.7210906 67.5936093,30.8038325 L66.9742799,31.2806712 L67.3535734,31.5822196 C67.453741,31.661897 67.5135973,31.7814131 67.5178728,31.9095099 C67.522759,32.0382196 67.4714536,32.1614131 67.3773937,32.2478325 L66.7037051,32.8693164 L66.9455734,33.0452196 C67.0432979,33.1157035 67.1074296,33.226026 67.1220883,33.3473809 C67.136747,33.4681228 67.0994895,33.5907035 67.0213099,33.6832518 L65.6739326,35.2817035 L67.9332021,42.3515422 C67.9600763,42.4336712 67.9612979,42.5225422 67.9374775,42.6071228 L65.8076931,49.9497035 C65.7423398,50.1770906 65.5035255,50.3100906 65.2775374,50.2488002 L57.9823997,48.2207035 L56.6283039,49.3368002 L53.6788548,51.3986067 C53.6061722,51.4494776 53.5206632,51.4764454 53.4327111,51.4764454 Z" id="Stroke-19" stroke="#3098DC"></path>
<polygon id="Fill-20" fill="#3098DC" points="52.0480958 46.5806452 49.4779401 46.5806452 49.0320719 46.9355161 48.8622754 49.0745484 52.6637605 49.0745484 52.4933533 46.9355161"></polygon>
<path d="M54.8341371,38.1394234 L53.7713826,40.485617 C53.6852628,40.675617 53.8562808,40.8809396 54.0505083,40.8208751 L57.6742569,39.7017138 C57.8807,39.6379718 57.9014664,39.3425525 57.7054066,39.2493912 L55.1444125,38.0223589 C55.0277539,37.9665847 54.8891072,38.0186815 54.8341371,38.1394234" id="Fill-21" fill="#3098DC"></path>
<path d="M46.6690624,38.0223713 L44.1117331,39.2487906 C43.916284,39.3425648 43.9364397,39.6373713 44.1434936,39.7017261 L47.7666313,40.8208874 C47.9608589,40.8809519 48.1318768,40.6750164 48.0457571,40.4850164 L46.9793379,38.1388229 C46.9243678,38.0186939 46.7857211,37.9665971 46.6690624,38.0223713" id="Fill-22" fill="#3098DC"></path>
</g>
<g id="Group" transform="translate(0.000000, 9.000000)">
<path d="M66.9571429,59 L3.68571429,59 C1.65058571,59 0,57.3318526 0,55.2736842 L0,3.72631579 C0,1.66876842 1.65058571,0 3.68571429,0 L66.9571429,0 C68.9922714,0 70.6428571,1.66876842 70.6428571,3.72631579 L70.6428571,55.2736842 C70.6428571,57.3318526 68.9922714,59 66.9571429,59 Z" id="Stroke-1" stroke="#3098DC"></path>
<path d="M66.9571429,7.45263158 L3.68571429,7.45263158 C1.65058571,7.45263158 0,5.78448421 0,3.72631579 C0,1.66876842 1.65058571,0 3.68571429,0 L66.9571429,0 C68.9922714,0 70.6428571,1.66876842 70.6428571,3.72631579" id="Stroke-3" stroke="#3098DC"></path>
<path d="M66.9571429,7.45263158 C68.9922714,7.45263158 70.6428571,9.1214 70.6428571,11.1789474" id="Stroke-5" stroke="#3098DC"></path>
<polygon id="Stroke-7" stroke="#3098DC" points="70.6428571 23.5987579 85.5319143 23.5987579 85.5319143 19.8736842 70.6428571 19.8736842"></polygon>
<polygon id="Stroke-9" stroke="#3098DC" points="70.6428571 38.6530737 85.5319143 38.6530737 85.5319143 23.6 70.6428571 23.6"></polygon>
<path d="M35.2784286,22.3578947 L28.9666429,32.8356737 L35.2784286,36.5682 L41.5902143,32.8387789 L35.2784286,22.3578947 Z M35.1832143,37.7631053 L28.8714286,34.0336842 L35.1832143,42.9321263 L41.4986857,34.0336842 L35.1819857,37.7631053 L35.1832143,37.7631053 Z" id="Fill-23" fill="#3098DC"></path>
<path d="M50.4672571,32.9642316 C50.4672571,24.3626526 43.5700571,17.3894737 35.0622,17.3894737 C26.5543429,17.3894737 19.6571429,24.3626526 19.6571429,32.9642316 C19.6571429,41.5664316 26.5543429,48.5389895 35.0622,48.5389895 C43.5700571,48.5389895 50.4672571,41.5664316 50.4672571,32.9642316 Z" id="Stroke-24" stroke="#3098DC"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

81
app/images/hardware-wallet-step-2.svg
Unescape View File

@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="302px" height="98px" viewBox="0 0 302 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>27B850D0-B3BA-4F98-8BB4-B542D8BFDE3B</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="294" height="32"></rect>
<filter x="-2.4%" y="-15.6%" width="104.8%" height="143.8%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.123075181 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Import-account" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hardware-connect" transform="translate(-361.000000, -797.000000)">
<g id="Group-10" transform="translate(356.000000, 717.000000)">
<g id="accounts" transform="translate(9.000000, 80.000000)">
<g id="Group-5" transform="translate(21.000000, 0.000000)">
<g id="Group-7" transform="translate(0.000000, 45.000000)">
<rect id="Rectangle-6-Copy" stroke="#AFDFFF" fill="#FFFFFF" x="0.5" y="0.5" width="250" height="26"></rect>
<text id="3" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="31" y="19">3</tspan>
</text>
<text id="OXz3…T3A4" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="50" y="19">OXz3…T3A4</tspan>
</text>
<text id="0.020000-ETH" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="142" y="19">0.020000 ETH</tspan>
</text>
<circle id="Oval-Copy" stroke="#AFDFFF" stroke-width="2" cx="16.5" cy="14.5" r="6.5"></circle>
</g>
<g id="Group-7-Copy">
<rect id="Rectangle-6-Copy" stroke="#AFDFFF" fill="#FFFFFF" x="0.5" y="0.5" width="250" height="26"></rect>
<text id="1" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="31" y="19">1</tspan>
</text>
<text id="OXa4…s0a2" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="50" y="19">OXa4…s0a2</tspan>
</text>
<text id="0.01500-ETH" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="142" y="19">0.01500 ETH</tspan>
</text>
<circle id="Oval-Copy" stroke="#AFDFFF" stroke-width="2" cx="16.5" cy="14.5" r="6.5"></circle>
</g>
<g id="Group-8" transform="translate(0.000000, 71.000000)">
<rect id="Rectangle-6-Copy-2" stroke="#AFDFFF" fill="#FFFFFF" x="0.5" y="0.5" width="250" height="26"></rect>
<text id="4" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="31" y="18">4</tspan>
</text>
<text id="OXd2…D0V4" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="50" y="18">OXd2…D0V4</tspan>
</text>
<text id="0.030000-ETH" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
<tspan x="142" y="18">0.030000 ETH</tspan>
</text>
<circle id="Oval-Copy-2" stroke="#AFDFFF" stroke-width="2" cx="16.5" cy="13.5" r="6.5"></circle>
</g>
</g>
<g id="Group-4" transform="translate(0.000000, 21.000000)">
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<rect stroke="#3098DC" stroke-width="1" stroke-linejoin="square" fill="#D9F0FF" fill-rule="evenodd" x="0.5" y="0.5" width="293" height="31"></rect>
</g>
<text id="2" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#4A4A4A">
<tspan x="36" y="22">2</tspan>
</text>
<text id="OXe7…B0a1" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#4A4A4A">
<tspan x="58" y="22">OXe7…B0a1</tspan>
</text>
<text id="0.041000-ETH" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#4A4A4A">
<tspan x="166" y="22">0.041000 ETH</tspan>
</text>
<circle id="Oval" stroke="#3098DC" stroke-width="2" cx="19.5" cy="16.5" r="7.5"></circle>
<polyline id="Path-5" stroke="#3098DC" stroke-width="2" points="15 17 17.5495098 19.5495098 24 13.9042921"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

42
app/images/hardware-wallet-step-3.svg
Unescape View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="108px" height="85px" viewBox="0 0 108 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>CEB55C41-7BCE-405E-83CD-834B388B495F</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Import-account" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hardware-connect" transform="translate(-457.000000, -1057.000000)">
<g id="Group-11" transform="translate(356.000000, 929.000000)">
<g id="use-dapps" transform="translate(102.000000, 129.000000)">
<g id="Group-3">
<path d="M96.2021481,83 L9.79785192,83 C7.70080469,83 6,81.2922121 6,79.1851351 L6,8.81486493 C6,6.70778787 7.70080469,5 9.79785192,5 L96.2021481,5 C98.2998283,5 100,6.70778787 100,8.81486493 L100,79.1851351 C100,81.2922121 98.2998283,83 96.2021481,83" id="Fill-12" fill="#FEFEFE"></path>
<path d="M96.2021481,83 L9.79785192,83 C7.70080469,83 6,81.2922121 6,79.1851351 L6,8.81486493 C6,6.70778787 7.70080469,5 9.79785192,5 L96.2021481,5 C98.2998283,5 100,6.70778787 100,8.81486493 L100,79.1851351 C100,81.2922121 98.2998283,83 96.2021481,83 Z" id="Stroke-13" stroke="#3098DC"></path>
<path d="M104.729634,83 L1.27036631,83 C0.568488923,83 0,82.4502457 0,81.7714988 L0,77.2285012 C0,76.5497543 0.568488923,76 1.27036631,76 L104.729634,76 C105.430876,76 106,76.5497543 106,77.2285012 L106,81.7714988 C106,82.4502457 105.430876,83 104.729634,83" id="Fill-14" fill="#D9F0FF"></path>
<path d="M104.729634,83 L1.27036631,83 C0.568488923,83 0,82.4502457 0,81.7714988 L0,77.2285012 C0,76.5497543 0.568488923,76 1.27036631,76 L104.729634,76 C105.430876,76 106,76.5497543 106,77.2285012 L106,81.7714988 C106,82.4502457 105.430876,83 104.729634,83 Z" id="Stroke-15" stroke="#3098DC"></path>
<polygon id="Fill-16" fill="#FEFEFE" points="10 71 96 71 96 10 10 10"></polygon>
<polygon id="Stroke-17" stroke="#3098DC" points="10 71 96 71 96 10 10 10"></polygon>
<rect id="Rectangle-2" stroke="#3098DC" fill="#FFFFFF" x="14.5" y="14.5" width="77" height="53" rx="2"></rect>
<path d="M14.5,21.5 L91.5,21.5 L91.5,16 C91.5,15.1715729 90.8284271,14.5 90,14.5 L16,14.5 C15.1715729,14.5 14.5,15.1715729 14.5,16 L14.5,21.5 Z" id="Rectangle-3" stroke="#3098DC" fill="#FFFFFF"></path>
<g id="Group-6" transform="translate(17.000000, 17.000000)" fill="#D9F0FF" stroke="#3098DC">
<circle id="Oval-2" cx="1" cy="1" r="1"></circle>
<circle id="Oval-2" cx="5.76923077" cy="1" r="1"></circle>
<circle id="Oval-2" cx="10.5384615" cy="1" r="1"></circle>
</g>
<g id="metamask-outline" transform="translate(73.000000, 0.000000)">
<g id="Group-6">
<path d="M19.2986136,29.0578722 L14.6471457,29.0578722 C14.5655903,29.0578722 14.4874097,29.0337432 14.420478,28.988227 L11.6678439,27.1171303 L10.4574498,26.1448399 L3.73953772,27.9594528 C3.53086848,28.0153883 3.31151268,27.8952915 3.250768,27.6912915 L1.30300094,21.1227109 C1.28050291,21.0475819 1.28162782,20.9691625 1.3058132,20.8945819 L3.37506962,14.5683883 L2.1331783,13.137098 C2.0611846,13.0542915 2.02743755,12.9446141 2.04093637,12.8365819 C2.05443519,12.7285496 2.11349252,12.6298399 2.20404709,12.566227 L2.42621515,12.4093883 L1.80583194,11.8538722 C1.71921452,11.7754528 1.67196866,11.665227 1.67590581,11.5506141 C1.68040542,11.4354528 1.73608805,11.3285174 1.82776752,11.2577754 L2.17761191,10.987969 L1.60784927,10.5618722 C1.50942038,10.4883883 1.45036305,10.3704851 1.45148795,10.2487432 C1.45261285,10.1264528 1.51223264,10.0096464 1.61291132,9.9367109 L2.0313747,9.63235606 L1.03696173,4.94693671 C1.02233801,4.88003348 1.02683761,4.80874316 1.04989809,4.74238832 L2.56570295,0.267549611 C2.60001244,0.166646385 2.6748184,0.0832915464 2.77212238,0.0383238044 C2.86942637,-0.00719232461 2.98191652,-0.0121278085 3.08259521,0.024614127 L12.8984862,3.62422703 L21.0472731,3.62422703 L30.8626017,0.024614127 C30.9632804,-0.0126761956 31.076333,-0.00719232461 31.173637,0.0383238044 C31.2715034,0.0838399335 31.3463093,0.167194772 31.3800564,0.267549611 L32.8964237,4.74403348 C32.9183593,4.80764639 32.9228589,4.87783993 32.9087976,4.94583993 L31.9250712,9.63400122 L32.3367852,9.93890445 C32.4369014,10.0129367 32.4942714,10.1264528 32.4948338,10.2492915 C32.4953963,10.3704851 32.4369014,10.4872915 32.339035,10.5613238 L31.7687099,10.987969 L32.1179918,11.2577754 C32.2102337,11.3290657 32.2653539,11.4360012 32.2692911,11.5506141 C32.2737907,11.6657754 32.2265448,11.7760012 32.1399274,11.8533238 L31.5195442,12.4093883 L31.7422747,12.5667754 C31.8322668,12.6298399 31.8913241,12.7285496 31.904823,12.8371303 C31.9183218,12.9451625 31.8840123,13.0548399 31.8120186,13.1376464 L30.5712522,14.5678399 L32.6517576,20.8934851 C32.6765054,20.966969 32.6776303,21.0464851 32.6556948,21.1221625 L30.6944289,27.6918399 C30.6342467,27.8952915 30.4143284,28.0142915 30.2062216,27.9594528 L23.4883095,26.1448399 L22.2413561,27.1434528 L19.5252813,28.988227 C19.4583497,29.0337432 19.3796066,29.0578722 19.2986136,29.0578722 Z" id="Stroke-19" stroke="#3098DC" fill="#FFFFFF"></path>
<polygon id="Fill-20" fill="#3098DC" points="18.0235556 24.6774194 15.6567628 24.6774194 15.2461737 24.9949355 15.0898124 26.9088065 18.590506 26.9088065 18.4335823 24.9949355"></polygon>
<path d="M20.5891522,17.1247473 L19.6104879,19.2239731 C19.5311823,19.3939731 19.6886685,19.5776828 19.8675279,19.5239408 L23.2045484,18.522586 C23.3946567,18.4655537 23.4137801,18.2012312 23.2332334,18.1178763 L20.8748772,17.0200054 C20.7674491,16.9701021 20.6397728,17.016715 20.5891522,17.1247473" id="Fill-21" fill="#3098DC"></path>
<path d="M13.0701367,17.0200164 L10.7151553,18.117339 C10.535171,18.2012422 10.5537319,18.4650164 10.7444027,18.5225971 L14.0808608,19.5239519 C14.2597201,19.5776938 14.4172063,19.3934358 14.3379008,19.2234358 L13.3558617,17.12421 C13.3052411,17.0167261 13.1775648,16.9701132 13.0701367,17.0200164" id="Fill-22" fill="#3098DC"></path>
</g>
</g>
</g>
<text id="LOGIN-WITH-METAMASK" font-family="RobotoMono-Bold, Roboto Mono" font-size="10" font-weight="bold" fill="#3098DC">
<tspan x="24.4951172" y="43">LOGIN WITH </tspan>
<tspan x="30.4960938" y="56">METAMASK</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

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

@ -125,7 +125,7 @@ AccountMenu.prototype.render = function () {
} }
}, },
icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }), icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }),
text: this.context.t('connectHardware'), text: this.context.t('connectHardwareWallet'),
}), }),
h(Divider), h(Divider),
h(Item, { h(Item, {

99
ui/app/components/pages/create-account/connect-hardware/connect-screen.js
Unescape View File

@ -27,35 +27,98 @@ class ConnectScreen extends Component {
) )
} }
renderConnectScreen () { renderHeader () {
return ( return (
h('div.new-account-connect-form', {}, [ h('div.hw-connect__header', {}, [
h('div.hw-connect', [ h('h3.hw-connect__header__title', {}, this.context.t(`hardwareSupport`)),
h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')), h('p.hw-connect__header__msg', {}, this.context.t(`hardwareSupportMsg`)),
h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')), ])
h('p.hw-connect__msg', {}, [ )
this.context.t('connectToTrezorTrouble'), }
h('a.hw-connect__link', {
href: 'https://support.metamask.io/', renderTrezorAffiliateLink () {
return h('div.hw-connect__get-trezor', {}, [
h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)),
h('a.hw-connect__get-trezor__link', {
href: 'https://shop.trezor.io/?a=metamask',
target: '_blank', target: '_blank',
}, ` ${this.context.t('learnMore')}`), }, this.context.t('orderOneHere')),
]), ])
]), }
h(
renderConnectToTrezorButton () {
return h(
'button.btn-primary.btn--large', 'button.btn-primary.btn--large',
{ onClick: this.props.connectToTrezor.bind(this) }, { onClick: this.props.connectToTrezor.bind(this) },
this.props.btnText this.props.btnText
), )
h('div.hw-connect__get-trezor', {}, [ }
h('a', {
href: 'https://shop.trezor.io/?a=metamask', renderLearnMore () {
return (
h('p.hw-connect__learn-more', {}, [
this.context.t('learnMore'),
h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
])
)
}
renderTutorialSteps () {
const steps = [
{
asset: 'hardware-wallet-step-1',
dimensions: {width: '225px', height: '75px'},
},
{
asset: 'hardware-wallet-step-2',
dimensions: {width: '300px', height: '100px'},
},
{
asset: 'hardware-wallet-step-3',
dimensions: {width: '120px', height: '90px'},
},
]
return h('.hw-tutorial', {},
steps.map((step, i) => (
h('div.hw-connect', [
h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
])
))
)
}
renderFooter () {
return (
h('div.hw-connect__footer', {}, [
h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
this.renderConnectToTrezorButton(),
h('p.hw-connect__footer__msg', {}, [
this.context.t(`havingTroubleConnecting`),
h('a.hw-connect__footer__link', {
href: '#',
target: '_blank', target: '_blank',
}, this.context.t('getYourTrezor')), }, this.context.t('getHelp')),
]), ]),
]) ])
) )
} }
renderConnectScreen () {
return (
h('div.new-account-connect-form', {}, [
this.renderHeader(),
this.renderTrezorAffiliateLink(),
this.renderConnectToTrezorButton(),
this.renderLearnMore(),
this.renderTutorialSteps(),
this.renderFooter(),
])
)
}
render () { render () {
if (this.props.browserSupported) { if (this.props.browserSupported) {
return this.renderConnectScreen() return this.renderConnectScreen()

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

@ -1,9 +1,8 @@
.new-account { .new-account {
width: 376px; width: 375px;
background-color: #FFFFFF; background-color: #FFFFFF;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
z-index: 25; z-index: 25;
padding-bottom: 31px;
&__header { &__header {
display: flex; display: flex;
@ -153,10 +152,51 @@
} }
} }
.hw-tutorial {
width: 375px;
border-top: 1px solid #D2D8DD;
border-bottom: 1px solid #D2D8DD;
overflow: visible;
display: block;
padding: 15px 30px;
}
.hw-connect { .hw-connect {
&__header {
&__title {
margin-top: 5px;
margin-bottom: 15px;
font-size: 22px;
text-align: center;
}
&__msg {
font-size: 14px;
color: #9b9b9b;
margin-top: 10px;
margin-bottom: 0px;
}
}
&__learn-more {
margin-top: 15px;
font-size: 14px;
color: #5B5D67;
line-height: 19px;
text-align: center;
&__arrow {
transform: rotate(90deg);
display: block;
text-align: center;
height: 30px;
margin: 0px auto 10px;
}
}
&__title { &__title {
padding-top: 10px; padding-top: 10px;
font-weight: 500; font-weight: 400;
font-size: 18px; font-size: 18px;
} }
@ -164,27 +204,59 @@
font-size: 14px; font-size: 14px;
color: #9b9b9b; color: #9b9b9b;
margin-top: 10px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 15px;
} }
&__link { &__link {
color: #2f9ae0; color: #2f9ae0;
} }
&__footer {
width: 100%;
&__title {
padding-top: 15px;
padding-bottom: 12px;
font-weight: 400;
font-size: 18px;
text-align: center;
}
&__msg {
font-size: 14px;
color: #9b9b9b;
margin-top: 12px;
margin-bottom: 27px;
}
&__link {
color: #2f9ae0;
margin-left: 5px;
}
}
&__get-trezor { &__get-trezor {
display: flex; width: 100%;
flex-flow: column; padding-bottom: 20px;
align-items: center; padding-top: 20px;
padding: 30px 30px 0;
width: 305px;
a { &__msg {
font-size: 14px;
color: #9b9b9b;
}
&__link {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
color: #2f9ae0; color: #2f9ae0;
cursor: pointer; cursor: pointer;
} }
} }
&__step-asset {
margin: 0px auto 20px;
display: flex;
}
} }
.hw-account-list { .hw-account-list {
@ -303,6 +375,8 @@
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
padding: 15px 30px 0; padding: 15px 30px 0;
height: 710px;
overflow: auto;
&__buttons { &__buttons {
margin-top: 39px; margin-top: 39px;
@ -316,23 +390,20 @@
min-width: initial; min-width: initial;
} }
&__button.btn-primary { .btn-primary {
background-color: #259DE5;
}
&__button.btn-primary {
background-color: #259DE5; background-color: #259DE5;
color: #FFFFFF; color: #FFFFFF;
border: none;
width: 100%;
min-height: 54px;
font-weight: 300;
font-size: 14px;
} }
&__button.btn-primary--disabled { &__button.btn-primary--disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: .5; opacity: .5;
} }
} }
.hw-forget-device-container { .hw-forget-device-container {
@ -352,7 +423,7 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
padding: 30px 30px 0; padding: 30px;
&__input-label { &__input-label {
color: $scorpion; color: $scorpion;

Write Preview
Loading…
Cancel
Save