Aleph Zero Snap : Intégration des utilisateurs Web3 au réseau Aleph Zero

MetaMask Snaps est la feuille de route pour faire de MetaMask le wallet le plus extensible au monde. En tant que développeur, vous pouvez intégrer vos fonctionnalités et vos API à MetaMask de manières totalement nouvelles. Les développeurs Web3 sont au cœur de cette croissance, et cette série vise à mettre en lumière les MetaMask Snaps innovants qui se construisent aujourd'hui.

Aleph Zero Snap avec Piotr et Michael

Nous discutons avec les développeurs Web3 Piotr et Michael, qui ont créé l'Aleph Zero Snap lors de l'ETHWarsaw Hackathon.

Dépôt du Snap : https://github.com/piotr-roslaniec/ethwarsaw-2022/tree/main/azero-snap/packages/snap-adapter

Pourquoi l'avez-vous créé ?

De notre point de vue, l'expérience wallet dans l'écosystème Polkadot laisse encore à désirer. Par ailleurs, l'intégration avec MetaMask Snaps pourrait permettre d'accueillir une population existante d'utilisateurs Web3 sur le réseau Aleph Zero.

Pouvez-vous nous expliquer la mise en œuvre technique ?

L'Adapter

Notre snap est composé de deux parties. La première est un site web avec lequel les utilisateurs interagissent. La seconde est le Snap lui-même. Ces deux éléments fonctionnent de manière similaire à une architecture client-serveur, où le snap joue le rôle de serveur et le site web celui de client. Pour refléter cette frontière naturelle, nous avons extrait l'API du snap dans un package séparé appelé adapter. Il expose toutes les méthodes que le site web peut utiliser pour interagir avec le snap. Cette couche d'abstraction facilite l'utilisation du Snap par d'autres clients (sites web). Notre API peut être décrite par quatre méthodes dont les noms sont assez explicites. Si vous souhaitez approfondir, voici le code complet.

export const getAccountFromSeed = async (seed: string): Promise<PublicAccount> => {
  return await requestSnap("getAccountFromSeed", [seed]);
}

export const generateNewAccount = async (): Promise<PublicAccount> => {
  return await requestSnap("generateNewAccount", []);
}

export const signTransaction = async (transaction: SignerPayloadJSON): Promise<{ signature: string }> => {
  return await requestSnap("signTransaction", [transaction as unknown as string]);
}

export const getAccounts = async (): Promise<string[]> => {
  return await requestSnap("getAccounts", []);
}
Copier

L'application

Maintenant que nous avons expliqué le lien entre nos couches, passons à la première couche : le site web. Nous avons forké l'application Polkadot officielle basée sur navigateur. Nous avons ensuite dû remplacer les fonctionnalités essentielles telles que la signature de transactions, la création de comptes ou leur récupération, en passant du wallet basé sur navigateur au wallet basé sur le Snap. Par exemple, pour signer des transactions dans MetaMask, nous avons modifié l'implémentation de QrSigner afin d'utiliser signTransaction du Snap à la place.

L'intégration de MetaMask Snap avec l'application Polkadot a apporté deux améliorations :

• Premièrement, elle a permis d'hériter du modèle de sécurité de l'extension MetaMask plutôt que d'utiliser le wallet de l'application Polkadot, qui repose sur le stockage local.

• Deuxièmement, nous avons pu utiliser la seed MetaMask pour créer une application Polkadot de manière déterministe, de sorte que lors de l'export de notre seed, la clé Aleph Zero soit également exportée.

L'API MetaMask

MetaMask fournit des appels API que les MetaMask Snaps peuvent utiliser si l'utilisateur les autorise. Dans ce cas, nous en avons exploité deux :

snap_manageState - qui nous permet de stocker des données chiffrées dans MetaMask. Par exemple, nous l'utilisons pour stocker les comptes créés. L'interaction avec l'état est très simple et peut se résumer à :

const request = async (method: 'clear' | 'get' | 'update', newState?: unknown): Promise<any> => {
if (['get', 'clear'].includes(method) && newState) {
    throw new Error(`Cannot ${method} with newState`);
}
if (method == 'update' && !newState) {
    throw new Error('Cannot call update without newState');
}

const params = newState ? [method, newState] : [method];
return await wallet.request({
    method: `snap_manageState`,
    params,
  });
}
Copier

snap_getBip44Entropy_ - pour obtenir l'entropie à partir de la seed MetaMask. docs

Il convient de mentionner qu'il existe une très bonne bibliothèque MetaMask, passworder, qui nous permet de chiffrer et déchiffrer facilement l'état. Dans notre cas, nous avons utilisé l'entropie de la seed MetaMask comme clé symétrique pour chiffrer l'état.

Le SDK

Pour récapituler, nous avons modifié l'application Polkadot en y injectant du JavaScript ici et là, permettant ainsi l'utilisation du Snap. Le Snap peut obtenir l'entropie à partir de la seed dans MetaMask et gérer un état chiffré. La dernière étape consiste donc à intégrer le SDK pour Aleph Zero - polkadotjs.

Cela semble être une tâche simple : il suffit d'exécuter npm install @polkadot/api et de l'importer. Cependant, l'importation de dépendances dans un Snap peut s'avérer complexe. Ces difficultés apparaissent parce que le Snap n'est pas évalué directement sur la machine virtuelle JavaScript ; il doit d'abord être isolé dans un Secure ECMAScript (SES). En bref, du code qui se compile normalement sans problème peut échouer lors du chargement dans SES.

Code

Avec la plupart des bibliothèques, nous n'aurons aucun problème, mais ce n'était pas notre cas. Nous avons rencontré deux problèmes lors de l'évaluation du SDK polkadotjs dans SES ; pour les résoudre, nous avons écrit deux scripts exécutés sur le code source bundlé.

Le premier était causé par un code wasm incorrectement formaté intégré dans un fichier JavaScript. Voici le script correctif :

const fs = require('fs').promises;
const path = require('path');

const dirPath =
  '../../../../node_modules/@substrate/smoldot-light/dist/cjs/instance/autogen';

// SES doesn't like double slashes in strings so we need to replace them with single slashes
// and string concatenation.
async function fixDoubleSlash() {
  const files = ['wasm0.js', 'wasm1.js', 'wasm2.js'];
  for (const file of files) {
    console.log('Fixing ${file}');
    const filePath = path.join(__dirname, dirPath, file);
    const contents = await fs.readFile(filePath, 'utf8');
    let fixedContents = contents;
    while (fixedContents.includes('//')) {
      fixedContents = fixedContents.split('//').join('/"+"/');
    }
    await fs.writeFile(filePath, fixedContents);
  }
}

fixDoubleSlash();
Copier

Le second problème était également causé par l'extension Polkadot, qui tentait d'accéder à la méthode window.addEventListener, interdite dans SES. Il a également été résolu facilement avec un simple

const fs = require('fs').promises;
const path = require('path');

const bundlePath = path.join(__dirname, '../dist/bundle.js');

async function fix() {
  console.log(`Fixing ${bundlePath}`);
  const contents = await fs.readFile(bundlePath, 'utf8');
  const replaceMissingTypes = '\n\nwindow.addEventListener = function(){};\n\n';

  // Looking for a first breakline after the first line of the file
  // This is where we can safely inject our code
  const fixed = contents.replace('\n\n', replaceMissingTypes);
  await fs.writeFile(bundlePath, fixed);
}

fix();
Copier

Quelles seraient les prochaines étapes si vous deviez implémenter cela ?

Nous aimerions rendre notre snap entièrement compatible avec polkadot.js et viable en tant que wallet web dans l'écosystème Polkadot.

Pouvez-vous nous parler un peu de vous et de votre équipe ?

Michael est développeur dans une banque polonaise et travaille quotidiennement avec la technologie blockchain. Il est passionné de programmation et d'apprentissage de nouvelles choses.

Piotr est ingénieur logiciel chez NuCypher. Il s'intéresse à la confidentialité, aux données et aux systèmes distribués.

Quand avez-vous découvert MetaMask Snaps pour la première fois et quelle a été votre expérience ?

Piotr - J'ai d'abord entendu parler de MetaMask Snaps lors de la Devcon à Osaka. Le sujet est revenu sur le devant de la scène plus tôt cette année, peu avant le hackathon EthDenver.

Michaeł - C'est Piotr qui m'a présenté MetaMask Snaps, peu après EthDenver.

Qu'est-ce qui distingue MetaMask Snaps des autres wallets ?

La possibilité d'accéder à une cryptographie spécifique à l'application et à des clés privées dans votre dapp — cela permet de créer de nouveaux parcours utilisateur en s'appuyant sur une expérience de wallet navigateur familière.

Parlez-nous de votre expérience et de celle de votre équipe dans la création de MetaMask Snaps avec MetaMask.

Les bases sont là, mais la création de MetaMask Snaps plus sophistiqués, notamment ceux qui nécessitent des éléments d'interface personnalisés, est complexe. Nous avons passé beaucoup de temps à comprendre comment adapter notre modèle mental d'expérience de développeur web aux Snaps — des aspects comme le déploiement, les tests, etc.

Que représente MetaMask Snaps pour vous ?

C'est un outil qui donne un véritable pouvoir à la communauté : chacun décide lui-même des fonctionnalités que son MetaMask doit avoir. Les plugins permettent de démocratiser le développement et d'accélérer la croissance.

Quelles opportunités voyez-vous avec MetaMask Snaps et les possibilités qu'il ouvre pour l'espace Web3 ?

L'accès à davantage de réseaux (notamment les réseaux non-EVM) ; la possibilité d'intervenir dans le cycle de vie des transactions et d'ajouter une logique personnalisée (comme des vérifications de sécurité) ou de personnaliser l'UX ; le stockage chiffré dans le navigateur pour les contenus sensibles spécifiques aux dapps, ainsi que la possibilité d'apporter votre propre cryptographie à vos utilisateurs grâce à MetaMask Snaps.

Avez-vous des conseils à partager avec les développeurs souhaitant essayer MetaMask Snaps ?

La compilation de bibliothèques JS dans SES peut être difficile, mais d'après notre expérience, ce n'est pas impossible. La boucle de feedback dans le développement MetaMask est assez longue, alors assurez-vous d'écrire des tests unitaires.

Il existe une petite communauté de développeurs active autour de MetaMask Snaps — visiter Discord, les discussions GitHub, etc. peut être très enrichissant, d'autant plus que le produit est encore récent et que peu de ressources pédagogiques sont disponibles en dehors de cette sphère.

Développer avec MetaMask Snaps

Pour démarrer avec MetaMask Snaps :

1. Consultez la documentation développeur

2. Installez MetaMask Flask

3. Consultez un guide MetaMask Snaps

4. Restez connecté avec nous sur Twitter, GitHub discussions et Discord

Gardez un œil sur notre équipe lors du prochain hackathon près de chez vous ! Bonne construction ⚒️

Avertissement : Les MetaMask Snaps sont généralement développés par des tiers autres que Consensys Software. L'utilisation de MetaMask Snaps développés par des tiers se fait à votre propre discrétion et à vos risques, et implique votre accord selon lequel vous serez seul responsable de toute perte ou dommage résultant de ces activités. Consensys ne donne aucune garantie expresse ou implicite, qu'elle soit orale ou écrite, concernant les MetaMask Snaps développés par des tiers, et décline toute responsabilité à leur égard. L'utilisation de logiciels liés à la blockchain comporte des risques, que vous assumez pleinement lors de l'utilisation de MetaMask Snaps.