psf/bch-dex-taker-v2
1
0
Fork 0
mirror of https://github.com/Permissionless-Software-Foundation/bch-dex-taker-v2.git synced 2026-09-21 16:52:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fixed merge conflicts

Browse Source
This commit is contained in:
Daniel Gonzalez
2025-10-02 15:44:26 -04:00
parent 9b6e080b02 612f2edf70
commit 6d763be032
2 changed files with 115 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/app-body/slp-tokens/index.js
+66 -19
View File
@@ -15,6 +15,7 @@ import RefreshTokenBalance from './refresh-tokens'
const SlpTokens = (props) => {
const [appData, setAppData] = useState(props.appData)
const [iconsAreLoaded, setIconsAreLoaded] = useState(false)
const [dataAreLoaded, setDataAreLoaded] = useState(false)
const [tokens, setTokens] = useState([])
const refreshTokenButtonRef = React.useRef()
@@ -44,37 +45,68 @@ const SlpTokens = (props) => {
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
}
// 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 fetchTokenIcon = useCallback(async (token) => {
const fetchTokenMutableData = useCallback(async (token) => {
try {
// Get the token data
const tokenData = await appData.wallet.getTokenData(token.tokenId)
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
const iconUrl = json.tokenIcon
let iconUrl = json.tokenIcon
if (json.fullSizedUrl && json.fullSizedUrl.includes('http')) {
iconUrl = json.fullSizedUrl
}
const userData = json.userData
// Return icon url
return iconUrl
return { iconUrl, userData }
} catch (error) {
return false
}
}, [appData])
// This function loads the token icons from the ipfs gateways.
const lazyLoadTokenIcons = useCallback(async () => {
const lazyLoadMutableData = useCallback(async (tokens) => {
try {
setIconsAreLoaded(false)
const tokens = appData.bchWalletState.slpTokens
setTokens(tokens) // update token state
// map each token and fetch the icon url
for (let i = 0; i < tokens.length; i++) {
const thisToken = tokens[i]
@@ -83,28 +115,35 @@ const SlpTokens = (props) => {
if (thisToken.iconAlreadyDownloaded) continue
// Try to get token icon url from mutable data.
const iconUrl = await fetchTokenIcon(thisToken)
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.tokenData.userData = userData
}
// Mark token to prevent fetch token icon again.
thisToken.iconAlreadyDownloaded = true
}
appData.updateBchWalletState({ walletObj: { slpTokens: tokens }, appData })
setIconsAreLoaded(true)
} catch (error) {
setIconsAreLoaded(true)
}
}, [appData, fetchTokenIcon])
}, [fetchTokenMutableData])
const loadData = useCallback(async () => {
const tokens = appData.bchWalletState.slpTokens
setTokens(tokens)
await lazyLoadTokenData(tokens)
await lazyLoadMutableData(tokens)
}, [appData, lazyLoadTokenData, lazyLoadMutableData])
// Start to load the token icons when the component is mounted
useEffect(() => {
lazyLoadTokenIcons()
}, [lazyLoadTokenIcons])
loadData()
}, [loadData])
// Generate the token cards for each token in the wallet.
const generateCards = () => {
@@ -127,7 +166,7 @@ const SlpTokens = (props) => {
<RefreshTokenBalance
appData={appData}
ref={refreshTokenButtonRef}
lazyLoadTokenIcons={lazyLoadTokenIcons}
lazyLoadTokenIcons={loadData}
/>
</Col>
<Col xs={6} style={{ textAlign: 'right' }}>
@@ -138,8 +177,16 @@ const SlpTokens = (props) => {
</Row>
<Row>
<Col xs={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
{
!iconsAreLoaded && (
{/** Show spinner info if tokens are loaded but data is not loaded */
!dataAreLoaded && (
<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 */
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' />
src/components/app-body/slp-tokens/info-button.js
+49 -2
View File
@@ -6,8 +6,8 @@
*/
// Global npm libraries
import React, { useState } from 'react'
import { Button, Modal, Container, Row, Col } from 'react-bootstrap'
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.
@@ -29,6 +29,7 @@ function linkIfUrl (url) {
function InfoButton (props) {
const [show, setShow] = useState(false)
const [mutableDataCid, setMutableDataCid] = useState(null)
const handleClose = () => {
setShow(false)
@@ -45,6 +46,33 @@ function InfoButton (props) {
// 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.tokenData.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>
@@ -87,6 +115,25 @@ function InfoButton (props) {
<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>
)}
{props.token.iconAlreadyDownloaded && 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'
>
View User Data
</Button>
</Col>
</Row>
)}
</Container>
</Modal.Body>
<Modal.Footer />