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
