Skip to content

/account page - DEX orders section - Mobile view #620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

/account page - DEX orders section - Mobile view #620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d38bf78
update dex orders section for mobile
pandablue0809 Sep 19, 2025
daa2e1a
fix dancing text
pandablue0809 Oct 10, 2025
4ddb809
Merge remote-tracking branch 'upstream/main' into fix/598/update-DEX-…
pandablue0809 Oct 11, 2025
711f5bf
Merge remote-tracking branch 'upstream/main' into fix/598/update-DEX-…
pandablue0809 Oct 12, 2025
d05372b
fix offer showing in desktop
pandablue0809 Oct 14, 2025
9afa898
prettify
ihomp Oct 15, 2025
58bbda0
optimize the code
pandablue0809 Oct 21, 2025
13f326a
optimize the calculate the Rate
pandablue0809 Oct 22, 2025
8590e1e
fix conflict
pandablue0809 Oct 30, 2025
a358519
prettify
ihomp Nov 1, 2025
88a4699
Update DexOrdersData.js
ihomp Nov 2, 2025
fea56dd
show Ids on desktop view
pandablue0809 Nov 6, 2025
96772f2
use the amountformat
pandablue0809 Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
335 changes: 166 additions & 169 deletions components/Account/DexOrdersData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { fullDateAndTime, niceNumber, niceCurrency, fullNiceNumber, amountFormat } from '../../utils/format'
import { fullDateAndTime, niceCurrency, amountFormat } from '../../utils/format'
import { nativeCurrency } from '../../utils'
import { divide, multiply } from '../../utils/calc'
import { MdMoneyOff } from 'react-icons/md'
import { FaArrowRight } from 'react-icons/fa'

export default function DexOrdersData({ account, offerList, ledgerTimestamp, setSignRequest, address }) {
//show the section only if there are dex orders to show
Expand All @@ -19,138 +20,176 @@ export default function DexOrdersData({ account, offerList, ledgerTimestamp, set
/*
[
{
"Account": "rwietsevLFg8XSmG3bEZzFein1g8RBqWDZ",
"BookDirectory": "DF3B53548CA2E6F1211A220D4146494E0AC99D6AEDDC5F005D2386F26FC0FFF7",
"BookNode": "0",
"Flags": 131072,
"LedgerEntryType": "Offer",
"OwnerNode": "3",
"PreviousTxnID": "02E09F4A7FBF3E76375E472ED249BF97B7E117CFA513C7D05979B54415FDE8BC",
"PreviousTxnLgrSeq": 78942270,
"Sequence": 1561,
"TakerGets": {
"currency": "POO",
"issuer": "rshitKoinuxBNACMhL6QLwAsfWCUDxYobm",
"value": "98900.97291755109",
"issuerDetails": {
"address": "rshitKoinuxBNACMhL6QLwAsfWCUDxYobm",
"username": null,
"service": null
}
},
"TakerPays": "98900972917551",
"index": "F9A23DEDE38BAB7E4A6DA7A37DB433FD8F77EA000DC12FF575358A8DBF427C44",
"flags": {
"passive": false,
"sell": true
},
"accountDetails": {
"address": "rwietsevLFg8XSmG3bEZzFein1g8RBqWDZ",
"username": null,
"service": "XRPL-Labs"
},
"quality": "999999999.9999991",
"previousTxAt": 1680873430
"Account": "rwietsevLFg8XSmG3bEZzFein1g8RBqWDZ",
"BookDirectory": "DF3B53548CA2E6F1211A220D4146494E0AC99D6AEDDC5F005D2386F26FC0FFF7",
"BookNode": "0",
"Flags": 131072,
"LedgerEntryType": "Offer",
"OwnerNode": "3",
"PreviousTxnID": "02E09F4A7FBF3E76375E472ED249BF97B7E117CFA513C7D05979B54415FDE8BC",
"PreviousTxnLgrSeq": 78942270,
"Sequence": 1561,
"TakerGets": {
"currency": "POO",
"issuer": "rshitKoinuxBNACMhL6QLwAsfWCUDxYobm",
"value": "98900.97291755109",
"issuerDetails": {
"address": "rshitKoinuxBNACMhL6QLwAsfWCUDxYobm",
"username": null,
"service": null
}
},
"TakerPays": "98900972917551",
"index": "F9A23DEDE38BAB7E4A6DA7A37DB433FD8F77EA000DC12FF575358A8DBF427C44",
"flags": {
"passive": false,
"sell": true
},
"accountDetails": {
"address": "rwietsevLFg8XSmG3bEZzFein1g8RBqWDZ",
"username": null,
"service": "XRPL-Labs"
},
"quality": "999999999.9999991",
"previousTxAt": 1680873430
}
]
*/

const getOfferDetails = (sell, offer, type = 'desktop') => {
return (
<>
<span className="bold flex">{amountFormat(sell ? offer.TakerGets : offer.TakerPays, { icon: true })}</span>
<span className="grey flex" style={{ alignItems: 'center' }}>
{' '}
{type === 'mobile' ? <FaArrowRight /> : sell ? 'wants a minimum of' : 'can pay a maximum of'}{' '}
</span>
<span className="bold flex">{amountFormat(sell ? offer.TakerPays : offer.TakerGets, { icon: true })}</span>
</>
)
}

const getRateDetails = (sell, offer) => {
let getCurrency = niceCurrency(offer.TakerGets?.currency) || nativeCurrency
let payCurrency = niceCurrency(offer.TakerPays?.currency) || nativeCurrency

return sell ? (
<>
<span>1 {getCurrency} = </span>
<span className="no-brake">
{typeof offer.TakerGets === 'string'
? amountFormat({value: multiply(offer.quality, 1000000), currency: payCurrency})
: typeof offer.TakerPays === 'string'
? amountFormat({value: divide(offer.quality, 1000000), currency: payCurrency})
: amountFormat({value: offer.quality, currency: payCurrency})}
</span>
</>
) : (
<>
<span>1 {payCurrency} = </span>
<span className="no-brake">
{typeof offer.TakerGets === 'string'
? amountFormat({value: divide(1, offer.quality * 1000000), currency: getCurrency})
: typeof offer.TakerPays === 'string'
? amountFormat({value: divide(1000000, offer.quality), currency: getCurrency})
: amountFormat({value: divide(1, offer.quality), currency: getCurrency})}
</span>
</>
)
}

const getHeaders = () => {
return offerList.length > 5 ? (
<>
The last 5 DEX orders{historicalTitle} [
<a href={`/account/${address}/dex`} className="link">
View all ({offerList.length} total)
</a>{' '}
]
</>
) : (
<>
{offerList.length} DEX orders{historicalTitle} [
<a href={`/account/${address}/dex`} className="link">
View details
</a>
]
</>
)
}

const getActionDetails = (offer, type = 'desktop') => {
return offer.Account === account?.address ? (
<a
href="#"
onClick={() =>
setSignRequest({
request: {
TransactionType: 'OfferCancel',
OfferSequence: offer.Sequence
}
})
}
className="red tooltip"
>
{type === 'desktop' && <MdMoneyOff style={{ fontSize: 18, marginBottom: -4 }} />}
<span className={type === 'desktop' ? 'tooltiptext' : ''}>
{type === 'desktop' ? 'Cancel' : 'Cancel the offer'}
</span>
</a>
) : (
<span className="grey tooltip">
{type === 'desktop' && <MdMoneyOff style={{ fontSize: 18, marginBottom: -4 }} />}
<span className={type === 'desktop' ? 'tooltiptext' : ''}>
{type === 'desktop' ? 'Cancel' : 'Cancel the offer'}
</span>
</span>
)
}

const orderRows = sortedOfferList.map((offer, i) => {
const sell = offer.flags?.sell
return (
<tr key={i}>
<td className="center" style={{ width: 30 }}>
{offer.Sequence}
</td>
<td className="left">
<span className={sell ? 'red' : 'green'}>{sell ? 'Selling ' : 'Buying '}</span>
<span className="bold">
{amountFormat(sell ? offer.TakerGets : offer.TakerPays, { precise: 'nice', icon: true })}
</span>
<span className="grey">{' for '}</span>
<span className="bold">
{amountFormat(sell ? offer.TakerPays : offer.TakerGets, { precise: 'nice', icon: true })}
<td className="left" style={{ width: 60 }}>#{offer?.Sequence}</td>
<td className="left flex align-items-center gap-2" style={{ width: '100%' }}>
<span className="tooltip">
<span className={sell ? 'red' : 'green'}>{sell ? 'Selling ' : 'Buying '}</span>
</span>
{getOfferDetails(sell, offer)}
</td>
{sell ? (
<td className="right">
{typeof offer.TakerGets === 'string' ? (
<>
1 {nativeCurrency} = {niceNumber(multiply(offer.quality, 1000000), 0, null, 5)}{' '}
{niceCurrency(offer.TakerPays?.currency || nativeCurrency)}
</>
) : typeof offer.TakerPays === 'string' ? (
<>
1 {niceCurrency(offer.TakerGets?.currency)} = {niceNumber(divide(offer.quality, 1000000), 0, null, 5)}{' '}
{nativeCurrency}
</>
) : (
<>
1 {niceCurrency(offer.TakerGets?.currency)} = {niceNumber(offer.quality, 0, null, 5)}{' '}
{niceCurrency(offer.TakerPays?.currency)}
</>
)}
</td>
) : (
<td className="right">
{typeof offer.TakerGets === 'string' ? (
<>
1 {niceCurrency(offer.TakerPays?.currency)} ={' '}
<span className="tooltip">
{niceNumber(divide(1, offer.quality * 1000000), 0, null, 2)} {nativeCurrency}
<span className="tooltiptext no-brake">
{fullNiceNumber(divide(1, offer.quality * 1000000))} {nativeCurrency}
</span>
</span>
</>
) : typeof offer.TakerPays === 'string' ? (
<>
1 {nativeCurrency} ={' '}
<span className="tooltip">
{niceNumber(divide(1000000, offer.quality), 0, null, 2)} {niceCurrency(offer.TakerGets?.currency)}
<span className="tooltiptext no-brake">
{fullNiceNumber(divide(1000000, offer.quality))}
{niceCurrency(offer.TakerGets?.currency)}
</span>
</span>
</>
) : (
<>
1 {niceCurrency(offer.TakerPays?.currency)} ={' '}
<span className="tooltip">
{niceNumber(divide(1, offer.quality), 0, null, 2)} {niceCurrency(offer.TakerGets?.currency)}
<span className="tooltiptext no-brake">
{fullNiceNumber(divide(1, offer.quality))}
{niceCurrency(offer.TakerGets?.currency)}
</span>
</span>
</>
)}
</td>
)}
<td className="center">
{offer.Account === account?.address ? (
<a
href="#"
onClick={() =>
setSignRequest({
request: {
TransactionType: 'OfferCancel',
OfferSequence: offer.Sequence
}
})
}
className="red tooltip"
>
<MdMoneyOff style={{ fontSize: 18, marginBottom: -4 }} />
<span className="tooltiptext">Cancel</span>
</a>
) : (
<span className="grey tooltip">
<MdMoneyOff style={{ fontSize: 18, marginBottom: -4 }} />
<span className="tooltiptext">Cancel</span>
</span>
)}
<td className="right">{getRateDetails(sell, offer)}</td>
<td className="center">{getActionDetails(offer)}</td>
</tr>
)
})

// Mobile-specific row format
const mobileOrderRows = sortedOfferList.map((offer, i) => {
const sell = offer.flags?.sell

return (
<tr key={i} className="mobile-dex-row">
<td colSpan="4">
<div className="mobile-dex-line1">
<span className="mobile-dex-sequence">#{offer.Sequence}</span>
<span className={`mobile-dex-type ${sell ? 'red' : 'green'}`}>{sell ? 'Selling' : 'Buying'}</span>
</div>

<div className="mobile-dex-line2 flex align-items-center gap-2">
<span className="mobile-dex-label">Offer: </span>
{getOfferDetails(sell, offer, 'mobile')}
</div>

<div className="mobile-dex-line3">
<span className="mobile-dex-label">Rate: </span>
{getRateDetails(sell, offer)}
</div>

<div className="mobile-dex-line3 flex">
<span className="mobile-dex-label">Action: </span>
<span className="mobile-dex-action">{getActionDetails(offer, 'mobile')}</span>
</div>
</td>
</tr>
)
Expand All @@ -162,23 +201,7 @@ export default function DexOrdersData({ account, offerList, ledgerTimestamp, set
<thead>
<tr>
<th colSpan="100">
{offerList.length > 5 ? (
<>
The last 5 DEX orders{historicalTitle} [
<a href={`/account/${address}/dex`} className="link">
View all ({offerList.length} total)
</a>{' '}
]
</>
) : (
<>
{offerList.length} DEX orders{historicalTitle} [
<a href={`/account/${address}/dex`} className="link">
View details
</a>
]
</>
)}
{getHeaders()}
{!account?.address && !ledgerTimestamp && (
<>
{' '}
Expand All @@ -194,7 +217,7 @@ export default function DexOrdersData({ account, offerList, ledgerTimestamp, set
</thead>
<tbody>
<tr>
<th>#</th>
<th className="left">Ids</th>
<th className="left">Offer</th>
<th className="right">Rate</th>
<th className="center">Action</th>
Expand All @@ -204,36 +227,10 @@ export default function DexOrdersData({ account, offerList, ledgerTimestamp, set
</table>
<div className="show-on-small-w800">
<br />
<center>
{offerList.length > 5 ? (
<>
The last 5 DEX orders{historicalTitle} [
<a href={`/account/${address}/dex`} className="link">
View all ({offerList.length} total)
</a>{' '}
]
</>
) : (
<>
{offerList.length} DEX orders{historicalTitle} [
<a href={`/account/${address}/dex`} className="link">
View details
</a>
]
</>
)}
</center>
<center>{getHeaders()}</center>
<br />
<table className="table-mobile wide">
<tbody>
<tr>
<th>#</th>
<th className="left">Offer</th>
<th className="right">Rate</th>
<th className="center">Action</th>
</tr>
{orderRows}
</tbody>
<tbody>{mobileOrderRows}</tbody>
</table>
<br />
</div>
Expand Down
Loading