AA Snap: Democratizando la abstracción de cuentas

MetaMask Snaps es la hoja de ruta para convertir a MetaMask en la wallet más extensible del mundo. Como desarrollador, puedes incorporar tus funciones y APIs a MetaMask de formas completamente nuevas. Los desarrolladores de Web3 son el núcleo de este crecimiento, y esta serie tiene como objetivo destacar los novedosos MetaMask Snaps que se están construyendo hoy en día.

AA Snap

Repositorio del Snap: https://github.com/a42io/AAsnap

¿Por qué lo construiste?

AA Snap fue creado para democratizar la Abstracción de Cuentas (AA) para todos los desarrolladores y usuarios. Creemos que AA se utilizará ampliamente en el futuro. Sin embargo, actualmente, supone un esfuerzo considerable para los desarrolladores integrarlo con sus dapps y para los usuarios utilizarlo.

Desde la perspectiva de los desarrolladores, es necesario escribir código adicional que soporte AA además de EOA.

Desde el punto de vista de los usuarios, no pueden usar sus wallets habituales, como MetaMask, y necesitan instalar otra wallet que soporte AA, lo que supone una mala experiencia de usuario.

Por eso, quisimos facilitar la integración y el uso de AA aprovechando MetaMask Snaps.

¿Puedes explicarnos la implementación técnica?

AA Snap está compuesto por tres componentes: un frontend de ejemplo, el MetaMask snap y un servidor temporal. El snap permite a los desarrolladores y usuarios utilizar una wallet AA (una wallet de contrato que soporta EIP-4337) de forma muy sencilla. Consulta el repositorio para ver la implementación completa.

El frontend de ejemplo

El frontend de ejemplo está basado en la plantilla proporcionada por MetaMask. Muestra cómo los desarrolladores pueden integrar fácilmente AA con sus dapps mediante AA Snap.

Por ejemplo, el saldo de la wallet AA puede obtenerse con el sencillo código que se muestra a continuación.

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

Para enviar una transacción desde la wallet AA, basta con escribir el siguiente código pasando una dirección de beneficiario y un valor.

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

¿Qué tan fácil es usar la wallet AA desde la perspectiva del usuario? Pruébalo aquí: https://AAsn.app

El Snap

El snap obtiene una instancia de AA con el código que se muestra a continuación. Para implementar AA, utilizamos el paquete npm @account-abstraction/sdk.

Dado que la dirección de la wallet AA puede derivarse de forma determinista a partir del EOA del usuario, no se requiere ninguna entrada por parte del usuario.

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

Hay tres pasos para enviar una transacción desde la wallet AA:

1. El snap muestra una confirmación dentro de MetaMask utilizando el método snap_confirm del snap. Este proceso no es obligatorio, pero es necesario para una mejor experiencia de usuario, ya que no hay forma de que los usuarios conozcan los detalles de lo que van a firmar.

2. El código crea una operación de usuario de la wallet AA y solicita firmar un hash de dicha operación. Este proceso es prácticamente igual que crear una transacción desde EOA y firmarla.

3. Se envía la operación de usuario firmada a un bundler a través de nuestro servidor.

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

El servidor temporal

Durante el hackathon, encontramos un error al llamar al método sendUserOpToBundler dentro del snap. Como no teníamos tiempo para investigar el problema en profundidad, decidimos crear un servidor para resolverlo temporalmente. El servidor temporal simplemente recibe la operación de usuario firmada y la pasa a un bundler.

Es probable que el error provenga de las dependencias, ya que existen ciertas restricciones en el entorno de ejecución de MetaMask Snaps. Creemos que el servidor temporal puede eliminarse siguiendo este documento: 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();
  }
});
Copiar

¿Cuáles serían los próximos pasos si implementaras esto?

Nos gustaría eliminar el código innecesario del lado del servidor y ejecutar el snap de forma independiente. Además, actualmente es posible que un desarrollador de MetaMask Snaps como nosotros reemplace el hash de una transacción a firmar por uno malicioso, por lo que nos gustaría introducir o proponer un mecanismo para evitarlo.

¿Puedes contarnos un poco sobre ti y tu equipo?

Nuestro equipo dirige una pequeña startup —a42— en Japón y Singapur. a42 está desarrollando una cerradura inteligente Web3 "wΞlock" que permite la autenticación con contratos inteligentes, incluyendo NFT y ENS: https://a42.io/w3lock. En 2022, participamos en varios hackathons para aprender nuevas tecnologías como MetaMask Snaps.

Hideyoshi Moriya (piyo.eth): Hideyoshi lleva experimentando y desarrollando aplicaciones basadas en Ethereum desde 2017. Desarrolló un proyecto colaborativo de arte NFT llamado "Pixereum" en 2017. Trabajó en Google como especialista técnico de producto y fundó su empresa "a42" en 2019. En a42, desarrolla dapps que pueden funcionar en el mundo real. Actualmente está desarrollando una cerradura inteligente Web3 "wΞlock" que puede abrirse mediante ENS/NFT, basándose en el PoC que desarrolló en 2021: https://twitter.com/hm0429/status/1465241679800111107

Hiroyuki Tachibana (tachibana.eth): Hiroyuki es cofundador e ingeniero en a42. Lideró un proyecto para construir un módulo de autenticación blockchain para dispositivos IoT "w3a.io" y recibió una beca de la Ethereum Foundation. Obtuvo varios premios en hackathons de ETHGlobal a lo largo de 2022. Actualmente está desarrollando una solución de privacidad zkp para el producto de cerradura inteligente Web3.

Yusuke Moriya (yskmyskm.eth): Yusuke es diseñador en a42. Trabajó como artista de CG/VFX en diversas producciones audiovisuales y participó en proyectos para marcas globales y videoclips de pequeña escala. Cuenta con 12 años de experiencia en la industria cinematográfica y se especializa en expresiones abstractas mediante gráficos por computadora. También ha trabajado como director de fotografía y director de documentales.

¿Qué oportunidades ves con MetaMask Snaps y las posibilidades que abre para el espacio Web3?

Creemos que MetaMask Snaps hará que las complejas tecnologías Web3 sean más accesibles tanto para desarrolladores como para usuarios, y contribuirá significativamente a que las aplicaciones web tradicionales se integren con Web3. Estamos igual de entusiasmados con la creación de MetaMask Snaps que cuando salió la primera tienda de aplicaciones móviles. ¡Te animamos a probarlo y hacer realidad tus ideas!

¿Algún consejo que quieras compartir con los desarrolladores interesados en probar MetaMask Snaps?

Recomendamos comenzar con la plantilla de MetaMask Snaps (https://github.com/MetaMask/template-snap-monorepo) y modificarla primero.

Consejo: Puede que te preguntes cómo obtener el objeto ethereum inyectado. El objeto wallet es equivalente a él.

Desarrollando con MetaMask Snaps

Para comenzar con MetaMask Snaps:

1. Consulta la documentación para desarrolladores

2. Instala MetaMask Flask

3. Revisa una guía de MetaMask Snaps

4. Mantente conectado con nosotros en Twitter, GitHub discussions y Discord

¡Estén atentos a nuestro equipo en el próximo hackathon cerca de ti! ¡Feliz BUIDLing ⚒️!

Aviso legal: Los MetaMask Snaps son desarrollados en general por terceros distintos de Consensys Software. El uso de MetaMask Snaps desarrollados por terceros se realiza a tu propia discreción y riesgo, y con el acuerdo de que serás el único responsable de cualquier pérdida o daño que resulte de dichas actividades. Consensys no ofrece ninguna garantía expresa ni implícita, ya sea oral o escrita, con respecto a los MetaMask Snaps desarrollados por terceros, y declina toda responsabilidad por los Snaps desarrollados por terceros. El uso de software relacionado con blockchain conlleva riesgos, y los asumes en su totalidad al utilizar MetaMask Snaps.