diff options
author | Fabio Berger <me@fabioberger.com> | 2018-06-01 01:45:34 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-06-01 01:45:34 +0800 |
commit | 94ee82e076d85b64063b5c71be13b1ebe0bb8c10 (patch) | |
tree | 53524249da4c5b907e1489d8677a7cc1edf069a2 /packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | |
parent | 0beab9eec45508fb6163bd6c0fd3970f0b61a91d (diff) | |
parent | 5b31d0aa3635ea524fb42d73cd6c713887dfef6a (diff) | |
download | dexon-sol-tools-94ee82e076d85b64063b5c71be13b1ebe0bb8c10.tar dexon-sol-tools-94ee82e076d85b64063b5c71be13b1ebe0bb8c10.tar.gz dexon-sol-tools-94ee82e076d85b64063b5c71be13b1ebe0bb8c10.tar.bz2 dexon-sol-tools-94ee82e076d85b64063b5c71be13b1ebe0bb8c10.tar.lz dexon-sol-tools-94ee82e076d85b64063b5c71be13b1ebe0bb8c10.tar.xz dexon-sol-tools-94ee82e076d85b64063b5c71be13b1ebe0bb8c10.tar.zst dexon-sol-tools-94ee82e076d85b64063b5c71be13b1ebe0bb8c10.zip |
Merge branch 'v2-prototype' into refactor/order-utils/for-v2
* v2-prototype: (45 commits)
Check length before accessing indices, add awaitTransactionSuccess where needed, and rename function
Add back before/after snapshots for each test
Rename Signer to Wallet, rename GAS_ESTIMATE to GAS_LIMIT
Make preSigned and allowedValidators mappings public
Change names of signature types
Fix formatting and tests
Make AssetProxyId last byte of assetData
Add signer to txHash, allow approveValidator to be used with executeTransaction
Update Whitelist
Fix Exchange interface
Increase block gas limit
Use last byte of signature as signature type
Remove TxOrigin signature type, modify whitelist to use Validator signature type
Update Whitelist contract with comments, also require maker to be whitelisted
Fix build
Add example whitelist contract and minimum tests
Add sample whitelist contract
Add TxOrigin signature type and rearrange order of types
Add approveValidator function
Add Validator signature type
...
# Conflicts:
# packages/contracts/src/contracts/current/protocol/Exchange/MixinSignatureValidator.sol
# packages/contracts/src/utils/types.ts
# packages/contracts/test/exchange/transactions.ts
# packages/order-utils/src/asset_proxy_utils.ts
Diffstat (limited to 'packages/website/ts/components/onboarding/portal_onboarding_flow.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 119 |
1 files changed, 105 insertions, 14 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11684aaee..edaeb3736 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,32 +1,123 @@ +import * as _ from 'lodash'; import * as React from 'react'; -import { Step } from 'react-joyride'; -import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow'; +import { BigNumber } from '@0xproject/utils'; +import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { ProviderType, TokenByAddress } from 'ts/types'; +import { utils } from 'ts/utils/utils'; export interface PortalOnboardingFlowProps { stepIndex: number; isRunning: boolean; - onClose: () => void; + userAddress: string; + hasBeenSeen: boolean; + providerType: ProviderType; + injectedProviderName: string; + blockchainIsLoaded: boolean; + userEthBalanceInWei: BigNumber; + tokenByAddress: TokenByAddress; + updateIsRunning: (isRunning: boolean) => void; + updateOnboardingStep: (stepIndex: number) => void; } -const steps: Step[] = [ - { - target: '.wallet', - content: 'You are onboarding right now!', - placement: 'right', - disableBeacon: true, - }, -]; - export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> { + public componentDidMount(): void { + this._overrideOnboardingStateIfShould(); + } + public componentDidUpdate(): void { + this._overrideOnboardingStateIfShould(); + } public render(): React.ReactNode { return ( <OnboardingFlow - steps={steps} + steps={this._getSteps()} stepIndex={this.props.stepIndex} isRunning={this.props.isRunning} - onClose={this.props.onClose} + onClose={this.props.updateIsRunning.bind(this, false)} + updateOnboardingStep={this.props.updateOnboardingStep} /> ); } + + private _getSteps(): Step[] { + const steps: Step[] = [ + { + target: '.wallet', + content: + 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps', + placement: 'right', + hideBackButton: true, + hideNextButton: true, + }, + { + target: '.wallet', + content: 'Unlock your metamask extension to begin', + placement: 'right', + hideBackButton: true, + hideNextButton: true, + }, + { + target: '.wallet', + content: + 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps', + placement: 'right', + hideBackButton: true, + continueButtonDisplay: 'enabled', + }, + { + target: '.eth-row', + content: 'Before you begin you will need to send some ETH to your metamask wallet', + placement: 'right', + continueButtonDisplay: this._userHasEth() ? 'enabled' : 'disabled', + }, + { + target: '.weth-row', + content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)', + placement: 'right', + continueButtonDisplay: this._userHasWeth() ? 'enabled' : 'disabled', + }, + ]; + return steps; + } + + private _isAddressAvailable(): boolean { + return !_.isEmpty(this.props.userAddress); + } + + private _userHasEth(): boolean { + return this.props.userEthBalanceInWei > new BigNumber(0); + } + + private _userHasWeth(): boolean { + // TODO: https://app.asana.com/0/681385331277907/690722374136933 + return false; + } + + private _overrideOnboardingStateIfShould(): void { + this._autoStartOnboardingIfShould(); + this._adjustStepIfShould(); + } + + private _adjustStepIfShould(): void { + if (this._isAddressAvailable()) { + if (this.props.stepIndex < 2) { + this.props.updateOnboardingStep(2); + } + return; + } + const isExternallyInjected = utils.isExternallyInjected( + this.props.providerType, + this.props.injectedProviderName, + ); + if (isExternallyInjected) { + this.props.updateOnboardingStep(1); + return; + } + this.props.updateOnboardingStep(0); + } + private _autoStartOnboardingIfShould(): void { + if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) { + this.props.updateIsRunning(true); + } + } } |