update bonding success UI

nym-wallet/src/components/SuccessResponse.tsx

@@ -11,7 +11,7 @@ export const SuccessReponse: React.FC<{
       <Typography variant="h5" fontWeight="600" data-testid="transaction-complete" color="success.main">
         {title}
       </Typography>
-      <Typography>{subtitle}</Typography>
+      <Typography fontWeight="600">{subtitle}</Typography>
       <Typography>{caption}</Typography>
     </Stack>
   )

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)

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 (
+    <>
+      <SuccessReponse
+        title="Bonding Complete"
+        subtitle="Sucessfully bonded to node with following details"
+        caption={`You current balance is: ${userBalance.balance?.printable_balance}`}
+      />
+      {details && (
+        <Box sx={{ mt: 2 }}>
+          <TransactionDetails
+            details={[
+              { primary: 'Node', secondary: details.address },
+              { primary: 'Amount', secondary: `${details.amount} punk` },
+            ]}
+          />
+        </Box>
+      )}
+    </>
+  )
+}

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<string>()
+  const [error, setError] = useState<string>()
+  const [successDetails, setSuccessDetails] = useState<{ amount: string; address: string }>()
   const [fees, setFees] = useState<TFee>()
 
   const { checkOwnership, ownership } = useCheckOwnership()
@@ -74,29 +73,24 @@ export const Bond = () => {
           <BondForm
             fees={!ownership.hasOwnership ? fees : undefined}
             onError={(e?: string) => {
-              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) && (
           <>
             <RequestStatus
               status={status}
-              Success={
-                <Alert severity="success" data-testid="bond-success">
-                  Successfully bonded node
-                </Alert>
-              }
+              Success={<SuccessView details={successDetails} />}
               Error={
                 <Alert severity="error" data-testid="bond-error">
-                  An error occurred with the request: {message}
+                  An error occurred with the request: {error}
                 </Alert>
               }
             />