aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-22 13:20:31 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-26 09:34:07 +0800
commitc31ca4af903ad780f1554d6fba41ee8ead116151 (patch)
tree2b2de25b290b85466d2c7c2b4ab28b3003832c80 /packages/website/ts
parentc7f5e77b3fe7c1805202a5b1e1e1ce1e9d31a6b0 (diff)
downloaddexon-sol-tools-c31ca4af903ad780f1554d6fba41ee8ead116151.tar
dexon-sol-tools-c31ca4af903ad780f1554d6fba41ee8ead116151.tar.gz
dexon-sol-tools-c31ca4af903ad780f1554d6fba41ee8ead116151.tar.bz2
dexon-sol-tools-c31ca4af903ad780f1554d6fba41ee8ead116151.tar.lz
dexon-sol-tools-c31ca4af903ad780f1554d6fba41ee8ead116151.tar.xz
dexon-sol-tools-c31ca4af903ad780f1554d6fba41ee8ead116151.tar.zst
dexon-sol-tools-c31ca4af903ad780f1554d6fba41ee8ead116151.zip
Hide wallet management option and expand component on small screens
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/portal/portal.tsx2
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx36
2 files changed, 23 insertions, 15 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index a03731ec0..0e1506e17 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -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)}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 39e591bac..10ee31619 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -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>
);
}