⚛️ 👛 This is an unofficial package which supports integrating WalletConnect with React Native without requiring linking. This is basically achieved using a WebView.
If your project supports using Native Modules, I strongly recommend you use the official @walletconnect/react-native library.
Compatible with Android, iOS, Web and Expo.
- Supports the complete WalletConnect Client Interface.
- Persists connected wallets between executions.
Using Yarn:
yarn add react-native-webview react-native-walletconnectFirst you need to wrap the graphical root of your application with the <WalletConnectProvider />. Once this is done, you can make a call to the useWalletConnect hook to utilize the complete WalletConnect Client API within your app.
import React from "react";
import { SafeAreaView, Button } from "react-native";
import WalletConnectProvider, { useWalletConnect } from "react-native-walletconnect";
const WalletConnectExample = () => {
const {
createSession,
killSession,
session,
signTransaction,
} = useWalletConnect();
const hasWallet = !!session.length;
return (
<>
{!hasWallet && (
<Button title="Connect" onPress={createSession} />
)}
{!!hasWallet && (
<Button
title="Sign Transaction"
onPress={() => signTransaction({
from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3",
to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359",
data: "0x",
gasPrice: "0x02540be400",
gas: "0x9c40",
value: "0x00",
nonce: "0x0114",
})}
/>
)}
{!!hasWallet && (
<Button
title="Disconnect"
onPress={killSession}
/>
)}
</>
);
};
export default function App() {
return (
<WalletConnectProvider>
<WalletConnectExample />
</WalletConnectProvider>
);
}The useWalletConnect hook provides the following functionality:
createSession- Requests the creation of a new session via the presentation of the QR Modal.
killSession- Terminates the active session, equivalent to logging out.
sendTransaction- Makes an Ethereum transaction.
signTransaction- Signs an Ethereum transaction, but does not send it.
signPersonalMessage- Signs a personal message.
signMessage- Signs an arbitrary message.
signTypedData- Signs Typed Data.
sendCustomRequest- Sends a custom request, where you can specify custom configuration options such as
jrpcProvider.
- Sends a custom request, where you can specify custom configuration options such as
session- Returns an array of the active session. These are the connected wallets with details such as
addresses andchains they are assigned to.
- Returns an array of the active session. These are the connected wallets with details such as