Skip to content
Permalink
Browse files

[DDW-745] Introduce delegation wizard on Stake Pools screen and passi…

…ng preselected wallet/stake-pool based on the wizard starting point
  • Loading branch information...
tomothespian committed Jul 11, 2019
1 parent 5d0ddc3 commit 9c44742561a9f16a2690494dd31ce83085fed5cc
@@ -1,6 +1,5 @@
// @flow
import React, { Component, Fragment } from 'react';
import type { Node } from 'react';
import { observer } from 'mobx-react';
import BigNumber from 'bignumber.js';
import DelegationCenterHeader from './DelegationCenterHeader';
@@ -11,20 +10,18 @@ type Props = {
adaValue: BigNumber,
percentage: number,
wallets: Array<Wallet>,
children?: Node,
onDelegate: Function,
};

@observer
export default class DelegationCenter extends Component<Props> {
render() {
const { adaValue, percentage, wallets, children, onDelegate } = this.props;
const { adaValue, percentage, wallets, onDelegate } = this.props;

return (
<Fragment>
<DelegationCenterHeader adaValue={adaValue} percentage={percentage} />
<DelegationCenterBody wallets={wallets} onDelegate={onDelegate} />
{children}
</Fragment>
);
}
@@ -89,6 +89,11 @@ export default class WalletRow extends Component<Props> {
intl: intlShape.isRequired,
};

onDelegate = () => {
const { wallet } = this.props;
this.props.onDelegate(wallet.id);
};

render() {
const { intl } = this.context;
const {
@@ -100,7 +105,6 @@ export default class WalletRow extends Component<Props> {
delegatedStakePool,
},
index,
onDelegate,
} = this.props;

const inactiveStakePercentageValue = inactiveStakePercentage || 0;
@@ -184,7 +188,7 @@ export default class WalletRow extends Component<Props> {
<span
className={styles.actionLink}
role="presentation"
onClick={onDelegate}
onClick={this.onDelegate}
>
{delegate}
</span>
@@ -28,6 +28,7 @@ type Props = {
onContinue: Function,
onLearnMoreClick: Function,
onSelectWallet: Function,
onSelectPool: Function,
stepsList: Array<string>,
wallets: Array<DelegationWalletData>,
minDelegationFunds: number,
@@ -36,6 +37,7 @@ type Props = {
onOpenExternalLink: Function,
currentTheme: string,
selectedWallet: ?DelegationWalletData,
selectedPool: ?StakePool,
};

@observer
@@ -51,6 +53,7 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
onContinue,
onLearnMoreClick,
onSelectWallet,
onSelectPool,
stepsList,
wallets,
minDelegationFunds,
@@ -59,6 +62,7 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
onOpenExternalLink,
currentTheme,
selectedWallet,
selectedPool,
} = this.props;

const selectedWalletHasPassword = get(selectedWallet, 'hasPassword', false);
@@ -95,9 +99,10 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
stakePoolsList={stakePoolsList}
onOpenExternalLink={onOpenExternalLink}
currentTheme={currentTheme}
selectedPool={selectedPool}
onClose={onClose}
onContinue={onContinue}
onBack={onBack}
onSelectPool={onSelectPool}
/>
);
break;
@@ -80,9 +80,10 @@ type Props = {
stakePoolsList: Array<StakePool>,
onOpenExternalLink: Function,
currentTheme: string,
selectedPool: ?StakePool,
onClose: Function,
onContinue: Function,
onBack: Function,
onSelectPool: Function,
};

type State = {
@@ -91,12 +92,6 @@ type State = {
selectedPoolId: ?number,
};

const initialState = {
searchValue: '',
selectedList: null,
selectedPoolId: null,
};

export default class DelegationStepsChooseStakePoolDialog extends Component<
Props,
State
@@ -106,7 +101,9 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
};

state = {
...initialState,
searchValue: '',
selectedList: null,
selectedPoolId: get(this.props, ['selectedPool', 'id'], null),
};

searchInput: ?HTMLElement = null;
@@ -125,6 +122,11 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
this.setState({ selectedPoolId: null });
};

onAcceptPool = () => {
const { selectedPoolId } = this.state;
this.props.onSelectPool(selectedPoolId);
};

render() {
const { intl } = this.context;
const {
@@ -134,7 +136,6 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
onOpenExternalLink,
currentTheme,
onClose,
onContinue,
onBack,
} = this.props;
const { searchValue, selectedList, selectedPoolId } = this.state;
@@ -143,7 +144,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
{
className: 'continueButton',
label: intl.formatMessage(messages.continueButtonLabel),
onClick: onContinue,
onClick: this.onAcceptPool,
primary: true,
disabled: !selectedPoolId,
},
@@ -25,6 +25,7 @@ type Props = {
stakePoolsList: Array<StakePool>,
onOpenExternalLink: Function,
currentTheme: string,
onDelegate: Function,
};

type State = {
@@ -58,6 +59,11 @@ export default class StakePools extends Component<Props, State> {
handleSetListActive = (selectedList: string) =>
this.setState({ selectedList });

onDelegate = (poolId: string) => {
const { onDelegate } = this.props;
onDelegate(poolId);
};

render() {
const { intl } = this.context;
const {
@@ -91,7 +97,7 @@ export default class StakePools extends Component<Props, State> {
isListActive={selectedList === 'stakePoolsDelegatingList'}
setListActive={this.handleSetListActive}
containerClassName="StakingWithNavigation_page"
onSelect={() => {}}
onSelect={this.onDelegate}
showWithSelectButton
/>
)}
@@ -114,7 +120,7 @@ export default class StakePools extends Component<Props, State> {
isListActive={selectedList === 'selectedIndexList'}
setListActive={this.handleSetListActive}
containerClassName="StakingWithNavigation_page"
onSelect={() => {}}
onSelect={this.onDelegate}
/>
</div>
);
@@ -13,25 +13,31 @@ type Props = InjectedProps;
export default class DelegationCenterPage extends Component<Props> {
static defaultProps = { stores: null };

handleDelegate = () => {
handleDelegate = (walletId: string) => {
const { actions } = this.props;
const { updateDataForActiveDialog } = actions.dialogs;

actions.dialogs.open.trigger({ dialog: DelegationSetupWizardDialog });
updateDataForActiveDialog.trigger({
data: { walletId },
});
};

render() {
const { uiDialogs, staking, wallets } = this.props.stores;

return (
<DelegationCenter
adaValue={staking.adaValue}
percentage={staking.percentage}
wallets={wallets.all}
onDelegate={this.handleDelegate}
>
<div>
<DelegationCenter
adaValue={staking.adaValue}
percentage={staking.percentage}
wallets={wallets.all}
onDelegate={this.handleDelegate}
/>
{uiDialogs.isOpen(DelegationSetupWizardDialog) ? (
<DelegationSetupWizardDialogContainer />
) : null}
</DelegationCenter>
</div>
);
}
}
@@ -2,6 +2,8 @@
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import StakePools from '../../components/staking/stake-pools/StakePools';
import DelegationSetupWizardDialogContainer from './dialogs/DelegationSetupWizardDialogContainer';
import DelegationSetupWizardDialog from '../../components/staking/delegation-setup-wizard/DelegationSetupWizardDialog';
import type { InjectedProps } from '../../types/injectedPropsType';

type Props = InjectedProps;
@@ -11,17 +13,33 @@ type Props = InjectedProps;
export default class StakePoolsListPage extends Component<Props> {
static defaultProps = { actions: null, stores: null };

handleDelegate = (poolId: string) => {
const { actions } = this.props;
const { updateDataForActiveDialog } = actions.dialogs;
actions.dialogs.open.trigger({ dialog: DelegationSetupWizardDialog });
updateDataForActiveDialog.trigger({
data: { poolId },
});
};

render() {
const { staking, app, profile } = this.props.stores;
const { uiDialogs, staking, app, profile } = this.props.stores;
const { currentTheme } = profile;
const { stakePools, delegatingStakePools } = staking;

return (
<StakePools
stakePoolsList={stakePools}
stakePoolsDelegatingList={delegatingStakePools}
onOpenExternalLink={app.openExternalLink}
currentTheme={currentTheme}
/>
<div>
<StakePools
stakePoolsList={stakePools}
stakePoolsDelegatingList={delegatingStakePools}
onOpenExternalLink={app.openExternalLink}
currentTheme={currentTheme}
onDelegate={this.handleDelegate}
/>
{uiDialogs.isOpen(DelegationSetupWizardDialog) ? (
<DelegationSetupWizardDialogContainer />
) : null}
</div>
);
}
}
@@ -2,7 +2,7 @@
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import { map, find } from 'lodash';
import { map, find, get } from 'lodash';
import DelegationSetupWizardDialog from '../../../components/staking/delegation-setup-wizard/DelegationSetupWizardDialog';
import { formattedWalletAmount } from '../../../utils/formatters';
import { MIN_DELEGATION_FUNDS } from '../../../config/stakingConfig';
@@ -40,15 +40,11 @@ const messages = defineMessages({
type State = {
activeStep: number,
selectedWalletId: ?string,
selectedPoolId: ?string,
};

type Props = InjectedDialogContainerProps;

const initialState = {
activeStep: 0,
selectedWalletId: null,
};

@inject('stores', 'actions')
@observer
export default class DelegationSetupWizardDialogContainer extends Component<
@@ -67,7 +63,17 @@ export default class DelegationSetupWizardDialogContainer extends Component<
};

state = {
...initialState,
activeStep: 0,
selectedWalletId: get(
this.props,
['stores', 'uiDialogs', 'dataForActiveDialog', 'walletId'],
null
),
selectedPoolId: get(
this.props,
['stores', 'uiDialogs', 'dataForActiveDialog', 'poolId'],
null
),
};

STEPS_LIST = [
@@ -78,7 +84,6 @@ export default class DelegationSetupWizardDialogContainer extends Component<
];

handleDialogClose = () => {
this.setState({ ...initialState });
this.props.actions.dialogs.closeActiveDialog.trigger();
};

@@ -114,8 +119,13 @@ export default class DelegationSetupWizardDialogContainer extends Component<
this.handleContinue();
};

handleSelectPool = (poolId: string) => {
this.setState({ selectedPoolId: poolId });
this.handleContinue();
};

render() {
const { activeStep, selectedWalletId } = this.state;
const { activeStep, selectedWalletId, selectedPoolId } = this.state;
const { app, staking, wallets, profile } = this.props.stores;
const { currentTheme } = profile;
const { stakePools, delegatingStakePools } = staking;
@@ -144,6 +154,8 @@ export default class DelegationSetupWizardDialogContainer extends Component<
wallet => wallet.id === selectedWalletId
);

const selectedPool = find(stakePools, pool => pool.id === selectedPoolId);

return (
<DelegationSetupWizardDialog
wallets={walletsData}
@@ -152,13 +164,15 @@ export default class DelegationSetupWizardDialogContainer extends Component<
minDelegationFunds={MIN_DELEGATION_FUNDS}
isDisabled={activeStep === 1 && setupDisabled}
selectedWallet={selectedWallet || null}
selectedPool={selectedPool || null}
stakePoolsList={stakePools}
stakePoolsDelegatingList={delegatingStakePools}
onOpenExternalLink={app.openExternalLink}
currentTheme={currentTheme}
onClose={this.handleDialogClose}
onContinue={this.handleContinue}
onSelectWallet={this.handleSelectWallet}
onSelectPool={this.handleSelectPool}
onBack={this.onBack}
onLearnMoreClick={this.handleLearnMoreClick}
onConfirm={this.handleConfirm}

0 comments on commit 9c44742

Please sign in to comment.
You can’t perform that action at this time.