<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import log from 'loglevel';
import QRCode from 'qrcode.react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import copy from 'copy-to-clipboard';
import { Row, Col } from 'react-flexbox-grid/lib/index';
import { DescriptionList, DescriptionTitle, DescriptionData } from 'elements/dl';
import { link, align, cardSpace, copyIcon } from 'lib/styles';
import { Wei, GASPRICE_ESTIMATE } from 'lib/types';

/**
 * Dialog with action buttons. The actions are passed in as an array of React objects,
 * in this example [FlatButtons](/#/components/flat-button).
 *
 * You can also close this dialog by clicking outside the dialog, or with the 'Esc' key.
 */
class AccountPopupRender extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        }

    }

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    const { account, rates, gasPrice } = this.props;
    const styles = {
        container: {
            display: 'inline',
        },
        closeButton: {
            float: 'right',
            color: 'green',
        },
        openButton: {
            display: 'inline',
            backgroundColor: 'dimgray',
            color: 'white',
        },
        qr: {
            marginLeft: 'auto',
            marginRight: 'auto',
            maxWidth: '90%',
        },
        usageText: {
            color: 'gray',
        },
        usageWarning: {
            color: 'crimson',
            fontSize: '0.9rem',
        },
        accountId: {
            overflow: 'scroll',
            backgroundColor: 'whitesmoke',
            padding: '0.1rem 0.3rem',
            display: 'inline',
            fontSize: '0.8rem', /* to better ensure fit for all screen sizes */
        },
    };

    function copyAccountToClipBoard() {
        copy(account.get('id'));
    }

    return (
        <div style={styles.container}>
        <FlatButton
            label="Add ETC"
            icon={<FontIcon className='fa fa-qrcode' />}
            onTouchTap={this.handleOpen}
            style={styles.openButton} />
        <Dialog
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
            <Row>
                <Col xs={11}>
                    <h1>Add ETC</h1>
                </Col>
                <Col xs={1}>
                    <FlatButton
                      icon={<FontIcon className='fa fa-close' />}
                      primary={true}
                      onTouchTap={this.handleClose}
                      style={styles.closeButton}
                    />
                </Col>
            </Row>
            <Row>
                <Col xs={7}>
                    <p>Top up your wallet with BTC</p>
                    <DescriptionList>
                        {account.get('description') && <div>
        -                            <DescriptionData>{account.get('description')}</DescriptionData>
        -                            </div>}
                        <DescriptionData>
                            <span>
                            <code style={styles.accountId}>
                            {account.get('id')}
                            </code>
                            <FontIcon className='fa fa-clone' onClick={copyAccountToClipBoard} style={copyIcon} />
                            </span>
                        </DescriptionData>
                    </DescriptionList>

                    <p>Exchange Rate</p>
                    <strong>
                        1 ETC ~ {rates.get('btc')} BTC
                    </strong>

                    <p style={styles.usageText}>
                        Share your wallet address and use it to top up your wallet with BTC from any
                        &nbsp;<a href='https://shapeshift.io' >other service</a>. All BTC will be converted to ETC.<commit_msg>cmpnts/popup: link to conversion service should open in new tab<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import log from 'loglevel';
import QRCode from 'qrcode.react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import copy from 'copy-to-clipboard';
import { Row, Col } from 'react-flexbox-grid/lib/index';
import { DescriptionList, DescriptionTitle, DescriptionData } from 'elements/dl';
import { link, align, cardSpace, copyIcon } from 'lib/styles';
import { Wei, GASPRICE_ESTIMATE } from 'lib/types';

/**
 * Dialog with action buttons. The actions are passed in as an array of React objects,
 * in this example [FlatButtons](/#/components/flat-button).
 *
 * You can also close this dialog by clicking outside the dialog, or with the 'Esc' key.
 */
class AccountPopupRender extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        }

    }

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    const { account, rates, gasPrice } = this.props;
    const styles = {
        container: {
            display: 'inline',
        },
        closeButton: {
            float: 'right',
            color: 'green',
        },
        openButton: {
            display: 'inline',
            backgroundColor: 'dimgray',
            color: 'white',
        },
        qr: {
            marginLeft: 'auto',
            marginRight: 'auto',
            maxWidth: '90%',
        },
        usageText: {
            color: 'gray',
        },
        usageWarning: {
            color: 'crimson',
            fontSize: '0.9rem',
        },
        accountId: {
            overflow: 'scroll',
            backgroundColor: 'whitesmoke',
            padding: '0.1rem 0.3rem',
            display: 'inline',
            fontSize: '0.8rem', /* to better ensure fit for all screen sizes */
        },
    };

    function copyAccountToClipBoard() {
        copy(account.get('id'));
    }

    return (
        <div style={styles.container}>
        <FlatButton
            label="Add ETC"
            icon={<FontIcon className='fa fa-qrcode' />}
            onTouchTap={this.handleOpen}
            style={styles.openButton} />
        <Dialog
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
            <Row>
                <Col xs={11}>
                    <h1>Add ETC</h1>
                </Col>
                <Col xs={1}>
                    <FlatButton
                      icon={<FontIcon className='fa fa-close' />}
                      primary={true}
                      onTouchTap={this.handleClose}
                      style={styles.closeButton}
                    />
                </Col>
            </Row>
            <Row>
                <Col xs={7}>
                    <p>Top up your wallet with BTC</p>
                    <DescriptionList>
                        {account.get('description') && <div>
        -                            <DescriptionData>{account.get('description')}</DescriptionData>
        -                            </div>}
                        <DescriptionData>
                            <span>
                            <code style={styles.accountId}>
                            {account.get('id')}
                            </code>
                            <FontIcon className='fa fa-clone' onClick={copyAccountToClipBoard} style={copyIcon} />
                            </span>
                        </DescriptionData>
                    </DescriptionList>

                    <p>Exchange Rate</p>
                    <strong>
                        1 ETC ~ {rates.get('btc')} BTC
                    </strong>

                    <p style={styles.usageText}>
                        Share your wallet address and use it to top up your wallet with BTC from any
                        &nbsp;<a href='https://shapeshift.io' target='_blank' >other service
                        <sup><FontIcon className='fa fa-external-link' style={{fontSize: '0.6rem'}} /></sup>
                        </a>. All BTC will be converted to ETC.
{'fraction_non_alphanumeric': 0.11931557188791915, 'fraction_numerical': 0.004593477262287551, 'mean_word_length': 1.4422321929332587, 'pattern_counts': {'":': 0, '<': 82, '<?xml version=': 0, '>': 86, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1986401', 'n_tokens_mistral': 2325, 'n_tokens_neox': 2228, 'n_words': 566}