allow unbonding for locked and balance tokens from bond screen

nym-wallet/src/pages/bond/index.tsx

@@ -1,31 +1,28 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Alert, Box, Button, CircularProgress } from '@mui/material'
 import { BondForm } from './BondForm'
 import { SuccessView } from './SuccessView'
 import { NymCard } from '../../components'
 import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus'
-import { unbond } from '../../requests'
+import { unbond, vestingUnbond } from '../../requests'
 import { useCheckOwnership } from '../../hooks/useCheckOwnership'
-import { ClientContext } from '../../context/main'
 import { PageLayout } from '../../layouts'
+import { useSnackbar } from 'notistack'
 
 export const Bond = () => {
   const [status, setStatus] = useState(EnumRequestStatus.initial)
   const [error, setError] = useState<string>()
   const [successDetails, setSuccessDetails] = useState<{ amount: string; address: string }>()
 
-  const { checkOwnership, ownership } = useCheckOwnership()
-  const { userBalance, getBondDetails } = useContext(ClientContext)
+  const { checkOwnership, ownership, isLoading } = useCheckOwnership()
+  const { enqueueSnackbar } = useSnackbar()
 
   useEffect(() => {
     if (status === EnumRequestStatus.initial) {
-      const initialiseForm = async () => {
-        await checkOwnership()
-        setStatus(EnumRequestStatus.initial)
-      }
+      const initialiseForm = async () => await checkOwnership()
       initialiseForm()
     }
-  }, [status])
+  }, [status, checkOwnership])
 
   return (
     <PageLayout>
@@ -36,7 +33,7 @@ export const Bond = () => {
           </Box>
         )}
         {ownership?.hasOwnership && (
-          <Box sx={{ px: 3 }}>
+          <Box sx={{ px: 3, mb: 3 }}>
             <Alert
               severity="info"
               action={
@@ -44,10 +41,17 @@ export const Bond = () => {
                   disabled={status === EnumRequestStatus.loading}
                   onClick={async () => {
                     setStatus(EnumRequestStatus.loading)
-                    await unbond(ownership.nodeType!)
-                    await getBondDetails()
-                    await userBalance.fetchBalance()
-                    setStatus(EnumRequestStatus.initial)
+                    try {
+                      if (ownership.vestingPledge) {
+                        await vestingUnbond(ownership.nodeType!)
+                      } else {
+                        await unbond(ownership.nodeType!)
+                      }
+                    } catch (e) {
+                      enqueueSnackbar(`Failed to unbond ${ownership.nodeType}}`, { variant: 'error' })
+                    } finally {
+                      setStatus(EnumRequestStatus.initial)
+                    }
                   }}
                   data-testid="unBond"
                   color="inherit"
@@ -71,7 +75,7 @@ export const Bond = () => {
             <CircularProgress size={48} />
           </Box>
         )}
-        {status === EnumRequestStatus.initial && (
+        {status === EnumRequestStatus.initial && !ownership.hasOwnership && !isLoading && (
           <BondForm
             onError={(e?: string) => {
               setError(e)
@@ -107,7 +111,6 @@ export const Bond = () => {
               <Button
                 onClick={() => {
                   setStatus(EnumRequestStatus.initial)
-                  checkOwnership()
                 }}
               >
                 {status === EnumRequestStatus.error ? 'Again?' : 'Finish'}