Update ConnectButton.tsx

Signed-off-by: Aitor Alien <[email protected]>

Author: Alien69Flow

src/components/Header/ConnectButton.tsx

@@ -1,48 +1,98 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
+import { useAppKit, useAppKitModal } from '@reown/appkit';
+
+const WALLET_ICON = "/lovable-uploads/AW.png";
+const PORTAL_ICON_AVIF = "/lovable-uploads/AP1.avif";
+const PORTAL_ICON_JPG = "/lovable-uploads/AP.jpg";
+const ICON_SIZE = "h-7 w-7 sm:h-8 sm:w-8";
+
+const shortAddress = (addr: string) =>
+  addr ? addr.slice(0, 6) + '...' + addr.slice(-4) : '';
 
 const ConnectButton = () => {
-  // Aquí va tu lógica personalizada de conexión de wallet
-  const handleConnectWallet = () => {
-    alert('Conectar Wallet personalizada');
-  };
+  const { open } = useAppKitModal();
+  const { account, disconnect } = useAppKit();
 
   return (
     <div className="flex flex-wrap items-center gap-3">
-      {/* Botón Connect Wallet con animación */}
-      <Button
-        className="
-          bg-alien-green hover:bg-alien-green-light text-alien-gold font-nasalization rounded-full
-          flex items-center gap-2 py-1 px-3 sm:px-4
-          transition-all duration-200 ease-in-out
-          hover:shadow-lg hover:scale-105 focus-visible:ring-2 focus-visible:ring-alien-gold
-        "
-        onClick={handleConnectWallet}
-      >
-        <img
-          src="/lovable-uploads/AW.png"
-          alt="Wallet Logo"
-          className="h-5 w-5 sm:h-6 sm:w-6 rounded-full object-cover"
-        />
-        <span className="font-nasalization whitespace-nowrap">Connect Wallet</span>
-      </Button>
-
-      {/* Botón Connect Portal con animación */}
+      {account?.address ? (
+        <>
+          <span
+            className="
+              text-alien-gold font-mono text-xs sm:text-sm bg-alien-green px-3 py-1 rounded-full
+              border border-alien-gold shadow transition-all duration-200 select-all
+            "
+            title={account.address}
+          >
+            {shortAddress(account.address)}
+          </span>
+          <Button
+            onClick={disconnect}
+            className="
+              bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
+              flex items-center justify-center p-2 sm:p-3
+              transition-all duration-200 ease-in-out
+              hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
+            "
+            title="Desconectar Wallet"
+            aria-label="Desconectar Wallet"
+            type="button"
+          >
+            <svg viewBox="0 0 24 24" fill="none" className="w-5 h-5">
+              <path d="M16 17L21 12M21 12L16 7M21 12H9" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+              <rect x="3" y="4" width="12" height="16" rx="2" stroke="currentColor" strokeWidth="2"/>
+            </svg>
+          </Button>
+        </>
+      ) : (
+        <Button
+          className="
+            bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
+            flex items-center justify-center p-2 sm:p-3
+            transition-all duration-200 ease-in-out
+            hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
+          "
+          onClick={open}
+          title="Conectar Wallet"
+          aria-label="Conectar Wallet"
+          type="button"
+        >
+          <img
+            src={WALLET_ICON}
+            alt="Wallet Logo"
+            className={`${ICON_SIZE} rounded-full object-cover`}
+            draggable={false}
+          />
+        </Button>
+      )}
       <a
         href="https://aliendex.lovable.app/"
         target="_blank"
         rel="noopener noreferrer"
         className="no-underline"
+        title="Connect Portal"
+        aria-label="Connect Portal"
+        tabIndex={-1}
       >
         <Button
           className="
-            bg-alien-green hover:bg-alien-green-light text-alien-gold font-nasalization rounded-full
-            flex items-center gap-2 py-1 px-3 sm:px-4
+            bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
+            flex items-center justify-center p-2 sm:p-3
             transition-all duration-200 ease-in-out
-            hover:shadow-lg hover:scale-105 focus-visible:ring-2 focus-visible:ring-alien-gold
+            hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
           "
+          type="button"
         >
-          <span className="font-nasalization whitespace-nowrap">Connect Portal</span>
+          <picture>
+            <source srcSet={PORTAL_ICON_AVIF} type="image/avif" />
+            <img
+              src={PORTAL_ICON_JPG}
+              alt="Portal Icon"
+              className={`${ICON_SIZE} rounded-full object-cover`}
+              draggable={false}
+            />
+          </picture>
         </Button>
       </a>
     </div>