React + Web3.js + Bootstrap으로 연결 지갑 버튼 만들기

import 'bootstrap/dist/css/bootstrap.css';

import React from 'react';
import Web3 from "web3";
import { Button } from 'react-bootstrap';
import { Wallet } from 'react-bootstrap-icons';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      web3: null,
      currentAccount: null,
      ethBalance: 0,
      networkId: null
    };
  }

  componentDidMount = async () => {
    this.connectWalletHandler();
  };

  connectWalletHandler = async () => {
    try {
      const web3 = new Web3(Web3.givenProvider);
      this.setState({ web3: web3});
      const accounts = await web3.eth.requestAccounts();
      if (accounts.length !== 0) {
        const networkId = await web3.eth.net.getId();
        const ethBalance = await web3.eth.getBalance(accounts[0]);
        this.setState({currentAccount: accounts[0], ethBalance: Web3.utils.fromWei(ethBalance), networkId: networkId});
      } 
    } catch (error) {
      console.error(error);
    }
  }

  connectedWallet = () => {
    return (
      <div>
        <p>{parseFloat(this.state.ethBalance).toFixed(4)} ETH</p>
        <p>{this.state.currentAccount.slice(0,5)+'...'+this.state.currentAccount.slice(38,42)}<br />WALLET CONNECTED</p>
      </div>
    )
  }

  connectWalletButton = () => {
    return (
      <Button variant="outline-primary" onClick={() => this.connectWalletHandler()}><Wallet />&ensp;Connect wallet</Button>
    )
  }

  render() {
    return (
      <div className="App">
         {this.state.currentAccount ? this.connectedWallet() : this.connectWalletButton()}
      </div>
    );
  }
}

export default App;