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

package.json

@@ -40,7 +40,8 @@
     "eject": "react-app-rewired eject",
     "lint": "standard --env mocha --fix",
     "pub": "node deploy/publish-main.js",
-    "pub:ghp": "./deploy/publish-gh-pages.sh"
+    "pub:ghp": "./deploy/publish-gh-pages.sh",
+    "postinstall": "rm -rf node_modules/fork-ts-checker-webpack-plugin/node_modules 2>/dev/null || true && (cd node_modules/@eslint/eslintrc && npm install ajv@^6.12.6 --no-save 2>/dev/null || true) && (cd node_modules/eslint && npm install ajv@^6.12.6 --no-save 2>/dev/null || true)"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -66,6 +67,16 @@
     "standard": "17.0.0",
     "web3.storage": "4.3.0"
   },
+  "overrides": {
+    "ajv": "^8.17.1",
+    "ajv-keywords": "^5.1.0",
+    "ajv-formats": "^2.1.1",
+    "babel-loader": {
+      "schema-utils": "^2.7.1",
+      "ajv-keywords": "^3.5.2",
+      "ajv": "^6.12.6"
+    }
+  },
   "release": {
     "publish": [
       {

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

@@ -0,0 +1,184 @@
+/*
+  This component renders as a button. When clicked, it opens a modal that
+  cancels the counter offer.
+
+  This is a functional component with as little state as possible.
+*/
+
+// Global npm libraries
+import React, { useState } from 'react'
+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)
+    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={isProcessing}>Cancel</Button>
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Cancel Counter Offer</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {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>
+          {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>
+    </>
+  )
+}
+
+export default CancelCounterOfferBtn

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

@@ -1,64 +1,83 @@
 /*
-  This Card component displays a counter offer with token icon, name, and price.
+  This Card component summarizes an SLP token.
+  if a token icon does not exist or cant be loaded , then display a default icon from Jdenticon library.
 */
 
 // Global npm libraries
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Container, Row, Col, Card, Button } from 'react-bootstrap'
 import Jdenticon from '@chris.troutner/react-jdenticon'
+// Local libraries
+import InfoButton from './info-button'
+import CancelCounterOfferBtn from './cancel-counter-offer-btn'
 
 function CounterOfferCard (props) {
-  const { offer } = props
-  const [icon, setIcon] = useState(offer.tokenIcon)
+  const { token, appData, refreshTokens } = props
+  const [icon, setIcon] = useState(token.icon)
+
+  // Update icon state every token.icon changes
+  useEffect(() => {
+    setIcon(token.icon)
+  }, [token.icon])
 
   return (
     <>
       <Col xs={12} sm={6} lg={4} style={{ padding: '25px' }}>
-        <Card className='shadow-sm'>
-          <Card.Body style={{ textAlign: 'center', padding: '10px' }}>
-            {/** If the icon is loaded, display it */}
-            {icon && (
-              <Card.Img
-                src={icon}
-                style={{ height: '100px', width: 'auto', margin: '0 auto' }}
-                onError={(e) => {
-                  setIcon(null) // Set the icon to null if it fails to load the image url.
-                }}
-              />
-            )}
+        <Card>
+          <Card.Body style={{ textAlign: 'center' }}>
+            {/** If the icon is loaded, display it */
+              icon && (
+                <Card.Img
+                  src={icon}
+                  style={{ height: '100px', width: 'auto' }}
+                  onError={(e) => {
+                    setIcon(null) // Set the icon to null if it fails to load the image url.
+                  }}
+                />
+              )
+            }
 
-            {/** If the icon is not loaded, display the Jdenticon */}
-            {!icon && (
-              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
-                <Jdenticon size='100' value={offer.tokenId} />
-              </div>
-            )}
-
-            <Card.Title style={{ textAlign: 'center', marginTop: '10px' }}>
-              <h4>{offer.ticker}</h4>
+            {/** If the icon is not loaded, display the Jdenticon   */
+              !icon && (
+                <Jdenticon size='100' value={token.tokenId} />
+              )
+            }
+            <Card.Title style={{ textAlign: 'center' }}>
+              <h4>{props.token.ticker}</h4>
             </Card.Title>
 
             <Container>
               <Row>
                 <Col>
-                  {/* <strong>{offer.tokenName}</strong> */}
-                  <strong>Counter Offer UTXO</strong>
+                  {props.token.name}
                 </Col>
               </Row>
               <br />
-
-              <Row>
-                {/* <Col>Price:</Col> */}
-                <Col><strong>{offer.price}</strong></Col>
-              </Row>
               <br />
 
               <Row className='text-center'>
-                <Col>
-                  <Button disabled variant='danger' size='sm'>
-                    Cancel
-                  </Button>
+                <Col xs={4}>
+                  <InfoButton token={props.token} />
                 </Col>
+                <Col xs={4}>
+                  <Button
+                    href={`/profile/${props.token.makerNpub}#single-view`}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    disabled={!props.token.makerNpub}
+                  >
+                    Seller
+                  </Button>
+
+                </Col>
+                <Col xs={4}>
+                  <CancelCounterOfferBtn
+                    token={props.token}
+                    appData={appData}
+                    refreshTokens={refreshTokens}
+                  />
+                </Col>
+
               </Row>
             </Container>
           </Card.Body>

src/components/app-body/counter-offers/index.js

@@ -1,89 +1,245 @@
 /*
-  Shows Counter Offers created by the user.
+  This component displays the counter offers for the current wallet.
 */
 
 // Global npm libraries
-import React, { useState, useEffect } from 'react'
-import { Container, Row, Col, Spinner } from 'react-bootstrap'
-
-// Local libraries
+import React, { useState, useEffect, useCallback } from 'react'
+import { Container, Row, Col, Spinner, Button } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import CounterOfferCard from './counter-offer-card'
 import AsyncLoad from '../../../services/async-load'
+import { faRedo } from '@fortawesome/free-solid-svg-icons'
+// Local libraries
 
-function CounterOffers (props) {
-  const appData = props.appData
-
+const CounterOffers = (props) => {
+  const { appData } = props
+  const [iconsAreLoaded, setIconsAreLoaded] = useState(false)
+  const [dataAreLoaded, setDataAreLoaded] = useState(false)
   const [counterOffers, setCounterOffers] = useState([])
   const [isLoading, setIsLoading] = useState(true)
 
-  // Generate counter offer cards
+  // Get Cid from url
+  const parseCid = (url) => {
+    // get the cid from the url format 'ipfs://bafybeicem27xbzs65uvbcgykcmscsgln3lmhbfrcoec3gdttkdgtxv5acq
+    if (url && url.includes('ipfs://')) {
+      const cid = url.split('ipfs://')[1]
+      return cid
+    }
+    return url
+  }
+
+  //  This function loads the token data .
+  const lazyLoadTokenData = useCallback(async (tokens) => {
+    try {
+      setDataAreLoaded(false)
+      // map each token and fetch the token data
+      for (let i = 0; i < tokens.length; i++) {
+        const thisToken = tokens[i]
+
+        // data does not  need to be downloaded, so continue with the next one
+        if (thisToken.dataAlreadyDownloaded) continue
+
+        // Try to get token data.
+        const tokenData = await appData.wallet.getTokenData(thisToken.tokenId)
+        console.log('tokenData', tokenData)
+        if (tokenData) {
+          // Set data to the token object , this can be used to display the token name in the token card component.
+          thisToken.tokenData = tokenData
+          thisToken.tokenId = tokenData.genesisData.tokenId
+          thisToken.ticker = tokenData.genesisData.ticker
+          thisToken.name = tokenData.genesisData.name
+          thisToken.decimals = tokenData.genesisData.decimals
+          thisToken.tokenType = tokenData.genesisData.type
+          thisToken.url = tokenData.genesisData.documentUri
+        }
+
+        // Mark token to prevent fetch token data again.
+        thisToken.dataAlreadyDownloaded = true
+      }
+
+      setDataAreLoaded(true)
+    } catch (error) {
+      setDataAreLoaded(true)
+    }
+  }, [appData])
+
+  // Fetch mutable data if it exist and get the token icon url
+  const fetchTokenMutableData = useCallback(async (token) => {
+    try {
+      // Get the token data
+      const tokenData = token.tokenData
+
+      if (!tokenData.mutableData) return false // Return false if no mutable data
+
+      // Get the token icon from the mutable data
+      const cid = parseCid(tokenData.mutableData)
+      console.log('mutable data cid', cid)
+
+      const { json } = await appData.wallet.cid2json({ cid })
+      console.log('json: ', json)
+      if (!json) return false
+
+      let iconUrl = json.tokenIcon
+
+      if (json.fullSizedUrl && json.fullSizedUrl.includes('http')) {
+        iconUrl = json.fullSizedUrl
+      }
+      const userData = json.userData
+      // Return icon url
+      return { iconUrl, userData }
+    } catch (error) {
+      return false
+    }
+  }, [appData])
+
+  //  This function loads the token icons from the ipfs gateways.
+  const lazyLoadMutableData = useCallback(async (tokens) => {
+    try {
+      setIconsAreLoaded(false)
+      // map each token and fetch the icon url
+      for (let i = 0; i < tokens.length; i++) {
+        const thisToken = tokens[i]
+
+        // Incon does not  need to be downloaded, so continue with the next one
+        if (thisToken.iconAlreadyDownloaded) continue
+
+        // Try to get token icon url from mutable data.
+        const { iconUrl, userData } = await fetchTokenMutableData(thisToken)
+        console.log('iconUrl', iconUrl)
+        if (iconUrl) {
+          // Set the icon url to the token , this can be used to display the icon in the token card component.
+          thisToken.icon = iconUrl
+          thisToken.userData = userData
+        }
+
+        // Mark token to prevent fetch token icon again.
+        thisToken.iconAlreadyDownloaded = true
+      }
+
+      setIconsAreLoaded(true)
+    } catch (error) {
+      setIconsAreLoaded(true)
+    }
+  }, [fetchTokenMutableData])
+
+  // Load the counter offers for the current wallet.
+  const loadData = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      setCounterOffers([])
+      // Get the wallet state and server url from the app data.
+      const { bchWalletState, serverUrl } = appData
+      // Create a new AsyncLoad instance.
+      const asyncLoad = new AsyncLoad()
+      // Load the wallet library.
+      await asyncLoad.loadWalletLib()
+      // Get the counter offer derivated wallet
+      const counterOfferWallet = await asyncLoad.getDerivatedWallet(serverUrl, bchWalletState.mnemonic, "m/44'/245'/0'/0/1")
+      // Get the utxos from the counter offer wallet.
+      const utxos = await counterOfferWallet.getUtxos()
+      const bchUtxos = utxos.bchUtxos
+      // Get the counter offers data for the current wallet address.
+      const { counterOffers } = await asyncLoad.getCounterOffersByAddress(bchWalletState.cashAddress)
+      // Filter the counter offers to only include the ones that are in the utxos.
+      const filteredCounterOffers = counterOffers.filter(val =>
+        bchUtxos.some(utxo => utxo.txid === val.counterOfferUtxo)
+      )
+
+      setCounterOffers(filteredCounterOffers)
+      setIsLoading(false)
+      // Load the token data for the counter offers in background.
+      await lazyLoadTokenData(filteredCounterOffers)
+      // Load the token icons for the counter offers in background.
+      await lazyLoadMutableData(filteredCounterOffers)
+    } catch (error) {
+      setIsLoading(false)
+      console.error('Error loading counter offers:', error)
+    }
+  }, [appData, lazyLoadTokenData, lazyLoadMutableData])
+
+  // Start to load the token icons when the component is mounted
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  // Handler for refresh button
+  const handleRefresh = useCallback(() => {
+    loadData()
+  }, [loadData])
+  // Generate the token cards for each token in the wallet.
   const generateCards = () => {
-    return counterOffers.map((offer) => (
+    return counterOffers.map(thisCounterOffer => (
       <CounterOfferCard
-        key={offer.id}
-        offer={offer}
         appData={appData}
+        token={thisCounterOffer}
+        key={`${thisCounterOffer.id}`}
+        refreshTokens={loadData}
       />
     ))
   }
 
-  useEffect(() => {
-    const loadWallet = async () => {
-      try {
-        setIsLoading(true)
-        const { bchWalletState, serverUrl } = appData
-        const asyncLoad = new AsyncLoad()
-        await asyncLoad.loadWalletLib()
-        const counterOfferWallet = await asyncLoad.getDerivatedWallet(serverUrl, bchWalletState.mnemonic, "m/44'/245'/0'/0/1")
-
-        const utxoStore = counterOfferWallet.utxos.utxoStore
-        const bchUtxos = utxoStore.bchUtxos
-        setCounterOffers(bchUtxos)
-        console.log('counterOffers', bchUtxos)
-        setIsLoading(false)
-      } catch (error) {
-        setIsLoading(false)
-        console.log('error', error)
-      }
-    }
-
-    loadWallet()
-  }, [appData])
-
   return (
-    <Container>
-      <Row>
-        <Col>
-          <h1>Counter Offers</h1>
-          <p className='text-muted'>Your pending counter offers</p>
-        </Col>
-      </Row>
-      {isLoading
-        ? (
-          <Row className='text-center' style={{ padding: '50px' }}>
-            <Col>
-              <Spinner animation='border' role='status'>
-                <span className='visually-hidden'>Loading...</span>
-              </Spinner>
-              <p className='mt-3 text-muted'>Loading counter offers...</p>
-            </Col>
-          </Row>
-          )
-        : (
-          <>
-            <Row>
-              {generateCards()}
-            </Row>
-            {counterOffers.length === 0 && (
-              <Row className='text-center'>
-                <Col>
-                  <p>No counter offers found.</p>
+    <>
+      <Container>
+        <Row>
+          <Col xs={6} style={{ textAlign: 'start' }}>
+            {!isLoading && (
+              <Row>
+                <Col xs={6}>
+                  <Button variant='success' onClick={handleRefresh}>
+                    <FontAwesomeIcon icon={faRedo} size='lg' /> Refresh
+                  </Button>
                 </Col>
               </Row>
             )}
-          </>
+          </Col>
+        </Row>
+        <Row>
+          {appData.asyncInitSucceeded && (
+
+            <Col xs={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+              {/** Show spinner info if tokens are loaded but data is not loaded */
+                isLoading && (
+                  <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+                    <span style={{ marginRight: '10px' }}>Loading Counter Offers </span>
+                    <Spinner animation='border' />
+                  </div>
+                )
+              }
+              {/** Show spinner info if tokens are loaded but data is not loaded */
+                !isLoading && !dataAreLoaded && counterOffers.length > 0 && (
+                  <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+                    <span style={{ marginRight: '10px' }}>Loading Token Data </span>
+                    <Spinner animation='border' />
+                  </div>
+                )
+              }
+              {/** Show spinner info if tokens are loaded but icons are not loaded */
+                !isLoading && dataAreLoaded && !iconsAreLoaded && (
+                  <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+                    <span style={{ marginRight: '10px' }}>Loading Token Icons </span>
+                    <Spinner animation='border' />
+                  </div>
+                )
+              }
+
+            </Col>
           )}
-    </Container>
+        </Row>
+        <br />
+
+        <Row>
+          {generateCards()}
+        </Row>
+        {/** Display a message if no tokens are found */}
+        {!isLoading && counterOffers.length === 0 && (
+          <Row className='text-center'>
+            <span> No tokens found in wallet </span>
+          </Row>
+        )}
+
+      </Container>
+    </>
   )
 }
 

src/components/app-body/counter-offers/info-button.js

@@ -0,0 +1,146 @@
+/*
+  This component renders as a button. When clicked, it opens a modal that
+  displays information about the token.
+
+  This is a functional component with as little state as possible.
+*/
+
+// Global npm libraries
+import React, { useState, useEffect } from 'react'
+import { Button, Modal, Container, Row, Col, Spinner } from 'react-bootstrap'
+
+// Takes a string as input. If it matches a pattern for a link, a JSX object is
+// returned with a link. Otherwise the original string is returned.
+function linkIfUrl (url) {
+  // Convert the URL into a link if it contains 'http'
+  if (url?.includes('http')) {
+    url = (<a href={url} target='_blank' rel='noreferrer'>{url}</a>)
+
+    //
+  } else if (url?.includes('ipfs://')) {
+    // Convert to a Filecoin link if its an IPFS reference.
+
+    const cid = url.substring(7)
+    url = (<a href={`https://${cid}.ipfs.dweb.link/data.json`} target='_blank' rel='noreferrer'>{url}</a>)
+  }
+
+  return url
+}
+
+function InfoButton (props) {
+  const [show, setShow] = useState(false)
+  const [mutableDataCid, setMutableDataCid] = useState(null)
+
+  const handleClose = () => {
+    setShow(false)
+    // props.instance.setState({ showModal: false })
+  }
+
+  const handleOpen = () => {
+    setShow(true)
+  }
+
+  // Convert the url property of the token to a link, if it matches common patterns.
+  let url = props.token.url
+  url = linkIfUrl(props.token.url)
+
+  // console.log('props.token: ', props.token)
+
+  // Get Cid from url
+  const parseCid = (url) => {
+    // get the cid from the url format 'ipfs://bafybeicem27xbzs65uvbcgykcmscsgln3lmhbfrcoec3gdttkdgtxv5acq
+    if (url && url.includes('ipfs://')) {
+      const cid = url.split('ipfs://')[1]
+      return cid
+    }
+    return url
+  }
+  // Get token user data if it exists and verify if it contains media or markdown
+  useEffect(() => {
+    try {
+      console.log('props  token', props.token)
+      const userDataStr = props.token.userData
+      if (userDataStr) {
+        const userData = JSON.parse(userDataStr)
+
+        // If user data contains media or markdown, set the mutable data cid
+        if (userData?.media || userData?.markdown) {
+          setMutableDataCid(parseCid(props.token.tokenData.mutableData))
+        }
+      }
+    } catch (error) {
+      // Do nothing
+    }
+  }, [props.token, show])
+
+  return (
+    <>
+      <Button variant='info' onClick={handleOpen}>Info</Button>
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Token Information</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Container>
+            <Row>
+              <Col xs={4}><b>Ticker</b>:</Col>
+              <Col xs={8}>{props.token.ticker}</Col>
+            </Row>
+
+            <Row style={{ backgroundColor: '#eee' }}>
+              <Col xs={4}><b>Name</b>:</Col>
+              <Col xs={8}>{props.token.name}</Col>
+            </Row>
+
+            <Row>
+              <Col xs={4}><b>Token ID</b>:</Col>
+              <Col xs={8} style={{ wordBreak: 'break-all' }}>
+                <a href={`https://token.fullstack.cash/?tokenid=${props.token.tokenId}`} target='_blank' rel='noreferrer'>
+                  {props.token.tokenId}
+                </a>
+              </Col>
+            </Row>
+
+            <Row style={{ backgroundColor: '#eee' }}>
+              <Col xs={4}><b>Decimals</b>:</Col>
+              <Col xs={8}>{props.token.decimals}</Col>
+            </Row>
+
+            <Row>
+              <Col xs={4}><b>Token Type</b>:</Col>
+              <Col xs={8}>{props.token.tokenType}</Col>
+            </Row>
+
+            <Row style={{ backgroundColor: '#eee', wordBreak: 'break-all' }}>
+              <Col xs={4}><b>URL</b>:</Col>
+              <Col xs={8}>{url}</Col>
+            </Row>
+            {!props.token.iconAlreadyDownloaded && (
+              <div className='text-center'>
+                <Spinner animation='border' size='sm' />
+              </div>
+            )}
+            {mutableDataCid && (
+              <Row style={{ paddingTop: '10px' }}>
+                <Col xs={4}><b>User Data</b>:</Col>
+                <Col xs={8}>
+                  <Button
+                    href={`/user-data/${props.token.tokenId}#single-view`}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    variant='success'
+                  >
+                    View User Data
+                  </Button>
+                </Col>
+              </Row>
+            )}
+          </Container>
+        </Modal.Body>
+        <Modal.Footer />
+      </Modal>
+    </>
+  )
+}
+
+export default InfoButton

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',
 

src/services/async-load.js

@@ -15,6 +15,10 @@ import { bytesToHex } from '@noble/hashes/utils' // already an installed depende
 import { getPublicKey } from 'nostr-tools/pure'
 import * as nip19 from 'nostr-tools/nip19'
 
+import config from '../config'
+
+const SERVER = `${config.dexServer}/`
+
 class AsyncLoad {
   constructor () {
     this.BchWallet = false
@@ -386,6 +390,21 @@ class AsyncLoad {
       throw error
     }
   }
+
+  // Get the counter offers for a given address
+  async getCounterOffersByAddress (addr) {
+    try {
+      const options = {
+        method: 'GET',
+        url: `${SERVER}offer/list/counter-offer/${addr}`
+      }
+      const result = await axios.request(options)
+      return result.data
+    } catch (error) {
+      console.error('Error getting counter offers by address', error)
+      throw error
+    }
+  }
 }
 
 function sleep (ms) {