Ethereum React Native Boilerplate Questions

Hello! I installed react-moralis on a react native project and whenever I import anything from it I get

Unable to resolve module crypto from ‘/path/to/module’: crypto could not be found within the project or in these directories:
node_modules/web3-eth-accounts/node_modules
node_modules

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.

NOTE: This post has been edited a more accurate question. Not sure why it jsut reposted my old comment.

Thank you for the reply. So you are saying the source code is in that folder with the android symbol? I see a few options in the drop down menu when I click that android folder. Which one do I choose to find the source code. I am unsure how to go about that? Could you explain when you get time please.

Okay so I was able to figure out my answer. You have to use _setUser from the useMoralis() hook to set the currentUser after verifying the sessionToken from the database. Here is what my code looks like:

    const currentUser = Moralis.User.current();
    if (currentUser) {
      const userSessionToken = currentUser.getSessionToken();
      const query = new Moralis.Query(Moralis.Session);
      query.equalTo("sessionToken", userSessionToken);
      query.find()
        .then( function (results) {
          console.log("User session authenticated with: ", results[0]);
          _setUser(currentUser);
          navigation.replace("DrawerNavigationRoutes");
        })
        .catch( (error) => {
          console.warn("error user sessions query: ", error);
        });
    } else {
      console.log("currentUser: ", currentUser);
    }

you should remove the react native svg lib from your project

Hi folks! I tried the boilerplate code it works perfect and When I tried to configure it in my own CLI version of code It throughs me an error which I attached the screenshot.


I covered My whole App in Morales Provider and given each and everything which required to setup.
Here are my libs version and I’m also attaching Package.Json file you may tell if I’m missing any library.Should I add expo too in my project?
Thanks

"dependencies": {
    "@connectedcars/react-native-slide-charts": "^1.0.5",
    "@ethersproject/shims": "^5.5.0",
    "@eva-design/eva": "^2.1.1",
    "@nomiclabs/hardhat-ethers": "^2.0.1",
    "@nomiclabs/hardhat-waffle": "^2.0.1",
    "@react-native-async-storage/async-storage": "^1.15.14",
    "@react-native-clipboard/clipboard": "^1.9.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^6.0.2",
    "@react-native-community/push-notification-ios": "^1.8.0",
    "@react-native-community/toolbar-android": "^0.1.0-rc.2",
    "@react-native-firebase/app": "^12.9.1",
    "@react-native-firebase/auth": "^12.9.1",
    "@react-native-firebase/messaging": "^12.4.0",
    "@react-native-google-signin/google-signin": "^7.0.1",
    "@react-navigation/bottom-tabs": "^5.5.2",
    "@react-navigation/drawer": "^5.0.0",
    "@react-navigation/native": "^5.5.1",
    "@react-navigation/stack": "^5.5.1",
    "@tradle/react-native-http": "^2.0.1",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "@types/jest": "^26.0.20",
    "@types/node": "14.14.22",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@typescript-eslint/eslint-plugin": "^4.0.1",
    "@typescript-eslint/parser": "^4.0.1",
    "@ui-kitten/components": "^5.1.1",
    "@walletconnect/client": "^2.0.0-beta.21",
    "@walletconnect/qrcode-modal": "^1.7.0",
    "@walletconnect/react-native-dapp": "1.6.6",
    "@walletconnect/web3-provider": "^1.6.6",
    "assert": "^1.5.0",
    "axios": "^0.23.0",
    "browserify-zlib": "^0.1.4",
    "buffer": "^4.9.2",
    "console-browserify": "^1.2.0",
    "constants-browserify": "^1.0.0",
    "currency-formatter": "^1.5.5",
    "dns.js": "^1.0.1",
    "domain-browser": "^1.2.0",
    "ethers": "^5.5.1",
    "events": "^3.3.0",
    "https-browserify": "^0.0.1",
    "i18next": "^19.4.5",
    "lightweight-charts": "^3.6.1",
    "lodash": "^4.17.15",
    "moment": "^2.26.0",
    "moralis": "0.0.99",
    "path-browserify": "^0.0.0",
    "process": "^0.11.10",
    "punycode": "^1.4.1",
    "qs": "^6.9.4",
    "querystring-es3": "^0.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.6.0",
    "react-moralis": "0.2.7",
    "react-native": "0.64.0",
    "react-native-action-button": "^2.8.5",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-atoz-listview": "^0.0.7",
    "react-native-barcode-mask": "^1.2.4",
    "react-native-biometrics": "^2.1.4",
    "react-native-camera": "^4.2.1",
    "react-native-chart-kit": "^6.11.0",
    "react-native-crypto": "^2.2.0",
    "react-native-elements": "^2.0.2",
    "react-native-encrypted-storage": "^4.0.2",
    "react-native-floating-action": "^1.22.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-get-random-values": "^1.7.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-level-fs": "^3.0.1",
    "react-native-maps": "0.27.1",
    "react-native-masked-text": "^1.13.0",
    "react-native-os": "^1.2.6",
    "react-native-paper": "^4.9.2",
    "react-native-permissions": "^3.1.0",
    "react-native-push-notification": "^4.0.0",
    "react-native-qrcode-scanner": "^1.5.4",
    "react-native-randombytes": "^3.6.1",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "^1.9.0",
    "react-native-restart": "^0.0.17",
    "react-native-safe-area-context": "^3.0.3",
    "react-native-screens": "^2.8.0",
    "react-native-share": "^7.3.0",
    "react-native-slide-charts": "^1.0.4",
    "react-native-slide-verify": "^0.0.2",
    "react-native-snackbar": "^2.4.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-splash-screen": "^3.2.0",
    "react-native-status-bar-height": "^2.5.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-swipe-list-view": "^3.1.1",
    "react-native-swiper": "^1.6.0",
    "react-native-tcp": "^3.3.2",
    "react-native-udp": "^2.7.0",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^11.15.0",
    "react-redux": "^7.2.5",
    "readable-stream": "^1.0.33",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "stream": "^0.0.2",
    "stream-browserify": "^1.0.0",
    "timers-browserify": "^1.4.2",
    "ts-node": "9.1.1",
    "tty-browserify": "^0.0.0",
    "typescript": "~4.0.0",
    "url": "^0.10.3",
    "vm-browserify": "^0.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/runtime": "^7.13.10",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.23.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.65.2",
    "react-test-renderer": "17.0.1",
    "rn-nodeify": "github:tradle/rn-nodeify"
  },

I’ve already configured the wallet connect and added a shim file too is that the reason to have issue.Issue is in react-moralis addListener undefined

Hi, This question is not suitable for this page? Ethereum React Native Boilerplate Questions

Hi, I’m still waiting for reply.
Thanks.

hey, working on a react-native project. I start off with standard email password authentication then I want to link etherium accounts after doing wallet authentication like this

Moralis.onAccountsChanged( async (accounts) => {
  console.log("accounts changed")
  await Moralis.link(accounts[0]);
});

const wallet_connect = () => {
      authenticate({ connector })
      .then(() => {
        if (authError) {
          setErrortext(authError.message);
          setVisible(true);
        }
      })
      .catch(() => {});
    }

When I call the wallet_connect method the account gets created but the Moralis.onAccountsChanged method doesn’t seem to be getting called. Any thoughts on how to use onAccountsChanged properly in react native?

this may not be something that works with wallet connect

I’m trying to import my App ID and Server URL from my .env file but I keep getting this error and I’m not sure why:

Module ‘"@env"’ has no exported member ‘REACT_APP_MORALIS_APPLICATION_ID’.ts(2305)

Can anyone help me fix this?

You can add these two lines to index.d.ts

declare module '@env' {
   export const HARDHAT_PORT: string;
   export const HARDHAT_PRIVATE_KEY: string;
   export const REACT_APP_MORALIS_APPLICATION_ID: string;
   export const REACT_APP_MORALIS_SERVER_URL: string;
}

Hey @malik not sure if this is helpful but I was able to run WalletConnect and authenticate with expo via the Expo Go this is a bare bone example on how to do it, https://github.com/clxyder/walletconnect-expo-example. Hopefully this helps keep expo in the Moralis boilerplate.

1 Like

ive been getting the same thing in the non react boiler plate the last few days as well. cant figure it out

Thanks I’ll try that

1 Like

Hello @apost crypto is now available in node. If you are trying to install all dependencies from this boilerplate to your new react-native project, you should include crypto and other modules that could not be found under post-install in your package.json. I’m currently creating a CLI version of this boilerplate and I managed to fix most issues including this one that you encountered. If you find it interesting, you can check it here:

It’s still unofficial but we will publish it once we confirm this to be working on most dev environments and will delete this one in my repo.

1 Like

Hello :slight_smile:

I’m working on the React Native Boilerplate on ‘web’ and got this error :

Do you have a solution ?

Thank you for your response :slight_smile:

Hassan.

Update react-native-web to latest version

Hey guys,

I am creating users in my app using email/password sign up and login. I get a warning saying Non ethereum enabled browser. Then when I try and link a wallet to this user using something like

Moralis.Web3.link('MyWalletAddress');

I get the following error:

Possible Unhandled Promise Rejection (id: 0):
Error: Non ethereum enabled browser

And this doesn’t update the users accounts field in my user DB as would be the desired result from linking. Any help would be greatly appreciated. Cheers

@cwong Thanks, It is very helpful since I am trying to use expo with moralis lib. Everything is working fine when I only use “wallet-connect”. But it turns our error when I try to bring moralis lib in.
following error occurs when I only import the MoralisProvider setting credential and wrap it in side the walletconnectprovider.

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"

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 appid"
            serverUrl="my server url">
            <App/>
            </MoralisProvider>
        </WalletConnectProvider>
        
    );
};

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/browser/MoralisWeb3.js:55:41 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/ParseUser.js:51:48 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/ParseACL.js:25:47 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/decode.js:19:46 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/Parse.js:31:44 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/index.js:1:24 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/react-moralis/lib/index.cjs.js:7:28 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at AppProviders.tsx:9: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

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/browser/MoralisWeb3.js:55:41 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/ParseUser.js:51:48 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/ParseACL.js:25:47 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/decode.js:19:46 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/lib/browser/Parse.js:31:44 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/moralis/index.js:1:24 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/react-moralis/lib/index.cjs.js:7:28 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at AppProviders.tsx:9: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

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

It is appreciated if you can share the solution if you have got it resolved.