Conversation
Design for integrating Arkade asset support into the explorer, targeting ts-sdk PR #279 types. Covers new asset page, VTXO asset display, transaction packet parsing, and session-cached metadata.
10-task plan covering SDK upgrade, asset cache hook, UI components (AssetBadge, AssetAmountDisplay, AssetPage), integration into VtxoList/AddressStats/TransactionDetails, and verification steps.
…mponents - useAssetDetails: two-tier cache (session storage + react-query) for asset metadata - AssetBadge: compact inline badge linking to asset page - AssetAmountDisplay: metadata-aware amount formatting with decimals/ticker
- AssetDetailsCard: shows name, asset ID (copyable), ticker, decimals, supply, control asset link, and raw metadata debug toggle - AssetPage: route handler with loading/error states - Route: /asset/:assetId added to App.tsx
- VtxoList: show AssetBadge + AssetAmountDisplay for each asset on VTXOs - AddressStats: aggregate asset balances across VTXOs with active/total breakdown
Display AssetBadge and AssetAmountDisplay on arkade transaction outputs that carry assets. Uses VTXO data as the source; OP_RETURN packet parsing will be added when the SDK publishes the Packet class.
- Validate metadata icon URLs (HTTPS only) before rendering - Replace floating-point division with string-based decimal formatting - URL-encode assetId in API calls - Extract shared isVtxoActive helper, remove `as any` casts - Consolidate duplicated formatAssetAmount into shared utility - Fix dark mode for Asset Balances heading in AddressStats - Remove unused getAssetDetailsFromCache export
Deploying arkade-explorer with
|
| Latest commit: |
d1da1cf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4256096a.arkade-explorer.pages.dev |
| Branch Preview URL: | https://assets.arkade-explorer.pages.dev |
Deploying mutinynet-arkade-explorer with
|
| Latest commit: |
d1da1cf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1d6ebf22.mutinynet-arkade-explorer.pages.dev |
| Branch Preview URL: | https://assets.mutinynet-arkade-explorer.pages.dev |
Deploying short-arkade-explorer with
|
| Latest commit: |
d1da1cf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://460b0ed9.short-arkade-explorer.pages.dev |
| Branch Preview URL: | https://assets.short-arkade-explorer.pages.dev |
SDK now natively provides: - VirtualCoin with assets?: Asset[] - RestIndexerProvider.getVtxos() with asset parsing - RestIndexerProvider.getAssetDetails() with metadata decoding Removed ~230 lines: AssetIndexerClient override, raw API types, converter functions, VtxoWithAssets type alias. Kept KnownMetadata/AssetMetadata/AssetDetails locally as they are not yet exported from the SDK top-level.
- Replace npm with pnpm; fetch @arkade-os/sdk from git - Multi-stage Dockerfile (pnpm install + build, nginx serve) - GitHub Actions workflow pushes to ghcr.io on push to master
- Click any asset icon to expand it in a fullscreen lightbox overlay - Remove duplicate asset badge+amount in VtxoList; keep AssetAmountDisplay with purple border instead - Parse OP_RETURN output on tx page to show asset packet info (groups, inputs, outputs, issuance detection) via SDK Packet class - Add Genesis TX link on asset detail page, extracted from assetId
- Mark OP_RETURN outputs with "OP_RETURN · Asset Packet" label - For issuance groups where assetId is null, derive it from txid + group index (matching the assetId format: genesis txid + 4-char hex index)
When VTXO data doesn't include assets, use the decoded asset packet to match group outputs by vout index and display the asset info inline on each output box.
…indexer URL ARK_URL now falls back to INDEXER_URL instead of independently defaulting to https://arkade.computer, so the event stream uses VITE_INDEXER_URL.
Asset IDs (65+ hex chars) are now recognized and routed to /asset/:id. Recent searches track asset lookups with a blue "Asset" badge. AssetPage also records visits in search history.
Use subdued text-arkade-gray style with truncated script hex, matching anchor output appearance for protocol metadata outputs.
Stack text and badges vertically, reduce padding and font size. Badges stay on their own row so nothing wraps awkwardly.
Return null early when script doesn't match P2TR or OP_RETURN patterns instead of passing the raw script bytes to ArkAddress constructor, which expects exactly 32 bytes.
Use grid-cols-2/sm:grid-cols-4 for both aggregate asset balance cards and per-VTXO asset pills to reduce vertical clutter.
Center-align asset balance cards and reduce spacing so they fit properly in a 2-col/4-col grid. Reverts unintended VtxoList change.
OP_RETURN outputs are not spendable UTXOs, so fetching VTXO data for them is unnecessary and can cause errors.
Only skip VTXO fetch for actual asset packet outputs, not all OP_RETURN outputs.
One card with rows per asset: badge on left, Balance and Received columns on right. Much cleaner than separate cards per asset.
Add hideUnit prop to AssetAmountDisplay to show only the formatted number (with decimals) without icon/ticker. Asset badge in the row already identifies the asset. Card capped at max-w-md.
Column headers appear once above all rows instead of repeating per asset row.
PR Review: Add asset support (display, detail page, caching)OverviewThis PR adds comprehensive asset support to the Arkade Explorer, including asset detail pages, asset display on VTXOs and transactions, and session-cached metadata. ✅ Security ReviewIcon URL ValidationGood implementation of URL validation before rendering: // Icon URLs validated (HTTPS + data:image/* only) before renderingThis prevents XSS via malicious String-based Decimal Handling// String-based decimal placement avoids floating-point precision lossCorrect approach for handling financial amounts. ✅ AssetId Encoding in URLsencodeURIComponent(assetId)Properly encodes assetId in API calls. ✅ 🟢 Protocol CorrectnessAsset Types
These align with the ts-sdk asset types. Two-tier Caching Strategy
This is a good approach for immutable metadata. 📋 Cross-Repo Impact
🧪 Testing ChecklistThe PR includes a comprehensive test plan. Recommend verifying:
SummaryThis is a well-structured PR with good security practices for handling external data (icons). The caching strategy is appropriate for immutable asset metadata. The deferred OP_RETURN packet parsing is reasonable given SDK dependencies. Approve — Ready for merge once ts-sdk PR #279 is merged. |
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/asset/:assetIdshowing supply, metadata, ticker, decimals, and control asset linkstaleTime: Infinity) for asset metadataAssetBadge(compact linked badge with icon + ticker) andAssetAmountDisplay(decimal-aware formatting using metadata)Security & correctness
data:image/*only) before renderingencodeURIComponenton assetId in API callsDeferred
Packetclass)Test plan
/asset/:assetIdand shows correct details