From a4cb75fa6c8e68eb7540cb4765c68588871439d8 Mon Sep 17 00:00:00 2001 From: xdzurman Date: Thu, 9 Nov 2023 15:44:06 +0100 Subject: [PATCH] feat(staking,common): enable manageDelegation CTA from pool details --- packages/common/src/analytics/types.ts | 1 + .../src/features/Drawer/StakePoolDetail.tsx | 25 ++++++++++++------- .../stateMachine/commands.ts | 11 +++++++- .../stateMachine/processExpandedViewCases.ts | 10 ++++++++ 4 files changed, 37 insertions(+), 10 deletions(-) diff --git a/packages/common/src/analytics/types.ts b/packages/common/src/analytics/types.ts index e0cac05cd9..494f0e57ca 100644 --- a/packages/common/src/analytics/types.ts +++ b/packages/common/src/analytics/types.ts @@ -72,6 +72,7 @@ export enum PostHogAction { StakingBrowsePoolsStakePoolDetailStakeAllOnThisPoolClick = 'staking | browse pools | stake pool detail | stake all on this pool | click', StakingBrowsePoolsStakePoolDetailAddStakingPoolClick = 'staking | browse pools | stake pool detail | add staking pool | click', StakingBrowsePoolsStakePoolDetailUnselectPoolClick = 'staking | browse pools | stake pool detail | unselect pool | click', + StakingBrowsePoolsStakePoolDetailManageDelegation = 'staking | browse pools | stake pool detail | manage delegation | click', StakingBrowsePoolsStakeClick = 'staking | browse pools | stake | click', StakingBrowsePoolsUnselectClick = 'staking | browse pools | unselect | click', StakingBrowsePoolsClearClick = 'staking | browse pools | clear | click', diff --git a/packages/staking/src/features/Drawer/StakePoolDetail.tsx b/packages/staking/src/features/Drawer/StakePoolDetail.tsx index 53ef0295c3..7582ca944c 100644 --- a/packages/staking/src/features/Drawer/StakePoolDetail.tsx +++ b/packages/staking/src/features/Drawer/StakePoolDetail.tsx @@ -209,6 +209,12 @@ const makeActionButtons = ( ): ActionButtonSpec[] => ( [ + manageDelegation && { + callback: tmpNoop, + dataTestId: 'stake-pool-details-manage-delegation-btn', + label: t('drawer.details.manageDelegation'), + ...getSpecOverride(manageDelegation), + }, stakeOnThisPool && { callback: tmpNoop, dataTestId: 'stake-pool-details-stake-btn', @@ -233,12 +239,6 @@ const makeActionButtons = ( label: t('drawer.details.unselectPool'), ...getSpecOverride(unselectPool), }, - manageDelegation && { - callback: tmpNoop, - dataTestId: 'stake-pool-details-manage-delegation-btn', - label: t('drawer.details.manageDelegation'), - ...getSpecOverride(manageDelegation), - }, ] as (ActionButtonSpec | false)[] ).filter(Boolean) as ActionButtonSpec[]; @@ -291,13 +291,19 @@ export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps) }); }, [viewedStakePool, analytics, portfolioMutators]); + const onManageDelegationClick = useCallback(() => { + if (!viewedStakePool) return; + analytics.sendEventToPostHog(PostHogAction.StakingBrowsePoolsStakePoolDetailManageDelegation); + portfolioMutators.executeCommand({ + type: 'ManageDelegationFromDetails', + }); + }, [viewedStakePool, analytics, portfolioMutators]); + const actionButtons = useMemo( () => makeActionButtons(t, { addStakingPool: ableToSelect && !selectionsEmpty && { callback: onSelectClick }, - // TODO: disabling this button for now - // eslint-disable-next-line sonarjs/no-redundant-boolean - manageDelegation: false && poolInCurrentPortfolio, + manageDelegation: poolInCurrentPortfolio && { callback: onManageDelegationClick }, selectForMultiStaking: ableToSelect && selectionsEmpty && { callback: onSelectClick }, stakeOnThisPool: selectionsEmpty && ableToStakeOnlyOnThisPool && { callback: onStakeOnThisPool }, unselectPool: poolSelected && { callback: onUnselectClick }, @@ -306,6 +312,7 @@ export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps) t, ableToSelect, selectionsEmpty, + onManageDelegationClick, onSelectClick, poolInCurrentPortfolio, ableToStakeOnlyOnThisPool, diff --git a/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/commands.ts b/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/commands.ts index 416f966414..02227d5218 100644 --- a/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/commands.ts +++ b/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/commands.ts @@ -96,6 +96,10 @@ export type DrawerFailure = { type: 'DrawerFailure'; }; +export type ManageDelegationFromDetails = { + type: 'ManageDelegationFromDetails'; +}; + export type OverviewCommand = ShowDelegatedPoolDetails | ManagePortfolio | GoToBrowsePools; export type BrowsePoolsCommand = @@ -108,7 +112,12 @@ export type BrowsePoolsCommand = export type CurrentPoolDetailsCommand = CancelDrawer; -export type PoolDetailsCommand = CancelDrawer | SelectPoolFromDetails | UnselectPoolFromDetails | BeginSingleStaking; +export type PoolDetailsCommand = + | CancelDrawer + | SelectPoolFromDetails + | UnselectPoolFromDetails + | BeginSingleStaking + | ManageDelegationFromDetails; export type PortfolioManagementPreferencesCommand = | CancelDrawer diff --git a/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts b/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts index 05c5ab2e79..8bbb986023 100644 --- a/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts +++ b/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts @@ -16,6 +16,7 @@ import { DrawerFailure, GoToBrowsePools, GoToOverview, + ManageDelegationFromDetails, ManagePortfolio, NewPortfolioConfirmationCommand, NewPortfolioFailureCommand, @@ -192,6 +193,15 @@ export const processExpandedViewCases: Handler = (params) => ...atomicStateMutators.cancelDrawer({ state, targetFlow: DelegationFlow.BrowsePools }), viewedStakePool: undefined, })), + ManageDelegationFromDetails: handler( + ({ state }) => ({ + ...state, + activeDelegationFlow: DelegationFlow.PortfolioManagement, + activeDrawerStep: DrawerManagementStep.Preferences, + draftPortfolio: currentPortfolioToDraft(state.currentPortfolio), + viewedStakePool: undefined, + }) + ), SelectPoolFromDetails: handler( ({ state, command: { data } }) => ({ ...state,