dominant color extraction for bakcgrounds

softstack · May 7, 2024 · 230c7bf · 230c7bf
1 parent 30094b2
commit 230c7bf
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
         "@walletconnect/universal-provider": "^2.12.2",
         "@web3modal/ethers": "^4.1.1",
         "axios": "^1.6.8",
-        "colorthief": "^2.4.0",
+        "color-thief-react": "^2.1.0",
         "dotenv": "^16.4.5",
         "ethers": "^6.11.1",
         "react": "^18.2.0",

diff --git a/src/components/connectOverlay/NetworkBadge.tsx b/src/components/connectOverlay/NetworkBadge.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-// import { getColorFromURL } from 'color-thief-node';
+import React, { useEffect } from 'react';
 
 type Props = {
     network: string;
@@ -15,18 +13,78 @@ const NetworkBadge: React.FC<Props> = ({
     selected,
     callback,
 }) => {
-    // const getNetworkColor = async () => {
-    //     const color = await getColorFromURL(icon);
-    //     console.log(color);
-    //     return color;
-    // };
+    const getDominantColor = async (imageUrl: string): Promise<string> => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.src = imageUrl;
+            img.crossOrigin = 'Anonymous';
+
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+
+                if (!ctx) {
+                    reject('Unable to get canvas context');
+                    return;
+                }
+
+                canvas.width = img.width;
+                canvas.height = img.height;
+                ctx.drawImage(img, 0, 0, img.width, img.height);
+
+                const imageData = ctx.getImageData(
+                    0,
+                    0,
+                    canvas.width,
+                    canvas.height
+                );
+                const data = imageData.data;
+                const colorCount: Record<string, number> = {};
+
+                for (let i = 0; i < data.length; i += 4) {
+                    const color = `${data[i]},${data[i + 1]},${data[i + 2]}`;
+                    if (colorCount[color]) {
+                        colorCount[color]++;
+                    } else {
+                        colorCount[color] = 1;
+                    }
+                }
+
+                let dominantColor = '';
+                let maxCount = 0;
+
+                for (const [color, count] of Object.entries(colorCount)) {
+                    if (count > maxCount) {
+                        maxCount = count;
+                        dominantColor = color;
+                    }
+                }
+
+                // Convert the dominant color from RGB string to RGBA string with 50% opacity
+                const rgbaColor = `rgba(${dominantColor}, 0.5)`;
+
+                resolve(rgbaColor);
+            };
+
+            img.onerror = () => reject('Image load error');
+        });
+    };
+    let backgroundColorSelected = '';
+
+    useEffect(() => {
+        getDominantColor(icon).then((color) => {
+            if (color === 'rgba(0,0,0, 0.5)') return;
+            console.log('Dominant color:', color);
+            backgroundColorSelected = color;
+        });
+    }, [icon]);
 
     return (
         <div
             onClick={callback}
-            className={`flex flex-col items-center justify-center text-customBlackText rounded-lg p-2 ${
-                selected ? `bg-customBlueSelected` : ''
-            }`}
+            className={`flex flex-col items-center justify-center text-customBlackText rounded-lg p-2 
+            ${selected ? 'bg-customBlueSelected' : ''}
+            `}
         >
             <img className="w-11 h-11" src={icon} alt="" />
             <p>{network}</p>