Aleph Zero Snap: Incorporación de usuarios Web3 a la red Aleph Zero

MetaMask Snaps es la hoja de ruta para convertir a MetaMask en la wallet más extensible del mundo. Como desarrollador, puedes incorporar tus funcionalidades 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 MetaMask Snaps innovadores que se están construyendo hoy en día.

Aleph Zero Snap con Piotr y Michael

Conversamos con los desarrolladores de Web3 Piotr y Michael, quienes construyeron el Aleph Zero Snap en el ETHWarsaw Hackathon.

Repositorio del Snap: https://github.com/piotr-roslaniec/ethwarsaw-2022/tree/main/azero-snap/packages/snap-adapter

¿Por qué lo construyeron?

En nuestra opinión, la experiencia de wallet en el ecosistema de Polkadot sigue siendo deficiente. Por otro lado, la integración con MetaMask Snaps podría ayudar a incorporar a una población existente de usuarios de web3 a la red Aleph Zero.

¿Pueden explicarnos la implementación técnica?

El Adapter

Nuestro snap está compuesto por dos partes. La primera es un sitio web con el que interactúan los usuarios. La segunda es el Snap en sí. Estos dos elementos funcionan de manera similar a una arquitectura cliente-servidor, donde el snap es el servidor y el sitio web es el cliente. Para reflejar este límite natural, hemos extraído la API del snap a un paquete separado llamado adapter. Este expone todos los métodos posibles que el sitio web puede utilizar para interactuar con el snap. Dicha capa de abstracción facilita el uso del Snap por parte de otros clientes (sitios web). Nuestra API puede describirse mediante cuatro métodos, cuyos nombres son bastante autoexplicativos. Si quieres profundizar, aquí está el código completo.

export const getAccountFromSeed = async (seed: string): Promise<PublicAccount> => {
  return await requestSnap("getAccountFromSeed", [seed]);
}

export const generateNewAccount = async (): Promise<PublicAccount> => {
  return await requestSnap("generateNewAccount", []);
}

export const signTransaction = async (transaction: SignerPayloadJSON): Promise<{ signature: string }> => {
  return await requestSnap("signTransaction", [transaction as unknown as string]);
}

export const getAccounts = async (): Promise<string[]> => {
  return await requestSnap("getAccounts", []);
}
Copiar

La app

Habiendo explicado el vínculo entre nuestras capas, pasemos a la primera capa: el sitio web. Hicimos un fork de la polkadot app oficial basada en navegador. Luego tuvimos que reemplazar las funcionalidades principales, como la firma de transacciones, la creación de cuentas o su recuperación, pasando de la wallet basada en navegador a la basada en Snap. Por ejemplo, para firmar transacciones dentro de MetaMask, cambiamos la implementación de QrSigner para usar signTransaction del Snap.

La integración de MetaMask Snap con la polkadot app introdujo dos mejoras:

• En primer lugar, permitió heredar el modelo de seguridad de la extensión MetaMask en lugar de usar la wallet de la polkadot app, que está basada en almacenamiento local.

• En segundo lugar, pudimos usar la seed de MetaMask para crear una polkadot app de forma determinista, de modo que al exportar nuestra seed, la clave de Aleph Zero también se exporta.

La API de MetaMask

MetaMask proporciona llamadas a la API que pueden ser utilizadas por MetaMask Snaps si el usuario lo permite. En este caso, aprovechamos dos de ellas:

snap_manageState - que nos permite almacenar datos cifrados dentro de MetaMask. Por ejemplo, la usamos para almacenar las cuentas creadas. Interactuar con el estado es muy sencillo y puede simplificarse a:

const request = async (method: 'clear' | 'get' | 'update', newState?: unknown): Promise<any> => {
if (['get', 'clear'].includes(method) && newState) {
    throw new Error(`Cannot ${method} with newState`);
}
if (method == 'update' && !newState) {
    throw new Error('Cannot call update without newState');
}

const params = newState ? [method, newState] : [method];
return await wallet.request({
    method: `snap_manageState`,
    params,
  });
}
Copiar

snap_getBip44Entropy_ - para obtener entropía de la seed de MetaMask. docs

Vale la pena mencionar que existe una librería de MetaMask muy interesante, passworder, que nos permite cifrar y descifrar el estado fácilmente. En nuestro caso, utilizamos nuevamente la entropía de la seed de MetaMask como clave simétrica para cifrar el estado.

El SDK

Recapitulando: modificamos la polkadot app inyectando algo de JavaScript aquí y allá para habilitar el uso del Snap. El Snap puede obtener entropía de la seed dentro de MetaMask y gestionar el estado cifrado. El último paso sería integrarse con el SDK de Aleph Zero: polkadotjs.

Eso parece una tarea sencilla: simplemente ejecutar npm install @polkadot/api e importarlo. Sin embargo, importar dependencias a un Snap puede ser un desafío. Esta dificultad surge porque el Snap no se evalúa directamente en la máquina virtual de JavaScript; primero debe ejecutarse en un entorno sandbox dentro de Secure ECMAScript (SES). En resumen, el código que normalmente compila sin problemas podría fallar al cargarse en SES.

Código

Al trabajar con la mayoría de las librerías no tendremos ningún problema, pero ese no fue nuestro caso. Tuvimos dos problemas al evaluar el polkadotjs SDK dentro de SES; para resolverlos, escribimos dos scripts que se ejecutaban sobre el código fuente empaquetado.

El primero fue causado por código wasm con formato incorrecto incrustado dentro de un archivo JavaScript. Aquí está el script de corrección:

const fs = require('fs').promises;
const path = require('path');

const dirPath =
  '../../../../node_modules/@substrate/smoldot-light/dist/cjs/instance/autogen';

// SES doesn't like double slashes in strings so we need to replace them with single slashes
// and string concatenation.
async function fixDoubleSlash() {
  const files = ['wasm0.js', 'wasm1.js', 'wasm2.js'];
  for (const file of files) {
    console.log('Fixing ${file}');
    const filePath = path.join(__dirname, dirPath, file);
    const contents = await fs.readFile(filePath, 'utf8');
    let fixedContents = contents;
    while (fixedContents.includes('//')) {
      fixedContents = fixedContents.split('//').join('/"+"/');
    }
    await fs.writeFile(filePath, fixedContents);
  }
}

fixDoubleSlash();
Copiar

El segundo problema también fue causado por la extensión de polkadot, que intentaba acceder al método window.addEventListener, el cual está prohibido en SES. También se resolvió de forma trivial con un simple

const fs = require('fs').promises;
const path = require('path');

const bundlePath = path.join(__dirname, '../dist/bundle.js');

async function fix() {
  console.log(`Fixing ${bundlePath}`);
  const contents = await fs.readFile(bundlePath, 'utf8');
  const replaceMissingTypes = '\n\nwindow.addEventListener = function(){};\n\n';

  // Looking for a first breakline after the first line of the file
  // This is where we can safely inject our code
  const fixed = contents.replace('\n\n', replaceMissingTypes);
  await fs.writeFile(bundlePath, fixed);
}

fix();
Copiar

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

Nos encantaría hacer que nuestro snap sea totalmente compatible con polkadot.js y viable como wallet web en el ecosistema de Polkadot.

¿Pueden contarnos un poco sobre ustedes y su equipo?

Michael es programador en un banco polaco y trabaja a diario con tecnología blockchain. Le apasiona la programación y aprender cosas nuevas.

Piotr es ingeniero de software en NuCypher. Le interesan la privacidad, los datos y los sistemas distribuidos.

¿Cuándo conocieron MetaMask Snaps por primera vez y cómo fue esa experiencia?

Piotr - Inicialmente aprendí sobre MetaMask Snaps durante Devcon en Osaka. El tema resurgió a principios de este año, poco antes del hackathon de EthDenver.

Michaeł - Piotr me presentó MetaMask Snaps, poco después de EthDenver.

¿Qué diferencia a MetaMask Snaps de otras wallets?

La capacidad de acceder a criptografía específica de la aplicación y claves privadas en tu dapp: esto permite construir nuevos flujos de usuario sobre una experiencia familiar de wallet en el navegador.

¿Cómo es para ustedes y su equipo el proceso de construir MetaMask Snaps?

Las bases están, pero construir MetaMask Snaps más sofisticados, especialmente los que requieren elementos de UI personalizados, es complicado. Pasamos mucho tiempo tratando de adaptar nuestro modelo mental de experiencia como desarrolladores web a los Snaps, en aspectos como el despliegue, las pruebas, etc.

¿Qué significa MetaMask Snaps para ustedes?

Es una herramienta que otorga poder real a la comunidad; cada persona decide qué funcionalidades debe tener su MetaMask. Los plugins permiten democratizar el desarrollo y habilitar un crecimiento más rápido.

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

Acceso a más redes (especialmente las que no son EVM); la capacidad de intervenir en el ciclo de vida de las transacciones y añadir lógica personalizada (como verificaciones de seguridad) o personalizar la UX; almacenamiento cifrado en el navegador para contenido sensible específico de dapps, y también la posibilidad de "traer tu propia criptografía" a tus usuarios con MetaMask Snaps.

¿Algún consejo para los desarrolladores que quieran probar MetaMask Snaps?

Compilar librerías de JS en SES puede ser difícil, pero según nuestra experiencia, no es imposible. El ciclo de retroalimentación al desarrollar en MetaMask es bastante largo, así que asegúrate de escribir pruebas unitarias.

Existe una comunidad de desarrolladores pequeña pero activa en MetaMask Snaps; visitar Discord, las discusiones de GitHub, etc., puede ser muy enriquecedor, especialmente porque el producto aún es nuevo y hay poca documentación disponible fuera de esta comunidad.

Construyendo 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, discusiones de GitHub y Discord

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

Aviso legal: MetaMask Snaps son generalmente desarrollados por terceros distintos a 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 o implícita, ya sea oral o escrita, con respecto a los MetaMask Snaps desarrollados por terceros, y renuncia a toda responsabilidad por los MetaMask Snaps desarrollados por terceros. El uso de software relacionado con blockchain conlleva riesgos, y los asumes en su totalidad al utilizar MetaMask Snaps.