feat(Cancel Counter Offer): Adding functionality to Cancel button in Counter Offer page

src/components/app-body/counter-offers/cancel-counter-offer-btn.js

@@ -7,30 +7,129 @@
 
 // Global npm libraries
 import React, { useState } from 'react'
-import { Button, Modal, Container } from 'react-bootstrap'
+import { Button, Modal, Container, Row, Col, Spinner } from 'react-bootstrap'
+import Sweeper from 'bch-token-sweep'
 
 function CancelCounterOfferBtn (props) {
   const [show, setShow] = useState(false)
+  const [statusMsg, setStatusMsg] = useState('')
+  const [hideSpinner, setHideSpinner] = useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+
+  // Update wallet state function
+  const updateWalletState = async () => {
+    const wallet = props.appData.wallet
+    const bchBalance = await wallet.getBalance({ bchAddress: wallet.walletInfo.cashAddress })
+    await wallet.initialize()
+    const slpTokens = await wallet.listTokens(wallet.walletInfo.cashAddress)
+    props.appData.updateBchWalletState({ walletObj: { bchBalance, slpTokens }, appData: props.appData })
+  }
+
+  // Handle cancel/sweep function
+  const handleCancel = async () => {
+    try {
+      console.log('Canceling Counter Offer')
+
+      // Set modal initial state
+      setShow(true)
+      setHideSpinner(false)
+      setStatusMsg('')
+      setIsProcessing(true)
+
+      // Get the keypair that holds Counter Offer UTXOs.
+      // This uses the same derivation path as used in the counter offers page (index 1)
+      const bchDexLib = props.appData.dexLib
+      const keyPair = await bchDexLib.take.util.getKeyPair(1)
+      const wif = keyPair.wif
+
+      // Get wallet info for sweeping
+      const walletWif = props.appData.wallet.walletInfo.privateKey
+      const toAddr = props.appData.wallet.slpAddress
+
+      // Instance the Sweep library and populate UTXOs from network
+      const sweep = new Sweeper(wif, walletWif, props.appData.wallet)
+      await sweep.populateObjectFromNetwork()
+
+      // Constructing the sweep transaction
+      const hex = await sweep.sweepTo(toAddr)
+      const txid = await props.appData.wallet.ar.sendTx(hex)
+
+      // Generate success status message
+      const newStatusMsg = (
+        <>
+          <p>Sweep succeeded!</p>
+          <p>Counter Offer has been canceled.</p>
+          <p>Transaction ID: {txid}</p>
+          <p>
+            <a href={`https://blockchair.com/bitcoin-cash/transaction/${txid}`} target='_blank' rel='noreferrer'>
+              TX on Blockchair BCH Block Explorer
+            </a>
+          </p>
+          <p>
+            <a href={`https://token.fullstack.cash/transactions/?txid=${txid}`} target='_blank' rel='noreferrer'>
+              TX on token explorer
+            </a>
+          </p>
+        </>
+      )
+
+      setHideSpinner(true)
+      setStatusMsg(newStatusMsg)
+      setIsProcessing(false)
+
+      // Update wallet state to reflect the changes
+      await updateWalletState()
+
+      // Refresh the counter offers list if refreshTokens function is provided
+      if (props.refreshTokens) {
+        // Small delay to ensure blockchain state is updated
+        setTimeout(() => {
+          props.refreshTokens()
+        }, 2000)
+      }
+    } catch (err) {
+      console.error('Error in handleCancel(): ', err)
+      setHideSpinner(true)
+      setIsProcessing(false)
+      setStatusMsg(<b style={{ color: 'red' }}>{`Error: ${err.message}`}</b>)
+    }
+  }
 
   const handleClose = () => {
     setShow(false)
-    // props.instance.setState({ showModal: false })
+    setStatusMsg('')
+    setHideSpinner(false)
+    setIsProcessing(false)
   }
 
   const handleOpen = () => {
     setShow(true)
+    handleCancel() // Automatically start the cancel process when modal opens
   }
 
   return (
     <>
-      <Button variant='danger' onClick={handleOpen} disabled>Cancel</Button>
+      <Button variant='danger' onClick={handleOpen} disabled={isProcessing}>Cancel</Button>
       <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
-          <Modal.Title>Cancel </Modal.Title>
+          <Modal.Title>Cancel Counter Offer</Modal.Title>
         </Modal.Header>
         <Modal.Body>
           <Container>
-            {/** ... */}
+            <Row>
+              {!hideSpinner && (
+                <Col style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                  <span style={{ marginRight: '10px' }}>Canceling Counter Offer...</span>
+                  <Spinner animation='border' />
+                </Col>
+              )}
+            </Row>
+            <br />
+            {statusMsg && (
+              <Row>
+                <Col style={{ textAlign: 'center' }}>{statusMsg}</Col>
+              </Row>
+            )}
           </Container>
         </Modal.Body>
         <Modal.Footer />

src/components/app-body/counter-offers/counter-offer-card.js

@@ -12,7 +12,7 @@ import InfoButton from './info-button'
 import CancelCounterOfferBtn from './cancel-counter-offer-btn'
 
 function CounterOfferCard (props) {
-  const { token } = props
+  const { token, appData, refreshTokens } = props
   const [icon, setIcon] = useState(token.icon)
 
   // Update icon state every token.icon changes
@@ -71,7 +71,11 @@ function CounterOfferCard (props) {
 
                 </Col>
                 <Col xs={4}>
-                  <CancelCounterOfferBtn token={props.token} />
+                  <CancelCounterOfferBtn
+                    token={props.token}
+                    appData={appData}
+                    refreshTokens={refreshTokens}
+                  />
                 </Col>
 
               </Row>

src/components/app-body/sweep/index.js

@@ -105,30 +105,6 @@ const SweepWif = (props) => {
     }
   }
 
-  const handleCancelCounterOffers = async () => {
-    try {
-      console.log('Executing handleCancelCounterOffers()')
-
-      // Set modal initial state
-      // setShowModal(true)
-      // setHideSpinner(false)
-      // setStatusMsg('')
-
-      // Get the keypair that holds Counter Offer UTXOs.
-      const bchDexLib = appData.dexLib
-      const keyPair = await bchDexLib.take.util.getKeyPair(1)
-      const wif = keyPair.wif
-      // console.log(`WIF: ${wif}`)
-
-      // Sweep the private key holding the Counter Offer UTXOs.
-      setWifToSweep(wif)
-
-      await handleSweep()
-    } catch (err) {
-      console.error('Error in handleCancelCounterOffers(): ', err)
-    }
-  }
-
   // Modal component
   const getModal = () => (
     <Modal show={showModal} size='lg' onHide={() => setShowModal(false)}>
@@ -207,28 +183,6 @@ const SweepWif = (props) => {
           </Col>
         </Row>
 
-        <br />
-        <br />
-        <hr />
-
-        <Row>
-          <Col>
-            <p>
-              When a Buy order is created, the coins (UTXO) to pay for it are
-              moved to a secondary address. Clicking the button below will
-              sweep those funds back into this main wallet. This will also
-              cancel/invalidate all open Counter Offers that you've created.
-            </p>
-          </Col>
-        </Row>
-
-        <Row style={{ textAlign: 'center' }}>
-          <Col>
-            <Button onClick={handleCancelCounterOffers}>
-              Sweep DEX Trading Wallet
-            </Button>
-          </Col>
-        </Row>
       </Container>
       {showModal && getModal()}
     </>