From 646172c7ddc5e6931f036bd5201da86b973e2274 Mon Sep 17 00:00:00 2001
From: Elias <eliasnemr@gmail.com>
Date: Mon, 10 Feb 2025 19:13:19 +0200
Subject: [PATCH 1/2] Tweaks

---
 .idea/workspace.xml                     |  6 +--
 README.md                               |  1 +
 packages/image/README.md                | 64 ++++++++++++++++++++---
 packages/image/src/components/Image.tsx | 69 ++++++++-----------------
 4 files changed, 82 insertions(+), 58 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f301b3b..af3ce3d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="ee972cf5-fb78-4acc-b7e4-f6c431064e9f" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
-    </list>
+    <list default="true" id="ee972cf5-fb78-4acc-b7e4-f6c431064e9f" name="Changes" comment="" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -33,7 +31,7 @@
     "node.js.selected.package.eslint": "(autodetect)",
     "node.js.selected.package.tslint": "(autodetect)",
     "nodejs_package_manager_path": "pnpm",
-    "ts.external.directory.path": "/Users/eliasnemr/Documents/Github/dev-tools/packages/image/node_modules/typescript/lib",
+    "ts.external.directory.path": "/Users/eliasnemr/Documents/Github/dev-tools/packages/minima-cli/node_modules/typescript/lib",
     "vue.rearranger.settings.migration": "true"
   }
 }]]></component>
diff --git a/README.md b/README.md
index 4c31e90..ec38256 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ This monorepo contains the following packages:
 - [`mds`](./packages/mds) - Core TypeScript library for building type-safe MiniDapps
 - [`create-minima-app`](./packages/create-minima-app) - CLI tool for scaffolding new MiniDapp projects
 - [`minima-cli`](./packages/minima-cli) - Development CLI for managing MiniDapps
+- [`image`](./packages/image) - Tool to manage custom token images
 
 ## Getting Started
 
diff --git a/packages/image/README.md b/packages/image/README.md
index 792c1c5..5af7092 100644
--- a/packages/image/README.md
+++ b/packages/image/README.md
@@ -1,13 +1,65 @@
-# Minima Image Handbook
+# Minima Custom Token Image Processor
 
-This package is made to facilitate image composability across the Minima dApp eco-system.  
+This package is made to facilitate image compatibility across the Minima dApp ecosystem.  It holds both a custom React component, `Image`, and a utility methods that allow you to compress, process and parse custom token images seamlessly.
 
-It has both a re-usable React component labelled `Image` and utility methods that can be used independently especially useful for processing, compressing, and fetching images from various sources, including base64 encodings and IPFS/IPNS.
 
-The `Image` tag that can be imported by `import { Image } from "@minima-global/image"` and then using it like:
+## Installation
 
+Install `image` using your preferred package manager:
 
-` <Image src={(minimaToken.url} /> `
+```bash
+npm install @minima-global/image
+```
 
-Otherwise you can have a look at how the Image component was built using the utility functions in the `/utils` folder part of the package.
+## Features
 
+- Re-usable React Componenet, Image
+- Utility methods that allow you to compress, parse and process custom token images depending on their format
+- It currently handles base64 encoding, IPFS, IPNS and external URLS.
+
+## Documentation
+
+View the full documentation on [docs.minima.global](https://docs.minima.global/docs/development/using-typescript).
+
+## Usage
+
+```tsx
+import { Image } from "@minima-global/image";
+
+... rest of your component
+
+<Image src={customToken.url} />
+```
+
+You can also independently write your own component and use the utility methods to help you do so like,
+
+```tsx
+import { DEFAULT_BASE64_IMAGE, fetchIPFSImage, getBase64Image, isBase64Image, isIPFSOrIPNS, isValidUrl } from "@minima-global/image" // [!code highlight] 
+
+... rest of your component
+
+if (isIPFSOrIPNS(src)) {
+    const ipfsUrl = await fetchIPFSImage(src)
+    return ipfsUrl;
+} else if (isValidUrl(src)) {
+    return src;
+} else if (isBase64Image(src)) {
+    const completeBase64Image = getBase64Image(src)
+    return completeBase64Image
+}
+
+... rest of your component
+```
+
+You can also compress an image to ensure it fits on-chain and doesn't cause issues for you when making transactions
+
+```tsx
+import { compressImage } from "@minima-global/image";
+
+const compressedImage = await compressImage(tokensBase64ImageData);
+```
+
+
+## Contributing
+
+This project is made better by contributors like you, and we welcome contributions of all sizes - from fixing typos, adding new features and fixing types, please open an issue or submit a pull request, but be sure to read the [contributing guidelines](https://github.com/minima-global/dev-tools/blob/main/CONTRIBUTING.md).
diff --git a/packages/image/src/components/Image.tsx b/packages/image/src/components/Image.tsx
index 4addf8a..76f5008 100644
--- a/packages/image/src/components/Image.tsx
+++ b/packages/image/src/components/Image.tsx
@@ -6,13 +6,11 @@ interface ImageProps {
   src: string
   alt?: string
   className?: string
+  loader?: React.ReactNode | false
 }
 
-type ImageType = "on-chain" | "external_url" | "ipfs" | "default"
-
-const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token image" }) => {
+const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token image", loader = false }) => {
   const [imageData, setImageData] = useState(DEFAULT_BASE64_IMAGE)
-  const [imageType, setImageType] = useState<ImageType>("default")
   const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
@@ -21,22 +19,17 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
       if (isIPFSOrIPNS(src)) {
         try {
           const ipfsUrl = await fetchIPFSImage(src)
-          setImageType("ipfs")
           setImageData(ipfsUrl)
         } catch (error) {
           console.error("Failed to fetch IPFS image:", error)
-          setImageType("default")
           setImageData(DEFAULT_BASE64_IMAGE)
         }
       } else if (isValidUrl(src)) {
-        setImageType("external_url")
         setImageData(src)
       } else if (isBase64Image(src)) {
         const completeBase64Image = getBase64Image(src)
-        setImageType("on-chain")
         setImageData(completeBase64Image)
       } else {
-        setImageType("default")
         setImageData(DEFAULT_BASE64_IMAGE)
       }
       setIsLoading(false)
@@ -45,23 +38,6 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
     processImageSource()
   }, [src])
 
-  const getWrapperStyle = (): React.CSSProperties => {
-    const baseStyle: React.CSSProperties = {
-      position: "relative",
-      overflow: "hidden",
-    }
-
-    switch (imageType) {
-      case "on-chain":
-        return { ...baseStyle, width: "50px", height: "50px" }
-      case "external_url":
-      case "ipfs":
-        return { ...baseStyle, width: "100%", maxWidth: "300px", height: "300px" }
-      default:
-        return { ...baseStyle, width: "100px", height: "100px" }
-    }
-  }
-
   const loadingStyle: React.CSSProperties = {
     position: "absolute",
     top: 0,
@@ -75,30 +51,27 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
     animation: "pulse 1.5s infinite ease-in-out",
   }
 
-  const imageStyle: React.CSSProperties = {
-    width: "100%",
-    height: "100%",
-    objectFit: "contain",
-    padding: imageType === "on-chain" ? "4px" : "0",
-  }
-
   return (
-      <div style={getWrapperStyle()} className={className}>
+      <>
         {isLoading ? (
-            <div style={loadingStyle}>
-              <div
-                  style={{
-                    width: "20px",
-                    height: "20px",
-                    borderRadius: "50%",
-                    border: "2px solid #e2e8f0",
-                    borderTopColor: "#3b82f6",
-                    animation: "spin 1s linear infinite",
-                  }}
-              />
-            </div>
+            <>
+              {!loader &&
+                  <div style={loadingStyle}>
+                    <div
+                        style={{
+                          width: "20px",
+                          height: "20px",
+                          borderRadius: "50%",
+                          border: "2px solid #e2e8f0",
+                          borderTopColor: "#3b82f6",
+                          animation: "spin 1s linear infinite",
+                        }}
+                    /></div>}
+
+              {loader && loader}
+            </>
         ) : (
-            <img src={imageData || "/placeholder.svg"} alt={alt} style={imageStyle} />
+            <img src={imageData || "/placeholder.svg"} alt={alt} className={className} />
         )}
         <style>{`
         @keyframes pulse {
@@ -110,7 +83,7 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
           100% { transform: rotate(360deg); }
         }
       `}</style>
-      </div>
+      </>
   )
 }
 

From 5f5ead6aa843377f66a1f080862fe8294a8e3ebf Mon Sep 17 00:00:00 2001
From: Elias <eliasnemr@gmail.com>
Date: Mon, 10 Feb 2025 19:15:03 +0200
Subject: [PATCH 2/2] Tweaks

---
 README.md                               |  1 -
 packages/image/README.md                | 64 +++--------------------
 packages/image/src/components/Image.tsx | 69 +++++++++++++++++--------
 3 files changed, 54 insertions(+), 80 deletions(-)

diff --git a/README.md b/README.md
index ec38256..4c31e90 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,6 @@ This monorepo contains the following packages:
 - [`mds`](./packages/mds) - Core TypeScript library for building type-safe MiniDapps
 - [`create-minima-app`](./packages/create-minima-app) - CLI tool for scaffolding new MiniDapp projects
 - [`minima-cli`](./packages/minima-cli) - Development CLI for managing MiniDapps
-- [`image`](./packages/image) - Tool to manage custom token images
 
 ## Getting Started
 
diff --git a/packages/image/README.md b/packages/image/README.md
index 5af7092..792c1c5 100644
--- a/packages/image/README.md
+++ b/packages/image/README.md
@@ -1,65 +1,13 @@
-# Minima Custom Token Image Processor
+# Minima Image Handbook
 
-This package is made to facilitate image compatibility across the Minima dApp ecosystem.  It holds both a custom React component, `Image`, and a utility methods that allow you to compress, process and parse custom token images seamlessly.
+This package is made to facilitate image composability across the Minima dApp eco-system.  
 
+It has both a re-usable React component labelled `Image` and utility methods that can be used independently especially useful for processing, compressing, and fetching images from various sources, including base64 encodings and IPFS/IPNS.
 
-## Installation
+The `Image` tag that can be imported by `import { Image } from "@minima-global/image"` and then using it like:
 
-Install `image` using your preferred package manager:
 
-```bash
-npm install @minima-global/image
-```
+` <Image src={(minimaToken.url} /> `
 
-## Features
+Otherwise you can have a look at how the Image component was built using the utility functions in the `/utils` folder part of the package.
 
-- Re-usable React Componenet, Image
-- Utility methods that allow you to compress, parse and process custom token images depending on their format
-- It currently handles base64 encoding, IPFS, IPNS and external URLS.
-
-## Documentation
-
-View the full documentation on [docs.minima.global](https://docs.minima.global/docs/development/using-typescript).
-
-## Usage
-
-```tsx
-import { Image } from "@minima-global/image";
-
-... rest of your component
-
-<Image src={customToken.url} />
-```
-
-You can also independently write your own component and use the utility methods to help you do so like,
-
-```tsx
-import { DEFAULT_BASE64_IMAGE, fetchIPFSImage, getBase64Image, isBase64Image, isIPFSOrIPNS, isValidUrl } from "@minima-global/image" // [!code highlight] 
-
-... rest of your component
-
-if (isIPFSOrIPNS(src)) {
-    const ipfsUrl = await fetchIPFSImage(src)
-    return ipfsUrl;
-} else if (isValidUrl(src)) {
-    return src;
-} else if (isBase64Image(src)) {
-    const completeBase64Image = getBase64Image(src)
-    return completeBase64Image
-}
-
-... rest of your component
-```
-
-You can also compress an image to ensure it fits on-chain and doesn't cause issues for you when making transactions
-
-```tsx
-import { compressImage } from "@minima-global/image";
-
-const compressedImage = await compressImage(tokensBase64ImageData);
-```
-
-
-## Contributing
-
-This project is made better by contributors like you, and we welcome contributions of all sizes - from fixing typos, adding new features and fixing types, please open an issue or submit a pull request, but be sure to read the [contributing guidelines](https://github.com/minima-global/dev-tools/blob/main/CONTRIBUTING.md).
diff --git a/packages/image/src/components/Image.tsx b/packages/image/src/components/Image.tsx
index 76f5008..4addf8a 100644
--- a/packages/image/src/components/Image.tsx
+++ b/packages/image/src/components/Image.tsx
@@ -6,11 +6,13 @@ interface ImageProps {
   src: string
   alt?: string
   className?: string
-  loader?: React.ReactNode | false
 }
 
-const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token image", loader = false }) => {
+type ImageType = "on-chain" | "external_url" | "ipfs" | "default"
+
+const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token image" }) => {
   const [imageData, setImageData] = useState(DEFAULT_BASE64_IMAGE)
+  const [imageType, setImageType] = useState<ImageType>("default")
   const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
@@ -19,17 +21,22 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
       if (isIPFSOrIPNS(src)) {
         try {
           const ipfsUrl = await fetchIPFSImage(src)
+          setImageType("ipfs")
           setImageData(ipfsUrl)
         } catch (error) {
           console.error("Failed to fetch IPFS image:", error)
+          setImageType("default")
           setImageData(DEFAULT_BASE64_IMAGE)
         }
       } else if (isValidUrl(src)) {
+        setImageType("external_url")
         setImageData(src)
       } else if (isBase64Image(src)) {
         const completeBase64Image = getBase64Image(src)
+        setImageType("on-chain")
         setImageData(completeBase64Image)
       } else {
+        setImageType("default")
         setImageData(DEFAULT_BASE64_IMAGE)
       }
       setIsLoading(false)
@@ -38,6 +45,23 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
     processImageSource()
   }, [src])
 
+  const getWrapperStyle = (): React.CSSProperties => {
+    const baseStyle: React.CSSProperties = {
+      position: "relative",
+      overflow: "hidden",
+    }
+
+    switch (imageType) {
+      case "on-chain":
+        return { ...baseStyle, width: "50px", height: "50px" }
+      case "external_url":
+      case "ipfs":
+        return { ...baseStyle, width: "100%", maxWidth: "300px", height: "300px" }
+      default:
+        return { ...baseStyle, width: "100px", height: "100px" }
+    }
+  }
+
   const loadingStyle: React.CSSProperties = {
     position: "absolute",
     top: 0,
@@ -51,27 +75,30 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
     animation: "pulse 1.5s infinite ease-in-out",
   }
 
+  const imageStyle: React.CSSProperties = {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+    padding: imageType === "on-chain" ? "4px" : "0",
+  }
+
   return (
-      <>
+      <div style={getWrapperStyle()} className={className}>
         {isLoading ? (
-            <>
-              {!loader &&
-                  <div style={loadingStyle}>
-                    <div
-                        style={{
-                          width: "20px",
-                          height: "20px",
-                          borderRadius: "50%",
-                          border: "2px solid #e2e8f0",
-                          borderTopColor: "#3b82f6",
-                          animation: "spin 1s linear infinite",
-                        }}
-                    /></div>}
-
-              {loader && loader}
-            </>
+            <div style={loadingStyle}>
+              <div
+                  style={{
+                    width: "20px",
+                    height: "20px",
+                    borderRadius: "50%",
+                    border: "2px solid #e2e8f0",
+                    borderTopColor: "#3b82f6",
+                    animation: "spin 1s linear infinite",
+                  }}
+              />
+            </div>
         ) : (
-            <img src={imageData || "/placeholder.svg"} alt={alt} className={className} />
+            <img src={imageData || "/placeholder.svg"} alt={alt} style={imageStyle} />
         )}
         <style>{`
         @keyframes pulse {
@@ -83,7 +110,7 @@ const Image: React.FC<ImageProps> = ({ src, className = "", alt = "Custom token
           100% { transform: rotate(360deg); }
         }
       `}</style>
-      </>
+      </div>
   )
 }