From 7f8185372d211ef825e72efca64f0d4596647f04 Mon Sep 17 00:00:00 2001 From: Sam Keen Date: Thu, 10 Nov 2022 11:31:11 +0000 Subject: [PATCH] chore(1987): persist ui behind dialog when staking (#1997) * Chore/1987: Persist UI behind dialog when staking * feat(1987): Placed staking form tx status notifications in separate component --- apps/token/src/i18n/translations/dev.json | 2 +- .../vote-details/vote-transaction-dialog.tsx | 2 +- .../src/routes/staking/node/stake-failure.tsx | 11 ++- .../src/routes/staking/node/stake-pending.tsx | 11 ++- .../routes/staking/node/stake-requested.tsx | 25 +++++++ .../src/routes/staking/node/stake-success.tsx | 7 +- .../staking/node/staking-form-tx-statuses.tsx | 67 ++++++++++++++++++ .../src/routes/staking/node/staking-form.tsx | 68 ++++++++----------- 8 files changed, 147 insertions(+), 46 deletions(-) create mode 100644 apps/token/src/routes/staking/node/stake-requested.tsx create mode 100644 apps/token/src/routes/staking/node/staking-form-tx-statuses.tsx diff --git a/apps/token/src/i18n/translations/dev.json b/apps/token/src/i18n/translations/dev.json index 68f6392a9..c13143e0d 100644 --- a/apps/token/src/i18n/translations/dev.json +++ b/apps/token/src/i18n/translations/dev.json @@ -206,7 +206,7 @@ "noGovernanceTokens": "You need some VEGA tokens to participate in governance", "youVoted": "You voted", "changeVote": "Change vote", - "voteRequested": "Please confirm transaction in wallet", + "txRequested": "Confirm transaction in wallet", "votePending": "Casting vote", "voteError": "Something went wrong, and your vote was not seen by the network", "back": "back", diff --git a/apps/token/src/routes/governance/components/vote-details/vote-transaction-dialog.tsx b/apps/token/src/routes/governance/components/vote-details/vote-transaction-dialog.tsx index 2d972017f..578dc76ef 100644 --- a/apps/token/src/routes/governance/components/vote-details/vote-transaction-dialog.tsx +++ b/apps/token/src/routes/governance/components/vote-details/vote-transaction-dialog.tsx @@ -10,7 +10,7 @@ interface VoteTransactionDialogProps { const dialogTitle = (voteState: VoteState): string | undefined => { switch (voteState) { case VoteState.Requested: - return t('voteRequested'); + return t('txRequested'); case VoteState.Pending: return t('votePending'); default: diff --git a/apps/token/src/routes/staking/node/stake-failure.tsx b/apps/token/src/routes/staking/node/stake-failure.tsx index cbc042f5b..8e45cce9a 100644 --- a/apps/token/src/routes/staking/node/stake-failure.tsx +++ b/apps/token/src/routes/staking/node/stake-failure.tsx @@ -3,15 +3,22 @@ import { useTranslation } from 'react-i18next'; interface StakeFailureProps { nodeName: string; + isDialogVisible: boolean; + toggleDialog: () => void; } -export const StakeFailure = ({ nodeName }: StakeFailureProps) => { +export const StakeFailure = ({ + nodeName, + isDialogVisible, + toggleDialog, +}: StakeFailureProps) => { const { t } = useTranslation(); return (

{t('stakeFailed', { diff --git a/apps/token/src/routes/staking/node/stake-pending.tsx b/apps/token/src/routes/staking/node/stake-pending.tsx index ebc6a068d..ff7d81f52 100644 --- a/apps/token/src/routes/staking/node/stake-pending.tsx +++ b/apps/token/src/routes/staking/node/stake-pending.tsx @@ -7,12 +7,16 @@ interface StakePendingProps { action: StakeAction; amount: string; nodeName: string; + isDialogVisible: boolean; + toggleDialog: () => void; } export const StakePending = ({ action, amount, nodeName, + isDialogVisible, + toggleDialog, }: StakePendingProps) => { const { t } = useTranslation(); const titleArgs = { amount, node: nodeName }; @@ -22,7 +26,12 @@ export const StakePending = ({ : t('stakeRemovePendingTitle', titleArgs); return ( -

} title={title} open={true}> + } + title={title} + open={isDialogVisible} + onChange={toggleDialog} + >

{t('timeForConfirmation')}

 ); diff --git a/apps/token/src/routes/staking/node/stake-requested.tsx b/apps/token/src/routes/staking/node/stake-requested.tsx new file mode 100644 index 000000000..57e007310 --- /dev/null +++ b/apps/token/src/routes/staking/node/stake-requested.tsx @@ -0,0 +1,25 @@ +import { Dialog, Intent } from '@vegaprotocol/ui-toolkit'; +import { useTranslation } from 'react-i18next'; +import React from 'react'; + +interface StakeRequestedProps { + isDialogVisible: boolean; + toggleDialog: () => void; +} + +export const StakeRequested = ({ + isDialogVisible, + toggleDialog, +}: StakeRequestedProps) => { + const { t } = useTranslation(); + return ( + +

{t('stakingConfirm')}

+ + ); +}; diff --git a/apps/token/src/routes/staking/node/stake-success.tsx b/apps/token/src/routes/staking/node/stake-success.tsx index 7f6c299cd..bc8ebe721 100644 --- a/apps/token/src/routes/staking/node/stake-success.tsx +++ b/apps/token/src/routes/staking/node/stake-success.tsx @@ -10,6 +10,8 @@ interface StakeSuccessProps { amount: string; nodeName: string; removeType: RemoveType; + isDialogVisible: boolean; + toggleDialog: () => void; } export const StakeSuccess = ({ @@ -17,6 +19,8 @@ export const StakeSuccess = ({ amount, nodeName, removeType, + isDialogVisible, + toggleDialog, }: StakeSuccessProps) => { const { t } = useTranslation(); const isAdd = action === Actions.Add; @@ -34,7 +38,8 @@ export const StakeSuccess = ({ icon={} intent={Intent.Success} title={title} - open={true} + open={isDialogVisible} + onChange={toggleDialog} >

{message}

diff --git a/apps/token/src/routes/staking/node/staking-form-tx-statuses.tsx b/apps/token/src/routes/staking/node/staking-form-tx-statuses.tsx new file mode 100644 index 000000000..5463c8cf2 --- /dev/null +++ b/apps/token/src/routes/staking/node/staking-form-tx-statuses.tsx @@ -0,0 +1,67 @@ +import { StakeFailure } from './stake-failure'; +import { StakeRequested } from './stake-requested'; +import { StakePending } from './stake-pending'; +import { StakeSuccess } from './stake-success'; +import { FormState } from './staking-form'; +import type { RemoveType, StakeAction } from './staking-form'; + +interface StakeFormTxStatusesProps { + formState: FormState; + nodeName: string; + amount: string; + action: StakeAction; + removeType: RemoveType; + isDialogVisible: boolean; + toggleDialog: () => void; +} + +export const StakingFormTxStatuses = ({ + formState, + nodeName, + amount, + action, + removeType, + isDialogVisible, + toggleDialog, +}: StakeFormTxStatusesProps) => { + switch (formState) { + case FormState.Requested: + return ( + + ); + case FormState.Pending: + return ( + + ); + case FormState.Success: + return ( + + ); + case FormState.Failure: + return ( + + ); + default: + return null; + } +}; diff --git a/apps/token/src/routes/staking/node/staking-form.tsx b/apps/token/src/routes/staking/node/staking-form.tsx index 44fe9539f..07dd75100 100644 --- a/apps/token/src/routes/staking/node/staking-form.tsx +++ b/apps/token/src/routes/staking/node/staking-form.tsx @@ -1,6 +1,6 @@ import { gql, useApolloClient } from '@apollo/client'; import * as Sentry from '@sentry/react'; -import React from 'react'; +import React, { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; @@ -12,14 +12,10 @@ import type { PartyDelegations, PartyDelegationsVariables, } from './__generated__/PartyDelegations'; -import { StakeFailure } from './stake-failure'; -import { StakePending } from './stake-pending'; -import { StakeSuccess } from './stake-success'; +import { StakingFormTxStatuses } from './staking-form-tx-statuses'; import { ButtonLink, - Dialog, FormGroup, - Intent, Radio, RadioGroup, } from '@vegaprotocol/ui-toolkit'; @@ -54,7 +50,7 @@ export const PARTY_DELEGATIONS_QUERY = gql` } `; -enum FormState { +export enum FormState { Default, Requested, Pending, @@ -93,6 +89,7 @@ export const StakingForm = ({ const { appState } = useAppState(); const { sendTx } = useVegaWallet(); const [formState, setFormState] = React.useState(FormState.Default); + const [isDialogVisible, setIsDialogVisible] = useState(false); const { t } = useTranslation(); const [action, setAction] = React.useState( params.action as StakeAction @@ -129,6 +126,7 @@ export const StakingForm = ({ async function onSubmit() { setFormState(FormState.Requested); + setIsDialogVisible(true); const delegateInput: DelegateSubmissionBody = { delegateSubmission: { nodeId, @@ -196,43 +194,24 @@ export const StakingForm = ({ return () => clearInterval(interval); }, [formState, client, pubKey, nodeId]); - if (formState === FormState.Failure) { - return ; - } else if (formState === FormState.Requested) { - return ( - -

{t('stakingConfirm')}

- - ); - } else if (formState === FormState.Pending) { - return ; - } else if (formState === FormState.Success) { - return ( - - ); - } else if ( - availableStakeToAdd.isEqualTo(0) && - availableStakeToRemove.isEqualTo(0) - ) { - if (appState.lien.isGreaterThan(0)) { - return {t('stakeNodeWrongVegaKey')}; - } else { - return {t('stakeNodeNone')}; - } - } + const toggleDialog = useCallback(() => { + setIsDialogVisible(!isDialogVisible); + }, [isDialogVisible]); return ( <>

{t('Manage your stake')}

+ {formState === FormState.Default && + availableStakeToAdd.isEqualTo(0) && + availableStakeToRemove.isEqualTo(0) && ( +
+ {appState.lien.isGreaterThan(0) ? ( + {t('stakeNodeWrongVegaKey')} + ) : ( + {t('stakeNodeNone')} + )} +
+ )} )} + ); };