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 (
);
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')}
+ )}
+
+ )}
)}
+
>
);
};