feat(wallet-delegation): new confirmation modal ui

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}
     >
-      <IdentityKeyFormField
-        required
-        fullWidth
-        placeholder="Node identity key"
-        onChanged={handleIdentityKeyChanged}
-        initialValue={identityKey}
-        readOnly={Boolean(initialIdentityKey)}
-        textFieldProps={{
-          autoFocus: !initialIdentityKey,
-        }}
-      />
+      <Box sx={{ mt: 1.8 }}>
+        <IdentityKeyFormField
+          required
+          fullWidth
+          placeholder="Node identity key"
+          onChanged={handleIdentityKeyChanged}
+          initialValue={identityKey}
+          readOnly={Boolean(initialIdentityKey)}
+          textFieldProps={{
+            autoFocus: !initialIdentityKey,
+          }}
+        />
+      </Box>
       <Typography
         component="div"
         textAlign="left"
@@ -230,7 +231,7 @@ export const DelegateModal: React.FC<{
         {errorAmount}
       </Typography>
       <Box sx={{ mt: 3 }}>
-        <ModalListItem label="Account balance" value={accountBalance} divider />
+        <ModalListItem label="Account balance" value={accountBalance} divider strong />
       </Box>
 
       <ModalListItem label="Rewards payout interval" value={rewardInterval} hidden divider />
@@ -241,7 +242,7 @@ export const DelegateModal: React.FC<{
         divider
       />
       <ModalListItem
-        label="Node uptime"
+        label="Node avg. uptime"
         value={`${nodeUptimePercentage ? `${nodeUptimePercentage}%` : '-'}`}
         hidden={nodeUptimePercentage === undefined}
         divider
@@ -253,6 +254,9 @@ export const DelegateModal: React.FC<{
         hidden
         divider
       />
+      <Typography fontSize="smaller" sx={{ color: 'text.primary' }}>
+        Est. fee for this transaction will be cauculated in the next page
+      </Typography>
     </SimpleModal>
   );
 };

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<any, any>; 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)}
       />

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 <LoadingModal sx={sx} backdropProps={backdropProps} />;
 
   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 (
-    <Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
-      <Box sx={{ ...modalStyle, ...sx }} textAlign="center">
-        <Typography color={(theme) => theme.palette.success.main} mb={1}>
-          {actionToHeader(action)}
-        </Typography>
-        <Typography mb={3} color="text.primary">
-          {message}
-        </Typography>
 
-        {recipient && (
-          <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-            Recipient: {recipient}
-          </Typography>
+  return (
+    <ConfirmationModal
+      open={open}
+      onConfirm={onClose || (() => {})}
+      title={actionToHeader(action)}
+      confirmButton="Done"
+    >
+      <Stack alignItems="center" spacing={2} mb={0}>
+        {message && <Typography>{message}</Typography>}
+        {transactions?.length === 1 && (
+          <Link href={transactions[0].url} target="_blank" sx={{ ml: 1 }} text="View on blockchain" noIcon />
         )}
-        {balanceVested ? (
-          <>
-            <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-              Your current balance: {balance?.toUpperCase()}
-            </Typography>
-            <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-              ({balanceVested.toUpperCase()} is unlocked in your vesting account)
-            </Typography>
-          </>
-        ) : (
-          <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-            Your current balance: {balance?.toUpperCase()}
-          </Typography>
-        )}
-        {transactions && (
-          <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-            Check the transaction {transactions.length > 1 ? 'hashes' : 'hash'}:
-            {transactions.map((transaction) => (
-              <Link
-                key={transaction.hash}
-                href={transaction.url}
-                target="_blank"
-                sx={{ ml: 1 }}
-                text={transaction.hash.slice(0, 6)}
-              />
+        {transactions && transactions.length > 1 && (
+          <Stack alignItems="center" spacing={1}>
+            <Typography>View the transactions on blockchain:</Typography>
+            {transactions.map(({ url, hash }) => (
+              <Link href={url} target="_blank" sx={{ ml: 1 }} text={hash.slice(0, 6)} key={hash} noIcon />
             ))}
-          </Typography>
+          </Stack>
         )}
-        {children}
-        <Button variant="contained" sx={{ mt: 3 }} size="large" onClick={onClose}>
-          Finish
-        </Button>
-      </Box>
-    </Modal>
+      </Stack>
+    </ConfirmationModal>
   );
 };

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,