anymal-protocol 1.0.2 → 1.0.4

package/dist/index.d.mts

@@ -30,4 +30,17 @@ declare function useSaveAnymalMetadata(): (idToken: string, publicKey: string, n
     message: any;
 }>;
 
-export { type AnymalNftMetadataInputData, type CreateAnymalInputData, useAddAnymalToDatabase, useDeleteAnymalFromDatabase, useMintAnymalNFT, useSaveAnymalMetadata, useVerifyAccount };
+declare function useUpdateAnymalWithNFT(): (anymalPassportId: string, anymalDocId: string, dbAuthToken: string, endpoint: string) => Promise<{
+    success: boolean;
+}>;
+
+declare function useFetchBalance(): (publicClient: any, walletAddress: string, kibbleTokenAddress: string) => Promise<number | undefined>;
+
+declare function useUploadAnymalImage(): (imageFile: File, type: string, idToken: string, publicKey: string, authServiceBaseUrl: string) => Promise<{
+    success: boolean;
+    message: string;
+    url: any;
+    type: string;
+}>;
+
+export { type AnymalNftMetadataInputData, type CreateAnymalInputData, useAddAnymalToDatabase, useDeleteAnymalFromDatabase, useFetchBalance, useMintAnymalNFT, useSaveAnymalMetadata, useUpdateAnymalWithNFT, useUploadAnymalImage, useVerifyAccount };

package/dist/index.d.ts

@@ -30,4 +30,17 @@ declare function useSaveAnymalMetadata(): (idToken: string, publicKey: string, n
     message: any;
 }>;
 
-export { type AnymalNftMetadataInputData, type CreateAnymalInputData, useAddAnymalToDatabase, useDeleteAnymalFromDatabase, useMintAnymalNFT, useSaveAnymalMetadata, useVerifyAccount };
+declare function useUpdateAnymalWithNFT(): (anymalPassportId: string, anymalDocId: string, dbAuthToken: string, endpoint: string) => Promise<{
+    success: boolean;
+}>;
+
+declare function useFetchBalance(): (publicClient: any, walletAddress: string, kibbleTokenAddress: string) => Promise<number | undefined>;
+
+declare function useUploadAnymalImage(): (imageFile: File, type: string, idToken: string, publicKey: string, authServiceBaseUrl: string) => Promise<{
+    success: boolean;
+    message: string;
+    url: any;
+    type: string;
+}>;
+
+export { type AnymalNftMetadataInputData, type CreateAnymalInputData, useAddAnymalToDatabase, useDeleteAnymalFromDatabase, useFetchBalance, useMintAnymalNFT, useSaveAnymalMetadata, useUpdateAnymalWithNFT, useUploadAnymalImage, useVerifyAccount };

package/dist/index.js

@@ -22,13 +22,16 @@ var index_exports = {};
 __export(index_exports, {
   useAddAnymalToDatabase: () => useAddAnymalToDatabase,
   useDeleteAnymalFromDatabase: () => useDeleteAnymalFromDatabase,
+  useFetchBalance: () => useFetchBalance,
   useMintAnymalNFT: () => useMintAnymalNFT,
   useSaveAnymalMetadata: () => useSaveAnymalMetadata,
+  useUpdateAnymalWithNFT: () => useUpdateAnymalWithNFT,
+  useUploadAnymalImage: () => useUploadAnymalImage,
   useVerifyAccount: () => useVerifyAccount
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/utils/useVerifyAccount.ts
+// src/utils/account/useVerifyAccount.ts
 var import_react = require("react");
 var import_viem = require("viem");
 
@@ -589,7 +592,7 @@ var VERIFY_ACCOUNT_ABI = [
   }
 ];
 
-// src/utils/useVerifyAccount.ts
+// src/utils/account/useVerifyAccount.ts
 function useVerifyAccount() {
   return (0, import_react.useCallback)(
     async (pid, dbAuthToken, bundlerClient, smartAccount, accountRewardsContractAddress) => {
@@ -806,11 +809,197 @@ function useSaveAnymalMetadata() {
     []
   );
 }
+
+// src/utils/anymals/useUpdateAnymalWithNFT.ts
+var import_react6 = require("react");
+function useUpdateAnymalWithNFT() {
+  return (0, import_react6.useCallback)(
+    async (anymalPassportId, anymalDocId, dbAuthToken, endpoint) => {
+      if (!dbAuthToken || !anymalPassportId || !anymalDocId || !endpoint) {
+        return {
+          success: false
+        };
+      }
+      try {
+        const mutation = `
+          mutation {
+            update_Anymal(
+              docID: [${JSON.stringify(anymalDocId)}],
+              input: {
+                passportID: "${anymalPassportId}"
+              }
+            ) {
+              passportID
+            }
+          }
+        `;
+        const response = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${dbAuthToken}`
+          },
+          body: JSON.stringify({ query: mutation })
+        });
+        if (!response.ok) {
+          return { success: false };
+        }
+        const { errors } = await response.json();
+        if (errors) {
+          console.log(`GQL error: ${JSON.stringify(errors)}`);
+          return { success: false };
+        }
+        return { success: true };
+      } catch (error) {
+        console.error("Error updating Anymal with NFT ID:", error);
+        return { success: false };
+      }
+    },
+    []
+  );
+}
+
+// src/utils/balance/useFetchBalance.ts
+var import_react7 = require("react");
+var import_viem3 = require("viem");
+function useFetchBalance() {
+  return (0, import_react7.useCallback)(
+    async (publicClient, walletAddress, kibbleTokenAddress) => {
+      try {
+        const balance = await publicClient.readContract({
+          address: (0, import_viem3.getAddress)(kibbleTokenAddress),
+          abi: import_viem3.erc20Abi,
+          functionName: "balanceOf",
+          args: [(0, import_viem3.getAddress)(walletAddress)]
+        });
+        return Number(balance);
+      } catch (error) {
+        console.error("Failed to fetch token balance:", error);
+      }
+    },
+    []
+  );
+}
+
+// src/utils/anymals/useUploadAnymalImage.ts
+var import_react8 = require("react");
+
+// src/helpers/UploadImageHelper.tsx
+function resizeImage(file, maxWidth = 800, maxHeight = 800, quality = 0.7) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = URL.createObjectURL(file);
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Failed to get canvas 2D context"));
+        return;
+      }
+      let width = img.width;
+      let height = img.height;
+      if (width > height) {
+        if (width > maxWidth) {
+          height = Math.round(height *= maxWidth / width);
+          width = maxWidth;
+        }
+      } else {
+        if (height > maxHeight) {
+          width = Math.round(width *= maxHeight / height);
+          height = maxHeight;
+        }
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+      canvas.toBlob(
+        (blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("Image compression failed."));
+        },
+        "image/jpeg",
+        quality
+      );
+    };
+    img.onerror = () => reject(new Error("Failed to load image."));
+  });
+}
+async function prepareImage(imageFile) {
+  const compressedFile = await resizeImage(imageFile);
+  return toBase64(compressedFile);
+}
+function toBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result.split(",")[1]);
+    reader.onerror = (error) => reject(error);
+  });
+}
+
+// src/utils/anymals/useUploadAnymalImage.ts
+function useUploadAnymalImage() {
+  return (0, import_react8.useCallback)(
+    async (imageFile, type, idToken, publicKey, authServiceBaseUrl) => {
+      if (!imageFile || !idToken) {
+        return {
+          success: false,
+          message: "No image file selected or not authenticated.",
+          url: null,
+          type
+        };
+      }
+      try {
+        const base64Image = await prepareImage(imageFile);
+        const payload = {
+          appPubKey: publicKey,
+          imageData: base64Image,
+          imageName: imageFile.name.split(".")[0]
+        };
+        const response = await fetch(`${authServiceBaseUrl}/process-image`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${idToken}`
+          },
+          body: JSON.stringify(payload)
+        });
+        const data = await response.json();
+        if (response.ok) {
+          return {
+            success: true,
+            message: "Image uploaded successfully.",
+            url: data.ipfsUrl,
+            type
+          };
+        } else {
+          return {
+            success: false,
+            message: "Image failed to upload.",
+            url: null,
+            type
+          };
+        }
+      } catch (error) {
+        return {
+          success: false,
+          message: `An error occurred during image upload: ${error.message}`,
+          url: null,
+          type
+        };
+      }
+    },
+    []
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useAddAnymalToDatabase,
   useDeleteAnymalFromDatabase,
+  useFetchBalance,
   useMintAnymalNFT,
   useSaveAnymalMetadata,
+  useUpdateAnymalWithNFT,
+  useUploadAnymalImage,
   useVerifyAccount
 });

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/utils/useVerifyAccount.ts
+// src/utils/account/useVerifyAccount.ts
 import { useCallback } from "react";
 import { encodeFunctionData, parseGwei } from "viem";
 
@@ -559,7 +559,7 @@ var VERIFY_ACCOUNT_ABI = [
   }
 ];
 
-// src/utils/useVerifyAccount.ts
+// src/utils/account/useVerifyAccount.ts
 function useVerifyAccount() {
   return useCallback(
     async (pid, dbAuthToken, bundlerClient, smartAccount, accountRewardsContractAddress) => {
@@ -776,10 +776,196 @@ function useSaveAnymalMetadata() {
     []
   );
 }
+
+// src/utils/anymals/useUpdateAnymalWithNFT.ts
+import { useCallback as useCallback6 } from "react";
+function useUpdateAnymalWithNFT() {
+  return useCallback6(
+    async (anymalPassportId, anymalDocId, dbAuthToken, endpoint) => {
+      if (!dbAuthToken || !anymalPassportId || !anymalDocId || !endpoint) {
+        return {
+          success: false
+        };
+      }
+      try {
+        const mutation = `
+          mutation {
+            update_Anymal(
+              docID: [${JSON.stringify(anymalDocId)}],
+              input: {
+                passportID: "${anymalPassportId}"
+              }
+            ) {
+              passportID
+            }
+          }
+        `;
+        const response = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${dbAuthToken}`
+          },
+          body: JSON.stringify({ query: mutation })
+        });
+        if (!response.ok) {
+          return { success: false };
+        }
+        const { errors } = await response.json();
+        if (errors) {
+          console.log(`GQL error: ${JSON.stringify(errors)}`);
+          return { success: false };
+        }
+        return { success: true };
+      } catch (error) {
+        console.error("Error updating Anymal with NFT ID:", error);
+        return { success: false };
+      }
+    },
+    []
+  );
+}
+
+// src/utils/balance/useFetchBalance.ts
+import { useCallback as useCallback7 } from "react";
+import { erc20Abi, getAddress } from "viem";
+function useFetchBalance() {
+  return useCallback7(
+    async (publicClient, walletAddress, kibbleTokenAddress) => {
+      try {
+        const balance = await publicClient.readContract({
+          address: getAddress(kibbleTokenAddress),
+          abi: erc20Abi,
+          functionName: "balanceOf",
+          args: [getAddress(walletAddress)]
+        });
+        return Number(balance);
+      } catch (error) {
+        console.error("Failed to fetch token balance:", error);
+      }
+    },
+    []
+  );
+}
+
+// src/utils/anymals/useUploadAnymalImage.ts
+import { useCallback as useCallback8 } from "react";
+
+// src/helpers/UploadImageHelper.tsx
+function resizeImage(file, maxWidth = 800, maxHeight = 800, quality = 0.7) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = URL.createObjectURL(file);
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Failed to get canvas 2D context"));
+        return;
+      }
+      let width = img.width;
+      let height = img.height;
+      if (width > height) {
+        if (width > maxWidth) {
+          height = Math.round(height *= maxWidth / width);
+          width = maxWidth;
+        }
+      } else {
+        if (height > maxHeight) {
+          width = Math.round(width *= maxHeight / height);
+          height = maxHeight;
+        }
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+      canvas.toBlob(
+        (blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("Image compression failed."));
+        },
+        "image/jpeg",
+        quality
+      );
+    };
+    img.onerror = () => reject(new Error("Failed to load image."));
+  });
+}
+async function prepareImage(imageFile) {
+  const compressedFile = await resizeImage(imageFile);
+  return toBase64(compressedFile);
+}
+function toBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result.split(",")[1]);
+    reader.onerror = (error) => reject(error);
+  });
+}
+
+// src/utils/anymals/useUploadAnymalImage.ts
+function useUploadAnymalImage() {
+  return useCallback8(
+    async (imageFile, type, idToken, publicKey, authServiceBaseUrl) => {
+      if (!imageFile || !idToken) {
+        return {
+          success: false,
+          message: "No image file selected or not authenticated.",
+          url: null,
+          type
+        };
+      }
+      try {
+        const base64Image = await prepareImage(imageFile);
+        const payload = {
+          appPubKey: publicKey,
+          imageData: base64Image,
+          imageName: imageFile.name.split(".")[0]
+        };
+        const response = await fetch(`${authServiceBaseUrl}/process-image`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${idToken}`
+          },
+          body: JSON.stringify(payload)
+        });
+        const data = await response.json();
+        if (response.ok) {
+          return {
+            success: true,
+            message: "Image uploaded successfully.",
+            url: data.ipfsUrl,
+            type
+          };
+        } else {
+          return {
+            success: false,
+            message: "Image failed to upload.",
+            url: null,
+            type
+          };
+        }
+      } catch (error) {
+        return {
+          success: false,
+          message: `An error occurred during image upload: ${error.message}`,
+          url: null,
+          type
+        };
+      }
+    },
+    []
+  );
+}
 export {
   useAddAnymalToDatabase,
   useDeleteAnymalFromDatabase,
+  useFetchBalance,
   useMintAnymalNFT,
   useSaveAnymalMetadata,
+  useUpdateAnymalWithNFT,
+  useUploadAnymalImage,
   useVerifyAccount
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anymal-protocol",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",

package/src/helpers/UploadImageHelper.tsx

@@ -0,0 +1,63 @@
+export function resizeImage(
+  file: File,
+  maxWidth = 800,
+  maxHeight = 800,
+  quality = 0.7
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = URL.createObjectURL(file);
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      if (!ctx) {
+        reject(new Error("Failed to get canvas 2D context"));
+        return;
+      }
+
+      let width = img.width;
+      let height = img.height;
+
+      if (width > height) {
+        if (width > maxWidth) {
+          height = Math.round((height *= maxWidth / width));
+          width = maxWidth;
+        }
+      } else {
+        if (height > maxHeight) {
+          width = Math.round((width *= maxHeight / height));
+          height = maxHeight;
+        }
+      }
+
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+
+      canvas.toBlob(
+        (blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("Image compression failed."));
+        },
+        "image/jpeg",
+        quality
+      );
+    };
+    img.onerror = () => reject(new Error("Failed to load image."));
+  });
+}
+
+export async function prepareImage(imageFile: File): Promise<string> {
+  const compressedFile = (await resizeImage(imageFile)) as Blob;
+  return toBase64(compressedFile);
+}
+
+export function toBase64(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve((reader.result as string).split(",")[1]);
+    reader.onerror = (error) => reject(error);
+  });
+}

package/src/index.ts

@@ -1,6 +1,9 @@
-export * from "./utils/useVerifyAccount";
+export * from "./utils/account/useVerifyAccount";
 export * from "./utils/anymals/useMintAnymalNFT";
 export * from "./utils/anymals/useAddAnymalToDatabase";
 export * from "./utils/anymals/useDeleteAnymalFromDatabase";
 export * from "./utils/anymals/useSaveAnymalMetadata";
+export * from "./utils/anymals/useUpdateAnymalWithNFT";
+export * from "./utils/balance/useFetchBalance";
+export * from "./utils/anymals/useUploadAnymalImage";
 export * from "./types/Anymal";

package/src/utils/{useVerifyAccount.ts → account/useVerifyAccount.ts}

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { encodeFunctionData, parseGwei } from "viem";
-import { VERIFY_ACCOUNT_ABI } from "../helpers/BlockchainAbiHelper";
+import { VERIFY_ACCOUNT_ABI } from "../../helpers/BlockchainAbiHelper";
 
 export function useVerifyAccount() {
   return useCallback(

package/src/utils/anymals/useUploadAnymalImage.ts

@@ -0,0 +1,70 @@
+import { useCallback } from "react";
+import { prepareImage } from "../../helpers/UploadImageHelper";
+
+export function useUploadAnymalImage() {
+  return useCallback(
+    async (
+      imageFile: File,
+      type: string,
+      idToken: string,
+      publicKey: string,
+      authServiceBaseUrl: string
+    ) => {
+      if (!imageFile || !idToken) {
+        return {
+          success: false,
+          message: "No image file selected or not authenticated.",
+          url: null,
+          type,
+        };
+      }
+
+      try {
+        const base64Image = await prepareImage(imageFile);
+
+        const payload = {
+          appPubKey: publicKey,
+          imageData: base64Image,
+          imageName: imageFile.name.split(".")[0],
+        };
+
+        const response = await fetch(`${authServiceBaseUrl}/process-image`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${idToken}`,
+          },
+          body: JSON.stringify(payload),
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          return {
+            success: true,
+            message: "Image uploaded successfully.",
+            url: data.ipfsUrl,
+            type,
+          };
+        } else {
+          return {
+            success: false,
+            message: "Image failed to upload.",
+            url: null,
+            type,
+          };
+        }
+      } catch (error) {
+        return {
+          success: false,
+          message: `An error occurred during image upload: ${
+            (error as Error).message
+          }`,
+          url: null,
+          type,
+        };
+      }
+    },
+    []
+  );
+}

package/src/utils/balance/useFetchBalance.ts

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import { erc20Abi, getAddress } from "viem";
+
+export function useFetchBalance() {
+  return useCallback(
+    async (
+      publicClient: any,
+      walletAddress: string,
+      kibbleTokenAddress: string
+    ) => {
+      try {
+        const balance = await publicClient.readContract({
+          address: getAddress(kibbleTokenAddress),
+          abi: erc20Abi,
+          functionName: "balanceOf",
+          args: [getAddress(walletAddress)],
+        });
+
+        return Number(balance);
+      } catch (error) {
+        console.error("Failed to fetch token balance:", error);
+      }
+    },
+    []
+  );
+}