Ethereum React Native Boilerplate Questions

Hey i am having an issue with the react-native boilerplate. On some devices the Login with wallet is working. But on some ex: ios i get the following error:

Non ethereum enabled browser 

and the Qr modal is shown.

Is that an error or a warning? If the app still works then it should be fine - that message would be expected on an iOS device.

The thing is that the wallet connect modal is not showing… so i can’t sign in to the app.
Only the QR is showing and in some Devices even the QR is not showing,

Can you post a screenshot of this QR, I thought you were referring to the WalletConnect modal’s QR code. Which devices does the modal (e.g. with the Connect button) not show? You can check your console for any other errors.

Don’t know what my issue is at this point. Is it because i"m using js with jsx or my dapp is not connected to moralis token_img won’t display

Where is this code/template from? It doesn’t seem to be from the react-native boilerplate.

If this is for the ethereum-boilerplate, then you can post in this thread.

It is the wallet connect QR modal. The thing is that i want to log via walletConnect with the installled wallets on my phone. But the Button (Login with wallet) doesn’t open the wallets, or the WalletConnect Modal.

@alex Any news? I tried reaching out to the live support but i didn’t got any response.

Which device are you using where the button doesn’t do anything? For Android you can get wallets connected (without WalletConnect) if you make this change.

In ios the button only pops the QR code. I don’t need the QR i only need the wallet connect options.
I will make those changes so i can fix the problems on some android devices where the button doesn’t do anything (neither the QR pop’s or the wallet connect modal).

hai @alex , i have a doubt,
the file path:ethereum-react-native-boilerplate\frontend\providers\MoralisDappProvider\MoralisDappProvider.js

How do I get ChainID dynamically?
I put a static chain id and it’s fine… If I put chianId: chainId it shows only for loading…
(<MoralisDappContext.Provider value={{walletAddress, chianId: chainId}}>)

here’s my code:

import React, {useEffect, useMemo, useState} from ‘react’;
import {useMoralis} from ‘react-moralis’;
import MoralisDappContext from ‘./context’;
//import Web3 from “web3”; // Only when using npm/yarn

function MoralisDappProvider({children}) {
const {web3, Moralis, user} = useMoralis();
const [walletAddress, setWalletAddress] = useState();
const [chainId, setChainId] = useState();

useEffect(() => {
Moralis.onChainChanged(function (chain) {
setChainId(chain);
});
Moralis.onAccountsChanged(function (address) {
setWalletAddress(address[0]);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => setChainId(web3.givenProvider?.chainId));
useMemo(
() =>
setWalletAddress(
web3.givenProvider?.selectedAddress || user?.get(‘ethAddress’),
),
[web3, user],
);
return (
<MoralisDappContext.Provider value={{walletAddress, chainId:“0x3”}}>
{children}
</MoralisDappContext.Provider>
);
}
function useMoralisDapp() {
const context = React.useContext(MoralisDappContext);
if (context === undefined) {
throw new Error(‘useMoralisDapp must be used within a MoralisDappProvider’);
}
return context;
}
export {MoralisDappProvider, useMoralisDapp};

Hello can you read this on how to post code on this forum.

I’m not sure, maybe you can’t get the chainId with a deep link connection. If you use WalletConnect for the wallet connection, you should be able to get the chainId separately.

I get the following error when running ‘npx react-native run-ios’ as per the README. Can someone please help.
AppContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:74305:78
[Sun Jul 17 2022 16:14:14.162] ERROR TypeError: Moralis.onAccountChanged is not a function. (In ‘Moralis.onAccountChanged(function (address) {
setWalletAddress(address[0]);
})’, ‘Moralis.onAccountChanged’ is undefined)

This error is located at:
in MoralisDappProvider (at Providers.tsx:63)
in MoralisProvider (at Providers.tsx:59)
in WalletConnectProvider (at Providers.tsx:58)
in Providers (at AppWithProviders.tsx:6)
in _default (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)

There is a fix for that here.

I used Web3 methods to get ChainID. But I don’t get ChainID…

I used this code to get the chainId
“const chainId = await web3.eth.getChainId();”

Yeah, I customized the wallet connector myself. it is working fine.

Can you please post that code so others here can use it?

hello @alex
I used Web3 methods “const chainId = await web3.eth.getChainId();” for get ChainID. But I don’t get ChainID…

Anyone get ChainID please let me know how to get it… I used this type of method but didn’t get chainId.

    const web3js = await getWeb3({connector})
    const chain = Number(await web3js.eth.getChainId());

====================== getWeb3.ts =============================

import WalletConnect from "@walletconnect/client";

import Web3 from "web3";

import { AbstractProvider } from "web3-core";

import { JsonRpcPayload, JsonRpcResponse } from "web3-core-helpers";

// eslint-disable-next-line functional/prefer-readonly-type

export async function getWeb3({ connector }: { connector: WalletConnect }) {  

  // @ts-ignore  

  if (connector.connected === false){

      return null;

  }

  const makeJsonRpcResponse = (payload: JsonRpcPayload, result: any, error?: Error): JsonRpcResponse => ({

    id: +payload.id,

    jsonrpc: payload.jsonrpc,

    result,

    error: error ? error.message : undefined,

  });

  const isMetamask = connector._peerMeta.name === "MetaMask" ? true : false;

  const abstractProvider: AbstractProvider = {

    sendAsync: (payload, callback) => {

        connector

        .sendCustomRequest(payload)

        .then((result) => {

          console.log('sendAsync result', result);

          callback(null, makeJsonRpcResponse(payload, result))

        })

        .catch((error) => {

          console.log('sendAsync error', error);

          callback(error, makeJsonRpcResponse(payload, null, error))

        });

    },

    send: (payload, callback) => {

        connector

        .sendCustomRequest(payload)

        .then((result) => callback(null, makeJsonRpcResponse(payload, result)))

        .catch((error) => callback(error, makeJsonRpcResponse(payload, null, error)));

    },

    connected: connector.connected,

    isMetaMask: isMetamask

  };

  const web3 = new Web3(abstractProvider);

  return web3;

}
1 Like

Hi! I have a question with the expiration time of a session in the mobile app with React Native. Every time I close the app, I have to connect and sign the message again with my wallet.
Is there any chance of set a custom expiration time for each session? Where should I set this config?
I want to keep the session in each mobile phone for 24 hours.
Thank you in advance.

1 Like