aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-04 06:15:13 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-09 01:16:08 +0800
commit419b670aa35eb35a767137121b5e594a04793eb7 (patch)
tree07116718298bca8eb84ada472d06726f6a9e3763
parenta44874d2eb1dd9bf721c3d86f65c2e2078210049 (diff)
downloaddexon-sol-tools-419b670aa35eb35a767137121b5e594a04793eb7.tar
dexon-sol-tools-419b670aa35eb35a767137121b5e594a04793eb7.tar.gz
dexon-sol-tools-419b670aa35eb35a767137121b5e594a04793eb7.tar.bz2
dexon-sol-tools-419b670aa35eb35a767137121b5e594a04793eb7.tar.lz
dexon-sol-tools-419b670aa35eb35a767137121b5e594a04793eb7.tar.xz
dexon-sol-tools-419b670aa35eb35a767137121b5e594a04793eb7.tar.zst
dexon-sol-tools-419b670aa35eb35a767137121b5e594a04793eb7.zip
Make wallet scrollable
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx57
1 files changed, 48 insertions, 9 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 068764027..a28012aaf 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -61,6 +61,7 @@ export interface WalletProps {
interface WalletState {
trackedTokenStateByAddress: TokenStateByAddress;
wrappedEtherDirection?: Side;
+ isHoveringSidebar: boolean;
}
interface AllowanceToggleConfig {
@@ -95,6 +96,9 @@ const styles: Styles = {
},
footerItemInnerDiv: {
paddingLeft: 24,
+ borderTopColor: colors.walletBorder,
+ borderTopStyle: 'solid',
+ borderWidth: 1,
},
borderedItem: {
borderBottomColor: colors.walletBorder,
@@ -115,7 +119,17 @@ const styles: Styles = {
paddingTop: 8,
paddingBottom: 8,
},
- accessoryItemsContainer: { width: 150, right: 8 },
+ accessoryItemsContainer: {
+ width: 150,
+ right: 8,
+ },
+ bodyInnerDiv: {
+ padding: 0,
+ // TODO: make this completely responsive
+ maxHeight: 475,
+ overflow: 'auto',
+ WebkitOverflowScrolling: 'touch',
+ },
};
const ETHER_ICON_PATH = '/images/ether.png';
@@ -140,6 +154,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
this.state = {
trackedTokenStateByAddress: initialTrackedTokenStateByAddress,
wrappedEtherDirection: undefined,
+ isHoveringSidebar: false,
};
}
public componentWillMount() {
@@ -185,12 +200,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
return (
<List style={styles.list}>
{isAddressAvailable
- ? _.concat(
- this._renderConnectedHeaderRows(),
- this._renderEthRows(),
- this._renderTokenRows(),
- this._renderFooterRows(),
- )
+ ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows())
: _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())}
</List>
);
@@ -231,6 +241,33 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
/>
);
}
+ private _renderBody() {
+ const bodyStyle: React.CSSProperties = {
+ ...styles.bodyInnerDiv,
+ overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
+ };
+ return (
+ <ListItem
+ key="body"
+ innerDivStyle={bodyStyle}
+ onMouseEnter={this._onSidebarHover.bind(this)}
+ onMouseLeave={this._onSidebarHoverOff.bind(this)}
+ >
+ {this._renderEthRows()}
+ {this._renderTokenRows()}
+ </ListItem>
+ );
+ }
+ private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) {
+ this.setState({
+ isHoveringSidebar: true,
+ });
+ }
+ private _onSidebarHoverOff() {
+ this.setState({
+ isHoveringSidebar: false,
+ });
+ }
private _renderFooterRows() {
const primaryText = '+ other tokens';
return (
@@ -301,7 +338,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
);
return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
}
- private _renderTokenRow(token: Token) {
+ private _renderTokenRow(token: Token, index: number) {
const tokenState = this.state.trackedTokenStateByAddress[token.address];
const tokenLink = sharedUtils.getEtherScanLinkIfExists(
token.address,
@@ -318,12 +355,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
tokenState,
},
};
+ // if this is the last item in the list, do not render the border, it is rendered by the footer
+ const borderedStyle = index !== this.props.trackedTokens.length - 1 ? styles.borderedItem : {};
const shouldShowWrapEtherItem =
!_.isUndefined(this.state.wrappedEtherDirection) &&
this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection;
const style = shouldShowWrapEtherItem
? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
- : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
+ : { ...styles.tokenItem, ...borderedStyle, ...styles.paddedItem };
const etherToken = this._getEthToken();
return (
<div key={token.address}>