Skip to content

fix token page UI #539

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 4 commits into
base: main
Choose a base branch
from
Open

fix token page UI #539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1db805
fix some buge
pandablue0809 Aug 16, 2025
7dcefed
add userOrServiceName
pandablue0809 Aug 18, 2025
e4dadc9
add some field
pandablue0809 Aug 18, 2025
e333be0
remove token description in left side
pandablue0809 Aug 19, 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
29 changes: 24 additions & 5 deletions pages/token/[[...id]].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,9 +253,8 @@ export default function TokenPage({
<div className="content-profile">
<div className="column-left">
{/* Big Token Icon */}
<img alt="token" src={tokenImageSrc(token)} style={{ width: '100%', height: 'auto' }} />
<img alt="token" src={tokenImageSrc(token)} className="token-image" style={{ width: '100%', height: 'auto' }} />
<h1>{token?.currencyDetails?.currency}</h1>
{token?.description && <p>{token?.description}</p>}

{/* Action Buttons */}
<button className="button-action wide center" onClick={handleSetTrustline}>
Expand Down Expand Up @@ -420,9 +419,9 @@ export default function TokenPage({
<td>{fullNiceNumber(statistics?.dexes || 0)}</td>
</tr>
<tr>
<td>Active Holders</td>
<td>{fullNiceNumber(statistics?.activeHolders || 0)}</td>
</tr>
<td>DEX txs</td>
<td>{fullNiceNumber(statistics?.dexTxs || 0)}</td>
</tr>
<tr>
<td>Buyers</td>
<td>{fullNiceNumber(statistics?.uniqueBuyers || 0)}</td>
Expand All @@ -435,6 +434,26 @@ export default function TokenPage({
<td>Traders</td>
<td>{fullNiceNumber(statistics?.uniqueDexAccounts || 0)}</td>
</tr>
<tr>
<td>Active Holders</td>
<td>{fullNiceNumber(statistics?.activeHolders || 0)}</td>
</tr>
<tr>
<td>Active Offers</td>
<td>{fullNiceNumber(statistics?.activeOffers || 0)}</td>
</tr>
<tr>
<td>Trading Pairs</td>
<td>{fullNiceNumber(statistics?.activeCounters || 0)}</td>
</tr>
<tr>
<td>Rippling txs</td>
<td>{fullNiceNumber(statistics?.ripplingTxs || 0)}</td>
</tr>
<tr>
<td>Unique accounts</td>
<td>{fullNiceNumber(statistics?.uniqueAccounts || 0)}</td>
</tr>
</tbody>
</table>

Expand Down
38 changes: 25 additions & 13 deletions pages/tokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ import IssuerSearchSelect from '../components/UI/IssuerSearchSelect'
import CurrencySearchSelect from '../components/UI/CurrencySearchSelect'
import {
addressLink,
addressUsernameOrServiceLink,
AddressWithIcon,
capitalize,
fullNiceNumber,
niceCurrency,
niceNumber,
shortHash,
shortNiceNumber
shortNiceNumber,
shortAddress,
userOrServiceName
} from '../utils/format'
import { axiosServer, getFiatRateServer, passHeaders } from '../utils/axios'
import { getIsSsrMobile } from '../utils/mobile'
Expand Down Expand Up @@ -331,7 +332,13 @@ export default function Tokens({
{token.issuer && (
<>
<br />
{addressUsernameOrServiceLink(token, 'issuer', { short: true })}
<span className="issuer-address">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{userOrServiceName(token.issuerDetails) || shortAddress(token.issuer)}

we should reuse the function userOrServiceName we have in format.js

{token.issuerDetails?.service || token.issuerDetails?.username ? (
userOrServiceName(token.issuerDetails)
) : (
shortAddress(token.issuer)
)}
</span>
</>
)}
</AddressWithIcon>
Expand Down Expand Up @@ -697,14 +704,14 @@ export default function Tokens({
<br />
Price: {priceToFiat({ price: token.statistics?.priceXrp, mobile: true })}
<br />
Price in {nativeCurrency} 5m ago: {niceNumber(token.statistics?.priceXrp5m, 6)}
{/* Price in {nativeCurrency} 5m ago: {niceNumber(token.statistics?.priceXrp5m, 6)}
<br />
Price in {nativeCurrency} 1h ago: {niceNumber(token.statistics?.priceXrp1h, 6)}
<br />
Price in {nativeCurrency} 24h ago: {niceNumber(token.statistics?.priceXrp24h, 6)}
<br />
Price in {nativeCurrency} 7d ago: {niceNumber(token.statistics?.priceXrp7d, 6)}
<br />
<br /> */}
Buy Volume (24h): {volumeToFiat({ token, type: 'buy', mobile: true })}
<br />
Sell Volume (24h): {volumeToFiat({ token, type: 'sell', mobile: true })}
Expand All @@ -715,16 +722,16 @@ export default function Tokens({
<br />
Trades (24h): {niceNumber(token.statistics?.dexes) || 0}
<br />
DEX txs (24h): {niceNumber(token.statistics?.dexTxs) || 0}
<br />
{/* DEX txs (24h): {niceNumber(token.statistics?.dexTxs) || 0}
<br /> */}
Unique Traders (24h): {niceNumber(token.statistics?.uniqueDexAccounts) || 0}
<br />
Unique Sellers (24h): {niceNumber(token.statistics?.uniqueSellers) || 0}
<br />
Unique Buyers (24h): {niceNumber(token.statistics?.uniqueBuyers) || 0}
<br />
Supply: {niceNumber(token.supply, 0)} {niceCurrency(token.currency)}
<br />
{/* Supply: {niceNumber(token.supply, 0)} {niceCurrency(token.currency)}
<br /> */}
Marketcap: {marketcapToFiat({ marketcap: token.statistics?.marketcap, mobile: true })}
<br />
Trustlines: {niceNumber(token.trustlines)}
Expand All @@ -734,12 +741,12 @@ export default function Tokens({
Active holders (Account that used the token in the last closed day):{' '}
{niceNumber(token.statistics?.activeHolders) || 0}
<br />
Active offers (Count of used offers in the last closed day):{' '}
{/* Active offers (Count of used offers in the last closed day):{' '}
{niceNumber(token.statistics?.activeOffers) || 0}
<br />
Trading pairs (in the last closed day):{' '}
{niceNumber(token.statistics?.activeCounters) || 0}
<br />
<br /> */}
{!xahauNetwork && (
<>
AMM Pools:{' '}
Expand All @@ -756,7 +763,7 @@ export default function Tokens({
</>
)}
<br />
Transfer txs (24h): {niceNumber(token.statistics?.transferTxs) || 0}
{/* Transfer txs (24h): {niceNumber(token.statistics?.transferTxs) || 0}
<br />
{token.statistics?.transferTxs > 0 && (
<>
Expand All @@ -778,7 +785,7 @@ export default function Tokens({
<br />
Unique accounts (used the token in the last 24h):{' '}
{niceNumber(token.statistics?.uniqueAccounts) || 0}
<br />
<br /> */}
<br />
<button
className="button-action narrow thin"
Expand Down Expand Up @@ -817,6 +824,11 @@ export default function Tokens({
.clickable-row td {
position: relative;
}

.issuer-address {
color: var(--text-muted);
font-size: 0.9em;
}
`}</style>
</>
)
Expand Down
10 changes: 8 additions & 2 deletions styles/pages/token.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@
.column-left {
display: inline-block;
position: relative;
width: calc(40% - 15px);
width: calc(30% - 15px);
padding: 0 15px 0 0;
.token-image {
width: 100%;
height: auto;
border: 1px solid var(--button-additional);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
}
}
.column-right {
display: inline-block;
width: calc(60% - 17px);
width: calc(70% - 15px);
padding: 0 0 0 15px;
vertical-align: top;
}
Expand Down