diff --git a/src/components/app-body/nostr/profile/index.js b/src/components/app-body/nostr/profile/index.js index a16bfe1..81af205 100644 --- a/src/components/app-body/nostr/profile/index.js +++ b/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 ( <> - - - - + + + + {profileAddresses && } ) diff --git a/src/components/app-body/nostr/profile/nft-for-sale.js b/src/components/app-body/nostr/profile/nft-for-sale.js index 0eddcab..4c29cd5 100644 --- a/src/components/app-body/nostr/profile/nft-for-sale.js +++ b/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(() => { diff --git a/src/components/app-body/nostr/profile/profile-read.js b/src/components/app-body/nostr/profile/profile-read.js index 65ee226..407b2cd 100644 --- a/src/components/app-body/nostr/profile/profile-read.js +++ b/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) { + {profileAddresses?.bchAddr && ( +
+ + + {`${profileAddresses?.bchAddr?.slice(0, 8)}...${profileAddresses?.bchAddr?.slice(-5)}`} + + + {profileAddresses?.bchAddr} + + + +
+ )} + {profileAddresses?.slpAddr && ( +
+ + + {`${profileAddresses?.slpAddr?.slice(0, 8)}...${profileAddresses?.slpAddr?.slice(-5)}`} + + + {profileAddresses?.slpAddr} + + + +
+ )} {/* About Section */} {profile.about && (