add phantom

src/app/page.tsx

@@ -5,50 +5,31 @@ import WalletHeader from '../components/WalletHeader'
 import AIServiceCard from '../components/AIServiceCard'
 import { generateWithFlux, FluxGenerationResult, FLUX_MODELS } from '../services/fluxService'
 import { processMTMPayment } from '../services/paymentService'
-
-interface WalletState {
-  connected: boolean
-  publicKey: string | null
-}
-
-declare global {
-  interface Window {
-    solflare: any; // Or use a more specific type if available
-  }
-}
+import { connectWallet, WalletState } from '../services/walletService'
+import { WalletType } from '../services/types'
 
 const Page: React.FC = (): React.ReactElement => {
   const [walletState, setWalletState] = useState<WalletState>({
     connected: false,
     publicKey: null,
+    type: null
   })
 
-  const connectWallet = async (): Promise<void> => {
+ const handleConnect = async (walletType: WalletType): Promise<void> => {
     try {
-      if (typeof window === 'undefined' || !window.solflare) {
-        throw new Error('Solflare wallet not found! Please install it first.')
-      }
-
-      await window.solflare.connect()
-      
-      if (!window.solflare.publicKey) {
-        throw new Error('Failed to connect to wallet')
-      }
-
-      const publicKey: string = window.solflare.publicKey.toString()
-      setWalletState({
-        connected: true,
-        publicKey,
-      })
+      const newWalletState = await connectWallet(walletType)
+      setWalletState(newWalletState)
     } catch (error) {
       console.error('Wallet connection error:', error)
       setWalletState({
         connected: false,
         publicKey: null,
+        type: null
       })
     }
   }
 
+
   const handleFluxGeneration = (modelId: string, cost: number) => {
     return async (prompt: string): Promise<FluxGenerationResult> => {
       if (!walletState.connected || !walletState.publicKey || !window.solflare) {
@@ -59,7 +40,7 @@ const Page: React.FC = (): React.ReactElement => {
       const paymentResult = await processMTMPayment(
         walletState.publicKey,
         cost,
-        window.solflare
+	walletState.type
       )
 
       if (!paymentResult.success) {
@@ -84,10 +65,9 @@ const Page: React.FC = (): React.ReactElement => {
           </p>
           
           <WalletHeader
-            isConnected={walletState.connected}
-            publicKey={walletState.publicKey}
-            onConnect={connectWallet}
-          />
+            walletState={walletState}
+            onConnect={handleConnect}
+	  />
         </div>
 
         {/* Flux Models Grid */}