status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet-Decrypt/Send Tooltips (#436) 

* Update Help component && Fix some css errors
This commit is contained in:
James Prado 2017-11-21 13:33:20 -05:00 committed by Daniel Ternyak
parent 410927010b
commit 0ef6380777
8 changed files with 69 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/assets/images/icon-help-3.svg Normal file
View File

@ -0,0 +1 @@
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><path fill="#0e97c0" d="M45.386.004C19.983.344-.333 21.215.005 46.619c.34 25.393 21.209 45.715 46.611 45.377 25.398-.342 45.718-21.213 45.38-46.615-.34-25.395-21.21-45.716-46.61-45.377zM45.25 74l-.254-.004c-3.912-.116-6.67-2.998-6.559-6.852.109-3.788 2.934-6.538 6.717-6.538l.227.004c4.021.119 6.748 2.972 6.635 6.937C51.904 71.346 49.123 74 45.25 74zm16.455-32.659c-.92 1.307-2.943 2.93-5.492 4.916l-2.807 1.938c-1.541 1.198-2.471 2.325-2.82 3.434-.275.873-.41 1.104-.434 2.88l-.004.451H39.43l.031-.907c.131-3.728.223-5.921 1.768-7.733 2.424-2.846 7.771-6.289 7.998-6.435.766-.577 1.412-1.234 1.893-1.936 1.125-1.551 1.623-2.772 1.623-3.972a7.74 7.74 0 0 0-1.471-4.576c-.939-1.323-2.723-1.993-5.303-1.993-2.559 0-4.311.812-5.359 2.478-1.078 1.713-1.623 3.512-1.623 5.35v.457H27.936l.02-.477c.285-6.769 2.701-11.643 7.178-14.487C37.947 18.918 41.447 18 45.531 18c5.346 0 9.859 1.299 13.412 3.861 3.6 2.596 5.426 6.484 5.426 11.556 0 2.837-.896 5.502-2.664 7.924z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

48
common/assets/styles/etherwallet-custom.less
View File

@ -135,52 +135,6 @@ textarea {
}
}
.account-help-icon {
h3,
h4,
h5,
h6,
img {
display: inline-block;
}
img:hover + .account-help-text {
display: block;
}
img {
margin-left: -30px;
margin-right: 3px;
}
}
.account-help-text {
background: white;
border-radius: @border-radius;
border: 1px solid #cdcdcd;
box-shadow: 0 0 @space-sm rgba(100, 100, 100, .2);
display: none;
font-size: @font-size-xs;
font-weight: 400;
padding: @space-xs;
position: absolute;
width: 18rem;
z-index: 999;
ul& {
padding-left: 1.6rem;
}
li {
font-size: @font-size-xs;
font-weight: 400;
}
}
@media screen and (max-width: 767px) {
.account-help-icon li,
.account-help-icon img,
.account-help-icon p {
display: none;
}
}
// monospace things
.mono,
.form-control,
@ -283,7 +237,7 @@ input[type="password"] + .eye {
.m-addresses td:first-child {
max-width: 50px;
min-widht: 50px;
min-width: 50px;
}
.m-addresses td:last-child {

2
common/components/WalletDecrypt/Web3.tsx
View File

@ -13,7 +13,7 @@ export default class Web3Decrypt extends Component<Props> {
<section className="Web3Decrypt col-md-4 col-sm-6">
<div>
<button
className="Web3Decrypt btn btn-primary btn-lg"
className="Web3Decrypt-decrypt btn btn-primary btn-lg"
onClick={this.props.onUnlock}
>
{translate('ADD_MetaMask')}

30
common/components/WalletDecrypt/index.tsx
View File

@ -22,6 +22,7 @@ import TrezorDecrypt from './Trezor';
import ViewOnlyDecrypt from './ViewOnly';
import { AppState } from 'reducers';
import Web3Decrypt from './Web3';
import Help from 'components/ui/Help';
const WALLETS = {
'keystore-file': {
@ -32,7 +33,9 @@ const WALLETS = {
password: ''
},
unlock: unlockKeystore,
disabled: false
disabled: false,
helpLink:
'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
},
'private-key': {
lid: 'x_PrivKey2',
@ -42,40 +45,50 @@ const WALLETS = {
password: ''
},
unlock: unlockPrivateKey,
disabled: false
disabled: false,
helpLink:
'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
},
'mnemonic-phrase': {
lid: 'x_Mnemonic',
component: MnemonicDecrypt,
initialParams: {},
unlock: unlockMnemonic,
disabled: false
disabled: false,
helpLink:
'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
},
'ledger-nano-s': {
lid: 'x_Ledger',
component: LedgerNanoSDecrypt,
initialParams: {},
unlock: setWallet,
disabled: false
disabled: false,
helpLink:
'https://ledger.zendesk.com/hc/en-us/articles/115005200009-How-to-use-MyEtherWallet-with-Ledger'
},
trezor: {
lid: 'x_Trezor',
component: TrezorDecrypt,
initialParams: {},
unlock: setWallet,
disabled: false
disabled: false,
helpLink: 'https://doc.satoshilabs.com/trezor-apps/mew.html'
},
web3: {
lid: 'x_MetaMask',
component: Web3Decrypt,
initialParams: {},
unlock: unlockWeb3,
disabled: false
disabled: false,
helpLink:
'https://myetherwallet.github.io/knowledge-base/migration/moving-from-private-key-to-metamask.html'
},
'view-only': {
lid: 'View with Address Only',
component: ViewOnlyDecrypt,
disabled: true
disabled: true,
helpLink: ''
}
};
@ -127,7 +140,7 @@ export class WalletDecrypt extends Component<Props, State> {
public buildWalletOptions() {
return map(WALLETS, (wallet, key) => {
const isSelected = this.state.selectedWalletKey === key;
const { helpLink } = wallet;
return (
<label className="radio" key={key}>
<input
@ -143,6 +156,7 @@ export class WalletDecrypt extends Component<Props, State> {
}
/>
<span id={`${key}-label`}>{translate(wallet.lid)}</span>
{helpLink ? <Help link={helpLink} /> : null}
</label>
);
});

30
common/components/ui/Help.scss Normal file
View File

@ -0,0 +1,30 @@
.Help {
display: inline-block;
margin-left: 8px;
padding: 4px;
box-sizing: content-box;
line-height: inherit;
vertical-align: top;
transition: opacity 0.3s;
& img {
display: block;
height: inherit;
width: inherit;
}
&-x1 {
height: 16px;
width: 16px;
}
&-x2 {
height: 24px;
width: 24px;
}
&-x3 {
height: 36px;
width: 36px;
}
}

34
common/components/ui/Help.tsx
View File

@ -1,36 +1,18 @@
import React from 'react';
import helpIcon from 'assets/images/icon-help.svg';
import icon from 'assets/images/icon-help-3.svg';
import './Help.scss';
type sizeType = 'small' | 'medium' | 'large';
type Size = 'x1' | 'x2' | 'x3';
interface HelpProps {
interface Props {
link: string;
size?: sizeType;
helpText?: string;
}
const Help = ({ size, link, helpText }: HelpProps) => {
let width = 30;
let height = 12;
switch (size) {
case 'medium':
width = width * 3;
height = height * 3;
break;
case 'large':
width = width * 4;
height = height * 4;
break;
default:
break;
size?: Size;
}
const Help = ({ size = 'x1', link }: Props) => {
return (
<a href={link} className={'account-help-icon'} target={'_blank'}>
<img src={helpIcon} width={width} height={height} />
{helpText && <p className="account-help-text">{helpText}</p>}
<a href={link} className={`Help Help-${size}`} target={'_blank'}>
<img src={icon} />
</a>
);
};

9
common/containers/Tabs/SendTransaction/components/NonceField.tsx
View File

@ -27,17 +27,16 @@ export default class NonceField extends React.Component<PublicProps, {}> {
return (
<div className="row form-group">
<div className="col-xs-11">
<label>Nonce</label>
<Help
size={'small'}
link={
'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'
}
/>
<label>Nonce</label>
<input
className={`form-control ${isValidNonce(strValue)
? 'is-valid'
: 'is-invalid'}`}
className={`form-control ${
isValidNonce(strValue) ? 'is-valid' : 'is-invalid'
}`}
type="number"
value={strValue}
placeholder={placeholder}

3
common/sass/styles/overrides/forms.scss
View File

@ -2,7 +2,6 @@
@import 'common/sass/variables';
label {
margin-top: $space-sm;
margin-bottom: $space-xs;
font-size: $font-size-bump-more;
}
@ -39,7 +38,7 @@ input[readonly] {
.form-group {
display: block;
margin-top: $form-group-margin-bottom;
margin-top: $form-group-margin-bottom * 2;
margin-bottom: $form-group-margin-bottom;
}