Ethereum React Native Boilerplate Questions

Moralis General
#372

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.

#373

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.

#374

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,

#375

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.

#376

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

Screenshot (32)
Screenshot (32)814×228 8.26 KB

#377

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.

#378

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.

#379

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

#380

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.

#381

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

#382

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

#383

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.

#384

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)

#385

There is a fix for that here.

#386

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();”

#387

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

#388

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

#389

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.

#390 
    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
#391

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