Lesson 13: Clicking on Connect Button does not load Metamask

[gaussiao]

After putting the CONNECT/DISCONNECT buttons from the video at 14:26:49 , I was unable to load Metamask when I clicked on CONNECT. I also encountered the following warning, which occured when I first used the DAppProvider wrapper in 14:20:19:

WARNING in ./node_modules/@metamask/detect-provider/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/gaussiao/demos/defi-stake-yield-brownie/front_end/node_modules/@metamask/detect-provider/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/gaussiao/demos/defi-stake-yield-brownie/front_end/node_modules/@metamask/detect-provider/src/index.ts'
 @ ./node_modules/@usedapp/core/dist/esm/src/helpers/injectedProvider.js 2:0-63 4:33-55
 @ ./node_modules/@usedapp/core/dist/esm/src/providers/injectedNetwork/provider.js 4:0-69 19:4-23
 @ ./node_modules/@usedapp/core/dist/esm/src/providers/injectedNetwork/index.js 2:0-27 2:0-27
 @ ./node_modules/@usedapp/core/dist/esm/src/providers/index.js 6:0-34 6:0-34
 @ ./node_modules/@usedapp/core/dist/esm/src/index.js 2:0-28 2:0-28
 @ ./src/App.tsx 5:0-54 12:30-42 14:24-37 14:39-54
 @ ./src/index.tsx 7:0-24 11:33-36

A search under the node_modules/@metamask folder confirmed that the index.js file was missing. These were the files that were present in the folder:

My Main.tsx:

import {useEthers} from "@usedapp/core"
import helperConfig from "../helper-config.json"

export const Main = () => {
        // Show token values from the wallet
    // Get the address of different tokens
    // Get the balance of the users wallet

    // send the brownie-config to our `src` folder
    // send the build folder
    const {chainId} = useEthers()
    const networkName = chainId ? helperConfig[chainId] : "dev"
    // const dappTokenAddress 
    console.log(chainId)
    console.log(networkName)
    return (<div>Hi!</div>)
}

Header.tsx:

import {useEthers} from "@usedapp/core"
import {Button, makeStyles} from "@material-ui/core"
import { Container } from "@material-ui/core"

const useStyles = makeStyles((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}>
            {isConnected ? (
                <Button color="primary" variant="contained"
                    onClick={deactivate}>
                    Disconnect
                </Button>
            ) : (
                <Button color="primary" variant="contained"
                    onClick={() => activateBrowserWallet}>
                    Connect
                </Button>
            )}

        </div>
    )
}

App.tsx:

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

function App() {
  return (
    <DAppProvider config={{ 
      supportedChains: [ChainId.Kovan, ChainId.Rinkeby]
    }}>
      <Header/>
      <Container maxWidth="md">
      <div>Hi!</div>
      <Main />
      </Container>

    </DAppProvider>
  );
}

export default App;

Does anyone have a solution to this problem? I suspect I need to install the missing index.ts somewhere via a command line, or create it manually, but I don't know the contents of this file. Been trying to find a solution for a few days now, and not being able to connect to a testnet via Metamask is preventing me from continuing with the rest of the video(so close to the end!), so I'd appreciate any help I can get.

[david-randoll]

I have the same issue. Did you find a solution?

[gaussiao]

@david-randoll Unfortunately, no. I'm currently reading up on some other documentation to learn more about Solidity. I'll come back to this problem in a few weeks