Ethereum React Native Boilerplate Questions

Raheel · January 11, 2022, 9:52am

Hi bro,
Did you find something I am facing the same issue while calling smart contract?

gen · January 11, 2022, 11:49am

@HHouaiss @happyeric77 Hi guys! try updating react-native and react-moralis dependencies on your package.json like this: "react-native": "~0.63.3" and "react-moralis": "0.2.7".

happyeric77 · January 11, 2022, 12:29pm

Thanks for your reply, I just tried it (modified the package.json, remove package.lock.json and npm install) now but still no luck with the error below:

The provided value 'ms-stream' is not a valid 'responseType'.
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:189:6 in set__responseType
at node_modules/stream-http/lib/capability.js:36:5 in checkTypeSupport
at node_modules/stream-http/lib/capability.js:48:53 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/stream-http/lib/request.js:1:24 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/stream-http/index.js:1:27 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/xhr2-cookies/dist/xml-http-request.js:21:18 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/xhr2-cookies/dist/index.js:6:16 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3-providers-http/lib/index.js:25:18 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3-core-requestmanager/lib/index.js:45:25 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3-core/lib/index.js:22:30 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3/lib/index.js:29:18 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/MoralisWeb3.js:20:41 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/ParseUser.js:34:48 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/ParseACL.js:14:47 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/decode.js:8:46 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/Parse.js:15:44 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/react-native.js:1:24 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at AppProviders.tsx:13:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at index.js:6:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/metro-runtime/src/polyfills/require.js:201:44 in guardedLoadModule
- ... 2 more stack frames from framework internals

TypeError: undefined is not an object (evaluating 'EventEmitter.prototype.addListener')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
- ... 6 more stack frames from framework internals

The provided value 'moz-chunked-arraybuffer' is not a valid 'responseType'.
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:189:6 in set__responseType
at node_modules/stream-http/lib/capability.js:36:5 in checkTypeSupport
at node_modules/stream-http/lib/capability.js:49:66 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/stream-http/lib/request.js:1:24 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/stream-http/index.js:1:27 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/xhr2-cookies/dist/xml-http-request.js:21:18 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/xhr2-cookies/dist/index.js:6:16 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3-providers-http/lib/index.js:25:18 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3-core-requestmanager/lib/index.js:45:25 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3-core/lib/index.js:22:30 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/web3/lib/index.js:29:18 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/MoralisWeb3.js:20:41 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/ParseUser.js:34:48 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/ParseACL.js:14:47 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/decode.js:8:46 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/react-native/Parse.js:15:44 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/react-native.js:1:24 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at AppProviders.tsx:13:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at index.js:6:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/metro-runtime/src/polyfills/require.js:201:44 in guardedLoadModule
- ... 2 more stack frames from framework internals

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

my package.json is also listed below FYI:

{
  "name": "project_mobile_app_dev",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.14",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "~0.64.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",
    "@walletconnect/react-native-dapp": "^1.7.0",
    "base-64": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "expo-web-browser": "~10.1.0",
    "https-browserify": "^1.0.0",
    "node-libs-react-native": "^1.2.1",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "react-native-get-random-values": "~1.7.0",
    "react-native-tcp": "^4.0.0",
    "readable-stream": "^3.6.0",
    "stream-http": "^3.2.0",
    "vm-browserify": "^1.1.2",
    "expo-app-loading": "~1.3.0",
    "@eva-design/eva": "^2.1.1",
    "react-native-dotenv": "^3.3.1",
    "moralis": "0.0.183",
    "react-moralis": "0.2.7",
    "web3": "^1.6.0",
    "@walletconnect/web3-provider": "^1.6.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "typescript": "~4.3.5",
    "jest-expo": "~44.0.1",
    "jest": "^26.6.3",
    "react-test-renderer": "17.0.1"
  },
  "private": true
}

Let me also share my AppProvider.tsx code in which I wrap my App.tsx into WalletConnect provider. It had been working fine untill I tried to add a wrapper of MoralisProvider. So I commented out all moralis related code and then only left setAsyncStorage there to debug. Then I also turned out error so that I think the issue is from setting asyncStorage.

import React from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import WalletConnectProvider, { WalletConnectProviderProps } from "@walletconnect/react-native-dapp";
import { Platform} from "react-native";
import { expo } from "./app.json";
const { scheme } = expo;
import App from "./App";

import { MoralisProvider } from "react-moralis"



import Moralis from "moralis/react-native.js";
Moralis.setAsyncStorage(AsyncStorage)
// Moralis.start({appId: "YNGTdQEGlHEuG5xLEVP2NK5TSezl9x3Fi3eyQEOv", serverUrl: "https://li8crrzx4alq.grandmoralis.com:2053/server"})



const walletConnectOptions: WalletConnectProviderProps = {
    redirectUrl: Platform.OS === "web" ? window.location.origin : `${scheme}://`,
    storageOptions: {
        // @ts-ignore
        asyncStorage: AsyncStorage,
    },
    qrcodeModalOptions: {
        mobileLinks: [
            "rainbow",
            "metamask",
            "argent",
            "trust",
            "imtoken",
            "pillar",
        ],
    },
  // Uncomment to show a QR-code to connect a wallet
  // renderQrcodeModal: Qrcode,
};

export const AppProviders = ({ children }: any) => {
    return (        
        <WalletConnectProvider {...walletConnectOptions}>
            {/* <MoralisProvider
            appId="my app id"
            serverUrl="my server url"
            environment="native"> */}
            <App/>
            {/* </MoralisProvider> */}
        </WalletConnectProvider>
        
    );
};

gen · January 11, 2022, 12:39pm

@happyeric77 can you refer to this? I made this CLI version of this boilerplate. I managed to resolve most issues when trying to create your own version of this boilerplate. This might or might not help you with your current codebase but I believe this could be valuable to you if you also want to create an ethereum react-native app without expo. We will be publishing this officially as soon once we tested it enough.

happyeric77 · January 11, 2022, 12:43pm

Hi Gen, Really thanks for your sharing. I understand the boilderplate currently only supports rn_cli without expo. So what I am trying to do is create one to work with expo (go) from scratch. Does it mean it is not possible? If yes, it will be very appreciated if I could know what would be the technical barrier.

happyeric77 · January 11, 2022, 1:16pm

My codebase is super simple. You could have a check if you have time ( the number 4 branch of the below repo.)
I believe everything happens only in AppProvider.tsx file

gen · January 11, 2022, 1:02pm

Great! I’ll check this out now! : smiley:

gen · January 11, 2022, 1:41pm

@happyeric77 I think I was able to run it. Correct me if I’m wrong. Please see screenshots:

If this is correct, I’ll create a PR for this in your repo

happyeric77 · January 11, 2022, 2:10pm

@gen AWSOME, it is correct. Please kindly help to issue a PR on my repo. Thank you so much!!
I ready would like to know where did I do wrong.

happyeric77 · January 11, 2022, 2:50pm

@gen
I created an issue for the repo. If possible, would you make a comment. And I could assign it to you if you do not mind.

gen · January 11, 2022, 3:03pm

@happyeric77 I’ll just share the fix here so anyone with the same issue can refer to it. After cloning the app and switching to the 4.Moralis_provider branch, I just deleted package-lock.json and yarn.lock. Then I changed the react-native version to "react-native": "0.63.3" in the package.json file. Then I run yarn install. After it finished downloading node_modules, I ran expo start. Try deleting node_modules and repeat the same process I did.

gen · January 11, 2022, 3:13pm

@happyeric77 I also left a comment on this issue.

happyeric77 · January 11, 2022, 3:37pm

@gen
Thanks, Man!!! you really save my day.
I just downgraded the react-native version from 0.64.3 to 0.63.3. Then I now can get into the app even it shows some warnings below :

I am not sure if it will be a matter afterward, but at least now I can call moralis function with no problem.

gen · January 11, 2022, 4:21pm

@zadu try downgrading react-native version to “react-native”: “0.63.3”. I think there are some mapping issues with the higher versions of react-native that are causing this issue. Let me know if this worked. " Thanks!

gen · January 11, 2022, 4:24pm

@happyeric77 Awesome!!! We can fix those warnings in the future if they cause some trouble. Happy Buidling!!!

iPictorial · January 12, 2022, 3:22pm

I’ve changed android package name and after wallet connect i want it to connect the wallet and return to my app. is this possible?
Should I change anything in android manifest file?
What should I change here?

bridge: “https://bridge.walletconnect.org”,
clientMeta: {
description: “Connect with WalletConnect”,
url: “https://walletconnect.org”,
icons: ["…walletconnect-logo.png"],
name: “WalletConnect”,

Thanks.

gen · January 13, 2022, 10:41am

@iPictorial Can you give more details about what you are trying to do? Thanks!

bingbong · January 13, 2022, 4:22pm

Hi there I am running into problems trying to authenticate with walletconnect and moralis. In the boilerplate code it appears that the walletconnect connector can be passed directly to the moralis authenticate function as a provider; however when I try to do this I get a Typescript error saying ‘Argument of type ‘{ connector: WalletConnect; }’ is not assignable to parameter of type ‘AuthenticateOptions’.’ I can only pass ‘wc’ or ‘walletconnect’ as providers.

I can use the connect function on the connector with no issues, but I need the user to be authenticated with moralis. Any help or ideas would help thanks!

luca.pizzola · January 13, 2022, 6:09pm

Hey ì I’m trying to sync my smart contract with moralis. What should i put on topic and abi if my smart contract does not have an event defined?
i was following the moralis video for syncing the smart contract .
that’s my contract, a simple mint erc721 contract
pragma solidity ^0.8.0;

import “github.com/OpenZeppelin/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol”;
import “github.com/OpenZeppelin/openzeppelin-contracts/contracts/utils/Counters.sol”;

contract My_NFT is ERC721URIStorage {
using Counters for Counters.Counter;

Counters.Counter private _tokenIds;

constructor() ERC721("NFT", "Collections1") {}

function mintToken(string memory tokenURI)
    public
    returns (uint256)
{
    _tokenIds.increment();

    uint256 newItemId = _tokenIds.current();
    _mint(msg.sender, newItemId);
    _setTokenURI(newItemId, tokenURI);

    return newItemId;
}

}

cosmic_sandwich · January 14, 2022, 2:44am

I’m trying to run the boilerplate app on my Android phone and keep running into problems.

I run npx yarn start for the Metro bundler and yarn start after installing dependencies. The app loads on my phone but only partially it seems. The Moralis logo and animation behind it show and the green Login button shows. However, the eth.png background doesn’t want to load and after I successfully sign a message with my wallet (metamask/trust wallet) it won’t kick me back into the app and when I manually switch windows back it immediately crashes every time.

Console errors occur simultaneously with crash:

[Thu Jan 13 2022 17:42:37.841]  LOG      BALANCE {"balance": "0"}
[Thu Jan 13 2022 17:42:42.951]  WARN     Possible Unhandled Promise Rejection (id: 0):
Error: Unable to open url.
_callee2$@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:329092:73
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25365:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25535:32
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25365:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25437:30
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25447:21
tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27452:16
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27553:27
_callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30992:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:31031:17
callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:31248:33
__callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2688:35
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2474:34
__guard**@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2671:15
flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2473:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

I have now been trying to get RN + web3 setup for several days now and i’m hoping to get some help if anyone recognizes what my problem may be. Thanks!