react-nativeethereumethers.jswallet-connect

Use reactnnative walletconnect with ether.js


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

enter image description here


Solution

  • 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)