feat(profile): listing BCH and SLP addresses on user profile

src/components/app-body/nostr/profile/index.js

@@ -3,24 +3,56 @@ Component for read nostr information.
 */
 
 // Global npm libraries
-import React, { useState } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
+import config from '../../../../config/index.js'
 import { Container } from 'react-bootstrap'
 import ProfileRead from './profile-read.js'
 import PublicRead from './public-read.js'
 import { useParams } from 'react-router-dom'
 import SlpTokensDisplay from './slp-tokens-display'
 import NFTForSale from './nft-for-sale.js'
+import axios from 'axios'
+
 function Profile (props) {
+  const { wallet, bchWalletState } = props.appData
+  const { nostrKeyPair } = bchWalletState
   const [profile, setProfile] = useState(false)
+  const [profileAddresses, setProfileAddresses] = useState(null)
   const { npub } = useParams()
-  console.log('npub', npub)
+
+  const getAddressByNpub = useCallback(async () => {
+    try {
+      // Validate if provided npub match with user npub
+      if (npub === nostrKeyPair.npub) {
+        // Use user addresses
+        setProfileAddresses({
+          bchAddr: bchWalletState.cashAddress,
+          slpAddr: bchWalletState.slpAddress
+        })
+        return
+      }
+
+      // Fetch addresses for external npub.
+      const url = `${config.dexServer}/sm/npub/${npub}`
+      const response = await axios.get(url)
+      const bchAddr = response.data.bchAddr
+      const slpAddr = wallet.bchjs.SLP.Address.toSLPAddress(bchAddr)
+      setProfileAddresses({ bchAddr, slpAddr })
+    } catch (error) {
+      console.error(error)
+    }
+  }, [npub, wallet, nostrKeyPair, bchWalletState])
+
+  useEffect(() => {
+    getAddressByNpub()
+  }, [getAddressByNpub])
   return (
     <>
       <Container>
-        <ProfileRead {...props} onProfileRead={setProfile} npub={npub} />
-        <PublicRead {...props} profile={profile} npub={npub} />
-        <SlpTokensDisplay {...props} npub={npub} />
-        <NFTForSale {...props} npub={npub} />
+        <ProfileRead {...props} onProfileRead={setProfile} npub={npub} profileAddresses={profileAddresses} />
+        <PublicRead {...props} profile={profile} npub={npub} profileAddresses={profileAddresses} />
+        <SlpTokensDisplay {...props} npub={npub} profileAddresses={profileAddresses} />
+        {profileAddresses && <NFTForSale {...props} npub={npub} profileAddresses={profileAddresses} />}
       </Container>
     </>
   )

src/components/app-body/nostr/profile/nft-for-sale.js

@@ -8,7 +8,7 @@ import axios from 'axios'
 import TokenCard from '../../nfts-for-sale/token-card'
 
 function NFTForSale (props) {
-  const { appData, npub } = props
+  const { appData, profileAddresses } = props
 
   const [offers, setOffers] = useState([])
   const [offersAreLoaded, setOffersAreLoaded] = useState(false)
@@ -16,16 +16,8 @@ function NFTForSale (props) {
   const [dataAreLoaded, setDataAreLoaded] = useState(false)
   const [startAsync, setStartAsync] = useState(false)
 
-  const getAddressByNpub = useCallback(async () => {
-    const url = `${config.dexServer}/sm/npub/${npub}`
-    const response = await axios.get(url)
-    const addr = response.data.bchAddr
-    return addr
-  }, [npub])
-
   // Handler for refresh button
   const handleRefresh = () => {
-    console.log('handle refresh')
     loadNftOffers()
   }
 
@@ -52,8 +44,10 @@ function NFTForSale (props) {
   const getNftOffers = useCallback(async (page = 0) => {
     try {
       setOffersAreLoaded(false)
-      const addr = await getAddressByNpub(npub)
-      const url = `${config.dexServer}/offer/list/addr/${addr}`
+      const { bchAddr } = profileAddresses
+      if (!bchAddr) return
+
+      const url = `${config.dexServer}/offer/list/addr/${bchAddr}`
       const result = await axios.get(url)
       const rawOffers = result.data
       console.log('rawOffers: ', rawOffers)
@@ -74,7 +68,7 @@ function NFTForSale (props) {
       setOffersAreLoaded(true)
       throw err
     }
-  }, [processTokenData, getAddressByNpub, npub])
+  }, [processTokenData, profileAddresses])
 
   //  This function loads the token data .
   const lazyLoadTokenData = useCallback(async (tokens) => {
@@ -199,6 +193,7 @@ function NFTForSale (props) {
   // Main function to load NFT offers
   const loadNftOffers = useCallback(async () => {
     try {
+      if (!profileAddresses?.bchAddr) return
       // Get tokens in offers
       const offers = await getNftOffers()
       console.log('offers: ', offers)
@@ -216,7 +211,7 @@ function NFTForSale (props) {
     } catch (err) {
       console.error('Error loading NFT offers:', err)
     }
-  }, [lazyLoadTokenData, lazyLoadMutableData, getNftOffers, reviewNftCachedData, updateNFTCachedData])
+  }, [lazyLoadTokenData, lazyLoadMutableData, getNftOffers, reviewNftCachedData, updateNFTCachedData, profileAddresses])
 
   // Effect to load NFTs on component mount
   useEffect(() => {

src/components/app-body/nostr/profile/profile-read.js

@@ -16,8 +16,7 @@ import { useNavigate } from 'react-router-dom'
 import NostrFormat from '../nostr-format'
 
 function ProfileRead (props) {
-  const { npub, appData } = props
-  const { onProfileRead } = props
+  const { npub, appData, onProfileRead, profileAddresses } = props
   const [profile, setProfile] = useState({})
   const [pubKey, setPubKey] = useState({})
 
@@ -118,6 +117,32 @@ function ProfileRead (props) {
             </span>
             <CopyOnClick walletProp='npub' appData={props.appData} value={npub} />
           </div>
+          {profileAddresses?.bchAddr && (
+            <div className='text-muted small mb-3 d-flex align-items-center flex-column flex-md-row'>
+              <span className='text-truncate me-2 mb-2 mb-md-0'>
+                <span className='d-md-none'>
+                  {`${profileAddresses?.bchAddr?.slice(0, 8)}...${profileAddresses?.bchAddr?.slice(-5)}`}
+                </span>
+                <span className='d-none d-md-inline'>
+                  {profileAddresses?.bchAddr}
+                </span>
+              </span>
+              <CopyOnClick walletProp='bchAddr' appData={props.appData} value={profileAddresses?.bchAddr} />
+            </div>
+          )}
+          {profileAddresses?.slpAddr && (
+            <div className='text-muted small mb-3 d-flex align-items-center flex-column flex-md-row'>
+              <span className='text-truncate me-2 mb-2 mb-md-0'>
+                <span className='d-md-none'>
+                  {`${profileAddresses?.slpAddr?.slice(0, 8)}...${profileAddresses?.slpAddr?.slice(-5)}`}
+                </span>
+                <span className='d-none d-md-inline'>
+                  {profileAddresses?.slpAddr}
+                </span>
+              </span>
+              <CopyOnClick walletProp='slpAddr' appData={props.appData} value={profileAddresses?.slpAddr} />
+            </div>
+          )}
 
           {/* About Section */}
           {profile.about && (