diff --git a/nym-wallet/src/components/SuccessResponse.tsx b/nym-wallet/src/components/SuccessResponse.tsx index 91ec29b864..c54a7e1036 100644 --- a/nym-wallet/src/components/SuccessResponse.tsx +++ b/nym-wallet/src/components/SuccessResponse.tsx @@ -11,7 +11,7 @@ export const SuccessReponse: React.FC<{ {title} - {subtitle} + {subtitle} {caption} ) diff --git a/nym-wallet/src/routes/bond/BondForm.tsx b/nym-wallet/src/routes/bond/BondForm.tsx index 54005854cf..f088c46f95 100644 --- a/nym-wallet/src/routes/bond/BondForm.tsx +++ b/nym-wallet/src/routes/bond/BondForm.tsx @@ -81,7 +81,7 @@ export const BondForm = ({ disabled: boolean fees?: { [EnumNodeType.mixnode]: Coin; [EnumNodeType.gateway]?: Coin } onError: (message?: string) => void - onSuccess: (message?: string) => void + onSuccess: (details: { address: string; amount: string }) => void }) => { const { register, @@ -112,7 +112,7 @@ export const BondForm = ({ await bond({ type: data.nodeType, data: formattedData, amount }) .then(() => { userBalance.fetchBalance() - onSuccess(`Successfully bonded to ${data.identityKey}`) + onSuccess({ address: data.identityKey, amount: data.amount }) }) .catch((e) => { onError(e) diff --git a/nym-wallet/src/routes/bond/SuccessView.tsx b/nym-wallet/src/routes/bond/SuccessView.tsx new file mode 100644 index 0000000000..ddc6d98bcc --- /dev/null +++ b/nym-wallet/src/routes/bond/SuccessView.tsx @@ -0,0 +1,27 @@ +import React, { useContext } from 'react' +import { Box } from '@mui/system' +import { SuccessReponse, TransactionDetails } from '../../components' +import { ClientContext } from '../../context/main' + +export const SuccessView: React.FC<{ details?: { amount: string; address: string } }> = ({ details }) => { + const { userBalance } = useContext(ClientContext) + return ( + <> + + {details && ( + + + + )} + + ) +} diff --git a/nym-wallet/src/routes/bond/index.tsx b/nym-wallet/src/routes/bond/index.tsx index 1a07202d59..0aa621d252 100644 --- a/nym-wallet/src/routes/bond/index.tsx +++ b/nym-wallet/src/routes/bond/index.tsx @@ -2,19 +2,18 @@ import React, { useContext, useEffect, useState } from 'react' import { Alert, Box, Button, CircularProgress } from '@mui/material' import { BondForm } from './BondForm' import { NymCard } from '../../components' -import { - EnumRequestStatus, - RequestStatus, -} from '../../components/RequestStatus' +import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus' import { Layout } from '../../layouts' import { getGasFee, unbond } from '../../requests' import { TFee } from '../../types' import { useCheckOwnership } from '../../hooks/useCheckOwnership' import { ClientContext } from '../../context/main' +import { SuccessView } from './SuccessView' export const Bond = () => { const [status, setStatus] = useState(EnumRequestStatus.initial) - const [message, setMessage] = useState() + const [error, setError] = useState() + const [successDetails, setSuccessDetails] = useState<{ amount: string; address: string }>() const [fees, setFees] = useState() const { checkOwnership, ownership } = useCheckOwnership() @@ -74,29 +73,24 @@ export const Bond = () => { { - setMessage(e) + setError(e) setStatus(EnumRequestStatus.error) }} - onSuccess={(message?: string) => { - setMessage(message) + onSuccess={(details) => { + setSuccessDetails(details) setStatus(EnumRequestStatus.success) }} disabled={ownership?.hasOwnership} /> )} - {(status === EnumRequestStatus.error || - status === EnumRequestStatus.success) && ( + {(status === EnumRequestStatus.error || status === EnumRequestStatus.success) && ( <> - Successfully bonded node - - } + Success={} Error={ - An error occurred with the request: {message} + An error occurred with the request: {error} } />