poanetwork
/
MyCrypto
mirror of https://github.com/poanetwork/MyCrypto.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update copy / links for Beta (#1193) 

* AlphaAgreement -> BetaAgreement.

* Banner color.

* Remove language disclaimer.

* Discord link in footer.

* Update font for discord icon.

* Adjust copy.

* Link to github repo in error message.

* Remove always error
This commit is contained in:
William O'Beirne 2018-02-27 16:35:32 -05:00 committed by Daniel Ternyak
parent 296b78d62e
commit a430fe650c
14 changed files with 122 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
common/assets/fonts/social-media.woff
View File

Binary file not shown.

BIN
common/assets/fonts/social-media.woff2
View File

Binary file not shown.

66
common/components/AlphaAgreement/index.tsx
View File

@ -1,66 +0,0 @@
import React from 'react';
import './index.scss';
const LS_KEY = 'acknowledged-alpha';
interface State {
isFading: boolean;
hasAcknowledged: boolean;
}
export default class AlphaAgreement extends React.PureComponent<{}, State> {
public state = {
hasAcknowledged: !!localStorage.getItem(LS_KEY),
isFading: false
};
public render() {
if (this.state.hasAcknowledged) {
return null;
}
const isFading = this.state.isFading ? 'is-fading' : '';
return (
<div className={`AlphaAgreement ${isFading}`}>
<div className="AlphaAgreement-content">
<h2>This is an Unstable Version of MyCrypto</h2>
<p>
You are about to access a beta version of MyCrypto that is currently in development. In
its current state, it should only be used for testing, not for important transactions.
</p>
<p>
Any wallets you generate should not hold a significant value, and any transactions you
make should be for small amounts. MyCrypto does not claim responsibility for any issues
that happen while using the beta version.
</p>
<p>Are you sure you would like to continue?</p>
<div className="AlphaAgreement-content-buttons">
<button className="AlphaAgreement-content-buttons-btn is-reject" onClick={this.reject}>
No, take me to prod
</button>
<button
className="AlphaAgreement-content-buttons-btn is-continue"
onClick={this.doContinue}
>
Yes, continue to beta
</button>
</div>
</div>
</div>
);
}
private doContinue = () => {
localStorage.setItem(LS_KEY, 'true');
this.setState({ isFading: true });
setTimeout(() => {
this.setState({ hasAcknowledged: true });
}, 1000);
};
private reject = () => {
window.location.assign('https://mycrypto.com');
};
}

21
common/components/AlphaAgreement/index.scss → common/components/BetaAgreement/index.scss
View File

@ -1,43 +1,50 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.AlphaAgreement {
.BetaAgreement {
@include cover-message;
background: $brand-info;
&-content {
h2 {
text-align: center;
}
&-buttons {
padding-top: 20px;
&-btn {
display: block;
width: 100%;
max-width: 240px;
max-width: 280px;
margin: 0 auto;
border: none;
padding: 0;
outline: none;
transition: $transition;
&.is-reject {
&.is-continue {
height: 60px;
line-height: 60px;
font-size: 22px;
background: rgba(#fff, 0.96);
color: $gray;
color: $gray-dark;
border-radius: 4px;
margin-bottom: 20px;
&:hover {
background: #fff;
color: $gray-darker;
}
}
&.is-continue {
&.is-reject {
background: none;
color: #fff;
opacity: 0.7;
&:hover {
text-decoration: underline;
opacity: 1;
}
}
}
@ -51,7 +58,7 @@
background: #fff;
transition: all 500ms ease 400ms;
.AlphaAgreement-content {
.BetaAgreement-content {
opacity: 0;
transform: translateY(15px);
transition: all 500ms ease;

72
common/components/BetaAgreement/index.tsx Normal file
View File

@ -0,0 +1,72 @@
import React from 'react';
import { NewTabLink } from 'components/ui';
import { discordURL } from 'config';
import './index.scss';
const LS_KEY = 'acknowledged-beta';
interface State {
isFading: boolean;
hasAcknowledged: boolean;
}
export default class BetaAgreement extends React.PureComponent<{}, State> {
public state = {
hasAcknowledged: !!localStorage.getItem(LS_KEY),
isFading: false
};
public render() {
if (this.state.hasAcknowledged) {
return null;
}
const isFading = this.state.isFading ? 'is-fading' : '';
return (
<div className={`BetaAgreement ${isFading}`}>
<div className="BetaAgreement-content">
<h2>Welcome to the New MyCrypto Beta!</h2>
<p>
You are about to use a version of MyCrypto that hasn't been released yet. While we are
confident that it is close to being production ready, you may want to use the current
production site for larger or more time-sensitive transactions.
</p>
<p>
Feedback and bug reports are greatly appreciated. You can file issues on our{' '}
<NewTabLink href="https://github.com/MyCryptoHQ/MyCrypto/issues">
GitHub repository
</NewTabLink>{' '}
or join our <NewTabLink href={discordURL}>Discord server</NewTabLink> to discuss the
beta.
</p>
<p>Are you sure you would like to continue?</p>
<div className="BetaAgreement-content-buttons">
<button
className="BetaAgreement-content-buttons-btn is-continue"
onClick={this.doContinue}
>
Yes, continue to the Beta
</button>
<button className="BetaAgreement-content-buttons-btn is-reject" onClick={this.reject}>
No, take me to the production site
</button>
</div>
</div>
</div>
);
}
private doContinue = () => {
localStorage.setItem(LS_KEY, 'true');
this.setState({ isFading: true });
setTimeout(() => {
this.setState({ hasAcknowledged: true });
}, 1000);
};
private reject = () => {
window.location.assign('https://mycrypto.com');
};
}

12
common/components/ErrorScreen/index.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import { NewTabLink } from 'components/ui';
import './index.scss';
const SUBJECT = 'Error!';
@ -24,14 +25,17 @@ const ErrorScreen: React.SFC<Props> = ({ error }) => {
>
support@mycrypto.com
</a>{' '}
if a refresh doesn't fix it (or click it anyway to open a ticket 😊). If you attach the
following error, you'll make it a ton easier to fix the issue.
if a refresh doesn't fix it (or click it anyway to open a ticket 😊). You can also submit
an issue on our{' '}
<NewTabLink href="https://github.com/MyCryptoHQ/MyCrypto/issues">
GitHub Repository
</NewTabLink>. Please attach the following error to help our team solve your issue.
</p>
<code>{error.message}</code>
<h5>
Please make sure the error message does not include any sensitive information before
sending it us. We don't want your private keys!
sending it to us. We don't want your private keys!
</h5>
<code>{error.message}</code>
</div>
</div>
);

4
common/components/Footer/index.scss
View File

@ -158,10 +158,10 @@ $footer-link-color: #fff;
.SocialMediaLink {
transition: opacity 0.3s;
color: #fff;
margin: 0.65rem;
margin: 0.55rem;
> i {
font-size: 1.2rem;
font-size: 1.15rem;
}
&:hover,

7
common/components/Footer/index.tsx
View File

@ -5,7 +5,8 @@ import {
ethercardReferralURL,
donationAddressMap,
VERSION,
knowledgeBaseURL
knowledgeBaseURL,
discordURL
} from 'config';
import React from 'react';
import PreFooter from './PreFooter';
@ -46,6 +47,10 @@ const SOCIAL_MEDIA: Link[] = [
{
link: 'https://www.reddit.com/r/mycrypto/',
text: 'reddit'
},
{
link: discordURL,
text: 'discord'
}
];

2
common/components/Header/index.scss
View File

@ -41,6 +41,7 @@ $small-size: 900px;
font-weight: 300;
color: #fff;
transition: background-color 80ms ease;
background: $gray-darker;
a {
color: #fff;
@ -54,7 +55,6 @@ $small-size: 900px;
}
// Colors
&,
&.is-primary {
background: $brand-primary;
}

7
common/components/Header/index.tsx
View File

@ -155,13 +155,6 @@ class Header extends Component<Props, State> {
ariaLabel={`change language. current language ${languages[selectedLanguage]}`}
options={Object.values(languages)}
value={languages[selectedLanguage]}
extra={
<li key="disclaimer">
<a data-toggle="modal" data-target="#disclaimerModal">
Disclaimer
</a>
</li>
}
onChange={this.changeLanguage}
size="smr"
color="white"

2
common/components/index.ts
View File

@ -13,7 +13,7 @@ export { default as Header } from './Header';
export { default as Footer } from './Footer';
export { default as BalanceSidebar } from './BalanceSidebar';
export { default as PaperWallet } from './PaperWallet';
export { default as AlphaAgreement } from './AlphaAgreement';
export { default as BetaAgreement } from './BetaAgreement';
export { default as TXMetaDataPanel } from './TXMetaDataPanel';
export { default as WalletDecrypt } from './WalletDecrypt';
export { default as TogglablePassword } from './TogglablePassword';

23
common/config/data.tsx
View File

@ -1,31 +1,26 @@
import React from 'react'; // For ANNOUNCEMENT_MESSAGE jsx
import NewTabLink from 'components/ui/NewTabLink';
import { getValues } from '../utils/helpers';
import packageJson from '../../package.json';
import { GasPriceSetting } from 'types/network';
export const languages = require('./languages.json');
export const discordURL = 'https://discord.gg/VSaTXEA';
// Displays in the footer
export const VERSION = `${packageJson.version} (BETA)`;
export const N_FACTOR = 8192;
// Displays at the top of the site, make message empty string to remove.
// Type can be primary, warning, danger, success, or info.
// Type can be primary, warning, danger, success, info, or blank for grey.
// Message must be a JSX element if you want to use HTML.
export const ANNOUNCEMENT_TYPE = 'warning';
export const ANNOUNCEMENT_TYPE = '';
export const ANNOUNCEMENT_MESSAGE = (
<div>
This is an early build of MyCrypto Beta. Please only use for testing, or use production at{' '}
<a href="https://mycrypto.com">{'https://mycrypto.com'}</a>.
<br />
<span className="hidden-xs">
If you're interested in recieving updates about the MyCrypto Beta, you can subscribe via{' '}
<a href="https://mycrypto.us17.list-manage.com/subscribe?u=6092be560275431280b0ffbc1&id=a03ef384e4">
mailchimp
</a>{' '}
:)
</span>
</div>
<React.Fragment>
This is a Beta version of MyCrypto. Please submit any bug reports to our{' '}
<NewTabLink href="https://github.com/MyCryptoHQ/MyCrypto/issues">GitHub</NewTabLink>, and join
the discussion on <NewTabLink href={discordURL}>Discord</NewTabLink>.
</React.Fragment>
);
const etherScan = 'https://etherscan.io';

4
common/containers/TabSection/index.tsx
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { AlphaAgreement, Footer, Header } from 'components';
import { BetaAgreement, Footer, Header } from 'components';
import { AppState } from 'reducers';
import Notifications from './Notifications';
import OfflineTab from './OfflineTab';
@ -31,7 +31,7 @@ class TabSection extends Component<Props, {}> {
<div className="flex-spacer" />
<Footer latestBlock={latestBlock} />
<Notifications />
<AlphaAgreement />
<BetaAgreement />
</div>
);
}

14
common/sass/fonts.scss
View File

@ -65,25 +65,25 @@
font-size: 48px;
}
// Refer to docs for updating icon-fonts
&.sm-logo-facebook:before {
&.sm-logo-medium:before {
content: '\ea02';
}
&.sm-logo-reddit:before {
&.sm-logo-discord:before {
content: '\ea03';
}
&.sm-logo-github:before {
&.sm-logo-linkedin:before {
content: '\ea04';
}
&.sm-logo-twitter:before {
&.sm-logo-reddit:before {
content: '\ea05';
}
&.sm-logo-linkedin:before {
&.sm-logo-facebook:before {
content: '\ea06';
}
&.sm-logo-slack:before {
&.sm-logo-twitter:before {
content: '\ea07';
}
&.sm-logo-medium:before {
&.sm-logo-github:before {
content: '\ea08';
}
}