Metamask avec Web3.js 1.0.0 ET le vieux Web3.js

Vendredi 20 avril 2018 - Ethereum - Blockchain

On peut utiliser Metamask avec la dernière version de Web3.js. ET on peut utiliser en même temps la vieille version. Pourquoi et comment ?

Web3.js version 1 Metamask

Utiliser Web3.js avec Metamask MAINTENANT

Web3.js version 1.0.0 est largement supérieur à la vieille version dans bien des domaines. Une des améliorations que j'apprécie le plus sont les PromiEvent. Ceci vous permet par exemple de suivre le cycle complet sur la blockchain d'une transaction Ethereum. C'est super. Quand c'est couplé avec React.js (par exemple), c'est encore plus impressionnant.

Mais actuellement, Metamask injecte le bon vieux Web3.js version 0.20.x et ces fonctionnalités cool ne sont pas dedans.

En fait il est très simple d'utiliser le dernier build de Web3 1.0.0, tout en conservant la gestion des comptes et la connection au Node distant fournis par Metamask. D'abord téléchargez le dernier build de Web3.js 1.0.0. Ensuite chargez-le :

...
    <script src="web3.js"></script>
  </body>
</html>

Remplacez l'ancienne version injectée par Metamask par la toute nouvelle, tout en conservant la gestion des comptes et le node :

// If the browser has injected Web3.js
if (window.web3) {
  // Then replace the old injected version by the latest build of Web3.js version 1.0.0
  window.web3 = new Web3(window.web3.currentProvider);
}

Enfin vous pouvez utiliser tout ça comme dans la documentation de Web3.js 1.0.0. Par exemple, vous pouvez maintenant utiliser le super PromitEvent dont je parlais plus haut :

const myContract = new window.web3.eth.Contract (
  myContractAbi,
  myContractAddress
);
...
myContract.methods.myMethod().send()
.on('transactionHash', function(hash){
  ...
})
.on('receipt', function(receipt){
  ...
})
.on('confirmation', function(confirmationNumber, receipt){
  ...
})
.on('error', console.error);

That's it!

ET utiliser le bon vieux Web3.js injecté

J'entends comme des critiques par là :

C'est cool, mais maintenant je ne peux plus subscribe aux events ni watch() quoi que ce soit sur la blockchain!!! Je pouvais le faire avec le vieux Web3.js injecté par Metamask, remboursez!!! Si seulement on avait le meilleur des deux mondes en même temps, et tout de suite!

C'est le cas ;)

// If the browser has injected Web3.js
if (window.web3) {
  // Then backup the good old injected Web3, sometimes it's usefull:
  window.web3old = window.web3;
  // And replace the old injected version by the latest build of Web3.js version 1.0.0
  window.web3 = new Web3(window.web3.currentProvider);
}

Maintenant vous pouvez utiliser à nouveau les bonnes vieilles fonctionalités de l'ancienne version qui ne sont pas encore disponibles dans la nouvelle, avec Metamask du moins, comme par exemple :

const myContractOldWeb3Object = window.web3old.eth.contract (myContractAbi));
const myContractOldWeb3 = myContractOldWeb3Object.at (myContractAddress),
var myEvent = myContractOldWeb3.MySolidityEvent();
myEvent.watch (
  (err, event) => {
    if (err) console.error (err);
    else {
      ... do something with event
    }
  }
);

Bon code!

Ajouter un commentaire