From 508f8324f96f5b77f8eed033e5fb802b234a0552 Mon Sep 17 00:00:00 2001 From: pierre Date: Mon, 4 Jul 2022 17:13:32 +0200 Subject: [PATCH] feat(wallet): use confirmation modal component --- .../components/SimpleDialog.stories.tsx | 8 ++- .../bonding => }/components/SimpleDialog.tsx | 2 +- nym-wallet/src/components/index.ts | 1 + nym-wallet/src/context/index.tsx | 1 - .../src/pages/bonding/bonding/AmountModal.tsx | 4 +- .../src/pages/bonding/bonding/BondingCard.tsx | 8 +-- .../bonding/bonding/NodeIdentityModal.tsx | 3 +- .../pages/bonding/bonding/SummaryModal.tsx | 2 +- .../src/pages/bonding/components/index.ts | 1 - .../src/pages/bonding/mixnode/MixnodeCard.tsx | 6 ++ .../bonding/mixnode/bond-more/BondModal.tsx | 4 +- .../bonding/mixnode/bond-more/BondMore.tsx | 7 +- .../mixnode/bond-more/SummaryModal.tsx | 2 +- .../mixnode/compound/CompoundRewards.tsx | 65 ++++++++++++++++++ .../bonding/mixnode/compound/SummaryModal.tsx | 42 ++++++++++++ .../pages/bonding/mixnode/compound/index.ts | 3 + .../mixnode/node-settings/NodeSettings.tsx | 7 +- .../node-settings/ProfitMarginModal.tsx | 3 +- .../mixnode/node-settings/SummaryModal.tsx | 2 +- .../bonding/mixnode/redeem/RedeemRewards.tsx | 65 ++++++++++++++++++ .../bonding/mixnode/redeem/SummaryModal.tsx | 42 ++++++++++++ .../src/pages/bonding/mixnode/redeem/index.ts | 3 + .../bonding/mixnode/unbond/SummaryModal.tsx | 48 ++++++++++++++ .../pages/bonding/mixnode/unbond/Unbond.tsx | 66 +++++++++++++++++++ .../src/pages/bonding/mixnode/unbond/index.ts | 3 + 25 files changed, 372 insertions(+), 26 deletions(-) rename nym-wallet/src/{pages/bonding => }/components/SimpleDialog.stories.tsx (84%) rename nym-wallet/src/{pages/bonding => }/components/SimpleDialog.tsx (99%) create mode 100644 nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx create mode 100644 nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx create mode 100644 nym-wallet/src/pages/bonding/mixnode/compound/index.ts create mode 100644 nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx create mode 100644 nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx create mode 100644 nym-wallet/src/pages/bonding/mixnode/redeem/index.ts create mode 100644 nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx create mode 100644 nym-wallet/src/pages/bonding/mixnode/unbond/Unbond.tsx create mode 100644 nym-wallet/src/pages/bonding/mixnode/unbond/index.ts diff --git a/nym-wallet/src/pages/bonding/components/SimpleDialog.stories.tsx b/nym-wallet/src/components/SimpleDialog.stories.tsx similarity index 84% rename from nym-wallet/src/pages/bonding/components/SimpleDialog.stories.tsx rename to nym-wallet/src/components/SimpleDialog.stories.tsx index ff2e88ce5b..1dc57c7e92 100644 --- a/nym-wallet/src/pages/bonding/components/SimpleDialog.stories.tsx +++ b/nym-wallet/src/components/SimpleDialog.stories.tsx @@ -16,7 +16,13 @@ const Template: ComponentStory = (args) => { - + setOpen(false)} + onConfirm={() => setOpen(false)} + > Dialog content. diff --git a/nym-wallet/src/pages/bonding/components/SimpleDialog.tsx b/nym-wallet/src/components/SimpleDialog.tsx similarity index 99% rename from nym-wallet/src/pages/bonding/components/SimpleDialog.tsx rename to nym-wallet/src/components/SimpleDialog.tsx index 47e69963a8..8f253ce3d8 100644 --- a/nym-wallet/src/pages/bonding/components/SimpleDialog.tsx +++ b/nym-wallet/src/components/SimpleDialog.tsx @@ -14,7 +14,7 @@ import { import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import CloseIcon from '@mui/icons-material/Close'; -interface Props { +export interface Props { open: boolean; onConfirm: () => void; onClose?: () => void; diff --git a/nym-wallet/src/components/index.ts b/nym-wallet/src/components/index.ts index 690f9c9c86..63f9fccd37 100644 --- a/nym-wallet/src/components/index.ts +++ b/nym-wallet/src/components/index.ts @@ -20,3 +20,4 @@ export * from './TokenPoolSelector'; export * from './TransactionDetails'; export * from './Warning'; export * from './Modals/ConfirmationModal'; +export * from './SimpleDialog'; diff --git a/nym-wallet/src/context/index.tsx b/nym-wallet/src/context/index.tsx index c3fd46b7fd..6cfbf5ffd4 100644 --- a/nym-wallet/src/context/index.tsx +++ b/nym-wallet/src/context/index.tsx @@ -2,4 +2,3 @@ export * from './main'; export * from './auth'; export * from './accounts'; export * from './bonding'; - diff --git a/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx b/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx index 6c91c275b1..609d0efc54 100644 --- a/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx +++ b/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx @@ -5,8 +5,8 @@ import { Box, Divider, Stack, Typography } from '@mui/material'; import { AmountData, NodeType } from '../types'; import { AppContext } from '../../../context'; import amountSchema from './amountSchema'; -import { TokenPoolSelector } from '../../../components'; -import { TextFieldInput, CurrencyInput, SimpleDialog } from '../components'; +import { SimpleDialog, TokenPoolSelector } from '../../../components'; +import { TextFieldInput, CurrencyInput } from '../components'; import { checkHasEnoughFunds, checkHasEnoughLockedTokens } from '../../../utils'; export interface Props { diff --git a/nym-wallet/src/pages/bonding/bonding/BondingCard.tsx b/nym-wallet/src/pages/bonding/bonding/BondingCard.tsx index c3119e064f..c91bc40a52 100644 --- a/nym-wallet/src/pages/bonding/bonding/BondingCard.tsx +++ b/nym-wallet/src/pages/bonding/bonding/BondingCard.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect, useReducer } from 'react'; import { Box, Button, Typography } from '@mui/material'; import { Link } from '@nymproject/react/link/Link'; import { Gateway, MajorCurrencyAmount, MixNode } from '@nymproject/types'; -import { NymCard } from '../../../components'; +import { ConfirmationModal, NymCard } from '../../../components'; import NodeIdentityModal from './NodeIdentityModal'; import { ACTIONTYPE, AmountData, BondState, FormStep, NodeData, NodeType } from '../types'; import AmountModal from './AmountModal'; @@ -11,7 +11,6 @@ import SummaryModal from './SummaryModal'; import { bond, vestingBond } from '../../../requests'; import { TBondArgs } from '../../../types'; import { Console } from '../../../utils/console'; -import { SimpleDialog } from '../components'; const initialState: BondState = { showModal: false, @@ -170,7 +169,7 @@ const BondingCard = () => { /> )} {formStep === 4 && showModal && ( - { confirmButton="Done" maxWidth="xs" fullWidth - sx={{ textAlign: 'center' }} > View on blockchain - + )} ); diff --git a/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx b/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx index b9a4483de3..138c27b500 100644 --- a/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx +++ b/nym-wallet/src/pages/bonding/bonding/NodeIdentityModal.tsx @@ -3,8 +3,9 @@ import { useForm, useWatch } from 'react-hook-form'; import { Stack } from '@mui/material'; import { yupResolver } from '@hookform/resolvers/yup'; import { NodeData, NodeType } from '../types'; -import { RadioInput, TextFieldInput, CheckboxInput, SimpleDialog } from '../components'; +import { RadioInput, TextFieldInput, CheckboxInput } from '../components'; import nodeSchema from './nodeSchema'; +import { SimpleDialog } from '../../../components'; export interface Props { open: boolean; diff --git a/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx b/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx index 6514d2117b..080804b640 100644 --- a/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/bonding/SummaryModal.tsx @@ -4,7 +4,7 @@ import { MajorCurrencyAmount } from '@nymproject/types'; import { getGasFee } from '../../../requests'; import { NodeType } from '../types'; import { AppContext } from '../../../context'; -import { SimpleDialog } from '../components'; +import { SimpleDialog } from '../../../components'; export interface Props { open: boolean; diff --git a/nym-wallet/src/pages/bonding/components/index.ts b/nym-wallet/src/pages/bonding/components/index.ts index 760350c41b..3b734ceb58 100644 --- a/nym-wallet/src/pages/bonding/components/index.ts +++ b/nym-wallet/src/pages/bonding/components/index.ts @@ -1,6 +1,5 @@ export { default as BondedNodeCard } from './BondedNodeCard'; export { default as NodeTable } from './NodeTable'; -export { default as SimpleDialog } from './SimpleDialog'; export { default as CheckboxInput } from './CheckboxInput'; export { default as RadioInput } from './RadioInput'; export { default as TextFieldInput } from './TextFieldInput'; diff --git a/nym-wallet/src/pages/bonding/mixnode/MixnodeCard.tsx b/nym-wallet/src/pages/bonding/mixnode/MixnodeCard.tsx index b614d66c39..42567791bd 100644 --- a/nym-wallet/src/pages/bonding/mixnode/MixnodeCard.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/MixnodeCard.tsx @@ -9,6 +9,9 @@ import NodeSettings from './node-settings'; import BondMore from './bond-more'; import NodeMenu from './NodeMenu'; import { MixnodeFlow } from './types'; +import RedeemRewards from './redeem'; +import Unbond from './unbond'; +import CompoundRewards from './compound'; const headers: Header[] = [ { @@ -131,6 +134,9 @@ const MixnodeCard = ({ mixnode }: { mixnode: BondedMixnode }) => { setFlow(null)} /> setFlow(null)} /> + setFlow(null)} /> + setFlow(null)} /> + setFlow(null)} /> ); }; 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 d2eb334d74..9d0c03c97a 100644 --- a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx @@ -4,10 +4,10 @@ import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { Box, Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { CurrencyInput, SimpleDialog, TextFieldInput } from '../../components'; +import { CurrencyInput, TextFieldInput } from '../../components'; import schema from './schema'; import { AppContext } from '../../../../context'; -import { TokenPoolSelector } from '../../../../components'; +import { TokenPoolSelector, SimpleDialog } from '../../../../components'; export interface Props { open: boolean; 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 892379237f..7bc3a82be2 100644 --- a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondMore.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondMore.tsx @@ -5,7 +5,7 @@ import { Link } from '@nymproject/react/link/Link'; import { Typography } from '@mui/material'; import { AppContext, BondedMixnode, urls } from '../../../../context'; import SummaryModal from './SummaryModal'; -import { SimpleDialog } from '../../components'; +import { ConfirmationModal } from '../../../../components'; import BondModal from './BondModal'; interface Props { @@ -61,20 +61,19 @@ const BondMore = ({ mixnode, show, onClose }: Props) => { addBond={addBond} fee={fee as MajorCurrencyAmount} /> - This operation can take up to one hour to process View on blockchain - + ); }; 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 bb72932110..79f577976d 100644 --- a/nym-wallet/src/pages/bonding/mixnode/bond-more/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/bond-more/SummaryModal.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../components'; +import { SimpleDialog } from '../../../../components'; export interface Props { open: boolean; diff --git a/nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx b/nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx new file mode 100644 index 0000000000..75e4d6da95 --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/compound/CompoundRewards.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { useContext, useEffect, useState } from 'react'; +import { MajorCurrencyAmount, TransactionExecuteResult } from '@nymproject/types'; +import { Link } from '@nymproject/react/link/Link'; +import { Typography } from '@mui/material'; +import { AppContext, BondedMixnode, urls } from '../../../../context'; +import SummaryModal from './SummaryModal'; +import { ConfirmationModal } from '../../../../components'; + +interface Props { + mixnode: BondedMixnode; + show: boolean; + onClose: () => void; +} + +const CompoundRewards = ({ mixnode, show, onClose }: Props) => { + const [fee, setFee] = useState({ amount: '0', denom: 'NYM' }); + const [step, setStep] = useState<1 | 2>(1); + const [tx, setTx] = useState(); + + const { network } = useContext(AppContext); + + useEffect(() => { + setFee({ amount: '42', denom: 'NYM' }); // TODO fetch real fee amount + }, []); + + const submit = () => { + // TODO send request to compound rewards + setStep(2); // on success + // setTx(requestResult) + }; + + const reset = () => { + setStep(1); + onClose(); + }; + + return ( + <> + + + This operation can take up to one hour to process + + View on blockchain + + + + ); +}; + +export default CompoundRewards; diff --git a/nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx new file mode 100644 index 0000000000..a6c17c2cf4 --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/compound/SummaryModal.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { Divider, Stack, Typography } from '@mui/material'; +import { MajorCurrencyAmount } from '@nymproject/types'; +import { SimpleDialog } from '../../../../components'; + +export interface Props { + open: boolean; + onClose: () => void; + onConfirm: () => void; + onCancel: () => void; + rewards: MajorCurrencyAmount; + fee: MajorCurrencyAmount; +} + +const SummaryModal = ({ open, onClose, onConfirm, onCancel, rewards, fee }: Props) => ( + + + Operator rewards + {`${rewards.amount} ${rewards.denom}`} + + + + Fee for this operation + {`${fee.amount} ${fee.denom}`} + + + Rewards will be added to your bonding pool + +); + +export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/mixnode/compound/index.ts b/nym-wallet/src/pages/bonding/mixnode/compound/index.ts new file mode 100644 index 0000000000..1869061627 --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/compound/index.ts @@ -0,0 +1,3 @@ +import CompoundRewards from './CompoundRewards'; + +export default CompoundRewards; 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 363333b797..edbafec061 100644 --- a/nym-wallet/src/pages/bonding/mixnode/node-settings/NodeSettings.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/node-settings/NodeSettings.tsx @@ -6,7 +6,7 @@ import { Typography } from '@mui/material'; import ProfitMarginModal from './ProfitMarginModal'; import { AppContext, BondedMixnode, urls } from '../../../../context'; import SummaryModal from './SummaryModal'; -import { SimpleDialog } from '../../components'; +import { ConfirmationModal } from '../../../../components'; interface Props { mixnode: BondedMixnode; @@ -62,20 +62,19 @@ const NodeSettings = ({ mixnode, show, onClose }: Props) => { newPm={profitMargin as number} fee={fee as MajorCurrencyAmount} /> - This operation can take up to one hour to process View on blockchain - + ); }; 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 515b60b82c..0fbb6bdfa5 100644 --- a/nym-wallet/src/pages/bonding/mixnode/node-settings/ProfitMarginModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/node-settings/ProfitMarginModal.tsx @@ -3,9 +3,10 @@ import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { Box, Divider, Stack, Tooltip, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog, TextFieldInput } from '../../components'; +import { TextFieldInput } from '../../components'; import { Node as NodeIcon } from '../../../../svg-icons/node'; import getSchema from './schema'; +import { SimpleDialog } from '../../../../components'; export interface Props { open: boolean; 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 20d4626cf5..74ea9eb2dc 100644 --- a/nym-wallet/src/pages/bonding/mixnode/node-settings/SummaryModal.tsx +++ b/nym-wallet/src/pages/bonding/mixnode/node-settings/SummaryModal.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Divider, Stack, Typography } from '@mui/material'; import { MajorCurrencyAmount } from '@nymproject/types'; -import { SimpleDialog } from '../../components'; +import { SimpleDialog } from '../../../../components'; export interface Props { open: boolean; diff --git a/nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx b/nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx new file mode 100644 index 0000000000..308b274dd6 --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/redeem/RedeemRewards.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { useContext, useEffect, useState } from 'react'; +import { MajorCurrencyAmount, TransactionExecuteResult } from '@nymproject/types'; +import { Link } from '@nymproject/react/link/Link'; +import { Typography } from '@mui/material'; +import { AppContext, BondedMixnode, urls } from '../../../../context'; +import SummaryModal from './SummaryModal'; +import { ConfirmationModal } from '../../../../components'; + +interface Props { + mixnode: BondedMixnode; + show: boolean; + onClose: () => void; +} + +const RedeemRewards = ({ mixnode, show, onClose }: Props) => { + const [fee, setFee] = useState({ amount: '0', denom: 'NYM' }); + const [step, setStep] = useState<1 | 2>(1); + const [tx, setTx] = useState(); + + const { network } = useContext(AppContext); + + useEffect(() => { + setFee({ amount: '42', denom: 'NYM' }); // TODO fetch real fee amount + }, []); + + const submit = () => { + // TODO send request to redeem rewards + setStep(2); // on success + // setTx(requestResult) + }; + + const reset = () => { + setStep(1); + onClose(); + }; + + return ( + <> + + + This operation can take up to one hour to process + + View on blockchain + + + + ); +}; + +export default RedeemRewards; diff --git a/nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx new file mode 100644 index 0000000000..3fd1a7ea79 --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/redeem/SummaryModal.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { Divider, Stack, Typography } from '@mui/material'; +import { MajorCurrencyAmount } from '@nymproject/types'; +import { SimpleDialog } from '../../../../components'; + +export interface Props { + open: boolean; + onClose: () => void; + onConfirm: () => void; + onCancel: () => void; + rewards: MajorCurrencyAmount; + fee: MajorCurrencyAmount; +} + +const SummaryModal = ({ open, onClose, onConfirm, onCancel, rewards, fee }: Props) => ( + + + Rewards to redeem + {`${rewards.amount} ${rewards.denom}`} + + + + Fee for this operation + {`${fee.amount} ${fee.denom}`} + + + Rewards will be transferred to the account you are logged in with + +); + +export default SummaryModal; diff --git a/nym-wallet/src/pages/bonding/mixnode/redeem/index.ts b/nym-wallet/src/pages/bonding/mixnode/redeem/index.ts new file mode 100644 index 0000000000..81769937d2 --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/redeem/index.ts @@ -0,0 +1,3 @@ +import RedeemRewards from './RedeemRewards'; + +export default RedeemRewards; diff --git a/nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx b/nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx new file mode 100644 index 0000000000..8475f4a921 --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/unbond/SummaryModal.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { Divider, Stack, Typography } from '@mui/material'; +import { MajorCurrencyAmount } from '@nymproject/types'; +import { SimpleDialog } from '../../../../components'; + +export interface Props { + open: boolean; + onClose: () => void; + onConfirm: () => void; + onCancel: () => void; + bond: MajorCurrencyAmount; + rewards: MajorCurrencyAmount; + fee: MajorCurrencyAmount; +} + +const SummaryModal = ({ open, onClose, onConfirm, onCancel, bond, rewards, fee }: Props) => ( + + + Amount to unbond + {`${bond.amount} ${bond.denom}`} + + + + Operator rewards + {`${rewards.amount} ${rewards.denom}`} + + + + Fee for this operation + {`${fee.amount} ${fee.denom}`} + + + 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 new file mode 100644 index 0000000000..9af056e58c --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/unbond/Unbond.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { useContext, useEffect, useState } from 'react'; +import { MajorCurrencyAmount, TransactionExecuteResult } from '@nymproject/types'; +import { Link } from '@nymproject/react/link/Link'; +import { Typography } from '@mui/material'; +import { AppContext, BondedMixnode, urls } from '../../../../context'; +import SummaryModal from './SummaryModal'; +import { ConfirmationModal } from '../../../../components'; + +interface Props { + mixnode: BondedMixnode; + show: boolean; + onClose: () => void; +} + +const Unbond = ({ mixnode, show, onClose }: Props) => { + const [fee, setFee] = useState({ amount: '0', denom: 'NYM' }); + const [step, setStep] = useState<1 | 2>(1); + const [tx, setTx] = useState(); + + const { network } = useContext(AppContext); + + useEffect(() => { + setFee({ amount: '42', denom: 'NYM' }); // TODO fetch real fee amount + }, []); + + const submit = () => { + // TODO send request to unbond + setStep(2); // on success + // setTx(requestResult) + }; + + const reset = () => { + setStep(1); + onClose(); + }; + + return ( + <> + + + This operation can take up to one hour to process + + View on blockchain + + + + ); +}; + +export default Unbond; diff --git a/nym-wallet/src/pages/bonding/mixnode/unbond/index.ts b/nym-wallet/src/pages/bonding/mixnode/unbond/index.ts new file mode 100644 index 0000000000..a0dd1d709c --- /dev/null +++ b/nym-wallet/src/pages/bonding/mixnode/unbond/index.ts @@ -0,0 +1,3 @@ +import Unbond from './Unbond'; + +export default Unbond;