WalletConnect for React Native! Zero linking, full awesome

react-native-walletconnect

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.

🔥 Features

• Supports the complete WalletConnect Client Interface.
• Persists connected wallets between executions.

🚀 Getting Started

Using Yarn:

yarn add react-native-webview react-native-walletconnect

✍️ Usage

First 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>
  );
}

useWalletConnect

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.
• session
  • Returns an array of the active session. These are the connected wallets with details such as addresses and chains they are assigned to.

Download Details:

Author: cawfree

Demo: https://docs.walletconnect.org/client-api

Source Code: https://github.com/cawfree/react-native-walletconnect

#react-native #react #mobile-apps