feat: 🎸 migrated balance_of to v2

src/App.tsx

@@ -32,7 +32,10 @@ const App = () => {
             path="/:collectionId/nft/:id"
             element={<NFTView />}
           />
-          <Route path="/:collectionId/offers/:id" element={<OfferView />} />
+          <Route
+            path="/:collectionId/offers/:id"
+            element={<OfferView />}
+          />
           <Route
             path="/activity/:id"
             element={<UserActivityView />}

src/hooks/use-assets-to-withdraw.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
+import { useMatch } from 'react-router-dom';
 import {
   useAppDispatch,
   RootState,
@@ -11,6 +12,9 @@ export const useAssetsToWithdraw = () => {
   const dispatch = useAppDispatch();
   const { isConnected, principalId: plugPrincipal } = usePlugStore();
 
+  const match = useMatch('/:collectionId');
+  const collectionId = match?.params?.collectionId;
+
   const recentlyFailedTransactions = useSelector(
     (state: RootState) =>
       state.marketplace.recentlyFailedTransactions,
@@ -21,11 +25,10 @@ export const useAssetsToWithdraw = () => {
   );
 
   useEffect(() => {
-    if (!isConnected || !plugPrincipal) return;
-
+    if (!isConnected || !plugPrincipal || !collectionId) return;
     dispatch(
       marketplaceActions.getAssetsToWithdraw({
-        userPrincipalId: plugPrincipal,
+        collectionId,
       }),
     );
   }, [
@@ -34,5 +37,7 @@ export const useAssetsToWithdraw = () => {
     plugPrincipal,
     recentlyWithdrawnAssets,
     recentlyFailedTransactions,
+    collectionId,
   ]);
 };
+

src/store/features/marketplace/async-thunks/get-assets-to-withdraw.ts

@@ -1,40 +1,51 @@
-import { Principal } from '@dfinity/principal';
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { actorInstanceHandler } from '../../../../integrations/actor';
 import { marketplaceSlice } from '../marketplace-slice';
 import { AppLog } from '../../../../utils/log';
 import { parseBalanceResponse } from '../../../../utils/parser';
 import { settingsActions } from '../../settings';
+import { jellyJsInstanceHandler } from '../../../../integrations/jelly-js';
+import { getJellyCollection } from '../../../../utils/jelly';
+import { getPrincipal } from '../../../../integrations/plug';
 
 export type GetAssetsToWithdrawProps = {
-  userPrincipalId: string;
+  collectionId: string;
 };
 
 export const getAssetsToWithdraw = createAsyncThunk<
   any | undefined,
   GetAssetsToWithdrawProps
 >('marketplace/balanceOf', async (params, thunkAPI) => {
-  // Checks if an actor instance exists already
-  // otherwise creates a new instance
-  const actorInstance = await actorInstanceHandler({
+  const { collectionId } = params;
+
+  const jellyInstance = await jellyJsInstanceHandler({
     thunkAPI,
-    serviceName: 'marketplace',
+    collectionId,
     slice: marketplaceSlice,
   });
 
-  const { userPrincipalId } = params;
-
   try {
-    const userPrincipalAddress = Principal.fromText(userPrincipalId);
+    const collection = await getJellyCollection({
+      jellyInstance,
+      collectionId,
+    });
+
+    if (!collection)
+      throw Error(`Oops! collection ${collectionId} not found!`);
 
-    const balanceResponse = await actorInstance.balanceOf(
-      userPrincipalAddress,
+    const jellyCollection = await jellyInstance.getJellyCollection(
+      collection,
     );
 
+    const assetsToWithdrawResponse =
+      await jellyCollection.getAssetsToWithdraw({
+        user: await getPrincipal(),
+      });
+
     const assetsToWithdraw =
-      !Array.isArray(balanceResponse) || !balanceResponse.length
+      !Array.isArray(assetsToWithdrawResponse) ||
+      !assetsToWithdrawResponse.length
         ? []
-        : parseBalanceResponse(balanceResponse);
+        : parseBalanceResponse(assetsToWithdrawResponse);
 
     if (!assetsToWithdraw.length) return;
 
@@ -45,3 +56,4 @@ export const getAssetsToWithdraw = createAsyncThunk<
     AppLog.error(err);
   }
 });
+