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

Always show the wrap ether row in between ETH and WETH

Browse Source
This commit is contained in:
Brandon Millman
2018-07-02 16:52:20 -07:00
parent 2eede4a09e
commit 73d8a2adf7
2 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -320,8 +320,24 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
!_.isUndefined(this.props.userEtherBalanceInWei);
const etherToken = this._getEthToken();
const wrapEtherItem = shouldShowWrapEtherItem ? (
<WrapEtherItem
userAddress={this.props.userAddress}
networkId={this.props.networkId}
blockchain={this.props.blockchain}
dispatcher={this.props.dispatcher}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
direction={accessoryItemConfig.wrappedEtherDirection}
etherToken={etherToken}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
// tslint:disable:jsx-no-lambda
refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
/>
) : null;
return (
<div id={key} key={key} className={`flex flex-column ${className || ''}`}>
{this.state.wrappedEtherDirection === Side.Receive && wrapEtherItem}
<StandardIconRow
icon={icon}
main={
@@ -331,23 +347,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
</div>
}
accessory={this._renderAccessoryItems(accessoryItemConfig)}
backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined}
/>
{shouldShowWrapEtherItem && (
<WrapEtherItem
userAddress={this.props.userAddress}
networkId={this.props.networkId}
blockchain={this.props.blockchain}
dispatcher={this.props.dispatcher}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
direction={accessoryItemConfig.wrappedEtherDirection}
etherToken={etherToken}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
// tslint:disable:jsx-no-lambda
refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
/>
)}
{this.state.wrappedEtherDirection === Side.Deposit && wrapEtherItem}
</div>
);
}

5
packages/website/ts/components/wallet/wrap_ether_item.tsx
View File

@@ -8,6 +8,7 @@ import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
import { Container } from 'ts/components/ui/container';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
import { BlockchainCallErrs, Side, Token } from 'ts/types';
@@ -94,7 +95,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
return (
<div className="flex" style={{ backgroundColor: colors.walletFocusedItemBackground }}>
<Container className="flex" backgroundColor={colors.walletFocusedItemBackground} paddingTop="25px">
<div>{this._renderIsEthConversionHappeningSpinner()} </div>
<div className="flex flex-column">
<div style={styles.topLabel}>{topLabelText}</div>
@@ -142,7 +143,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
{this._renderErrorMsg()}
</div>
</div>
</Container>
);
}
private _onValueChange(_isValid: boolean, amount?: BigNumber): void {