useDApp: Create a dApp using useDApp and IPFS

This guide was originally published on https://docs.filebase.com. Check out the Filebase documentation site for the latest Web3 tutorials using IPFS through Filebase.

Learn how to create a dApp using useDApp and IPFS.

What is useDApp?

useDApp is a framework designed for rapid dApp development, built using the Ethereum blockchain and React. UseDApp makes it simple to implement features such as connecting your wallet, switching between networks, and tracking transaction history within your dApp. It offers a number of templates and example apps to help you get started.

Read below to learn how to create a dApp using useDApp and IPFS.

Prerequisites:

• A crypto wallet, such as MetaMask.
• ​Install Node.js and npm.
• ​Install yarn.​
• Download and install an IDE of your choice, such as VSCode.
• ​Sign up for a free Filebase account.

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, upload some images you’d like to display on your dApp.

These can be icons, photographs, or pieces of artwork. In this tutorial, we’ll upload a logo, a photograph, and a piece of art, for a total of 3 objects.

5. Take note of the CID for each of these objects.

The CID can be found under the ‘CID’ column, or within the metadata of each object. We’ll reference these objects by their CID within our dApp.

6. Open a terminal or command-line interface.

Enter the following yarn command to create a new directory called my-dapp and install the default files for an Ethereum dApp:

yarn create eth-app my-dapp

7. Start your dApp with the following command:

yarn react-app:start

8. Your app will be running at http://localhost:3000.

By default, it’ll look like this:

9. Navigate to the my-dapp/packages/react-app/src/App.js file.

Open this file in your preferred IDE to edit. Replace the existing content with the following:

import { useQuery } from "@apollo/client";
import { Contract } from "@ethersproject/contracts";
import { shortenAddress, useCall, useEthers, useLookupAddress } from "@usedapp/core";
import React, { useEffect, useState } from "react";

import { Body, Button, Container, Header, Image, Link } from "./components";

import { addresses, abis } from "@my-app/contracts";
import GET_TRANSFERS from "./graphql/subgraph";

function WalletButton() {
  const [rendered, setRendered] = useState("");

  const ens = useLookupAddress();
  const { account, activateBrowserWallet, deactivate, error } = useEthers();

  useEffect(() => {
    if (ens) {
      setRendered(ens);
    } else if (account) {
      setRendered(shortenAddress(account));
    } else {
      setRendered("");
    }
  }, [account, ens, setRendered]);

  useEffect(() => {
    if (error) {
      console.error("Error while connecting wallet:", error.message);
    }
  }, [error]);

  return (
    <Button
      onClick={() => {
        if (!account) {
          activateBrowserWallet();
        } else {
          deactivate();
        }
      }}
    >
      {rendered === "" && "Connect Wallet"}
      {rendered !== "" && rendered}
    </Button>
  );
}

function App() {
  // Read more about useDapp on <https://usedapp.io/>
  const { error: contractCallError, value: tokenBalance } =
    useCall({
       contract: new Contract(addresses.ceaErc20, abis.erc20),
       method: "balanceOf",
       args: ["0x3f8CB69d9c0ED01923F11c829BaE4D9a4CB6c82C"],
    }) ?? {};

  const { loading, error: subgraphQueryError, data } = useQuery(GET_TRANSFERS);

  useEffect(() => {
    if (subgraphQueryError) {
      console.error("Error while querying subgraph:", subgraphQueryError.message);
      return;
    }
    if (!loading && data && data.transfers) {
      console.log({ transfers: data.transfers });
    }
  }, [loading, subgraphQueryError, data]);

  return (
    <Container>
      <Header>
        <WalletButton />
      </Header>
      <Body>
        <Image src={"https://ipfs.filebase.io/ipfs/IPFS_CID"} alt="dapp-logo" />
        <p>
          Welcome to your dApp, powered by useDapp and IPFS!
        </p>
        <p>
          Check out this NFT Artwork!
        </p>
          <Image src={"https://ipfs.filebase.io/ipfs/IPFS_CID"} />
        <p>
          Look at this photo of my dogs!
          </p>
          <Image src={"https://ipfs.filebase.io/ipfs/IPFS_CID"} />
      </Body>
    </Container>
  );
}

export default App;

Replace the values IPFS_CID with the CIDs from the IPFS objects you uploaded to Filebase.

Here’s what your app should look like after:

The exciting thing about this dApp is that it includes the functionality to connect your wallet to the app, as seen by the ‘Connect Wallet’ button in the top right corner.

This means that from here, you can design a dApp that utilizes this button, allowing users to connect their wallet to the app and display assets, check wallet balances, and even send transactions!

Want to learn more about Filebase? You can sign up for a free account today to get started with IPFS.