AA Snap: Account Abstraction demokratisieren

MetaMask Snaps ist der Fahrplan, um MetaMask zur erweiterbarsten Wallet der Welt zu machen. Als Entwickler kannst du deine Features und APIs auf völlig neue Weise in MetaMask einbringen. Web3-Entwickler sind der Kern dieses Wachstums, und diese Serie soll die innovativen MetaMask Snaps vorstellen, die heute entwickelt werden.

AA Snap

Snap Repo: https://github.com/a42io/AAsnap

Warum habt ihr es gebaut?

AA Snap wurde entwickelt, um Account Abstraction (AA) für alle Entwickler und Nutzer zu demokratisieren. Wir glauben, dass AA in Zukunft weit verbreitet sein wird. Derzeit ist es jedoch für Entwickler aufwändig, AA in ihre Dapps zu integrieren, und für Nutzer, es zu verwenden.

Aus Entwicklerperspektive ist es notwendig, zusätzlichen Code zu schreiben, der AA neben EOA unterstützt.

Aus Nutzersicht können sie ihre gewohnten Wallets wie MetaMask nicht verwenden und müssen eine andere Wallet installieren, die AA unterstützt – was eine schlechte UX darstellt.

Daher wollten wir die Integration und Nutzung von AA durch den Einsatz von MetaMask Snaps vereinfachen.

Kannst du uns durch die technische Implementierung führen?

AA Snap besteht aus drei Komponenten: einem Beispiel-Frontend, dem MetaMask Snap und einem temporären Server. Der Snap ermöglicht es Entwicklern und Nutzern, eine AA-Wallet (eine Contract-Wallet, die EIP-4337 unterstützt) sehr einfach zu verwenden. Die vollständige Implementierung findest du im Repository.

Das Beispiel-Frontend

Das Beispiel-Frontend basiert auf dem Template, das von MetaMask bereitgestellt wird. Es zeigt, wie Entwickler AA mit ihren Dapps über AA Snap einfach integrieren können.

Zum Beispiel kann ein Guthaben der AA-Wallet mit dem folgenden einfachen Code abgerufen werden.

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

Um eine Transaktion von der AA-Wallet zu senden, kannst du einfach den folgenden Code schreiben, indem du eine Empfängeradresse und einen Wert übergibst.

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

Wie einfach ist es, die AA-Wallet aus Nutzersicht zu verwenden? Probiere es hier aus: https://AAsn.app

Der Snap

Der Snap ruft eine Instanz von AA mit dem folgenden Code ab. Zur Implementierung von AA haben wir das @account-abstraction/sdk npm-Paket verwendet.

Da die AA-Wallet-Adresse deterministisch aus der EOA des Nutzers abgeleitet werden kann, ist keine Nutzereingabe erforderlich.

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;
};
Kopieren

Es gibt drei Schritte, um eine Transaktion von der AA-Wallet zu senden:

1. Der Snap zeigt eine Bestätigung in MetaMask mithilfe der snap_confirm-Methode des Snaps an. Dieser Schritt ist nicht zwingend erforderlich, aber für eine bessere UX notwendig, da Nutzer sonst keine Möglichkeit haben, die Details dessen zu sehen, was sie signieren werden.

2. Der Code erstellt eine User Operation der AA-Wallet und fordert die Signierung eines Hashes der User Operation an. Dieser Vorgang ist nahezu identisch mit dem Erstellen einer Transaktion von EOA und dem Signieren dieser.

3. Die signierte User Operation wird über unseren Server an einen Bundler gesendet.

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,
    });
};
Kopieren

Der temporäre Server

Während des Hackathons sind wir auf einen Fehler gestoßen, als wir die Methode sendUserOpToBundler innerhalb des Snaps aufgerufen haben. Da wir keine Zeit hatten, das Problem zu untersuchen, haben wir uns entschieden, vorübergehend einen Server zu erstellen, um das Problem zu lösen. Der temporäre Server empfängt lediglich die signierte User Operation und leitet sie an einen Bundler weiter.

Der Fehler kam wahrscheinlich von Abhängigkeiten, da es einige Einschränkungen in der MetaMask Snaps-Ausführungsumgebung gibt. Wir glauben, dass der temporäre Server durch Befolgen dieses Dokuments entfernt werden kann: 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();
  }
});
Kopieren

Was sind die nächsten Schritte, wenn ihr das weiterentwickeln würdet?

Wir möchten unnötigen serverseitigen Code entfernen und den Snap eigenständig betreiben. Außerdem ist es derzeit für MetaMask Snaps-Entwickler wie uns möglich, einen zu signierenden Transaktions-Hash durch einen bösartigen zu ersetzen. Daher möchten wir einen Mechanismus einführen oder vorschlagen, der dies verhindert.

Könnt ihr uns ein wenig über euch und euer Team erzählen?

Unser Team betreibt ein kleines Startup – a42 – in Japan und Singapur. a42 entwickelt ein Web3-Smart-Lock „wΞlock", das die Authentifizierung mit Smart Contracts einschließlich NFT und ENS ermöglicht: https://a42.io/w3lock Im Jahr 2022 haben wir an mehreren Hackathons teilgenommen, um neue Technologien wie MetaMask Snaps zu erlernen.

Hideyoshi Moriya (piyo.eth): Hideyoshi experimentiert seit 2017 mit Ethereum-basierten Apps und entwickelt diese. Er entwickelte 2017 das kollaborative NFT-Kunstprojekt „Pixereum". Er arbeitete bei Google als technischer Produktspezialist und gründete 2019 sein Unternehmen „a42". Bei a42 entwickelt er Dapps, die in der realen Welt funktionieren. Derzeit entwickelt er ein Web3-Smart-Lock „wΞlock", das per ENS/NFT geöffnet werden kann, basierend auf dem PoC, den er 2021 entwickelt hat: https://twitter.com/hm0429/status/1465241679800111107

Hiroyuki Tachibana (tachibana.eth): Hiroyuki ist Mitgründer und Ingenieur bei a42. Er leitete ein Projekt zum Aufbau eines Blockchain-Authentifizierungsmoduls für IoT-Geräte „w3a.io" und erhielt ein Grant von der Ethereum Foundation. Im Jahr 2022 gewann er mehrere Preise bei ETHGlobal-Hackathons. Derzeit entwickelt er eine zkp-Datenschutzlösung für das Web3-Smart-Lock-Produkt.

Yusuke Moriya (yskmyskm.eth): Yusuke ist Designer bei a42. Er arbeitete als CG/VFX-Künstler in verschiedenen Videoproduktionen und war an Projekten für globale Marken bis hin zu kleinen Musikvideos beteiligt. Er verfügt über 12 Jahre Erfahrung in der Filmbranche und ist spezialisiert auf abstrakte Ausdrucksformen mit Computergrafik. Er hat auch als Kameramann und Dokumentarfilmregisseur gearbeitet.

Welche Möglichkeiten seht ihr mit MetaMask Snaps und den Chancen, die es für den Web3-Bereich eröffnet?

Wir glauben, dass MetaMask Snaps komplexe Web3-Technologien sowohl für Entwickler als auch für Nutzer zugänglicher machen und traditionellen Web-Anwendungen erheblich dabei helfen wird, sich mit Web3 zu integrieren. Wir sind genauso begeistert vom Erstellen von MetaMask Snaps wie damals, als der erste mobile App Store erschien. Wir ermutigen euch, es auszuprobieren und eure Ideen zu verwirklichen!

Habt ihr Ratschläge für Entwickler, die MetaMask Snaps ausprobieren möchten?

Wir empfehlen, mit dem MetaMask Snaps-Template (https://github.com/MetaMask/template-snap-monorepo) zu beginnen und es zunächst anzupassen.

Tipp: Du fragst dich vielleicht, wie du das injizierte ethereum-Objekt erhältst. Das wallet-Objekt ist gleichwertig damit.

Mit MetaMask Snaps entwickeln

So startest du mit MetaMask Snaps:

1. Schau dir die Entwicklerdokumentation an

2. Installiere MetaMask Flask

3. Schau dir einen MetaMask Snaps-Leitfaden an

4. Bleib mit uns in Kontakt auf Twitter, GitHub Discussions und Discord

Halte bei unserem Team beim nächsten Hackathon in deiner Nähe Ausschau! Happy BUIDLing ⚒️

Haftungsausschluss: MetaMask Snaps werden im Allgemeinen von Dritten entwickelt, die nicht Consensys Software sind. Die Nutzung von durch Dritte entwickelten MetaMask Snaps erfolgt nach eigenem Ermessen und auf eigenes Risiko, und du stimmst zu, dass du allein für etwaige Verluste oder Schäden verantwortlich bist, die aus solchen Aktivitäten resultieren. Consensys gibt keine ausdrückliche oder stillschweigende Garantie, weder mündlich noch schriftlich, in Bezug auf durch Dritte entwickelte MetaMask Snaps und lehnt jede Haftung für durch Dritte entwickelte Snaps ab. Die Nutzung von Blockchain-bezogener Software birgt Risiken, die du bei der Verwendung von MetaMask Snaps vollständig übernimmst.