I'm getting an error message. I set my tsconfig.json to use "es2017" for await. It's still not compiling. Have no idea how to configure Web3Modal to a Button.
Link to GitHub: https://github.com/GoGetterMeme/usedapp
./src/App.tsx 30:17 Module parse failed: Cannot use keyword 'await' outside an async function (30:17) File was processed with these loaders:
- ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
- ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | });
const provider = await web3Modal.connect(); | const web3 = new Web3(provider); |>
import React from 'react';
import { ChainId, DAppProvider } from "@usedapp/core";
import { Box, Button, Container } from "@material-ui/core";
import Web3 from "web3";
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";
const providerOptions = {
walletconnect: {
package: WalletConnectProvider, // required
options: {
infuraId: process.env.REACT_APP_INFURA_ID // required
}
}
};
const web3Modal = new Web3Modal({
network: "rinkeby", // optional
cacheProvider: true, // optional
providerOptions // required
});
const provider = await web3Modal.connect();
const web3 = new Web3(provider);
function App() {
return (
<DAppProvider config={{
supportedChains: [ChainId.Rinkeby],
notifications: {
expirationPeriod: 1000,
checkInterval: 1000
}
}}>
<Container maxWidth="md">
<Box>
<Button variant="contained" color="primary">Connect</Button>
</Box>
</Container>
</DAppProvider>
)
}
export default App