6

I have a Truffle/Web3 app which has this code in app.js (by default) which runs when the page is loaded:

$(document).ready(function () {
  if (typeof web3 !== 'undefined') {
    console.warn('Using web3 detected from external source like Metamask')
    window.web3 = new Web3(web3.currentProvider)
  } else {
    console.warn("No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask")
    window.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'))
  }

My truffle.js file looks like this:

require('babel-register')

module.exports = {
  networks: {
    "ropsten": {
      host: 'localhost',
      port: 8545,
      network_id: 3, // Ropsten
      gas: 500000
    }
  }
}

I have also signed up to Infura which has given me a "provider URL" like https://ropsten.infura.io/xxxxxxxxxxxxxxxxxxxxx

How should I then properly configure my truffle.js and app.js so I am using Infura? I would like to use Infura for the purpose of showing users who aren't using MetaMask/Parity/Mist data from the blockchain (so the app could still call functions from my contract), while Infura should be ignored if it's detected that the user is using MetaMask/Parity/Mist.

  • I tried using my ropsten provider URL like this: window.web3 = new Web3(new Web3.providers.HttpProvider('ropsten.infura.io/xxxxxxxxxxxxxxxxxxxxx')) This results in "new BigNumber() not a base 16 number" errors which break the app, I believe because the Infura node not up to date (maybe lagging behind a few minutes). Any input from someone who's successfully used Infura for the purpose of being able to retrieve data from the blockchain for users without MetaMask would be appreciated. – ZhouW Jul 23 '17 at 4:58
5

Here's a example of setting an infura provider using truffle-hdwallet-provider with a custom wallet:

const HDWalletProvider = require('truffle-hdwallet-provider')
const fs = require('fs')

const mnemonic = process.env.MNEMONIC

module.exports = {
  networks: {
    development: {
      host: 'localhost',
      port: 8545,
      gas: 4500000,
      gasPrice: 25000000000,
      network_id: '*' 
    },
    kovan: {
      provider: new HDWalletProvider(mnemonic, 'https://kovan.infura.io'),
      network_id: '*',
      gas: 4500000,
      gasPrice: 25000000000
    },
    rinkeby: {
      provider: new HDWalletProvider(mnemonic, 'https://rinkeby.infura.io'),
      network_id: '*',
      gas: 4500000,
      gasPrice: 25000000000
    },
    mainnet: {
      provider: new HDWalletProvider(mnemonic, 'https://mainnet.infura.io'),
      network_id: '*',
      gas: 4500000,
      gasPrice: 25000000000
    }
  }
}

Then just set the network option when deploying:

truffle migrate --reset --network=rinkeby

In the UI, here's how to set the Web3 HTTP provider to infura:

if (typeof web3 !== 'undefined') {
    window.web3 = new Web3(web3.currentProvider)
} else {
    window.web3 = new Web3(new Web3.providers.HttpProvider('https://rinkeby.infura.io:443'))
}
  • Don't you need to add your infura api code to the url's? – Andrey Jul 18 '18 at 20:13
  • @Andrey at the time of writing this post it wasn't required but you may be right – Miguel Mota Jul 18 '18 at 20:50
3

Here's a tutorial by truffle on this: https://truffleframework.com/tutorials/using-infura-custom-provider

I figure storing and handling the mnemonic is pretty risky though (as it will give full control over the whole wallet)

For me, using Infura as an HTTPProvider as suggested in the reply above didn't work, so I also had to:

var HDWalletProvider = require("truffle-hdwallet-provider");
var mnemonic = 'xxx xxx xxx... ';

var hd = new HDWalletProvider(mnemonic, "https://ropsten.infura.io/v3/xxxxyyyzzz");    
window.web3 = new Web3(hd); 
  • Two suggestions to make this the best answer. First, use dotenv to save the mnemonic and infura API key in an uncomitted file .env. Second, it only workied for me after changing to v1 instead of v3. – madhat1 Dec 27 '18 at 8:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.