Window.ethereum не может обнаружить кошельки web3 в мобильном браузере ⇐ Javascript

[Anonymous]

Я работаю с веб-формой ASP.Net, у меня есть страница, содержащая кнопку для оплаты, которая принимает криптовалюту. при нажатии кнопки он подключится к кошельку Web3 пользователя и осуществит платеж продавцу. Я запустил решение, оно работало в настольном браузере, но не работало в мобильном браузере, поскольку не могло обнаружить приложения-кошельки.
Ниже приведен пример моего кода.



body {
font-family: 'Segoe UI', sans-serif;
background-color: #f9fafb;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.payment-box {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
padding: 40px;
width: 360px;
text-align: center;
}

button {
background-color: #2563eb;
color: white;
border: none;
border-radius: 6px;
padding: 10px 18px;
font-size: 15px;
cursor: pointer;
margin: 5px;
}

button:disabled {
background-color: #9ca3af;
}

#status {
margin-top: 15px;
color: #111827;
font-size: 14px;
}

a {
color: #2563eb;
text-decoration: none;
}






Fund with USDC (BEP20)
Amount to Fund: 10 USDC

Connect Wallet

Pay Now




const adminWallet = "0xAdminWalletAddressHere"; // Replace this with your Admin wallet
const usdcTokenAddress = "0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d"; // USDC BEP20
const amountToPay = "10"; // $ USDC
const backendVerifyUrl = "/Payment.aspx/VerifyTransaction"; // C# backend endpoint

let web3;
let userAccount = null;

const connectWalletBtn = document.getElementById("connectWalletBtn");
const payBtn = document.getElementById("payBtn");
const statusText = document.getElementById("status");

// -------------------------------
// 1. Connect Wallet
// -------------------------------
async function getProvider() {
// Wait briefly for wallet injection
if (typeof window.ethereum !== "undefined") {
return window.ethereum; // MetaMask or TrustWallet (newer versions)
}

if (typeof window.trustwallet !== "undefined") {
return window.trustwallet; // Older Trust Wallet versions
}

if (typeof window.BestWallet !== "undefined") {
return window.BestWallet; // Best Wallet (if it injects this object)
}

// Wait up to 2s for delayed injection (some mobile wallets)
return new Promise(resolve => {
const check = setInterval(() => {
if (window.ethereum || window.trustwallet || window.BestWallet) {
clearInterval(check);
resolve(window.ethereum || window.trustwallet || window.BestWallet);
}
}, 200);
setTimeout(() => {
clearInterval(check);
resolve(null);
}, 2000);
});
}

connectWalletBtn.onclick = async function () {
const provider = await getProvider();

if (provider) {
try {
const web3 = new Web3(provider);
await provider.request({ method: 'eth_requestAccounts' });
const accounts = await web3.eth.getAccounts();
userAccount = accounts[0]; // stored globally
statusText.innerText = ` Connected: ${userAccount}`;
payBtn.disabled = false;
} catch (err) {
console.error(err);
statusText.innerText = " Wallet connection failed!";
}
} else {
alert("No wallet detected. Please open this page in Trust Wallet, Best Wallet, or install MetaMask.");
}
};

// -------------------------------
// 2. Send USDC Payment
// -------------------------------
payBtn.onclick = async function () {
if (!userAccount) {
alert("Please connect your wallet first!");
return;
}

try
{

statusText.innerText = "Preparing USDC transaction...";

const tokenABI = [
{
"constant": false,
"inputs": [
{ "name": "_to", "type": "address" },
{ "name": "_value", "type": "uint256" }
],
"name": "transfer",
"outputs": [{ "name": "", "type": "bool" }],
"type": "function"
}

];

const tokenContract = new web3.eth.Contract(tokenABI, usdcTokenAddress);
const value = web3.utils.toBN(web3.utils.toWei(amountToPay, 'ether'));

// Check balance
const balance = await tokenContract.methods.balanceOf(userAccount).call();
if (web3.utils.toBN(balance).lt(value)) {
alert(" Insufficient USDC balance.");
return;
}

statusText.innerText = "Please confirm the transaction in your wallet...";

const tx = await tokenContract.methods.transfer(adminWallet, value)
.send({ from: userAccount });

console.log(" Transaction hash:", tx.transactionHash);

statusText.innerHTML = `
Payment Sent!


View Transaction on BscScan

Verifying transaction...
`;

// -------------------------------
// 3. Send TX Hash to Backend for Verification
// -------------------------------
const response = await fetch(backendVerifyUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ txHash: tx.transactionHash })
});

const result = await response.json();
const res = JSON.parse(result.d); // ASP.NET WebMethod returns JSON as string

if (res.status === "success") {
statusText.innerHTML += `
Verified: Payment Successful`;
} else {
statusText.innerHTML += `
Verification Failed: ${res.message}`;
}

} catch (error) {
console.error(error);
statusText.innerText = " Transaction failed or cancelled.";
}
};

```

Please, any idea on how I can modify my code to be able to Detect web3 Wallets on Mobile browsers.


Подробнее здесь: https://stackoverflow.com/questions/797 ... le-browser