📲

WalletConnect

Moralis is natively integrated with WalletConnect.

Integrate Moralis with WalletConnect

WalletConnect lets you connect via QR code, mobile wallets and desktop wallets. You can check out more in the WalletConnect Documentation.

1. Add the WalletConnect provider

Add the provider script based on how moralis was imported into the project - CDN, npm, or yarn.
CDN
npm
yarn
<script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.7.1/web3-provider.min.js"></script>
npm install @walletconnect/web3-provider
yarn add @walletconnect/web3-provider
Make sure to check if you use the latest stable version of the WalletConnect web3-provider, and update the version accordingly. Check for their latest releases here releases on Github

2. Call the authenticate function

Call authenticate function, but with a provider option:
JS
React
const user = await Moralis.authenticate({ provider: "walletconnect" })
import { useMoralis } from "react-moralis";
function App() {
const { authenticate, isAuthenticated, user } = useMoralis();
const login = async () => {
if (!isAuthenticated) {
await authenticate({ provider: "walletconnect" })
.then(function (user) {
console.log(user!.get("ethAddress"));
})
.catch(function (error) {
console.log(error);
});
}
}
}

3. Specify the chainId

Specify the chain id that WalletConnect will use by default. You can do this by providing the chainId as an extra option:
JS
React
const user = await Moralis.authenticate({ provider: "walletconnect", chainId: 56 })
import { useMoralis } from "react-moralis";
function App() {
const { authenticate, isAuthenticated, user } = useMoralis();
const login = async () => {
if (!isAuthenticated) {
await authenticate({ provider: "walletconnect", chainId: 56 })
.then(function (user) {
console.log(user!.get("ethAddress"));
})
.catch(function (error) {
console.log(error);
});
}
}
}

4. Filter Mobile Linking Options

To reduce the number of mobile linking options or customize its order, provide an array of wallet names to the mobileLinks option.
JS
React
const user = await Moralis.authenticate({
provider: "walletconnect",
mobileLinks: [
"rainbow",
"metamask",
"argent",
"trust",
"imtoken",
"pillar",
]
})
import { useMoralis } from "react-moralis";
function App() {
const { authenticate, isAuthenticated, user } = useMoralis();
const login = async () => {
if (!isAuthenticated) {
await authenticate({
provider: "walletconnect",
mobileLinks: [
"rainbow",
"metamask",
"argent",
"trust",
"imtoken",
"pillar",
]
})
.then(function (user) {
console.log(user!.get("ethAddress"));
})
.catch(function (error) {
console.log(error);
});
}
}
}

Tutorial

Moralis WalletConnect Demo
Last modified 6mo ago