diff options
Diffstat (limited to 'packages/website/ts/components/order_json.tsx')
| -rw-r--r-- | packages/website/ts/components/order_json.tsx | 115 |
1 files changed, 67 insertions, 48 deletions
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index 21ec9ba93..bd462b42a 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -3,12 +3,12 @@ import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; import * as React from 'react'; -import {CopyIcon} from 'ts/components/ui/copy_icon'; -import {SideToAssetToken, SignatureData, TokenByAddress, WebsitePaths} from 'ts/types'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; -import {errorReporter} from 'ts/utils/error_reporter'; -import {utils} from 'ts/utils/utils'; +import { CopyIcon } from 'ts/components/ui/copy_icon'; +import { SideToAssetToken, SignatureData, TokenByAddress, WebsitePaths } from 'ts/types'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { errorReporter } from 'ts/utils/error_reporter'; +import { utils } from 'ts/utils/utils'; interface OrderJSONProps { exchangeContractIfExists: string; @@ -39,69 +39,75 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { this._setShareLinkAsync(); } public render() { - const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists, - this.props.sideToAssetToken, this.props.orderExpiryTimestamp, - this.props.orderTakerAddress, this.props.orderMakerAddress, - this.props.orderMakerFee, this.props.orderTakerFee, - this.props.orderFeeRecipient, this.props.orderSignatureData, - this.props.tokenByAddress, this.props.orderSalt); + const order = utils.generateOrder( + this.props.networkId, + this.props.exchangeContractIfExists, + this.props.sideToAssetToken, + this.props.orderExpiryTimestamp, + this.props.orderTakerAddress, + this.props.orderMakerAddress, + this.props.orderMakerFee, + this.props.orderTakerFee, + this.props.orderFeeRecipient, + this.props.orderSignatureData, + this.props.tokenByAddress, + this.props.orderSalt, + ); const orderJSON = JSON.stringify(order); return ( <div> <div className="pb2"> - You have successfully generated and cryptographically signed an order! The{' '} - following JSON contains the order parameters and cryptographic signature that{' '} - your counterparty will need to execute a trade with you. + You have successfully generated and cryptographically signed an order! The following JSON contains + the order parameters and cryptographic signature that your counterparty will need to execute a trade + with you. </div> <div className="pb2 flex"> - <div - className="inline-block pl1" - style={{top: 1}} - > + <div className="inline-block pl1" style={{ top: 1 }}> <CopyIcon data={orderJSON} callToAction="Copy" /> </div> </div> <Paper className="center overflow-hidden"> <TextField id="orderJSON" - style={{width: 710}} + style={{ width: 710 }} value={JSON.stringify(order, null, '\t')} multiLine={true} rows={2} rowsMax={8} - underlineStyle={{display: 'none'}} + underlineStyle={{ display: 'none' }} /> </Paper> <div className="pt3 pb2 center"> + <div>Share your signed order!</div> <div> - Share your signed order! - </div> - <div> - <div className="mx-auto overflow-hidden" style={{width: 152}}> - <TextField - id={`${this.state.shareLink}-bitly`} - value={this.state.shareLink} - /> + <div className="mx-auto overflow-hidden" style={{ width: 152 }}> + <TextField id={`${this.state.shareLink}-bitly`} value={this.state.shareLink} /> </div> </div> - <div className="mx-auto pt1 flex" style={{width: 91}}> + <div className="mx-auto pt1 flex" style={{ width: 91 }}> <div> <i - style={{cursor: 'pointer', fontSize: 29}} + style={{ cursor: 'pointer', fontSize: 29 }} onClick={this._shareViaFacebook.bind(this)} className="zmdi zmdi-facebook-box" /> </div> - <div className="pl1" style={{position: 'relative', width: 28}}> + <div className="pl1" style={{ position: 'relative', width: 28 }}> <i - style={{cursor: 'pointer', fontSize: 32, position: 'absolute', top: -2, left: 8}} + style={{ + cursor: 'pointer', + fontSize: 32, + position: 'absolute', + top: -2, + left: 8, + }} onClick={this._shareViaEmailAsync.bind(this)} className="zmdi zmdi-email" /> </div> <div className="pl1"> <i - style={{cursor: 'pointer', fontSize: 29}} + style={{ cursor: 'pointer', fontSize: 29 }} onClick={this._shareViaTwitterAsync.bind(this)} className="zmdi zmdi-twitter-box" /> @@ -116,14 +122,17 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { window.open(`https://twitter.com/intent/tweet?text=${tweetText}`, 'Share your order', 'width=500,height=400'); } private async _shareViaFacebook() { - (window as any).FB.ui({ - display: 'popup', - href: this.state.shareLink, - method: 'share', - }, _.noop); + (window as any).FB.ui( + { + display: 'popup', + href: this.state.shareLink, + method: 'share', + }, + _.noop, + ); } private async _shareViaEmailAsync() { - const encodedSubject = encodeURIComponent('Let\'s trade using the 0x protocol'); + const encodedSubject = encodeURIComponent("Let's trade using the 0x protocol"); const encodedBody = encodeURIComponent(`I generated an order with the 0x protocol. You can see and fill it here: ${this.state.shareLink}`); const mailToLink = `mailto:mail@example.org?subject=${encodedSubject}&body=${encodedBody}`; @@ -137,8 +146,9 @@ You can see and fill it here: ${this.state.shareLink}`); } private async _generateShareLinkAsync(): Promise<string> { const longUrl = encodeURIComponent(this._getOrderUrl()); - const bitlyRequestUrl = - `${constants.URL_BITLY_API}/v3/shorten?access_token=${configs.BITLY_ACCESS_TOKEN}&longUrl=${longUrl}`; + const bitlyRequestUrl = `${constants.URL_BITLY_API}/v3/shorten?access_token=${ + configs.BITLY_ACCESS_TOKEN + }&longUrl=${longUrl}`; const response = await fetch(bitlyRequestUrl); const responseBody = await response.text(); const bodyObj = JSON.parse(responseBody); @@ -148,14 +158,23 @@ You can see and fill it here: ${this.state.shareLink}`); await errorReporter.reportAsync(new Error(`Bitly returned non-200: ${JSON.stringify(response)}`)); return ''; } - return (bodyObj).data.url; + return bodyObj.data.url; } private _getOrderUrl() { - const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists, - this.props.sideToAssetToken, this.props.orderExpiryTimestamp, this.props.orderTakerAddress, - this.props.orderMakerAddress, this.props.orderMakerFee, this.props.orderTakerFee, - this.props.orderFeeRecipient, this.props.orderSignatureData, this.props.tokenByAddress, - this.props.orderSalt); + const order = utils.generateOrder( + this.props.networkId, + this.props.exchangeContractIfExists, + this.props.sideToAssetToken, + this.props.orderExpiryTimestamp, + this.props.orderTakerAddress, + this.props.orderMakerAddress, + this.props.orderMakerFee, + this.props.orderTakerFee, + this.props.orderFeeRecipient, + this.props.orderSignatureData, + this.props.tokenByAddress, + this.props.orderSalt, + ); const orderJSONString = JSON.stringify(order); const orderUrl = `${configs.BASE_URL}${WebsitePaths.Portal}/fill?order=${orderJSONString}`; return orderUrl; |