Reset state variables on switching wallets

src/app/page.tsx

@@ -27,6 +27,14 @@ const PaymentModal = dynamic(() => import('@/components/PaymentModal'), { ssr: f
 // RPC endpoint reference: https://docs.gorbagana.wtf/testnet-v2-devnet.html
 const GORBAGANA_GENESIS_HASH = '533uBE9RRquhTBqEX58oV52FdTTsReMdAvaUvP6hNjsn';
 
+// Use following curl request to get Solana chain genesis hash:
+// curl https://api.mainnet-beta.solana.com \
+//   -X POST \
+//   -H "Content-Type: application/json" \
+//   --data '{"jsonrpc":"2.0","id":1,"method":"getGenesisHash"}'
+// RPC endpoint reference: https://solana.com/docs/references/clusters#on-a-high-level
+const SOLANA_GENESIS_HASH = '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdpKuc147dw2N9d';
+
 export default function Home() {
   const { wallet, connected, publicKey, disconnect } = useWallet();
 
@@ -42,7 +50,7 @@ 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);
+  const [incorrectChainWarning, setIncorrectChainWarning] = useState<string | null>(null);
 
   useEffect(() => {
     if (!IS_NAT_GOR_TRANSFER_ENABLED) {
@@ -51,20 +59,32 @@ export default function Home() {
   }, [setSelectedPaymentMethod]);
 
   useEffect(() => {
-    if (!wallet || wallet.adapter.name !== BackpackWalletName || selectedPaymentMethod !== PaymentMethod.NAT_GOR) {
+    setIncorrectChainWarning(null);
+    if (!wallet || wallet.adapter.name !== BackpackWalletName || !connected || !selectedPaymentMethod) {
       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")
+
+      const expectedGenesisHash = selectedPaymentMethod === PaymentMethod.NAT_GOR
+        ? GORBAGANA_GENESIS_HASH
+        : SOLANA_GENESIS_HASH;
+
+      const expectedChainName = selectedPaymentMethod === PaymentMethod.NAT_GOR
+        ? "Gorbagana"
+        : "Solana";
+
+      if (genesisHash !== expectedGenesisHash) {
+        setIncorrectChainWarning(
+          `WARNING: Unsupported chain selected in wallet. Please switch to ${expectedChainName} chain and reconnect the wallet.`
+        );
       }
     }
 
     warnOnIncorrectChain();
-  }, [wallet, selectedPaymentMethod]);
+  }, [wallet, selectedPaymentMethod, connected]);
 
   // Track previous payment method to detect switches
   const previousPaymentMethodRef = useRef<PaymentMethod | null>(null);
@@ -99,7 +119,7 @@ export default function Home() {
     if (selectedPaymentMethod === PaymentMethod.NAT_GOR) {
       return isBackpack; // Only Backpack for native GOR
     } else {
-      return !isBackpack; // Only non-Backpack wallets for SPL tokens
+      return true; // Only non-Backpack wallets for SPL tokens
     }
   };
 
@@ -193,7 +213,7 @@ export default function Home() {
               <div className="text-left">
                 <h3 className="font-semibold text-lg mb-2">{process.env.NEXT_PUBLIC_SOLANA_TOKEN_SYMBOL} Token</h3>
                 <p className="text-xs mt-1" style={{ color: 'var(--muted-foreground)' }}>
-                  Compatible with: Phantom, Solflare
+                  Compatible with: All Solana compatible wallets
                 </p>
               </div>
             </button>
@@ -239,9 +259,9 @@ export default function Home() {
                       Please select a different wallet or payment method.
                     </p>
                   )}
-                  {incorrectChainWarining && (
+                  {incorrectChainWarning && (
                     <p className="text-sm text-amber-400">
-                      {incorrectChainWarining}
+                      {incorrectChainWarning}
                     </p>
                   )}
                   <div className="w-full p-3 rounded-md" style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)' }}>
@@ -287,7 +307,7 @@ export default function Home() {
           </h2>
           <URLForm
             onSubmit={handleUrlSubmit}
-            disabled={!connected || !isWalletCompatible() || status === 'creating'}
+            disabled={!connected || !isWalletCompatible() || status === 'creating' || Boolean(incorrectChainWarning)}
           />
         </div>
 

src/components/URLForm.tsx

@@ -103,7 +103,7 @@ export default function URLForm({ onSubmit, disabled }: URLFormProps) {
           opacity: (disabled || !url) ? '0.7' : '1',
         }}
       >
-        {disabled ? 'Connect Wallet First' : 'Deploy URL'}
+        Deploy URL
       </button>
     </form>
   );