feat: 🎸 migrated balance_of to v2

Author: Damian Finkelstein

package.json

@@ -6,7 +6,7 @@
     "@dfinity/agent": "^0.10.2",
     "@dfinity/candid": "^0.10.2",
     "@dfinity/identity": "^0.10.2",
-    "@dfinity/principal": "^0.10.2",
+    "@dfinity/principal": "^0.12.2",
     "@psychedelic/cap-js": "^0.0.7",
     "@psychedelic/icns-js": "^0.1.11",
     "@psychedelic/jelly-js": "0.1.0-beta.202209091032-e94a8f5",
@@ -163,4 +163,4 @@
       ]
     ]
   }
-}
+}

src/components/alerts/index.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router';
 import {
   AlertsContainer,
   AlertsWrapper,
@@ -16,7 +17,9 @@ import { useAssetsToWithdraw } from '../../hooks/use-assets-to-withdraw';
 export const Alerts = () => {
   const { t } = useTranslation();
 
-  useAssetsToWithdraw();
+  const { collectionId } = useParams();
+
+  useAssetsToWithdraw(collectionId);
 
   return (
     <AlertsContainer>
@@ -32,3 +35,4 @@ export const Alerts = () => {
     </AlertsContainer>
   );
 };
+

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

@@ -7,7 +7,7 @@ import {
   marketplaceActions,
 } from '../store';
 
-export const useAssetsToWithdraw = () => {
+export const useAssetsToWithdraw = (collectionId?: string) => {
   const dispatch = useAppDispatch();
   const { isConnected, principalId: plugPrincipal } = usePlugStore();
 
@@ -21,11 +21,12 @@ export const useAssetsToWithdraw = () => {
   );
 
   useEffect(() => {
-    if (!isConnected || !plugPrincipal) return;
+    if (!isConnected || !plugPrincipal || !collectionId) return;
 
     dispatch(
       marketplaceActions.getAssetsToWithdraw({
         userPrincipalId: plugPrincipal,
+        collectionId,
       }),
     );
   }, [
@@ -34,5 +35,7 @@ export const useAssetsToWithdraw = () => {
     plugPrincipal,
     recentlyWithdrawnAssets,
     recentlyFailedTransactions,
+    collectionId,
   ]);
 };
+

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

@@ -1,13 +1,17 @@
 import { Principal } from '@dfinity/principal';
 import { createAsyncThunk } from '@reduxjs/toolkit';
+import { JellyCollection } from '@psychedelic/jelly-js';
 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';
 
 export type GetAssetsToWithdrawProps = {
   userPrincipalId: string;
+  collectionId: string;
 };
 
 export const getAssetsToWithdraw = createAsyncThunk<
@@ -22,14 +26,33 @@ export const getAssetsToWithdraw = createAsyncThunk<
     slice: marketplaceSlice,
   });
 
-  const { userPrincipalId } = params;
+  const { userPrincipalId, collectionId } = params;
 
   try {
-    const userPrincipalAddress = Principal.fromText(userPrincipalId);
+    const jellyInstance = await jellyJsInstanceHandler({
+      thunkAPI,
+      collectionId,
+      slice: marketplaceSlice,
+    });
 
-    const balanceResponse = await actorInstance.balanceOf(
-      userPrincipalAddress,
-    );
+    const collection = await getJellyCollection({
+      jellyInstance,
+      collectionId,
+    });
+
+    if (!collection)
+      throw Error(`Oops! collection ${collectionId} not found!`);
+
+    const jellyCollection: JellyCollection =
+      await jellyInstance.getJellyCollection(collection);
+
+    const balanceResponse = await jellyCollection.getMyBalance();
+
+    // const userPrincipalAddress = Principal.fromText(userPrincipalId);
+
+    // const balanceResponse = await actorInstance.balanceOf(
+    //   userPrincipalAddress,
+    // );
 
     const assetsToWithdraw =
       !Array.isArray(balanceResponse) || !balanceResponse.length
@@ -45,3 +68,4 @@ export const getAssetsToWithdraw = createAsyncThunk<
     AppLog.error(err);
   }
 });
+

src/utils/icns.ts

@@ -5,6 +5,7 @@ const reverseNameActor = new ICNSReverseController();
 
 export const getICNSName = async (plugPrincipalId: string) => {
   const owner = Principal.fromText(plugPrincipalId);
+  // @ts-ignore
   const icnsName = await reverseNameActor.getReverseName(owner);
   return icnsName;
 };
@@ -21,3 +22,4 @@ export const formatICNSName = (name: string) => {
     name.length,
   )}`;
 };
+

src/utils/parser.ts

@@ -336,17 +336,13 @@ export const parseGetCollectionsResponse = (data: Array<any>) => {
 };
 
 // TODO: update data type while using collection details
-export const parseBalanceResponse = (data: Array<any>) => {
-  const parsed = data.reduce((accParent, currParent) => {
-    const assetsToWithdraw: AssetToWithdraw = {
-      principalId: Principal.fromUint8Array(
-        currParent[0]._arr,
-      ).toString(),
-      amount: parseE8SAmountToWICP(currParent[1]),
-    };
-
-    return [...accParent, assetsToWithdraw];
-  }, [] as AssetsToWithdraw);
-
-  return parsed;
-};
+export const parseBalanceResponse = (
+  data: {
+    fungibleCanisterId: Principal;
+    balance: bigint;
+  }[],
+) =>
+  data.map((fungibleBalance) => ({
+    principalId: fungibleBalance.fungibleCanisterId.toString(),
+    amount: parseE8SAmountToWICP(fungibleBalance.balance),
+  }));