community! I’ve been encountering issues when trying to integrate WalletConnect into my React application. Attempting to connect a wallet via WalletConnect, I face WebSocket connection errors and fail to load resources from bridge.walletconnect.org.
Ensured I’m using the latest version of @walletconnect/web3-provider.
Verified the bridge URL is correctly specified in my code (bridge: ‘https://bridge.walletconnect.org’).
Restarted the development server and cleared the browser cache.
import React, { useState } from 'react';
import Web3Modal from 'web3modal';
import WalletConnectProvider from '@walletconnect/web3-provider';
function WalletConnect() {
const [account, setAccount] = useState('');
const providerOptions = {
walletconnect: {
package: WalletConnectProvider,
options: {
bridge: 'https://bridge.walletconnect.org',
rpc: {
1: 'https://mainnet.infura.io/v3/мой_INFURA_API_KEY'
}
}
}
};
async function connectWallet() {
const web3Modal = new Web3Modal({
network: "mainnet",
cacheProvider: true,
providerOptions
});
try {
const connection = await web3Modal.connect();
// дальнейшие действия
} catch (error) {
console.error("Connection to wallet failed:", error);
}
}
return (
<div>
<button onClick={connectWallet}>Connect Wallet</button>
{account && <p>Connected account: {account}</p>}
</div>
);
}
export default WalletConnect;
Errors I’m receiving:
WebSocket connection to ‘wss://bridge.walletconnect.org/?env=browser&…’ failed.
Failed to load resource: the server responded with a status of 404 ().
I’ve searched for solutions in the WalletConnect documentation and forums, but haven’t been able to resolve this issue. Any help or guidance on what I might be doing wrong would be greatly appreciated.
