Metamask: WalletConnect (Metamask Mobile) configuration with React Native app

Metamask: Configuring WalletConnect with React Native

In this article, we’ll look at how to set up a Metamask wallet in your React Native app using WalletConnect. We’ll focus on integrating it into your Expo or Xcode mobile app.

What is WalletConnect?

WalletConnect is an open source protocol that allows users to send and receive cryptocurrency without having to download any wallets. It enables seamless interaction between dApps (decentralized applications) and wallet providers such as Metamask in a secure and scalable manner.

Prerequisites

To use WalletConnect with Metamask, you will need:

• Metamask wallet

• Expo or Xcode

• Installed React Native CLI

Step 1: Configure WalletConnect

Create a new file named metamask.json in your project directory:

{
"wallet": {
"id": "YOUR_METAMASK_ID",
"secretKey": "YOUR_METAMASK_SECRET_KEY"
}
}

Replace YOUR_METAMASK_ID and YOUR_METAMASK_SECRET_KEY with the actual ID and secret key of your Metamask wallet.

Step 2. Create a new React Native Expo project or Xcode app

If you are using Expo, run:

expo init metamask-wallet

Otherwise, create an Xcode project (or use the iOS equivalent) with the following settings:

• File -> New -> Project…

• Select “React Native” and select “Application”

• Set your application name as “Metamask Wallet”

Step 3. Configure Metamask in your React Native Expo app

Open the metamask.json file in your project directory and add the following code:

import { initialize } from 'metamask-wallet';
initialize({
walletId: 'YOUR_METAMASK_ID',
secretKey: 'YOUR_METAMASK_SECRET_KEY'
});

Step 4: WalletConnect Integration

In your React Native Expo app, add the following code to handle WalletConnect:

import { useWalletConnect } from '@metamask-connect/react-native';
const App = () => {
const { account, connection, error } = useWalletConnect({
id: 'YOUR_METAMASK_ID',
secretKey: 'YOUR_METAMASK_SECRET_KEY'
});
if (error) {
console.error(error);
return null;
}
// Processing wallet changes
const onAccountChange = async () => {
console.log('Wallet account changed');
};
return (
{ account && (
Connected to Metamask: {account}
)}
 connection.request({ account })} />
);
};

Step 5: Display QRCode Modal Window (Optional)

If you want to display a QRCode modal when the application starts, add the following code:

import { useWalletConnect } from '@metamask-connect/react-native';
const App = () => {
const { account, connection, error } = useWalletConnect({
id: 'YOUR_METAMASK_ID',
secretKey: 'YOUR_METAMASK_SECRET_KEY'
});
if (error) {
console.error(error);
return null;
}
// Show QRCode modal window when starting the application
const showModal = () => {
connection.request({ account });
};
return (
{ account && (
Connected to Metamask: {account}
)}
 connection.request({ account })) />
);
};

That’s it! Metamask wallet is now configured in your React Native Expo app using WalletConnect. When starting the application, a QRCode modal window will appear, allowing users to connect their wallets.