Skip to content

Commit

Permalink
Merge pull request #292 from LiskHQ/137-send-to-address
Browse files Browse the repository at this point in the history
Add "send to this address" - Closes #137
  • Loading branch information
gina contrino authored Feb 9, 2018
2 parents a91ee84 + 74c52b0 commit 46b50c4
Show file tree
Hide file tree
Showing 17 changed files with 354 additions and 54 deletions.
1 change: 1 addition & 0 deletions i18n/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@
"Send Lisk from Blockchain Application": "Send Lisk from Blockchain Application",
"Send Lisk to Blockchain Application": "Send Lisk to Blockchain Application",
"Send to Address": "Send to Address",
"Send to this address": "Send to this address",
"Sender": "Sender",
"Settings": "Settings",
"Show passphrase": "Show passphrase",
Expand Down
4 changes: 4 additions & 0 deletions src/components/accountTransactions/accountTransactions.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@

.wrapper {
min-width: 100%;

& .sendTo {
width: 100%;
}
}

@media (--xLarge-viewport) {
Expand Down
10 changes: 7 additions & 3 deletions src/components/accountTransactions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { translate } from 'react-i18next';
import grid from 'flexboxgrid/dist/flexboxgrid.css';
import { transactionsRequestInit } from '../../actions/transactions';
import Transactions from './../transactions';
import Send from '../send';
import SendTo from '../sendTo';
import styles from './accountTransactions.css';

class accountTransactions extends React.Component {
Expand All @@ -17,8 +17,12 @@ class accountTransactions extends React.Component {
// eslint-disable-next-line class-methods-use-this
render() {
return <div className={`${grid.row} ${styles.wrapper}`}>
<div className={`${grid['col-md-4']} ${styles.gridPadding}`}>
<Send/>
<div className={`${grid['col-md-4']} ${styles.gridPadding} ${styles.sendTo}`}>
<SendTo
balance={this.props.balance}
address={this.props.match.params.address}
t={this.props.t}
/>
</div>
<div className={`${grid['col-sm-12']} ${styles.transactions} ${grid['col-md-8']}`}>
<Transactions
Expand Down
70 changes: 48 additions & 22 deletions src/components/accountVisual/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,28 +160,54 @@ const pickTwo = (chunk, options) => ([
) % options.length],
]);

const AccountVisual = ({ address, size = 200, className }) => {
const addressChunks = address.padStart(21, '0').match(/\d{5}/g);
const gradientScheme = gradientSchemes[addressChunks[0].substr(1, 2) % gradientSchemes.length];
const primaryGradients = pickTwo(addressChunks[1], gradientScheme.primary);
const secondaryGradients = pickTwo(addressChunks[2], gradientScheme.secondary);
const shapes = [
getBackgroundCircle(size, primaryGradients[0]),
getShape(addressChunks[1], size, primaryGradients[1], 1),
getShape(addressChunks[2], size, secondaryGradients[0], 0.23),
getShape(addressChunks[3], size, secondaryGradients[1], 0.18),
];
class AccountVisual extends React.Component {
constructor(props) {
super(props);
this.state = { isMobile: window.innerWidth < 1024 };
}

return (
<div style={{ height: size, width: size }} className={`${styles.wrapper} ${className}`}>
<svg height={size} width={size} className={styles.accountVisual}>
<Gradients scheme={gradientScheme}/>
{shapes.map((shape, i) => (
<shape.component {...shape.props} key={i} />
))}
</svg>
</div>
);
};
shouldComponentUpdate(nextProps, state) {
return this.state.isMobile !== state.isMobile;
}

resizeWindow() {
this.setState({ isMobile: window.innerWidth < 1024 });
}

componentDidMount() {
window.addEventListener('resize', this.resizeWindow.bind(this));
}

componentWillUnmount() {
window.removeEventListener('resize', this.resizeWindow.bind(this));
}

render() {
const { address, size, mobileSize, className } = this.props;
const desktopSize = size || 200;
const newSize = this.state.isMobile && mobileSize ? mobileSize : desktopSize;

const addressChunks = address.padStart(21, '0').match(/\d{5}/g);
const gradientScheme = gradientSchemes[addressChunks[0].substr(1, 2) % gradientSchemes.length];
const primaryGradients = pickTwo(addressChunks[1], gradientScheme.primary);
const secondaryGradients = pickTwo(addressChunks[2], gradientScheme.secondary);
const shapes = [
getBackgroundCircle(newSize, primaryGradients[0]),
getShape(addressChunks[1], newSize, primaryGradients[1], 1),
getShape(addressChunks[2], newSize, secondaryGradients[0], 0.23),
getShape(addressChunks[3], newSize, secondaryGradients[1], 0.18),
];
return (
<div style={{ height: newSize, width: newSize }} className={`${styles.wrapper} ${className}`}>
<svg height={newSize} width={newSize} className={styles.accountVisual}>
<Gradients scheme={gradientScheme}/>
{shapes.map((shape, i) => (
<shape.component {...shape.props} key={i}/>
))}
</svg>
</div>
);
}
}

export default AccountVisual;
3 changes: 1 addition & 2 deletions src/components/app/variables.css
Original file line number Diff line number Diff line change
Expand Up @@ -108,12 +108,11 @@ or "warn/action" ineastd of "red/green"
--color-action-medium-2: #004aff;
--color-link: #0077bd;
--color-tertiary-medium: #17499b;
--gradient-theme: linear-gradient(27deg, #17499b 0%, var(--color-grayscale-light) 100%);
--gradient-theme: linear-gradient(27deg, var(--color-tertiary-medium) 0%, var(--color-grayscale-light) 100%);
--gradient-action-orange: linear-gradient(-27deg, var(--color-action-dark) 0%, var(--color-action-light) 100%);
--gradient-action-blue: linear-gradient(44deg, var(--color-action-medium-2) 1%, var(--color-action-light-2) 98%);
--gradient-greyscale: linear-gradient(to right, var(--row-background-color), #f5f8fc);
--gradient-greyscale-mobile: linear-gradient(to right, var(--color-grayscale-mobile-background), var(--color-grayscale-darker-mobile-background));
--gradient-secondary: linear-gradient(45deg, #17499b 0%, var(--color-primary-medium) 100%);
--gradient-tertiary: linear-gradient(45deg, var(--color-tertiary-medium) 0%, var(--color-primary-medium) 100%);

/*************************
Expand Down
5 changes: 5 additions & 0 deletions src/components/header/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,11 @@
display: inline-block;
}

.rightSide {
display: inline-block;
width: 32vw; /* stylelint-disable-line */
}

.account {
position: relative;
height: 80px;
Expand Down
19 changes: 1 addition & 18 deletions src/components/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,6 @@ import RelativeLink from '../relativeLink';
import routes from './../../constants/routes';

class Header extends React.Component {
constructor(props) {
super(props);
this.state = { isMobile: window.innerWidth < 1024 };
}

shouldShowActionButton() {
return !this.props.isAuthenticated &&
this.props.location.pathname !== routes.login.url &&
Expand All @@ -32,18 +27,6 @@ class Header extends React.Component {
return this.props.location.pathname.includes('explorer') && !this.props.location.pathname.includes(routes.search.long);
}

resizeWindow() {
this.setState({ isMobile: window.innerWidth < 1024 });
}

componentDidMount() {
window.addEventListener('resize', this.resizeWindow.bind(this));
}

componentWillUnmount() {
window.removeEventListener('resize', this.resizeWindow.bind(this));
}

render() {
return (
<header className={`${styles.wrapper} mainHeader`}>
Expand Down Expand Up @@ -84,7 +67,7 @@ class Header extends React.Component {
<RelativeLink to='saved-accounts' className={styles.avatar}>
<AccountVisual
address={this.props.account.address}
size={this.state.isMobile ? 40 : 69}
size={69} mobileSize={40}
/>
</RelativeLink>
<div className={styles.menu}>
Expand Down
73 changes: 73 additions & 0 deletions src/components/sendTo/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react';
import { Link } from 'react-router-dom';
import grid from 'flexboxgrid/dist/flexboxgrid.css';
import { TertiaryButton } from './../toolbox/buttons/button';
import { FontIcon } from '../fontIcon';
import Box from '../box';
import LiskAmount from '../liskAmount';
import AccountVisual from '../accountVisual';
import CopyToClipboard from '../copyToClipboard';
import routes from './../../constants/routes';
import styles from './sendTo.css';

class SendTo extends React.Component {
shouldComponentUpdate(nextProps) {
return nextProps.address !== this.props.address;
}

render() {
return (<Box className={`${styles.wrapper} ${grid.row}`}>
<section className={styles.content}>
<div className={`
${grid['col-xs-12']}
${grid['col-sm-6']}
${grid['col-md-12']}
${grid['col-lg-12']}
${grid['middle-sm']}
${grid.row}
`}>
<AccountVisual
address={this.props.address}
className={`
${grid['col-xs-4']}
${grid['col-sm-4']}
${grid['col-md-12']}
${grid['col-lg-12']}
${grid['middle-sm']}
`}
size={144} mobileSize={90}/>
<div className={`${styles.account}
${grid['col-xs-8']}
${grid['col-sm-8']}
${grid['col-md-12']}
${grid['col-lg-12']}
`}>
<h2>
<span>
<LiskAmount val={this.props.balance}/>
</span> <small className={styles.balanceUnit}>LSK</small>
</h2>
<CopyToClipboard value={this.props.address} className={`${styles.address}`} copyClassName={styles.copy} />
</div>
</div>
<div className={`
${grid['col-xs-12']}
${grid['col-sm-6']}
${grid['col-md-12']}
${grid['col-lg-12']}
${grid['middle-sm']}
${styles.sendButton}
`}>
<Link to={`${routes.wallet.long}?address=${this.props.address}`}>
<TertiaryButton className={styles.button} >
<FontIcon value={'send-token'}/> {this.props.t('Send to this address')}
</TertiaryButton>
</Link>
</div>
</section>
</Box>
);
}
}

export default SendTo;
Loading

0 comments on commit 46b50c4

Please sign in to comment.