Use reactnnative walletconnect with ether.js

Question

This is a rough summary since these things exist in different views.

I have a react native app that uses wallet connect. this allows me to connect to a meta mask wallet on my phone and creates a connector instance.

import {
  useWalletConnect,
  withWalletConnect,
} from "@walletconnect/react-native-dapp";

const connector = useWalletConnect();

connector.connect();

somewhere else in my application I'm using ethers to deploy..

    // local hard hat HTTP and WebSocket JSON-RPC server 
    let provider = ethers.getDefaultProvider('http://127.0.0.1:8545/');
    const signer = provider.getSigner()

    let contract = new ethers.Contract(nftaddress, NFT.abi, signer);

    let transaction = await contract.createToken(url);

    let tx = await transaction.wait();
    let event = tx.events[0];
    let value = event.args[2];
    let tokenId = value.toNumber();
    const price = ethers.utils.parseUnits(formInput.price, "ether");

    contract = new ethers.Contract(nftmarketaddress, Market.abi, signer);
    let listingPrice = await contract.getListingPrice();
    listingPrice = listingPrice.toString();

    transaction = await contract.createMarketItem(nftaddress, tokenId, price, {
      value: listingPrice,
    });
    await transaction.wait();

I guess I don't fully understand how I use my wallet (connector instance) to sign these transactions. The wallet connector instance doesn't seem to contain a "Signer", it just has a method that lets you a sign a transaction? I'm totally stumped by this.

this is the output

Answer 1

I stumbled upon your problem too and I was stumped too, until I realized this:

@walletconnect/web3-provider must be used together with @walletconnect/react-native-dapp so that you can set (example for BSC chain, when you already called connector.connect() for the useWalletConnect() instance):

import WalletConnectProvider from '@walletconnect/web3-provider';
import { useWalletConnect } from '@walletconnect/react-native-dapp';

const connector = useWalletConnect();
const provider = new WalletConnectProvider({
        rpc: {
            56: 'https://bsc-dataseed1.binance.org:443',
        },
        chainId: 56,
        connector: connector,
        qrcode: false,
    });
await provider.enable();
const ethers_provider = new ethers.providers.Web3Provider(provider);
const signer = ethers_provider.getSigner();

where connector is the instance passed by @walletconnect/react-native-dapp and qrcode: false is needed because otherwise it tries to call window.document.

Also for expo users: unfortunately to get walletconnect working on Android 11+ you need at least to expo prebuild to add

<queries>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="https"/>
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="http"/>
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="wc"/>
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="mqtt"/>
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="wamp"/>
    </intent>
  </queries>

Otherwise your app can't see which apps are installed that support wallet connect and can't also send websocket requests (this last part I am not too sure, please correct me if I am wrong, but at least you need the wc intent)