appkit configuration done

.env

@@ -0,0 +1 @@
+VITE_APPKIT_PROJECT_ID=4394225e3723c52e220bab65ac00f156

package.json

@@ -39,8 +39,9 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
-    "@tanstack/react-query": "^5.56.2",
-    "@reown/appkit": "^1.7.7",
+    "@reown/appkit": "^1.8.6",
+    "@reown/appkit-adapter-wagmi": "^1.8.6",
+    "@tanstack/react-query": "^5.89.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -61,6 +62,8 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.3",
+    "viem": "^2.37.7",
+    "wagmi": "^2.17.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/App.tsx

@@ -1,43 +1,36 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { AppKitProvider } from '@reown/appkit/react';
-import { mainnet, arbitrum, polygon } from '@reown/appkit/networks';
-import Layout from './components/Layout';
-import Index from './pages/Index';
-import About from './pages/About';
-import Academy from './pages/Academy';
-import AlienTrip from './pages/AlienTrip';
-import Clubs from './pages/Clubs';
-import CoNetWorKing from './pages/CoNetWorKing';
-import Contact from './pages/Contact';
-import NotFound from './pages/NotFound';
-import './index.css'; // Solo se importa el archivo final
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Layout from "./components/Layout";
+import Index from "./pages/Index";
+import About from "./pages/About";
+import Academy from "./pages/Academy";
+import AlienTrip from "./pages/AlienTrip";
+import Clubs from "./pages/Clubs";
+import CoNetWorKing from "./pages/CoNetWorKing";
+import Contact from "./pages/Contact";
+import NotFound from "./pages/NotFound";
+import "./index.css"; // Solo se importa el archivo final
+import { AppKitProvider } from "./context/AppkitProvider";
+import WalletContextProvider from "./context/WalletContext";
 
 function App() {
   return (
-    <AppKitProvider
-      projectId="ced40e4d52234c471808977208586c7e"
-      networks={[mainnet, arbitrum, polygon]}
-      metadata={{
-        name: 'Alien World',
-        description: 'Alien World dApp',
-        url: window.location.origin,
-        icons: [`${window.location.origin}/lovable-uploads/ALogo.png`]
-      }}
-    >
-      <Router>
-        <Routes>
-          <Route path="/" element={<Layout />}>
-            <Route index element={<Index />} />
-            <Route path="about" element={<About />} />
-            <Route path="academy" element={<Academy />} />
-            <Route path="alien-trip" element={<AlienTrip />} />
-            <Route path="clubs" element={<Clubs />} />
-            <Route path="conetworking" element={<CoNetWorKing />} />
-            <Route path="contact" element={<Contact />} />
-            <Route path="*" element={<NotFound />} />
-          </Route>
-        </Routes>
-      </Router>
+    <AppKitProvider>
+      <WalletContextProvider>
+        <Router>
+          <Routes>
+            <Route path="/" element={<Layout />}>
+              <Route index element={<Index />} />
+              <Route path="about" element={<About />} />
+              <Route path="academy" element={<Academy />} />
+              <Route path="alien-trip" element={<AlienTrip />} />
+              <Route path="clubs" element={<Clubs />} />
+              <Route path="conetworking" element={<CoNetWorKing />} />
+              <Route path="contact" element={<Contact />} />
+              <Route path="*" element={<NotFound />} />
+            </Route>
+          </Routes>
+        </Router>
+      </WalletContextProvider>
     </AppKitProvider>
   );
 }

src/components/Header/ConnectButton.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
-import { useAppKit } from '@reown/appkit/react';
-import { useAppKitAccount } from '@reown/appkit/react';
-import { useDisconnect } from '@reown/appkit/react';
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { useAppKit } from "@reown/appkit/react";
+import { useAppKitAccount } from "@reown/appkit/react";
+import { useDisconnect } from "@reown/appkit/react";
+import { useWallet } from "@/context/WalletContext";
 
 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) : '';
+  addr ? addr.slice(0, 6) + "..." + addr.slice(-4) : "";
 
 const ConnectButton = () => {
   const { open } = useAppKit();
-  const { address, isConnected } = useAppKitAccount();
-  const { disconnect } = useDisconnect();
+  const { address, isConnected, disconnect, connect } = useWallet();
 
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -43,8 +43,21 @@ const ConnectButton = () => {
             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"/>
+              <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>
         </>
@@ -56,7 +69,7 @@ const ConnectButton = () => {
             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({ view: "Connect" })}
+          onClick={() => connect()}
           title="Conectar Wallet"
           aria-label="Conectar Wallet"
           type="button"

src/context/AppkitProvider.tsx

@@ -0,0 +1,51 @@
+import { createAppKit } from "@reown/appkit/react";
+
+import { WagmiProvider } from "wagmi";
+import { arbitrum, mainnet } from "@reown/appkit/networks";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+
+const queryClient = new QueryClient();
+
+const projectId = import.meta.env.VITE_APPKIT_PROJECT_ID;
+console.log("Project ID:", projectId);
+
+if (!projectId) {
+  throw new Error("APPKIT_PROJECT_ID is not defined in environment variables");
+}
+
+const metadata = {
+  name: "Alien World",
+  description: "Alien World dApp",
+  url: window.location.origin,
+  icons: ["https://avatars.githubusercontent.com/u/179229932"],
+};
+
+// 3. Set the networks
+const networks = [mainnet, arbitrum];
+
+// 4. Create Wagmi Adapter
+const wagmiAdapter = new WagmiAdapter({
+  networks,
+  projectId,
+  ssr: true,
+});
+
+// 5. Create modal
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks,
+  projectId,
+  metadata,
+  features: {
+    analytics: true,
+  },
+});
+
+export function AppKitProvider({ children }) {
+  return (
+    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}

src/context/WalletContext.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React, { createContext, useContext, useMemo } from "react";
+import {
+  useAppKit,
+  useAppKitAccount,
+  useAppKitNetwork,
+} from "@reown/appkit/react";
+import { useAccount, useDisconnect } from "wagmi";
+
+type AppKitContextType = {
+  connect: () => void;
+  disconnect: () => void;
+  address?: string;
+  isConnected: boolean;
+  isDisconnected: boolean;
+  chains: any[]; // you can type this properly once you know chain shape
+  chainId: number | string | undefined;
+};
+
+const AppKitContext = createContext<AppKitContextType | null>(null);
+
+const WalletContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { open, close } = useAppKit();
+  const {
+    address,
+    isConnected: isAppkitConnected,
+    caipAddress,
+    status,
+    embeddedWalletInfo,
+  } = useAppKitAccount();
+
+  const { address: wagmiAddress, isConnected: isWagmiConnected } = useAccount();
+
+  const { chainId } = useAppKitNetwork();
+  const { disconnect } = useDisconnect();
+
+  const isConnected = useMemo(() => {
+    return isWagmiConnected && status === "connected";
+  }, [status, isWagmiConnected]);
+
+  const isDisconnected = useMemo(() => {
+    return !isConnected && status === "disconnected";
+  }, [isConnected, status]);
+
+  const handleConnect = () => {
+    open({ view: "Connect" });
+  };
+
+  const chains = [];
+
+  const handleDisconnect = () => {
+    disconnect();
+  };
+
+  const value: AppKitContextType = {
+    connect: handleConnect,
+    disconnect: handleDisconnect,
+    address: wagmiAddress,
+    isConnected,
+    isDisconnected,
+    chains,
+    chainId,
+  };
+
+  return (
+    <AppKitContext.Provider value={value}>{children}</AppKitContext.Provider>
+  );
+};
+
+export default WalletContextProvider;
+
+// ✅ Hook for consuming context
+export const useWallet = () => {
+  const context = useContext(AppKitContext);
+  if (!context) {
+    throw new Error("useWallet must be used inside WalletContextProvider");
+  }
+  return context;
+};

vite.config.ts

@@ -7,7 +7,7 @@ import { componentTagger } from "lovable-tagger";
 export default defineConfig(({ mode }) => ({
   server: {
     host: "::", // Permitir cualquier conexión
-    port: 8080, // Puerto personalizado
+    port: 3000, // Puerto personalizado
   },
   plugins: [
     react(), // Plugin para React