refactor: Update wallet storage key to 'walletProvider'

softstack · May 8, 2024 · b0fa066 · b0fa066
1 parent 12dd1b7
commit b0fa066
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 70 deletions.
diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -45,8 +45,21 @@ const ConnectOverlay: React.FC<Props> = ({
 
     const [connecting, setConnecting] = useState<boolean>(false);
 
+    const [metaMaskSelected, setMetaMaskSelected] = useState<boolean>(false);
+    const [trustWalletSelected, setTrustWalletSelected] =
+        useState<boolean>(false);
+
     // connect function
     const connectWallet = async (wallet: string) => {
+        if (wallet === 'metamask') {
+            setMetaMaskSelected(true);
+            setTrustWalletSelected(false);
+        }
+        if (wallet === 'trust') {
+            setMetaMaskSelected(false);
+            setTrustWalletSelected(true);
+        }
+
         try {
             setConnecting(true);
 
@@ -213,11 +226,13 @@ const ConnectOverlay: React.FC<Props> = ({
                             <WalletBadge
                                 walletName="Metamask"
                                 icon={metamaskLogo}
+                                selected={metaMaskSelected}
                                 callback={() => connectWallet('metamask')}
                             />
                             <WalletBadge
                                 walletName="Trust Wallet"
                                 icon={trustWalletLogo}
+                                selected={trustWalletSelected}
                                 callback={() => connectWallet('trust')}
                             />
                         </div>
@@ -227,6 +242,7 @@ const ConnectOverlay: React.FC<Props> = ({
                             <WalletBadge
                                 walletName="Trust Wallet"
                                 icon={trustWalletLogo}
+                                selected={trustWalletSelected}
                                 callback={() => connectWallet('trust')}
                             />
                             <WalletBadge

diff --git a/src/components/connectOverlay/NetworkBadge.tsx b/src/components/connectOverlay/NetworkBadge.tsx
@@ -1,4 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { getDominantColor } from '../../utils/dominantColor';
 
 type Props = {
     network: string;
@@ -13,79 +15,26 @@ const NetworkBadge: React.FC<Props> = ({
     selected,
     callback,
 }) => {
-    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 = '';
-
+    const [backgroundColor, setBackgroundColor] = useState('');
     useEffect(() => {
-        getDominantColor(icon).then((color) => {
-            if (color === 'rgba(0,0,0, 0.5)') return;
-            console.log('Dominant color:', color);
-            backgroundColorSelected = color;
-            console.log('Background color:', backgroundColorSelected);
-        });
-    }, [icon]);
+        if (!selected) return;
+
+        getDominantColor(icon)
+            .then((color) => {
+                setBackgroundColor(color);
+            })
+            .catch((error) =>
+                console.error('Failed to load image color:', error)
+            );
+    }, [icon, selected]);
 
     return (
         <div
             onClick={callback}
             className={`flex flex-col items-center justify-center text-customBlackText rounded-lg p-2 
-            ${selected ? 'bg-customBlueSelected' : ''}
+           
             `}
+            style={{ backgroundColor: selected ? backgroundColor : '' }}
         >
             <img className="w-11 h-11" src={icon} alt="" />
             <p>{network}</p>

diff --git a/src/components/connectOverlay/WalletBadge.tsx b/src/components/connectOverlay/WalletBadge.tsx
@@ -1,16 +1,37 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+
+import { getDominantColor } from '../../utils/dominantColor';
 
 type Props = {
     walletName: string;
     icon: string;
+    selected?: boolean;
     callback: () => void;
 };
 
-const WalletBadge: React.FC<Props> = ({ walletName, icon, callback }) => {
+const WalletBadge: React.FC<Props> = ({
+    walletName,
+    icon,
+    selected,
+    callback,
+}) => {
+    const [backgroundColor, setBackgroundColor] = useState('');
+    useEffect(() => {
+        if (!selected) return;
+
+        getDominantColor(icon)
+            .then((color) => {
+                setBackgroundColor(color);
+            })
+            .catch((error) =>
+                console.error('Failed to load image color:', error)
+            );
+    }, [icon, selected]);
     return (
         <div
             onClick={callback}
-            className="flex items-center gap-3 text-customBlackText"
+            className="flex items-center gap-3 rounded-lg p-2 text-customBlackText"
+            style={{ backgroundColor: selected ? backgroundColor : '' }}
         >
             <img className="w-9 h-9" src={icon} alt="" />
             <p>{walletName}</p>

diff --git a/src/utils/dominantColor.ts b/src/utils/dominantColor.ts
@@ -0,0 +1,56 @@
+type ColorCalculationResult = Promise<string>;
+
+export const getDominantColor = (imageUrl: string): ColorCalculationResult => {
+    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;
+                }
+            }
+
+            const rgbaColor = `rgba(${dominantColor}, 0.2)`;
+            resolve(rgbaColor);
+        };
+
+        img.onerror = () => reject('Image load error');
+    });
+};