Error: supportedChain is deprecated, please pass networks instead

Question

I'm going through the freecodecamp Patrick Collins tutorial on creating front ends for Ethereum smart contracts and I don't know why when I open up the localhost console I get an error.

supportedChain is deprecated, please pass networks instead

I have already installed metamask/detect provider

npm i @metamask/detect-provider

Here's the app.tsx script here:

import './App.css';
import { DAppProvider, ChainId, useEthers, Config, Kovan} from '@usedapp/core';
import {Header} from "./components/Header";
import { YourWallet } from './components/yourWallet';
import {Container} from "@material-ui/core";
import { Main } from "./components/Main";


function App() {
  return (
    <DAppProvider config={{
      supportedChains: [ChainId.Kovan], 
      notifications: {
        expirationPeriod: 1000, 
        checkInterval: 1000
      }
    }}>
      <Container maxWidth="md">
      <Header />
      <Main />
        
      </Container>
      
    </DAppProvider>
  );
}

export default App;

If anyone can help out, that would be really helpful :)

Answer 1

Error is so clear. instead of supportedChains use networks

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <DAppProvider
      config={{
        networks: [Kovan],
        notifications: {
          expirationPeriod: 1000,
          checkInterval: 100,
        },
      }}
    >
      <Component {...pageProps} />
    </DAppProvider>
  );
}