Commit 27e37ec3 authored by Luke Schoen's avatar Luke Schoen
Browse files

merge latest from master and fix conflicts but issues

parent 88d49a42
Pipeline #149644 passed with stage
......@@ -48,13 +48,13 @@ class AccountsList extends Component {
return (
<div className='accounts-list'>
<Header
title={<h1>Accounts</h1>}
right={
<Clickable
className='icon -new'
onClick={this.handleCreateAccount}
/>
}
title={<h1>Accounts</h1>}
/>
<div className='window_content'>
......@@ -72,6 +72,7 @@ class AccountsList extends Component {
className='-clickable'
type={accountsInfo[address].type}
name={accountsInfo[address].name || '(no name)'}
screen='accounts'
shortAddress
/>
</li>
......
......@@ -145,7 +145,7 @@ class Sent extends Component {
token
} = this.props;
if (txStatus.confirmed) {
if (txStatus && txStatus.confirmed) {
return (
<a
href={blockscoutTxUrl(
......
......@@ -14,6 +14,18 @@ import withAccount from '../utils/withAccount';
@withRouter
@withAccount
class Tokens extends PureComponent {
state = {
isMenuOpen: false
};
handleMenuClose = () => {
this.setState({ isMenuOpen: false });
};
handleMenuOpen = () => {
this.setState({ isMenuOpen: true });
};
isParitySignerAccount = () => {
const {
account: { type }
......@@ -51,9 +63,11 @@ class Tokens extends PureComponent {
const {
account: { address, name, type }
} = this.props;
const { isMenuOpen } = this.state;
return (
<div className='tokens'>
<div className={isMenuOpen ? 'popup-underlay' : ''} />
<AccountHeader
address={address}
copyAddress
......@@ -69,6 +83,8 @@ class Tokens extends PureComponent {
className='popup-menu-account'
horizontalOffset={1}
menuItems={this.menuItems()}
onClose={this.handleMenuClose}
onOpen={this.handleMenuOpen}
size='small'
trigger={<Clickable className='icon -menu' />}
/>
......
......@@ -52,7 +52,6 @@ class TokenAddress extends Component {
onClick={this.handleClick}
shortAddress={shortAddress}
type={type}
{...this.props}
/>
);
}
......
.account {
display: flex;
display: flex !important;
&.-header {
.account_address {
font-size: 0.7rem;
}
justify-content: center;
width: 16rem;
}
.account_avatar {
......@@ -26,9 +25,7 @@
}
.account_information {
padding-left: 0.325rem;
overflow: hidden;
flex-grow: 1;
padding-left: 0.325rem; /* gap from avatar */
}
.account_change_blockies {
......@@ -41,6 +38,16 @@
color: $black;
font-weight: 500;
margin-bottom: 0.1rem;
/**
* Information component when used with components
* in the header requires more bottom margin than
* where it is used in the AccountList component
*/
&.-header {
margin-top: 0.2rem;
margin-bottom: 0.3rem;
}
}
.account_address {
......
.header-nav {
// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
display: flex;
justify-content: space-between;
padding: 1rem 0.5rem;
position: relative;
overflow: hidden;
flex-direction: row;
height: 3.5rem;
.header-nav_left,
.header-nav_right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2.3rem;
}
.header-nav_left {
padding-left: 0.5rem;
}
.header-nav_right {
padding-right: 0.5rem;
}
.header-nav_title {
align-items: center; /* vertical alignment of titles */
/**
* Push the the area for the right button to the right
* https://stackoverflow.com/a/35270047/3208553
*/
flex-grow: 1;
justify-content: center;
z-index: 2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding: 1rem 0.5rem;
text-align: center;
a,
a:link,
......
.popup-underlay {
background: transparent;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 1899; /* Under the menu popup */
}
.popup-menu-account {
/* Override SUI popup styles so popup does not appear above menu icon */
background: $white !important;
......
......@@ -75,13 +75,13 @@ export class SendStore {
return new Promise((resolve, reject) => {
send$.subscribe(txStatus => {
this.setTxStatus(txStatus);
// When we arrive to the `requested` stage, we accept the request
if (txStatus.requested) {
this.acceptRequest(txStatus.requested, password)
.then(resolve)
.catch(reject);
}
this.setTxStatus(txStatus);
debug('Tx status updated.', txStatus);
}, reject);
});
......@@ -95,11 +95,11 @@ export class SendStore {
return new Promise((resolve, reject) => {
postRaw$(this.tx.rawSigned).subscribe(txStatus => {
this.setTxStatus(txStatus);
if (txStatus.signed) {
this.listenForConfirmations();
resolve();
}
this.setTxStatus(txStatus);
debug('Tx status updated.', txStatus);
}, reject);
});
......
......@@ -4,10 +4,10 @@
// SPDX-License-Identifier: BSD-3-Clause
import BigNumber from 'bignumber.js';
import { combineLatest, Observable, of, fromEvent, merge } from 'rxjs';
import { combineLatest, interval, Observable, fromEvent, merge } from 'rxjs';
import { compose, mapPropsStream } from 'recompose';
import {
delay,
audit,
distinctUntilChanged,
filter,
map,
......@@ -85,36 +85,34 @@ const rpcs$ = isApiConnected$.pipe(
take(1),
switchMap(() =>
combineLatest(
syncStatus$().pipe(
map(syncStatus => {
if (!syncStatus) {
return {
isSync: true
};
}
syncStatus$()
.pipe(
map(syncStatus => {
if (!syncStatus) {
return {
isSync: true
};
}
const { currentBlock, highestBlock, startingBlock } = syncStatus;
const percentage = currentBlock
.minus(startingBlock)
.multipliedBy(100)
.div(highestBlock.minus(startingBlock));
const { currentBlock, highestBlock, startingBlock } = syncStatus;
const percentage = currentBlock
.minus(startingBlock)
.multipliedBy(100)
.div(highestBlock.minus(startingBlock));
return {
isSync: false,
syncPayload: {
currentBlock,
highestBlock,
percentage,
startingBlock
}
};
}),
// Emit "not synced" only if we haven't been synced for over 2 seconds,
// as syncing to new blocks from the top of the chain usually takes ~1s.
// syncStatus$() is distinctUntilChanged, so {isSync: false} will never
// be fired twice in a row.
switchMap(sync => (sync.isSync ? of(sync) : of(sync).pipe(delay(2000))))
),
return {
isSync: false,
syncPayload: {
currentBlock,
highestBlock,
percentage,
startingBlock
}
};
})
// Emit "not synced" only if we haven't been synced for over 2 seconds
)
.pipe(audit(syncStatus => interval(syncStatus.isSync ? 0 : 2000))),
peerCount$().pipe(withoutLoading())
)
),
......
......@@ -23,11 +23,11 @@ const CopyContainer = ({ address, children, ...otherProps }) => (
</ClickToCopy>
);
const CardContents = ({ address, name, shortAddress, type }) => (
const CardContents = ({ address, name, screen, shortAddress, type }) => (
<div className='account'>
<Avatar address={address} type={type} />
<Information>
<Name name={name} />
<Name name={name} screen={screen} />
<Address address={address} shortAddress={shortAddress} />
</Information>
</div>
......@@ -38,6 +38,7 @@ export const AccountCard = ({
copyAddress,
name,
type,
screen,
shortAddress,
...otherProps
}) => (
......@@ -47,6 +48,7 @@ export const AccountCard = ({
<CardContents
address={address}
name={name}
screen={screen}
shortAddress={shortAddress}
type={type}
/>
......@@ -55,6 +57,7 @@ export const AccountCard = ({
<CardContents
address={address}
name={name}
screen={screen}
shortAddress={shortAddress}
type={type}
/>
......@@ -71,5 +74,6 @@ AccountCard.propTypes = {
address: PropTypes.string,
copyAddress: PropTypes.bool,
name: PropTypes.string,
screen: PropTypes.string,
shortAddress: PropTypes.bool
};
......@@ -8,12 +8,16 @@ import PropTypes from 'prop-types';
import { Placeholder } from '../../Placeholder';
export const Name = ({ name, ...otherProps }) => (
<div className='account_name' {...otherProps}>
export const Name = ({ name, screen, ...otherProps }) => (
<div
className={`account_name ${screen !== 'accounts' ? '-header' : ''}`}
{...otherProps}
>
{name || <Placeholder height={18} width={100} />}
</div>
);
Name.propTypes = {
name: PropTypes.string
name: PropTypes.string,
screen: PropTypes.string
};
......@@ -6,7 +6,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Address } from '../AccountCard/Address';
import { Avatar } from '../AccountCard/Avatar';
import { Information } from '../AccountCard/Information';
import { Name } from '../AccountCard/Name';
import { Clickable } from '../Clickable';
import { ClickToCopy } from '../ClickToCopy';
import { Header } from '../Header';
......@@ -36,15 +39,12 @@ export const AccountHeader = ({
address &&
name &&
type && (
<Container address={address}>
<Avatar
address={address}
scale={2}
type={type}
style={{ display: 'inline-block', marginRight: '5px' }}
/>
{name} <br />
<span className='account_address'>{address}</span>
<Container address={address} className='account'>
<Avatar address={address} scale={4} type={type} />
<Information>
<Name name={name} />
<Address address={address} short />
</Information>
</Container>
)
}
......
......@@ -10,11 +10,11 @@ import { Placeholder } from '../Placeholder';
export const Header = ({ left, right, title }) => (
<div className='header-nav'>
<div className='header-nav_left'>{left}</div>
<div className='header-nav_title'>
<div className='header-nav header-nav_left'>{left}</div>
<div className='header-nav header-nav_title'>
{title || <Placeholder height={24} width={150} />}
</div>
<div className='header-nav_right'>{right}</div>
<div className='header-nav header-nav_right'>{right}</div>
</div>
);
......
......@@ -7,8 +7,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Popup as SUIPopup } from 'semantic-ui-react';
export const MenuPopup = ({ menuItems, ...otherProps }) => (
<SUIPopup {...otherProps}>
export const MenuPopup = ({ menuItems, onClose, onOpen, ...otherProps }) => (
<SUIPopup onOpen={onOpen} onClose={onClose} {...otherProps}>
<div className='popup-screen'>
<SUIPopup.Content>
{menuItems &&
......@@ -39,6 +39,8 @@ MenuPopup.propTypes = {
horizontalOffset: PropTypes.number,
menuItems: PropTypes.array.isRequired,
on: PropTypes.string,
onClose: PropTypes.func,
onOpen: PropTypes.func,
size: PropTypes.string,
trigger: PropTypes.node
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment