diff --git a/packages/data-components/src/components/Collectibles/index.tsx b/packages/data-components/src/components/Collectibles/index.tsx index 14965c44c..61e5ac7ea 100644 --- a/packages/data-components/src/components/Collectibles/index.tsx +++ b/packages/data-components/src/components/Collectibles/index.tsx @@ -146,7 +146,9 @@ function _Collectibles({ const groupedCollectibles = useMemo( () => getGroupedCollectibles( - data?.wallet?.nfts?.edges.map((e) => e.node) ?? [] + (data?.wallet?.nfts?.edges.map((e) => e.node) ?? []).sort((a, b) => + a.address.localeCompare(b.address) + ) ), [data] ); diff --git a/packages/data-components/src/components/Collectibles/utils.ts b/packages/data-components/src/components/Collectibles/utils.ts index 0cd96f7e7..e22c23cc3 100644 --- a/packages/data-components/src/components/Collectibles/utils.ts +++ b/packages/data-components/src/components/Collectibles/utils.ts @@ -35,7 +35,7 @@ export function getGroupedCollectibles( .reduce((acc, curr) => { acc.push({ collection: curr[0], - data: curr[1], + data: curr[1].sort((a, b) => a.address.localeCompare(b.address)), whitelisted: curr[1][0].whitelisted, }); return acc; @@ -46,10 +46,16 @@ export function getGroupedCollectibles( else if (b.collection === "Mad Lads") return 1; else if (a.collection === "Tensorians") return -1; else if (b.collection === "Tensorians") return 1; - else if (a.whitelisted && b.whitelisted) - return b.data.length - a.data.length; - else if (a.whitelisted) return -1; + else if (a.whitelisted && b.whitelisted) { + if (b.data.length !== a.data.length) { + return b.data.length - a.data.length; + } + return a.collection.localeCompare(b.collection); + } else if (a.whitelisted) return -1; else if (b.whitelisted) return 1; - return b.data.length - a.data.length; + if (b.data.length !== a.data.length) { + return b.data.length - a.data.length; + } + return a.collection.localeCompare(b.collection); }); }