[TAS-5315] ✨ Add LikeRank display and remove staking stats from book cards#889
[TAS-5315] ✨ Add LikeRank display and remove staking stats from book cards#889williamchong wants to merge 1 commit intolikecoin:developfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the book card UI to show a LikeRank (#n) derived from staking position, replacing the previous staking stats in store and shelf contexts, and wires in indexer support for retrieving/storing the rank.
Changes:
- Add
likeRankto bookstore item models and compute/display it on store book cards and CMS tag listings. - Add
stakingRanksupport in the staking store + composable, and display it on the product detail staking section. - Remove shelf card staking stats props/UI (staked amount / pending rewards).
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| types/bookstore.d.ts | Adds likeRank to the BookstoreItem type. |
| stores/staking.ts | Stores and exposes stakingRank per NFT class from the collective indexer. |
| stores/bookstore.ts | Computes likeRank for staking book lists. |
| shared/utils/collective-indexer.ts | Extends CollectiveBookNFT with optional staking_rank. |
| pages/store/index.vue | Passes likeRank into <BookstoreItem> and propagates rank into CMS-tag-derived items. |
| pages/store/[nftClassId]/index.vue | Displays LikeRank in the staking section UI. |
| pages/shelf/[[walletAddress]].vue | Removes passing staking stats props into <BookshelfItem>. |
| i18n/locales/zh-Hant.json | Adds staking_like_rank translation key. |
| i18n/locales/en.json | Adds staking_like_rank translation key. |
| composables/use-nft-class-staking-data.ts | Exposes stakingRank from the staking store. |
| components/BookstoreItem.vue | Replaces staking stats rows with a LikeRank row. |
| components/BookshelfItem.vue | Removes staking visuals/stats on shelf cards. |
| totalStaked: BigInt(bookNFT.staked_amount || 0), | ||
| stakerCount: bookNFT.number_of_stakers, | ||
| lastStakedAt: bookNFT.last_staked_at, | ||
| likeRank: currentOffset + index + 1, |
There was a problem hiding this comment.
likeRank is derived from stakingBooksMap.value[sortBy].offset via Number(...), but this offset is used as the Collective API pagination.key (cursor), not a guaranteed numeric item offset. This can produce incorrect ranks (especially after loading the next page), and filtering out zero-stake items can also shift the computed index. Prefer using the API-provided staking_rank (now available on CollectiveBookNFT) or compute rank from the existing accumulated item count rather than the pagination cursor.
| :class="getGridItemClassesByIndex(index)" | ||
| :nft-class-id="item.nftClassId" | ||
| :nft-ids="item.nftIds" | ||
| :staked-amount="item.stakedAmount" | ||
| :pending-rewards="item.pendingRewards" | ||
| :is-owned="item.isOwned" | ||
| :progress="item.progress" | ||
| :lazy="index >= columnMax" |
There was a problem hiding this comment.
After removing the :pending-rewards prop from <BookshelfItem>, this page still computes pendingRewards in BookshelfItemWithStaking (including formatUnits(...)) but no longer uses it anywhere (only stakedAmount is used for sorting). Consider removing the pendingRewards field and its associated conversions to avoid unnecessary work and reduce data shape complexity.
| :class="getGridItemClassesByIndex(index)" | ||
| :nft-class-id="item.nftClassId" | ||
| :nft-ids="item.nftIds" | ||
| :staked-amount="item.stakedAmount" | ||
| :pending-rewards="item.pendingRewards" | ||
| :is-owned="item.isOwned" | ||
| :progress="item.progress" | ||
| :lazy="index >= columnMax" |
There was a problem hiding this comment.
PR description says shelf cards should replace "我的質押/收益" with LikeRank, but the shelf item rendering here only removes :staked-amount / :pending-rewards without adding any LikeRank display. Either update the PR description to match the actual scope, or add the LikeRank UI/data plumbing for shelf items.
williamchong
force-pushed
the
feature/staking
branch
from
b7246cd to
4f01e4d
Compare
Replace 應援指數/應援人數 in store view and 我的質押/收益 in shelf view with LikeRank (#n) derived from staking position. Rank is shown on store book cards, CMS tag items, and product detail staking section.
williamchong
force-pushed
the
feature/staking
branch
from
4f01e4d to
cd16663
Compare
| totalStaked: BigInt(bookNFT.staked_amount || 0), | ||
| stakerCount: bookNFT.number_of_stakers, | ||
| lastStakedAt: bookNFT.last_staked_at, | ||
| likeRank: currentOffset + index + 1, | ||
| })) |
There was a problem hiding this comment.
likeRank is currently computed as currentOffset + index + 1, but stakingBooksMap.value[sortBy].offset is the Collective indexer pagination.key cursor (stored as string), not a numeric offset. Converting it with Number(...) will often yield NaN or an unrelated value, producing incorrect ranks. Since the API type now exposes staking_rank, use bookNFT.staking_rank (with a sensible fallback) instead of deriving rank from the pagination cursor.
| <UCard | ||
| v-if="stakingRank > 0" | ||
| :ui="{ body: 'p-4' }" | ||
| > | ||
| <div class="text-center"> |
There was a problem hiding this comment.
This adds a 4th stats card when stakingRank > 0, but the surrounding grid is still tablet:grid-cols-3. When hasLoggedIn is also true this section will render 4 cards, causing an awkward wrap/misalignment at tablet+ breakpoints. Consider updating the grid columns/responsive layout so the card count is handled consistently.
Replace 應援指數/應援人數 in store view and 我的質押/收益 in shelf view with LikeRank (#n) derived from staking position. Rank is shown on store book cards, CMS tag items, and product detail staking section.
Related: likecoin/likecoin-op#309