diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx
index c19afe974d..78bce2559d 100644
--- a/nym-wallet/src/components/Delegation/DelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx
@@ -184,23 +184,24 @@ export const DelegateModal: React.FC<{
}
}}
header={header || 'Delegate'}
- subHeader="Delegate to mixnode"
okLabel={buttonText || 'Delegate stake'}
okDisabled={!isValidated}
sx={sx}
backdropProps={backdropProps}
>
-
+
+
+
-
+
@@ -241,7 +242,7 @@ export const DelegateModal: React.FC<{
divider
/>
+
+ Est. fee for this transaction will be cauculated in the next page
+
);
};
diff --git a/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx b/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
index 635c48f153..8694938a63 100644
--- a/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
@@ -29,9 +29,6 @@ const transactionForDarkTheme = {
url: 'https://sandbox-blocks.nymtech.net/transactions/11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CFO',
hash: '11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CF0',
};
-const balance = '104 NYMT';
-const balanceVested = '12 NYMT';
-const recipient = 'nymt1923pujepxfnv8dqyxqrl078s4ysf3xn2p7z2xa';
const Content: React.FC<{ children: React.ReactElement; handleClick: () => void }> = ({
children,
@@ -78,8 +75,6 @@ export const DelegateSuccess = () => {
status="success"
action="delegate"
message="You delegated 5 NYM"
- recipient={recipient}
- balance={balance}
transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
{...storybookStyles(theme)}
/>
@@ -99,8 +94,6 @@ export const UndelegateSuccess = () => {
status="success"
action="undelegate"
message="You undelegated 5 NYM"
- recipient={recipient}
- balance={balance}
transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
{...storybookStyles(theme)}
/>
@@ -120,8 +113,6 @@ export const RedeemSuccess = () => {
status="success"
action="redeem"
message="42 NYM"
- recipient={recipient}
- balance={balance}
transactions={
theme.palette.mode === 'light'
? [transaction, transaction]
@@ -145,9 +136,6 @@ export const RedeemWithVestedSuccess = () => {
status="success"
action="redeem"
message="42 NYM"
- recipient={recipient}
- balance={balance}
- balanceVested={balanceVested}
transactions={
theme.palette.mode === 'light'
? [transaction, transaction]
@@ -171,8 +159,6 @@ export const RedeemAllSuccess = () => {
status="success"
action="redeem-all"
message="42 NYM"
- recipient={recipient}
- balance={balance}
transactions={
theme.palette.mode === 'light'
? [transaction, transaction]
@@ -196,8 +182,6 @@ export const Error = () => {
status="error"
action="redeem-all"
message="Minim esse veniam Lorem id velit Lorem eu eu est. Excepteur labore sunt do proident proident sint aliquip consequat Lorem sint non nulla ad excepteur."
- recipient={recipient}
- balance={balance}
transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
{...storybookStyles(theme)}
/>
diff --git a/nym-wallet/src/components/Delegation/DelegationModal.tsx b/nym-wallet/src/components/Delegation/DelegationModal.tsx
index 13846a67a2..ea48817f4f 100644
--- a/nym-wallet/src/components/Delegation/DelegationModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationModal.tsx
@@ -1,9 +1,10 @@
import React from 'react';
-import { Box, Button, Modal, Typography, SxProps } from '@mui/material';
+import { Box, Button, Modal, Typography, SxProps, Stack } from '@mui/material';
import { Link } from '@nymproject/react/link/Link';
import { Console } from 'src/utils/console';
import { modalStyle } from '../Modals/styles';
import { LoadingModal } from '../Modals/LoadingModal';
+import { ConfirmationModal } from '../Modals/ConfirmationModal';
export type ActionType = 'delegate' | 'undelegate' | 'redeem' | 'redeem-all' | 'compound';
@@ -15,9 +16,9 @@ const actionToHeader = (action: ActionType): string => {
case 'redeem-all':
return 'All rewards redeemed successfully';
case 'delegate':
- return 'Delegation complete';
+ return 'Delegation successful';
case 'undelegate':
- return 'Undelegation complete';
+ return 'Undelegation successful';
case 'compound':
return 'Rewards compounded successfully';
default:
@@ -29,9 +30,6 @@ export type DelegationModalProps = {
status: 'loading' | 'success' | 'error';
action: ActionType;
message?: string;
- recipient?: string;
- balance?: string;
- balanceVested?: string;
transactions?: {
url: string;
hash: string;
@@ -45,20 +43,7 @@ export const DelegationModal: React.FC<
sx?: SxProps;
backdropProps?: object;
}
-> = ({
- status,
- action,
- message,
- recipient,
- balance,
- balanceVested,
- transactions,
- open,
- onClose,
- children,
- sx,
- backdropProps,
-}) => {
+> = ({ status, action, message, transactions, open, onClose, children, sx, backdropProps }) => {
if (status === 'loading') return ;
if (status === 'error') {
@@ -81,54 +66,28 @@ export const DelegationModal: React.FC<
}
transactions?.map((transaction) => Console.log('action', action, 'status', status, 'key', transaction.hash));
- return (
-
-
- theme.palette.success.main} mb={1}>
- {actionToHeader(action)}
-
-
- {message}
-
- {recipient && (
- theme.palette.text.secondary}>
- Recipient: {recipient}
-
+ return (
+ {})}
+ title={actionToHeader(action)}
+ confirmButton="Done"
+ >
+
+ {message && {message}}
+ {transactions?.length === 1 && (
+
)}
- {balanceVested ? (
- <>
- theme.palette.text.secondary}>
- Your current balance: {balance?.toUpperCase()}
-
- theme.palette.text.secondary}>
- ({balanceVested.toUpperCase()} is unlocked in your vesting account)
-
- >
- ) : (
- theme.palette.text.secondary}>
- Your current balance: {balance?.toUpperCase()}
-
- )}
- {transactions && (
- theme.palette.text.secondary}>
- Check the transaction {transactions.length > 1 ? 'hashes' : 'hash'}:
- {transactions.map((transaction) => (
-
+ {transactions && transactions.length > 1 && (
+
+ View the transactions on blockchain:
+ {transactions.map(({ url, hash }) => (
+
))}
-
+
)}
- {children}
-
-
-
+
+
);
};
diff --git a/nym-wallet/src/pages/delegation/index.tsx b/nym-wallet/src/pages/delegation/index.tsx
index 8d243e07e9..2fac87149b 100644
--- a/nym-wallet/src/pages/delegation/index.tsx
+++ b/nym-wallet/src/pages/delegation/index.tsx
@@ -138,7 +138,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
setConfirmationModalProps({
status: 'success',
action: 'delegate',
- message: 'Delegations can take up to one hour to process',
+ message: 'This operation can take up to one hour to process',
...balances,
transactions: [
{ url: `${urls(network).blockExplorer}/transaction/${tx.transaction_hash}`, hash: tx.transaction_hash },
@@ -240,11 +240,9 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
try {
const txs = await claimRewards(identityKey, fee);
- const bal = await userBalance();
setConfirmationModalProps({
status: 'success',
action: 'redeem',
- balance: bal?.printable_balance || '-',
transactions: txs.map((tx) => ({
url: `${urls(network).blockExplorer}/transaction/${tx.transaction_hash}`,
hash: tx.transaction_hash,
@@ -270,11 +268,9 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
try {
const txs = await compoundRewards(identityKey, fee);
- const bal = await userBalance();
setConfirmationModalProps({
status: 'success',
action: 'compound',
- balance: bal?.printable_balance || '-',
transactions: txs.map((tx) => ({
url: `${urls(network).blockExplorer}/transaction/${tx.transaction_hash}`,
hash: tx.transaction_hash,