Show warning if gorbagana chain not selected in wallet

src/app/page.tsx

@@ -1,23 +1,26 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
 import { useWallet } from '@solana/wallet-adapter-react';
+import { BackpackWalletName } from '@solana/wallet-adapter-backpack';
 
 import URLForm from '@/components/URLForm';
 import StatusDisplay from '@/components/StatusDisplay';
 import { createApplicationDeploymentRequest } from '@/services/registry';
 import { PaymentMethod, PAYMENT_METHOD_LABELS } from '@/constants/payments';
-
 import { usePaymentMethod } from '@/contexts/PaymentMethodContext';
 
 // Dynamically import components to avoid SSR issues with browser APIs
 const PaymentModal = dynamic(() => import('@/components/PaymentModal'), { ssr: false });
 
+const GORBAGANA_GENESIS_HASH = '533uBE9RRquhTBqEX58oV52FdTTsReMdAvaUvP6hNjsn';
+
 export default function Home() {
-  const { wallet, connected, publicKey } = useWallet();
+  const { wallet, connected, publicKey, disconnect } = useWallet();
+
   const { selectedPaymentMethod, setSelectedPaymentMethod } = usePaymentMethod();
   const [url, setUrl] = useState<string | null>(null);
   const [showPaymentModal, setShowPaymentModal] = useState(false);
@@ -30,6 +33,31 @@ export default function Home() {
   const [appName, setAppName] = useState<string | null>(null);
   const [repoUrl, setRepoUrl] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [incorrectChainWarining, setIncorrectChainWarining] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!wallet || wallet.adapter.name !== BackpackWalletName) {
+      return;
+    }
+
+    const warnOnIncorrectChain = async () => {
+      // @ts-expect-error: backpack exists on window object
+      const genesisHash = await window.backpack.solana.connection.getGenesisHash();
+      if (genesisHash !== GORBAGANA_GENESIS_HASH) {
+        setIncorrectChainWarining("WARNING: Unsupported chain selected in wallet. Please switch to Gorbagana chain")
+      }
+    }
+
+    warnOnIncorrectChain();
+  }, [wallet]);
+
+  useEffect(() => {
+    if (selectedPaymentMethod === null) {
+      return;
+    }
+
+    disconnect();
+  }, [selectedPaymentMethod, disconnect]);
 
   const handleUrlSubmit = (submittedUrl: string) => {
     setUrl(submittedUrl);
@@ -183,11 +211,16 @@ export default function Home() {
                     </p>
                   </div>
                   {!isWalletCompatible() && (
-                    <p className="text-sm" style={{ color: 'var(--destructive)' }}>
+                    <p className="text-sm text-amber-400">
                       This wallet is not compatible with {PAYMENT_METHOD_LABELS[selectedPaymentMethod]} payments.
                       Please select a different wallet or payment method.
                     </p>
                   )}
+                  {incorrectChainWarining && (
+                    <p className="text-sm text-amber-400">
+                      {incorrectChainWarining}
+                    </p>
+                  )}
                   <div className="w-full p-3 rounded-md" style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)' }}>
                     <p className="text-sm font-mono break-all text-center">{publicKey.toBase58()}</p>
                   </div>