Phase 6 - NFT Display Implementation

Date: 2026-03-29 Status: ✅ Complete Build: SUCCESS

Summary

Implemented NFT display feature for Element X ADA wallet. NFTs now display with thumbnails in the Assets tab, and tapping an NFT opens a detail bottom sheet with full metadata.

Features Delivered

1. NFT Metadata Fetching (KoiosCardanoClient)

Added getNftMetadata(policyId, assetName) method to CardanoClient interface
Implemented Koios asset_info endpoint integration
Parses CIP-25 onchain_metadata for:
- name - NFT name
- image - Handles both String and Array formats
- description - NFT description
- Full rawMetadata map for additional fields
IPFS URL resolution: ipfs://Qm... → https://ipfs.io/ipfs/Qm...
In-memory cache to avoid redundant API calls

2. NftMetadata Data Class

data class NftMetadata(
    val name: String,
    val image: String?,  // Resolved HTTP URL
    val description: String?,
    val rawMetadata: Map<String, Any>,
)

3. Assets Tab UI Updates

NFT thumbnails: 64dp square with 8dp rounded corners
Uses Coil 3.x AsyncImage with proper state handling
Loading state: CircularProgressIndicator
Error state: BrokenImage icon placeholder
FTs (fungible tokens) show quantity without thumbnail
Click on NFT row opens detail bottom sheet

4. NFT Detail Bottom Sheet

Full-size image with proper aspect ratio
NFT name and description
Truncated policy ID
Raw metadata key/value pairs (filtered, max 100 chars)
Close button (Element design system style)

5. Metadata Loading Strategy

Parallel fetching in presenter for visible NFTs (max 10 batch)
Results cached for 30 minutes
Graceful fallback on parse errors
Never blocks UI - all async

Technical Details

Files Modified

features/wallet/api/CardanoClient.kt - Added getNftMetadata()
features/wallet/api/NftMetadata.kt - New data class
features/wallet/impl/cardano/KoiosCardanoClient.kt - Implementation
features/wallet/impl/panel/WalletPanelPresenter.kt - Metadata enrichment
features/wallet/impl/panel/tabs/AssetsTabView.kt - UI with thumbnails + bottom sheet
features/wallet/test/FakeCardanoClient.kt - Test support

API Endpoint

POST https://api.koios.rest/api/v1/asset_info
Body: {"_asset_list": [["<policyId>", "<assetNameHex>"]]}

Commit

2d8df4f23f feat(wallet): NFT thumbnails and metadata display in Assets tab

Build Output

APK: /tmp/apk-serve/element-x-ada-mainnet.apk (220MB arm64)
Build time: ~19s (incremental)

Phase 6 Complete

All three features for Phase 6 are now implemented:

✅ ADA Handle resolution ($handle → address)
✅ Token send (native asset transfer)
✅ NFT display (thumbnails + detail view)

The Element X ADA wallet is feature-complete for mainnet use.

2.8 KiB Raw Permalink Blame History