AA Snap：帳戶抽象化的民主化

MetaMask Snaps 是讓 MetaMask 成為全球最具擴展性錢包的發展藍圖。身為開發者，您可以用全新的方式將您的功能和 API 帶入 MetaMask。Web3 開發者是這項成長的核心，本系列旨在展示當今正在建構的創新 MetaMask Snaps。

AA Snap

Snap 儲存庫：https://github.com/a42io/AAsnap

您為什麼要建構它？

AA Snap 的建構目的是讓所有開發者和使用者都能輕鬆使用帳戶抽象化（Account Abstraction，AA）。我們相信 AA 在未來將被廣泛應用。然而，目前對開發者來說，將其整合至 dapp 需要耗費不少心力，對使用者而言也不易上手。

從開發者的角度來看，除了 EOA 之外，還必須額外撰寫支援 AA 的程式碼。

從使用者的角度來看，他們無法使用 MetaMask 等慣用的錢包，而必須另外安裝支援 AA 的錢包，這造成了不佳的使用者體驗（UX）。

因此，我們希望透過 MetaMask Snaps 讓 AA 的整合與使用變得更加簡便。

您能帶我們了解技術實作的細節嗎？

AA Snap 由三個元件組成：一個範例前端、MetaMask snap，以及一個臨時伺服器。此 snap 讓開發者和使用者能夠非常輕鬆地使用 AA 錢包（支援 EIP-4337 的合約錢包）。完整實作請參閱儲存庫。

範例前端

範例前端基於 MetaMask 提供的模板建構，展示了開發者如何透過 AA Snap 輕鬆將 AA 整合至其 dapp。

例如，可以用以下簡單的程式碼查詢 AA 錢包的餘額。

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

若要從 AA 錢包發送交易，只需傳入受益人地址和金額，撰寫以下程式碼即可。

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

從使用者角度來看，AA 錢包有多易於使用？請在此試用：https://AAsn.app

Snap

此 snap 使用以下程式碼取得 AA 的實例。為了實作 AA，我們使用了 @account-abstraction/sdk npm 套件。

由於 AA 錢包地址可以從使用者的 EOA 確定性地推導出來，因此不需要任何使用者輸入。

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;
};
複製

從 AA 錢包發送交易共有三個步驟：

1. Snap 使用 snap 的 snap_confirm 方法在 MetaMask 中顯示確認畫面。此步驟並非必要，但為了提升使用者體驗而需要加入，因為使用者無從得知他們即將簽署的內容詳情。

2. 程式碼建立 AA 錢包的使用者操作（user operation），並請求對使用者操作的雜湊值進行簽署。此過程與從 EOA 建立交易並簽署幾乎相同。

3. 透過我們的伺服器將已簽署的使用者操作發送至 bundler。

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

臨時伺服器

在黑客松期間，我們在 snap 內部呼叫 sendUserOpToBundler 方法時遇到了錯誤。由於沒有時間深入排查問題，我們決定建立一個伺服器來暫時解決此問題。臨時伺服器僅負責接收已簽署的使用者操作，並將其傳遞給 bundler。

此錯誤可能源自相依套件，因為 MetaMask Snaps 執行環境存在一些限制。我們認為可以依照以下文件移除臨時伺服器：修補相依套件（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();
  }
});
複製

如果您要繼續實作，下一步計畫是什麼？

我們希望移除不必要的伺服器端程式碼，讓 snap 獨立運行。此外，目前像我們這樣的 MetaMask Snaps 開發者有可能將待簽署的交易雜湊值替換為惡意的雜湊值，因此我們希望引入或提出一種防範機制。

能否介紹一下您自己和您的團隊？

我們的團隊在日本和新加坡經營一家小型新創公司——a42。a42 正在建構一款 Web3 智慧鎖「wΞlock」，可透過包含 NFT 和 ENS 的智慧合約進行身份驗證：https://a42.io/w3lock。2022 年，我們參加了多場黑客松，學習 MetaMask Snaps 等新技術。

Hideyoshi Moriya（piyo.eth）：Hideyoshi 自 2017 年起便開始實驗並建構基於以太坊的應用程式。他於 2017 年開發了協作式 NFT 藝術專案「Pixereum」。他曾在 Google 擔任技術產品專家，並於 2019 年創辦了「a42」。在 a42，他開發能在現實世界中運作的 dapp。他目前正在開發一款 Web3 智慧鎖「wΞlock」，可根據他於 2021 年開發的概念驗證（PoC）透過 ENS/NFT 開鎖：https://twitter.com/hm0429/status/1465241679800111107

Hiroyuki Tachibana（tachibana.eth）：Hiroyuki 是 a42 的共同創辦人兼工程師。他主導了為 IoT 裝置建構區塊鏈身份驗證模組「w3a.io」的專案，並獲得以太坊基金會的資助。他在 2022 年的多場 ETHGlobal 黑客松中獲獎。他目前正在為 Web3 智慧鎖產品開發 zkp 隱私解決方案。

Yusuke Moriya（yskmyskm.eth）：Yusuke 是 a42 的設計師。他曾擔任 CG / VFX 藝術家，參與各類影像製作，涵蓋全球品牌至小型音樂影片等不同規模的專案。他在影視產業擁有 12 年經驗，專精於運用電腦圖形進行抽象表現。他也曾擔任攝影師和紀錄片導演。

您認為 MetaMask Snaps 為 Web3 領域帶來了哪些機遇？

我們相信 MetaMask Snaps 將使複雜的 Web3 技術對開發者和使用者都更加友善，並大幅協助傳統 Web 應用程式與 Web3 整合。我們對建構 MetaMask Snaps 的興奮程度，就如同第一個行動應用程式商店問世時一樣。我們鼓勵您親身嘗試，將您的想法付諸實現！

對於有意嘗試 MetaMask Snaps 的開發者，您有什麼建議？

我們建議從 MetaMask Snaps 模板 （https://github.com/MetaMask/template-snap-monorepo） 開始，先進行修改和嘗試。

小提示：您可能想知道如何取得注入的 ethereum 物件。wallet 物件與其等效。

使用 MetaMask Snaps 進行建構

開始使用 MetaMask Snaps：

1. 查閱開發者文件

2. 安裝 MetaMask Flask

3. 參考 MetaMask Snaps 指南

4. 透過 Twitter、GitHub 討論區和 Discord 與我們保持聯繫

請留意我們的團隊將出現在您附近的下一場黑客松！祝 BUIDL 愉快 ⚒️

免責聲明：MetaMask Snaps 通常由 Consensys Software 以外的第三方開發。使用第三方開發的 MetaMask Snaps 須由您自行判斷並承擔風險，且您同意對因此類活動所造成的任何損失或損害負全部責任。Consensys 對第三方開發的 MetaMask Snaps 不提供任何明示或暗示的保證，並對第三方開發的 Snaps 免除一切責任。使用區塊鏈相關軟體存在風險，使用 MetaMask Snaps 即表示您完全承擔相關風險。