Refactor UI layout in ConnectOverlay.tsx and NetworkBadge.tsx, update…

… wallet selection logic, and add network badges
softstack · May 3, 2024 · 73733a2 · 73733a2
1 parent a64adb0
commit 73733a2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -41,7 +41,6 @@ const ConnectOverlay: React.FC<Props> = ({
         setWalletsExpanded(!walletsExpanded);
     };
 
-    // !!!!!!!!!
     const [connecting, setConnecting] = useState<boolean>(false);
 
     // connect function
@@ -52,8 +51,6 @@ const ConnectOverlay: React.FC<Props> = ({
             window.localStorage.removeItem('walletconnect');
             window.localStorage.removeItem('WALLETCONNECT_DEEPLINK_CHOICE');
 
-            console.log(BRIDGE_URL);
-
             const response = await axios.post(BRIDGE_URL + '/init-provider');
             const providerId = response.data.providerId;
 
@@ -104,8 +101,29 @@ const ConnectOverlay: React.FC<Props> = ({
         }
     };
 
+    // Network Selection
+    const [ethereumSelected, setEthereumSelected] = useState(true);
+    const [polygonSelected, setPolygonSelected] = useState(false);
+    const [avalancheSelected, setAvalancheSelected] = useState(false);
+
     // Toggle Wallets
-    const showAvailableWallets = () => {
+    const showAvailableWallets = (network: string) => {
+        if (network === 'ethereum') {
+            setEthereumSelected(true);
+            setPolygonSelected(false);
+            setAvalancheSelected(false);
+        }
+        if (network === 'polygon') {
+            setEthereumSelected(false);
+            setPolygonSelected(true);
+            setAvalancheSelected(false);
+        }
+        if (network === 'avalanche') {
+            setEthereumSelected(false);
+            setPolygonSelected(false);
+            setAvalancheSelected(true);
+        }
+
         setWalletsExpanded(true);
     };
 
@@ -149,17 +167,24 @@ const ConnectOverlay: React.FC<Props> = ({
                             <NetworkBadge
                                 network="Ethereum"
                                 icon={ethereumLogo}
-                                callback={showAvailableWallets}
+                                selected={ethereumSelected}
+                                callback={() =>
+                                    showAvailableWallets('ethereum')
+                                }
                             />
                             <NetworkBadge
                                 network="Polygon"
                                 icon={polygonLogo}
-                                callback={showAvailableWallets}
+                                selected={polygonSelected}
+                                callback={() => showAvailableWallets('polygon')}
                             />
                             <NetworkBadge
                                 network="Avalanche"
                                 icon={avalancheLogo}
-                                callback={showAvailableWallets}
+                                selected={avalancheSelected}
+                                callback={() =>
+                                    showAvailableWallets('avalanche')
+                                }
                             />
                         </div>
                     )}

diff --git a/src/components/connectOverlay/NetworkBadge.tsx b/src/components/connectOverlay/NetworkBadge.tsx
@@ -3,14 +3,22 @@ import React from 'react';
 type Props = {
     network: string;
     icon: string;
+    selected: boolean;
     callback: () => void;
 };
 
-const NetworkBadge: React.FC<Props> = ({ network, icon, callback }) => {
+const NetworkBadge: React.FC<Props> = ({
+    network,
+    icon,
+    selected,
+    callback,
+}) => {
     return (
         <div
             onClick={callback}
-            className="flex flex-col items-center justify-center text-customBlackText"
+            className={`flex flex-col items-center justify-center text-customBlackText rounded-lg ${
+                selected ? 'bg-customBlueSelected' : ''
+            }`}
         >
             <img className="w-11 h-11" src={icon} alt="" />
             <p>{network}</p>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -15,6 +15,7 @@ export default {
                 customGrayAddress: '#707579',
                 customGrayWallet: '#efeff4',
                 customBlackText: '#212121',
+                customBlueSelected: '#B9C1F4',
             },
             gridTemplateColumns: {
                 'custom-1-3-1': '1fr 3fr 1fr',