aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-09-28 19:08:12 +0800
committerFabio Berger <me@fabioberger.com>2018-09-28 19:08:12 +0800
commitba7de7204d29d4004c347190be7a3b8c84951b82 (patch)
tree9dddbd1ded45484a6cb968cdf799bf5ce991477b /packages/website/ts/components
parentf3ad64aa1c2930affbfd074316b5f407580b7523 (diff)
parenta737cfa004ee1dc18be935f61fb9c289ed5623fd (diff)
downloaddexon-0x-contracts-ba7de7204d29d4004c347190be7a3b8c84951b82.tar.gz
dexon-0x-contracts-ba7de7204d29d4004c347190be7a3b8c84951b82.tar.zst
dexon-0x-contracts-ba7de7204d29d4004c347190be7a3b8c84951b82.zip
merge development
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/send_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx2
-rw-r--r--packages/website/ts/components/fill_order.tsx113
-rw-r--r--packages/website/ts/components/fill_order_json.tsx6
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx4
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx4
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx54
-rw-r--r--packages/website/ts/components/inputs/hash_input.tsx28
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx2
-rw-r--r--packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx4
-rw-r--r--packages/website/ts/components/order_json.tsx7
-rw-r--r--packages/website/ts/components/portal/portal.tsx10
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx6
-rw-r--r--packages/website/ts/components/token_balances.tsx20
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx14
-rw-r--r--packages/website/ts/components/ui/button.tsx1
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx2
-rw-r--r--packages/website/ts/components/ui/text.tsx2
-rw-r--r--packages/website/ts/components/ui/typed_text.tsx75
-rw-r--r--packages/website/ts/components/wallet/body_overlay.tsx6
26 files changed, 223 insertions, 157 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index c8e10303f..18c060991 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -22,7 +22,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
key="blockchainErrOk"
label="Ok"
primary={true}
- onTouchTap={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
+ onClick={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
/>,
];
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 5f4bf8519..f2cfb279a 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -54,8 +54,8 @@ export class EthWethConversionDialog extends React.Component<
}
public render(): React.ReactNode {
const convertDialogActions = [
- <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
- <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />,
+ <FlatButton key="cancel" label="Cancel" onClick={this._onCancel.bind(this)} />,
+ <FlatButton key="convert" label="Convert" primary={true} onClick={this._onConvertClick.bind(this)} />,
];
const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
return !_.isUndefined(this.props.etherBalanceInWei) ? (
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index d2f373d67..fbc6c868b 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -64,7 +64,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
}
public render(): React.ReactNode {
const dialogActions = [
- <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />,
+ <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />,
];
const dialogTitle =
this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index 41a17fe96..ef295762b 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -13,7 +13,7 @@ export const PortalDisclaimerDialog = (props: PortalDisclaimerDialogProps) => {
<Dialog
title="0x Portal Disclaimer"
titleStyle={{ fontWeight: 100 }}
- actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]}
+ actions={[<FlatButton key="portalAgree" label="I Agree" onClick={props.onToggleDialog} />]}
open={props.isOpen}
onRequestClose={props.onToggleDialog}
autoScrollBodyContent={true}
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index c1179dbd0..2754b153f 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -38,13 +38,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
}
public render(): React.ReactNode {
const transferDialogActions = [
- <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
+ <FlatButton key="cancelTransfer" label="Cancel" onClick={this._onCancel.bind(this)} />,
<FlatButton
key="sendTransfer"
disabled={this._hasErrors()}
label="Send"
primary={true}
- onTouchTap={this._onSendClick.bind(this)}
+ onClick={this._onSendClick.bind(this)}
/>,
];
return (
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index 3751ce06f..c8d5af6b6 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -43,12 +43,12 @@ export class TrackTokenConfirmationDialog extends React.Component<
<FlatButton
key="trackNo"
label="No"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
+ onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)}
/>,
<FlatButton
key="trackYes"
label="Yes"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
+ onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)}
/>,
]}
open={this.props.isOpen}
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index 3ebab03ef..afbb30b82 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -14,7 +14,7 @@ export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => {
<Dialog
title="U2F Not Supported"
titleStyle={{ fontWeight: 100 }}
- actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog} />]}
+ actions={[<FlatButton key="u2fNo" label="Ok" onClick={props.onToggleDialog} />]}
open={props.isOpen}
onRequestClose={props.onToggleDialog}
autoScrollBodyContent={true}
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
index 78b270c1e..cf2c4dda5 100644
--- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -14,7 +14,7 @@ export const WrappedEthSectionNoticeDialog = (props: WrappedEthSectionNoticeDial
title="Dedicated Wrapped Ether Section"
titleStyle={{ fontWeight: 100 }}
actions={[
- <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />,
+ <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onClick={props.onToggleDialog} />,
]}
open={props.isOpen}
onRequestClose={props.onToggleDialog}
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 7da2e0870..3c3155349 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,6 +1,5 @@
-import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
import { colors } from '@0xproject/react-shared';
-import { Order as ZeroExOrder } from '@0xproject/types';
import { BigNumber, logUtils } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as accounting from 'accounting';
@@ -22,10 +21,10 @@ import { VisualOrder } from 'ts/components/visual_order';
import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
import { validator } from 'ts/schemas/validator';
-import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types';
+import { AlertTypes, BlockchainErrs, PortalOrder, Token, TokenByAddress, WebsitePaths } from 'ts/types';
import { analytics } from 'ts/utils/analytics';
-import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
+import { orderParser } from 'ts/utils/order_parser';
import { utils } from 'ts/utils/utils';
interface FillOrderProps {
@@ -36,7 +35,7 @@ interface FillOrderProps {
networkId: number;
userAddress: string;
tokenByAddress: TokenByAddress;
- initialOrder: Order;
+ initialOrder: PortalOrder;
dispatcher: Dispatcher;
lastForceTokenStateRefetch: number;
isFullWidth?: boolean;
@@ -49,7 +48,7 @@ interface FillOrderState {
globalErrMsg: string;
orderJSON: string;
orderJSONErrMsg: string;
- parsedOrder: Order;
+ parsedOrder: PortalOrder;
didFillOrderSucceed: boolean;
didCancelOrderSucceed: boolean;
unavailableTakerAmount: BigNumber;
@@ -191,16 +190,18 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
);
}
private _renderVisualOrder(): React.ReactNode {
- const takerTokenAddress = this.state.parsedOrder.signedOrder.takerTokenAddress;
+ const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData)
+ .tokenAddress;
const takerToken = this.props.tokenByAddress[takerTokenAddress];
- const orderTakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.takerTokenAmount);
- const orderMakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.makerTokenAmount);
+ const orderTakerAmount = this.state.parsedOrder.signedOrder.takerAssetAmount;
+ const orderMakerAmount = this.state.parsedOrder.signedOrder.makerAssetAmount;
const takerAssetToken = {
amount: orderTakerAmount.minus(this.state.unavailableTakerAmount),
symbol: takerToken.symbol,
};
const fillToken = this.props.tokenByAddress[takerTokenAddress];
- const makerTokenAddress = this.state.parsedOrder.signedOrder.makerTokenAddress;
+ const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData)
+ .tokenAddress;
const makerToken = this.props.tokenByAddress[makerTokenAddress];
const makerAssetToken = {
amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount),
@@ -210,7 +211,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
amount: this.props.orderFillAmount,
symbol: takerToken.symbol,
};
- const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.signedOrder.expirationUnixTimestampSec);
+ const parsedOrderExpiration = this.state.parsedOrder.signedOrder.expirationTimeSeconds;
let orderReceiveAmount = 0;
if (!_.isUndefined(this.props.orderFillAmount)) {
@@ -222,7 +223,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
}
const isUserMaker =
!_.isUndefined(this.state.parsedOrder) &&
- this.state.parsedOrder.signedOrder.maker === this.props.userAddress;
+ this.state.parsedOrder.signedOrder.makerAddress === this.props.userAddress;
const expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration);
return (
<div className="pt3 pb1">
@@ -233,11 +234,11 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
Maker:
</div>
<div className="col col-2 pr1">
- <Identicon address={this.state.parsedOrder.signedOrder.maker} diameter={23} />
+ <Identicon address={this.state.parsedOrder.signedOrder.makerAddress} diameter={23} />
</div>
<div className="col col-6">
<EthereumAddress
- address={this.state.parsedOrder.signedOrder.maker}
+ address={this.state.parsedOrder.signedOrder.makerAddress}
networkId={this.props.networkId}
/>
</div>
@@ -367,17 +368,19 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
if (!_.isEmpty(this.state.orderJSONErrMsg)) {
return;
}
-
- const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.makerTokenAddress];
- const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.takerTokenAddress];
-
+ const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData)
+ .tokenAddress;
+ const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData)
+ .tokenAddress;
+ const makerTokenIfExists = this.props.tokenByAddress[makerTokenAddress];
+ const takerTokenIfExists = this.props.tokenByAddress[takerTokenAddress];
const tokensToTrack: Token[] = [];
const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && utils.isTokenTracked(makerTokenIfExists);
if (isUnseenMakerToken) {
tokensToTrack.push({
...this.state.parsedOrder.metadata.makerToken,
- address: this.state.parsedOrder.signedOrder.makerTokenAddress,
+ address: makerTokenAddress,
iconUrl: undefined,
trackedTimestamp: undefined,
isRegistered: false,
@@ -390,7 +393,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
if (isUnseenTakerToken) {
tokensToTrack.push({
...this.state.parsedOrder.metadata.takerToken,
- address: this.state.parsedOrder.signedOrder.takerTokenAddress,
+ address: takerTokenAddress,
iconUrl: undefined,
trackedTimestamp: undefined,
isRegistered: false,
@@ -411,10 +414,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
}
private async _validateFillOrderFireAndForgetAsync(orderJSON: string): Promise<void> {
let orderJSONErrMsg = '';
- let parsedOrder: Order;
+ let parsedOrder: PortalOrder;
let orderHash: string;
try {
- const order = JSON.parse(orderJSON);
+ const order = orderParser.parseJsonString(orderJSON);
const validationResult = validator.validate(order, portalOrderSchema);
if (validationResult.errors.length > 0) {
orderJSONErrMsg = 'Submitted order JSON is not a valid order';
@@ -422,36 +425,16 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return;
}
parsedOrder = order;
-
- const makerAmount = new BigNumber(parsedOrder.signedOrder.makerTokenAmount);
- const takerAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount);
- const expiration = new BigNumber(parsedOrder.signedOrder.expirationUnixTimestampSec);
- const salt = new BigNumber(parsedOrder.signedOrder.salt);
- const parsedMakerFee = new BigNumber(parsedOrder.signedOrder.makerFee);
- const parsedTakerFee = new BigNumber(parsedOrder.signedOrder.takerFee);
-
- const zeroExOrder: ZeroExOrder = {
- exchangeContractAddress: parsedOrder.signedOrder.exchangeContractAddress,
- expirationUnixTimestampSec: expiration,
- feeRecipient: parsedOrder.signedOrder.feeRecipient,
- maker: parsedOrder.signedOrder.maker,
- makerFee: parsedMakerFee,
- makerTokenAddress: parsedOrder.signedOrder.makerTokenAddress,
- makerTokenAmount: makerAmount,
- salt,
- taker: _.isEmpty(parsedOrder.signedOrder.taker)
- ? constants.NULL_ADDRESS
- : parsedOrder.signedOrder.taker,
- takerFee: parsedTakerFee,
- takerTokenAddress: parsedOrder.signedOrder.takerTokenAddress,
- takerTokenAmount: takerAmount,
- };
- orderHash = getOrderHashHex(zeroExOrder);
-
+ const signedOrder = parsedOrder.signedOrder;
+ orderHash = orderHashUtils.getOrderHashHex(signedOrder);
const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
- const signature = parsedOrder.signedOrder.ecSignature;
- const isSignatureValid = isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker);
- if (exchangeContractAddr !== parsedOrder.signedOrder.exchangeContractAddress) {
+ const signature = signedOrder.signature;
+ const isSignatureValid = await this.props.blockchain.isValidSignatureAsync(
+ orderHash,
+ signature,
+ signedOrder.makerAddress,
+ );
+ if (exchangeContractAddr !== signedOrder.exchangeAddress) {
orderJSONErrMsg = 'This order was made on another network or using a deprecated Exchange contract';
parsedOrder = undefined;
} else if (!isSignatureValid) {
@@ -484,11 +467,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
this.props.dispatcher.updateUserSuppliedOrderCache(undefined);
} else {
unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
+ const makerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.makerAssetData)
+ .tokenAddress;
+ const takerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.takerAssetData)
+ .tokenAddress;
const isMakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
- parsedOrder.signedOrder.makerTokenAddress,
+ makerTokenAddress,
);
const isTakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
- parsedOrder.signedOrder.takerTokenAddress,
+ takerTokenAddress,
);
this.setState({
isMakerTokenAddressInRegistry,
@@ -537,7 +524,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
globalErrMsg = 'You must specify a fill amount';
}
- const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder);
+ const signedOrder = parsedOrder.signedOrder;
if (_.isEmpty(globalErrMsg)) {
try {
await this.props.blockchain.validateFillOrderThrowIfInvalidAsync(
@@ -546,7 +533,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
this.props.userAddress,
);
} catch (err) {
- globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker);
+ globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.takerAddress);
}
}
if (!_.isEmpty(globalErrMsg)) {
@@ -611,18 +598,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return;
}
let globalErrMsg = '';
-
- const takerTokenAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount);
-
- const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder);
- const orderHash = getOrderHashHex(signedOrder);
- const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
- const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount);
- try {
- await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount);
- } catch (err) {
- globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker);
- }
+ const signedOrder = parsedOrder.signedOrder;
+ const takerTokenAmount = signedOrder.takerAssetAmount;
if (!_.isEmpty(globalErrMsg)) {
this.setState({
isCancelling: false,
@@ -631,7 +608,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return;
}
try {
- await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
+ await this.props.blockchain.cancelOrderAsync(signedOrder);
this.setState({
isCancelling: false,
didCancelOrderSucceed: true,
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index 90eedbb18..1ecc426bd 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -33,11 +33,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
},
};
const hintOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
- const hintECSignature = {
- r: '0xf01103f759e2289a28593eaf22e5820032...',
- s: '937862111edcba395f8a9e0cc1b2c5e12320...',
- v: 27,
- };
+ const hintECSignature = '0x012761a3ed31b43c8780e905a260a35faefcc527be7516aa11c0256729b5b351bc33';
const hintSalt = generatePseudoRandomSalt();
const feeRecipient = constants.NULL_ADDRESS;
const hintOrder = utils.generateOrder(
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 45c492221..4821aaabe 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -18,12 +18,12 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => {
<FlatButton
key="fillWarningCancel"
label="Cancel"
- onTouchTap={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda
+ onClick={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda
/>,
<FlatButton
key="fillWarningContinue"
label="Fill Order"
- onTouchTap={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda
+ onClick={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda
/>,
]}
open={props.isOpen}
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 2dca3483f..98aad6c62 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -73,12 +73,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
<FlatButton
key="noTracking"
label="No"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
+ onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)}
/>,
<FlatButton
key="yesTrack"
label="Yes"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
+ onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)}
/>,
],
},
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index 72efab033..ec153c005 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,6 +1,6 @@
-import { generatePseudoRandomSalt, getOrderHashHex } from '@0xproject/order-utils';
+import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0xproject/order-utils';
import { colors } from '@0xproject/react-shared';
-import { ECSignature, Order as ZeroExOrder } from '@0xproject/types';
+import { Order as ZeroExOrder } from '@0xproject/types';
import { BigNumber, logUtils } from '@0xproject/utils';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
@@ -20,7 +20,16 @@ import { SwapIcon } from 'ts/components/ui/swap_icon';
import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
import { validator } from 'ts/schemas/validator';
-import { AlertTypes, BlockchainErrs, HashData, Order, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
+import {
+ AlertTypes,
+ BlockchainErrs,
+ HashData,
+ PortalOrder,
+ Side,
+ SideToAssetToken,
+ Token,
+ TokenByAddress,
+} from 'ts/types';
import { analytics } from 'ts/utils/analytics';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
@@ -41,7 +50,7 @@ interface GenerateOrderFormProps {
orderExpiryTimestamp: BigNumber;
networkId: number;
userAddress: string;
- orderECSignature: ECSignature;
+ orderSignature: string;
orderTakerAddress: string;
orderSalt: BigNumber;
sideToAssetToken: SideToAssetToken;
@@ -212,7 +221,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
<OrderJSON
exchangeContractIfExists={exchangeContractIfExists}
orderExpiryTimestamp={this.props.orderExpiryTimestamp}
- orderECSignature={this.props.orderECSignature}
+ orderSignature={this.props.orderSignature}
orderTakerAddress={this.props.orderTakerAddress}
orderMakerAddress={this.props.userAddress}
orderSalt={this.props.orderSalt}
@@ -294,12 +303,12 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
return false;
}
}
- private async _signTransactionAsync(): Promise<Order | undefined> {
+ private async _signTransactionAsync(): Promise<PortalOrder | undefined> {
this.setState({
signingState: SigningState.SIGNING,
});
- const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
- if (_.isUndefined(exchangeContractAddr)) {
+ const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists();
+ if (_.isUndefined(exchangeAddress)) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
this.setState({
signingState: SigningState.UNSIGNED,
@@ -308,28 +317,31 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
}
const hashData = this.props.hashData;
+ const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr);
+ const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr);
const zeroExOrder: ZeroExOrder = {
- exchangeContractAddress: exchangeContractAddr,
- expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
- feeRecipient: hashData.feeRecipientAddress,
- maker: hashData.orderMakerAddress,
+ senderAddress: constants.NULL_ADDRESS,
+ exchangeAddress,
+ expirationTimeSeconds: hashData.orderExpiryTimestamp,
+ feeRecipientAddress: hashData.feeRecipientAddress,
+ makerAddress: hashData.orderMakerAddress,
makerFee: hashData.makerFee,
- makerTokenAddress: hashData.depositTokenContractAddr,
- makerTokenAmount: hashData.depositAmount,
+ makerAssetData,
+ makerAssetAmount: hashData.depositAmount,
salt: hashData.orderSalt,
- taker: hashData.orderTakerAddress,
+ takerAddress: hashData.orderTakerAddress,
takerFee: hashData.takerFee,
- takerTokenAddress: hashData.receiveTokenContractAddr,
- takerTokenAmount: hashData.receiveAmount,
+ takerAssetData,
+ takerAssetAmount: hashData.receiveAmount,
};
- const orderHash = getOrderHashHex(zeroExOrder);
+ const orderHash = orderHashUtils.getOrderHashHex(zeroExOrder);
let globalErrMsg = '';
let order;
try {
- const ecSignature = await this.props.blockchain.signOrderHashAsync(orderHash);
+ const signature = await this.props.blockchain.signOrderHashAsync(orderHash);
order = utils.generateOrder(
- exchangeContractAddr,
+ exchangeAddress,
this.props.sideToAssetToken,
hashData.orderExpiryTimestamp,
this.props.orderTakerAddress,
@@ -337,7 +349,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
hashData.makerFee,
hashData.takerFee,
hashData.feeRecipientAddress,
- ecSignature,
+ signature,
this.props.tokenByAddress,
hashData.orderSalt,
);
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 8d9cdfc0b..5125ec4de 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,9 +1,10 @@
-import { getOrderHashHex } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
import { Styles } from '@0xproject/react-shared';
import { Order } from '@0xproject/types';
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
+
import { Blockchain } from 'ts/blockchain';
import { FakeTextField } from 'ts/components/ui/fake_text_field';
import { HashData } from 'ts/types';
@@ -42,23 +43,26 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> {
);
}
private _generateMessageHashHex(): string {
- const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
+ const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists();
const hashData = this.props.hashData;
+ const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr);
+ const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr);
const order: Order = {
- exchangeContractAddress,
- expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
- feeRecipient: hashData.feeRecipientAddress,
- maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
+ senderAddress: constants.NULL_ADDRESS,
+ exchangeAddress,
+ expirationTimeSeconds: hashData.orderExpiryTimestamp,
+ feeRecipientAddress: hashData.feeRecipientAddress,
+ makerAddress: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
makerFee: hashData.makerFee,
- makerTokenAddress: hashData.depositTokenContractAddr,
- makerTokenAmount: hashData.depositAmount,
+ makerAssetData,
+ makerAssetAmount: hashData.depositAmount,
salt: hashData.orderSalt,
- taker: hashData.orderTakerAddress,
+ takerAddress: hashData.orderTakerAddress,
takerFee: hashData.takerFee,
- takerTokenAddress: hashData.receiveTokenContractAddr,
- takerTokenAmount: hashData.receiveAmount,
+ takerAssetData,
+ takerAssetAmount: hashData.receiveAmount,
};
- const orderHash = getOrderHashHex(order);
+ const orderHash = orderHashUtils.getOrderHashHex(order);
return orderHash;
}
}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 93ef516cf..db093fb68 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -111,7 +111,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
<span>
Insufficient allowance.{' '}
<Link
- to={`${WebsitePaths.Portal}/balances`}
+ to={`${WebsitePaths.Portal}/account`}
style={{ cursor: 'pointer', color: colors.darkestGrey }}
>
Set allowance
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
index d618c8318..1035d4ad9 100644
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -12,7 +12,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet
const followupText = isOnMobile
? `Please revisit this site in your mobile dApp browser to continue!`
: `Please refresh the page once you've done this to continue!`;
- const downloadText = isOnMobile ? 'Get the Toshi Wallet' : 'Get the MetaMask extension';
+ const downloadText = isOnMobile ? 'Get Coinbase Wallet' : 'Get the MetaMask extension';
return (
<div className="flex items-center flex-column">
<Text>First, you need to connect to a wallet. This will be used across all 0x relayers and dApps.</Text>
@@ -21,7 +21,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet
height="50px"
width="50px"
borderRadius="22%"
- src={isOnMobile ? '/images/toshi_logo.jpg' : '/images/metamask_icon.png'}
+ src={isOnMobile ? '/images/coinbase_wallet_logo.png' : '/images/metamask_icon.png'}
/>
<Container marginLeft="10px">
<a href={downloadLink} target="_blank">
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index cf06f10c8..a2a53a523 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -1,4 +1,3 @@
-import { ECSignature } from '@0xproject/types';
import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
@@ -14,7 +13,7 @@ import { utils } from 'ts/utils/utils';
interface OrderJSONProps {
exchangeContractIfExists: string;
orderExpiryTimestamp: BigNumber;
- orderECSignature: ECSignature;
+ orderSignature: string;
orderTakerAddress: string;
orderMakerAddress: string;
orderSalt: BigNumber;
@@ -48,7 +47,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
this.props.orderMakerFee,
this.props.orderTakerFee,
this.props.orderFeeRecipient,
- this.props.orderECSignature,
+ this.props.orderSignature,
this.props.tokenByAddress,
this.props.orderSalt,
);
@@ -169,7 +168,7 @@ You can see and fill it here: ${this.state.shareLink}`);
this.props.orderMakerFee,
this.props.orderTakerFee,
this.props.orderFeeRecipient,
- this.props.orderECSignature,
+ this.props.orderSignature,
this.props.tokenByAddress,
this.props.orderSalt,
);
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index ff11880e3..b42954f60 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -39,7 +39,7 @@ import {
BlockchainErrs,
HashData,
ItemByAddress,
- Order,
+ PortalOrder,
ProviderType,
ScreenWidths,
Token,
@@ -71,7 +71,7 @@ export interface PortalProps {
userEtherBalanceInWei?: BigNumber;
userAddress: string;
shouldBlockchainErrDialogBeOpen: boolean;
- userSuppliedOrderCache: Order;
+ userSuppliedOrderCache: PortalOrder;
location: Location;
flashMessage?: string | React.ReactNode;
lastForceTokenStateRefetch: number;
@@ -114,11 +114,11 @@ const DOCUMENT_DESCRIPTION = 'Learn about and trade on 0x Relayers';
export class Portal extends React.Component<PortalProps, PortalState> {
private _blockchain: Blockchain;
- private readonly _sharedOrderIfExists: Order;
+ private readonly _sharedOrderIfExists: PortalOrder;
private readonly _throttledScreenWidthUpdate: () => void;
constructor(props: PortalProps) {
super(props);
- this._sharedOrderIfExists = orderParser.parse(window.location.search);
+ this._sharedOrderIfExists = orderParser.parseQueryString(window.location.search);
this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
const hasAcceptedDisclaimer =
@@ -545,7 +545,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
<Section
header={!isMobile && <TextHeader labelText="0x Relayers" />}
body={
- <Container className="flex flex-column items-center">
+ <Container className="flex flex-column">
{isMobile && (
<Container marginTop="20px" marginBottom="20px">
{this._renderStartOnboarding()}
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 4aea1bbbb..91dbeb27a 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -56,7 +56,11 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
</div>
);
} else {
- const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
+ const numberOfRelayers = this.state.relayerInfos.length;
+ const numberOfColumns = Math.min(
+ numberOfRelayers,
+ this._numberOfColumnsForScreenWidth(this.props.screenWidth),
+ );
return (
<GridList
cellHeight={CELL_HEIGHT}
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 969ef32ff..5965ad9bd 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -165,7 +165,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
key="errorOkBtn"
label="Ok"
primary={true}
- onTouchTap={this._onErrorDialogToggle.bind(this, false)}
+ onClick={this._onErrorDialogToggle.bind(this, false)}
/>,
];
const isTestNetwork = utils.isTestNetwork(this.props.networkId);
@@ -337,14 +337,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
const isMintable =
(_.includes(configs.SYMBOLS_OF_MINTABLE_KOVAN_TOKENS, token.symbol) &&
this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan]) ||
- (_.includes(configs.SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS, token.symbol) &&
- _.includes(
- [
- sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
- sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten],
- ],
- this.props.networkId,
- ));
+ (_.includes(configs.SYMBOLS_OF_MINTABLE_ROPSTEN_TOKENS, token.symbol) &&
+ this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten]);
return (
<TableRow key={token.address} style={{ height: TOKEN_TABLE_ROW_HEIGHT }}>
<TableRowColumn colSpan={tokenColSpan}>
@@ -392,14 +386,6 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)}
/>
)}
- {token.symbol === ZRX_TOKEN_SYMBOL && (
- <LifeCycleRaisedButton
- labelReady="Request"
- labelLoading="Sending..."
- labelComplete="Sent!"
- onClickAsyncFn={this._faucetRequestAsync.bind(this, false)}
- />
- )}
</TableRowColumn>
)}
{this.props.screenWidth !== ScreenWidths.Sm && (
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 8f1137b44..c2d753e31 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -132,7 +132,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
const menuClasses = `col col-${
- isExpandedDisplayType ? '4' : '5'
+ isExpandedDisplayType ? '4' : '6'
} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
const menuIconStyle = {
fontSize: 25,
@@ -185,6 +185,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
isExternal={false}
/>
<TopBarMenuItem
+ title={this.props.translate.get(Key.Careers, Deco.Cap)}
+ path={`${WebsitePaths.Careers}`}
+ style={styles.menuItem}
+ isNightVersion={isNightVersion}
+ isExternal={false}
+ />
+ <TopBarMenuItem
title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
path={`${WebsitePaths.Portal}`}
isPrimary={true}
@@ -289,11 +296,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<Link to={`${WebsitePaths.About}`} className="text-decoration-none">
<MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
</Link>
+ <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+ <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
+ </Link>
<a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
<MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
</a>
<Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
- <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
+ <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}>
{this.props.translate.get(Key.Faq, Deco.Cap)}
</MenuItem>
</Link>
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 2952c8859..75ba7bcff 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -96,4 +96,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
CallToAction.defaultProps = {
type: 'dark',
fontSize: '14px',
+ padding: '0.9em 1.6em',
};
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 380fbc77d..0bb99b9d8 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -71,7 +71,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton
style={{ width: '100%' }}
backgroundColor={this.props.backgroundColor}
labelColor={this.props.labelColor}
- onTouchTap={this.onClickAsync.bind(this)}
+ onClick={this.onClickAsync.bind(this)}
disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
/>
);
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 734483564..cd8f290e3 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -20,6 +20,7 @@ export interface TextProps {
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
hoverColor?: string;
noWrap?: boolean;
+ display?: string;
}
const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -41,6 +42,7 @@ export const Text = styled(PlainText)`
${props => (props.onClick ? 'cursor: pointer' : '')};
transition: color 0.5s ease;
${props => (props.noWrap ? 'white-space: nowrap' : '')};
+ ${props => (props.display ? `display: ${props.display}` : '')};
&:hover {
${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
}
diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx
new file mode 100644
index 000000000..6d38580b9
--- /dev/null
+++ b/packages/website/ts/components/ui/typed_text.tsx
@@ -0,0 +1,75 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import Typist from 'react-typist';
+
+import { Text, TextProps } from 'ts/components/ui/text';
+
+import 'react-typist/dist/Typist.css';
+
+export interface TypedTextProps extends TextProps {
+ textList: string[];
+ shouldRepeat?: boolean;
+ wordDelayMs?: number;
+ avgKeystrokeDelayMs?: number;
+ stdKeystrokeDelay?: number;
+}
+
+export interface TypedTextState {
+ cycleCount: number;
+}
+
+export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
+ public static defaultProps = {
+ shouldRepeat: false,
+ avgKeystrokeDelayMs: 90,
+ wordDelayMs: 1000,
+ };
+ public state = {
+ cycleCount: 0,
+ };
+ public render(): React.ReactNode {
+ const {
+ textList,
+ shouldRepeat,
+ wordDelayMs,
+ avgKeystrokeDelayMs,
+ stdKeystrokeDelay,
+ // tslint:disable-next-line
+ ...textProps
+ } = this.props;
+ const { cycleCount } = this.state;
+ if (_.isEmpty(textList)) {
+ return null;
+ }
+ const typistChildren: React.ReactNode[] = [];
+ _.forEach(textList, text => {
+ typistChildren.push(
+ <Text key={`text-${text}-${cycleCount}`} {...textProps}>
+ {text}
+ </Text>,
+ );
+ if (wordDelayMs) {
+ typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
+ }
+ typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
+ });
+ return (
+ <Typist
+ avgTypingDelay={avgKeystrokeDelayMs}
+ stdTypingDelay={stdKeystrokeDelay}
+ className="inline"
+ key={`typist-key-${cycleCount}`}
+ onTypingDone={this._onTypingDone.bind(this)}
+ >
+ {typistChildren}
+ </Typist>
+ );
+ }
+ private _onTypingDone(): void {
+ if (this.props.shouldRepeat) {
+ this.setState({
+ cycleCount: this.state.cycleCount + 1,
+ });
+ }
+ }
+}
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 26359d0d2..3795f0eaa 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -13,7 +13,7 @@ import { AccountState, ProviderType } from 'ts/types';
import { utils } from 'ts/utils/utils';
const METAMASK_IMG_SRC = '/images/metamask_icon.png';
-const TOSHI_IMG_SRC = '/images/toshi_logo.jpg';
+const COINBASE_WALLET_IMG_SRC = '/images/coinbase_wallet_logo.png';
export interface BodyOverlayProps {
dispatcher: Dispatcher;
@@ -116,8 +116,8 @@ const UseDifferentWallet = (props: UseDifferentWallet) => {
const GetWalletCallToAction = () => {
const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile();
- const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC;
- const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet';
+ const imageUrl = isOnMobile ? COINBASE_WALLET_IMG_SRC : METAMASK_IMG_SRC;
+ const text = isOnMobile ? 'Get Coinbase Wallet' : 'Get MetaMask Wallet';
return (
<a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}>
<Island