crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide wallet management option and expand component on small screens

Browse Source
This commit is contained in:
Brandon Millman
2018-05-21 22:20:31 -07:00
parent c7f5e77b3f
commit c31ca4af90
2 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/ts/components/portal/portal.tsx
View File

@@ -296,6 +296,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
injectedProviderName={this.props.injectedProviderName}
providerType={this.props.providerType}
screenWidth={this.props.screenWidth}
location={this.props.location}
onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
onAddToken={this._onAddToken.bind(this)}
onRemoveToken={this._onRemoveToken.bind(this)}

36
packages/website/ts/components/wallet/wallet.tsx
View File

@@ -35,6 +35,7 @@ import {
BlockchainErrs,
ItemByAddress,
ProviderType,
ScreenWidths,
Side,
Token,
TokenByAddress,
@@ -61,6 +62,8 @@ export interface WalletProps {
lastForceTokenStateRefetch: number;
injectedProviderName: string;
providerType: ProviderType;
screenWidth: ScreenWidths;
location: Location;
onToggleLedgerDialog: () => void;
onAddToken: () => void;
onRemoveToken: () => void;
@@ -116,8 +119,6 @@ const styles: Styles = {
paddingBottom: 8,
},
bodyInnerDiv: {
// TODO: make this completely responsive
maxHeight: 475,
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
},
@@ -140,6 +141,7 @@ const DISCONNECTED_ITEM_KEY = 'DISCONNECTED';
const ETHER_ITEM_KEY = 'ETHER';
const USD_DECIMAL_PLACES = 2;
const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
export class Wallet extends React.Component<WalletProps, WalletState> {
private _isUnmounted: boolean;
@@ -226,7 +228,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const userAddress = this.props.userAddress;
const primaryText = utils.getAddressBeginAndEnd(userAddress);
return (
<Link key={HEADER_ITEM_KEY} to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
<Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
<ListItem
primaryText={primaryText}
leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
@@ -240,6 +242,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const bodyStyle: React.CSSProperties = {
...styles.bodyInnerDiv,
overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
// TODO: make this completely responsive
maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined,
};
return (
<div
@@ -296,18 +300,20 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
innerDivStyle={styles.footerItemInnerDiv}
style={styles.borderedItem}
/>
<Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
<ListItem
primaryText={
<div className="flex right" style={styles.manageYourWalletText}>
{'manage your wallet'}
</div>
// https://github.com/palantir/tslint-react/issues/140
// tslint:disable-next-line:jsx-curly-spacing
}
style={{ ...styles.paddedItem, ...styles.borderedItem }}
/>
</Link>
{this.props.location.pathname !== ACCOUNT_PATH && (
<Link to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
<ListItem
primaryText={
<div className="flex right" style={styles.manageYourWalletText}>
{'manage your wallet'}
</div>
// https://github.com/palantir/tslint-react/issues/140
// tslint:disable-next-line:jsx-curly-spacing
}
style={{ ...styles.paddedItem, ...styles.borderedItem }}
/>
</Link>
)}
</div>
);
}