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, что негативно сказывается на пользовательском опыте.

Именно поэтому мы захотели упростить интеграцию и использование AA с помощью MetaMask Snaps.

Можете рассказать о технической реализации?

AA Snap состоит из трёх компонентов: примера фронтенда, MetaMask snap и временного сервера. Snap позволяет разработчикам и пользователям очень легко работать с AA-кошельком (контрактным кошельком с поддержкой EIP-4337). Полную реализацию смотрите в репозитории.

Пример фронтенда

Пример фронтенда основан на шаблоне, предоставленном MetaMask. Он демонстрирует, как разработчики могут легко интегрировать AA в свои dapp-приложения с помощью AA Snap.

Например, баланс 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 мы использовали npm-пакет @account-abstraction/sdk.

Поскольку адрес 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 отображает запрос подтверждения в MetaMask с помощью метода snap_confirm. Этот шаг не является обязательным, но необходим для улучшения пользовательского опыта, поскольку у пользователей нет возможности узнать детали того, что они подписывают.

2. Код создаёт пользовательскую операцию AA-кошелька и запрашивает подпись хэша этой операции. Этот процесс практически идентичен созданию транзакции из 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,
    });
};
Копировать

Временный сервер

В ходе хакатона мы столкнулись с ошибкой при вызове метода sendUserOpToBundler внутри snap. Поскольку времени на детальное изучение проблемы не было, мы решили временно создать сервер для её решения. Временный сервер просто получает подписанную пользовательскую операцию и передаёт её в 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 экспериментирует с приложениями на базе Ethereum и создаёт их с 2017 года. В 2017 году он разработал совместный NFT-арт-проект «Pixereum». Он работал в Google в качестве технического специалиста по продуктам и основал компанию «a42» в 2019 году. В a42 он разрабатывает dapp-приложения, способные работать в реальном мире. В настоящее время он создаёт Web3 умный замок «wΞlock», который можно открыть с помощью ENS/NFT на основе PoC, разработанного им в 2021 году: https://twitter.com/hm0429/status/1465241679800111107

Hiroyuki Tachibana (tachibana.eth): Hiroyuki — сооснователь и инженер в a42. Он руководил проектом по созданию модуля аутентификации на блокчейне для IoT-устройств «w3a.io» и получил грант от Ethereum Foundation. В 2022 году он завоевал несколько призов на хакатонах ETHGlobal. В настоящее время он разрабатывает zkp-решение для обеспечения конфиденциальности в продукте Web3 умного замка.

Yusuke Moriya (yskmyskm.eth): Yusuke — дизайнер в a42. Он работал CG/VFX-художником в различных видеопроизводствах и участвовал в проектах — от глобальных брендов до небольших музыкальных клипов. Он имеет 12-летний опыт работы в киноиндустрии и специализируется на абстрактных выражениях с использованием компьютерной графики. Также он работал кинооператором и режиссёром документального кино.

Какие возможности вы видите в MetaMask Snaps и что они открывают для пространства Web3?

Мы убеждены, что MetaMask Snaps сделает сложные Web3-технологии более доступными как для разработчиков, так и для пользователей, и существенно поможет традиционным веб-приложениям интегрироваться с 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

Следите за нашей командой на следующем хакатоне рядом с вами! Удачной разработки ⚒️

Отказ от ответственности: MetaMask Snaps, как правило, разрабатываются третьими сторонами, а не Consensys Software. Использование MetaMask Snaps, разработанных третьими сторонами, осуществляется по вашему собственному усмотрению и на ваш риск, и вы соглашаетесь с тем, что несёте единоличную ответственность за любые убытки или ущерб, возникшие в результате такой деятельности. Consensys не даёт никаких явных или подразумеваемых гарантий, устных или письменных, в отношении MetaMask Snaps, разработанных третьими сторонами, и отказывается от какой-либо ответственности за Snaps, разработанные третьими сторонами. Использование программного обеспечения, связанного с блокчейном, сопряжено с рисками, которые вы принимаете в полном объёме при использовании MetaMask Snaps.