Merge branch 'development' into feature/website/top-bar-redesign
* development: Remove overflowZ property from portal Fix typo Only show untracked tokens Make wallet scrollable Add token flow
This commit is contained in:
Brandon Millman
commit
e01a4fcbb4
@ -154,7 +154,6 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta
|
||||
const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
|
||||
this.props.dispatcher,
|
||||
);
|
||||
const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT;
|
||||
const portalStyle: React.CSSProperties = {
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
@ -204,18 +203,6 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta
|
||||
<div className="py2" style={{ backgroundColor: colors.grey50 }}>
|
||||
{this.props.blockchainIsLoaded ? (
|
||||
<Switch>
|
||||
{isDevelopment && (
|
||||
<Route
|
||||
path={`${WebsitePaths.Portal}/wallet`}
|
||||
render={this._renderWallet.bind(this)}
|
||||
/>
|
||||
)}
|
||||
{isDevelopment && (
|
||||
<Route
|
||||
path={`${WebsitePaths.Portal}/relayers`}
|
||||
render={this._renderRelayers.bind(this)}
|
||||
/>
|
||||
)}
|
||||
<Route
|
||||
path={`${WebsitePaths.Portal}/weth`}
|
||||
render={this._renderEthWrapper.bind(this)}
|
||||
@ -294,40 +281,6 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta
|
||||
isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
|
||||
});
|
||||
}
|
||||
private _renderWallet() {
|
||||
const allTokens = _.values(this.props.tokenByAddress);
|
||||
const trackedTokens = _.filter(allTokens, t => t.isTracked);
|
||||
return (
|
||||
<div className="flex flex-center">
|
||||
<div className="mx-auto">
|
||||
<Wallet
|
||||
userAddress={this.props.userAddress}
|
||||
networkId={this.props.networkId}
|
||||
blockchain={this._blockchain}
|
||||
blockchainIsLoaded={this.props.blockchainIsLoaded}
|
||||
blockchainErr={this.props.blockchainErr}
|
||||
dispatcher={this.props.dispatcher}
|
||||
tokenByAddress={this.props.tokenByAddress}
|
||||
trackedTokens={trackedTokens}
|
||||
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
|
||||
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
|
||||
injectedProviderName={this.props.injectedProviderName}
|
||||
providerType={this.props.providerType}
|
||||
onToggleLedgerDialog={this.onToggleLedgerDialog.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _renderRelayers() {
|
||||
return (
|
||||
<div className="flex flex-center">
|
||||
<div className="mx-auto" style={{ width: 800 }}>
|
||||
<RelayerIndex networkId={this.props.networkId} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _renderEthWrapper() {
|
||||
return (
|
||||
<EthWrappers
|
||||
|
||||
@ -58,26 +58,6 @@ export class LegacyPortalMenu extends React.Component<LegacyPortalMenuProps, Leg
|
||||
>
|
||||
{this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
|
||||
</MenuItem>
|
||||
{configs.ENVIRONMENT === Environments.DEVELOPMENT && (
|
||||
<div>
|
||||
<MenuItem
|
||||
style={this.props.menuItemStyle}
|
||||
className="py2"
|
||||
to={`${WebsitePaths.Portal}/wallet`}
|
||||
onClick={this.props.onClick.bind(this)}
|
||||
>
|
||||
{this._renderMenuItemWithIcon('Wallet', 'zmdi-balance-wallet')}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
style={this.props.menuItemStyle}
|
||||
className="py2"
|
||||
to={`${WebsitePaths.Portal}/relayers`}
|
||||
onClick={this.props.onClick.bind(this)}
|
||||
>
|
||||
{this._renderMenuItemWithIcon('Relayers', 'zmdi-input-antenna')}
|
||||
</MenuItem>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,13 +8,14 @@ import { Blockchain } from 'ts/blockchain';
|
||||
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
|
||||
import { LedgerConfigDialog } from 'ts/components/dialogs/ledger_config_dialog';
|
||||
import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_dialog';
|
||||
import { AssetPicker } from 'ts/components/generate_order/asset_picker';
|
||||
import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
|
||||
import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
|
||||
import { FlashMessage } from 'ts/components/ui/flash_message';
|
||||
import { Wallet } from 'ts/components/wallet/wallet';
|
||||
import { localStorage } from 'ts/local_storage/local_storage';
|
||||
import { Dispatcher } from 'ts/redux/dispatcher';
|
||||
import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress } from 'ts/types';
|
||||
import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, TokenVisibility } from 'ts/types';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
import { utils } from 'ts/utils/utils';
|
||||
@ -48,6 +49,7 @@ interface PortalState {
|
||||
prevPathname: string;
|
||||
isDisclaimerDialogOpen: boolean;
|
||||
isLedgerDialogOpen: boolean;
|
||||
isAssetPickerDialogOpen: boolean;
|
||||
}
|
||||
|
||||
const THROTTLE_TIMEOUT = 100;
|
||||
@ -88,6 +90,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
|
||||
prevUserAddress: this.props.userAddress,
|
||||
prevPathname: this.props.location.pathname,
|
||||
isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
|
||||
isAssetPickerDialogOpen: false,
|
||||
isLedgerDialogOpen: false,
|
||||
};
|
||||
}
|
||||
@ -104,7 +107,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
|
||||
// We re-set the entire redux state when the portal is unmounted so that when it is re-rendered
|
||||
// the initialization process always occurs from the same base state. This helps avoid
|
||||
// initialization inconsistencies (i.e While the portal was unrendered, the user might have
|
||||
// become disconnected from their backing Ethereum node, changes user accounts, etc...)
|
||||
// become disconnected from their backing Ethereum node, changed user accounts, etc...)
|
||||
this.props.dispatcher.resetState();
|
||||
}
|
||||
public componentWillReceiveProps(nextProps: PortalProps) {
|
||||
@ -176,6 +179,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
|
||||
injectedProviderName={this.props.injectedProviderName}
|
||||
providerType={this.props.providerType}
|
||||
onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
|
||||
onAddToken={this._onAddToken.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-auto px3" style={styles.scrollContainer}>
|
||||
@ -208,15 +212,44 @@ export class Portal extends React.Component<PortalProps, PortalState> {
|
||||
isOpen={this.state.isLedgerDialogOpen}
|
||||
/>
|
||||
)}
|
||||
<AssetPicker
|
||||
userAddress={this.props.userAddress}
|
||||
networkId={this.props.networkId}
|
||||
blockchain={this._blockchain}
|
||||
dispatcher={this.props.dispatcher}
|
||||
isOpen={this.state.isAssetPickerDialogOpen}
|
||||
currentTokenAddress={''}
|
||||
onTokenChosen={this._onTokenChosen.bind(this)}
|
||||
tokenByAddress={this.props.tokenByAddress}
|
||||
tokenVisibility={TokenVisibility.UNTRACKED}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _onTokenChosen(tokenAddress: string) {
|
||||
if (_.isEmpty(tokenAddress)) {
|
||||
this.setState({
|
||||
isAssetPickerDialogOpen: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const token = this.props.tokenByAddress[tokenAddress];
|
||||
this.props.dispatcher.updateTokenByAddress([token]);
|
||||
this.setState({
|
||||
isAssetPickerDialogOpen: false,
|
||||
});
|
||||
}
|
||||
private _onToggleLedgerDialog() {
|
||||
this.setState({
|
||||
isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
|
||||
});
|
||||
}
|
||||
private _onAddToken() {
|
||||
this.setState({
|
||||
isAssetPickerDialogOpen: !this.state.isAssetPickerDialogOpen,
|
||||
});
|
||||
}
|
||||
private _onPortalDisclaimerAccepted() {
|
||||
localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
|
||||
this.setState({
|
||||
|
||||
@ -55,11 +55,13 @@ export interface WalletProps {
|
||||
injectedProviderName: string;
|
||||
providerType: ProviderType;
|
||||
onToggleLedgerDialog: () => void;
|
||||
onAddToken: () => void;
|
||||
}
|
||||
|
||||
interface WalletState {
|
||||
trackedTokenStateByAddress: TokenStateByAddress;
|
||||
wrappedEtherDirection?: Side;
|
||||
isHoveringSidebar: boolean;
|
||||
}
|
||||
|
||||
interface AllowanceToggleConfig {
|
||||
@ -94,6 +96,9 @@ const styles: Styles = {
|
||||
},
|
||||
footerItemInnerDiv: {
|
||||
paddingLeft: 24,
|
||||
borderTopColor: colors.walletBorder,
|
||||
borderTopStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
},
|
||||
borderedItem: {
|
||||
borderBottomColor: colors.walletBorder,
|
||||
@ -114,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';
|
||||
@ -139,6 +154,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
|
||||
this.state = {
|
||||
trackedTokenStateByAddress: initialTrackedTokenStateByAddress,
|
||||
wrappedEtherDirection: undefined,
|
||||
isHoveringSidebar: false,
|
||||
};
|
||||
}
|
||||
public componentWillMount() {
|
||||
@ -184,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>
|
||||
);
|
||||
@ -230,9 +241,43 @@ 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 <ListItem key={FOOTER_ITEM_KEY} primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />;
|
||||
return (
|
||||
<ListItem
|
||||
key={FOOTER_ITEM_KEY}
|
||||
primaryText={primaryText}
|
||||
innerDivStyle={styles.footerItemInnerDiv}
|
||||
onClick={this.props.onAddToken}
|
||||
/>
|
||||
);
|
||||
}
|
||||
private _renderEthRows() {
|
||||
const primaryText = this._renderAmount(
|
||||
@ -293,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,
|
||||
@ -310,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}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user