Infura: Build dApp Frontends with Infura, React, and IPFS

Learn how to build dApp Frontends with Infura, React, and IPFS

What is Infura?

Infura is a blockchain development platform that enables developers to create decentralized application projects and connect them to different blockchain networks such as the Ethereum and Polygon networks.

Read below to learn how to build dApp Frontends with Infura, React, and IPFS.

Prerequisites:

• A crypto wallet, such as MetaMask.

• Install Node.js and npm.

• Sign up for a free Filebase account.

• Have your Filebase Access and Secret Keys. Learn how to view your access keys here.

1. First, we need a Filebase IPFS bucket.

To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.

2. Select ‘Buckets’ from the left side bar menu, or navigate to console.filebase.com/buckets.

Select ‘Create Bucket’ in the top right corner to create a new bucket.

3. Enter a bucket name and choose the IPFS storage network to create the bucket.

Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.

4. Next, open a command line prompt and create a new project directory:

mkdir dapp-project && cd dapp-project

5. Initiate your NPM environment and install the Create React App and OpenZeppelin NetworkJS packages:

npm init -y

npm install @openzeppelin/network

npm -g install create-react-app

6. Now let’s create the initial version of our dApp using a common React boilerplate called create-react-app:

npx create-react-app client

7. Next, login to the Infura.io console. Create a new project.

8. Select the Ethereum network, and give your project a name.

9. In the Project settings, select "Ropsten” from the endpoint dropdown menu.

10. Then, take down the Project ID. You will need this in the next step.

11. In your project directory, navigate into the client directory that was created automatically by the create-react-app client command, and open the src/App.js file.

Replace the placeholder code with the following content:

import React from 'react';
import './App.css';
import { useWeb3 } from '@openzeppelin/network/react';
const infuraProjectId = 'INFURA_PROJECT_ID';
function App() {
const web3Context = useWeb3(`wss://ropsten.infura.io/ws/v3/${infuraProjectId}`);
const { networkId, networkName, providerName } = web3Context;
return (
<div className="App">
	<div>
	<h1>Infura + IPFS dApp</h1>
		<div>
    	Network: {networkId ? `${networkId} – ${networkName}` : 'No connection'}
		</div>
		<div>
		Provider: {providerName}
		</div>
	</div>
</div>
);
}
export default App;

Replace INFURA_PROJECT_ID with the Infura project ID you previously took note of.

12. Start your app by using the npm start command while within the ./client directory of your project.

Your browser will open a new window at localhost:3000 displaying your dApp.

13. In the ./client/src directory, create a new directory called components, and inside that directory create a file called Web3Data.js with the following content:

import React from 'react';
export default function Web3Data(props) {
const { web3Context } = props;
const { networkId, networkName, providerName } = web3Context;
return (
<div>
	<h3> {props.title} </h3>
	<div>
    Network: {networkId ? `${networkId} – ${networkName}` : 'No connection'
	</div>
	<div>
	Provider: {providerName}
	</div>
</div>
);
}

14. Open the ./client/src/App.js file and replace the existing content with the following code, which includes a new function to use the Web3Data.js script we just created:

import React from 'react';
import './App.css';
import { useWeb3 } from '@openzeppelin/network/react';
import Web3Data from './components/Web3Data.js';

const infuraProjectId = '58ca3b707c994865851141ed035677fd';
function App() {
  const web3Context = useWeb3(`wss://ropsten.infura.io/ws/v3/${infuraProjectId}`);
  return (
  <div className="App">
    <div>
    <h1>Infura + IPFS dApp</h1>
    <Web3Data title="Web3 Data" web3Context={web3Context} />
    </div>
  </div>
  );
}
export default App;

15. Start your dApp again with the npm start command.

Your browser will open the localhost:3000 webpage again, this time with a new piece of code that includes a ‘Request Access’ button. Clicking this button will trigger the Metamask plugin to request authentication with the webpage. Choose the ‘Connect’ option in the Metamask plugin, then view the localhost:3000 webpage that will reflect your Metamask address:

16. From here, you can style your app using a .css file and image files.

To do this, we’ll use files stored on IPFS. Head back to your Filebase IPFS bucket that we created at the start of this tutorial. Select the ‘Upload’ option.

17. From here, we can upload a .css theme file, and we’ll also upload an image file.

Take note of the IPFS CID for each, listed in the CID column seen above.

18. Then, edit your App.js file to include these IPFS Files:

import React from 'react';
import 'https://ipfs.io/ipfs/CSS_THEME_IPFS_CID';
import { useWeb3 } from '@openzeppelin/network/react';
import Web3Data from './components/Web3Data.js';

const infuraProjectId = '58ca3b707c994865851141ed035677fd';
function App() {
  const web3Context = useWeb3(`wss://ropsten.infura.io/ws/v3/${infuraProjectId}`);
  return (
  <div className="App">
    <div>
    <h1>Infura + IPFS dApp</h1>
    <Web3Data title="Web3 Data" web3Context={web3Context} />
    </div>
    <div>
    <img src="https://ipfs.filebase.io/ipfs/[IMAGE_IPFS_CID]"
    </div>
  );
}
export default App;

Replace CSS_THEME_IPFS_CID with the CID associated with your uploaded CSS theme, and replace IMAGE_IPFS_CID with the CID associated with your uploaded file.

Restart your app to see your changes reflected in the browser. From here, you can style your dApp however you’d like, and set up additional features such as an NFT marketplace, or create a dApp that uses wallet authentication for logging into the app. The possibilities are endless!