diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-06-02 02:22:25 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-06-02 02:22:25 +0800 |
commit | 9ca41b9536908dddfa51854abd41b7926e69bd09 (patch) | |
tree | dce2043b88fd59fdfcbde01c5ab4cfc100f31cc1 | |
parent | 559743c91174e0af0b1383af544ce2ffcf54cc38 (diff) | |
parent | 0500d2fb6e17f436535cb4bb5336c139a99e8cfe (diff) | |
download | dexon-0x-contracts-9ca41b9536908dddfa51854abd41b7926e69bd09.tar dexon-0x-contracts-9ca41b9536908dddfa51854abd41b7926e69bd09.tar.gz dexon-0x-contracts-9ca41b9536908dddfa51854abd41b7926e69bd09.tar.bz2 dexon-0x-contracts-9ca41b9536908dddfa51854abd41b7926e69bd09.tar.lz dexon-0x-contracts-9ca41b9536908dddfa51854abd41b7926e69bd09.tar.xz dexon-0x-contracts-9ca41b9536908dddfa51854abd41b7926e69bd09.tar.zst dexon-0x-contracts-9ca41b9536908dddfa51854abd41b7926e69bd09.zip |
Merge pull request #648 from 0xProject/feature/website/fill-order
Add shared order support
-rw-r--r-- | packages/website/ts/components/legacy_portal/legacy_portal.tsx | 29 | ||||
-rw-r--r-- | packages/website/ts/components/portal/menu.tsx | 11 | ||||
-rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 36 | ||||
-rw-r--r-- | packages/website/ts/utils/order_parser.ts | 33 |
4 files changed, 75 insertions, 34 deletions
diff --git a/packages/website/ts/components/legacy_portal/legacy_portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx index 6a3a54303..e5d152e3e 100644 --- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx +++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx @@ -38,6 +38,7 @@ import { } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; +import { orderParser } from 'ts/utils/order_parser'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -86,7 +87,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta } constructor(props: LegacyPortalProps) { super(props); - this._sharedOrderIfExists = this._getSharedOrderIfExists(); + this._sharedOrderIfExists = orderParser.parse(window.location.search); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`); @@ -362,32 +363,6 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta isWethNoticeDialogOpen: false, }); } - private _getSharedOrderIfExists(): Order | undefined { - const queryString = window.location.search; - if (queryString.length === 0) { - return undefined; - } - const queryParams = queryString.substring(1).split('&'); - const orderQueryParam = _.find(queryParams, queryParam => { - const queryPair = queryParam.split('='); - return queryPair[0] === 'order'; - }); - if (_.isUndefined(orderQueryParam)) { - return undefined; - } - const orderPair = orderQueryParam.split('='); - if (orderPair.length !== 2) { - return undefined; - } - - const order = JSON.parse(decodeURIComponent(orderPair[1])); - const validationResult = validator.validate(order, portalOrderSchema); - if (validationResult.errors.length > 0) { - logUtils.log(`Invalid shared order: ${validationResult.errors}`); - return undefined; - } - return order; - } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 6a3301549..6e97ee37e 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -43,9 +43,14 @@ export const defaultMenuItemEntries: MenuItemEntry[] = [ iconName: 'zmdi-circle-o', }, { - to: `${WebsitePaths.Portal}/direct`, - labelText: 'Trade direct', - iconName: 'zmdi-swap', + to: `${WebsitePaths.Portal}/generate`, + labelText: 'Generate order', + iconName: 'zmdi-arrow-right-top', + }, + { + to: `${WebsitePaths.Portal}/fill`, + labelText: 'Fill order', + iconName: 'zmdi-arrow-left-bottom', }, ]; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index e08393791..589ad00ad 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -10,6 +10,7 @@ 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 { EthWrappers } from 'ts/components/eth_wrappers'; +import { FillOrder } from 'ts/components/fill_order'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; import { BackButton } from 'ts/components/portal/back_button'; import { Loading } from 'ts/components/portal/loading'; @@ -42,6 +43,7 @@ import { } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; +import { orderParser } from 'ts/utils/order_parser'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -116,9 +118,11 @@ const styles: Styles = { export class Portal extends React.Component<PortalProps, PortalState> { private _blockchain: Blockchain; + private _sharedOrderIfExists: Order; private _throttledScreenWidthUpdate: () => void; constructor(props: PortalProps) { super(props); + this._sharedOrderIfExists = orderParser.parse(window.location.search); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER); const hasAcceptedDisclaimer = @@ -336,9 +340,14 @@ export class Portal extends React.Component<PortalProps, PortalState> { render: this._renderTradeHistory.bind(this), }, { - pathName: `${WebsitePaths.Portal}/direct`, - headerText: 'Trade Direct', - render: this._renderTradeDirect.bind(this), + pathName: `${WebsitePaths.Portal}/generate`, + headerText: 'Generate Order', + render: this._renderGenerateOrderForm.bind(this), + }, + { + pathName: `${WebsitePaths.Portal}/fill`, + headerText: 'Fill Order', + render: this._renderFillOrder.bind(this), }, ]; return ( @@ -386,7 +395,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { /> ); } - private _renderTradeDirect(match: any, location: Location, history: History): React.ReactNode { + private _renderGenerateOrderForm(): React.ReactNode { return ( <GenerateOrderForm blockchain={this._blockchain} @@ -395,6 +404,25 @@ export class Portal extends React.Component<PortalProps, PortalState> { /> ); } + private _renderFillOrder(): React.ReactNode { + const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache) + ? this.props.userSuppliedOrderCache + : this._sharedOrderIfExists; + return ( + <FillOrder + blockchain={this._blockchain} + blockchainErr={this.props.blockchainErr} + initialOrder={initialFillOrder} + isOrderInUrl={!_.isUndefined(this._sharedOrderIfExists)} + orderFillAmount={this.props.orderFillAmount} + networkId={this.props.networkId} + userAddress={this.props.userAddress} + tokenByAddress={this.props.tokenByAddress} + dispatcher={this.props.dispatcher} + lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + /> + ); + } private _renderTokenBalances(): React.ReactNode { const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); diff --git a/packages/website/ts/utils/order_parser.ts b/packages/website/ts/utils/order_parser.ts new file mode 100644 index 000000000..be08da80e --- /dev/null +++ b/packages/website/ts/utils/order_parser.ts @@ -0,0 +1,33 @@ +import { logUtils } from '@0xproject/utils'; +import * as _ from 'lodash'; + +import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; +import { validator } from 'ts/schemas/validator'; +import { Order } from 'ts/types'; + +export const orderParser = { + parse(queryString: string): Order | undefined { + if (queryString.length === 0) { + return undefined; + } + const queryParams = queryString.substring(1).split('&'); + const orderQueryParam = _.find(queryParams, queryParam => { + const queryPair = queryParam.split('='); + return queryPair[0] === 'order'; + }); + if (_.isUndefined(orderQueryParam)) { + return undefined; + } + const orderPair = orderQueryParam.split('='); + if (orderPair.length !== 2) { + return undefined; + } + const order = JSON.parse(decodeURIComponent(orderPair[1])); + const validationResult = validator.validate(order, portalOrderSchema); + if (validationResult.errors.length > 0) { + logUtils.log(`Invalid shared order: ${validationResult.errors}`); + return undefined; + } + return order; + }, +}; |