use useCollectionBalanceDetails instead of deprecated hook, fix typ…

…ing for params
0xsequence · Feb 26, 2025 · 3c0bffa · 3c0bffa
1 parent aafe54d
commit 3c0bffa
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
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,