Merge pull request #196 from 0xsequence/fix-inventory-incorrect-count

4285 - Fix incorrect balance
0xsequence · Feb 26, 2025 · 8f6e243 · 8f6e243
2 parents b3ceeb7 + 3c0bffa
commit 8f6e243
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 29 deletions.
diff --git a/packages/sdk/src/react/ui/components/collectible-card/CollectibleCard.tsx b/packages/sdk/src/react/ui/components/collectible-card/CollectibleCard.tsx
@@ -184,6 +184,7 @@ export function CollectibleCard({
 						lowestListingPriceAmount={lowestListing?.order?.priceAmount}
 						lowestListingCurrency={lowestListingCurrency}
 						balance={balance}
+						decimals={collectibleMetadata?.decimals}
 					/>
 
 					{(highestOffer || lowestListing) && (

diff --git a/packages/sdk/src/react/ui/components/collectible-card/Footer.tsx b/packages/sdk/src/react/ui/components/collectible-card/Footer.tsx
@@ -15,6 +15,7 @@ const formatPrice = (amount: string, currency: Currency): string => {
 type FooterProps = {
 	name: string;
 	type?: ContractType;
+	decimals?: number;
 	onOfferClick?: () => void;
 	highestOffer?: Order;
 	lowestListingPriceAmount?: string;
@@ -25,6 +26,7 @@ type FooterProps = {
 export const Footer = ({
 	name,
 	type,
+	decimals,
 	onOfferClick,
 	highestOffer,
 	lowestListingPriceAmount,
@@ -104,22 +106,28 @@ export const Footer = ({
 				</Text>
 			</Box>
 
-			<TokenTypeBalancePill balance={balance} type={type as ContractType} />
+			<TokenTypeBalancePill
+				balance={balance}
+				type={type as ContractType}
+				decimals={decimals}
+			/>
 		</Box>
 	);
 };
 
 const TokenTypeBalancePill = ({
 	balance,
 	type,
+	decimals,
 }: {
 	balance?: string;
 	type: ContractType;
+	decimals?: number;
 }) => {
 	const displayText =
 		type === ContractType.ERC1155
 			? balance
-				? `Owned: ${balance}`
+				? `Owned: ${formatUnits(BigInt(balance), decimals ?? 0)}`
 				: 'ERC-1155'
 			: 'ERC-721';
 

diff --git a/playgrounds/react-vite/src/tabs/Collectables.tsx b/playgrounds/react-vite/src/tabs/Collectables.tsx
@@ -1,7 +1,8 @@
 import { Text } from '@0xsequence/design-system2';
 import { useCollection } from '@0xsequence/marketplace-sdk/react';
+import type { ContractInfo } from '@0xsequence/metadata';
 import { useNavigate } from 'react-router';
-import type { Collection, OrderbookKind } from '../../../../packages/sdk/src';
+import type { OrderbookKind } from '../../../../packages/sdk/src';
 import { useMarketplace } from '../lib/MarketplaceContext';
 import { ROUTES } from '../lib/routes';
 import { InfiniteScrollView } from './components/InfiniteScrollView';
@@ -41,7 +42,7 @@ export function Collectibles() {
 					collectionAddress={collectionAddress}
 					chainId={chainId}
 					orderbookKind={orderbookKind as OrderbookKind}
-					collection={collection as unknown as Collection}
+					collection={collection as unknown as ContractInfo}
 					collectionLoading={collectionLoading}
 					onCollectibleClick={handleCollectibleClick}
 				/>
@@ -50,7 +51,7 @@ export function Collectibles() {
 					collectionAddress={collectionAddress}
 					chainId={chainId}
 					orderbookKind={orderbookKind as OrderbookKind}
-					collection={collection as unknown as Collection}
+					collection={collection as unknown as ContractInfo}
 					collectionLoading={collectionLoading}
 					onCollectibleClick={handleCollectibleClick}
 				/>

diff --git a/playgrounds/react-vite/src/tabs/components/InfiniteScrollView.tsx b/playgrounds/react-vite/src/tabs/components/InfiniteScrollView.tsx
@@ -1,24 +1,19 @@
 import { Text, useToast } from '@0xsequence/design-system2';
-import { useCollectionBalance } from '@0xsequence/kit';
-import {
-	type Collection,
-	type ContractType,
-	OrderSide,
-	type OrderbookKind,
-} from '@0xsequence/marketplace-sdk';
+import { OrderSide, type OrderbookKind } from '@0xsequence/marketplace-sdk';
 import {
 	CollectibleCard,
+	useCollectionBalanceDetails,
 	useListCollectibles,
 } from '@0xsequence/marketplace-sdk/react';
+import type { ContractInfo, ContractType } from '@0xsequence/metadata';
 import React from 'react';
 import { useAccount } from 'wagmi';
 import { CollectibleCardAction } from '../../../../../packages/sdk/src/react/ui/components/_internals/action-button/types';
-
 interface InfiniteScrollViewProps {
 	collectionAddress: `0x${string}`;
 	chainId: string;
 	orderbookKind: OrderbookKind;
-	collection: Collection;
+	collection: ContractInfo;
 	collectionLoading: boolean;
 	onCollectibleClick: (tokenId: string) => void;
 }
@@ -45,11 +40,16 @@ export function InfiniteScrollView({
 	});
 
 	const { data: collectionBalance, isLoading: collectionBalanceLoading } =
-		useCollectionBalance({
-			contractAddress: collectionAddress,
+		useCollectionBalanceDetails({
 			chainId: Number(chainId),
-			accountAddress: accountAddress || '',
-			includeMetadata: false,
+			filter: {
+				accountAddresses: accountAddress ? [accountAddress] : [],
+				omitNativeBalances: true,
+				contractWhitelist: [collectionAddress],
+			},
+			query: {
+				enabled: !!accountAddress,
+			},
 		});
 
 	const toast = useToast();
@@ -87,12 +87,12 @@ export function InfiniteScrollView({
 								chainId={chainId}
 								collectionAddress={collectionAddress}
 								orderbookKind={orderbookKind}
-								collectionType={collection?.contractType as ContractType}
+								collectionType={collection?.type as ContractType}
 								lowestListing={collectibleLowestListing}
 								onCollectibleClick={onCollectibleClick}
 								onOfferClick={({ order }) => console.log(order)}
 								balance={
-									collectionBalance?.find(
+									collectionBalance?.balances.find(
 										(balance) =>
 											balance.tokenID ===
 											collectibleLowestListing.metadata.tokenId,

diff --git a/playgrounds/react-vite/src/tabs/components/PaginatedView.tsx b/playgrounds/react-vite/src/tabs/components/PaginatedView.tsx
@@ -1,15 +1,15 @@
 import { Button, Text, useToast } from '@0xsequence/design-system2';
-import { useCollectionBalance } from '@0xsequence/kit';
 import {
-	type Collection,
 	type ContractType,
 	OrderSide,
 	type OrderbookKind,
 } from '@0xsequence/marketplace-sdk';
 import {
 	CollectibleCard,
+	useCollectionBalanceDetails,
 	useListCollectiblesPaginated,
 } from '@0xsequence/marketplace-sdk/react';
+import type { ContractInfo } from '@0xsequence/metadata';
 import { useState } from 'react';
 import type { Address } from 'viem';
 import { useAccount } from 'wagmi';
@@ -19,7 +19,7 @@ interface PaginatedViewProps {
 	collectionAddress: Address;
 	chainId: string;
 	orderbookKind: OrderbookKind;
-	collection: Collection;
+	collection: ContractInfo;
 	collectionLoading: boolean;
 	onCollectibleClick: (tokenId: string) => void;
 }
@@ -55,11 +55,16 @@ export function PaginatedView({
 	});
 
 	const { data: collectionBalance, isLoading: collectionBalanceLoading } =
-		useCollectionBalance({
-			contractAddress: collectionAddress,
+		useCollectionBalanceDetails({
 			chainId: Number(chainId),
-			accountAddress: accountAddress || '',
-			includeMetadata: false,
+			filter: {
+				accountAddresses: accountAddress ? [accountAddress] : [],
+				contractWhitelist: [collectionAddress],
+				omitNativeBalances: true,
+			},
+			query: {
+				enabled: !!accountAddress,
+			},
 		});
 
 	const toast = useToast();
@@ -111,12 +116,12 @@ export function PaginatedView({
 							chainId={chainId}
 							collectionAddress={collectionAddress}
 							orderbookKind={orderbookKind}
-							collectionType={collection?.contractType as ContractType}
+							collectionType={collection?.type as ContractType}
 							lowestListing={collectibleLowestListing}
 							onCollectibleClick={onCollectibleClick}
 							onOfferClick={({ order }) => console.log(order)}
 							balance={
-								collectionBalance?.find(
+								collectionBalance?.balances.find(
 									(balance) =>
 										balance.tokenID ===
 										collectibleLowestListing.metadata.tokenId,