From abf9ccb823cb6ed49069e04bfba72fc5bdea83ec Mon Sep 17 00:00:00 2001 From: pierre Date: Mon, 11 Jul 2022 15:22:12 +0200 Subject: [PATCH] refactor(wallet-bonding): switch to simpledialog component to keep modals consistency --- nym-wallet/package.json | 2 +- .../src/components/SimpleDialog.stories.tsx | 47 ------- nym-wallet/src/components/SimpleDialog.tsx | 115 ------------------ .../src/pages/bonding/bonding/AmountModal.tsx | 16 +-- .../bonding/bonding/NodeIdentityModal.tsx | 15 ++- .../pages/bonding/bonding/SummaryModal.tsx | 18 ++- .../src/pages/bonding/bonding/nodeSchema.ts | 2 +- .../bonding/gateway/unbond/SummaryModal.tsx | 21 ++-- .../pages/bonding/gateway/unbond/Unbond.tsx | 2 +- .../bonding/mixnode/bond-more/BondModal.tsx | 18 +-- .../bonding/mixnode/bond-more/BondMore.tsx | 2 +- .../mixnode/bond-more/SummaryModal.tsx | 20 ++- .../mixnode/compound/CompoundRewards.tsx | 2 +- .../bonding/mixnode/compound/SummaryModal.tsx | 21 ++-- .../mixnode/node-settings/NodeSettings.tsx | 2 +- .../node-settings/ProfitMarginModal.tsx | 23 ++-- .../mixnode/node-settings/SummaryModal.tsx | 22 ++-- .../bonding/mixnode/redeem/RedeemRewards.tsx | 2 +- .../bonding/mixnode/redeem/SummaryModal.tsx | 21 ++-- .../bonding/mixnode/unbond/SummaryModal.tsx | 21 ++-- .../pages/bonding/mixnode/unbond/Unbond.tsx | 2 +- 21 files changed, 100 insertions(+), 294 deletions(-) delete mode 100644 nym-wallet/src/components/SimpleDialog.stories.tsx delete mode 100644 nym-wallet/src/components/SimpleDialog.tsx diff --git a/nym-wallet/package.json b/nym-wallet/package.json index 7a7a0a1df4..526a1385b4 100644 --- a/nym-wallet/package.json +++ b/nym-wallet/package.json @@ -49,7 +49,7 @@ "string-to-color": "^2.2.2", "use-clipboard-copy": "^0.2.0", "uuid": "^8.3.2", - "yup": "^1.0.0-beta.4" + "yup": "^0.32.9" }, "devDependencies": { "@babel/core": "^7.15.0", diff --git a/nym-wallet/src/components/SimpleDialog.stories.tsx b/nym-wallet/src/components/SimpleDialog.stories.tsx deleted file mode 100644 index 1dc57c7e92..0000000000 --- a/nym-wallet/src/components/SimpleDialog.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import { useState } from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Button } from '@mui/material'; -import SimpleDialog from './SimpleDialog'; - -export default { - title: 'Bounding/SimpleDialog', - component: SimpleDialog, -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - const [open, setOpen] = useState(true); - return ( - <> - - setOpen(false)} - onConfirm={() => setOpen(false)} - > - Dialog content. - - - ); -}; - -export const Default = Template.bind({}); -Default.args = { - title: 'Simple Dialog', - subTitle: '', - fullWidth: true, - maxWidth: 'xs', - closeButton: false, - cancelButton: false, - disabled: false, -}; - -export const CenteredText = Template.bind({}); -CenteredText.args = { - ...Default.args, - sx: { textAlign: 'center' }, -}; diff --git a/nym-wallet/src/components/SimpleDialog.tsx b/nym-wallet/src/components/SimpleDialog.tsx deleted file mode 100644 index 8f253ce3d8..0000000000 --- a/nym-wallet/src/components/SimpleDialog.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; -import { - Breakpoint, - Button, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - IconButton, - Stack, - SxProps, - Typography, -} from '@mui/material'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import CloseIcon from '@mui/icons-material/Close'; - -export interface Props { - open: boolean; - onConfirm: () => void; - onClose?: () => void; - onCancel?: () => void; - closeButton?: boolean; - children?: React.ReactNode; - title: React.ReactNode | string; - subTitle?: React.ReactNode | string; - confirmButton: React.ReactNode | string; - cancelButton?: React.ReactNode | boolean; - disabled?: boolean; - sx?: SxProps; - fullWidth?: boolean; - maxWidth?: Breakpoint; -} - -const SimpleDialog = ({ - open, - onConfirm, - onClose, - children, - title, - subTitle, - confirmButton, - closeButton, - onCancel, - cancelButton, - disabled, - sx, - fullWidth, - maxWidth, -}: Props) => { - const titleComp = ( - - {title} - {subTitle && - (typeof subTitle === 'string' ? ( - t.palette.nym.text.muted}> - {subTitle} - - ) : ( - subTitle - ))} - - ); - const confirmButtonComp = - typeof confirmButton === 'string' ? ( - - ) : ( - confirmButton - ); - const cancelButtonComp: React.ReactNode | undefined = - cancelButton && typeof cancelButton === 'boolean' ? ( - - ) : ( - cancelButton - ); - return ( - - {closeButton ? ( - - {titleComp} - - - - - ) : ( - titleComp - )} - {children} - - {cancelButton ? ( - - {cancelButtonComp} - {confirmButtonComp} - - ) : ( - confirmButtonComp - )} - - - ); -}; - -export default SimpleDialog; diff --git a/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx b/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx index 609d0efc54..4c389b3307 100644 --- a/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx +++ b/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx @@ -5,9 +5,10 @@ import { Box, Divider, Stack, Typography } from '@mui/material'; import { AmountData, NodeType } from '../types'; import { AppContext } from '../../../context'; import amountSchema from './amountSchema'; -import { SimpleDialog, TokenPoolSelector } from '../../../components'; +import { TokenPoolSelector } from '../../../components'; import { TextFieldInput, CurrencyInput } from '../components'; import { checkHasEnoughFunds, checkHasEnoughLockedTokens } from '../../../utils'; +import { SimpleModal } from '../../../components/Modals/SimpleModal'; export interface Props { nodeType: NodeType; @@ -45,14 +46,13 @@ const AmountModal = ({ open, onClose, onSubmit, nodeType }: Props) => { }; return ( -
@@ -92,7 +92,7 @@ const AmountModal = ({ open, onClose, onSubmit, nodeType }: Props) => { Est. fee for this transaction will be cauculated in the next page - + ); }; diff --git a/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx b/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx index 49d6d935d1..461e6356e6 100644 --- a/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx +++ b/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx @@ -6,7 +6,7 @@ import { FieldErrors } from 'react-hook-form/dist/types/errors'; import { GatewayData, MixnodeData, NodeData, NodeType } from '../types'; import { RadioInput, TextFieldInput, CheckboxInput } from '../components'; import nodeSchema from './nodeSchema'; -import { SimpleDialog } from '../../../components'; +import { SimpleModal } from '../../../components/Modals/SimpleModal'; export interface Props { open: boolean; @@ -51,14 +51,13 @@ const NodeIdentityModal = ({ open, onClose, onSubmit }: Props) => { }; return ( - { )} - + ); }; diff --git a/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx b/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx index bdc866d130..92de6abcf4 100644 --- a/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx @@ -7,8 +7,8 @@ import { simulateVestingBondMixnode, } from '../../../requests'; import { GatewayAmount, GatewayData, MixnodeAmount, MixnodeData, NodeData } from '../types'; -import { SimpleDialog } from '../../../components'; import { useGetFee } from '../../../hooks/useGetFee'; +import { SimpleModal } from '../../../components/Modals/SimpleModal'; export interface Props { open: boolean; @@ -72,23 +72,19 @@ const SummaryModal = ({ open, onClose, onSubmit, node, amount, onCancel, onError const onConfirm = async () => onSubmit(); return ( - { resetFeeState(); onClose(); }} - onCancel={() => { + onBack={() => { resetFeeState(); onCancel(); }} - onConfirm={onConfirm} - title="Bond details" - confirmButton="Confirm" - maxWidth="xs" - fullWidth - cancelButton - closeButton + onOk={onConfirm} + header="Bond details" + okLabel="Confirm" > Identity Key @@ -108,7 +104,7 @@ const SummaryModal = ({ open, onClose, onSubmit, node, amount, onCancel, onError {fee ? `${fee.amount?.amount} ${fee.amount?.denom}` : ''} )} - + ); }; diff --git a/nym-wallet/src/pages/bonding/bonding/nodeSchema.ts b/nym-wallet/src/pages/bonding/bonding/nodeSchema.ts index 5a6d1b01b2..bd5aad5052 100644 --- a/nym-wallet/src/pages/bonding/bonding/nodeSchema.ts +++ b/nym-wallet/src/pages/bonding/bonding/nodeSchema.ts @@ -3,7 +3,7 @@ import { isValidHostname, validateKey, validateLocation, validateRawPort, valida import { NodeType } from '../types'; const nodeSchema = object().shape({ - nodeType: string().required(), + nodeType: string().required().oneOf(['mixnode', 'gateway']), identityKey: string() .required('An indentity key is required') .test('valid-id-key', 'A valid identity key is required', (value) => validateKey(value || '', 32)), diff --git a/nym-wallet/src/pages/bonding/gateway/unbond/SummaryModal.tsx b/nym-wallet/src/pages/bonding/gateway/unbond/SummaryModal.tsx index e8c1ad8679..088f09d802 100644 --- a/nym-wallet/src/pages/bonding/gateway/unbond/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/gateway/unbond/SummaryModal.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; onClose: () => void; - onConfirm: () => void; + onConfirm: () => Promise; onCancel: () => void; bond: MajorCurrencyAmount; rewards?: MajorCurrencyAmount; @@ -14,17 +14,14 @@ export interface Props { } const SummaryModal = ({ open, onClose, onConfirm, onCancel, bond, rewards, fee }: Props) => ( - Amount to unbond @@ -46,7 +43,7 @@ const SummaryModal = ({ open, onClose, onConfirm, onCancel, bond, rewards, fee } Tokens will be transferred to account you are logged in with now - + ); export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/gateway/unbond/Unbond.tsx b/nym-wallet/src/pages/bonding/gateway/unbond/Unbond.tsx index b16844a6f4..4e7c36b2b1 100644 --- a/nym-wallet/src/pages/bonding/gateway/unbond/Unbond.tsx +++ b/nym-wallet/src/pages/bonding/gateway/unbond/Unbond.tsx @@ -70,7 +70,7 @@ const Unbond = ({ node, show, onClose }: Props) => { fetchFee(); }, [node, isVesting]); - const submit = () => { + const submit = async () => { if (status === 'error') { // Fetch fee failed return; diff --git a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx index 9d0c03c97a..0be35c5077 100644 --- a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx @@ -7,7 +7,8 @@ import { MajorCurrencyAmount } from '@nymproject/types'; import { CurrencyInput, TextFieldInput } from '../../components'; import schema from './schema'; import { AppContext } from '../../../../context'; -import { TokenPoolSelector, SimpleDialog } from '../../../../components'; +import { TokenPoolSelector } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; @@ -36,18 +37,17 @@ const BondModal = ({ open, onClose, onConfirm, currentBond }: Props) => { const { userBalance, clientDetails } = useContext(AppContext); return ( - { reset(); onClose(); }} - onConfirm={handleSubmit(async (data) => onConfirm(data.amount, data.signature))} - title="Bond more" - subTitle="Bond more tokens on your node and receive more rewards" - confirmButton="Next" - closeButton - disabled={Boolean(errors?.amount || errors?.signature)} + onOk={handleSubmit(async (data) => onConfirm(data.amount, data.signature))} + header="Bond more" + subHeader="Bond more tokens on your node and receive more rewards" + okLabel="Next" + okDisabled={Boolean(errors?.amount || errors?.signature)} >
@@ -90,7 +90,7 @@ const BondModal = ({ open, onClose, onConfirm, currentBond }: Props) => { Est. fee for this transaction will be cauculated in the next page - + ); }; diff --git a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondMore.tsx b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondMore.tsx index 7bc3a82be2..e96525051a 100644 --- a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondMore.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondMore.tsx @@ -27,7 +27,7 @@ const BondMore = ({ mixnode, show, onClose }: Props) => { setFee({ amount: '42', denom: 'NYM' }); // TODO fetch real fee amount }, [addBond]); - const submit = () => { + const submit = async () => { // TODO send request to update bond setStep(3); // on success // setTx(requestResult) diff --git a/nym-wallet/src/pages/bonding/mixnode/bond-more/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/bond-more/SummaryModal.tsx index 79f577976d..ac8baddfbb 100644 --- a/nym-wallet/src/pages/bonding/mixnode/bond-more/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/bond-more/SummaryModal.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; onClose: () => void; - onConfirm: () => void; + onConfirm: () => Promise; onCancel: () => void; currentBond: MajorCurrencyAmount; addBond: MajorCurrencyAmount; @@ -14,17 +14,13 @@ export interface Props { } const SummaryModal = ({ open, onClose, onConfirm, onCancel, currentBond, addBond, fee }: Props) => ( - Current bond @@ -40,7 +36,7 @@ const SummaryModal = ({ open, onClose, onConfirm, onCancel, currentBond, addBond Fee for this operation {`${fee.amount} ${fee.denom}`} - + ); export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx b/nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx index 75e4d6da95..3b1ec1ce0e 100644 --- a/nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx @@ -24,7 +24,7 @@ const CompoundRewards = ({ mixnode, show, onClose }: Props) => { setFee({ amount: '42', denom: 'NYM' }); // TODO fetch real fee amount }, []); - const submit = () => { + const submit = async () => { // TODO send request to compound rewards setStep(2); // on success // setTx(requestResult) diff --git a/nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx index a6c17c2cf4..ae6f2e6ef2 100644 --- a/nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx @@ -1,29 +1,26 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; onClose: () => void; - onConfirm: () => void; + onConfirm: () => Promise; onCancel: () => void; rewards: MajorCurrencyAmount; fee: MajorCurrencyAmount; } const SummaryModal = ({ open, onClose, onConfirm, onCancel, rewards, fee }: Props) => ( - Operator rewards @@ -36,7 +33,7 @@ const SummaryModal = ({ open, onClose, onConfirm, onCancel, rewards, fee }: Prop Rewards will be added to your bonding pool - + ); export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/mixnode/node-settings/NodeSettings.tsx b/nym-wallet/src/pages/bonding/mixnode/node-settings/NodeSettings.tsx index edbafec061..9f4728c42d 100644 --- a/nym-wallet/src/pages/bonding/mixnode/node-settings/NodeSettings.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/node-settings/NodeSettings.tsx @@ -29,7 +29,7 @@ const NodeSettings = ({ mixnode, show, onClose }: Props) => { setFee({ amount: '42', denom: 'NYM' }); // TODO fetch real fee amount }, [profitMargin]); - const submit = () => { + const submit = async () => { // TODO send request to update profit margin setStep(3); // on success // setTx(requestResult) diff --git a/nym-wallet/src/pages/bonding/mixnode/node-settings/ProfitMarginModal.tsx b/nym-wallet/src/pages/bonding/mixnode/node-settings/ProfitMarginModal.tsx index 0fbb6bdfa5..eb8e2c46ae 100644 --- a/nym-wallet/src/pages/bonding/mixnode/node-settings/ProfitMarginModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/node-settings/ProfitMarginModal.tsx @@ -4,9 +4,8 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { Box, Divider, Stack, Tooltip, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; import { TextFieldInput } from '../../components'; -import { Node as NodeIcon } from '../../../../svg-icons/node'; import getSchema from './schema'; -import { SimpleDialog } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; @@ -34,23 +33,17 @@ const NodeSettingsModal = ({ open, onClose, onConfirm, estimatedOpReward, curren }); return ( - { reset(); onClose(); }} - onConfirm={handleSubmit(async (data) => onConfirm(data.profitMargin))} - title={ - - - Node Settings - - } - subTitle="System Variables" - confirmButton="Next" - closeButton - disabled={Boolean(errors?.profitMargin)} + onOk={handleSubmit(async (data) => onConfirm(data.profitMargin))} + header="Node Settings" + subHeader="System Variables" + okLabel="Next" + okDisabled={Boolean(errors?.profitMargin)} > @@ -84,7 +77,7 @@ const NodeSettingsModal = ({ open, onClose, onConfirm, estimatedOpReward, curren Est. fee for this transaction will be cauculated in the next page - + ); }; diff --git a/nym-wallet/src/pages/bonding/mixnode/node-settings/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/node-settings/SummaryModal.tsx index 74ea9eb2dc..6abc0e5f4f 100644 --- a/nym-wallet/src/pages/bonding/mixnode/node-settings/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/node-settings/SummaryModal.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; onClose: () => void; - onConfirm: () => void; + onConfirm: () => Promise; onCancel: () => void; currentPm: number; newPm: number; @@ -14,18 +14,14 @@ export interface Props { } const SummaryModal = ({ open, onClose, onConfirm, onCancel, currentPm, newPm, fee }: Props) => ( - Current profit margin @@ -41,7 +37,7 @@ const SummaryModal = ({ open, onClose, onConfirm, onCancel, currentPm, newPm, fe Fee for this operation {`${fee.amount} ${fee.denom}`} - + ); export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx b/nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx index 308b274dd6..84e1debea9 100644 --- a/nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx @@ -24,7 +24,7 @@ const RedeemRewards = ({ mixnode, show, onClose }: Props) => { setFee({ amount: '42', denom: 'NYM' }); // TODO fetch real fee amount }, []); - const submit = () => { + const submit = async () => { // TODO send request to redeem rewards setStep(2); // on success // setTx(requestResult) diff --git a/nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx index 3fd1a7ea79..b226e8bc5b 100644 --- a/nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx @@ -1,29 +1,26 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; onClose: () => void; - onConfirm: () => void; + onConfirm: () => Promise; onCancel: () => void; rewards: MajorCurrencyAmount; fee: MajorCurrencyAmount; } const SummaryModal = ({ open, onClose, onConfirm, onCancel, rewards, fee }: Props) => ( - Rewards to redeem @@ -36,7 +33,7 @@ const SummaryModal = ({ open, onClose, onConfirm, onCancel, rewards, fee }: Prop Rewards will be transferred to the account you are logged in with - + ); export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx index e8c1ad8679..088f09d802 100644 --- a/nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../../../components'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; export interface Props { open: boolean; onClose: () => void; - onConfirm: () => void; + onConfirm: () => Promise; onCancel: () => void; bond: MajorCurrencyAmount; rewards?: MajorCurrencyAmount; @@ -14,17 +14,14 @@ export interface Props { } const SummaryModal = ({ open, onClose, onConfirm, onCancel, bond, rewards, fee }: Props) => ( - Amount to unbond @@ -46,7 +43,7 @@ const SummaryModal = ({ open, onClose, onConfirm, onCancel, bond, rewards, fee } Tokens will be transferred to account you are logged in with now - + ); export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/mixnode/unbond/Unbond.tsx b/nym-wallet/src/pages/bonding/mixnode/unbond/Unbond.tsx index 79f1877a60..450382268a 100644 --- a/nym-wallet/src/pages/bonding/mixnode/unbond/Unbond.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/unbond/Unbond.tsx @@ -70,7 +70,7 @@ const Unbond = ({ node, show, onClose }: Props) => { fetchFee(); }, [node, isVesting]); - const submit = () => { + const submit = async () => { if (status === 'error') { // Fetch fee failed return;