What is @walletconnect/universal-provider?
@walletconnect/universal-provider is a JavaScript library that allows developers to integrate WalletConnect functionality into their applications. WalletConnect is an open protocol for connecting decentralized applications (dApps) to mobile wallets with QR code scanning or deep linking. This package provides a universal provider that supports multiple blockchain networks and wallet types, making it easier to manage wallet connections and interactions.
What are @walletconnect/universal-provider's main functionalities?
Initialize WalletConnect Provider
This code initializes the WalletConnect Universal Provider with the necessary configuration, including project ID, relay URL, and metadata for the dApp.
const { UniversalProvider } = require('@walletconnect/universal-provider');
const provider = new UniversalProvider({
projectId: 'your_project_id',
relayUrl: 'wss://relay.walletconnect.org',
metadata: {
name: 'My DApp',
description: 'My decentralized application',
url: 'https://mydapp.com',
icons: ['https://mydapp.com/icon.png']
}
});
Connect to Wallet
This code demonstrates how to connect to a wallet using the Universal Provider. It specifies the required namespaces, methods, chains, and events, and then logs the connected session.
async function connectWallet() {
const session = await provider.connect({
requiredNamespaces: {
eip155: {
methods: ['eth_sendTransaction', 'personal_sign'],
chains: ['eip155:1'],
events: ['chainChanged', 'accountsChanged']
}
}
});
console.log('Connected session:', session);
}
connectWallet();
Send Transaction
This code demonstrates how to send a transaction using the Universal Provider. It constructs a transaction object and sends it using the 'eth_sendTransaction' method.
async function sendTransaction() {
const tx = {
from: '0xYourAddress',
to: '0xRecipientAddress',
value: '0xAmountInHex',
gas: '0xGasLimitInHex'
};
const result = await provider.request({
method: 'eth_sendTransaction',
params: [tx]
});
console.log('Transaction result:', result);
}
sendTransaction();
Other packages similar to @walletconnect/universal-provider
web3modal
Web3Modal is a library that allows developers to easily integrate multiple wallet providers into their dApps. It provides a modal for users to select their preferred wallet and supports various wallet providers like MetaMask, WalletConnect, and more. Compared to @walletconnect/universal-provider, Web3Modal offers a more user-friendly interface for wallet selection but may not provide as deep integration with WalletConnect-specific features.
ethers
Ethers.js is a library for interacting with the Ethereum blockchain and its ecosystem. It provides utilities for connecting to Ethereum nodes, managing wallets, and interacting with smart contracts. While it does not specifically focus on WalletConnect, it can be used in conjunction with WalletConnect to manage wallet connections and transactions. Ethers.js is more general-purpose and offers a wide range of Ethereum-related functionalities.
@walletconnect/universal-provider
Universal Provider for WalletConnect Protocol
Usage
import { ethers } from "ethers";
import UniversalProvider from "@walletconnect/universal-provider";
const provider = await UniversalProvider.init({
logger: "info",
relayUrl: "ws://<relay-url>",
projectId: "12345678",
metadata: {
name: "React App",
description: "React App for WalletConnect",
url: "https://walletconnect.com/",
icons: ["https://avatars.githubusercontent.com/u/37784886"],
},
client: undefined,
});
await provider.connect({
namespaces: {
eip155: {
methods: [
"eth_sendTransaction",
"eth_signTransaction",
"eth_sign",
"personal_sign",
"eth_signTypedData",
],
chains: ["eip155:80001"],
events: ["chainChanged", "accountsChanged"],
rpcMap: {
80001:
"https://rpc.walletconnect.org?chainId=eip155:80001&projectId=<your walletconnect project id>",
},
},
pairingTopic: "<123...topic>",
skipPairing: false,
},
});
const web3Provider = new ethers.providers.Web3Provider(provider);
Events
provider.on("display_uri", (uri) => {
console.log(uri);
});
provider.on("session_ping", ({ id, topic }) => {
console.log(id, topic);
});
provider.on("session_event", ({ event, chainId }) => {
console.log(event, chainId);
});
provider.on("session_update", ({ topic, params }) => {
console.log(topic, params);
});
provider.on("session_delete", ({ id, topic }) => {
console.log(id, topic);
});
Provider Methods
interface RequestArguments {
method: string;
params?: any[] | undefined;
}
const result = await provider.request(payload: RequestArguments, chain: string | undefined);
Multi-chain
const web3 = new Web3(provider);
const chainId = await web3.eth.getChainId();
provider.setDefaultChain(`eip155:56`, rpcUrl?: string | undefined);
const updatedDefaultChainId = await web3.eth.getChainId();
Creating a provider file
- Create a file under
providers/universal-provider/src/providers/<NAMESPACE>.ts
- Implement the
IProvider
interface - In the
IProvider.request
method, there should be a check for whether or not
to run the request against the wallet or the blockchain.
this.namespace.methods
should only contain the methods supported by the
wallet. - The rest of the methods of the class are very similar, mainly centering around
httpProvider and for the most part will be 90% similar to other providers
given similar structure of chainId. For example
eip155:1
or
solana:mainnetBeta
. - Export provider under
providers/universal-provider/src/providers/index.ts