Adición de soporte para firma móvil a su DApp

Algorand Wallet oficial agregará el protocolo WalletConnect en su próximo lanzamiento (programado para mediados de agosto). Como desarrollador de aplicaciones, es probable que desee prepararse desde ahora para permitir a sus usuarios la capacidad de firmar transacciones generadas por su DApp de forma nativa dentro de la mencionada primeramente.

Inscribirse

El equipo de Algorand Wallet estará en vivo para desarrolladores el martes 27 de julio a las 16:00 UTC (mediodía EST). Regístrese para obtener más información sobre Wallet Connect y cómo integrar el protocolo en su DApp para las capacidades de firma móvil.

El ecosistema de Algorand tiene un sólido conjunto de ofertas de billetera de múltiples socios. La extensión de monedero AlgoSigner para Chrome sirve principalmente a los usuarios de escritorio, almacenando claves del lado del cliente dentro de la extensión. La integración de myAlgo Connect es compatible con casi todas las plataformas y navegadores, almacenando claves del lado del cliente. Algorand Wallet oficial (y de código abierto) ofrece una experiencia dirigida principalmente para móviles, almacenando las claves dentro del enclave seguro del dispositivo.

Antes de esta próxima integración, los desarrolladores de DApps sólo podían implementar métodos de firma de escritorio a través de AlgoSigner y MyAlgo Connect, incluso si estaban tratando de llegar a un usuario que interactúa principalmente con la blockchain de Algorand a través de la aplicación móvil Algorand Wallet. Ahí es donde entra en juego esta última más el protocolo WalletConnect. Con la nueva integración, los desarrolladores ahora tienen la opción adicional de enviar una solicitud de firma de transacciones al dispositivo móvil, utilizando la conexión segura entre DApp y Algorand Wallet.

¿Qué es WalletConnect?

WalletConnect es un protocolo abierto para comunicarse de forma segura entre monederos y Dapps (Aplicaciones Web3); no es una cadena de bloques y no tiene token. Desde el punto de vista del usuario final, realmente no necesitan entender cómo funciona, pero verán estas conexiones dentro de su billetera móvil. Como desarrollador de una DApp, querrás comprender algunos conceptos básicos sobre el protocolo para finalizar la integración en su interfaz de usuario.

Desde el sitio de WalletConnect:

El protocolo establece una conexión remota entre dos aplicaciones y/o dispositivos que utilizan un servidor puente para retransmitir cargas útiles. Estas cargas útiles se cifran simétricamente a través de una clave compartida entre los dos pares. La conexión la inicia un par que muestra un código QR o un enlace profundo con un URI de WalletConnect estándar y se establece cuando la contraparte aprueba esta solicitud de conexión. También incluye un servidor Push opcional para permitir que las aplicaciones nativas notifiquen al usuario las cargas útiles entrantes para las conexiones establecidas.

Empezando

Continúe usando el SDK de su elección para generar las transacciones sin firmar dentro de su DApp. Sólo necesita modificar la acción del botón dentro de su interfaz de usuario para usar WalletConnect. Aquí hay algunos fragmentos de código de la DApp como demostración.

Configuración de la conexión

Componente React

<SButtonContainer>
  <SConnectButton left onClick={this.walletConnectInit} fetching= {fetching}>             {"Connect to WalletConnect"}
  </SConnectButton>
</SButtonContainer>

TypeScript

// bridge url
const bridge =  "https://bridge.walletconnect.org";

// create new connector
const connector = new WalletConnect({ bridge, qrcodeModal: QRCodeModal });

await this.setState({ connector });

// check if already connected
if (!connector.connected) {
  // create new session
  await connector.createSession();
}

// subscribe to events
await this.subscribeToEvents();

Firmar transacción

Componente React

<SButton left key=buy onClick={() => this.signTxnScenario(scenario)}>
    Buy Now!
</SButton>

TypeScript

// sign transaction
const requestParams: SignTxnParams =  [walletTxns];
const request = formatJsonRpcRequest("algo_signTxn", requestParams);
const result: Array<string | null> = await connector.sendCustomRequest(request);

const signedPartialTxns: Array<Uint8Array | null> = result.map((r, i) => {
    if (r == null) {
      if (!txnsToSign[i].shouldSign) {
        return null;
      }
      throw new Error(`Transaction at index ${i}: was not signed when it should have been`);
    }

    if (!txnsToSign[i].shouldSign) {
      throw new Error(`Transaction at index ${i} was signed when it should not have been`);    }

    const rawSignedTxn = Buffer.from(r, "base64");
    return new Uint8Array(rawSignedTxn);
});

Mostrar resultados

console.log("Signed txn info:", signedTxnInfo);

this.setState({
    connector,
    pendingRequest: false,
    signedTxns,
    result: formattedResult || null,
});

Enviar transacción firmada

Su DApp recibirá la transacción firmada de la Wallet de Algorand del usuario a través del protocolo WalletConnect y le permitirá enviarla a la red Algorand como lo hace normalmente.

Próximos pasos

Asegúrese de registrarse en la transmisión para desarrolladores (y luego ver el video) para escuchar al equipo de Algorand Wallet sobre esta próxima función. Ellos expondrán la demostración y responderán a sus preguntas sobre la integración en vivo y en directo. Prepárese para permitir que los usuarios experimenten su DApp completamente desde su dispositivo móvil usando Algorand Wallet para almacenar sus claves de manera segura y firmar sus transacciones.

Este artículo ha sido escrito originalmente por Ryan R. Fox  en «Artículos» del portal para desarrolladores de Algorand  y traducido por AlgoLatam.

Original Article: https://developer.algorand.org/articles/adding-mobile-signing-support-to-your-dapp/