Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

304
Views
How to connect with wallet MetaMask in angular uing web3?

I am implementing the code in angular to connect with crypto wallet on button click, I have also installed the web3 but I don't know how to remove the error and use the code init.

connectWallet(){

    let web3; 
    let ethereum = window.ethereum;

    if (typeof window.web3 !== 'undefined') {
         web3 = new Web3(window.web3.currentProvider);
      } else {
         web3 = new Web3.providers.HttpProvider(localprovide);
      }

     // ethereum = new Web3(window.ethereum);

     ethereum.enable().then(async (accounts) => {
       // console.log('transfer called.........', accounts[0]);
        localStorage.setItem('account', accounts[0]);
      });

      if (window.web3) {
        // Subscription register
        ethereum.on('accountsChanged', async (accounts) => {
            // Reload to avoid MetaMask bug: "MetaMask - RPC Error: Internal JSON-RPC"
            window.location.reload();
        });

        window.ethereum.on('networkChanged', async (network) => {
            window.location.reload();
        });
    }
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

In app component OnInit:

declare const web3: any;
declare const Web3: any;

  public ngOnInit() {
    if (typeof web3 !== 'undefined') {
      // Use Mist/MetaMask's provider
      this.web3Service.web3Instance = new Web3(web3.currentProvider);
      this.web3Service.initContractInstance();

    } else {
      // Handle the case where the user doesn't have web3. Probably
      // show them a message telling them to install Metamask in
      // order to use our app.
    }
  }

Web3Services:

@Injectable()
export class Web3Service {
  private contractAddress = "your Contract Address";
  public contractInstance: any;
  public web3Instance: any;


  public initContractInstance() {
    this.contractInstance = new this.web3Instance.eth.Contract(ABI, this.contractAddress);
  }

  public getAccounts(): Promise<any> {
    return this.web3Instance.eth.getAccounts()
  }

  public signUp(account: string): Promise<any> {
    return this.contractInstance.methods.signUp()
      .send({ from: account, value: this.web3Instance.utils.toWei(PRICES.signUp, 'ether') })
  }
}

In component where you want to call some method that needs account:

export class WelcomeComponent implements OnInit {

  constructor(private web3Service: Web3Service) {
  }

  ngOnInit(): void {
  }

  public connectWallet() {
    if (!ethEnabled()) {
      console.log("Need to download Wallet")
    } else {
      from(this.web3Service.getAccounts())
        .subscribe(accounts => {
          this.web3Service.signUp(accounts[0])
            .then(result => {
              console.log(result)
            })
        })
    }
  }
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!