import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react'
import { Web3ReactProvider } from '@web3-react/core'
import React from 'react'
import { RefreshContextProvider } from './contexts/RefreshContext'
import { StepContextProvider } from './contexts/StepContext'
import { ViewportProvider } from './contexts/ViewportContext'
import defaultTheme from './styles/theme'
import { getLibrary } from './utils/web3React'

interface IDappProvidersProps {
  children: React.ReactNode
  theme: ChakraProviderProps
  resetCSS: boolean
}

const DappProviders: React.FunctionComponent<IDappProvidersProps> = ({ theme = {}, children, resetCSS = true }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <ChakraProvider theme={{ ...defaultTheme, ...theme }} resetCSS={resetCSS}>
        <ViewportProvider>
          <StepContextProvider>
            <RefreshContextProvider>{children}</RefreshContextProvider>
          </StepContextProvider>
        </ViewportProvider>
      </ChakraProvider>
    </Web3ReactProvider>
  )
}

export default DappProviders