From 02a975dde45ba879627975ac836956b679a1a0ac Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 13:17:16 -0700 Subject: feat: add augur provided order --- packages/instant/public/index.html | 33 ++++++++++------------ .../selected_erc20_asset_amount_input.ts | 1 + .../instant/src/data/asset_data_network_mapping.ts | 4 +++ packages/instant/src/data/asset_meta_data_map.ts | 6 ++++ 4 files changed, 26 insertions(+), 18 deletions(-) diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 9f1dfdb64..68d6c69c4 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -35,24 +35,21 @@ DECIMAL_PLACES: 78, }); const providedOrder = { - senderAddress: '0x0000000000000000000000000000000000000000', - makerAddress: '0x14e2f1f157e7dd4057d02817436d628a37120fd1', - takerAddress: '0x0000000000000000000000000000000000000000', - makerFee: new BigNumber('0'), - takerFee: new BigNumber('0'), - makerAssetAmount: new BigNumber('100000000000000000000'), - takerAssetAmount: new BigNumber('10000000000000000'), - makerAssetData: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa', - takerAssetData: '0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c', - expirationTimeSeconds: new BigNumber('1591858800'), - feeRecipientAddress: '0x0000000000000000000000000000000000000000', - salt: new BigNumber( - '54983920541892966634674340965984367456810207583416050222519063020710969340046', - ), - signature: - '0x1b949656218421c845995457303569a656764afa2b979d41dcefff0009d57ce15001490268bc7caa4269894fd83b741465fc5a7a53eda6ece17eb91fb32655d83703', - exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2', - }; + "senderAddress": "0x0000000000000000000000000000000000000000", + "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", + "takerAddress": "0x0000000000000000000000000000000000000000", + "makerFee": new BigNumber("0"), + "takerFee": new BigNumber("0"), + "makerAssetAmount": new BigNumber("400000000000000000000"), + "takerAssetAmount": new BigNumber("40000000000000000000"), + "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c", + "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", + "expirationTimeSeconds": new BigNumber("1543046400"), + "feeRecipientAddress": "0x0000000000000000000000000000000000000000", + "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"), + "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03", + "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" + } const queryParams = new Uri(window.location.search); const renderOptionsDefaults = { liquiditySource: 'https://api.radarrelay.com/0x/v2/', diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index 4767b15d4..ad3aa9582 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -78,6 +78,7 @@ const updateBuyQuoteAsync = async ( try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue); } catch (error) { + console.log(error); dispatch(actions.setQuoteRequestStateFailure()); let errorMessage; if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts index e8ccbf011..28a04eb8a 100644 --- a/packages/instant/src/data/asset_data_network_mapping.ts +++ b/packages/instant/src/data/asset_data_network_mapping.ts @@ -12,4 +12,8 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [ [Network.Mainnet]: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498', [Network.Kovan]: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa', }, + { + [Network.Kovan]: '0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c', + [Network.Mainnet]: '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6', + }, ]; diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts index 3a820a0c4..4e6e15d38 100644 --- a/packages/instant/src/data/asset_meta_data_map.ts +++ b/packages/instant/src/data/asset_meta_data_map.ts @@ -11,4 +11,10 @@ export const assetMetaDataMap: ObjectMap = { primaryColor: 'rgb(54, 50, 60)', symbol: 'zrx', }, + '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6': { + assetProxyId: AssetProxyId.ERC20, + decimals: 18, + primaryColor: '#512D80', + symbol: 'rep', + }, }; -- cgit From 25ca3d4c29ad98b75e256424246a38a72e5a26da Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 29 Oct 2018 12:51:38 -0700 Subject: feat(instant): add default gasPrice of 6 gwei to transactions --- packages/instant/src/components/buy_button.tsx | 5 +++-- packages/instant/src/constants.ts | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 129aedaf3..e65e62e47 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; -import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; +import { DEFAULT_GAS_PRICE, WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; import { ColorOption } from '../style/theme'; import { ZeroExInstantError } from '../types'; import { getBestAddress } from '../util/address'; @@ -57,7 +57,8 @@ export class BuyButton extends React.Component { let txHash: string | undefined; try { - txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress }); + const gasPrice = DEFAULT_GAS_PRICE; + txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { gasPrice, takerAddress }); } catch (e) { if (e instanceof Error) { if (e.message === AssetBuyerError.SignatureRequestDenied) { diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index e4281d54a..47cb2eaeb 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -3,3 +3,5 @@ export const BIG_NUMBER_ZERO = new BigNumber(0); export const ETH_DECIMALS = 18; export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer'; export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed'; +export const GWEI_IN_WEI = new BigNumber(1000000000); +export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6); -- cgit From ac72df41883af261b8661cb5f52c01567a6aad62 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 15:30:25 -0700 Subject: chore: remove console log --- packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index ad3aa9582..4767b15d4 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -78,7 +78,6 @@ const updateBuyQuoteAsync = async ( try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue); } catch (error) { - console.log(error); dispatch(actions.setQuoteRequestStateFailure()); let errorMessage; if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { -- cgit From 10e6c3cd906c6625ed0c9ae98d20ef9f32676cbe Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 15:48:45 -0700 Subject: feat: remove isValidProvided orders validation --- packages/asset-buyer/src/asset_buyer.ts | 1 - packages/asset-buyer/src/utils/assert.ts | 15 --------- packages/instant/public/index.html | 52 +++++++++++++++++++++----------- 3 files changed, 35 insertions(+), 33 deletions(-) diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts index 34e2d9639..ed52f2d9d 100644 --- a/packages/asset-buyer/src/asset_buyer.ts +++ b/packages/asset-buyer/src/asset_buyer.ts @@ -56,7 +56,6 @@ export class AssetBuyer { ): AssetBuyer { assert.isWeb3Provider('provider', provider); assert.doesConformToSchema('orders', orders, schemas.signedOrdersSchema); - assert.areValidProvidedOrders('orders', orders); assert.assert(orders.length !== 0, `Expected orders to contain at least one order`); const orderProvider = new BasicOrderProvider(orders); const assetBuyer = new AssetBuyer(provider, orderProvider, options); diff --git a/packages/asset-buyer/src/utils/assert.ts b/packages/asset-buyer/src/utils/assert.ts index e8cb7f763..7e4eb7175 100644 --- a/packages/asset-buyer/src/utils/assert.ts +++ b/packages/asset-buyer/src/utils/assert.ts @@ -31,21 +31,6 @@ export const assert = { sharedAssert.isHexString(`${variableName}.takerAssetData`, orderFetcherRequest.takerAssetData); sharedAssert.isNumber(`${variableName}.networkId`, orderFetcherRequest.networkId); }, - areValidProvidedOrders(variableName: string, orders: SignedOrder[]): void { - if (orders.length === 0) { - return; - } - const makerAssetData = orders[0].makerAssetData; - const takerAssetData = orders[0].takerAssetData; - const filteredOrders = _.filter( - orders, - order => order.makerAssetData === makerAssetData && order.takerAssetData === takerAssetData, - ); - sharedAssert.assert( - orders.length === filteredOrders.length, - `Expected all orders in ${variableName} to have the same makerAssetData and takerAssetData.`, - ); - }, isValidPercentage(variableName: string, percentage: number): void { assert.isNumber(variableName, percentage); assert.assert( diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 68d6c69c4..dc172e6e4 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -34,22 +34,40 @@ EXPONENTIAL_AT: 1000, DECIMAL_PLACES: 78, }); - const providedOrder = { - "senderAddress": "0x0000000000000000000000000000000000000000", - "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", - "takerAddress": "0x0000000000000000000000000000000000000000", - "makerFee": new BigNumber("0"), - "takerFee": new BigNumber("0"), - "makerAssetAmount": new BigNumber("400000000000000000000"), - "takerAssetAmount": new BigNumber("40000000000000000000"), - "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c", - "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", - "expirationTimeSeconds": new BigNumber("1543046400"), - "feeRecipientAddress": "0x0000000000000000000000000000000000000000", - "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"), - "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03", - "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" - } + const providedOrders = [ + { + "senderAddress": "0x0000000000000000000000000000000000000000", + "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", + "takerAddress": "0x0000000000000000000000000000000000000000", + "makerFee": new BigNumber("0"), + "takerFee": new BigNumber("0"), + "makerAssetAmount": new BigNumber("400000000000000000000"), + "takerAssetAmount": new BigNumber("40000000000000000000"), + "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c", + "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", + "expirationTimeSeconds": new BigNumber("1543046400"), + "feeRecipientAddress": "0x0000000000000000000000000000000000000000", + "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"), + "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03", + "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" + }, + { + "senderAddress": "0x0000000000000000000000000000000000000000", + "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", + "takerAddress": "0x0000000000000000000000000000000000000000", + "makerFee": new BigNumber("0"), + "takerFee": new BigNumber("0"), + "makerAssetAmount": new BigNumber("300000000000000000000"), + "takerAssetAmount": new BigNumber("31000000000000000000"), + "makerAssetData": "0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa", + "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", + "expirationTimeSeconds": new BigNumber("2524636800"), + "feeRecipientAddress": "0x0000000000000000000000000000000000000000", + "salt": new BigNumber("64592004666704945574675477805199411288137454783320798602050822322450089238268"), + "signature": "0x1c13cacddca8d7d8248e91f412377e68f8f1f9891a59a6c1b2eea9f7b33558c30c4fb86a448e08ab7def40a28fb3a3062dcb33bb3c45302447fce5c4288b7c7f5b03", + "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" + } + ]; const queryParams = new Uri(window.location.search); const renderOptionsDefaults = { liquiditySource: 'https://api.radarrelay.com/0x/v2/', @@ -57,7 +75,7 @@ } const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource'); const renderOptionsOverrides = { - liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride, + liquiditySource: liquiditySourceOverride === 'provided' ? providedOrders : liquiditySourceOverride, assetData: queryParams.getQueryParamValue('assetData'), networkId: +queryParams.getQueryParamValue('networkId') || undefined, defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined, -- cgit From 17f024056a56ae1b67a3a674f24460172ae84d27 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 15:50:54 -0700 Subject: chore: add changelog --- packages/asset-buyer/CHANGELOG.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json index 5d6604ea9..ce4effa7e 100644 --- a/packages/asset-buyer/CHANGELOG.json +++ b/packages/asset-buyer/CHANGELOG.json @@ -5,6 +5,10 @@ { "note": "`getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4", "pr": 1187 + }, + { + "note": "No longer require that provided orders all have the same maker and taker asset data", + "pr": 1197 } ] }, -- cgit From 475698ed92dc6310591ec9d0653eaa931d7e03f6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 17:02:46 -0700 Subject: feat: add basic panel component and other small improvements --- .../instant/src/components/instant_heading.tsx | 8 +++---- packages/instant/src/components/panel.tsx | 27 ++++++++++++++++++++++ packages/instant/src/components/ui/index.ts | 2 ++ .../src/components/zero_ex_instant_container.tsx | 5 ++-- packages/instant/src/style/z_index.ts | 5 ++++ 5 files changed, 40 insertions(+), 7 deletions(-) create mode 100644 packages/instant/src/components/panel.tsx create mode 100644 packages/instant/src/style/z_index.ts diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 1ef276ff3..81aa62a77 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -8,9 +8,7 @@ import { AsyncProcessState, OrderProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; -import { Container, Flex, Text } from './ui'; -import { Icon } from './ui/icon'; -import { Spinner } from './ui/spinner'; +import { Container, Flex, Icon, Spinner, Text } from './ui'; export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; @@ -72,11 +70,11 @@ export class InstantHeading extends React.Component { const processState = this.props.buyOrderState.processState; if (processState === OrderProcessState.FAILURE) { - return ; + return ; } else if (processState === OrderProcessState.PROCESSING) { return ; } else if (processState === OrderProcessState.SUCCESS) { - return ; + return ; } return undefined; } diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx new file mode 100644 index 000000000..bb16ed9b1 --- /dev/null +++ b/packages/instant/src/components/panel.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; +import { zIndex } from '../style/z_index'; + +import { Button, Container, Text } from './ui'; + +export interface PanelProps { + onClose?: () => void; +} + +export const Panel: React.StatelessComponent = ({ children, onClose }) => ( + + + {children} + +); diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts index bf5f6c700..7cfee2491 100644 --- a/packages/instant/src/components/ui/index.ts +++ b/packages/instant/src/components/ui/index.ts @@ -3,3 +3,5 @@ export { Button } from './button'; export { Flex } from './flex'; export { Container } from './container'; export { Input } from './input'; +export { Icon } from './icon'; +export { Spinner } from './spinner'; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index ff19351ff..ded0d075e 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -6,6 +6,7 @@ import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; +import { zIndex } from '../style/z_index'; import { Container, Flex } from './ui'; @@ -13,11 +14,11 @@ export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent = props => ( - + Date: Mon, 29 Oct 2018 17:48:17 -0700 Subject: feat: add chevron icon and add it to asset amount input --- .../instant/src/components/instant_heading.tsx | 5 +++- packages/instant/src/components/ui/icon.tsx | 28 ++++++++++++++++++---- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 81aa62a77..00c45ba3a 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -21,7 +21,7 @@ export interface InstantHeadingProps { const PLACEHOLDER_COLOR = ColorOption.white; const ICON_WIDTH = 34; const ICON_HEIGHT = 34; -const ICON_COLOR = ColorOption.white; +const ICON_COLOR = 'white'; export class InstantHeading extends React.Component { public render(): React.ReactNode { @@ -48,6 +48,9 @@ export class InstantHeading extends React.Component { + + + {iconOrAmounts} diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx index 7373c3acd..61b382760 100644 --- a/packages/instant/src/components/ui/icon.tsx +++ b/packages/instant/src/components/ui/icon.tsx @@ -1,17 +1,21 @@ import * as React from 'react'; -import { ColorOption } from '../../style/theme'; - type svgRule = 'evenodd' | 'nonzero' | 'inherit'; interface IconInfo { viewBox: string; + path: string; fillRule?: svgRule; clipRule?: svgRule; - path: string; + stroke?: string; + strokeOpacity?: number; + strokeWidth?: number; + strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'; + strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit'; } interface IconInfoMapping { failed: IconInfo; success: IconInfo; + chevron: IconInfo; } const ICONS: IconInfoMapping = { failed: { @@ -28,12 +32,21 @@ const ICONS: IconInfoMapping = { path: 'M17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17C0 26.3888 7.61133 34 17 34ZM25.7539 13.0977C26.2969 12.4718 26.2295 11.5244 25.6035 10.9817C24.9775 10.439 24.0303 10.5063 23.4878 11.1323L15.731 20.0771L12.3936 16.7438C11.8071 16.1583 10.8574 16.1589 10.272 16.7451C9.68652 17.3313 9.6875 18.281 10.2734 18.8665L14.75 23.3373L15.8887 24.4746L16.9434 23.2587L25.7539 13.0977Z', }, + chevron: { + viewBox: '0 0 12 7', + path: 'M11 1L6 6L1 1', + stroke: 'white', + strokeOpacity: 0.5, + strokeWidth: 1.5, + strokeLinecap: 'round', + strokeLinejoin: 'round', + }, }; export interface IconProps { width: number; - height: number; - color: ColorOption; + height?: number; + color?: string; icon: keyof IconInfoMapping; } export const Icon: React.SFC = props => { @@ -52,6 +65,11 @@ export const Icon: React.SFC = props => { fill={props.color} fillRule={iconInfo.fillRule || 'nonzero'} clipRule={iconInfo.clipRule || 'nonzero'} + stroke={iconInfo.stroke} + strokeOpacity={iconInfo.strokeOpacity} + strokeWidth={iconInfo.strokeWidth} + strokeLinecap={iconInfo.strokeLinecap} + strokeLinejoin={iconInfo.strokeLinejoin} /> ); -- cgit From d0a0af51306bf5e5b46fd8982c70b271212af42f Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 18:37:23 -0700 Subject: feat: add 'Select Token' UI to asset amount input --- .../src/components/erc20_asset_amount_input.tsx | 69 ++++++++++++++++++---- .../instant/src/components/instant_heading.tsx | 3 - packages/instant/src/components/ui/container.tsx | 2 + packages/instant/src/components/ui/flex.tsx | 4 +- 4 files changed, 61 insertions(+), 17 deletions(-) diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 5abb34c2f..4108fd0e8 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -8,13 +8,14 @@ import { BigNumberInput } from '../util/big_number_input'; import { util } from '../util/util'; import { ScalingAmountInput } from './scaling_amount_input'; -import { Container, Text } from './ui'; +import { Container, Flex, Icon, Text } from './ui'; // Asset amounts only apply to ERC20 assets export interface ERC20AssetAmountInputProps { asset?: ERC20Asset; value?: BigNumberInput; onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; + onSymbolClick: (asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; isDisabled: boolean; @@ -27,6 +28,7 @@ export interface ERC20AssetAmountInputState { export class ERC20AssetAmountInput extends React.Component { public static defaultProps = { onChange: util.boundNoop, + onSymbolClick: util.boundNoop, isDisabled: false, }; constructor(props: ERC20AssetAmountInputProps) { @@ -36,10 +38,18 @@ export class ERC20AssetAmountInput extends React.Component + {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()} + + ); + } + private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => { + const { onChange, ...rest } = this.props; + const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`; + return ( + - - - {assetUtils.formattedSymbolForAsset(asset)} - + + + + {assetUtils.formattedSymbolForAsset(asset)} + + {this._renderChevronIcon()} + + + ); + }; + private readonly _renderBackupContent = (): React.ReactNode => { + return ( + + + Select Token + + {this._renderChevronIcon()} + + ); + }; + private readonly _renderChevronIcon = (): React.ReactNode => { + return ( + + ); - } + }; private readonly _handleChange = (value?: BigNumberInput): void => { this.props.onChange(value, this.props.asset); }; @@ -69,6 +111,9 @@ export class ERC20AssetAmountInput extends React.Component { + this.props.onSymbolClick(this.props.asset); + }; // For assets with symbols of different length, // start scaling the input at different character lengths private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => { diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 00c45ba3a..0b41d44d7 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -48,9 +48,6 @@ export class InstantHeading extends React.Component { - - - {iconOrAmounts} diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 76b570de7..b6842b294 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -28,6 +28,7 @@ export interface ContainerProps { zIndex?: number; whiteSpace?: string; opacity?: number; + cursor?: string; } export const Container = @@ -57,6 +58,7 @@ export const Container = ${props => cssRuleIfExists(props, 'z-index')} ${props => cssRuleIfExists(props, 'white-space')} ${props => cssRuleIfExists(props, 'opacity')} + ${props => cssRuleIfExists(props, 'cursor')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 5fa3fc95b..29c6511bb 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -9,14 +9,14 @@ export interface FlexProps { width?: string; height?: string; backgroundColor?: ColorOption; - className?: string; + inline?: boolean; } export const Flex = styled.div < FlexProps > ` - display: flex; + display: ${props => (props.inline ? 'inline-flex' : 'flex')}; flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; justify-content: ${props => props.justify}; -- cgit From a918e7099dbd4351150d5d6852cbd57d1b1b3875 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 24 Oct 2018 11:42:31 -0700 Subject: fix(website): prepare website for breaking MetaMask change for eip 1102 --- packages/website/ts/blockchain.ts | 127 ++++++++++++++++++++------------------ packages/website/ts/types.ts | 8 --- 2 files changed, 66 insertions(+), 69 deletions(-) diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 62e16dd1d..b43c41739 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -20,7 +20,7 @@ import { Web3ProviderEngine, } from '@0x/subproviders'; import { SignedOrder, Token as ZeroExToken } from '@0x/types'; -import { BigNumber, intervalUtils, logUtils, promisify } from '@0x/utils'; +import { BigNumber, intervalUtils, logUtils } from '@0x/utils'; import { Web3Wrapper } from '@0x/web3-wrapper'; import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types'; import * as _ from 'lodash'; @@ -38,9 +38,9 @@ import { BlockchainErrs, ContractInstance, Fill, + InjectedProvider, InjectedProviderObservable, InjectedProviderUpdate, - InjectedWeb3, Providers, ProviderType, Side, @@ -83,6 +83,7 @@ export class Blockchain { private _ledgerSubprovider: LedgerSubprovider; private _defaultGasPrice: BigNumber; private _watchGasPriceIntervalId: NodeJS.Timer; + private _injectedProviderIfExists?: InjectedProvider; private static _getNameGivenProvider(provider: Provider): string { const providerType = utils.getProviderType(provider); const providerNameIfExists = providerToName[providerType]; @@ -91,48 +92,12 @@ export class Blockchain { } return providerNameIfExists; } - private static _getInjectedWeb3(): InjectedWeb3 { - const injectedWeb3IfExists = (window as any).web3; - // Our core assumptions about the injected web3 object is that it has the following - // properties and methods. - if ( - _.isUndefined(injectedWeb3IfExists) || - _.isUndefined(injectedWeb3IfExists.version) || - _.isUndefined(injectedWeb3IfExists.version.getNetwork) || - _.isUndefined(injectedWeb3IfExists.currentProvider) - ) { - return undefined; - } - return injectedWeb3IfExists; - } - private static async _getInjectedWeb3ProviderNetworkIdIfExistsAsync(): Promise { - // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in - // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot - // retrieve it from within the web3Wrapper constructor. This is and should remain the only - // call to a web3 instance outside of web3Wrapper in the entire dapp. - // In addition, if the user has an injectedWeb3 instance that is disconnected from a backing - // Ethereum node, this call will throw. We need to handle this case gracefully - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - let networkIdIfExists: number; - if (!_.isUndefined(injectedWeb3IfExists)) { - try { - networkIdIfExists = _.parseInt( - await promisify( - injectedWeb3IfExists.version.getNetwork.bind(injectedWeb3IfExists.version), - )(), - ); - } catch (err) { - // Ignore error and proceed with networkId undefined - } - } - return networkIdIfExists; - } private static async _getProviderAsync( - injectedWeb3: InjectedWeb3, - networkIdIfExists: number, + injectedProviderIfExists?: InjectedProvider, + networkIdIfExists?: number, shouldUserLedgerProvider: boolean = false, ): Promise<[Provider, LedgerSubprovider | undefined]> { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3); + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); const isNetworkIdAvailable = !_.isUndefined(networkIdIfExists); const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists]; const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId); @@ -156,16 +121,16 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, ledgerSubprovider]; - } else if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) { + } else if (doesInjectedProviderExist && isPublicNodeAvailableForNetworkId) { // We catch all requests involving a users account and send it to the injectedWeb3 // instance. All other requests go to the public hosted node. const provider = new Web3ProviderEngine(); - const providerName = this._getNameGivenProvider(injectedWeb3.currentProvider); + const providerName = this._getNameGivenProvider(injectedProviderIfExists); // Wrap Metamask in a compatability wrapper MetamaskSubprovider (to handle inconsistencies) const signerSubprovider = providerName === constants.PROVIDER_NAME_METAMASK - ? new MetamaskSubprovider(injectedWeb3.currentProvider) - : new SignerSubprovider(injectedWeb3.currentProvider); + ? new MetamaskSubprovider(injectedProviderIfExists) + : new SignerSubprovider(injectedProviderIfExists); provider.addProvider(signerSubprovider); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { @@ -174,9 +139,9 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, undefined]; - } else if (doesInjectedWeb3Exist) { + } else if (doesInjectedProviderExist) { // Since no public node for this network, all requests go to injectedWeb3 instance - return [injectedWeb3.currentProvider, undefined]; + return [injectedProviderIfExists, undefined]; } else { // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node // We do this so that users can still browse the 0x Portal DApp even if they do not have web3 @@ -261,7 +226,7 @@ export class Blockchain { const shouldUserLedgerProvider = false; this._dispatcher.updateBlockchainIsLoaded(false); // We don't want to be out of sync with the network the injected provider declares. - const networkId = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkId = await this._getInjectedProviderNetworkIdIfExistsAsync(); await this._resetOrInitializeAsync(networkId, shouldPollUserAddress, shouldUserLedgerProvider); } public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise { @@ -611,6 +576,45 @@ export class Blockchain { this._dispatcher.updateBlockchainIsLoaded(true); } + private async _getInjectedProviderIfExistsAsync(): Promise { + if (!_.isUndefined(this._injectedProviderIfExists)) { + return this._injectedProviderIfExists; + } + let injectedProviderIfExists = (window as any).ethereum; + if (!_.isUndefined(injectedProviderIfExists)) { + if (!_.isUndefined(injectedProviderIfExists.enable)) { + try { + await injectedProviderIfExists.enable(); + } catch (err) { + errorReporter.report(err); + } + } + } else { + const injectedWeb3IfExists = (window as any).web3; + if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) { + injectedProviderIfExists = injectedWeb3IfExists.currentProvider; + } else { + return undefined; + } + } + this._injectedProviderIfExists = injectedProviderIfExists; + return injectedProviderIfExists; + } + private async _getInjectedProviderNetworkIdIfExistsAsync(): Promise { + // If the user has an injectedWeb3 instance that is disconnected from a backing + // Ethereum node, this call will throw. We need to handle this case gracefully + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + let networkIdIfExists: number; + if (!_.isUndefined(injectedProviderIfExists)) { + try { + const injectedWeb3Wrapper = new Web3Wrapper(injectedProviderIfExists); + networkIdIfExists = await injectedWeb3Wrapper.getNetworkIdAsync(); + } catch (err) { + // Ignore error and proceed with networkId undefined + } + } + return networkIdIfExists; + } private async _showEtherScanLinkAndAwaitTransactionMinedAsync( txHash: string, ): Promise { @@ -804,17 +808,17 @@ export class Blockchain { } private async _onPageLoadInitFireAndForgetAsync(): Promise { await utils.onPageLoadPromise; // wait for page to load - const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkIdIfExists = await this._getInjectedProviderNetworkIdIfExistsAsync(); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { - const injectedProviderObservable = injectedWeb3IfExists.currentProvider.publicConfigStore; + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + if (!_.isUndefined(injectedProviderIfExists)) { + const injectedProviderObservable = injectedProviderIfExists.publicConfigStore; if (!_.isUndefined(injectedProviderObservable) && _.isUndefined(this._injectedProviderObservable)) { this._injectedProviderObservable = injectedProviderObservable; this._injectedProviderObservable.subscribe(this._injectedProviderUpdateHandler); } } - this._updateProviderName(injectedWeb3IfExists); + this._updateProviderName(injectedProviderIfExists); const shouldPollUserAddress = true; const shouldUseLedgerProvider = false; this._startWatchingGasPrice(); @@ -851,12 +855,14 @@ export class Blockchain { } this._dispatcher.updateUserWeiBalance(undefined); this.networkId = networkId; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); const [provider, ledgerSubproviderIfExists] = await Blockchain._getProviderAsync( - injectedWeb3IfExists, + injectedProviderIfExists, networkId, shouldUserLedgerProvider, ); + this._web3Wrapper = new Web3Wrapper(provider); + this.networkId = await this._web3Wrapper.getNetworkIdAsync(); if (!_.isUndefined(this._contractWrappers)) { this._contractWrappers.unsubscribeAll(); } @@ -867,7 +873,6 @@ export class Blockchain { if (!_.isUndefined(this._blockchainWatcher)) { this._blockchainWatcher.destroy(); } - this._web3Wrapper = new Web3Wrapper(provider); this._blockchainWatcher = new BlockchainWatcher(this._dispatcher, this._web3Wrapper, shouldPollUserAddress); if (shouldUserLedgerProvider && !_.isUndefined(ledgerSubproviderIfExists)) { delete this._userAddressIfExists; @@ -879,7 +884,7 @@ export class Blockchain { const userAddresses = await this._web3Wrapper.getAvailableAddressesAsync(); this._userAddressIfExists = userAddresses[0]; this._dispatcher.updateUserAddress(this._userAddressIfExists); - if (!_.isUndefined(injectedWeb3IfExists)) { + if (!_.isUndefined(injectedProviderIfExists)) { this._dispatcher.updateProviderType(ProviderType.Injected); } await this.fetchTokenInformationAsync(); @@ -888,10 +893,10 @@ export class Blockchain { this._dispatcher.updateNetworkId(networkId); await this._rehydrateStoreWithContractEventsAsync(); } - private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists); - const providerName = doesInjectedWeb3Exist - ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider) + private _updateProviderName(injectedProviderIfExists?: InjectedProvider): void { + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); + const providerName = doesInjectedProviderExist + ? Blockchain._getNameGivenProvider(injectedProviderIfExists) : constants.PROVIDER_NAME_PUBLIC; this._dispatcher.updateInjectedProviderName(providerName); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 22bfd2cb4..ce4b50a58 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -616,14 +616,6 @@ export interface InjectedProvider extends Provider { publicConfigStore?: InjectedProviderObservable; } -// Minimal expected interface for an injected web3 object -export interface InjectedWeb3 { - currentProvider: InjectedProvider; - version: { - getNetwork(cd: (err: Error, networkId: string) => void): void; - }; -} - export interface TutorialInfo { iconUrl: string; description: string; -- cgit From a49bf353f85c22a029db3085a620f3c031b52d73 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 15:21:58 -0700 Subject: feat: refactor animation code --- .../components/animations/position_animation.tsx | 70 ++++++++++++++++++++++ .../src/components/animations/slide_animations.tsx | 58 +++--------------- .../src/components/erc20_asset_amount_input.tsx | 7 ++- .../instant/src/components/instant_heading.tsx | 10 ++-- packages/instant/src/components/panel.tsx | 9 +-- packages/instant/src/components/sliding_error.tsx | 28 ++++++--- packages/instant/src/components/ui/container.tsx | 2 + .../src/components/zero_ex_instant_container.tsx | 10 +++- packages/instant/src/containers/latest_error.tsx | 9 +-- .../selected_erc20_asset_amount_input.ts | 1 + 10 files changed, 130 insertions(+), 74 deletions(-) create mode 100644 packages/instant/src/components/animations/position_animation.tsx diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx new file mode 100644 index 000000000..de38ee30a --- /dev/null +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { Keyframes } from 'styled-components'; + +import { css, keyframes, styled } from '../../style/theme'; + +const generateTransitionInfoCss = ( + key: keyof TransitionInfo, + top?: TransitionInfo, + bottom?: TransitionInfo, + left?: TransitionInfo, + right?: TransitionInfo, +): string => { + const topStringIfExists = top ? `top: ${top[key]};` : ''; + const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : ''; + const leftStringIfExists = left ? `left: ${left[key]};` : ''; + const rightStringIfExists = right ? `right: ${right[key]};` : ''; + return ` + ${topStringIfExists} + ${bottomStringIfExists} + ${leftStringIfExists} + ${rightStringIfExists} + `; +}; + +const slideKeyframeGenerator = ( + top?: TransitionInfo, + bottom?: TransitionInfo, + left?: TransitionInfo, + right?: TransitionInfo, +) => keyframes` + from { + position: relative; + ${generateTransitionInfoCss('from', top, bottom, left, right)} + } + + to { + position: relative; + ${generateTransitionInfoCss('to', top, bottom, left, right)} + } +`; + +export interface TransitionInfo { + from: string; + to: string; +} + +export interface PositionAnimationProps { + top?: TransitionInfo; + bottom?: TransitionInfo; + left?: TransitionInfo; + right?: TransitionInfo; + timingFunction: string; + direction?: string; +} + +export const PositionAnimation = + styled.div < + PositionAnimationProps > + ` + animation-name: ${props => + css` + ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)}; + `}; + animation-duration: 0.3s; + animation-timing-function: ${props => props.timingFunction}; + animation-delay: 0s; + animation-iteration-count: 1; + animation-fill-mode: ${props => props.direction || 'none'}; + position: relative; +`; diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 84280372b..99533a2f0 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -3,56 +3,16 @@ import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; -const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` - from { - position: relative; - top: ${fromY}; - } - - to { - position: relative; - top: ${toY}; - } -`; +import { PositionAnimation, PositionAnimationProps } from './position_animation'; +export type SlideAnimationPhase = 'slideIn' | 'slideOut'; export interface SlideAnimationProps { - keyframes: Keyframes; - animationType: string; - animationDirection?: string; + phase: SlideAnimationPhase; + slideIn: PositionAnimationProps; + slideOut: PositionAnimationProps; } -export const SlideAnimation = - styled.div < - SlideAnimationProps > - ` - animation-name: ${props => - css` - ${props.keyframes}; - `}; - animation-duration: 0.3s; - animation-timing-function: ${props => props.animationType}; - animation-delay: 0s; - animation-iteration-count: 1; - animation-fill-mode: ${props => props.animationDirection || 'none'}; - position: relative; -`; - -export interface SlideAnimationComponentProps { - downY: string; -} - -export const SlideUpAnimation: React.StatelessComponent = props => ( - - {props.children} - -); - -export const SlideDownAnimation: React.StatelessComponent = props => ( - - {props.children} - -); +export const SlideAnimation: React.StatelessComponent = props => { + const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; + return {props.children}; +}; diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 4108fd0e8..bed1b3b4e 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps { asset?: ERC20Asset; value?: BigNumberInput; onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; - onSymbolClick: (asset?: ERC20Asset) => void; + onSymbolClick?: (asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; isDisabled: boolean; @@ -28,7 +28,6 @@ export interface ERC20AssetAmountInputState { export class ERC20AssetAmountInput extends React.Component { public static defaultProps = { onChange: util.boundNoop, - onSymbolClick: util.boundNoop, isDisabled: false, }; constructor(props: ERC20AssetAmountInputProps) { @@ -112,7 +111,9 @@ export class ERC20AssetAmountInput extends React.Component { - this.props.onSymbolClick(this.props.asset); + if (this.props.onSymbolClick) { + this.props.onSymbolClick(this.props.asset); + } }; // For assets with symbols of different length, // start scaling the input at different character lengths diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 0b41d44d7..e1c2f8bc3 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -60,8 +60,8 @@ export class InstantHeading extends React.Component { private _renderAmountsSection(): React.ReactNode { return ( - {this._placeholderOrAmount(this._ethAmount)} - {this._placeholderOrAmount(this._dollarAmount)} + {this._renderPlaceholderOrAmount(this._renderEthAmount)} + {this._renderPlaceholderOrAmount(this._renderDollarAmount)} ); } @@ -92,7 +92,7 @@ export class InstantHeading extends React.Component { return 'I want to buy'; } - private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { + private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { return ; } @@ -102,7 +102,7 @@ export class InstantHeading extends React.Component { return amountFunction(); } - private readonly _ethAmount = (): React.ReactNode => { + private readonly _renderEthAmount = (): React.ReactNode => { return ( {format.ethBaseAmount( @@ -114,7 +114,7 @@ export class InstantHeading extends React.Component { ); }; - private readonly _dollarAmount = (): React.ReactNode => { + private readonly _renderDollarAmount = (): React.ReactNode => { return ( {format.ethBaseAmountInUsd( diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx index bb16ed9b1..ecefadced 100644 --- a/packages/instant/src/components/panel.tsx +++ b/packages/instant/src/components/panel.tsx @@ -12,10 +12,11 @@ export interface PanelProps { export const Panel: React.StatelessComponent = ({ children, onClose }) => ( diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index cc9abb7dd..8f209765e 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations'; +import { PositionAnimationProps } from './animations/position_animation'; +import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations'; import { Container, Flex, Text } from './ui'; @@ -31,16 +32,29 @@ export const Error: React.StatelessComponent = props => ( ); -export type SlidingDirection = 'up' | 'down'; export interface SlidingErrorProps extends ErrorProps { - direction: SlidingDirection; + phase: SlideAnimationPhase; } export const SlidingError: React.StatelessComponent = props => { - const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation; - + const slideAmount = '120px'; + const slideUp: PositionAnimationProps = { + timingFunction: 'ease-in', + top: { + from: slideAmount, + to: '0px', + }, + }; + const slideDown: PositionAnimationProps = { + timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)', + top: { + from: '0px', + to: slideAmount, + }, + direction: 'forwards', + }; return ( - + - + ); }; diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index b6842b294..7b8642761 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -29,6 +29,7 @@ export interface ContainerProps { whiteSpace?: string; opacity?: number; cursor?: string; + overflow?: string; } export const Container = @@ -59,6 +60,7 @@ export const Container = ${props => cssRuleIfExists(props, 'white-space')} ${props => cssRuleIfExists(props, 'opacity')} ${props => cssRuleIfExists(props, 'cursor')} + ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index ded0d075e..c8d5235c8 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -4,16 +4,16 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order import { LatestError } from '../containers/latest_error'; import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; - import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; +import { Panel } from './panel'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent = props => ( - + @@ -23,6 +23,7 @@ export const ZeroExInstantContainer: React.StatelessComponent @@ -31,6 +32,11 @@ export const ZeroExInstantContainer: React.StatelessComponent + {/* + + Hey + + */} ); diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 45ca09673..2a8d232da 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; +import { SlideAnimationPhase } from '../components/animations/slide_animations'; import { SlidingError } from '../components/sliding_error'; import { State } from '../redux/reducer'; import { Asset, DisplayStatus } from '../types'; @@ -9,26 +10,26 @@ import { Asset, DisplayStatus } from '../types'; export interface LatestErrorComponentProps { asset?: Asset; latestErrorMessage?: string; - slidingDirection: 'down' | 'up'; + slidingPhase: SlideAnimationPhase; } export const LatestErrorComponent: React.StatelessComponent = props => { if (!props.latestErrorMessage) { return
; } - return ; + return ; }; interface ConnectedState { asset?: Asset; latestErrorMessage?: string; - slidingDirection: 'down' | 'up'; + slidingPhase: SlideAnimationPhase; } export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ asset: state.selectedAsset, latestErrorMessage: state.latestErrorMessage, - slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down', + slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index 4767b15d4..4df7faab9 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -19,6 +19,7 @@ import { errorFlasher } from '../util/error_flasher'; export interface SelectedERC20AssetAmountInputProps { fontColor?: ColorOption; startingFontSizePx: number; + onSymbolClick?: (asset?: ERC20Asset) => void; } interface ConnectedState { -- cgit From 4456c3ee14f5cd778e0d16ab42a3e2e34d102f23 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 15:32:43 -0700 Subject: feat: allow for flexible position in position animation component --- .../src/components/animations/position_animation.tsx | 15 ++++++++++----- .../src/components/animations/slide_animations.tsx | 13 +++++++++---- packages/instant/src/components/sliding_error.tsx | 8 ++++---- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx index de38ee30a..3d6b5f8dc 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -23,18 +23,19 @@ const generateTransitionInfoCss = ( }; const slideKeyframeGenerator = ( + position: string, top?: TransitionInfo, bottom?: TransitionInfo, left?: TransitionInfo, right?: TransitionInfo, ) => keyframes` from { - position: relative; + position: ${position}; ${generateTransitionInfoCss('from', top, bottom, left, right)} } to { - position: relative; + position: ${position}; ${generateTransitionInfoCss('to', top, bottom, left, right)} } `; @@ -44,7 +45,7 @@ export interface TransitionInfo { to: string; } -export interface PositionAnimationProps { +export interface PositionAnimationSettings { top?: TransitionInfo; bottom?: TransitionInfo; left?: TransitionInfo; @@ -53,18 +54,22 @@ export interface PositionAnimationProps { direction?: string; } +export interface PositionAnimationProps extends PositionAnimationSettings { + position: string; +} + export const PositionAnimation = styled.div < PositionAnimationProps > ` animation-name: ${props => css` - ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)}; + ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)}; `}; animation-duration: 0.3s; animation-timing-function: ${props => props.timingFunction}; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: ${props => props.direction || 'none'}; - position: relative; + position: ${props => props.position}; `; diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 99533a2f0..9f1535297 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -3,16 +3,21 @@ import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; -import { PositionAnimation, PositionAnimationProps } from './position_animation'; +import { PositionAnimation, PositionAnimationSettings } from './position_animation'; export type SlideAnimationPhase = 'slideIn' | 'slideOut'; export interface SlideAnimationProps { + position: string; phase: SlideAnimationPhase; - slideIn: PositionAnimationProps; - slideOut: PositionAnimationProps; + slideIn: PositionAnimationSettings; + slideOut: PositionAnimationSettings; } export const SlideAnimation: React.StatelessComponent = props => { const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; - return {props.children}; + return ( + + {props.children} + + ); }; diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index 8f209765e..0ad11bbad 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { PositionAnimationProps } from './animations/position_animation'; +import { PositionAnimationSettings } from './animations/position_animation'; import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations'; import { Container, Flex, Text } from './ui'; @@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps { } export const SlidingError: React.StatelessComponent = props => { const slideAmount = '120px'; - const slideUp: PositionAnimationProps = { + const slideUp: PositionAnimationSettings = { timingFunction: 'ease-in', top: { from: slideAmount, to: '0px', }, }; - const slideDown: PositionAnimationProps = { + const slideDown: PositionAnimationSettings = { timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)', top: { from: '0px', @@ -53,7 +53,7 @@ export const SlidingError: React.StatelessComponent = props = direction: 'forwards', }; return ( - + ); -- cgit From 91f8487947d7941b508c34d1bfc1e72c0840c33d Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 16:57:42 -0700 Subject: feat: implement sliding panel --- .../components/animations/position_animation.tsx | 9 +-- .../src/components/animations/slide_animation.tsx | 23 +++++++ .../src/components/animations/slide_animations.tsx | 23 ------- .../instant/src/components/instant_heading.tsx | 8 ++- packages/instant/src/components/panel.tsx | 28 -------- packages/instant/src/components/sliding_error.tsx | 12 ++-- packages/instant/src/components/sliding_panel.tsx | 54 +++++++++++++++ .../src/components/zero_ex_instant_container.tsx | 78 ++++++++++++++-------- packages/instant/src/containers/latest_error.tsx | 10 +-- .../containers/selected_asset_instant_heading.ts | 6 +- 10 files changed, 155 insertions(+), 96 deletions(-) create mode 100644 packages/instant/src/components/animations/slide_animation.tsx delete mode 100644 packages/instant/src/components/animations/slide_animations.tsx delete mode 100644 packages/instant/src/components/panel.tsx create mode 100644 packages/instant/src/components/sliding_panel.tsx diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx index 3d6b5f8dc..aefd7ef30 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; @@ -51,7 +50,7 @@ export interface PositionAnimationSettings { left?: TransitionInfo; right?: TransitionInfo; timingFunction: string; - direction?: string; + duration?: string; } export interface PositionAnimationProps extends PositionAnimationSettings { @@ -66,10 +65,12 @@ export const PositionAnimation = css` ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)}; `}; - animation-duration: 0.3s; + animation-duration: ${props => props.duration || '0.3s'}; animation-timing-function: ${props => props.timingFunction}; animation-delay: 0s; animation-iteration-count: 1; - animation-fill-mode: ${props => props.direction || 'none'}; + animation-fill-mode: forwards; position: ${props => props.position}; + height: 100%; + width: 100%; `; diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx new file mode 100644 index 000000000..4124e50c3 --- /dev/null +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import { PositionAnimation, PositionAnimationSettings } from './position_animation'; + +export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; +export interface SlideAnimationProps { + position: string; + animationState: SlideAnimationState; + slideIn: PositionAnimationSettings; + slideOut: PositionAnimationSettings; +} + +export const SlideAnimation: React.StatelessComponent = props => { + if (props.animationState === 'none') { + return {props.children}; + } + const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut; + return ( + + {props.children} + + ); +}; diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx deleted file mode 100644 index 9f1535297..000000000 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import { Keyframes } from 'styled-components'; - -import { css, keyframes, styled } from '../../style/theme'; - -import { PositionAnimation, PositionAnimationSettings } from './position_animation'; - -export type SlideAnimationPhase = 'slideIn' | 'slideOut'; -export interface SlideAnimationProps { - position: string; - phase: SlideAnimationPhase; - slideIn: PositionAnimationSettings; - slideOut: PositionAnimationSettings; -} - -export const SlideAnimation: React.StatelessComponent = props => { - const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; - return ( - - {props.children} - - ); -}; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index e1c2f8bc3..08efd1b64 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input'; import { ColorOption } from '../style/theme'; -import { AsyncProcessState, OrderProcessState, OrderState } from '../types'; +import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; @@ -16,6 +16,7 @@ export interface InstantHeadingProps { ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; buyOrderState: OrderState; + onSymbolClick?: (asset?: ERC20Asset) => void; } const PLACEHOLDER_COLOR = ColorOption.white; @@ -47,7 +48,10 @@ export class InstantHeading extends React.Component { - + {iconOrAmounts} diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx deleted file mode 100644 index ecefadced..000000000 --- a/packages/instant/src/components/panel.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { zIndex } from '../style/z_index'; - -import { Button, Container, Text } from './ui'; - -export interface PanelProps { - onClose?: () => void; -} - -export const Panel: React.StatelessComponent = ({ children, onClose }) => ( - - - {children} - -); diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index 0ad11bbad..a89e201c0 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { PositionAnimationSettings } from './animations/position_animation'; -import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations'; +import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; import { Container, Flex, Text } from './ui'; @@ -33,7 +33,7 @@ export const Error: React.StatelessComponent = props => ( ); export interface SlidingErrorProps extends ErrorProps { - phase: SlideAnimationPhase; + animationState: SlideAnimationState; } export const SlidingError: React.StatelessComponent = props => { const slideAmount = '120px'; @@ -50,10 +50,14 @@ export const SlidingError: React.StatelessComponent = props = from: '0px', to: slideAmount, }, - direction: 'forwards', }; return ( - + ); diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx new file mode 100644 index 000000000..19034eb95 --- /dev/null +++ b/packages/instant/src/components/sliding_panel.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; +import { zIndex } from '../style/z_index'; + +import { PositionAnimationSettings } from './animations/position_animation'; +import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; +import { Button, Container, Text } from './ui'; + +export interface PanelProps { + onClose?: () => void; +} + +export const Panel: React.StatelessComponent = ({ children, onClose }) => ( + + + {children} + +); + +export interface SlidingPanelProps extends PanelProps { + animationState: SlideAnimationState; +} + +export const SlidingPanel: React.StatelessComponent = props => { + if (props.animationState === 'none') { + return null; + } + const { animationState, ...rest } = props; + const slideAmount = '100%'; + const slideUp: PositionAnimationSettings = { + duration: '0.3s', + timingFunction: 'ease-in-out', + top: { + from: slideAmount, + to: '0px', + }, + }; + const slideDown: PositionAnimationSettings = { + duration: '0.3s', + timingFunction: 'ease-out', + top: { + from: '0px', + to: slideAmount, + }, + }; + return ( + + + + ); +}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index c8d5235c8..818a9a957 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -7,36 +7,58 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; -import { Panel } from './panel'; +import { SlideAnimationState } from './animations/slide_animation'; +import { SlidingPanel } from './sliding_panel'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} +export interface ZeroExInstantContainerState { + tokenSelectionPanelAnimationState: SlideAnimationState; +} -export const ZeroExInstantContainer: React.StatelessComponent = props => ( - - - - - - - - - - +export class ZeroExInstantContainer extends React.Component { + public state = { + tokenSelectionPanelAnimationState: 'none' as SlideAnimationState, + }; + public render(): React.ReactNode { + return ( + + + - - {/* - - Hey - - */} - - -); + + + + + + + + + + Select Your Token + + + + ); + } + private readonly _handleSymbolClick = (): void => { + this.setState({ + tokenSelectionPanelAnimationState: 'slidIn', + }); + }; + private readonly _handlePanelClose = (): void => { + this.setState({ + tokenSelectionPanelAnimationState: 'slidOut', + }); + }; +} diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 2a8d232da..99e55a6c4 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import { SlideAnimationPhase } from '../components/animations/slide_animations'; +import { SlideAnimationState } from '../components/animations/slide_animation'; import { SlidingError } from '../components/sliding_error'; import { State } from '../redux/reducer'; import { Asset, DisplayStatus } from '../types'; @@ -10,26 +10,26 @@ import { Asset, DisplayStatus } from '../types'; export interface LatestErrorComponentProps { asset?: Asset; latestErrorMessage?: string; - slidingPhase: SlideAnimationPhase; + animationState: SlideAnimationState; } export const LatestErrorComponent: React.StatelessComponent = props => { if (!props.latestErrorMessage) { return
; } - return ; + return ; }; interface ConnectedState { asset?: Asset; latestErrorMessage?: string; - slidingPhase: SlideAnimationPhase; + animationState: SlideAnimationState; } export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ asset: state.selectedAsset, latestErrorMessage: state.latestErrorMessage, - slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut', + animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index 6b2a29b07..e413c7ef1 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -5,11 +5,13 @@ import { connect } from 'react-redux'; import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; -import { AsyncProcessState, OrderState } from '../types'; +import { AsyncProcessState, ERC20Asset, OrderState } from '../types'; import { InstantHeading } from '../components/instant_heading'; -export interface InstantHeadingProps {} +export interface InstantHeadingProps { + onSymbolClick?: (asset?: ERC20Asset) => void; +} interface ConnectedState { selectedAssetAmount?: BigNumber; -- cgit From 27258fe3d45b8ffae81b74da43e473ae5905edc1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 31 Oct 2018 11:55:48 -0700 Subject: chore: address PR feedback --- .../src/components/animations/position_animation.tsx | 14 +++++++++----- .../instant/src/components/animations/slide_animation.tsx | 6 +++--- .../instant/src/components/buy_order_state_buttons.tsx | 11 ++++------- .../instant/src/components/erc20_asset_amount_input.tsx | 8 ++++---- packages/instant/src/components/instant_heading.tsx | 4 ++-- packages/instant/src/components/placing_order_button.tsx | 5 +---- packages/instant/src/components/secondary_button.tsx | 3 +-- packages/instant/src/components/sliding_error.tsx | 8 ++++---- packages/instant/src/components/sliding_panel.tsx | 11 ++++++++--- packages/instant/src/components/ui/index.ts | 12 ++++++------ .../instant/src/components/zero_ex_instant_container.tsx | 2 +- .../src/containers/selected_asset_instant_heading.ts | 2 +- .../src/containers/selected_erc20_asset_amount_input.ts | 2 +- 13 files changed, 45 insertions(+), 43 deletions(-) diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx index aefd7ef30..4bb21befb 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -2,6 +2,11 @@ import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; +export interface TransitionInfo { + from: string; + to: string; +} + const generateTransitionInfoCss = ( key: keyof TransitionInfo, top?: TransitionInfo, @@ -39,11 +44,6 @@ const slideKeyframeGenerator = ( } `; -export interface TransitionInfo { - from: string; - to: string; -} - export interface PositionAnimationSettings { top?: TransitionInfo; bottom?: TransitionInfo; @@ -74,3 +74,7 @@ export const PositionAnimation = height: 100%; width: 100%; `; + +PositionAnimation.defaultProps = { + position: 'relative', +}; diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx index 4124e50c3..66a314c7f 100644 --- a/packages/instant/src/components/animations/slide_animation.tsx +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -6,15 +6,15 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; export interface SlideAnimationProps { position: string; animationState: SlideAnimationState; - slideIn: PositionAnimationSettings; - slideOut: PositionAnimationSettings; + slideInSettings: PositionAnimationSettings; + slideOutSettings: PositionAnimationSettings; } export const SlideAnimation: React.StatelessComponent = props => { if (props.animationState === 'none') { return {props.children}; } - const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut; + const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; return ( {props.children} diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx index d01e9ff57..51e06a284 100644 --- a/packages/instant/src/components/buy_order_state_buttons.tsx +++ b/packages/instant/src/components/buy_order_state_buttons.tsx @@ -1,16 +1,13 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import * as React from 'react'; -import { BuyButton } from '../components/buy_button'; -import { SecondaryButton } from '../components/secondary_button'; -import { Flex } from '../components/ui/flex'; - -import { PlacingOrderButton } from '../components/placing_order_button'; import { ColorOption } from '../style/theme'; import { OrderProcessState, ZeroExInstantError } from '../types'; -import { Button } from './ui/button'; -import { Text } from './ui/text'; +import { BuyButton } from './buy_button'; +import { PlacingOrderButton } from './placing_order_button'; +import { SecondaryButton } from './secondary_button'; +import { Button, Flex, Text } from './ui'; export interface BuyOrderStateButtonProps { buyQuote?: BuyQuote; diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index bed1b3b4e..b1fec6405 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps { asset?: ERC20Asset; value?: BigNumberInput; onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; - onSymbolClick?: (asset?: ERC20Asset) => void; + onSelectAssetClick?: (asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; isDisabled: boolean; @@ -40,7 +40,7 @@ export class ERC20AssetAmountInput extends React.Component - {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()} + {_.isUndefined(asset) ? this._renderBackupContent() : this._renderContentForAsset(asset)} ); } @@ -111,8 +111,8 @@ export class ERC20AssetAmountInput extends React.Component { - if (this.props.onSymbolClick) { - this.props.onSymbolClick(this.props.asset); + if (this.props.onSelectAssetClick) { + this.props.onSelectAssetClick(this.props.asset); } }; // For assets with symbols of different length, diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 08efd1b64..19c08db70 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -16,7 +16,7 @@ export interface InstantHeadingProps { ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; buyOrderState: OrderState; - onSymbolClick?: (asset?: ERC20Asset) => void; + onSelectAssetClick?: (asset?: ERC20Asset) => void; } const PLACEHOLDER_COLOR = ColorOption.white; @@ -50,7 +50,7 @@ export class InstantHeading extends React.Component { diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx index 4232e6c22..e5a6371e6 100644 --- a/packages/instant/src/components/placing_order_button.tsx +++ b/packages/instant/src/components/placing_order_button.tsx @@ -2,10 +2,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { Button } from './ui/button'; -import { Container } from './ui/container'; -import { Spinner } from './ui/spinner'; -import { Text } from './ui/text'; +import { Button, Container, Spinner, Text } from './ui'; export const PlacingOrderButton: React.StatelessComponent<{}> = props => (