AA Snap : Démocratiser l'abstraction de compte

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 façons totalement inédites. Les développeurs Web3 sont au cœur de cette croissance, et cette série vise à mettre en lumière les MetaMask Snaps novateurs en cours de développement aujourd'hui.

AA Snap

Dépôt du Snap : https://github.com/a42io/AAsnap

Pourquoi l'avez-vous créé ?

AA Snap a été conçu pour démocratiser l'Account Abstraction (AA) auprès de tous les développeurs et utilisateurs. Nous sommes convaincus que l'AA sera largement adoptée à l'avenir. Cependant, à l'heure actuelle, son intégration dans les dapps représente un effort considérable pour les développeurs, tout comme son utilisation pour les utilisateurs.

Du point de vue des développeurs, il est nécessaire d'écrire du code supplémentaire pour prendre en charge l'AA en plus des EOA.

Du point de vue des utilisateurs, ils ne peuvent pas utiliser leurs wallets habituels, comme MetaMask, et doivent installer un autre wallet compatible AA, ce qui constitue une mauvaise expérience utilisateur.

C'est pourquoi nous avons voulu faciliter l'intégration et l'utilisation de l'AA en tirant parti de MetaMask Snaps.

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

AA Snap se compose de trois éléments : un frontend d'exemple, le MetaMask snap et un serveur temporaire. Le snap permet aux développeurs et aux utilisateurs d'utiliser très facilement un wallet AA (un contract wallet compatible EIP-4337). Veuillez consulter le dépôt pour l'implémentation complète.

Le frontend d'exemple

Le frontend d'exemple est basé sur le template fourni par MetaMask. Il montre comment les développeurs peuvent facilement intégrer l'AA dans leurs dapps grâce à AA Snap.

Par exemple, le solde du wallet AA peut être récupéré avec le simple code ci-dessous.

const balance = (await window.ethereum.request({
    method: 'wallet_invokeSnap',
    params: [
        defaultSnapOrigin,
        {
            method: 'balance',
        },
    ],
})) as string;
Copier

Pour envoyer une transaction depuis le wallet AA, il vous suffit d'écrire le code ci-dessous en indiquant une adresse de bénéficiaire et une valeur.

await window.ethereum.request({
    method: 'wallet_invokeSnap',
    params: [
        defaultSnapOrigin,
        {
            method: 'transfer',
            params: {
                to,        // beneficiary address
                value,     // value in ETH or MATIC
            },
        },
    ],
});
Copier

Quelle est la facilité d'utilisation du wallet AA du point de vue de l'utilisateur ? Essayez-le ici : https://AAsn.app

Le Snap

Le snap obtient une instance d'AA avec le code ci-dessous. Pour implémenter l'AA, nous avons utilisé le package npm @account-abstraction/sdk.

Étant donné que l'adresse du wallet AA peut être dérivée de manière déterministe à partir de l'EOA de l'utilisateur, aucune saisie de la part de l'utilisateur n'est requise.

export const getAbstractAccount = async (): Promise<SimpleAccountAPI> => {
    const provider = new ethers.providers.Web3Provider(wallet as any);
    await provider.send('eth_requestAccounts', []);
    const owner = provider.getSigner();
    const aa = new SimpleAccountAPI({
        provider,
        entryPointAddress,
        owner,
        factoryAddress,
    });
    return aa;
};
Copier

L'envoi d'une transaction depuis le wallet AA se déroule en trois étapes :

1. Le snap affiche une confirmation dans MetaMask via la méthode snap_confirm du snap. Cette étape n'est pas obligatoire, mais elle est nécessaire pour une meilleure expérience utilisateur, car les utilisateurs n'ont aucun moyen de connaître les détails de ce qu'ils vont signer.

2. Le code crée une user operation du wallet AA et demande la signature d'un hash de cette user operation. Ce processus est presque identique à la création d'une transaction depuis un EOA et à sa signature.

3. Envoi de la user operation signée à un bundler via notre serveur.

export const transfer = async (target: string, ethValue: string) => {
    const value = ethers.utils.parseEther(ethValue);
    const aa = await getAbstractAccount();
    const address = await aa.getAccountAddress();

    // 1. Show confirmation within MetaMask
    const result = await wallet.request({
        method: 'snap_confirm',
        params: [{
            prompt: 'Transfer',
            description: 'Transfer from your Abstraction Account',
            textAreaContent: `from: ${address}\ntarget: ${target}\nvalue: ${ethValue}`,
        }],
    });

    if (!result) {
        return;
    }

    // 2. Create a signed user operation of AA wallet
    const op = await aa.createSignedUserOp({
        target,
        value,
        data: '0x',
        maxFeePerGas,
        maxPriorityFeePerGas,
    });

    const printedOp = await printOp(op);
    const body = JSON.stringify({
        op: printedOp,
    });

    // 3. Send a signed user operation to the bundler
    const response = await fetch(SERVER_END_POINT {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body,
    });
};
Copier

Le serveur temporaire

Lors du hackathon, nous avons rencontré une erreur lors de l'appel de la méthode sendUserOpToBundler à l'intérieur du snap. Faute de temps pour approfondir le problème, nous avons décidé de créer un serveur pour le résoudre temporairement. Ce serveur temporaire se contente de recevoir la user operation signée et de la transmettre à un bundler.

Cette erreur provenait probablement de dépendances, car l'environnement d'exécution de MetaMask Snaps comporte certaines restrictions. Nous pensons que le serveur temporaire pourra être supprimé en suivant ce document : Patching Dependencies

app.post('/aa', async (req, res) => {
  const provider = new ethers.providers.JsonRpcProvider(
    process.env.RPC_ENDPOINT,
  );
  const client = await getHttpRpcClient(
    provider,
    process.env.BUNDLER_URL as string,
    process.env.ENTRY_POINT_ADDRESS as string,
  );

  try {
    const uoHash = await client.sendUserOpToBundler(JSON.parse(req.body.op));
    return res.json({
      uoHash,
    });
  } catch (e) {
    console.log(e);
    return res.status(400).send();
  }
});
Copier

Quelles seraient les prochaines étapes si vous deviez poursuivre ce projet ?

Nous souhaiterions supprimer le code côté serveur superflu et faire fonctionner le snap de manière autonome. Par ailleurs, il est actuellement possible pour un développeur MetaMask Snaps comme nous de remplacer un hash de transaction à signer par un hash malveillant. Nous aimerions donc introduire ou proposer un mécanisme pour prévenir ce risque.

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

Notre équipe dirige une petite startup — a42 — au Japon et à Singapour. a42 développe une serrure connectée Web3 « wΞlock » qui permet l'authentification via des smart contracts, notamment NFT et ENS : https://a42.io/w3lock En 2022, nous avons participé à plusieurs hackathons pour nous familiariser avec de nouvelles technologies comme MetaMask Snaps.

Hideyoshi Moriya (piyo.eth) : Hideyoshi expérimente et développe des applications basées sur Ethereum depuis 2017. Il a développé un projet d'art NFT collaboratif, « Pixereum », en 2017. Il a travaillé chez Google en tant que spécialiste produit technique et a fondé sa société « a42 » en 2019. Au sein d'a42, il développe des dapps applicables dans le monde réel. Il développe actuellement une serrure connectée Web3 « wΞlock » pouvant être ouverte via ENS/NFT, sur la base d'un PoC qu'il a développé en 2021 : https://twitter.com/hm0429/status/1465241679800111107

Hiroyuki Tachibana (tachibana.eth) : Hiroyuki est cofondateur et ingénieur chez a42. Il a dirigé un projet de développement d'un module d'authentification blockchain pour appareils IoT, « w3a.io », et a reçu une subvention de l'Ethereum Foundation. Il a remporté plusieurs prix lors de hackathons ETHGlobal tout au long de l'année 2022. Il développe actuellement une solution de confidentialité zkp pour le produit de serrure connectée Web3.

Yusuke Moriya (yskmyskm.eth) : Yusuke est designer chez a42. Il a travaillé en tant qu'artiste CG/VFX dans diverses productions vidéo et a collaboré avec des marques mondiales ainsi que sur des clips musicaux à petite échelle. Fort de 12 ans d'expérience dans l'industrie cinématographique, il est spécialisé dans les expressions abstraites utilisant l'infographie. Il a également exercé en tant que directeur de la photographie et réalisateur de documentaires.

Quelles opportunités voyez-vous dans MetaMask Snaps et les possibilités qu'il ouvre pour l'écosystème Web3 ?

Nous sommes convaincus que MetaMask Snaps rendra les technologies Web3 complexes plus accessibles, tant pour les développeurs que pour les utilisateurs, et contribuera grandement à l'intégration des applications Web traditionnelles avec le Web3. Nous sommes aussi enthousiastes à l'idée de créer des MetaMask Snaps que nous l'étions lors de l'ouverture du premier app store mobile. Nous vous encourageons à l'essayer et à concrétiser vos idées !

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

Nous recommandons de commencer par le template MetaMask Snaps (https://github.com/MetaMask/template-snap-monorepo) et de le modifier en premier lieu.

Conseil : vous vous demandez peut-être comment obtenir l'objet ethereum injecté. L'objet wallet en est l'équivalent.

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, les discussions GitHub et Discord

Guettez 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 seule discrétion et à vos propres risques, et implique votre accord selon lequel vous serez seul responsable de toute perte ou tout dommage résultant de ces activités. Consensys ne fournit 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é relative aux Snaps développés par des tiers. L'utilisation de logiciels liés à la blockchain comporte des risques que vous assumez pleinement lors de l'utilisation de MetaMask Snaps.