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}
}
/>