6

As described in metamask github, one can bootstrap metamask like this:

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask) if (typeof web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    window.web3 = new Web3(web3.currentProvider);   } else {
    console.log('No web3? You should consider trying MetaMask!')
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));   }

  // Now you can start your app & access web3 freely:   startApp()

})

How do I implement in angular 2 typescript, and where do I hookup this metamask web3 inject so that it will popup the metamask wallet whenever I trigger web3.eth.sendTransaction()

3

The simpliest way to do this is to edit main.ts

and replace

platformBrowserDynamic().bootstrapModule(AppModule);

by

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof window.web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    window.web3 = new Web3(window.web3.currentProvider);
  } else {
    console.log('No web3? You should consider trying MetaMask!')
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }

  platformBrowserDynamic().bootstrapModule(AppModule);

});

then create a service and do

declare global {
  interface Window { web3: any; }
}

window.web3 = window.web3 || {};

@Injectable()
export class Web3Service {

  web3: any;

  constructor() {
    this.web3 = window.web3;
  }

  getWeb3() {
    return this.web3;
  }
| improve this answer | |
  • 1
    I get this error: ERROR in src/main.ts(15,21): error TS2339: Property 'web3' does not exist on type 'Window'. – chelo_c Apr 6 '18 at 15:49
0

Oraclize's StackExchange Bounty ÐApp might be good to use as an example. It's deployed, but doesn't seem to get much use. It uses an Angular2 front-end. (I'm sure there are lots of others, but this is the only one I've played with.)

Specifically, take a look at how the web3.service.ts Typescript file handles MetaMask connections in its @Injectable (line 161):

connectToNode(): void { // Don't unlock until you send a transaction
    if (typeof window['web3'] !== 'undefined' && (!localStorage['nodeIP'] || this.nodeIP === 'MetaMask')) {
        localStorage['nodeIP'] = this.nodeIP;
        console.log('Using injected web3');
        this.web3 = new this.Web3(window['web3'].currentProvider);
        this.nodeIP = 'MetaMask';
        this.nodeConnected = true;
        this.unlockedAccount = 'MetaMask';
        this.update.emit(null);
    } else {
        localStorage['nodeIP'] = this.nodeIP;
        console.log('Using HTTP node');
        this.unlockedAccount = undefined;
        this.web3 = new this.Web3(new this.Web3.providers.HttpProvider(this.nodeIP));
        this.handleConnection(this.web3.isConnected());
    }
}

You'll have to look at how their whole project is set up to get an idea of services, etc., but it's a good place to start.

| improve this answer | |
  • thank you for your hint, the SEBouty Dapp is too old and obsolete with angular2 rc5, i can not install successfully the project. I just need some guid how to use the window object to hook up the MetaMask injected web3 that i saw when the page load, i just need to know how to rewrite above piece of code in typescript – Leean Jun 30 '17 at 4:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.