Update vercel configuration

Author: neuralflux-ai

src/pages/_app.tsx

@@ -1,13 +1,10 @@
 import { AppProps } from 'next/app';
-import { useState, useEffect, useMemo } from 'react';
-import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
+import { useState, useEffect } from 'react';
+import { ConnectionProvider } from '@solana/wallet-adapter-react';
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
-import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';
-import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
 import { clusterApiUrl } from '@solana/web3.js';
+import { WalletProvider } from '@/web3/WalletProvider';
 import '@/styles/globals.css';
-// 默认样式
-import '@solana/wallet-adapter-react-ui/styles.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [isClient, setIsClient] = useState(false);
@@ -18,29 +15,18 @@ function MyApp({ Component, pageProps }: AppProps) {
   }, []);
 
   // 只有在客户端才创建这些对象
-  const endpoint = useMemo(() => {
-    console.log("Creating endpoint");
-    return clusterApiUrl(WalletAdapterNetwork.Devnet);
-  }, []);
-
-  // 使用Phantom钱包适配器
-  const wallets = useMemo(() => {
-    console.log("Creating wallet adapters");
-    return [new PhantomWalletAdapter()];
-  }, []);
+  const endpoint = process.env.NEXT_PUBLIC_SOLANA_RPC_HOST || clusterApiUrl(WalletAdapterNetwork.Devnet);
 
   if (!isClient) {
     return null;
   }
 
-  console.log("Rendering with wallet providers");
+  console.log("Rendering with wallet provider");
 
   return (
     <ConnectionProvider endpoint={endpoint}>
-      <WalletProvider wallets={wallets}>
-        <WalletModalProvider>
-          <Component {...pageProps} />
-        </WalletModalProvider>
+      <WalletProvider>
+        <Component {...pageProps} />
       </WalletProvider>
     </ConnectionProvider>
   );

src/pages/mint.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { useWallet } from '@/web3/WalletContext';
+import { useWallet } from '@/web3/WalletProvider';
 import Link from 'next/link';
 
 // Mock NFT minting function

src/web3/WalletContext.tsx

@@ -0,0 +1,124 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { PublicKey } from "@solana/web3.js";
+
+// Define phantom wallet type without extending Window
+type PhantomWallet = {
+  isPhantom?: boolean;
+  connect: () => Promise<{ publicKey: { toString: () => string } }>;
+  disconnect: () => Promise<void>;
+  on: (event: string, callback: () => void) => void;
+  removeListener: (event: string, callback: () => void) => void;
+};
+
+// Helper function to get phantom wallet
+const getPhantomWallet = (): PhantomWallet | undefined => {
+  if (typeof window !== "undefined") {
+    return (window as any).solana;
+  }
+  return undefined;
+};
+
+type WalletContextType = {
+  wallet: PhantomWallet | undefined;
+  publicKey: string | null;
+  connected: boolean;
+  connecting: boolean;
+  connectWallet: () => Promise<void>;
+  disconnectWallet: () => Promise<void>;
+};
+
+const WalletContext = createContext<WalletContextType>({
+  wallet: undefined,
+  publicKey: null,
+  connected: false,
+  connecting: false,
+  connectWallet: async () => {},
+  disconnectWallet: async () => {},
+});
+
+export const useWallet = () => useContext(WalletContext);
+
+type WalletProviderProps = {
+  children: ReactNode;
+};
+
+export const WalletProvider: React.FC<WalletProviderProps> = ({ children }) => {
+  const [wallet, setWallet] = useState<PhantomWallet | undefined>(undefined);
+  const [publicKey, setPublicKey] = useState<string | null>(null);
+  const [connected, setConnected] = useState<boolean>(false);
+  const [connecting, setConnecting] = useState<boolean>(false);
+
+  useEffect(() => {
+    const phantom = getPhantomWallet();
+    setWallet(phantom);
+
+    // Handle account changes
+    const onAccountChange = () => {
+      if (wallet && wallet.isPhantom) {
+        const key = (wallet as any).publicKey?.toString();
+        setPublicKey(key || null);
+        setConnected(!!key);
+      }
+    };
+
+    if (phantom) {
+      phantom.on("accountChanged", onAccountChange);
+      phantom.on("connect", onAccountChange);
+      phantom.on("disconnect", () => {
+        setPublicKey(null);
+        setConnected(false);
+      });
+    }
+
+    return () => {
+      if (phantom) {
+        phantom.removeListener("accountChanged", onAccountChange);
+        phantom.removeListener("connect", onAccountChange);
+        phantom.removeListener("disconnect", () => {
+          setPublicKey(null);
+          setConnected(false);
+        });
+      }
+    };
+  }, [wallet]);
+
+  const connectWallet = async (): Promise<void> => {
+    if (!wallet) return;
+    try {
+      setConnecting(true);
+      const response = await wallet.connect();
+      setPublicKey(response.publicKey.toString());
+      setConnected(true);
+    } catch (error) {
+      console.error("Connection error:", error);
+    } finally {
+      setConnecting(false);
+    }
+  };
+
+  const disconnectWallet = async (): Promise<void> => {
+    if (!wallet) return;
+    try {
+      await wallet.disconnect();
+      setPublicKey(null);
+      setConnected(false);
+    } catch (error) {
+      console.error("Disconnection error:", error);
+    }
+  };
+
+  return (
+    <WalletContext.Provider
+      value={{
+        wallet,
+        publicKey,
+        connected,
+        connecting,
+        connectWallet,
+        disconnectWallet,
+      }}
+    >
+      {children}
+    </WalletContext.Provider>
+  );
+}; 

src/web3/WalletProvider.tsx

@@ -0,0 +1,17 @@
+{
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/next"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "/$1"
+    }
+  ],
+  "github": {
+    "silent": true
+  }
+}