0

I installed web3 to link Solidity to React-native. As in the code below, I deployed it from Remix and entered the address and ABI.

import Web3 from "web3";



const web3 = new Web3(
  new Web3.providers.HttpProvider("https://127.0.0.1:8545")
);

const address = "0x6cc33e32853a7fb0ac9ac2fb0d54cb56e4fb0f30";

const abi = [
  {
    constant: false,
    inputs: [
      {
        name: "_MASTER",
        type: "address"
      },
      {
        name: "_sitter",
        type: "address"
      },
      {
        name: "_sitterprice",
        type: "uint256"
      }
    ],
    name: "CompleteSharePet",
    outputs: [],
    payable: true,
    stateMutability: "payable",
    type: "function"
  },
  {
    constant: false,
    inputs: [
      {
        name: "_OWNER",
        type: "address"
      },
      {
        name: "_ownersharetext",
        type: "string"
      },
      {
        name: "_ownerprice",
        type: "uint256"
      }
    ],
    name: "OwnerShareText",
    outputs: [
      {
        name: "",
        type: "string"
      }
    ],
    payable: false,
    stateMutability: "nonpayable",
    type: "function"
  },
  {
    constant: false,
    inputs: [
      {
        name: "_ownerseller",
        type: "address"
      },
      {
        name: "_petsitter",
        type: "address"
      },
      {
        name: "_MASTER",
        type: "address"
      },
      {
        name: "_ownerprice",
        type: "uint256"
      }
    ],
    name: "PetChange",
    outputs: [],
    payable: true,
    stateMutability: "payable",
    type: "function"
  },
  {
    constant: false,
    inputs: [
      {
        name: "_PETSITTER",
        type: "address"
      },
      {
        name: "_master",
        type: "address"
      },
      {
        name: "_ownerprice",
        type: "uint256"
      }
    ],
    name: "PetChangeTransaction",
    outputs: [],
    payable: true,
    stateMutability: "payable",
    type: "function"
  },
  {
    constant: false,
    inputs: [
      {
        name: "_petsittertext",
        type: "string"
      },
      {
        name: "_sitterprice",
        type: "uint256"
      }
    ],
    name: "PetSitterShareText",
    outputs: [
      {
        name: "",
        type: "string"
      }
    ],
    payable: false,
    stateMutability: "nonpayable",
    type: "function"
  },
  {
    constant: false,
    inputs: [
      {
        name: "_sitter",
        type: "address"
      }
    ],
    name: "testsitter",
    outputs: [],
    payable: true,
    stateMutability: "payable",
    type: "function"
  },
  {
    constant: false,
    inputs: [
      {
        name: "_master",
        type: "address"
      },
      {
        name: "_OWNER",
        type: "address"
      },
      {
        name: "_sitterprice",
        type: "uint256"
      }
    ],
    name: "TransactionSharePet",
    outputs: [],
    payable: true,
    stateMutability: "payable",
    type: "function"
  },
  {
    constant: false,
    inputs: [
      {
        name: "hash",
        type: "string"
      },
      {
        name: "ipfs",
        type: "string"
      }
    ],
    name: "uploadImage",
    outputs: [],
    payable: false,
    stateMutability: "nonpayable",
    type: "function"
  },
  {
    constant: true,
    inputs: [],
    name: "AllOwnerCount",
    outputs: [
      {
        name: "",
        type: "uint256"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [],
    name: "AllPetSitter",
    outputs: [
      {
        name: "",
        type: "uint256"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [],
    name: "getOwnerAddresses",
    outputs: [
      {
        name: "",
        type: "address[]"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [
      {
        name: "_owner",
        type: "address"
      }
    ],
    name: "getOwnerInfo",
    outputs: [
      {
        name: "",
        type: "string"
      },
      {
        name: "",
        type: "string"
      },
      {
        name: "",
        type: "string"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [],
    name: "getPetSitterAddresses",
    outputs: [
      {
        name: "",
        type: "address[]"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [
      {
        name: "_petsitter",
        type: "address"
      }
    ],
    name: "getPetSitterInfo",
    outputs: [
      {
        name: "",
        type: "string"
      },
      {
        name: "",
        type: "string"
      },
      {
        name: "",
        type: "string"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [
      {
        name: "",
        type: "uint256"
      }
    ],
    name: "OwnerAddresses",
    outputs: [
      {
        name: "",
        type: "address"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [
      {
        name: "",
        type: "uint256"
      }
    ],
    name: "PetSitterAddresses",
    outputs: [
      {
        name: "",
        type: "address"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [
      {
        name: "_OWNER",
        type: "address"
      }
    ],
    name: "test",
    outputs: [
      {
        name: "",
        type: "uint256"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  },
  {
    constant: true,
    inputs: [
      {
        name: "_MASTER",
        type: "address"
      }
    ],
    name: "test2",
    outputs: [
      {
        name: "",
        type: "uint256"
      }
    ],
    payable: false,
    stateMutability: "view",
    type: "function"
  }
];
export class WalletSetting extends Component {
  test() {
    web3.eth.getAccounts().then(console.log);
  }
  render() {
    return this.test;
  }
}

export default (myContract = new web3.eth.Contract(abi, address));

The setting was error-free, but the error occurred when import was made to use mycontact

import WalletSetting from "../web3";
.
.
.
  </TouchableOpacity>
        <WalletSetting />
      </LinearGradient>

Error Image

I deleted all the node_modules and all the cache, just like the way in the picture. However, the same error occurred.


I downloaded the web3 version as "^1.0.0-beta.34" to resolve the existing error, but another error occurred.

Error is

Unable to resolve module crypto from /Users/lucky/pettest/node_modules/web3-eth-accounts/src/index.js: Module crypto does not exist in the Haste module map

So I went to Google for reference https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766 And install "node-libs-browser": "^2.2.0", "babelpresetes2015":"^6.24.1", and create a file called rn-cli.config.js, global.js and import the globaljs file into your web3.js file, but the error was the same.

How can I fix this?

https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766

This linked solution will not solve my problem.

TylerH
  • 20,799
  • 66
  • 75
  • 101
samjamy
  • 5
  • 7

2 Answers2

0

web3 was made to work in a browser environment. The native android environment is different than that of a browser, for example, it doesn't have the crypto class that web3 uses. Using web3 with react native will require some extra configuration. You can follow this guide: https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766.

Also you can find a boilerplate here: https://github.com/dougbacelar/react-native-web3

nikos fotiadis
  • 1,040
  • 2
  • 8
  • 16
0

I have a solution to part of your problem, regarding crypto. Install react-native-crypto and save it as a dependency, then babel-plugin-module-resolver as a dev-dependency, and put a .babelrc file in your project root that contains something like this:

{
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "crypto": "react-native-crypto"
      }
    }]
  ]
}

This replaces any require('crypto') in your installed packages with require('react-native-crypto'), and it worked for me. In my case however, the same package I had that was missing crypto is also missing http so I came to this thread to hopefully find a polyfill for that too. I am on RN v0.60.3, npm v6.9.0, and node v10.16.0 for anyone interested. Also the package I needed this 'shim' for is the request package, which seems to be a sub-sub-sub-sub-dependency of jest. (npm list request).

I hope this helps somebody!

I found this solution here: https://stackoverflow.com/a/46605706/12375465 and here: https://medium.com/studioarmix/the-joy-of-joi-hacking-node-deps-1337fd5e586f

Japser36
  • 194
  • 2
  • 8