From 00ad7bc4707580d80de807a944ba4f7652c823d7 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 13:23:17 -0700 Subject: Change asset for final onboarding step --- packages/website/public/images/zrx_ecosystem.svg | 339 ++++++++--------------- 1 file changed, 122 insertions(+), 217 deletions(-) (limited to 'packages/website') diff --git a/packages/website/public/images/zrx_ecosystem.svg b/packages/website/public/images/zrx_ecosystem.svg index f8aed4637..3b4fa0a6e 100644 --- a/packages/website/public/images/zrx_ecosystem.svg +++ b/packages/website/public/images/zrx_ecosystem.svg @@ -1,253 +1,158 @@ - + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + - - + + - + - - + + - + - - + + + + + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + - - - - -- cgit v1.2.3 From c5085d83649c1e7fdee6594866b69ae230a1cfe8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 13:36:38 -0700 Subject: Scroll to wallet when onboarding automatically starts as well --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 10d4af30e..86c4f771c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -169,7 +169,6 @@ class PlainPortalOnboardingFlow extends React.Component Date: Wed, 27 Jun 2018 13:40:52 -0700 Subject: Make onboarding bounce around less --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 6 +++--- packages/website/ts/components/wallet/wallet.tsx | 12 ++---------- 2 files changed, 5 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 86c4f771c..a19439e34 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -90,14 +90,14 @@ class PlainPortalOnboardingFlow extends React.Component, placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, { - target: '.weth-row', + target: '.wallet', title: 'Step 1/2', content: ( { wrappedEtherDirection: Side.Deposit, }; const key = ETHER_ITEM_KEY; - return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row'); + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false); } private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; @@ -351,15 +351,7 @@ export class Wallet extends React.Component { }; const key = token.address; const isLastRow = index === this.props.trackedTokens.length - 1; - return this._renderBalanceRow( - key, - icon, - primaryText, - secondaryText, - accessoryItemConfig, - isLastRow, - isWeth ? 'weth-row' : undefined, - ); + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, isLastRow); } private _renderBalanceRow( key: string, -- cgit v1.2.3 From 3c68d9c29794f25c5dd23791073a43a744450346 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 13:51:37 -0700 Subject: Fix skip button position on first step --- .../ts/components/onboarding/onboarding_card.tsx | 26 +++++++++++++--------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index bc83b8034..eff66f488 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -60,17 +60,21 @@ export const OnboardingCard: React.StatelessComponent = ({ {continueButtonText} )} - - {!shouldHideBackButton && ( - - Back - - )} - {!shouldHideNextButton && ( - - Skip - - )} + +
+ {!shouldHideBackButton && ( + + Back + + )} +
+
+ {!shouldHideNextButton && ( + + Skip + + )} +
-- cgit v1.2.3 From aad0804a1e14d935f7db8b061b1f2ec52b81cbef Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 14:33:04 -0700 Subject: Break wrath ETH step into 2 --- .../ts/components/onboarding/onboarding_flow.tsx | 2 +- .../onboarding/portal_onboarding_flow.tsx | 19 ++-- .../onboarding/wrap_eth_onboarding_step.tsx | 121 ++++++++++----------- 3 files changed, 72 insertions(+), 70 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index ec8d96191..8d5952b5a 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -71,7 +71,7 @@ export class OnboardingFlow extends React.Component { const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( - + , + placement: 'right', + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, + }, + { + target: '.wallet', + title: 'Step 1: Wrap ETH', content: ( - ), placement: 'right', - continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, + continueButtonDisplay: 'enabled', }, { target: '.wallet', diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index b21b39341..700330db2 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -4,70 +4,67 @@ import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Text } from 'ts/components/ui/text'; -export interface WrapEthOnboardingStepProps { - formattedEthBalanceIfExists?: string; +export interface WrapEthOnboardingStep1Props {} + +export const WrapEthOnboardingStep1: React.StatelessComponent = () => ( +
+ + You need to convert some of your ETH into tradeable Wrapped ETH (WETH). + + +
+ 1 ETH + +
+ + = + +
+ 1 WETH + +
+ + + Think of it like the coin version of a paper note. It has the same value, but some machines only take coins. + + + Click + + + + to wrap your ETH. + +
+); + +export interface WrapEthOnboardingStep2Props { + formattedEthBalance: string; } -export const WrapEthOnboardingStep: React.StatelessComponent = ({ - formattedEthBalanceIfExists, -}) => { - if (formattedEthBalanceIfExists) { - return ( -
- Congrats you now have {formattedEthBalanceIfExists} in your wallet. - -
- 1 ETH - -
- - - - - -
- 1 WETH - -
- +export const WrapEthOnboardingStep2: React.StatelessComponent = ({ + formattedEthBalance, +}) => ( +
+ You currently have {formattedEthBalance} in your wallet. + +
+ 1 ETH +
- ); - } else { - return ( -
- - You need to convert some of your ETH into tradeable Wrapped ETH (WETH). - - -
- 1 ETH - -
- - = - -
- 1 WETH - -
- - - Think of it like the coin version of a paper note. It has the same value, but some machines only - take coins. - - - Click - - - - to wrap your ETH. + + + + +
+ 1 WETH +
- ); - } -}; + +
+); -- cgit v1.2.3 From 36836eb942dbdcf64dd211b36523f3b98af2e6cb Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 14:45:01 -0700 Subject: Fix z index issue with wrap buttons and onboarding cards --- packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx | 2 +- packages/website/ts/components/wallet/wrap_ether_item.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index 31ce99d31..b11cd4ef5 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -6,7 +6,7 @@ export interface AddEthOnboardingStepProps {} export const AddEthOnboardingStep: React.StatelessComponent = () => (
- Before you begin you will need to send some ETH to your metamask wallet. + Before you begin you will need to send some ETH to your wallet. diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index d6135ce4d..92aaf1ea9 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -173,6 +173,7 @@ export class WrapEtherItem extends React.Component Date: Wed, 27 Jun 2018 15:14:21 -0700 Subject: Clicking overlay closes onboarding --- .../ts/components/onboarding/add_eth_onboarding_step.tsx | 2 +- .../ts/components/onboarding/congrats_onboarding_step.tsx | 2 +- packages/website/ts/components/onboarding/onboarding_flow.tsx | 11 +++++++++-- packages/website/ts/components/ui/overlay.tsx | 3 +-- 4 files changed, 12 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index b11cd4ef5..1dd47773c 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -10,7 +10,7 @@ export const AddEthOnboardingStep: React.StatelessComponent - + Click on the metamask extension in your browser and click either BUY or DEPOSIT. diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx index 3a8db8c36..8100fd2c0 100644 --- a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx @@ -10,6 +10,6 @@ export const CongratsOnboardingStep: React.StatelessComponent - No need to log in. Each relayer automatically detects and connects to your metamask wallet. + No need to log in. Each relayer automatically detects and connects to your wallet.
); diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 8d5952b5a..20ae17e18 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -3,6 +3,7 @@ import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; +import { zIndex } from 'ts/style/z_index'; import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; @@ -54,14 +55,20 @@ export class OnboardingFlow extends React.Component { if (this.props.disableOverlay) { return onboardingElement; } - return {onboardingElement}; + return ( +
+ + {onboardingElement} +
+ ); } private _getElementForStep(): Element { return document.querySelector(this._getCurrentStep().target); } private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { + const customStyles = { zIndex: zIndex.aboveOverlay }; return ( -
+
{this._renderToolTip()}
); diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx index 8b126a6d5..da26317de 100644 --- a/packages/website/ts/components/ui/overlay.tsx +++ b/packages/website/ts/components/ui/overlay.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import { zIndex } from 'ts/style/z_index'; export interface OverlayProps { - children?: React.ReactNode; style?: React.CSSProperties; onClick?: () => void; } @@ -19,7 +18,7 @@ const style: React.CSSProperties = { backgroundColor: 'rgba(0, 0, 0, 0.6)', }; -export const Overlay: React.StatelessComponent = (props: OverlayProps) => ( +export const Overlay: React.StatelessComponent = props => (
{props.children}
-- cgit v1.2.3 From 26a9fe912703ef09ca9328ce19847406572386ac Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 16:21:50 -0700 Subject: Fix width issue with onboarding card on mobile --- packages/website/ts/components/onboarding/onboarding_flow.tsx | 2 +- packages/website/ts/components/ui/animation.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 20ae17e18..e3de7e098 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -100,7 +100,7 @@ export class OnboardingFlow extends React.Component { const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( - + Date: Wed, 27 Jun 2018 16:28:54 -0700 Subject: Fix animation when coming from bottom --- packages/website/ts/components/ui/animation.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx index b90437721..943e3bf28 100644 --- a/packages/website/ts/components/ui/animation.tsx +++ b/packages/website/ts/components/ui/animation.tsx @@ -25,12 +25,18 @@ const appearFromBottomFrames = keyframes` } `; +const stylesForAnimation: { [K in AnimationType]: string } = { + // Needed for safari + easeUpFromBottom: `position: fixed`, +}; + const animations: { [K in AnimationType]: string } = { easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`, }; export const Animation = styled(PlainAnimation)` animation: ${props => animations[props.type]}; + ${props => stylesForAnimation[props.type]}; `; Animation.displayName = 'Animation'; -- cgit v1.2.3 From 382839464f7d554bfc89176f669c4d72df6093f3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 17:00:07 -0700 Subject: Break wrapping ETH into a 3rd step --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 17 ++++++++++++++--- .../components/onboarding/wrap_eth_onboarding_step.tsx | 12 ++++++++++-- 2 files changed, 24 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 7cec965b0..4dfc948a5 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -12,7 +12,11 @@ import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_s import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step'; import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; -import { WrapEthOnboardingStep1, WrapEthOnboardingStep2 } from 'ts/components/onboarding/wrap_eth_onboarding_step'; +import { + WrapEthOnboardingStep1, + WrapEthOnboardingStep2, + WrapEthOnboardingStep3, +} from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; @@ -101,18 +105,25 @@ class PlainPortalOnboardingFlow extends React.Component, placement: 'right', + continueButtonDisplay: 'enabled', + }, + { + target: '.wallet', + title: 'Step 1: Wrap ETH', + content: , + placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, }, { target: '.wallet', title: 'Step 1: Wrap ETH', content: ( - ), placement: 'right', - continueButtonDisplay: 'enabled', + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, }, { target: '.wallet', diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index 700330db2..8af5d8f07 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -27,6 +27,14 @@ export const WrapEthOnboardingStep1: React.StatelessComponent Think of it like the coin version of a paper note. It has the same value, but some machines only take coins. +
+); + +export interface WrapEthOnboardingStep2Props {} + +export const WrapEthOnboardingStep2: React.StatelessComponent = () => ( +
+ Wrapping your ETH is a reversable transaction, so don't worry about losing your ETH. Click @@ -42,11 +50,11 @@ export const WrapEthOnboardingStep1: React.StatelessComponent ); -export interface WrapEthOnboardingStep2Props { +export interface WrapEthOnboardingStep3Props { formattedEthBalance: string; } -export const WrapEthOnboardingStep2: React.StatelessComponent = ({ +export const WrapEthOnboardingStep3: React.StatelessComponent = ({ formattedEthBalance, }) => (
-- cgit v1.2.3 From 4454cfa65dfb2f0928cddc8732a64010b0c5f0d8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 18:21:51 -0700 Subject: Customize flow depending on what steps you've completed --- .../onboarding/add_eth_onboarding_step.tsx | 36 ++++++++++++++-------- .../ts/components/onboarding/onboarding_flow.tsx | 2 +- .../onboarding/portal_onboarding_flow.tsx | 16 ++++++++-- .../onboarding/wrap_eth_onboarding_step.tsx | 9 ++++-- 4 files changed, 43 insertions(+), 20 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index 1dd47773c..62d44885c 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -2,17 +2,27 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; -export interface AddEthOnboardingStepProps {} +export interface AddEthOnboardingStepProps { + hasEth: boolean; +} -export const AddEthOnboardingStep: React.StatelessComponent = () => ( -
- Before you begin you will need to send some ETH to your wallet. - - - - - Click on the metamask extension in your - browser and click either BUY or DEPOSIT. - -
-); +export const AddEthOnboardingStep: React.StatelessComponent = props => + props.hasEth ? ( +
+ Great! Looks like you already have ETH in your wallet. + + + +
+ ) : ( +
+ Before you begin you will need to send some ETH to your wallet. + + + + + Click on the metamask extension in + your browser and click either BUY or DEPOSIT. + +
+ ); diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index e3de7e098..e20e58eec 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -3,10 +3,10 @@ import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; -import { zIndex } from 'ts/style/z_index'; import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; +import { zIndex } from 'ts/style/z_index'; export interface Step { target: string; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 4dfc948a5..2102f39f9 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -96,7 +96,15 @@ class PlainPortalOnboardingFlow extends React.Component, + content: ( + + ), placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, @@ -119,7 +127,9 @@ class PlainPortalOnboardingFlow extends React.Component ), placement: 'right', @@ -127,7 +137,7 @@ class PlainPortalOnboardingFlow extends React.Component = ({ - formattedEthBalance, + formattedWethBalanceIfExists, }) => (
- You currently have {formattedEthBalance} in your wallet. + + You have {formattedWethBalanceIfExists || '0 WETH'} in your wallet. + {formattedWethBalanceIfExists && ' Great!'} +
1 ETH -- cgit v1.2.3 From 3dfde15133fb9f623d1500bf710ecff834bc98b7 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 18:56:14 -0700 Subject: Always restart onboarding from 0 and other small improvements --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 6 +++--- packages/website/ts/redux/reducer.ts | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 2102f39f9..0b7599aaf 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -120,7 +120,7 @@ class PlainPortalOnboardingFlow extends React.Component, placement: 'right', - continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { target: '.wallet', @@ -133,7 +133,7 @@ class PlainPortalOnboardingFlow extends React.Component ), placement: 'right', - continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { target: '.wallet', @@ -149,7 +149,7 @@ class PlainPortalOnboardingFlow extends React.Component, placement: 'right', continueButtonDisplay: 'enabled', diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index ed6a4868e..de95296b0 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -312,6 +312,8 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { ...state, isPortalOnboardingShowing, hasPortalOnboardingBeenSeen: true, + // always start onboarding from the beginning + portalOnboardingStep: 0, }; } -- cgit v1.2.3 From e481404a149913beb4bd7c24a3535488caf62bcb Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 19:07:53 -0700 Subject: Remove period in title from last step --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 0b7599aaf..40172677b 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -149,7 +149,7 @@ class PlainPortalOnboardingFlow extends React.Component, placement: 'right', continueButtonDisplay: 'enabled', -- cgit v1.2.3 From cd169869428f80c2bb89dbd282783b105472a4a1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 27 Jun 2018 19:21:09 -0700 Subject: Bring you directly to relayers page once you finish onboarding --- packages/website/ts/components/onboarding/onboarding_card.tsx | 5 ++++- packages/website/ts/components/onboarding/onboarding_flow.tsx | 3 +++ .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 7 +++++++ 3 files changed, 14 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index eff66f488..2d49a1d20 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -6,6 +6,7 @@ import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Island } from 'ts/components/ui/island'; import { Text, Title } from 'ts/components/ui/text'; +import * as _ from 'lodash'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; @@ -16,6 +17,7 @@ export interface OnboardingCardProps { onClose: () => void; onClickNext: () => void; onClickBack: () => void; + onContinueButtonClick?: () => void; continueButtonDisplay?: ContinueButtonDisplay; shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; @@ -28,6 +30,7 @@ export const OnboardingCard: React.StatelessComponent = ({ content, continueButtonDisplay, continueButtonText, + onContinueButtonClick, onClickNext, onClickBack, onClose, @@ -52,7 +55,7 @@ export const OnboardingCard: React.StatelessComponent = ({ {continueButtonDisplay && (
); diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx index d7838bc01..192433d39 100644 --- a/packages/website/ts/pages/jobs/list/list_item.tsx +++ b/packages/website/ts/pages/jobs/list/list_item.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; +import { Circle } from 'ts/components/ui/circle'; + export interface ListItemProps { bulletColor?: string; } export const ListItem: React.StatelessComponent = ({ bulletColor, children }) => { return (
- - - +
{children}
); -- cgit v1.2.3 From f76c9bc2263b81ab895d3ddec1afa2c3f901b32a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 15:01:20 -0700 Subject: Implement loading body rows --- .../ts/components/inputs/allowance_toggle.tsx | 4 +- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/wallet/wallet.tsx | 101 ++++++++++++++++----- packages/website/ts/style/colors.ts | 2 - 4 files changed, 80 insertions(+), 28 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 0dd2a5aa5..0d5995696 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -48,10 +48,10 @@ const styles: Styles = { width: 25, }, offTrackStyle: { - backgroundColor: colors.allowanceToggleOffTrack, + backgroundColor: colors.grey300, }, onTrackStyle: { - backgroundColor: colors.allowanceToggleOnTrack, + backgroundColor: colors.mediumBlue, }, }; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index a747ef01f..2abcc00f6 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,6 +15,7 @@ export interface ContainerProps { borderRadius?: StringOrNum; maxWidth?: StringOrNum; width?: StringOrNum; + height?: StringOrNum; minHeight?: StringOrNum; isHidden?: boolean; className?: string; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 785b2da88..9f3266cc9 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -19,10 +19,12 @@ import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; +import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; +import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; @@ -123,9 +125,6 @@ const styles: Styles = { color: colors.mediumBlue, fontWeight: 'bold', }, - loadingBody: { - height: 381, - }, }; const ETHER_ICON_PATH = '/images/ether.png'; @@ -138,6 +137,8 @@ const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; +const PLACEHOLDER_COLOR = colors.grey300; +const LOADING_ROWS_COUNT = 5; const ActionButton = styled(FloatingActionButton)` button { @@ -178,31 +179,49 @@ export class Wallet extends React.Component { ); } - private _renderLoadedRows(): React.ReactNode { - const isAddressAvailable = !_.isEmpty(this.props.userAddress); - return isAddressAvailable - ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows()) - : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows()); - } private _renderLoadingRows(): React.ReactNode { - return _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows()); + return _.concat(this._renderLoadingHeaderRows(), this._renderLoadingBodyRows()); + } + private _renderLoadingHeaderRows(): React.ReactElement<{}> { + return this._renderPlainHeaderRow('Loading...'); } private _renderLoadingBodyRows(): React.ReactElement<{}> { + const bodyStyle = this._getBodyStyle(); + const loadingRowsRange = _.range(LOADING_ROWS_COUNT + 1); return ( -
-
- -
+
+ {_.map(loadingRowsRange, index => { + return ; + })}
); } + private _renderLoadedRows(): React.ReactNode { + const isAddressAvailable = !_.isEmpty(this.props.userAddress); + return isAddressAvailable + ? _.concat(this._renderConnectedHeaderRows(), this._renderBody()) + : _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows()); + } private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { - const primaryText = 'wallet'; + const isExternallyInjectedProvider = utils.isExternallyInjected( + this.props.providerType, + this.props.injectedProviderName, + ); + const text = isExternallyInjectedProvider ? 'Please unlock MetaMask...' : 'Please connect a wallet...'; + return this._renderPlainHeaderRow(text); + } + private _renderPlainHeaderRow(text: string): React.ReactElement<{}> { return ( } - main={primaryText.toUpperCase()} + icon={} + main={ + + {text} + + // https://github.com/palantir/tslint-react/issues/140 + // tslint:disable-next-line:jsx-curly-spacing + } style={styles.borderedItem} /> ); @@ -231,12 +250,7 @@ export class Wallet extends React.Component { ); } private _renderBody(): React.ReactElement<{}> { - const bodyStyle: React.CSSProperties = { - ...styles.bodyInnerDiv, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - // TODO: make this completely responsive - maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, - }; + const bodyStyle = this._getBodyStyle(); return (
{
); } + private _getBodyStyle(): React.CSSProperties { + return { + ...styles.bodyInnerDiv, + overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + // TODO: make this completely responsive + maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, + }; + } private _onSidebarHover(_event: React.FormEvent): void { this.setState({ isHoveringSidebar: true, @@ -572,7 +594,7 @@ interface PlaceHolderProps { children?: React.ReactNode; } const PlaceHolder = (props: PlaceHolderProps) => { - const rootBackgroundColor = props.hideChildren ? colors.lightGrey : 'transparent'; + const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent'; const rootStyle: React.CSSProperties = { backgroundColor: rootBackgroundColor, display: 'inline-block', @@ -586,4 +608,35 @@ const PlaceHolder = (props: PlaceHolderProps) => {
); }; + +const NullTokenRow = () => { + const icon = ; + const main = ( +
+ +
0.00 XXX
+ + + +
0.00
+ + +
+ ); + const accessory = ( + + + + + + ); + return ( + + ); +}; // tslint:disable:max-file-line-count diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 45be4fe7f..31586d2c8 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -6,8 +6,6 @@ const appColors = { walletDefaultItemBackground: '#fbfbfc', walletFocusedItemBackground: '#f0f1f4', allowanceToggleShadow: 'rgba(0, 0, 0, 0)', - allowanceToggleOffTrack: '#adadad', - allowanceToggleOnTrack: sharedColors.mediumBlue, wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', -- cgit v1.2.3 From 8419db53bb94354280ed4776540386fc271e4589 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 16:13:35 -0700 Subject: Implement provider name in header --- packages/website/ts/components/wallet/wallet.tsx | 20 +++++++++++++++++--- packages/website/ts/utils/constants.ts | 2 +- 2 files changed, 18 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 9f3266cc9..75f950513 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -110,7 +110,7 @@ const styles: Styles = { color: colors.black, }, valueLabel: { - color: colors.grey, + color: colors.darkGrey, fontSize: 14, }, paddedItem: { @@ -238,12 +238,26 @@ export class Wallet extends React.Component { } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; - const primaryText = utils.getAddressBeginAndEnd(userAddress); + const main = ( +
+ + {utils.getAddressBeginAndEnd(userAddress)} + + + + + + {this.props.injectedProviderName} + + + +
+ ); return ( } - main={primaryText} + main={main} style={styles.borderedItem} /> diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index a3f8eacb0..d3a2aa107 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -26,7 +26,7 @@ export const constants = { NETWORK_ID_TESTRPC: 50, NULL_ADDRESS: '0x0000000000000000000000000000000000000000', PROVIDER_NAME_LEDGER: 'Ledger', - PROVIDER_NAME_METAMASK: 'Metamask', + PROVIDER_NAME_METAMASK: 'MetaMask', PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer', PROVIDER_NAME_MIST: 'Mist', PROVIDER_NAME_GENERIC: 'Injected Web3', -- cgit v1.2.3 From 1ca182e741fbdff4cd4df5877de18174b83a532b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 17:28:38 -0700 Subject: Update ProviderDisplay with new design --- .../website/ts/components/portal/drawer_menu.tsx | 3 +- .../ts/components/top_bar/provider_display.tsx | 116 +++++++++++++++------ packages/website/ts/components/wallet/wallet.tsx | 2 +- packages/website/ts/types.ts | 7 ++ packages/website/ts/utils/utils.ts | 27 +++-- 5 files changed, 118 insertions(+), 37 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index 205a60afc..a6707e86c 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -44,12 +44,13 @@ export const DrawerMenu = (props: DrawerMenuProps) => { iconName: 'zmdi-portable-wifi', }; const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries); - const displayMessage = utils.getReadableAccountState( + const accountState = utils.getAccountState( props.blockchainIsLoaded && !_.isUndefined(props.blockchain), props.providerType, props.injectedProviderName, props.userAddress, ); + const displayMessage = utils.getReadableAccountState(accountState, props.userAddress); return (
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 496e5cae0..cbbd39c70 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -2,10 +2,13 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; +import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; @@ -14,7 +17,7 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { ProviderType } from 'ts/types'; +import { AccountState, ProviderType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -46,37 +49,13 @@ export class ProviderDisplay extends React.Component -
- {this._isBlockchainReady() ? ( - - ) : ( - - )} -
+ + {this._renderIcon()} - - {displayMessage} - + {this._renderDisplayMessage()} - {isProviderMetamask && ( - - )} + {this._renderInjectedProvider()} ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; @@ -168,7 +147,86 @@ export class ProviderDisplay extends React.Component; + case AccountState.Loading: + return ; + case AccountState.Locked: + return ; + case AccountState.Unconnected: + return ; + default: + return null; + } + } + private _renderDisplayMessage(): React.ReactNode { + const accountState = this._getAccountState(); + const displayMessage = utils.getReadableAccountState(accountState, this.props.userAddress); + const fontColor = this._getDisplayMessageFontColor(); + return ( + + {displayMessage} + + ); + } + private _getDisplayMessageFontColor(): string { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Loading: + return colors.darkGrey; + case AccountState.Ready: + case AccountState.Locked: + case AccountState.Unconnected: + default: + return colors.black; + } + } + private _renderInjectedProvider(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + case AccountState.Locked: + const circleColor = this._getInjectedProviderColor(); + return ( + + + + + {this.props.injectedProviderName} + + + + ); + case AccountState.Unconnected: + case AccountState.Loading: + default: + return null; + } + } + private _getInjectedProviderColor(): string { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + return colors.green; + case AccountState.Locked: + case AccountState.Loading: + case AccountState.Unconnected: + default: + return colors.red; + } + } private _isBlockchainReady(): boolean { return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } } diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 75f950513..2474ec3fa 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -240,7 +240,7 @@ export class Wallet extends React.Component { const userAddress = this.props.userAddress; const main = (
- + {utils.getAddressBeginAndEnd(userAddress)} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 2db947ba3..cd1f3d7bb 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -563,4 +563,11 @@ export enum BrowserType { Opera = 'Opera', Other = 'Other', } + +export enum AccountState { + Unconnected = 'Unconnected', + Ready = 'Ready', + Loading = 'Loading', + Locked = 'Locked', +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index d12ae6a98..5a180fdca 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -9,6 +9,7 @@ import deepEqual = require('deep-equal'); import * as _ from 'lodash'; import * as moment from 'moment'; import { + AccountState, BlockchainCallErrs, BrowserType, Environments, @@ -192,23 +193,37 @@ export const utils = { const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287 return truncatedAddress; }, - getReadableAccountState( + getReadableAccountState(accountState: AccountState, userAddress: string): string { + switch (accountState) { + case AccountState.Loading: + return 'Loading...'; + case AccountState.Ready: + return utils.getAddressBeginAndEnd(userAddress); + case AccountState.Locked: + return 'Please Unlock'; + case AccountState.Unconnected: + return 'Connect a Wallet'; + default: + return ''; + } + }, + getAccountState( isBlockchainReady: boolean, providerType: ProviderType, injectedProviderName: string, userAddress?: string, - ): string { + ): AccountState { const isAddressAvailable = !_.isUndefined(userAddress) && !_.isEmpty(userAddress); const isExternallyInjectedProvider = utils.isExternallyInjected(providerType, injectedProviderName); if (!isBlockchainReady) { - return 'Loading account'; + return AccountState.Loading; } else if (isAddressAvailable) { - return utils.getAddressBeginAndEnd(userAddress); + return AccountState.Ready; // tslint:disable-next-line: prefer-conditional-expression } else if (isExternallyInjectedProvider) { - return 'Account locked'; + return AccountState.Locked; } else { - return 'No wallet detected'; + return AccountState.Unconnected; } }, hasUniqueNameAndSymbol(tokens: Token[], token: Token): boolean { -- cgit v1.2.3 From 78333b3026c8e0a13770bfab2341a17d5163592a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 11:00:39 -0700 Subject: Change wallet margin based on hover to prevent re-layout --- packages/website/ts/components/wallet/wallet.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 2474ec3fa..b20f3ef4b 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -281,6 +281,7 @@ export class Wallet extends React.Component { return { ...styles.bodyInnerDiv, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + marginRight: this.state.isHoveringSidebar ? 0 : 4, // TODO: make this completely responsive maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, }; -- cgit v1.2.3 From 2970e103db963b1ef37924c2724c5b1ca10e14fb Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 11:16:00 -0700 Subject: Fix off center icon in wallet --- packages/website/ts/components/wallet/wallet.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index b20f3ef4b..4c1d27598 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -105,6 +105,9 @@ const styles: Styles = { backgroundColor: colors.walletDefaultItemBackground, minHeight: 85, }, + headerItem: { + minHeight: 60, + }, amountLabel: { fontWeight: 'bold', color: colors.black, @@ -222,7 +225,7 @@ export class Wallet extends React.Component { // https://github.com/palantir/tslint-react/issues/140 // tslint:disable-next-line:jsx-curly-spacing } - style={styles.borderedItem} + style={{ ...styles.borderedItem, ...styles.headerItem }} /> ); } @@ -258,7 +261,7 @@ export class Wallet extends React.Component { } main={main} - style={styles.borderedItem} + style={{ ...styles.borderedItem, ...styles.headerItem }} /> ); @@ -597,8 +600,8 @@ interface StandardIconRowProps { const StandardIconRow = (props: StandardIconRowProps) => { return (
-
{props.icon}
-
{props.main}
+
{props.icon}
+
{props.main}
{props.accessory}
-- cgit v1.2.3 From 7ee37fb62af7014f8a2aae435458302887781be0 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 14:17:58 -0700 Subject: Implement new locked and uninstalled states --- .../ts/components/top_bar/provider_display.tsx | 8 +- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/text.tsx | 3 + .../website/ts/components/wallet/body_overlay.tsx | 147 +++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 20 +++ packages/website/ts/types.ts | 2 +- packages/website/ts/utils/utils.ts | 4 +- 7 files changed, 178 insertions(+), 7 deletions(-) create mode 100644 packages/website/ts/components/wallet/body_overlay.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index cbbd39c70..24fbb45ec 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -156,7 +156,7 @@ export class ProviderDisplay extends React.Component; case AccountState.Locked: return ; - case AccountState.Unconnected: + case AccountState.Disconnected: return ; default: return null; @@ -179,7 +179,7 @@ export class ProviderDisplay extends React.Component ); - case AccountState.Unconnected: + case AccountState.Disconnected: case AccountState.Loading: default: return null; @@ -213,7 +213,7 @@ export class ProviderDisplay extends React.Component void; } @@ -28,6 +29,7 @@ export const Text = styled(PlainText)` font-family: ${props => props.fontFamily}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; @@ -45,6 +47,7 @@ Text.defaultProps = { fontColor: colors.black, fontSize: '15px', lineHeight: '1.5em', + textDecorationLine: 'none', Tag: 'div', }; diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx new file mode 100644 index 000000000..8f8899a92 --- /dev/null +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -0,0 +1,147 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Blockchain } from 'ts/blockchain'; +import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Island } from 'ts/components/ui/island'; +import { Text } from 'ts/components/ui/text'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; +import { AccountState, BrowserType, ProviderType } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; + +const METAMASK_IMG_SRC = '/images/metamask_icon.png'; + +export interface BodyOverlayProps { + dispatcher: Dispatcher; + userAddress: string; + injectedProviderName: string; + providerType: ProviderType; + onToggleLedgerDialog: () => void; + blockchain?: Blockchain; + blockchainIsLoaded: boolean; +} + +interface BodyOverlayState {} + +export class BodyOverlay extends React.Component { + public render(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Locked: + return ; + case AccountState.Disconnected: + return ; + case AccountState.Ready: + case AccountState.Loading: + default: + return null; + } + } + private _isBlockchainReady(): boolean { + return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); + } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } +} + +interface LockedOverlayProps { + className?: string; + onUseDifferentWalletClicked?: () => void; +} +const PlainLockedOverlay: React.StatelessComponent = ({ + className, + onUseDifferentWalletClicked, +}) => ( +
+ + + + + Please Unlock MetaMask + + + + +
+); +const LockedOverlay = styled(PlainLockedOverlay)` + background: rgba(255, 248, 242, 0.8); + border: 1px solid #f68c24; + box-sizing: border-box; + border-radius: 10px; +`; + +interface DisconnectedOverlayProps { + onUseDifferentWalletClicked?: () => void; +} +const DisconnectedOverlay = (props: DisconnectedOverlayProps) => { + return ( +
+ + +
+ ); +}; + +interface UseDifferentWallet { + fontColor: string; + onClick?: () => void; +} +const UseDifferentWallet = (props: UseDifferentWallet) => { + return ( + + + Use a different wallet + + + ); +}; + +const GetMetaMask = () => { + const browserType = utils.getBrowserType(); + let extensionLink; + switch (browserType) { + case BrowserType.Chrome: + extensionLink = constants.URL_METAMASK_CHROME_STORE; + break; + case BrowserType.Firefox: + extensionLink = constants.URL_METAMASK_FIREFOX_STORE; + break; + case BrowserType.Opera: + extensionLink = constants.URL_METAMASK_OPERA_STORE; + break; + default: + extensionLink = constants.URL_METAMASK_HOMEPAGE; + } + return ( + + + + + + Get Metamask Wallet + + + + + ); +}; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 4c1d27598..9e9bb2e97 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -26,6 +26,7 @@ import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; +import { BodyOverlay } from 'ts/components/wallet/body_overlay'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -196,6 +197,25 @@ export class Wallet extends React.Component { {_.map(loadingRowsRange, index => { return ; })} + +
+ +
+
); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index cd1f3d7bb..5c44395a3 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -565,7 +565,7 @@ export enum BrowserType { } export enum AccountState { - Unconnected = 'Unconnected', + Disconnected = 'Disconnected', Ready = 'Ready', Loading = 'Loading', Locked = 'Locked', diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 5a180fdca..726e1815f 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -201,7 +201,7 @@ export const utils = { return utils.getAddressBeginAndEnd(userAddress); case AccountState.Locked: return 'Please Unlock'; - case AccountState.Unconnected: + case AccountState.Disconnected: return 'Connect a Wallet'; default: return ''; @@ -223,7 +223,7 @@ export const utils = { } else if (isExternallyInjectedProvider) { return AccountState.Locked; } else { - return AccountState.Unconnected; + return AccountState.Disconnected; } }, hasUniqueNameAndSymbol(tokens: Token[], token: Token): boolean { -- cgit v1.2.3 From a60dd1cbaf118f1d0b38f749807f13dab98da0a5 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 14:24:06 -0700 Subject: Fix key issue and remove WalletDisconnectedItem --- packages/website/ts/components/wallet/wallet.tsx | 13 +-- .../components/wallet/wallet_disconnected_item.tsx | 100 --------------------- 2 files changed, 1 insertion(+), 112 deletions(-) delete mode 100644 packages/website/ts/components/wallet/wallet_disconnected_item.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 9e9bb2e97..febb526d7 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -27,7 +27,6 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; -import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -195,7 +194,7 @@ export class Wallet extends React.Component { return (
{_.map(loadingRowsRange, index => { - return ; + return ; })} { /> ); } - private _renderDisconnectedRows(): React.ReactElement<{}> { - return ( - - ); - } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; const main = ( diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx deleted file mode 100644 index 024b28544..000000000 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { Styles } from '@0xproject/react-shared'; -import FlatButton from 'material-ui/FlatButton'; -import * as React from 'react'; - -import { colors } from 'ts/style/colors'; -import { BrowserType, ProviderType } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -export interface WalletDisconnectedItemProps { - providerType: ProviderType; - injectedProviderName: string; - onToggleLedgerDialog: () => void; -} - -const styles: Styles = { - button: { - border: colors.walletBorder, - borderStyle: 'solid', - borderWidth: 1, - height: 80, - }, - hrefAdjustment: { - paddingTop: 20, // HACK: For some reason when we set the href prop of a FlatButton material-ui reduces the top padding - }, - otherWalletText: { - fontSize: 14, - color: colors.grey500, - textDecoration: 'underline', - }, -}; - -const ITEM_HEIGHT = 381; -const METAMASK_ICON_WIDTH = 35; -const LEDGER_ICON_WIDTH = 30; -const BUTTON_BOTTOM_PADDING = 80; - -export const WalletDisconnectedItem: React.StatelessComponent = ( - props: WalletDisconnectedItemProps, -) => { - const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName); - return ( -
-
-
-
- -
-
-
- - - user other wallet - -
-
-
-
-
-
-
- ); -}; - -interface ProviderButtonProps { - isExternallyInjectedProvider: boolean; -} - -const ProviderButton: React.StatelessComponent = (props: ProviderButtonProps) => { - const browserType = utils.getBrowserType(); - let extensionLink; - if (!props.isExternallyInjectedProvider) { - switch (browserType) { - case BrowserType.Chrome: - extensionLink = constants.URL_METAMASK_CHROME_STORE; - break; - case BrowserType.Firefox: - extensionLink = constants.URL_METAMASK_FIREFOX_STORE; - break; - case BrowserType.Opera: - extensionLink = constants.URL_METAMASK_OPERA_STORE; - break; - default: - extensionLink = constants.URL_METAMASK_HOMEPAGE; - } - } - return ( - } - style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }} - href={extensionLink} - target={props.isExternallyInjectedProvider ? undefined : '_blank'} - disabled={props.isExternallyInjectedProvider} - /> - ); -}; -- cgit v1.2.3 From ed559be47cb70a8a5de4f4eb766e1bfd67bf0141 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 15:19:22 -0700 Subject: Change learn how to update your account styling --- packages/website/ts/components/portal/portal.tsx | 44 +++++++++--------------- 1 file changed, 17 insertions(+), 27 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 438c7b52f..d36ec99b0 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,7 +1,7 @@ import { colors, constants as sharedConstants } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import Help from 'material-ui/svg-icons/action/help'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; @@ -319,14 +319,13 @@ export class Portal extends React.Component { ); } private _renderWallet(): React.ReactNode { - const startOnboarding = this._renderStartOnboarding(); const isMobile = utils.isMobile(this.props.screenWidth); // We need room to scroll down for mobile onboarding const marginBottom = isMobile ? '200px' : '15px'; return (
- {isMobile && {startOnboarding}} + {isMobile && {this._renderStartOnboarding()}} { refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} /> - {!isMobile && {startOnboarding}} + {!isMobile && {this._renderStartOnboarding()}} { } private _renderStartOnboarding(): React.ReactNode { return ( - - - - - Learn how to set up your account - - - + + + + Learn how to set up your account + + ); } @@ -535,11 +521,15 @@ export class Portal extends React.Component { ); } private _renderRelayerIndexSection(): React.ReactNode { + return
} body={this._renderRelayerIndex()} />; + } + private _renderRelayerIndex(): React.ReactNode { + const isMobile = utils.isMobile(this.props.screenWidth); return ( -
} - body={} - /> +
+ {isMobile && {this._renderStartOnboarding()}} + +
); } private _renderNotFoundMessage(): React.ReactNode { -- cgit v1.2.3 From 1a11283086d0c95e10f40dfe3f826bc04889dbcb Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 16:23:37 -0700 Subject: Fix body overlay on mobile --- packages/website/ts/components/wallet/body_overlay.tsx | 1 - packages/website/ts/components/wallet/wallet.tsx | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 8f8899a92..38820c840 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -83,7 +83,6 @@ const PlainLockedOverlay: React.StatelessComponent = ({ const LockedOverlay = styled(PlainLockedOverlay)` background: rgba(255, 248, 242, 0.8); border: 1px solid #f68c24; - box-sizing: border-box; border-radius: 10px; `; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index febb526d7..1c2ce19b0 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -123,6 +123,7 @@ const styles: Styles = { bodyInnerDiv: { overflow: 'auto', WebkitOverflowScrolling: 'touch', + position: 'relative', }, manageYourWalletText: { color: colors.mediumBlue, @@ -141,7 +142,7 @@ const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; const PLACEHOLDER_COLOR = colors.grey300; -const LOADING_ROWS_COUNT = 5; +const LOADING_ROWS_COUNT = 6; const ActionButton = styled(FloatingActionButton)` button { @@ -190,7 +191,7 @@ export class Wallet extends React.Component { } private _renderLoadingBodyRows(): React.ReactElement<{}> { const bodyStyle = this._getBodyStyle(); - const loadingRowsRange = _.range(LOADING_ROWS_COUNT + 1); + const loadingRowsRange = _.range(LOADING_ROWS_COUNT); return (
{_.map(loadingRowsRange, index => { -- cgit v1.2.3 From 0ff18058ab495a15f13dbb41903d04a66ebb1467 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 16:28:14 -0700 Subject: Get rid of unused stuff in wallet --- packages/website/ts/components/wallet/wallet.tsx | 66 +----------------------- 1 file changed, 1 insertion(+), 65 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 1c2ce19b0..b316a093c 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -87,15 +87,6 @@ interface AccessoryItemConfig { } const styles: Styles = { - root: { - width: '100%', - }, - footerItemInnerDiv: { - paddingLeft: 24, - borderTopColor: colors.walletBorder, - borderTopStyle: 'solid', - borderWidth: 1, - }, borderedItem: { borderBottomColor: colors.walletBorder, borderBottomStyle: 'solid', @@ -116,27 +107,17 @@ const styles: Styles = { color: colors.darkGrey, fontSize: 14, }, - paddedItem: { - paddingTop: 8, - paddingBottom: 8, - }, bodyInnerDiv: { overflow: 'auto', WebkitOverflowScrolling: 'touch', position: 'relative', }, - manageYourWalletText: { - color: colors.mediumBlue, - fontWeight: 'bold', - }, }; const ETHER_ICON_PATH = '/images/ether.png'; const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; -const FOOTER_ITEM_KEY = 'FOOTER'; -const DISCONNECTED_ITEM_KEY = 'DISCONNECTED'; const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; @@ -178,7 +159,7 @@ export class Wallet extends React.Component { public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( - + {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()} ); @@ -309,51 +290,6 @@ export class Wallet extends React.Component { isHoveringSidebar: false, }); } - private _renderFooterRows(): React.ReactElement<{}> { - return ( -
- - - - - - - -
- add/remove tokens -
-
- } - disabled={true} - innerDivStyle={styles.footerItemInnerDiv} - style={styles.borderedItem} - /> - {this.props.location.pathname !== ACCOUNT_PATH && ( - - - manage your wallet -
- // https://github.com/palantir/tslint-react/issues/140 - // tslint:disable-next-line:jsx-curly-spacing - } - style={{ ...styles.paddedItem, ...styles.borderedItem }} - /> - - )} -
- ); - } private _renderEthRows(): React.ReactNode { const icon = ; const primaryText = this._renderAmount( -- cgit v1.2.3 From 67007455851630d05b9c07108a3e545724e07690 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 16:33:09 -0700 Subject: Fix typo --- packages/website/ts/components/wallet/body_overlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 38820c840..41e64de8b 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -137,7 +137,7 @@ const GetMetaMask = () => { - Get Metamask Wallet + Get MetaMask Wallet -- cgit v1.2.3 From 3315006c459d49d5cb412743bf190dbeda4ad5fa Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 17:04:20 -0700 Subject: Fix learn how to set up account layout --- packages/website/ts/components/portal/portal.tsx | 20 +++++++++++--------- packages/website/ts/components/portal/section.tsx | 4 ++-- 2 files changed, 13 insertions(+), 11 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d36ec99b0..a9396b83f 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -324,9 +324,9 @@ export class Portal extends React.Component { const marginBottom = isMobile ? '200px' : '15px'; return (
- + {isMobile && {this._renderStartOnboarding()}} - + { refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} /> - {!isMobile && {this._renderStartOnboarding()}} + {!isMobile && {this._renderStartOnboarding()}} { } private _renderStartOnboarding(): React.ReactNode { return ( - + - - Learn how to set up your account - + + + Learn how to set up your account + + ); } @@ -526,10 +528,10 @@ export class Portal extends React.Component { private _renderRelayerIndex(): React.ReactNode { const isMobile = utils.isMobile(this.props.screenWidth); return ( -
+ {isMobile && {this._renderStartOnboarding()}} -
+ ); } private _renderNotFoundMessage(): React.ReactNode { diff --git a/packages/website/ts/components/portal/section.tsx b/packages/website/ts/components/portal/section.tsx index 455ed07c9..b6c9fd098 100644 --- a/packages/website/ts/components/portal/section.tsx +++ b/packages/website/ts/components/portal/section.tsx @@ -6,9 +6,9 @@ export interface SectionProps { } export const Section = (props: SectionProps) => { return ( -
+
{props.header} -
{props.body}
+ {props.body}
); }; -- cgit v1.2.3 From 172d2353dd7d2056d925e1a05d037ea8744c47da Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 17:23:21 -0700 Subject: Start onboarding from relayer index --- packages/website/ts/components/portal/portal.tsx | 26 ++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index a9396b83f..ef02a8f71 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -4,7 +4,7 @@ import * as _ from 'lodash'; import Help from 'material-ui/svg-icons/action/help'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -155,6 +155,12 @@ export class Portal extends React.Component { // tslint:disable-next-line:no-floating-promises this._fetchBalancesAndAllowancesAsync(this._getCurrentTrackedTokensAddresses()); } + if (!prevProps.isPortalOnboardingShowing && this.props.isPortalOnboardingShowing) { + // On mobile, make sure the wallet is completely visible. + if (this.props.screenWidth === ScreenWidths.Sm) { + document.querySelector('.wallet').scrollIntoView(); + } + } } public componentWillReceiveProps(nextProps: PortalProps): void { if (nextProps.networkId !== this.state.prevNetworkId) { @@ -365,7 +371,9 @@ export class Portal extends React.Component { ); } private _renderStartOnboarding(): React.ReactNode { - return ( + const isMobile = utils.isMobile(this.props.screenWidth); + const shouldStartOnboarding = !isMobile || this.props.location.pathname === `${WebsitePaths.Portal}/account`; + const startOnboarding = ( @@ -375,16 +383,22 @@ export class Portal extends React.Component { ); + return !shouldStartOnboarding ? ( + + {startOnboarding} + + ) : ( + startOnboarding + ); } private _startOnboarding(): void { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; analytics.logEvent('Portal', 'Onboarding Started - Manual', networkName, this.props.portalOnboardingStep); this.props.dispatcher.updatePortalOnboardingShowing(true); - // On mobile, make sure the wallet is completely visible. - if (this.props.screenWidth === ScreenWidths.Sm) { - document.querySelector('.wallet').scrollIntoView(); - } } private _renderWalletSection(): React.ReactNode { return
} body={this._renderWallet()} />; -- cgit v1.2.3 From 512980d9bd33290582411baf381f95ee2ff3c22d Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 28 Jun 2018 17:25:58 -0700 Subject: Change onboarding flow to communicate 3 steps --- .../website/ts/components/onboarding/intro_onboarding_step.tsx | 6 +++++- .../ts/components/onboarding/portal_onboarding_flow.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx index 548839218..b50484047 100644 --- a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx @@ -7,9 +7,13 @@ export interface IntroOnboardingStepProps {} export const IntroOnboardingStep: React.StatelessComponent = () => (
- In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps. + In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete three simple steps. +
+ + Add ETH +
Wrap ETH diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 1850a0966..d2beeadfa 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -95,7 +95,7 @@ class PlainPortalOnboardingFlow extends React.Component, placement: 'right', continueButtonDisplay: 'enabled', }, { target: '.wallet', - title: 'Step 1: Wrap ETH', + title: 'Step 2: Wrap ETH', content: , placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { target: '.wallet', - title: 'Step 1: Wrap ETH', + title: 'Step 2: Wrap ETH', content: ( Date: Thu, 28 Jun 2018 17:34:29 -0700 Subject: Show eth balance in add eth balance onboarding step --- .../components/onboarding/add_eth_onboarding_step.tsx | 17 ++++++++++++++--- .../ts/components/onboarding/onboarding_card.tsx | 2 +- .../ts/components/onboarding/portal_onboarding_flow.tsx | 8 +------- 3 files changed, 16 insertions(+), 11 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index 62d44885c..7250ef971 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -1,15 +1,26 @@ +import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; export interface AddEthOnboardingStepProps { - hasEth: boolean; + userEthBalanceInWei: BigNumber; } export const AddEthOnboardingStep: React.StatelessComponent = props => - props.hasEth ? ( + props.userEthBalanceInWei.gt(0) ? (
- Great! Looks like you already have ETH in your wallet. + + Great! Looks like you already have{' '} + {utils.getFormattedAmount( + props.userEthBalanceInWei, + constants.DECIMAL_PLACES_ETH, + constants.ETHER_SYMBOL, + )}{' '} + in your wallet. + diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index 2d49a1d20..48e8ab022 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -1,12 +1,12 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; +import * as _ from 'lodash'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Island } from 'ts/components/ui/island'; import { Text, Title } from 'ts/components/ui/text'; -import * as _ from 'lodash'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index d2beeadfa..0eb7cd8af 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -97,13 +97,7 @@ class PlainPortalOnboardingFlow extends React.Component + ), placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', -- cgit v1.2.3 From 0142e7fa8f3c28737c6352945c1f1b72c5f7339d Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 28 Jun 2018 17:37:22 -0700 Subject: Fix button hover and active hover state --- packages/website/ts/components/ui/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 02fa47480..1489a74a6 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -37,7 +37,7 @@ export const Button = styled(PlainButton)` background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { - background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; + background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')} !important; } &:active { background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; -- cgit v1.2.3 From 9ada8e4ddf621bb747ba1f35bfd62ac22db40d30 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 28 Jun 2018 17:51:39 -0700 Subject: Re-center react-popper on every step --- .../ts/components/onboarding/onboarding_flow.tsx | 2 ++ packages/website/ts/components/wallet/wallet.tsx | 18 ++---------------- 2 files changed, 4 insertions(+), 16 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 834634909..1f4c6df82 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -68,6 +68,8 @@ export class OnboardingFlow extends React.Component { } private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { const customStyles = { zIndex: zIndex.aboveOverlay }; + // On re-render, we want to re-center the popper. + props.scheduleUpdate(); return (
{this._renderToolTip()} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index e1a2d4ce7..5dde0f4e7 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -156,20 +156,6 @@ export class Wallet extends React.Component { isHoveringSidebar: false, }; } - public componentDidUpdate(prevProps: WalletProps): void { - const currentTrackedTokens = this.props.trackedTokens; - const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens); - const firstDifferentTrackedToken = _.head(differentTrackedTokens); - // check if there is only one different token, and if that token is a member of the current tracked tokens - // this means that the token was added, not removed - if ( - !_.isUndefined(firstDifferentTrackedToken) && - _.size(differentTrackedTokens) === 1 && - _.includes(currentTrackedTokens, firstDifferentTrackedToken) - ) { - document.getElementById(firstDifferentTrackedToken.address).scrollIntoView(); - } - } public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( @@ -332,7 +318,7 @@ export class Wallet extends React.Component { const trackedTokensStartingWithEtherToken = trackedTokens.sort( firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL) .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL) - .thenBy('trackedTimestamp'), + .thenBy('address'), ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } @@ -389,7 +375,7 @@ export class Wallet extends React.Component { const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return ( -
+
Date: Thu, 28 Jun 2018 18:00:10 -0700 Subject: Customize allowance setting onboarding step if you have your allowances set --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 1 + .../ts/components/onboarding/set_allowances_onboarding_step.tsx | 3 +++ 2 files changed, 4 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 0eb7cd8af..5db3a4919 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -136,6 +136,7 @@ class PlainPortalOnboardingFlow extends React.Component ), placement: 'right', diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx index 1ff248c40..c86cf3bba 100644 --- a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx @@ -5,11 +5,13 @@ import { Text } from 'ts/components/ui/text'; export interface SetAllowancesOnboardingStepProps { zrxAllowanceToggle: React.ReactNode; ethAllowanceToggle: React.ReactNode; + userHasAllowancesForWethAndZrx: boolean; } export const SetAllowancesOnboardingStep: React.StatelessComponent = ({ ethAllowanceToggle, zrxAllowanceToggle, + userHasAllowancesForWethAndZrx, }) => (
Unlock your tokens for trading. You only need to do this once for each token. @@ -23,5 +25,6 @@ export const SetAllowancesOnboardingStep: React.StatelessComponent{zrxAllowanceToggle}
+ {userHasAllowancesForWethAndZrx && Perfect! Both your ZRX and WETH tokens are unlocked.}
); -- cgit v1.2.3 From e71862676c298a65fe30abe7d24054871c6a5484 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 28 Jun 2018 18:02:32 -0700 Subject: Bold all balances in onboarding --- .../ts/components/onboarding/add_eth_onboarding_step.tsx | 12 +++++++----- .../ts/components/onboarding/wrap_eth_onboarding_step.tsx | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index 7250ef971..f2af551a5 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -14,11 +14,13 @@ export const AddEthOnboardingStep: React.StatelessComponent Great! Looks like you already have{' '} - {utils.getFormattedAmount( - props.userEthBalanceInWei, - constants.DECIMAL_PLACES_ETH, - constants.ETHER_SYMBOL, - )}{' '} + + {utils.getFormattedAmount( + props.userEthBalanceInWei, + constants.DECIMAL_PLACES_ETH, + constants.ETHER_SYMBOL, + )}{' '} + in your wallet. diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index 68c13ad10..4d336c80f 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -59,7 +59,7 @@ export const WrapEthOnboardingStep3: React.StatelessComponent (
- You have {formattedWethBalanceIfExists || '0 WETH'} in your wallet. + You have {formattedWethBalanceIfExists || '0 WETH'} in your wallet. {formattedWethBalanceIfExists && ' Great!'} -- cgit v1.2.3 From 81ff99276bec5420fd3822925e63b6ed60510b1c Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 28 Jun 2018 23:03:30 -0700 Subject: Fix scrollbar bug --- packages/website/ts/components/wallet/wallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index b316a093c..9c805e62e 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -274,7 +274,7 @@ export class Wallet extends React.Component { private _getBodyStyle(): React.CSSProperties { return { ...styles.bodyInnerDiv, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden', marginRight: this.state.isHoveringSidebar ? 0 : 4, // TODO: make this completely responsive maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, -- cgit v1.2.3 From 08f7666d210317d8caaca72f5a81c860478a2387 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 28 Jun 2018 23:24:57 -0700 Subject: Create AccountConnection component --- .../ts/components/top_bar/provider_display.tsx | 26 +++----------- .../ts/components/ui/account_connection.tsx | 40 ++++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 26 ++++++++------ 3 files changed, 61 insertions(+), 31 deletions(-) create mode 100644 packages/website/ts/components/ui/account_connection.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 24fbb45ec..613da4356 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -8,6 +8,7 @@ import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; +import { AccountConnection } from 'ts/components/ui/account_connection'; import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; @@ -189,16 +190,11 @@ export class ProviderDisplay extends React.Component - - - - {this.props.injectedProviderName} - - - + ); case AccountState.Disconnected: case AccountState.Loading: @@ -206,18 +202,6 @@ export class ProviderDisplay extends React.Component = ({ + accountState, + injectedProviderName, +}) => { + return ( + + + + + {injectedProviderName} + + + + ); +}; + +function getInjectedProviderColor(accountState: AccountState): string { + switch (accountState) { + case AccountState.Ready: + return colors.limeGreen; + case AccountState.Locked: + case AccountState.Loading: + case AccountState.Disconnected: + default: + return colors.red; + } +} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 9c805e62e..348800717 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -19,6 +19,7 @@ import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; +import { AccountConnection } from 'ts/components/ui/account_connection'; import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; @@ -33,6 +34,7 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { + AccountState, BlockchainErrs, ProviderType, ScreenWidths, @@ -157,10 +159,9 @@ export class Wallet extends React.Component { } } public render(): React.ReactNode { - const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( - {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()} + {this._isBlockchainReady() ? this._renderLoadedRows() : this._renderLoadingRows()} ); } @@ -232,19 +233,13 @@ export class Wallet extends React.Component { } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; + const accountState = this._getAccountState(); const main = (
{utils.getAddressBeginAndEnd(userAddress)} - - - - - {this.props.injectedProviderName} - - - +
); return ( @@ -535,6 +530,17 @@ export class Wallet extends React.Component { private _getEthToken(): Token { return utils.getEthToken(this.props.tokenByAddress); } + private _isBlockchainReady(): boolean { + return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); + } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } } interface StandardIconRowProps { -- cgit v1.2.3 From 0b5a49c17dde87130a659e4101bd6e2f5666b9c7 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 28 Jun 2018 23:31:17 -0700 Subject: Remove some hardcoded MetaMask colors --- packages/website/ts/components/wallet/body_overlay.tsx | 6 +++--- packages/website/ts/style/colors.ts | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 41e64de8b..5ced704f9 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -72,7 +72,7 @@ const PlainLockedOverlay: React.StatelessComponent = ({ > - + Please Unlock MetaMask @@ -81,8 +81,8 @@ const PlainLockedOverlay: React.StatelessComponent = ({
); const LockedOverlay = styled(PlainLockedOverlay)` - background: rgba(255, 248, 242, 0.8); - border: 1px solid #f68c24; + background: ${colors.metaMaskTransparentOrange}; + border: 1px solid ${colors.metaMaskOrange}; border-radius: 10px; `; diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 31586d2c8..349845a09 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,6 +11,8 @@ const appColors = { menuItemDefaultSelectedBackground: '#424242', jobsPageBackground: sharedColors.grey50, jobsPageOpenPositionRow: sharedColors.grey100, + metaMaskOrange: '#f68c24', + metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)', }; export const colors = { -- cgit v1.2.3 From aedd51a61bcc9ecef660c1bea1641c0400f3ac45 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 00:59:24 -0700 Subject: Refactor inline styles out of Wallet --- .../ts/components/wallet/null_token_row.tsx | 41 ++++++ .../website/ts/components/wallet/placeholder.tsx | 26 ++++ .../ts/components/wallet/standard_icon_row.tsx | 44 ++++++ packages/website/ts/components/wallet/wallet.tsx | 148 ++++----------------- .../ts/components/wallet/wrap_ether_item.tsx | 3 +- packages/website/ts/utils/wallet_item_styles.ts | 9 -- 6 files changed, 139 insertions(+), 132 deletions(-) create mode 100644 packages/website/ts/components/wallet/null_token_row.tsx create mode 100644 packages/website/ts/components/wallet/placeholder.tsx create mode 100644 packages/website/ts/components/wallet/standard_icon_row.tsx delete mode 100644 packages/website/ts/utils/wallet_item_styles.ts (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/null_token_row.tsx b/packages/website/ts/components/wallet/null_token_row.tsx new file mode 100644 index 000000000..c8b4e67d0 --- /dev/null +++ b/packages/website/ts/components/wallet/null_token_row.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; + +import { Circle } from 'ts/components/ui/circle'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { PlaceHolder } from 'ts/components/wallet/placeholder'; +import { StandardIconRow } from 'ts/components/wallet/standard_icon_row'; +import { colors } from 'ts/style/colors'; + +export interface NullTokenRowProps { + iconDimension: number; + fillColor: string; +} + +export const NullTokenRow: React.StatelessComponent = ({ iconDimension, fillColor }) => { + const icon = ; + const main = ( +
+ + + 0.00 XXX + + + + + + 0.00 + + + +
+ ); + const accessory = ( + + + + + + ); + return ; +}; diff --git a/packages/website/ts/components/wallet/placeholder.tsx b/packages/website/ts/components/wallet/placeholder.tsx new file mode 100644 index 000000000..aca46014b --- /dev/null +++ b/packages/website/ts/components/wallet/placeholder.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; + +export interface PlaceHolderProps { + className?: string; + hideChildren: React.ReactNode; + fillColor: string; +} + +const PlainPlaceHolder: React.StatelessComponent = ({ className, hideChildren, children }) => { + const childrenVisibility = hideChildren ? 'hidden' : 'visible'; + const childrenStyle: React.CSSProperties = { visibility: childrenVisibility }; + return ( +
+
{children}
+
+ ); +}; + +export const PlaceHolder = styled(PlainPlaceHolder)` + background-color: ${props => (props.hideChildren ? props.fillColor : 'transparent')}; + display: inline-block; + border-radius: 2px; +`; diff --git a/packages/website/ts/components/wallet/standard_icon_row.tsx b/packages/website/ts/components/wallet/standard_icon_row.tsx new file mode 100644 index 000000000..1a2ec021b --- /dev/null +++ b/packages/website/ts/components/wallet/standard_icon_row.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; + +export interface StandardIconRowProps { + className?: string; + icon: React.ReactNode; + main: React.ReactNode; + accessory?: React.ReactNode; + minHeight?: string; + borderBottomColor?: string; + borderBottomStyle?: string; + borderWidth?: string; + backgroundColor?: string; +} +const PlainStandardIconRow: React.StatelessComponent = ({ className, icon, main, accessory }) => { + return ( +
+
{icon}
+
{main}
+
+
{accessory}
+
+ ); +}; + +export const StandardIconRow = styled(PlainStandardIconRow)` + min-height: ${props => props.minHeight}; + border-bottom-color: ${props => props.borderBottomColor}; + border-bottom-style: ${props => props.borderBottomStyle}; + border-width: ${props => props.borderWidth}; + background-color: ${props => props.backgroundColor}; +`; + +StandardIconRow.defaultProps = { + minHeight: '85px', + borderBottomColor: colors.walletBorder, + borderBottomStyle: 'solid', + borderWidth: '1px', + backgroundColor: colors.walletDefaultItemBackground, +}; + +StandardIconRow.displayName = 'StandardIconRow'; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 348800717..ee8ca8aeb 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,9 +1,4 @@ -import { - constants as sharedConstants, - EtherscanLinkSuffixes, - Styles, - utils as sharedUtils, -} from '@0xproject/react-shared'; +import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { BigNumber, errorUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; @@ -28,6 +23,9 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; +import { NullTokenRow } from 'ts/components/wallet/null_token_row'; +import { PlaceHolder } from 'ts/components/wallet/placeholder'; +import { StandardIconRow } from 'ts/components/wallet/standard_icon_row'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -48,7 +46,6 @@ import { import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; -import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; export interface WalletProps { userAddress: string; @@ -88,34 +85,6 @@ interface AccessoryItemConfig { allowanceToggleConfig?: AllowanceToggleConfig; } -const styles: Styles = { - borderedItem: { - borderBottomColor: colors.walletBorder, - borderBottomStyle: 'solid', - borderWidth: 1, - }, - tokenItem: { - backgroundColor: colors.walletDefaultItemBackground, - minHeight: 85, - }, - headerItem: { - minHeight: 60, - }, - amountLabel: { - fontWeight: 'bold', - color: colors.black, - }, - valueLabel: { - color: colors.darkGrey, - fontSize: 14, - }, - bodyInnerDiv: { - overflow: 'auto', - WebkitOverflowScrolling: 'touch', - position: 'relative', - }, -}; - const ETHER_ICON_PATH = '/images/ether.png'; const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; @@ -177,7 +146,7 @@ export class Wallet extends React.Component { return (
{_.map(loadingRowsRange, index => { - return ; + return ; })} { // https://github.com/palantir/tslint-react/issues/140 // tslint:disable-next-line:jsx-curly-spacing } - style={{ ...styles.borderedItem, ...styles.headerItem }} + minHeight="60px" + backgroundColor={colors.white} /> ); } @@ -247,7 +217,8 @@ export class Wallet extends React.Component { } main={main} - style={{ ...styles.borderedItem, ...styles.headerItem }} + minHeight="60px" + backgroundColor={colors.white} /> ); @@ -268,7 +239,9 @@ export class Wallet extends React.Component { } private _getBodyStyle(): React.CSSProperties { return { - ...styles.bodyInnerDiv, + overflow: 'auto', + WebkitOverflowScrolling: 'touch', + position: 'relative', overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden', marginRight: this.state.isHoveringSidebar ? 0 : 4, // TODO: make this completely responsive @@ -306,7 +279,7 @@ export class Wallet extends React.Component { wrappedEtherDirection: Side.Deposit, }; const key = ETHER_ITEM_KEY; - return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row'); + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row'); } private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; @@ -352,7 +325,6 @@ export class Wallet extends React.Component { primaryText, secondaryText, accessoryItemConfig, - isLastRow, isWeth ? 'weth-row' : undefined, ); } @@ -362,20 +334,12 @@ export class Wallet extends React.Component { primaryText: React.ReactNode, secondaryText: React.ReactNode, accessoryItemConfig: AccessoryItemConfig, - isLastRow: boolean, className?: string, ): React.ReactNode { const shouldShowWrapEtherItem = !_.isUndefined(this.state.wrappedEtherDirection) && this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection && !_.isUndefined(this.props.userEtherBalanceInWei); - let additionalStyle; - if (shouldShowWrapEtherItem) { - additionalStyle = walletItemStyles.focusedItem; - } else if (!isLastRow) { - additionalStyle = styles.borderedItem; - } - const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return (
@@ -388,7 +352,7 @@ export class Wallet extends React.Component {
} accessory={this._renderAccessoryItems(accessoryItemConfig)} - style={style} + backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined} /> {shouldShowWrapEtherItem && ( { ): React.ReactNode { if (isLoading) { return ( - -
0.00 XXX
+ + + 0.00 XXX + ); } else { const result = utils.getFormattedAmount(amount, decimals, symbol); - return
{result}
; + return ( + + {result} + + ); } } private _renderValue( @@ -476,8 +446,10 @@ export class Wallet extends React.Component { result = '$0.00'; } return ( - -
{result}
+ + + {result} + ); } @@ -543,70 +515,4 @@ export class Wallet extends React.Component { } } -interface StandardIconRowProps { - icon: React.ReactNode; - main: React.ReactNode; - accessory?: React.ReactNode; - style?: React.CSSProperties; -} -const StandardIconRow = (props: StandardIconRowProps) => { - return ( -
-
{props.icon}
-
{props.main}
-
-
{props.accessory}
-
- ); -}; -interface PlaceHolderProps { - hideChildren: React.ReactNode; - children?: React.ReactNode; -} -const PlaceHolder = (props: PlaceHolderProps) => { - const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent'; - const rootStyle: React.CSSProperties = { - backgroundColor: rootBackgroundColor, - display: 'inline-block', - borderRadius: 2, - }; - const childrenVisibility = props.hideChildren ? 'hidden' : 'visible'; - const childrenStyle: React.CSSProperties = { visibility: childrenVisibility }; - return ( -
-
{props.children}
-
- ); -}; - -const NullTokenRow = () => { - const icon = ; - const main = ( -
- -
0.00 XXX
- - - -
0.00
- - -
- ); - const accessory = ( - - - - - - ); - return ( - - ); -}; // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index d6135ce4d..f6d1a9a35 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -15,7 +15,6 @@ import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; -import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; export interface WrapEtherItemProps { userAddress: string; @@ -95,7 +94,7 @@ export class WrapEtherItem extends React.Component +
{this._renderIsEthConversionHappeningSpinner()}
{topLabelText}
diff --git a/packages/website/ts/utils/wallet_item_styles.ts b/packages/website/ts/utils/wallet_item_styles.ts deleted file mode 100644 index 9d6033d74..000000000 --- a/packages/website/ts/utils/wallet_item_styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Styles } from '@0xproject/react-shared'; - -import { colors } from 'ts/style/colors'; - -export const styles: Styles = { - focusedItem: { - backgroundColor: colors.walletFocusedItemBackground, - }, -}; -- cgit v1.2.3 From 2b5f45676f4c8e478b9de82a6313eb727d8845ff Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 01:07:50 -0700 Subject: Remove unused imports and variables --- packages/website/ts/components/portal/portal.tsx | 1 - .../website/ts/components/top_bar/provider_display.tsx | 2 -- packages/website/ts/components/ui/identicon.tsx | 1 - packages/website/ts/components/wallet/placeholder.tsx | 1 - packages/website/ts/components/wallet/wallet.tsx | 16 +--------------- 5 files changed, 1 insertion(+), 20 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index ef02a8f71..6da41e64b 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -24,7 +24,6 @@ import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; -import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 613da4356..8743e4320 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -9,11 +9,9 @@ import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { AccountConnection } from 'ts/components/ui/account_connection'; -import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; -import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index d8036f0c1..b5b374973 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -21,7 +21,6 @@ export class Identicon extends React.Component { public render(): React.ReactNode { const address = this.props.address; const diameter = this.props.diameter; - const radius = diameter / 2; return (
{ public static defaultProps = { style: {}, @@ -290,7 +277,7 @@ export class Wallet extends React.Component { ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } - private _renderTokenRow(token: Token, index: number): React.ReactNode { + private _renderTokenRow(token: Token): React.ReactNode { const tokenState = this.props.trackedTokenStateByAddress[token.address]; if (_.isUndefined(tokenState)) { return null; @@ -318,7 +305,6 @@ export class Wallet extends React.Component { }, }; const key = token.address; - const isLastRow = index === this.props.trackedTokens.length - 1; return this._renderBalanceRow( key, icon, -- cgit v1.2.3 From f89acb49be50ad6d9814dafb580b28722d9a161a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 01:11:02 -0700 Subject: Add dollar sign to NullTokenRow --- packages/website/ts/components/wallet/null_token_row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/null_token_row.tsx b/packages/website/ts/components/wallet/null_token_row.tsx index c8b4e67d0..a1ec9871a 100644 --- a/packages/website/ts/components/wallet/null_token_row.tsx +++ b/packages/website/ts/components/wallet/null_token_row.tsx @@ -24,7 +24,7 @@ export const NullTokenRow: React.StatelessComponent = ({ icon - 0.00 + $0.00 -- cgit v1.2.3 From 36cadaae46eb17261c6dd0ee82cd8cefb3806082 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 29 Jun 2018 11:08:48 -0700 Subject: Use Image component where relevant and add back tracked token timestamp logic --- .../components/onboarding/add_eth_onboarding_step.tsx | 7 ++++--- .../ts/components/onboarding/intro_onboarding_step.tsx | 7 ++++--- packages/website/ts/components/wallet/wallet.tsx | 18 ++++++++++++++++-- 3 files changed, 24 insertions(+), 8 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index f2af551a5..bccdc0c18 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -1,6 +1,7 @@ import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -24,17 +25,17 @@ export const AddEthOnboardingStep: React.StatelessComponent - +
) : (
Before you begin you will need to send some ETH to your wallet. - + - Click on the metamask extension in + Click on the MetaMask extension in your browser and click either BUY or DEPOSIT.
diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx index b50484047..3a27b6854 100644 --- a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; export interface IntroOnboardingStepProps {} @@ -11,15 +12,15 @@ export const IntroOnboardingStep: React.StatelessComponent
- + Add ETH
- + Wrap ETH
- + Unlock tokens
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 5dde0f4e7..e1a2d4ce7 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -156,6 +156,20 @@ export class Wallet extends React.Component { isHoveringSidebar: false, }; } + public componentDidUpdate(prevProps: WalletProps): void { + const currentTrackedTokens = this.props.trackedTokens; + const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens); + const firstDifferentTrackedToken = _.head(differentTrackedTokens); + // check if there is only one different token, and if that token is a member of the current tracked tokens + // this means that the token was added, not removed + if ( + !_.isUndefined(firstDifferentTrackedToken) && + _.size(differentTrackedTokens) === 1 && + _.includes(currentTrackedTokens, firstDifferentTrackedToken) + ) { + document.getElementById(firstDifferentTrackedToken.address).scrollIntoView(); + } + } public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( @@ -318,7 +332,7 @@ export class Wallet extends React.Component { const trackedTokensStartingWithEtherToken = trackedTokens.sort( firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL) .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL) - .thenBy('address'), + .thenBy('trackedTimestamp'), ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } @@ -375,7 +389,7 @@ export class Wallet extends React.Component { const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return ( -
+
Date: Fri, 29 Jun 2018 11:47:12 -0700 Subject: Allow you to continue the onboarding flow once youve installed metamask and refreshed the page --- .../onboarding/install_wallet_onboarding_step.tsx | 7 ++++--- .../ts/components/onboarding/portal_onboarding_flow.tsx | 16 ++++++++-------- packages/website/ts/containers/portal_onboarding_flow.ts | 4 ++-- packages/website/ts/redux/reducer.ts | 6 +++--- packages/website/ts/redux/store.ts | 2 +- 5 files changed, 18 insertions(+), 17 deletions(-) (limited to 'packages/website') 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 a54496186..a95c464af 100644 --- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -8,11 +8,12 @@ export interface InstallWalletOnboardingStepProps {} export const InstallWalletOnboardingStep: React.StatelessComponent = () => (
- - - Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps. + + + + Please refresh the page once you've done this to continue!
); diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 5db3a4919..3e9b0bd2c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -28,7 +28,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps { stepIndex: number; isRunning: boolean; userAddress: string; - hasBeenSeen: boolean; + hasBeenClosed: boolean; providerType: ProviderType; injectedProviderName: string; blockchainIsLoaded: boolean; @@ -44,7 +44,8 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps { class PlainPortalOnboardingFlow extends React.Component { private _unlisten: () => void; public componentDidMount(): void { - this._overrideOnboardingStateIfShould(); + this._autoStartOnboardingIfShould(); + this._adjustStepIfShould(); // If there is a route change, just close onboarding. this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false)); } @@ -52,7 +53,7 @@ class PlainPortalOnboardingFlow extends React.Component { // Persisted state stateStorage.saveState({ - hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen, + hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed, }); }, ONE_SECOND), ); -- cgit v1.2.3 From 5207dfdc0e1abf97381e7c710ea8713bef23f830 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 29 Jun 2018 11:50:24 -0700 Subject: Rename userHasAllowances bool to follow proper convention --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 6 +++--- .../ts/components/onboarding/set_allowances_onboarding_step.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 3e9b0bd2c..6ef8fced1 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -137,11 +137,11 @@ class PlainPortalOnboardingFlow extends React.Component ), placement: 'right', - continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled', + continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled', }, { target: '.wallet', @@ -178,7 +178,7 @@ class PlainPortalOnboardingFlow extends React.Component new BigNumber(0); } - private _userHasAllowancesForWethAndZrx(): boolean { + private _doesUserHaveAllowancesForWethAndZrx(): boolean { const ethToken = utils.getEthToken(this.props.tokenByAddress); const zrxToken = utils.getZrxToken(this.props.tokenByAddress); if (ethToken && zrxToken) { diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx index c86cf3bba..5ddfe38d7 100644 --- a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx @@ -5,13 +5,13 @@ import { Text } from 'ts/components/ui/text'; export interface SetAllowancesOnboardingStepProps { zrxAllowanceToggle: React.ReactNode; ethAllowanceToggle: React.ReactNode; - userHasAllowancesForWethAndZrx: boolean; + doesUserHaveAllowancesForWethAndZrx: boolean; } export const SetAllowancesOnboardingStep: React.StatelessComponent = ({ ethAllowanceToggle, zrxAllowanceToggle, - userHasAllowancesForWethAndZrx, + doesUserHaveAllowancesForWethAndZrx, }) => (
Unlock your tokens for trading. You only need to do this once for each token. @@ -25,6 +25,6 @@ export const SetAllowancesOnboardingStep: React.StatelessComponent{zrxAllowanceToggle}
- {userHasAllowancesForWethAndZrx && Perfect! Both your ZRX and WETH tokens are unlocked.} + {doesUserHaveAllowancesForWethAndZrx && Perfect! Both your ZRX and WETH tokens are unlocked.}
); -- cgit v1.2.3 From 03bc7bb935c71106dd3c5b577d08ca3b12977e5f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 11:55:00 -0700 Subject: Move wallet scrollIntoView into PortalOnboardingFlow --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 8 +++++++- packages/website/ts/components/portal/portal.tsx | 6 ------ 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 296b410fe..ccc8d9e86 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -47,8 +47,14 @@ class PlainPortalOnboardingFlow extends React.Component { // tslint:disable-next-line:no-floating-promises this._fetchBalancesAndAllowancesAsync(this._getCurrentTrackedTokensAddresses()); } - if (!prevProps.isPortalOnboardingShowing && this.props.isPortalOnboardingShowing) { - // On mobile, make sure the wallet is completely visible. - if (this.props.screenWidth === ScreenWidths.Sm) { - document.querySelector('.wallet').scrollIntoView(); - } - } } public componentWillReceiveProps(nextProps: PortalProps): void { if (nextProps.networkId !== this.state.prevNetworkId) { -- cgit v1.2.3 From ddec01e6c1d9cfeaf5b01278b1b796644705433b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 11:56:31 -0700 Subject: Change function to a const --- packages/website/ts/components/ui/account_connection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx index 0f61ecde4..6d0b90922 100644 --- a/packages/website/ts/components/ui/account_connection.tsx +++ b/packages/website/ts/components/ui/account_connection.tsx @@ -27,7 +27,7 @@ export const AccountConnection: React.StatelessComponent ); }; -function getInjectedProviderColor(accountState: AccountState): string { +const getInjectedProviderColor = (accountState: AccountState) => { switch (accountState) { case AccountState.Ready: return colors.limeGreen; @@ -37,4 +37,4 @@ function getInjectedProviderColor(accountState: AccountState): string { default: return colors.red; } -} +}; -- cgit v1.2.3 From 0dbe883c3b79b88375ba15b3b8c74c5c72ec684d Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 29 Jun 2018 13:24:31 -0700 Subject: Fix onboarding always starting --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 6ef8fced1..52a045573 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -44,8 +44,9 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps { class PlainPortalOnboardingFlow extends React.Component { private _unlisten: () => void; public componentDidMount(): void { - this._autoStartOnboardingIfShould(); this._adjustStepIfShould(); + // Wait until the step is adjusted to decide whether we should show onboarding. + setTimeout(this._autoStartOnboardingIfShould.bind(this), 250); // If there is a route change, just close onboarding. this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false)); } -- cgit v1.2.3 From c473a0444c429da280425b0913221fe4e4aaeb15 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 29 Jun 2018 13:30:43 -0700 Subject: Bump automatic show onborading delay by 1000ms --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index f5a36b1c6..ae331a8db 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -46,7 +46,7 @@ class PlainPortalOnboardingFlow extends React.Component this.props.updateIsRunning(false)); } -- cgit v1.2.3 From 9d81e069dcce24d484c02ae9ca6ec861b6146358 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 29 Jun 2018 14:04:41 -0700 Subject: Remove extra call to scrollIntoView for wallet in onboarding --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 4 ---- 1 file changed, 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index ae331a8db..6bfa5c75f 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -227,10 +227,6 @@ class PlainPortalOnboardingFlow extends React.Component Date: Fri, 29 Jun 2018 15:20:44 -0700 Subject: Move /docs route to the end --- packages/website/ts/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 23387a95a..c7ccfdf1f 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -97,7 +97,6 @@ render( - +
-- cgit v1.2.3 From 622ce0bf2ee348cd8640cd589962bd88a6d632fb Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 16:11:57 -0700 Subject: Update staging api link --- packages/website/ts/utils/configs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 2f89f8ccb..e8a486c35 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -11,7 +11,7 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; export const configs = { AMOUNT_DISPLAY_PRECSION: 5, BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com', - BACKEND_BASE_STAGING_URL: 'http://ec2-52-91-181-85.compute-1.amazonaws.com', + BACKEND_BASE_STAGING_URL: 'https://staging-website-api.0xproject.com', BASE_URL, BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208', DEFAULT_DERIVATION_PATH: `44'/60'/0'`, -- cgit v1.2.3 From 8ffce78827bc64f222128dfdd0dc4a45db402f3a Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 29 Jun 2018 16:47:58 -0700 Subject: Remove state variable from Link component in Portal --- packages/website/ts/components/portal/portal.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 8a86a7c8d..9c0cb866d 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -377,10 +377,7 @@ export class Portal extends React.Component { ); return !shouldStartOnboarding ? ( - + {startOnboarding} ) : ( -- cgit v1.2.3 From b9b00e10d39c3c84bc72892ef37f1313e904414d Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 17:20:20 -0700 Subject: Update relayer grid tiles to use Text --- .../relayer_index/relayer_top_tokens.tsx | 63 ++++++---------------- packages/website/ts/components/ui/text.tsx | 4 +- 2 files changed, 17 insertions(+), 50 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index f544fc924..c48b672e9 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -2,44 +2,30 @@ import { colors, constants as sharedConstants, EtherscanLinkSuffixes, - Styles, utils as sharedUtils, } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { analytics } from 'ts/utils/analytics'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { WebsiteBackendTokenInfo } from 'ts/types'; +import { analytics } from 'ts/utils/analytics'; +import { utils } from 'ts/utils/utils'; export interface TopTokensProps { tokens: WebsiteBackendTokenInfo[]; networkId: number; } -const styles: Styles = { - tokenLabel: { - textDecoration: 'none', - color: colors.mediumBlue, - fontSize: 14, - }, - followingTokenLabel: { - paddingLeft: 16, - }, -}; - export const TopTokens: React.StatelessComponent = (props: TopTokensProps) => { return (
- {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => { - const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel }; - const style = index !== 0 ? firstItemStyle : styles.tokenLabel; + {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo) => { return ( - + + + ); })}
@@ -48,12 +34,9 @@ export const TopTokens: React.StatelessComponent = (props: TopTo interface TokenLinkProps { tokenInfo: WebsiteBackendTokenInfo; - style: React.CSSProperties; networkId: number; } -interface TokenLinkState { - isHovering: boolean; -} +interface TokenLinkState {} class TokenLink extends React.Component { constructor(props: TokenLinkProps) { @@ -63,37 +46,21 @@ class TokenLink extends React.Component { }; } public render(): React.ReactNode { - const style = { - ...this.props.style, - cursor: 'pointer', - opacity: this.state.isHovering ? 0.5 : 1, - }; const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`; const onClick = (event: React.MouseEvent) => { event.stopPropagation(); analytics.logEvent('Portal', 'Token Click', eventLabel); + const tokenLink = this._tokenLinkFromToken(this.props.tokenInfo, this.props.networkId); + utils.openUrl(tokenLink); }; return ( - + {this.props.tokenInfo.symbol} - + ); } - private _onToggleHover(isHovering: boolean): void { - this.setState({ - isHovering, - }); + private _tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string { + return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address); } } - -function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string { - return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address); -} diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 88f216d4e..c1cb2ade4 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -16,7 +16,7 @@ export interface TextProps { center?: boolean; fontWeight?: number | string; textDecorationLine?: string; - onClick?: () => void; + onClick?: (event: React.MouseEvent) => void; } const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( @@ -37,7 +37,7 @@ export const Text = styled(PlainText)` ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; &:hover { - ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')}; + ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')}; } `; -- cgit v1.2.3 From 3031598843080ff4fabb7bfb0ba823be6d545285 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sat, 30 Jun 2018 13:23:13 -0700 Subject: Implement icon button --- packages/website/ts/components/ui/text.tsx | 5 +++-- packages/website/ts/components/wallet/wallet.tsx | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index c1cb2ade4..315f72854 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -3,7 +3,7 @@ import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4'; +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; export interface TextProps { className?: string; @@ -17,6 +17,7 @@ export interface TextProps { fontWeight?: number | string; textDecorationLine?: string; onClick?: (event: React.MouseEvent) => void; + hoverColor?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( @@ -37,7 +38,7 @@ export const Text = styled(PlainText)` ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; &:hover { - ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')}; + ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } `; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 1f1e3598a..899f8e3a3 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -199,11 +199,26 @@ export class Wallet extends React.Component {
); + const onClick = _.noop; + const accessory = ( + + + + ); return ( } main={main} + accessory={accessory} minHeight="60px" backgroundColor={colors.white} /> -- cgit v1.2.3 From be64184cfa11dcabd543161b5d7a6726d4e7924d Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sat, 30 Jun 2018 13:51:40 -0700 Subject: Clean up a bit of the provider display logic --- .../ts/components/top_bar/install_prompt.tsx | 59 ++++++++++++++ .../ts/components/top_bar/provider_display.tsx | 92 +++++----------------- packages/website/ts/components/ui/drop_down.tsx | 2 +- 3 files changed, 80 insertions(+), 73 deletions(-) create mode 100644 packages/website/ts/components/top_bar/install_prompt.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/install_prompt.tsx b/packages/website/ts/components/top_bar/install_prompt.tsx new file mode 100644 index 000000000..8d1a9c48a --- /dev/null +++ b/packages/website/ts/components/top_bar/install_prompt.tsx @@ -0,0 +1,59 @@ +import RaisedButton from 'material-ui/RaisedButton'; +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; +import { constants } from 'ts/utils/constants'; + +export interface InstallPromptProps { + onToggleLedgerDialog: () => void; +} + +export const InstallPrompt: React.StatelessComponent = ({ onToggleLedgerDialog }) => { + return ( +
+
+ Choose a wallet: +
+
+
+
Install a browser wallet
+
+ +
+ +
+
+
+
or
+
+
+
+
Connect to a ledger hardware wallet
+
+ +
+
+ +
+
+
+
+ ); +}; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 8743e4320..18afee4ea 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -7,6 +7,7 @@ import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; +import { InstallPrompt } from 'ts/components/top_bar/install_prompt'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; @@ -72,78 +73,25 @@ export class ProviderDisplay extends React.Component - ); - } else { - // Nothing to connect to, show install/info popover - return ( -
-
- Choose a wallet: -
-
-
-
Install a browser wallet
-
- -
-
- Use{' '} - - Metamask - {' '} - or{' '} - - Parity Signer - -
-
-
-
-
or
-
-
-
-
Connect to a ledger hardware wallet
-
- -
-
- -
-
-
-
- ); + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + case AccountState.Locked: + return ( + + ); + case AccountState.Disconnected: + return ; + case AccountState.Loading: + default: + return null; } } private _renderIcon(): React.ReactNode { diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 22cb942f8..7d900d685 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -66,7 +66,7 @@ export class DropDown extends React.Component { targetOrigin={this.props.targetOrigin} onRequestClose={this._closePopover.bind(this)} useLayerForClickAway={false} - animation={PopoverAnimationVertical} + animated={false} zDepth={this.props.zDepth} >
-- cgit v1.2.3 From da8cf9981eda4a068c22d0107e07b704afda2584 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sat, 30 Jun 2018 14:25:33 -0700 Subject: Implement simple menu --- .../ts/components/top_bar/provider_display.tsx | 25 ++++--- .../ts/components/top_bar/provider_picker.tsx | 79 ---------------------- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/drop_down.tsx | 2 +- packages/website/ts/components/ui/simple_menu.tsx | 34 ++++++++++ 5 files changed, 50 insertions(+), 91 deletions(-) delete mode 100644 packages/website/ts/components/top_bar/provider_picker.tsx create mode 100644 packages/website/ts/components/ui/simple_menu.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 18afee4ea..3f29d5ff3 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -5,19 +5,21 @@ import RaisedButton from 'material-ui/RaisedButton'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; +import * as CopyToClipboard from 'react-copy-to-clipboard'; +import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { InstallPrompt } from 'ts/components/top_bar/install_prompt'; -import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; +import { SimpleMenu, SimpleMenuItem } from 'ts/components/ui/simple_menu'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { AccountState, ProviderType } from 'ts/types'; +import { AccountState, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -76,19 +78,20 @@ export class ProviderDisplay extends React.Component + + + + + + + + + ); case AccountState.Disconnected: return ; + case AccountState.Locked: case AccountState.Loading: default: return null; diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx deleted file mode 100644 index 7937f2e9d..000000000 --- a/packages/website/ts/components/top_bar/provider_picker.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { colors, constants as sharedConstants } from '@0xproject/react-shared'; -import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'; -import * as React from 'react'; -import { Blockchain } from 'ts/blockchain'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { ProviderType } from 'ts/types'; - -interface ProviderPickerProps { - networkId: number; - injectedProviderName: string; - providerType: ProviderType; - onToggleLedgerDialog: () => void; - dispatcher: Dispatcher; - blockchain: Blockchain; -} - -interface ProviderPickerState {} - -export class ProviderPicker extends React.Component { - public render(): React.ReactNode { - const isLedgerSelected = this.props.providerType === ProviderType.Ledger; - const menuStyle = { - padding: 10, - paddingTop: 15, - paddingBottom: 15, - }; - // Show dropdown with two options - return ( -
- - - - -
- ); - } - private _renderLabel(title: string, shouldShowNetwork: boolean): React.ReactNode { - const label = ( -
-
{title}
- {shouldShowNetwork && this._renderNetwork()} -
- ); - return label; - } - private _renderNetwork(): React.ReactNode { - const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; - return ( -
-
- -
-
{networkName}
-
- ); - } - private _onProviderRadioChanged(value: string): void { - if (value === ProviderType.Ledger) { - this.props.onToggleLedgerDialog(); - } else { - // tslint:disable-next-line:no-floating-promises - this.props.blockchain.updateProviderToInjectedAsync(); - } - } -} diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index fb718d731..edbf8814b 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -17,6 +17,7 @@ export interface ContainerProps { maxHeight?: StringOrNum; width?: StringOrNum; height?: StringOrNum; + minWidth?: StringOrNum; minHeight?: StringOrNum; isHidden?: boolean; className?: string; diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 7d900d685..3738e50eb 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -49,7 +49,7 @@ export class DropDown extends React.Component { // call hoverOff whenever the dropdown receives updated props. This is a hack // because it will effectively close the dropdown on any prop update, barring // dropdowns from having dynamic content. - this._onHoverOff(); + // this._onHoverOff(); } public render(): React.ReactNode { return ( diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx new file mode 100644 index 000000000..29445c965 --- /dev/null +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -0,0 +1,34 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; + +export interface SimpleMenuProps {} + +export const SimpleMenu: React.StatelessComponent = ({ children }) => { + return ( + + {children} + + ); +}; + +export interface SimpleMenuItemProps { + text: string; + onClick?: () => void; +} +export const SimpleMenuItem: React.StatelessComponent = ({ text, onClick }) => ( + + + {text} + + +); -- cgit v1.2.3 From 6daf754f5bb4aa85d0f65bfdaf8910db4401d1cc Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sat, 30 Jun 2018 23:32:06 -0700 Subject: Add menu to wallet --- packages/website/ts/components/wallet/wallet.tsx | 40 +++++++++++++++++++----- 1 file changed, 32 insertions(+), 8 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 899f8e3a3..b43164664 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -5,15 +5,18 @@ import * as _ from 'lodash'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import * as React from 'react'; +import * as CopyToClipboard from 'react-copy-to-clipboard'; import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; +import { DropDown } from 'ts/components/ui/drop_down'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; +import { SimpleMenu, SimpleMenuItem } from 'ts/components/ui/simple_menu'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; @@ -202,14 +205,35 @@ export class Wallet extends React.Component { const onClick = _.noop; const accessory = ( - + } + popoverContent={ + + + + + + + + + + } + anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'right', vertical: 'top' }} + zDepth={1} /> ); -- cgit v1.2.3 From a6f40d418704a8dca8c787663f00b6bcbdf18ba4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 1 Jul 2018 13:31:43 -0700 Subject: Implement correct behavior for menu in the wallet --- packages/website/ts/blockchain_watcher.ts | 7 +++--- .../ts/components/top_bar/provider_display.tsx | 9 ++++---- packages/website/ts/components/top_bar/top_bar.tsx | 4 ++-- packages/website/ts/components/ui/drop_down.tsx | 27 ++++++++++++++++++---- packages/website/ts/components/ui/simple_menu.tsx | 14 +++++++---- packages/website/ts/components/wallet/wallet.tsx | 22 +++++++++--------- 6 files changed, 52 insertions(+), 31 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts index df5f73fd1..4b23aa98a 100644 --- a/packages/website/ts/blockchain_watcher.ts +++ b/packages/website/ts/blockchain_watcher.ts @@ -10,6 +10,7 @@ export class BlockchainWatcher { private _watchBalanceIntervalId: NodeJS.Timer; private _prevUserEtherBalanceInWei?: BigNumber; private _prevUserAddressIfExists: string; + private _prevNodeVersionIfExists: string; constructor(dispatcher: Dispatcher, web3Wrapper: Web3Wrapper, shouldPollUserAddress: boolean) { this._dispatcher = dispatcher; this._shouldPollUserAddress = shouldPollUserAddress; @@ -43,11 +44,9 @@ export class BlockchainWatcher { ); } private async _updateBalanceAsync(): Promise { - let prevNodeVersion: string; - // Check for node version changes const currentNodeVersion = await this._web3Wrapper.getNodeVersionAsync(); - if (currentNodeVersion !== prevNodeVersion) { - prevNodeVersion = currentNodeVersion; + if (this._prevNodeVersionIfExists !== currentNodeVersion) { + this._prevNodeVersionIfExists = currentNodeVersion; this._dispatcher.updateNodeVersion(currentNodeVersion); } diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 3f29d5ff3..6d02ebd59 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -51,7 +51,7 @@ export class ProviderDisplay extends React.Component {this._renderIcon()} @@ -61,14 +61,13 @@ export class ProviderDisplay extends React.Component ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; - const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle'; return (
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index fac6c131f..778536663 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -199,7 +199,7 @@ export class TopBar extends React.Component { cursor: 'pointer', paddingTop: 16, }; - const hoverActiveNode = ( + const activeNode = (
{this.props.translate.get(Key.Developers, Deco.Cap)}
@@ -224,7 +224,7 @@ export class TopBar extends React.Component {
{ public static defaultProps: Partial = { style: DEFAULT_STYLE, zDepth: 1, + shouldWaitForClickToActivate: false, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -49,7 +51,7 @@ export class DropDown extends React.Component { // call hoverOff whenever the dropdown receives updated props. This is a hack // because it will effectively close the dropdown on any prop update, barring // dropdowns from having dynamic content. - // this._onHoverOff(); + this._onHoverOff(); } public render(): React.ReactNode { return ( @@ -58,7 +60,7 @@ export class DropDown extends React.Component { onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)} > - {this.props.hoverActiveNode} +
{this.props.activeNode}
{ animated={false} zDepth={this.props.zDepth} > -
+
{this.props.popoverContent}
); } + private _onActiveNodeClick(event: React.FormEvent): void { + event.stopPropagation(); + if (this.props.shouldWaitForClickToActivate) { + this.setState({ + isDropDownOpen: true, + anchorEl: event.currentTarget, + }); + } + } private _onHover(event: React.FormEvent): void { this._isHovering = true; - this._checkIfShouldOpenPopover(event); + if (!this.props.shouldWaitForClickToActivate) { + this._checkIfShouldOpenPopover(event); + } } private _checkIfShouldOpenPopover(event: React.FormEvent): void { if (this.state.isDropDownOpen) { diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 29445c965..22414d101 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -5,15 +5,17 @@ import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -export interface SimpleMenuProps {} +export interface SimpleMenuProps { + minWidth?: number | string; +} -export const SimpleMenu: React.StatelessComponent = ({ children }) => { +export const SimpleMenu: React.StatelessComponent = ({ children, minWidth }) => { return ( {children} @@ -26,9 +28,13 @@ export interface SimpleMenuItemProps { onClick?: () => void; } export const SimpleMenuItem: React.StatelessComponent = ({ text, onClick }) => ( - + {text} ); + +SimpleMenu.defaultProps = { + minWidth: '220px', +}; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index b43164664..fca6c5745 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -206,7 +206,7 @@ export class Wallet extends React.Component { const accessory = ( { /> } popoverContent={ - + @@ -234,19 +234,19 @@ export class Wallet extends React.Component { anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} targetOrigin={{ horizontal: 'right', vertical: 'top' }} zDepth={1} + shouldWaitForClickToActivate={true} /> ); return ( - - } - main={main} - accessory={accessory} - minHeight="60px" - backgroundColor={colors.white} - /> - + } + main={main} + accessory={accessory} + minHeight="60px" + backgroundColor={colors.white} + /> ); } private _renderBody(): React.ReactElement<{}> { -- cgit v1.2.3 From 955fdf5d13945fc7267e8ce0cc1f6016c57f3b72 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 1 Jul 2018 14:03:07 -0700 Subject: Give connected header accessory more padding --- packages/website/ts/components/wallet/wallet.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index fca6c5745..ab234ae1b 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -207,15 +207,19 @@ export class Wallet extends React.Component { + // this container gives the menu button more of a hover target for the drop down + // it prevents accidentally closing the menu by moving off of the button + + + } popoverContent={ -- cgit v1.2.3 From 5a7908984e118f2babf7c0680bf17afa148f5122 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 1 Jul 2018 14:34:50 -0700 Subject: Consolidate logic for common menu items --- .../ts/components/top_bar/provider_display.tsx | 19 +++---- packages/website/ts/components/ui/simple_menu.tsx | 66 ++++++++++++++++++---- packages/website/ts/components/wallet/wallet.tsx | 22 +++----- 3 files changed, 74 insertions(+), 33 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 6d02ebd59..c2915f9a9 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -5,8 +5,6 @@ import RaisedButton from 'material-ui/RaisedButton'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; -import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { InstallPrompt } from 'ts/components/top_bar/install_prompt'; @@ -15,7 +13,12 @@ import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; -import { SimpleMenu, SimpleMenuItem } from 'ts/components/ui/simple_menu'; +import { + CopyAddressSimpleMenuItem, + DifferentWalletSimpleMenuItem, + GoToAccountManagementSimpleMenuItem, + SimpleMenu, +} from 'ts/components/ui/simple_menu'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; @@ -79,13 +82,9 @@ export class ProviderDisplay extends React.Component - - - - - - - + + + ); case AccountState.Disconnected: diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 22414d101..52d97b1ea 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,9 +1,12 @@ import * as _ from 'lodash'; import * as React from 'react'; +import * as CopyToClipboard from 'react-copy-to-clipboard'; +import { Link } from 'react-router-dom'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; +import { WebsitePaths } from 'ts/types'; export interface SimpleMenuProps { minWidth?: number | string; @@ -23,18 +26,61 @@ export const SimpleMenu: React.StatelessComponent = ({ children ); }; +SimpleMenu.defaultProps = { + minWidth: '220px', +}; + export interface SimpleMenuItemProps { - text: string; + displayText: string; onClick?: () => void; } -export const SimpleMenuItem: React.StatelessComponent = ({ text, onClick }) => ( - - - {text} - - -); +export const SimpleMenuItem: React.StatelessComponent = ({ displayText, onClick }) => { + // Falling back to _.noop for onclick retains the hovering effect + return ( + + + {displayText} + + + ); +}; -SimpleMenu.defaultProps = { - minWidth: '220px', +export interface CopyAddressSimpleMenuItemProps { + userAddress: string; + onClick?: () => void; +} +export const CopyAddressSimpleMenuItem: React.StatelessComponent = ({ + userAddress, + onClick, +}) => { + return ( + + + + ); +}; + +export interface LinkSimpleMenuItemProps { + onClick?: () => void; +} +export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent = ({ onClick }) => { + return ( + + + + ); +}; + +export interface DifferentWalletSimpleMenuItemProps { + onClick?: () => void; +} +export const DifferentWalletSimpleMenuItem: React.StatelessComponent = ({ + onClick, +}) => { + return ; }; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index ab234ae1b..b6ae79b74 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -16,7 +16,12 @@ import { DropDown } from 'ts/components/ui/drop_down'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; -import { SimpleMenu, SimpleMenuItem } from 'ts/components/ui/simple_menu'; +import { + CopyAddressSimpleMenuItem, + DifferentWalletSimpleMenuItem, + GoToAccountManagementSimpleMenuItem, + SimpleMenu, +} from 'ts/components/ui/simple_menu'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; @@ -37,7 +42,6 @@ import { TokenByAddress, TokenState, TokenStateByAddress, - WebsitePaths, } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; @@ -88,7 +92,6 @@ const HEADER_ITEM_KEY = 'HEADER'; const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; -const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; const PLACEHOLDER_COLOR = colors.grey300; const LOADING_ROWS_COUNT = 6; @@ -223,16 +226,9 @@ export class Wallet extends React.Component { } popoverContent={ - - - - - - - + + + } anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} -- cgit v1.2.3 From 2dea179333dd14ad74aea65bb6558aac3bb716f4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 1 Jul 2018 14:44:14 -0700 Subject: More cleanup --- packages/website/ts/components/ui/drop_down.tsx | 1 - packages/website/ts/components/wallet/wallet.tsx | 61 ++++++++++++------------ 2 files changed, 31 insertions(+), 31 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 3f1fec3f4..947e51be0 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -83,7 +83,6 @@ export class DropDown extends React.Component { ); } private _onActiveNodeClick(event: React.FormEvent): void { - event.stopPropagation(); if (this.props.shouldWaitForClickToActivate) { this.setState({ isDropDownOpen: true, diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index b6ae79b74..56776d255 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -21,6 +21,7 @@ import { DifferentWalletSimpleMenuItem, GoToAccountManagementSimpleMenuItem, SimpleMenu, + SimpleMenuItem, } from 'ts/components/ui/simple_menu'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; @@ -207,36 +208,36 @@ export class Wallet extends React.Component { ); const onClick = _.noop; const accessory = ( - - - - - } - popoverContent={ - - - - - - } - anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'right', vertical: 'top' }} - zDepth={1} - shouldWaitForClickToActivate={true} - /> - + + + + } + popoverContent={ + + + + + + + + } + anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'right', vertical: 'top' }} + zDepth={1} + shouldWaitForClickToActivate={true} + /> ); return ( Date: Sun, 1 Jul 2018 14:48:01 -0700 Subject: Lint fixes --- packages/website/ts/components/top_bar/provider_display.tsx | 13 +++---------- packages/website/ts/components/ui/drop_down.tsx | 2 +- packages/website/ts/components/ui/simple_menu.tsx | 5 +---- packages/website/ts/components/wallet/wallet.tsx | 2 -- 4 files changed, 5 insertions(+), 17 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index c2915f9a9..74f9beedb 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,7 +1,6 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import RaisedButton from 'material-ui/RaisedButton'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; @@ -22,8 +21,7 @@ import { import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { AccountState, ProviderType, WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { AccountState, ProviderType } from 'ts/types'; import { utils } from 'ts/utils/utils'; const ROOT_HEIGHT = 24; @@ -50,10 +48,6 @@ const styles: Styles = { export class ProviderDisplay extends React.Component { public render(): React.ReactNode { - const isExternallyInjectedProvider = utils.isExternallyInjected( - this.props.providerType, - this.props.injectedProviderName, - ); const activeNode = ( {this._renderIcon()} @@ -63,12 +57,11 @@ export class ProviderDisplay extends React.Component ); - const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; return (
); } - public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode { + private _renderPopoverContent(): React.ReactNode { const accountState = this._getAccountState(); switch (accountState) { case AccountState.Ready: diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 947e51be0..c21c69993 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -1,4 +1,4 @@ -import Popover, { PopoverAnimationVertical } from 'material-ui/Popover'; +import Popover from 'material-ui/Popover'; import * as React from 'react'; import { MaterialUIPosition } from 'ts/types'; diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 52d97b1ea..c1cab07bd 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -65,10 +65,7 @@ export const CopyAddressSimpleMenuItem: React.StatelessComponent void; -} -export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent = ({ onClick }) => { +export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<{}> = () => { return ( diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 56776d255..875e6e78d 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -5,8 +5,6 @@ import * as _ from 'lodash'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import * as React from 'react'; -import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; -- cgit v1.2.3 From 06f4427939123cae8273bb5cc33cd90ac65a2f59 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 13:15:40 -0700 Subject: Add Alex Browne to about page --- packages/website/public/images/team/alexbrowne.png | Bin 0 -> 146699 bytes packages/website/ts/pages/about/about.tsx | 29 ++++++++++++++------- 2 files changed, 19 insertions(+), 10 deletions(-) create mode 100644 packages/website/public/images/team/alexbrowne.png (limited to 'packages/website') diff --git a/packages/website/public/images/team/alexbrowne.png b/packages/website/public/images/team/alexbrowne.png new file mode 100644 index 000000000..76a61913e Binary files /dev/null and b/packages/website/public/images/team/alexbrowne.png differ diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 0259af36f..5bb5d06a9 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -165,16 +165,24 @@ const teamRow5: ProfileInfo[] = [ }, ]; -// const teamRow6: ProfileInfo[] = [ -// { -// name: 'Chris Kalani', -// title: 'Director of Design', -// description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, -// image: 'images/team/chris.png', -// linkedIn: 'https://www.linkedin.com/in/chriskalani/', -// github: 'https://github.com/chriskalani', -// }, -// ]; +const teamRow6: ProfileInfo[] = [ + { + name: 'Alex Browne', + title: 'Engineer in Residence', + description: `Full-stack blockchain engineer. Previously at Plaid. Open source guru and footgun dismantler. Computer Science and Electrical Engineering at Duke.`, + image: 'images/team/alexbrowne.png', + linkedIn: 'https://www.linkedin.com/in/stephenalexbrowne/', + github: 'http://github.com/albrow', + }, + // { + // name: 'Chris Kalani', + // title: 'Director of Design', + // description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, + // image: 'images/team/chris.png', + // linkedIn: 'https://www.linkedin.com/in/chriskalani/', + // github: 'https://github.com/chriskalani', + // }, +]; const advisors: ProfileInfo[] = [ { @@ -270,6 +278,7 @@ export class About extends React.Component {
{this._renderProfiles(teamRow3)}
{this._renderProfiles(teamRow4)}
{this._renderProfiles(teamRow5)}
+
{this._renderProfiles(teamRow6)}
Date: Mon, 2 Jul 2018 15:52:59 -0700 Subject: Only auto-start onboarding if blockchain is loaded --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 6bfa5c75f..6d8007659 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -46,7 +46,7 @@ class PlainPortalOnboardingFlow extends React.Component this.props.updateIsRunning(false)); } @@ -61,6 +61,9 @@ class PlainPortalOnboardingFlow extends React.Component Date: Mon, 2 Jul 2018 15:58:53 -0700 Subject: Remove max-width from onboarding card to support iPad --- packages/website/ts/components/onboarding/onboarding_card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index 48e8ab022..ba5b3d6ea 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -39,7 +39,7 @@ export const OnboardingCard: React.StatelessComponent = ({ borderRadius, }) => ( - +
{title} -- cgit v1.2.3 From bc7e8ff471d7abe8e65b30d1945f6a989d521f10 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 2 Jul 2018 16:00:34 -0700 Subject: Add better balance formatting rules for balances and usd values --- packages/website/package.json | 2 ++ packages/website/ts/components/wallet/wallet.tsx | 20 +++++--------------- packages/website/ts/utils/constants.ts | 3 ++- packages/website/ts/utils/utils.ts | 16 ++++++++++++++-- 4 files changed, 23 insertions(+), 18 deletions(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index c7b689356..cc7b7c05c 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -38,6 +38,7 @@ "lodash": "^4.17.4", "material-ui": "^0.17.1", "moment": "2.21.0", + "numeral": "^2.0.6", "polished": "^1.9.2", "query-string": "^6.0.0", "react": "15.6.1", @@ -71,6 +72,7 @@ "@types/lodash": "4.14.104", "@types/material-ui": "0.18.0", "@types/node": "^8.0.53", + "@types/numeral": "^0.0.22", "@types/query-string": "^5.1.0", "@types/react": "16.3.13", "@types/react-copy-to-clipboard": "^4.2.0", diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 1f1e3598a..668a7a537 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,6 +1,5 @@ import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { BigNumber, errorUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; @@ -83,7 +82,6 @@ const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; const ETHER_ITEM_KEY = 'ETHER'; -const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; const PLACEHOLDER_COLOR = colors.grey300; @@ -411,19 +409,11 @@ export class Wallet extends React.Component { price?: BigNumber, isLoading: boolean = false, ): React.ReactNode { - let result; - if (!isLoading) { - if (_.isUndefined(price)) { - result = '--'; - } else { - const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); - const value = unitAmount.mul(price); - const formattedAmount = value.toFixed(USD_DECIMAL_PLACES); - result = `$${formattedAmount}`; - } - } else { - result = '$0.00'; - } + const result = !isLoading + ? _.isUndefined(price) + ? '--' + : utils.getUsdValueFormattedAmount(amount, decimals, price) + : '$0.00'; return ( diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index d3a2aa107..71c0092d2 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -6,7 +6,7 @@ export const constants = { ETHER_TOKEN_SYMBOL: 'WETH', ZRX_TOKEN_SYMBOL: 'ZRX', ETHER_SYMBOL: 'ETH', - TOKEN_AMOUNT_DISPLAY_PRECISION: 5, + TOKEN_AMOUNT_DISPLAY_PRECISION: 4, GENESIS_ORDER_BLOCK_BY_NETWORK_ID: { 1: 4145578, 42: 3117574, @@ -38,6 +38,7 @@ export const constants = { UNAVAILABLE_STATUS: 503, TAKER_FEE: new BigNumber(0), TESTNET_NAME: 'Kovan', + NUMERAL_USD_FORMAT: '$0,0.00', PROJECT_URL_ETHFINEX: 'https://www.ethfinex.com/', PROJECT_URL_AMADEUS: 'http://amadeusrelay.org', PROJECT_URL_DDEX: 'https://ddex.io', diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 726e1815f..b27c6e48b 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -8,6 +8,8 @@ import * as bowser from 'bowser'; import deepEqual = require('deep-equal'); import * as _ from 'lodash'; import * as moment from 'moment'; +import * as numeral from 'numeral'; + import { AccountState, BlockchainCallErrs, @@ -380,10 +382,20 @@ export const utils = { }, getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); - const precision = Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces()); - const formattedAmount = unitAmount.toFixed(precision); + // if the unit amount is less than 1, show the natural number of decimal places with a max of 4 + // if the unit amount is greater than or equal to 1, show only 2 decimal places + const precision = unitAmount.lt(1) + ? Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces()) + : 2; + const format = `0,0.${_.repeat('0', precision)}`; + const formattedAmount = numeral(unitAmount).format(format); return `${formattedAmount} ${symbol}`; }, + getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string { + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); + const value = unitAmount.mul(price); + return numeral(value).format(constants.NUMERAL_USD_FORMAT); + }, openUrl(url: string): void { window.open(url, '_blank'); }, -- cgit v1.2.3 From 2eede4a09ecd17cade6623b4a770a62bee57a2e8 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 2 Jul 2018 16:30:13 -0700 Subject: Update start onboarding copy and relayer grid empty color --- packages/website/public/images/setup_account_icon.svg | 3 +++ packages/website/ts/components/portal/portal.tsx | 12 ++++++------ .../ts/components/relayer_index/relayer_grid_tile.tsx | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 packages/website/public/images/setup_account_icon.svg (limited to 'packages/website') diff --git a/packages/website/public/images/setup_account_icon.svg b/packages/website/public/images/setup_account_icon.svg new file mode 100644 index 000000000..eaa5b2fd6 --- /dev/null +++ b/packages/website/public/images/setup_account_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9c0cb866d..8c3b5cfd7 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,7 +1,6 @@ import { colors, constants as sharedConstants } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; -import Help from 'material-ui/svg-icons/action/help'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; @@ -24,6 +23,7 @@ import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; +import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; @@ -368,11 +368,11 @@ export class Portal extends React.Component { const shouldStartOnboarding = !isMobile || this.props.location.pathname === `${WebsitePaths.Portal}/account`; const startOnboarding = ( - - - - Learn how to set up your account - + + Set up your account to start trading + + + ); diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index b26bf512b..80ff8c7ff 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -55,7 +55,7 @@ const styles: Styles = { }; const FALLBACK_IMG_SRC = '/images/relayer_fallback.png'; -const FALLBACK_PRIMARY_COLOR = colors.grey200; +const FALLBACK_PRIMARY_COLOR = colors.grey300; const NO_CONTENT_MESSAGE = '--'; const RELAYER_ICON_HEIGHT = '110px'; -- cgit v1.2.3 From 04d11d6fac265d8e43de8c14cab78655bb90d035 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 2 Jul 2018 13:38:02 -0700 Subject: Add human readable names for Toshi and Cipher --- packages/website/ts/blockchain.ts | 2 ++ packages/website/ts/types.ts | 2 ++ packages/website/ts/utils/constants.ts | 2 ++ packages/website/ts/utils/utils.ts | 5 +++++ 4 files changed, 11 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index d18c34c32..b59306974 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -73,6 +73,8 @@ const providerToName: { [provider: string]: string } = { [Providers.Metamask]: constants.PROVIDER_NAME_METAMASK, [Providers.Parity]: constants.PROVIDER_NAME_PARITY_SIGNER, [Providers.Mist]: constants.PROVIDER_NAME_MIST, + [Providers.Toshi]: constants.PROVIDER_NAME_TOSHI, + [Providers.Cipher]: constants.PROVIDER_NAME_CIPHER, }; export class Blockchain { diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 498a0a5b8..2e4cf84d0 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -487,6 +487,8 @@ export enum Providers { Parity = 'PARITY', Metamask = 'METAMASK', Mist = 'MIST', + Toshi = 'TOSHI', + Cipher = 'CIPHER', } export interface InjectedProviderUpdate { diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index d3a2aa107..b0cb2fa08 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -29,6 +29,8 @@ export const constants = { PROVIDER_NAME_METAMASK: 'MetaMask', PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer', PROVIDER_NAME_MIST: 'Mist', + PROVIDER_NAME_CIPHER: 'Cipher Browser', + PROVIDER_NAME_TOSHI: 'Toshi', PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65', diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 726e1815f..0ef3d6723 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -324,6 +324,7 @@ export const utils = { getProviderType(provider: Provider): Providers | string { const constructorName = provider.constructor.name; let parsedProviderName = constructorName; + // https://ethereum.stackexchange.com/questions/24266/elegant-way-to-detect-current-provider-int-web3-js switch (constructorName) { case 'EthereumProvider': parsedProviderName = Providers.Mist; @@ -337,6 +338,10 @@ export const utils = { parsedProviderName = Providers.Parity; } else if ((provider as any).isMetaMask) { parsedProviderName = Providers.Metamask; + } else if (!_.isUndefined(_.get(window, 'SOFA'))) { + parsedProviderName = Providers.Toshi; + } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { + parsedProviderName = Providers.Cipher; } return parsedProviderName; }, -- cgit v1.2.3 From 73d8a2adf748e06552a1a7a7a188433c4c41095b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 2 Jul 2018 16:52:20 -0700 Subject: Always show the wrap ether row in between ETH and WETH --- packages/website/ts/components/wallet/wallet.tsx | 33 +++++++++++----------- .../ts/components/wallet/wrap_ether_item.tsx | 5 ++-- 2 files changed, 20 insertions(+), 18 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 1f1e3598a..a75404637 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -320,8 +320,24 @@ export class Wallet extends React.Component { this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection && !_.isUndefined(this.props.userEtherBalanceInWei); const etherToken = this._getEthToken(); + const wrapEtherItem = shouldShowWrapEtherItem ? ( + this.props.refetchTokenStateAsync(etherToken.address)} + /> + ) : null; return (
+ {this.state.wrappedEtherDirection === Side.Receive && wrapEtherItem} {
} accessory={this._renderAccessoryItems(accessoryItemConfig)} - backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined} /> - {shouldShowWrapEtherItem && ( - this.props.refetchTokenStateAsync(etherToken.address)} - /> - )} + {this.state.wrappedEtherDirection === Side.Deposit && wrapEtherItem}
); } diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 851b35f90..2b4cf93fe 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -8,6 +8,7 @@ import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { EthAmountInput } from 'ts/components/inputs/eth_amount_input'; import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; +import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { BlockchainCallErrs, Side, Token } from 'ts/types'; @@ -94,7 +95,7 @@ export class WrapEtherItem extends React.Component +
{this._renderIsEthConversionHappeningSpinner()}
{topLabelText}
@@ -142,7 +143,7 @@ export class WrapEtherItem extends React.Component -
+ ); } private _onValueChange(_isValid: boolean, amount?: BigNumber): void { -- cgit v1.2.3 From fd545ec00fc0f4b0a64db8cdb3d5c217e45a6b6a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 2 Jul 2018 17:11:54 -0700 Subject: Remove increase balance link from balance_bounded_input component --- .../dialogs/eth_weth_conversion_dialog.tsx | 2 -- .../website/ts/components/dialogs/send_dialog.tsx | 1 - .../ts/components/inputs/balance_bounded_input.tsx | 35 ++-------------------- .../ts/components/inputs/eth_amount_input.tsx | 4 --- .../ts/components/inputs/token_amount_input.tsx | 2 -- 5 files changed, 2 insertions(+), 42 deletions(-) (limited to 'packages/website') 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 9ac78e80e..7b09cc92c 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -103,7 +103,6 @@ export class EthWethConversionDialog extends React.Component< shouldCheckAllowance={false} onChange={this._onValueChange.bind(this)} amount={this.state.value} - onVisitBalancesPageClick={this.props.onCancelled} /> ) : ( )}
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index 421f18b4f..8a98fdf69 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -80,7 +80,6 @@ export class SendDialog extends React.Component
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 968609030..f23beb436 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -3,9 +3,8 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { RequiredLabel } from 'ts/components/ui/required_label'; -import { ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; +import { ValidatedBigNumberCallback } from 'ts/types'; import { utils } from 'ts/utils/utils'; interface BalanceBoundedInputProps { @@ -18,8 +17,6 @@ interface BalanceBoundedInputProps { shouldShowIncompleteErrs?: boolean; shouldCheckBalance: boolean; validate?: (amount: BigNumber) => React.ReactNode; - onVisitBalancesPageClick?: () => void; - shouldHideVisitBalancesLink?: boolean; isDisabled?: boolean; shouldShowErrs?: boolean; shouldShowUnderline?: boolean; @@ -35,7 +32,6 @@ interface BalanceBoundedInputState { export class BalanceBoundedInput extends React.Component { public static defaultProps: Partial = { shouldShowIncompleteErrs: false, - shouldHideVisitBalancesLink: false, isDisabled: false, shouldShowErrs: true, hintText: 'amount', @@ -124,38 +120,11 @@ export class BalanceBoundedInput extends React.ComponentInsufficient balance. {this._renderIncreaseBalanceLink()}; + return Insufficient balance.; } const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount); return errMsg; } - private _renderIncreaseBalanceLink(): React.ReactNode { - if (this.props.shouldHideVisitBalancesLink) { - return null; - } - - const increaseBalanceText = 'Increase balance'; - const linkStyle = { - cursor: 'pointer', - color: colors.darkestGrey, - textDecoration: 'underline', - display: 'inline', - }; - if (_.isUndefined(this.props.onVisitBalancesPageClick)) { - return ( - - {increaseBalanceText} - - ); - } else { - return ( -
- {increaseBalanceText} -
- ); - } - } - private _setAmountState(amount: string, balance: BigNumber, callback: () => void = _.noop): void { const errorMsg = this._validate(amount, balance); this.props.onErrorMsgChange(errorMsg); diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index 1f0f27410..552d4277a 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -14,9 +14,7 @@ interface EthAmountInputProps { onChange: ValidatedBigNumberCallback; onErrorMsgChange?: (errorMsg: React.ReactNode) => void; shouldShowIncompleteErrs: boolean; - onVisitBalancesPageClick?: () => void; shouldCheckBalance: boolean; - shouldHideVisitBalancesLink?: boolean; shouldShowErrs?: boolean; shouldShowUnderline?: boolean; style?: React.CSSProperties; @@ -46,8 +44,6 @@ export class EthAmountInput extends React.Component void; - onVisitBalancesPageClick?: () => void; lastForceTokenStateRefetch: number; shouldShowErrs?: boolean; shouldShowUnderline?: boolean; @@ -88,7 +87,6 @@ export class TokenAmountInput extends React.Component Date: Mon, 2 Jul 2018 17:26:48 -0700 Subject: Add media query abstraction around ScreenWidths and stop relayer grid hover effect on mobile --- packages/website/public/index.html | 12 +++++++++++- .../components/onboarding/unlock_wallet_onboarding_step.tsx | 2 +- .../ts/components/relayer_index/relayer_grid_tile.tsx | 4 ++++ packages/website/ts/types.ts | 7 ++++--- packages/website/ts/utils/utils.ts | 7 ++----- 5 files changed, 22 insertions(+), 10 deletions(-) (limited to 'packages/website') diff --git a/packages/website/public/index.html b/packages/website/public/index.html index 4c0985c71..c7a40875f 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -70,7 +70,17 @@ })(document, 'script', 'twitter-wjs'); - + + diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx index 0039aa545..4ed7137d4 100644 --- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent - Unlock your metamask extension to get started. + Unlock your MetaMask extension to get started.
); diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index b26bf512b..20594e5ca 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -9,6 +9,7 @@ import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; +import { media } from 'ts/style/media'; import { styled } from 'ts/style/theme'; import { WebsiteBackendRelayerInfo } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -111,6 +112,9 @@ const GridTile = styled(PlainGridTile)` &:hover { transform: translate(0px, -3px); } + ${media.small` + transform: none; + `}; `; interface SectionProps { diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 498a0a5b8..e8fdbc255 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -215,10 +215,11 @@ export interface ContractEvent { } export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void; +// Associated values are in `em` units export enum ScreenWidths { - Sm = 'SM', - Md = 'MD', - Lg = 'LG', + Sm = 40, + Md = 52, + Lg = 64, } export enum AlertTypes { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 726e1815f..73dacc1d6 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -27,9 +27,6 @@ import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import * as u2f from 'ts/vendor/u2f_api'; -const LG_MIN_EM = 64; -const MD_MIN_EM = 52; - const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD); export const utils = { @@ -134,9 +131,9 @@ export const utils = { // This logic mirrors the CSS media queries in BassCSS for the `lg-`, `md-` and `sm-` CSS // class prefixes. Do not edit these. - if (widthInEm > LG_MIN_EM) { + if (widthInEm > ScreenWidths.Lg) { return ScreenWidths.Lg; - } else if (widthInEm > MD_MIN_EM) { + } else if (widthInEm > ScreenWidths.Md) { return ScreenWidths.Md; } else { return ScreenWidths.Sm; -- cgit v1.2.3 From fe68114f3921a52fd6b6aa6cfef8d5c325499711 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 2 Jul 2018 17:56:37 -0700 Subject: Use new lock svg --- packages/website/public/images/lock_icon.svg | 3 +++ packages/website/ts/components/top_bar/provider_display.tsx | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 packages/website/public/images/lock_icon.svg (limited to 'packages/website') diff --git a/packages/website/public/images/lock_icon.svg b/packages/website/public/images/lock_icon.svg new file mode 100644 index 000000000..83e8191a1 --- /dev/null +++ b/packages/website/public/images/lock_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 8743e4320..ae3be6436 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -3,7 +3,6 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; -import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; @@ -12,6 +11,7 @@ import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; +import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -154,7 +154,7 @@ export class ProviderDisplay extends React.Component; case AccountState.Locked: - return ; + return ; case AccountState.Disconnected: return ; default: -- cgit v1.2.3 From a31f7a5112e9a74a64dd4079a08c0c749e3ffaeb Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:12:08 -0700 Subject: Implement fixed position onboarding option --- .../ts/components/onboarding/onboarding_flow.tsx | 55 ++++++++++++++++------ .../onboarding/portal_onboarding_flow.tsx | 45 ++++++++++-------- 2 files changed, 67 insertions(+), 33 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 1f4c6df82..9abbc1c82 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,18 +1,35 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; import { zIndex } from 'ts/style/z_index'; -export interface Step { +export interface FixedPositionSettings { + type: 'fixed'; + top?: string; + bottom?: string; + left?: string; + right?: string; + pointerDirection?: PointerDirection; +} + +export interface TargetPositionSettings { + type: 'target'; target: string; + placement: Placement; +} + +export interface Step { + // Provide either a CSS selector, or fixed position settings. Only applies to desktop. + position: TargetPositionSettings | FixedPositionSettings; title?: string; content: React.ReactNode; - placement?: Placement; shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; @@ -40,18 +57,30 @@ export class OnboardingFlow extends React.Component { return null; } let onboardingElement = null; + const currentStep = this._getCurrentStep(); if (this.props.isMobile) { - onboardingElement = {this._renderOnboardignCard()}; - } else { + onboardingElement = {this._renderOnboardingCard()}; + } else if (currentStep.position.type === 'target') { + const { placement, target } = currentStep.position; onboardingElement = ( - + {this._renderPopperChildren.bind(this)} ); + } else if (currentStep.position.type === 'fixed') { + const { top, right, bottom, left, pointerDirection } = currentStep.position; + onboardingElement = ( + + {this._renderToolTip(pointerDirection)} + + ); } if (this.props.disableOverlay) { return onboardingElement; @@ -63,9 +92,6 @@ export class OnboardingFlow extends React.Component {
); } - private _getElementForStep(): Element { - return document.querySelector(this._getCurrentStep().target); - } private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { const customStyles = { zIndex: zIndex.aboveOverlay }; // On re-render, we want to re-center the popper. @@ -76,7 +102,7 @@ export class OnboardingFlow extends React.Component {
); } - private _renderToolTip(): React.ReactNode { + private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; @@ -94,12 +120,13 @@ export class OnboardingFlow extends React.Component { continueButtonDisplay={step.continueButtonDisplay} continueButtonText={step.continueButtonText} onContinueButtonClick={step.onContinueButtonClick} + pointerDirection={pointerDirection} /> ); } - private _renderOnboardignCard(): React.ReactNode { + private _renderOnboardingCard(): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 6d8007659..f83736aae 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -9,7 +9,12 @@ import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboardin import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step'; import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; -import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { + OnboardingFlow, + Step, + TargetPositionSettings, + FixedPositionSettings, +} from 'ts/components/onboarding/onboarding_flow'; import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step'; import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; import { @@ -79,56 +84,61 @@ class PlainPortalOnboardingFlow extends React.Component, - placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, }, { - target: '.wallet', + position: underMetamaskExtension, title: '0x Ecosystem Setup', content: , - placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, }, { - target: '.wallet', + position: nextToWalletPosition, title: '0x Ecosystem Account Setup', content: , - placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 1: Add ETH', content: ( ), - placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 2: Wrap ETH', content: , - placement: 'right', continueButtonDisplay: 'enabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 2: Wrap ETH', content: , - placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 2: Wrap ETH', content: ( ), - placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 3: Unlock Tokens', content: ( ), - placement: 'right', continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: '🎉 The Ecosystem Awaits', content: , - placement: 'right', continueButtonDisplay: 'enabled', shouldHideNextButton: true, continueButtonText: 'Enter the 0x Ecosystem', -- cgit v1.2.3 From f62044c1e3f35e0985724ebc1bac3a9b23dc2c2e Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:14:21 -0700 Subject: Add media file and remove stray comment --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 2 -- packages/website/ts/style/media.ts | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/style/media.ts (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 6d8007659..c8786da13 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -45,8 +45,6 @@ class PlainPortalOnboardingFlow extends React.Component void; public componentDidMount(): void { this._adjustStepIfShould(); - // Wait until the step is adjusted to decide whether we should show onboarding. - // setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000); // If there is a route change, just close onboarding. this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false)); } diff --git a/packages/website/ts/style/media.ts b/packages/website/ts/style/media.ts new file mode 100644 index 000000000..2f8551f34 --- /dev/null +++ b/packages/website/ts/style/media.ts @@ -0,0 +1,15 @@ +import * as _ from 'lodash'; +import { css } from 'ts/style/theme'; +import { ScreenWidths } from 'ts/types'; + +const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css` + @media (max-width: ${screenWidth}) { + ${css.apply(css, args)}; + } +`; + +export const media = { + small: generateMediaWrapper(ScreenWidths.Sm), + medium: generateMediaWrapper(ScreenWidths.Md), + large: generateMediaWrapper(ScreenWidths.Lg), +}; -- cgit v1.2.3 From 8929543b550cad73987a795d97bbe7dee6bb0d45 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:15:41 -0700 Subject: Add end comment to hotjar tracking code --- packages/website/public/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website') diff --git a/packages/website/public/index.html b/packages/website/public/index.html index c7a40875f..060f2c3c2 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -81,6 +81,7 @@ a.appendChild(r); })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv='); + -- cgit v1.2.3 From 6fc5c0cd460cf1cb8ac8fbe86e6d2fdbaa23ffe1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:36:41 -0700 Subject: Remove unused import --- packages/website/ts/style/media.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/style/media.ts b/packages/website/ts/style/media.ts index 2f8551f34..3c992eb9f 100644 --- a/packages/website/ts/style/media.ts +++ b/packages/website/ts/style/media.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import { css } from 'ts/style/theme'; import { ScreenWidths } from 'ts/types'; -- cgit v1.2.3 From f2af6e4b3ae71abdd068a88bd5d686970649fe8d Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 3 Jul 2018 01:51:59 -0700 Subject: Add optional onClick to Link simple menu item --- packages/website/ts/components/ui/simple_menu.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index c1cab07bd..74b8ef6ae 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -65,10 +65,15 @@ export const CopyAddressSimpleMenuItem: React.StatelessComponent = () => { +export interface GoToAccountManagementSimpleMenuItemProps { + onClick?: () => void; +} +export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< + GoToAccountManagementSimpleMenuItemProps +> = ({ onClick }) => { return ( - + ); }; -- cgit v1.2.3 From 4c99ac0ca2e758faf4f9fa8f9703cea357eb15aa Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 3 Jul 2018 15:59:30 +0200 Subject: Update web3-provider-engine --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index cc7b7c05c..3b17fbf98 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -59,7 +59,7 @@ "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3": "^0.20.0", - "web3-provider-engine": "^14.0.4", + "web3-provider-engine": "^14.0.6", "whatwg-fetch": "^2.0.3", "xml-js": "^1.6.4" }, -- cgit v1.2.3 From 671f29774b9a46420fdee33e3ecbffc7fa6f4c1a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 3 Jul 2018 16:56:49 +0200 Subject: Update web3-provider-engine version w/o caret --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index 3b17fbf98..b9177bed2 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -59,7 +59,7 @@ "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3": "^0.20.0", - "web3-provider-engine": "^14.0.6", + "web3-provider-engine": "14.0.6", "whatwg-fetch": "^2.0.3", "xml-js": "^1.6.4" }, -- cgit v1.2.3 From afbfc8ba1c8d4bf812e3087db50c6a9dd786be79 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 3 Jul 2018 09:06:29 -0700 Subject: Implement clickaway for wallet menu on mobile --- packages/website/ts/components/ui/drop_down.tsx | 32 +++++++++++++++--------- packages/website/ts/components/wallet/wallet.tsx | 6 +++-- 2 files changed, 24 insertions(+), 14 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index c21c69993..4d5caef08 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -7,14 +7,20 @@ const DEFAULT_STYLE = { fontSize: 14, }; -interface DropDownProps { +export enum DropdownMouseEvent { + Hover = 'hover', + Click = 'click', +} + +export interface DropDownProps { activeNode: React.ReactNode; popoverContent: React.ReactNode; anchorOrigin: MaterialUIPosition; targetOrigin: MaterialUIPosition; style?: React.CSSProperties; zDepth?: number; - shouldWaitForClickToActivate?: boolean; + activateEvent?: DropdownMouseEvent; + closeEvent?: DropdownMouseEvent; } interface DropDownState { @@ -26,7 +32,8 @@ export class DropDown extends React.Component { public static defaultProps: Partial = { style: DEFAULT_STYLE, zDepth: 1, - shouldWaitForClickToActivate: false, + activateEvent: DropdownMouseEvent.Hover, + closeEvent: DropdownMouseEvent.Hover, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -67,7 +74,7 @@ export class DropDown extends React.Component { anchorOrigin={this.props.anchorOrigin} targetOrigin={this.props.targetOrigin} onRequestClose={this._closePopover.bind(this)} - useLayerForClickAway={false} + useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} animated={false} zDepth={this.props.zDepth} > @@ -83,7 +90,7 @@ export class DropDown extends React.Component { ); } private _onActiveNodeClick(event: React.FormEvent): void { - if (this.props.shouldWaitForClickToActivate) { + if (this.props.activateEvent === DropdownMouseEvent.Click) { this.setState({ isDropDownOpen: true, anchorEl: event.currentTarget, @@ -92,28 +99,29 @@ export class DropDown extends React.Component { } private _onHover(event: React.FormEvent): void { this._isHovering = true; - if (!this.props.shouldWaitForClickToActivate) { + if (this.props.activateEvent === DropdownMouseEvent.Hover) { this._checkIfShouldOpenPopover(event); } } + private _onHoverOff(): void { + this._isHovering = false; + } private _checkIfShouldOpenPopover(event: React.FormEvent): void { if (this.state.isDropDownOpen) { return; // noop } - this.setState({ isDropDownOpen: true, anchorEl: event.currentTarget, }); } - private _onHoverOff(): void { - this._isHovering = false; - } private _checkIfShouldClosePopover(): void { - if (!this.state.isDropDownOpen || this._isHovering) { + if (!this.state.isDropDownOpen) { return; // noop } - this._closePopover(); + if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) { + this._closePopover(); + } } private _closePopover(): void { this.setState({ diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 875e6e78d..b891f873a 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -10,7 +10,7 @@ import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; +import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; @@ -194,6 +194,7 @@ export class Wallet extends React.Component { ); } private _renderConnectedHeaderRows(): React.ReactElement<{}> { + const isMobile = this.props.screenWidth === ScreenWidths.Sm; const userAddress = this.props.userAddress; const accountState = this._getAccountState(); const main = ( @@ -234,7 +235,8 @@ export class Wallet extends React.Component { anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} targetOrigin={{ horizontal: 'right', vertical: 'top' }} zDepth={1} - shouldWaitForClickToActivate={true} + activateEvent={DropdownMouseEvent.Click} + closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover} /> ); return ( -- cgit v1.2.3 From 2d30c290e9d5420ef6ec9b622ebddf3995239ebc Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 3 Jul 2018 09:22:52 -0700 Subject: Remove InstallPrompt --- .../ts/components/top_bar/install_prompt.tsx | 59 ---------------------- .../ts/components/top_bar/provider_display.tsx | 2 - 2 files changed, 61 deletions(-) delete mode 100644 packages/website/ts/components/top_bar/install_prompt.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/install_prompt.tsx b/packages/website/ts/components/top_bar/install_prompt.tsx deleted file mode 100644 index 8d1a9c48a..000000000 --- a/packages/website/ts/components/top_bar/install_prompt.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import RaisedButton from 'material-ui/RaisedButton'; -import * as React from 'react'; - -import { colors } from 'ts/style/colors'; -import { constants } from 'ts/utils/constants'; - -export interface InstallPromptProps { - onToggleLedgerDialog: () => void; -} - -export const InstallPrompt: React.StatelessComponent = ({ onToggleLedgerDialog }) => { - return ( -
-
- Choose a wallet: -
-
-
-
Install a browser wallet
-
- -
- -
-
-
-
or
-
-
-
-
Connect to a ledger hardware wallet
-
- -
-
- -
-
-
-
- ); -}; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 74f9beedb..46a32a238 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -6,7 +6,6 @@ import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; -import { InstallPrompt } from 'ts/components/top_bar/install_prompt'; import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; @@ -81,7 +80,6 @@ export class ProviderDisplay extends React.Component ); case AccountState.Disconnected: - return ; case AccountState.Locked: case AccountState.Loading: default: -- cgit v1.2.3 From 5e8ef070e2255a1360753e81045cb42572e9c877 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 3 Jul 2018 18:26:12 +0200 Subject: Fix alignment --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index b9177bed2..1bfc385b5 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -59,7 +59,7 @@ "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3": "^0.20.0", - "web3-provider-engine": "14.0.6", + "web3-provider-engine": "14.0.6", "whatwg-fetch": "^2.0.3", "xml-js": "^1.6.4" }, -- cgit v1.2.3 From c30b42434a8999356d7537e50c88ea96481e8c60 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 11:31:40 -0700 Subject: Fix linting --- packages/website/ts/components/onboarding/onboarding_flow.tsx | 3 +-- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 9abbc1c82..c2b4a4ca7 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,13 +1,12 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; -import { PointerDirection } from 'ts/components/ui/pointer'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { zIndex } from 'ts/style/z_index'; export interface FixedPositionSettings { diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 573196547..b7c5a9f64 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -10,10 +10,10 @@ import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboar import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { + FixedPositionSettings, OnboardingFlow, Step, TargetPositionSettings, - FixedPositionSettings, } from 'ts/components/onboarding/onboarding_flow'; import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step'; import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; -- cgit v1.2.3 From 32c25a20341964498c3594758aa02908c98dbfc0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 11:48:34 -0700 Subject: Persist whether onboarding is open or close across refreshes --- packages/website/ts/redux/store.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts index 0d0e6cea1..2672e3f61 100644 --- a/packages/website/ts/redux/store.ts +++ b/packages/website/ts/redux/store.ts @@ -13,9 +13,11 @@ export const store: ReduxStore = createStore( ); store.subscribe( _.throttle(() => { + const state = store.getState(); // Persisted state stateStorage.saveState({ - hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed, + hasPortalOnboardingBeenClosed: state.hasPortalOnboardingBeenClosed, + isPortalOnboardingShowing: state.isPortalOnboardingShowing, }); }, ONE_SECOND), ); -- cgit v1.2.3 From d528ce757c7d07e7d2e6f2f65ad48efc85ec4e50 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 3 Jul 2018 22:58:17 +0200 Subject: Replace use of web3 w/ web3wrapper in subproviders and rename injectedWeb3 to signer subprovider for clarity --- packages/website/ts/containers/subproviders_documentation.ts | 3 +++ 1 file changed, 3 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 6d4230e53..567f6a37e 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -25,6 +25,7 @@ const docSections = { emptyWalletSubprovider: 'emptyWalletSubprovider', fakeGasEstimateSubprovider: 'fakeGasEstimateSubprovider', injectedWeb3Subprovider: 'injectedWeb3Subprovider', + signerSubprovider: 'signerSubprovider', redundantRPCSubprovider: 'redundantRPCSubprovider', ganacheSubprovider: 'ganacheSubprovider', nonceTrackerSubprovider: 'nonceTrackerSubprovider', @@ -50,6 +51,7 @@ const docsInfoConfig: DocsInfoConfig = { ['emptyWallet-subprovider']: [docSections.emptyWalletSubprovider], ['fakeGasEstimate-subprovider']: [docSections.fakeGasEstimateSubprovider], ['injectedWeb3-subprovider']: [docSections.injectedWeb3Subprovider], + ['signer-subprovider']: [docSections.signerSubprovider], ['redundantRPC-subprovider']: [docSections.redundantRPCSubprovider], ['ganache-subprovider']: [docSections.ganacheSubprovider], ['nonceTracker-subprovider']: [docSections.nonceTrackerSubprovider], @@ -69,6 +71,7 @@ const docsInfoConfig: DocsInfoConfig = { [docSections.emptyWalletSubprovider]: ['"subproviders/src/subproviders/empty_wallet_subprovider"'], [docSections.fakeGasEstimateSubprovider]: ['"subproviders/src/subproviders/fake_gas_estimate_subprovider"'], [docSections.injectedWeb3Subprovider]: ['"subproviders/src/subproviders/injected_web3"'], + [docSections.signerSubprovider]: ['"subproviders/src/subproviders/signer"'], [docSections.redundantRPCSubprovider]: ['"subproviders/src/subproviders/redundant_rpc"'], [docSections.ganacheSubprovider]: ['"subproviders/src/subproviders/ganache"'], [docSections.nonceTrackerSubprovider]: ['"subproviders/src/subproviders/nonce_tracker"'], -- cgit v1.2.3 From d09711363951f7ae25b3b3d5e091df7a420caf9f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 3 Jul 2018 23:34:51 +0200 Subject: Remove dep on Web3 in Website. Introduced InjectedWeb3 type. --- packages/website/package.json | 1 - packages/website/ts/blockchain.ts | 24 +++++++++++++++++------- packages/website/ts/types.ts | 9 +++++++++ packages/website/ts/utils/analytics.ts | 11 ++++++----- 4 files changed, 32 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index 1bfc385b5..a5768a60b 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -58,7 +58,6 @@ "styled-components": "^3.3.0", "thenby": "^1.2.3", "truffle-contract": "2.0.1", - "web3": "^0.20.0", "web3-provider-engine": "14.0.6", "whatwg-fetch": "^2.0.3", "xml-js": "^1.6.4" diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index b59306974..a93ec9331 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -46,6 +46,7 @@ import { Fill, InjectedProviderObservable, InjectedProviderUpdate, + InjectedWeb3, Order as PortalOrder, Providers, ProviderType, @@ -59,7 +60,6 @@ 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 Web3 = require('web3'); import ProviderEngine = require('web3-provider-engine'); import FilterSubprovider = require('web3-provider-engine/subproviders/filters'); import RpcSubprovider = require('web3-provider-engine/subproviders/rpc'); @@ -97,8 +97,18 @@ export class Blockchain { } return providerNameIfExists; } - private static _getInjectedWeb3(): any { - return (window as any).web3; + 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.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 @@ -119,7 +129,7 @@ export class Blockchain { return networkIdIfExists; } private static async _getProviderAsync( - injectedWeb3: Web3, + injectedWeb3: InjectedWeb3, networkIdIfExists: number, shouldUserLedgerProvider: boolean = false, ): Promise<[Provider, LedgerSubprovider | undefined]> { @@ -834,10 +844,10 @@ export class Blockchain { this._dispatcher.updateNetworkId(networkId); await this._rehydrateStoreWithContractEventsAsync(); } - private _updateProviderName(injectedWeb3: Web3): void { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3); + private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void { + const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists); const providerName = doesInjectedWeb3Exist - ? Blockchain._getNameGivenProvider(injectedWeb3.currentProvider) + ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider) : constants.PROVIDER_NAME_PUBLIC; this._dispatcher.updateInjectedProviderName(providerName); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 2e4cf84d0..1239958df 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,5 +1,6 @@ import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; +import { Provider } from 'ethereum-types'; import * as React from 'react'; export enum Side { @@ -573,4 +574,12 @@ export enum AccountState { Loading = 'Loading', Locked = 'Locked', } + +// Minimal interface expected for an injected web3 object +export interface InjectedWeb3 { + currentProvider: Provider; + version: { + getNetwork(cd: (err: Error, networkId: string) => void): void; + }; +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 928e45bc3..f4bfa083f 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,8 +1,8 @@ import * as _ from 'lodash'; import * as ReactGA from 'react-ga'; +import { InjectedWeb3 } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { utils } from 'ts/utils/utils'; -import * as Web3 from 'web3'; export const analytics = { init(): void { @@ -16,11 +16,12 @@ export const analytics = { value, }); }, - async logProviderAsync(web3IfExists: Web3): Promise { + async logProviderAsync(web3IfExists: InjectedWeb3): Promise { await utils.onPageLoadAsync(); - const providerType = !_.isUndefined(web3IfExists) - ? utils.getProviderType(web3IfExists.currentProvider) - : 'NONE'; + const providerType = + !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider) + ? utils.getProviderType(web3IfExists.currentProvider) + : 'NONE'; ReactGA.ga('set', 'dimension1', providerType); }, }; -- cgit v1.2.3 From 2b4bb579d47037fa8c8a2c858bc467ccd8eed3b0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 3 Jul 2018 23:57:19 +0200 Subject: Rename subprovider in blockchain.ts --- packages/website/ts/blockchain.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index a93ec9331..8f1b33aeb 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -12,10 +12,10 @@ import { import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils'; import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { - InjectedWeb3Subprovider, ledgerEthereumBrowserClientFactoryAsync, LedgerSubprovider, RedundantSubprovider, + SignerSubprovider, Subprovider, } from '@0xproject/subproviders'; import { @@ -163,7 +163,7 @@ export class Blockchain { // 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 ProviderEngine(); - provider.addProvider(new InjectedWeb3Subprovider(injectedWeb3.currentProvider)); + provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider)); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { return new RpcSubprovider({ -- cgit v1.2.3 From 54c0b7b261277e8fe1a221a9aa21dbd5364e4ba6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 4 Jul 2018 00:13:36 +0200 Subject: Fix type --- packages/website/ts/types.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 1239958df..b241a34bc 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -575,9 +575,13 @@ export enum AccountState { Locked = 'Locked', } +export interface MetamaskProvider extends Provider { + publicConfigStore: InjectedProviderObservable; +} + // Minimal interface expected for an injected web3 object export interface InjectedWeb3 { - currentProvider: Provider; + currentProvider: MetamaskProvider; version: { getNetwork(cd: (err: Error, networkId: string) => void): void; }; -- cgit v1.2.3 From f4109034656fa826e25d0d4ba8a9d5e676f6c786 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 4 Jul 2018 00:29:29 +0200 Subject: Rename to InjectedProvider and make publicConfigStore optional --- packages/website/ts/types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index b241a34bc..be33f130c 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -575,13 +575,13 @@ export enum AccountState { Locked = 'Locked', } -export interface MetamaskProvider extends Provider { - publicConfigStore: InjectedProviderObservable; +export interface InjectedProvider extends Provider { + publicConfigStore?: InjectedProviderObservable; } // Minimal interface expected for an injected web3 object export interface InjectedWeb3 { - currentProvider: MetamaskProvider; + currentProvider: InjectedProvider; version: { getNetwork(cd: (err: Error, networkId: string) => void): void; }; -- cgit v1.2.3 From 9db0bc262ba85d7dc3b104a0c1c81f85e985acfb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 4 Jul 2018 00:36:57 +0200 Subject: Fix conditional --- packages/website/ts/blockchain.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 8f1b33aeb..eb2cba268 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -102,9 +102,9 @@ export class Blockchain { // Our core assumptions about the injected web3 object is that it has the following // properties and methods. if ( - !_.isUndefined(injectedWeb3IfExists.version) && - !_.isUndefined(injectedWeb3IfExists.version.getNetwork) && - !_.isUndefined(injectedWeb3IfExists.currentProvider) + _.isUndefined(injectedWeb3IfExists.version) || + _.isUndefined(injectedWeb3IfExists.version.getNetwork) || + _.isUndefined(injectedWeb3IfExists.currentProvider) ) { return undefined; } @@ -787,6 +787,7 @@ export class Blockchain { const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET; const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); + console.log(injectedWeb3IfExists); if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { const injectedProviderObservable = injectedWeb3IfExists.currentProvider.publicConfigStore; if (!_.isUndefined(injectedProviderObservable) && _.isUndefined(this._injectedProviderObservable)) { -- cgit v1.2.3 From 0d56daf7ab71031edfa5145704a9a9b746fd80cf Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 4 Jul 2018 00:37:39 +0200 Subject: remove console.log --- packages/website/ts/blockchain.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index eb2cba268..6a92403f2 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -787,7 +787,6 @@ export class Blockchain { const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET; const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - console.log(injectedWeb3IfExists); if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { const injectedProviderObservable = injectedWeb3IfExists.currentProvider.publicConfigStore; if (!_.isUndefined(injectedProviderObservable) && _.isUndefined(this._injectedProviderObservable)) { -- cgit v1.2.3 From 8ff17ff9603f6b574e76f5ef160fe59c3afb2a86 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 4 Jul 2018 00:41:19 +0200 Subject: improve comment --- packages/website/ts/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index be33f130c..512167ed1 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -579,7 +579,7 @@ export interface InjectedProvider extends Provider { publicConfigStore?: InjectedProviderObservable; } -// Minimal interface expected for an injected web3 object +// Minimal expected interface for an injected web3 object export interface InjectedWeb3 { currentProvider: InjectedProvider; version: { -- cgit v1.2.3 From 4e783fba57bbd3d389ab52679ca8763bfa03cbf3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 4 Jul 2018 16:34:03 +0200 Subject: Add missing undefined check --- packages/website/ts/blockchain.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 6a92403f2..cc2afa28a 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -102,6 +102,7 @@ export class Blockchain { // 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) -- cgit v1.2.3