Disable deploy button until wallet network is verified

This commit is contained in:
Nabarun 2025-07-29 20:47:41 +05:30
parent 871958adc1
commit b0b79963a3
2 changed files with 39 additions and 26 deletions

View File

@ -23,10 +23,10 @@ NEXT_PUBLIC_REGISTRY_GQL_ENDPOINT=https://laconicd-mainnet-1.laconic.com/graphql
NEXT_PUBLIC_ALNT_COST_LRN=lrn://laconic/pricing/alnt
NEXT_PUBLIC_DEPLOYMENT_COST_LRN=lrn://laconic/pricing/webapp-deployment
REGISTRY_GAS_PRICE=0.001
REGISTRY_BOND_ID=5d82586d156fb6671a9170d92f930a72a49a29afb45e30e16fff2100e30776e2
REGISTRY_AUTHORITY=laconic-deploy
REGISTRY_BOND_ID=5d82586d156fb6671a9170d92f930a72a49a29afb45e30e16fff2100e30776e2
REGISTRY_USER_KEY=
# Application Configuration
DEPLOYER_LRN=
NEXT_PUBLIC_DOMAIN_SUFFIX=
DEPLOYER_LRN=lrn://vaasl-provider/deployers/webapp-deployer-api.apps.vaasl.io
NEXT_PUBLIC_DOMAIN_SUFFIX=apps.vaasl.io

View File

@ -1,6 +1,6 @@
'use client';
import { useCallback, useEffect, useState, useRef } from 'react';
import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
@ -51,6 +51,7 @@ export default function Home() {
const [repoUrl, setRepoUrl] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [incorrectChainWarning, setIncorrectChainWarning] = useState<string | null>(null);
const [isFetchingChainGenesisHash, setIsFetchingChainGenesisHash] = useState(false);
useEffect(() => {
if (!IS_NAT_GOR_TRANSFER_ENABLED) {
@ -65,21 +66,27 @@ export default function Home() {
}
const warnOnIncorrectChain = async () => {
// @ts-expect-error: backpack exists on window object
const genesisHash = await window.backpack.solana.connection.getGenesisHash();
setIsFetchingChainGenesisHash(true);
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.`
);
try {
// @ts-expect-error: backpack exists on window object
const genesisHash = await window.backpack.solana.connection.getGenesisHash();
const expectedGenesisHash = selectedPaymentMethod === PaymentMethod.NAT_GOR
? GORBAGANA_GENESIS_HASH
: SOLANA_GENESIS_HASH;
const expectedChainName = selectedPaymentMethod === PaymentMethod.NAT_GOR
? "Gorbagana"
: "Solana";
if (genesisHash !== expectedGenesisHash) {
setIncorrectChainWarning(
`Unsupported network selected in wallet. Please switch to network for ${expectedChainName} chain and reconnect the wallet.`
);
}
} finally {
setIsFetchingChainGenesisHash(false);
}
}
@ -110,7 +117,7 @@ export default function Home() {
};
// Helper function to check if current wallet is compatible with selected payment method
const isWalletCompatible = () => {
const isWalletCompatible = useMemo(() => {
if (!selectedPaymentMethod || !wallet) return false;
const walletName = wallet.adapter.name.toLowerCase();
@ -121,7 +128,7 @@ export default function Home() {
} else {
return true; // Only non-Backpack wallets for SPL tokens
}
};
}, [selectedPaymentMethod, wallet]);
const handlePaymentComplete = useCallback(async (hash: string, paymentMethod: PaymentMethod) => {
if (!publicKey || !url) {
@ -245,20 +252,25 @@ export default function Home() {
<div className="flex flex-col items-center space-y-3">
<div className="flex items-center">
<span className="w-3 h-3 rounded-full mr-2" style={{
backgroundColor: isWalletCompatible() ? 'var(--success)' : 'var(--destructive)'
backgroundColor: isWalletCompatible ? 'var(--success)' : 'var(--destructive)'
}}></span>
<p className="font-medium" style={{
color: isWalletCompatible() ? 'var(--success)' : 'var(--destructive)'
color: isWalletCompatible ? 'var(--success)' : 'var(--destructive)'
}}>
{isWalletCompatible() ? 'Compatible' : 'Incompatible'} Wallet ({wallet?.adapter.name})
{isWalletCompatible ? 'Compatible' : 'Incompatible'} Wallet ({wallet?.adapter.name})
</p>
</div>
{!isWalletCompatible() && (
{!isWalletCompatible && (
<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>
)}
{ isFetchingChainGenesisHash && (
<p className="text-sm text-muted-foreground">
Checking wallet network compatibility...
</p>
)}
{incorrectChainWarning && (
<p className="text-sm text-amber-400">
{incorrectChainWarning}
@ -296,18 +308,19 @@ export default function Home() {
</div>
)}
</div>
{/* Step 3: URL Input */}
<div className="mb-8 p-6 rounded-lg" style={{
background: 'var(--muted-light)',
borderLeft: '4px solid var(--primary)',
opacity: (connected && isWalletCompatible()) ? '1' : '0.6'
opacity: (connected && isWalletCompatible) ? '1' : '0.6'
}}>
<h2 className="text-lg font-semibold mb-4 flex items-center">
Enter URL to Deploy
</h2>
<URLForm
onSubmit={handleUrlSubmit}
disabled={!connected || !isWalletCompatible() || status === 'creating' || Boolean(incorrectChainWarning)}
disabled={!connected || !isWalletCompatible || isFetchingChainGenesisHash || status === 'creating' || Boolean(incorrectChainWarning)}
/>
</div>