Ethereum React Native Boilerplate Questions

Hello Malik,

Thanks for your response.
Here the adresse that I want to display all the NFT images : 0x0d8acbdd88ec12165611d016bbef96960db8d42c.
I guess i will have to call the opensea API to display the images.

We cannot connect with wallet apps on a device emulator since you don’t have these apps installed in the emulator. You can skip the login by providing the hardcoded address for development purposes by changing line 30 in the MoralisDappProvider.js file as such –

<MoralisDappContext.Provider
      value={{
        walletAddress: "0x71a11bc477048cca56d645ffc66ca762f62d1c3c",
        chainId: "0x1",
      }}>
      {children}
    </MoralisDappContext.Provider>
1 Like

Looks like there are many NFTs in the wallet. I tested a few with their metadata URL IPFS links and they seem to be working. Tested these-

https://ipfs.io/ipfs/QmNZDpkfZxmmocU7VfrebQS1Gx7TBtF6MFm7jgk73wqXNN
https://ipfs.io/ipfs/QmWD4RoZ6YsB8sCbmpj16sdEVQBY4KpC8URMwg6RPG6vTg\
https://ipfs.io/ipfs/QmNwd6Lqxz2R9tDmApVGW9K4cP6WPvLCucjGsghnkfkAmq/740.png

Also, since these questions are not specific to React native I would suggest you start a new thread to discuss this further.

I wanted to run the app using expo start command. When I scan the barcode it opens my expo app successfully but then it is just stuck at the ethereum logo screen like so. Does anyone know why this is happening/how to fix it to run the proper flow of the app?

Please do not use expo to run the app. Follow the instructions in the Quick start guide in github. We will soon be pushing a change where we get rid of expo completely because of its inconsistent behaviour.

How do you find the android folder from source code in android studio?

I see on android studio that we could open (new project), (VCS), or (open).

I see in the (open) option under my folder i made for this app there is an android option (with the android symbol).

Do we choose that?

Or do we choose the other android option (which does not have the android symbol/logo showing)
NOTE: i can only embedd one image at the moment so I cant show that picture yet)

If I am way off target then I am lost as to how to open an adrodi folder from source code in the android studio.

The getNFTsForContract (I modified the useNFTBalance hook because I just needed NFTs of a given contract, not all) is giving me an incorrect number of NFTs, with some repeated.
It was working fine a couple days ago but then started giving 3 when there were 2, and now I have 5 real NFTs, it gives me 8… What’s going on?

[
    {
        "token_address": "0xe10f3580f4c1b9f88a8fbbea562622f1cf255423",
        "token_id": "2",
        "block_number_minted": "15106120",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15106120",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    },
    {
        "token_address": "0x5b2518f041319fda578417a278c1bffe56a19c67",
        "token_id": "1",
        "block_number_minted": "15042289",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15042289",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    },
    {
        "token_address": "0x9de0f123e228276a9ee486847512fad0fd2727eb",
        "token_id": "0",
        "block_number_minted": "15015235",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15015235",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    },
    {
        "token_address": "0xe10f3580f4c1b9f88a8fbbea562622f1cf255423",
        "token_id": "0",
        "block_number_minted": "15106092",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15106092",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    },
    {
        "token_address": "0xe10f3580f4c1b9f88a8fbbea562622f1cf255423",
        "token_id": "4",
        "block_number_minted": "15106155",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15106155",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    },
    {
        "token_address": "0xe10f3580f4c1b9f88a8fbbea562622f1cf255423",
        "token_id": "3",
        "block_number_minted": "15106145",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15106145",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    },
    {
        "token_address": "0xe10f3580f4c1b9f88a8fbbea562622f1cf255423",
        "token_id": "1",
        "block_number_minted": "15106110",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15106110",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    },
    {
        "token_address": "0x5b2518f041319fda578417a278c1bffe56a19c67",
        "token_id": "0",
        "block_number_minted": "15042287",
        "owner_of": "0x737bffc0e88285a87490f4f8124e5d32fbe6fd82",
        "block_number": "15042287",
        "amount": "1",
        "contract_type": "ERC721",
        "name": "MonsterWorldNFT",
        "symbol": "MWD-NFT",
        "token_uri": null,
        "metadata": null,
        "synced_at": null,
        "is_valid": 0,
        "syncing": 1,
        "frozen": 0
    }
]

The opened tabs at the top almost gave me an anxiety attack

1 Like

The folder structure that you showed above is right. The android folder from the source code is to be opened.

This thread is for React Native specific issues. Let’s start another thread to track this NFT issue and figure out what’s going on.

I solved it, it was something dumb: The component was calling a “NFTBalances”, with an s at the end (no idea where that hook came from, it’s not on the hooks folder), which used getNFTs, instead of NFTBalance, which was the one I intended (although it isn’t in the GitHub anymore, was it removed?).

Hey @malik not sure what changed, but now my user logins are appearing in the table. Thank you very much! And I saw that Moralis is going to phase out expo from the repo, why is that? I find expo extremely useful for deploying MVPs.

On a side note, is there an example on how to properly take care of user sessions on mobile? I know this is unrelated to react-native, but since I figure it has to do with hooks it was worth asking here.
This is what I am doing in LoginScreen.handleCryptoLogin():

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

But after going to the Assets screen via DrawerNavigationRoutes, I get a bunch of error alerts. I am guessing it’s because I did not properly authenticate the current user and the hooks are missing information. I see that both the currentUser and the User object from the queried Session have the same objectId. Do I have to do something like Setting the Current User? Any help would be much appreciated, thanks again!

Thank you for the reply. So you are saying the source code is in that folder? I see a few options to choose from when i click that folder with the adroid symbol. Which one do I choose?

Thank you for your response.

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