import { ApolloProvider } from '@apollo/client' ; import { ChakraProvider } from '@chakra-ui/react' ; import { ChainId , Config , DAppProvider , MULTICALL_ADDRESSES , } from '@usedapp/core' ; import type { AppProps } from 'next/app' ; import React from 'react' ; import { MulticallContract } from '../artifacts/contracts/contractAddress' ; import { useApollo } from '../lib/apolloClient' ; export const INFURA_ID = '460f40a260564ac4a4f4b3fffb032dad' ; const config = { readOnlyUrls : { [ ChainId . Ropsten ] : `https://ropsten.infura.io/v3/${ INFURA_ID }` , [ ChainId . Hardhat ] : 'http://localhost:8545' , [ ChainId . Localhost ] : 'http://localhost:8545' , } , supportedChains : [ ChainId . Mainnet , ChainId . Goerli , ChainId . Kovan , ChainId . Rinkeby , ChainId . Ropsten , ChainId . xDai , ChainId . Localhost , ChainId . Hardhat , ] , multicallAddresses : { ... MULTICALL_ADDRESSES , [ ChainId . Hardhat ] : MulticallContract , [ ChainId . Localhost ] : MulticallContract , } , } ; const MyApp = ( { Component , pageProps } ) : JSX . Element => { const apolloClient = useApollo ( pageProps ) ; return ( < ApolloProvider client = { apolloClient } > < DAppProvider config = { config } > < ChakraProvider > < Component { ... pageProps } / > < /ChakraProvider> < /DAppProvider> < /ApolloProvider>); } ; export default MyApp ;