Merge pull request #84 from Permissionless-Software-Foundation/ct-unstable

Counter Offer Cancel Button Functionality

.env.development

@@ -0,0 +1,5 @@
+# Development environment variables
+# These are automatically loaded when running 'npm start'
+
+REACT_APP_DEX_SERVER=http://localhost:5700
+#REACT_APP_NOSTR_REST_API_URL=http://localhost:5942

.env.production

@@ -0,0 +1,5 @@
+# Production environment variables
+# These are automatically loaded when running 'npm run build'
+
+REACT_APP_DEX_SERVER=https://dex-api.fullstack.cash
+REACT_APP_NOSTR_REST_API_URL=https://nostr-relay-api.psfoundation.info

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

@@ -7,33 +7,175 @@
 
 // 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)
+  const [showConfirmation, setShowConfirmation] = useState(true) // show the confirmation view
+
+  // 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')
+
+      // Hide confirmation and show processing
+      setShowConfirmation(false)
+      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 = () => {
+    // Deny close if the cancel is in progress.
+    if (isProcessing) {
+      return
+    }
+
     setShow(false)
-    // props.instance.setState({ showModal: false })
+    setStatusMsg('')
+    setHideSpinner(false)
+    setIsProcessing(false)
+    setShowConfirmation(true) // Reset confirmation state for next time
   }
 
   const handleOpen = () => {
     setShow(true)
+    // Don't start the cancel process immediately - wait for user confirmation
   }
 
   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>
-            {/** ... */}
-          </Container>
+          {showConfirmation
+            ? (
+              <Container>
+                <Row>
+                  <Col style={{ textAlign: 'center' }}>
+                    <p>Are you sure you want to cancel this Counter Offer?</p>
+                    <p style={{ color: '#666', fontSize: '0.9em' }}>
+                      This action will sweep the Counter Offer UTXOs back to your wallet.
+                    </p>
+                  </Col>
+                </Row>
+              </Container>
+              )
+            : (
+              <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 />
+        <Modal.Footer>
+          {showConfirmation && (
+            <Row style={{ width: '100%' }}>
+              <Col xs={12} className='text-center'>
+                <Button
+                  variant='secondary'
+                  style={{ minWidth: '100px', marginRight: '10px' }}
+                  onClick={handleClose}
+                >
+                  No, Keep Open
+                </Button>
+                <Button
+                  variant='danger'
+                  style={{ minWidth: '100px' }}
+                  onClick={handleCancel}
+                >
+                  Yes, Cancel It
+                </Button>
+              </Col>
+            </Row>
+          )}
+        </Modal.Footer>
       </Modal>
     </>
   )

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/fungible/index.js

@@ -48,7 +48,7 @@ const TABLE_HEADERS = [
   }
 ]
 
-function Offers (props) {
+function Fungible (props) {
   const [appData] = useState(props.appData)
   const [offers, setOffers] = useState([])
 
@@ -237,4 +237,4 @@ function Offers (props) {
   )
 }
 
-export default Offers
+export default Fungible

src/components/app-body/index.js

@@ -28,7 +28,7 @@ import Profile from './nostr/profile/index.js'
 import Feeds from './nostr/feeds/index.js'
 import ContentCreators from './nostr/content-creators/index.js'
 import UserDataReview from './user-data-review'
-import Offers from './offers'
+import Fungible from './fungible'
 import NostrChat from './nostr-chat'
 import CounterOffers from './counter-offers'
 function AppBody (props) {
@@ -55,7 +55,7 @@ function AppBody (props) {
         <Route path='/feeds' element={<Feeds appData={appData} />} />
         <Route path='/content-creators' element={<ContentCreators appData={appData} />} />
         <Route path='/user-data/:tokenId' element={<UserDataReview appData={appData} />} />
-        <Route path='/offers' element={<Offers appData={appData} />} />
+        <Route path='/fungible' element={<Fungible appData={appData} />} />
         <Route path='/counter-offers' element={<CounterOffers appData={appData} />} />
         <Route path='/nostr-chat' element={<NostrChat appData={appData} />} />
       </Routes>

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

src/components/nav-menu/index.js

@@ -51,8 +51,8 @@ function NavMenu (props) {
               </NavLink>
 
               <NavLink
-                className={currentPath === '/offers' ? 'nav-link-active' : 'nav-link-inactive'}
-                to='/offers'
+                className={currentPath === '/fungible' ? 'nav-link-active' : 'nav-link-inactive'}
+                to='/fungible'
                 onClick={handleClickEvent}
               >
                 Fungible Tokens

src/config/index.js

@@ -14,8 +14,9 @@ const config = {
   ghRepo: 'https://github.com/Permissionless-Software-Foundation/bch-dex-taker-v2',
   radicleUrl: 'https://app.radicle.network/seeds/maple.radicle.garden/rad:git:hnrkd5cjwwb5tzx37hq9uqm5ubon7ee468xcy/remotes/hyyycncbn9qzqmobnhjq9rry6t4mbjiadzjoyhaknzxjcz3cxkpfpc',
 
-  dexServer: 'https://dex-api.fullstack.cash',
+  // dexServer: 'https://dex-api.fullstack.cash',
   // dexServer: 'http://localhost:5700',
+  dexServer: process.env.REACT_APP_DEX_SERVER || 'https://dex-api.fullstack.cash',
 
   nostrTopic: 'bch-dex-test-topic-02',