First edits made like in the video.

packages/react-app/src/index.js

@@ -1,37 +1,17 @@
-import "./index.css";
-
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
-import { DAppProvider, Mainnet } from "@usedapp/core";
 import React from "react";
 import ReactDOM from "react-dom";
+import { DAppProvider } from "@usedapp/core";
 
 import App from "./App";
+import { DAPP_CONFIG } from "./config";
 
-// IMPORTANT, PLEASE READ
-// To avoid disruptions in your app, change this to your own Infura project id.
-// https://infura.io/register
-const INFURA_PROJECT_ID = "529670718fd74cd2a041466303daecd7";
-const config = {
-  readOnlyChainId: Mainnet.chainId,
-  readOnlyUrls: {
-    [Mainnet.chainId]: "https://mainnet.infura.io/v3/" + INFURA_PROJECT_ID,
-  },
-}
-
-// You should replace this url with your own and put it into a .env file
-// See all subgraphs: https://thegraph.com/explorer/
-const client = new ApolloClient({
-  cache: new InMemoryCache(),
-  uri: "https://api.thegraph.com/subgraphs/name/paulrberg/create-eth-app",
-});
+import "./index.css";
 
 ReactDOM.render(
   <React.StrictMode>
-    <DAppProvider config={config}>
-      <ApolloProvider client={client}>
-        <App />
-      </ApolloProvider>
+    <DAppProvider config={DAPP_CONFIG}>
+      <App />
     </DAppProvider>
   </React.StrictMode>,
-  document.getElementById("root"),
-);
+  document.getElementById("root")
+);