aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-07-24 13:43:26 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-07-24 13:43:26 +0800
commite49d136b99cea375052c7278c0bca0df6524d2d8 (patch)
treed9ef67f50cfa860fd5da76b686aca2a7578f1d27 /packages/website/ts/components
parent6ffa907f0ef3c94d3ea7d79d99a24939f62e0eb8 (diff)
parenta05b14e4d9659be1cc495ee33fd8962ce773f87f (diff)
downloaddexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar
dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.gz
dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.bz2
dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.lz
dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.xz
dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.zst
dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.zip
Merge branch 'v2-prototype' into feature/website/jobs-page-part2
* v2-prototype: (38 commits) Revert "Publish" Publish Remove ERC721 callback functions Use != instead of > in loops, add sanity checks to market fill functions Add more tests and fixes Remove MConstants and MixinConstants for LibConstants Remove redundant external call by reimplementing fillOrderNoThrow Remove orders length check Add assertValidFillResults Update web3Wrapper CHANGELOG Get actual gasPrice from transaction instead of setting default Store orders length in varible before looping over orders Use transferFrom instead of safeTransferFrom Fix minimal tests Fix rounding error issues, use different logic when makerAsset is ZRX Rename marketSellEth => marketSellWeth Update percentage constants Update transferEthFeeAndRefund, add check to ERC721 transfer Refactor forwarding contract architecture, remove batch functions Updated CHANGELOGS ...
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx6
-rw-r--r--packages/website/ts/components/dialogs/send_dialog.tsx40
-rw-r--r--packages/website/ts/components/flash_messages/asset_send_completed.tsx (renamed from packages/website/ts/components/flash_messages/token_send_completed.tsx)14
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx3
-rw-r--r--packages/website/ts/components/send_button.tsx14
-rw-r--r--packages/website/ts/components/token_balances.tsx23
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx8
7 files changed, 63 insertions, 45 deletions
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index 7b09cc92c..5f4bf8519 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,15 +1,13 @@
import { colors } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
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 { EthAmountInput } from 'ts/containers/inputs/eth_amount_input';
import { Side, Token } from 'ts/types';
-import { constants } from 'ts/utils/constants';
interface EthWethConversionDialogProps {
blockchain: Blockchain;
@@ -78,7 +76,6 @@ export class EthWethConversionDialog extends React.Component<
? 'Convert your Ether into a tokenized, tradable form.'
: "Convert your Wrapped Ether back into it's native form.";
const isWrappedVersion = this.props.direction === Side.Receive;
- const etherBalanceInEth = Web3Wrapper.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH);
return (
<div>
<div className="pb2">{explanation}</div>
@@ -106,7 +103,6 @@ export class EthWethConversionDialog extends React.Component<
/>
) : (
<EthAmountInput
- balance={etherBalanceInEth}
amount={this.state.value}
onChange={this._onValueChange.bind(this)}
shouldCheckBalance={true}
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index 8a98fdf69..c1179dbd0 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { AddressInput } from 'ts/components/inputs/address_input';
import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { EthAmountInput } from 'ts/containers/inputs/eth_amount_input';
import { Token } from 'ts/types';
interface SendDialogProps {
@@ -15,7 +16,7 @@ interface SendDialogProps {
onComplete: (recipient: string, value: BigNumber) => void;
onCancelled: () => void;
isOpen: boolean;
- token: Token;
+ asset: Token | 'ETH';
lastForceTokenStateRefetch: number;
}
@@ -58,23 +59,23 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
);
}
private _renderSendDialogBody(): React.ReactNode {
- return (
- <div className="mx-auto" style={{ maxWidth: 300 }}>
- <div style={{ height: 80 }}>
- <AddressInput
- initialAddress={this.state.recipient}
- updateAddress={this._onRecipientChange.bind(this)}
- isRequired={true}
- label={'Recipient address'}
- hintText={'Address'}
- />
- </div>
+ const input =
+ this.props.asset === 'ETH' ? (
+ <EthAmountInput
+ label="Amount to send"
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ shouldCheckBalance={true}
+ shouldShowErrs={true}
+ onChange={this._onValueChange.bind(this)}
+ amount={this.state.value}
+ />
+ ) : (
<TokenAmountInput
blockchain={this.props.blockchain}
userAddress={this.props.userAddress}
networkId={this.props.networkId}
label="Amount to send"
- token={this.props.token}
+ token={this.props.asset}
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
shouldCheckBalance={true}
shouldCheckAllowance={false}
@@ -82,6 +83,19 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
amount={this.state.value}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
/>
+ );
+ return (
+ <div className="mx-auto" style={{ maxWidth: 300 }}>
+ <div style={{ height: 80 }}>
+ <AddressInput
+ initialAddress={this.state.recipient}
+ updateAddress={this._onRecipientChange.bind(this)}
+ isRequired={true}
+ label="Recipient address'"
+ hintText="Address"
+ />
+ </div>
+ {input}
</div>
);
}
diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx
index f3f1ea2fc..f76e05fe1 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx
@@ -3,30 +3,30 @@ import { BigNumber } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
-import { Token } from 'ts/types';
import { utils } from 'ts/utils/utils';
-interface TokenSendCompletedProps {
+interface AssetSendCompletedProps {
etherScanLinkIfExists?: string;
- token: Token;
toAddress: string;
amountInBaseUnits: BigNumber;
+ decimals: number;
+ symbol: string;
}
-interface TokenSendCompletedState {}
+interface AssetSendCompletedState {}
-export class TokenSendCompleted extends React.Component<TokenSendCompletedProps, TokenSendCompletedState> {
+export class AssetSendCompleted extends React.Component<AssetSendCompletedProps, AssetSendCompletedState> {
public render(): React.ReactNode {
const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) && (
<a style={{ color: colors.white }} href={`${this.props.etherScanLinkIfExists}`} target="_blank">
Verify on Etherscan
</a>
);
- const amountInUnits = Web3Wrapper.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals);
+ const amountInUnits = Web3Wrapper.toUnitAmount(this.props.amountInBaseUnits, this.props.decimals);
const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress);
return (
<div>
- {`Sent ${amountInUnits} ${this.props.token.symbol} to ${truncatedAddress}: `}
+ {`Sent ${amountInUnits} ${this.props.symbol} to ${truncatedAddress}: `}
{etherScanLink}
</div>
);
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index 552d4277a..3a7905442 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -28,14 +28,13 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
public static defaultProps: Partial<EthAmountInputProps> = {
shouldShowErrs: true,
shouldShowUnderline: true,
- style: { height: 63 },
};
public render(): React.ReactNode {
const amount = this.props.amount
? Web3Wrapper.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
: undefined;
return (
- <div className="flex overflow-hidden" style={this.props.style}>
+ <div className="flex" style={this.props.style}>
<BalanceBoundedInput
label={this.props.label}
balance={this.props.balance}
diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx
index ac55d430b..107983dee 100644
--- a/packages/website/ts/components/send_button.tsx
+++ b/packages/website/ts/components/send_button.tsx
@@ -12,7 +12,7 @@ import { utils } from 'ts/utils/utils';
interface SendButtonProps {
userAddress: string;
networkId: number;
- token: Token;
+ asset: Token | 'ETH';
dispatcher: Dispatcher;
blockchain: Blockchain;
onError: () => void;
@@ -51,7 +51,7 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState
isOpen={this.state.isSendDialogVisible}
onComplete={this._onSendAmountSelectedAsync.bind(this)}
onCancelled={this._toggleSendDialog.bind(this)}
- token={this.props.token}
+ asset={this.props.asset}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
/>
</div>
@@ -67,10 +67,14 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState
isSending: true,
});
this._toggleSendDialog();
- const token = this.props.token;
try {
- await this.props.blockchain.transferAsync(token, recipient, value);
- await this.props.refetchTokenStateAsync(token.address);
+ if (this.props.asset === 'ETH') {
+ await this.props.blockchain.sendAsync(recipient, value);
+ } else {
+ const token = this.props.asset;
+ await this.props.blockchain.transferAsync(token, recipient, value);
+ await this.props.refetchTokenStateAsync(token.address);
+ }
} catch (err) {
const errMsg = `${err}`;
if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index c8d80702b..550438e76 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -204,11 +204,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
<TableHeaderColumn>Currency</TableHeaderColumn>
<TableHeaderColumn>Balance</TableHeaderColumn>
<TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} />
- {isTestNetwork && (
- <TableHeaderColumn style={{ paddingLeft: 3 }}>
- {isSmallScreen ? 'Faucet' : 'Request from faucet'}
- </TableHeaderColumn>
- )}
+ {isTestNetwork && <TableHeaderColumn style={{ paddingLeft: 3 }}>Action</TableHeaderColumn>}
+ <TableHeaderColumn>Send</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
@@ -235,6 +232,20 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
/>
</TableRowColumn>
)}
+ <TableRowColumn>
+ <SendButton
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ blockchain={this.props.blockchain}
+ dispatcher={this.props.dispatcher}
+ asset="ETH"
+ onError={this._onSendFailed.bind(this)}
+ lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+ // This is not necessary for ETH.
+ // tslint:disable:jsx-no-lambda
+ refetchTokenStateAsync={() => undefined}
+ />
+ </TableRowColumn>
</TableRow>
</TableBody>
</Table>
@@ -402,7 +413,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
networkId={this.props.networkId}
blockchain={this.props.blockchain}
dispatcher={this.props.dispatcher}
- token={token}
+ asset={token}
onError={this._onSendFailed.bind(this)}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, token.address)}
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index fcab5d1dd..54ace7ae2 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -6,9 +6,9 @@ import FlatButton from 'material-ui/FlatButton';
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 { EthAmountInput } from 'ts/containers/inputs/eth_amount_input';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
import { BlockchainCallErrs, Side, Token } from 'ts/types';
@@ -87,13 +87,8 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
};
}
public render(): React.ReactNode {
- const etherBalanceInEth = Web3Wrapper.toUnitAmount(
- this.props.userEtherBalanceInWei,
- constants.DECIMAL_PLACES_ETH,
- );
const isWrappingEth = this.props.direction === Side.Deposit;
const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
-
return (
<Container className="flex" backgroundColor={colors.walletFocusedItemBackground} paddingTop="25px">
<div>{this._renderIsEthConversionHappeningSpinner()} </div>
@@ -103,7 +98,6 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
<div style={styles.inputContainer}>
{isWrappingEth ? (
<EthAmountInput
- balance={etherBalanceInEth}
amount={this.state.currentInputAmount}
hintText="0.00"
onChange={this._onValueChange.bind(this)}