React typescript - how to fix a white screen?

Viewed 23

I try to build a full stack de-fi dApp from this video: https://www.youtube.com/watch?v=M576WGiDBdQ&t=37395s. The Full-stack app starts from 12:48:06.

I'm trying to build a button for connecting your wallet, but when I start yarn start , I have a white screen.

App.tsx

import React from 'react';
import { ChainId, DAppProvider } from '@usedapp/core';
import { Header } from "./components/header";
import { Container } from '@mui/material';
import { Main } from "./components/Main"

function App() {
  return (
    <DAppProvider config={{
      supportedChains: [ChainId.Goerli]
    }}>
      <Header />
      <Container maxWidth="md">
        <div>Hiiiiiiii</div>
        <Main />
      </Container>
    </DAppProvider>
  );
}

export default App;

header.tsx

import { Button } from "@mui/material"
import { makeStyles } from "@mui/styles"
import { useEthers } from "@usedapp/core"
import { Theme } from '@mui/material/styles';
import { ThemeProvider } from "@mui/material";

const useStyles = makeStyles((theme: Theme) => ({
    container: {
        padding: theme.spacing(4),
        display: "flex",
        justifyContent: "flex-end",
        gap: theme.spacing(1)
    },
}))


export const Header = () => {

    const classes = useStyles()

    const { account, activateBrowserWallet, deactivate } = useEthers()

    const isConnected = account !== undefined

    return (
        <div className={classes.container}>
            <div>
                {isConnected ? (
                    <Button
                        color="primary"
                        variant="contained"
                        onClick={deactivate}>
                        Disconnect
                    </Button>
                ) : (
                    <Button
                        color="primary"
                        variant="contained"
                        onClick={() => activateBrowserWallet()}>
                        Connect
                    </Button>
                )}
            </div>
        </div>
    )
}

White screen with error enter image description here

0 Answers
Related