Looking for a boilerplate (No Metamask) Infura+React

Questions
1

Hi,

I’m trying to connect an electron/react dapp to a testnet using Infura . But I’m having a hard time trying to achieve that because I think the docs are not enough clear for my level. Also all the tutorials that I have found they use metamask as a web3provider. In my dapp I can’t use metamask so I will love to connect to my smartcontract using only Infura and web3. Is this possible? May you be kind to show me some code where that is achieved?

Thank you for your help.

2

Thanks for reaching out, can you explain why you can’t use MetaMask? This will help us suggest a solution.

3

Hi Mike,

Thank you for your support.

I cannot use metamask because my dapp is projected to run in an based electron standalone program. Since electron runs in a chromiun environment, there is not way to install the Metamask extension in that conditions.

4

Have you seen https://github.com/portis-project/web-sdk/blob/master/README.md

This could be a good solution

5

Thank you Mike. But I’m looking, if possible of course, using infura for that task. It’s possible, isn’t it?

6

In portis docs:

Browser support

For security reasons, Portis supports “evergreen” browsers - the last versions of browsers that automatically update themselves.

No support for Chromium.

By the way. Portius will ask to my user for login within their app. I must avoid that.

7

You can try https://github.com/ethers-io/ethers.js/ for wallet functionality, but not sure that provides react components. If that doesn’t work, I suggest asking around amongst other Chromium devs.

8

Thank you Mike,

I pretty sure that must exist a solution with infura+web3 to communicate with smart contracts.
Perhaps somebody know how connects this in a react component.

Thank you again.

9

@abraxas check out the Truffleboxes from the Truffle Framework team if you havent already https://truffleframework.com/boxes

10

Hi egalano,

Thank for the advice.

I have seen in truffle tutorial already, but all the examples assume that you are in a browser with metamask.

Currently, I’m trying this snippet:

import React from 'react';
import Web3 from 'web3';
import HDWalletProvider from "truffle-hdwallet-provider";
import Truffle-contract from "truffle-contract";

const mnemonic = '... all that 12 words';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      account: '0x0'
    }

    this.hd = new HDWalletProvider(mnemonic, 'https://rosten.infura.io/v3/{my_apikey}');
    this.web3 = new Web3(this.hd);
  }

  componentDidMount(){
    this.web3.eth.getCoinbase((err, account) => {
      this.setState({account});
    }
  }

  render(){
    return(<div>{this.state.account}</div>)
  }
}

export default App;

If a replace the URI of the infura’s enterpoint for a localhost node made with ganache the code works. But like the above I get this error:

Provider not set or invalid.

11