A carteira oficial Algorand Wallet adicionará o protocolo WalletConnect em seu próximo lançamento (provavelmente em meados de agosto). Como desenvolvedor de dApp, você provavelmente deseja se preparar agora para permitir que seus usuários assinem transações geradas por seu dApp nativamente dentro do aplicativo Algorand Wallet.

O ecossistema Algorand tem um conjunto robusto de ofertas de carteira de vários parceiros. A extensão de carteira AlgoSigner para Chrome atende principalmente usuários de desktop, armazenando chaves do lado do cliente dentro da extensão. A integração myAlgo Connect suporta quase todas as plataformas e navegadores, armazenando chaves do lado do cliente. A carteira Algorand oficial (e de código aberto) oferece uma experiência mobile-first, armazenando chaves dentro do enclave seguro do dispositivo móvel.

Antes dessa próxima integração, os desenvolvedores de dApp só podiam implementar métodos de assinatura de desktop via AlgoSigner e MyAlgo Connect, mesmo que estivessem tentando alcançar um usuário que interage principalmente com a blockchain Algorand por meio do aplicativo móvel Algorand Wallet. É aí que entra o Algorand Wallet mais o protocolo WalletConnect. Com essa nova integração com o WalletConnect, os desenvolvedores de dApp agora têm a opção adicional de enviar uma solicitação de assinatura de transação para o dispositivo móvel, usando a conexão segura entre o dApp e o Algorand Wallet.

O que é WalletConnect

WalletConnect é um protocolo aberto para comunicação segura entre carteiras e Dapps (aplicativos Web3); Não é uma blockchain e não tem token. Do ponto de vista do usuário final, eles realmente não precisam entender como funciona, mas verão essas conexões em sua carteira móvel. Como um desenvolvedor de dApp, você vai querer entender alguns conceitos básicos sobre o protocolo para finalizar a integração em sua interface de usuário.

Informação do site WalletConnect:

O protocolo estabelece uma conexão remota entre dois aplicativos e/ou dispositivos usando um servidor Bridge para retransmitir payloads. Esses payloads são criptografados simetricamente por meio de uma chave compartilhada entre os dois pares. A conexão é iniciada por um ponto que exibe um QR Code ou link direto com um URI WalletConnect padrão e é estabelecida quando a contraparte aprova essa solicitação de conexão. Ele também inclui um servidor Push opcional para permitir que aplicativos nativos notifiquem o usuário sobre payloads recebidos para conexões estabelecidas.

Sumário

1 . O que é WalletConnect

2 . Primeiros Passos
..... . CONFIGURAÇÃO DE CONEXÃO
..... . ASSINAR TRANSAÇÃO
..... . EXIBIR RESULTADOS
..... . ENVIAR TRANSAÇÃO ASSINADA

3 . Próximos passos

Primeiros Passos

Continue usando o SDK de sua escolha para gerar as transações não assinadas em seu dApp. Você só precisa modificar a ação do botão na interface do usuário para usar o WalletConnect. Aqui estão alguns trechos de código do dApp demo.

CONFIGURAÇÃO DE CONEXÃO

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();

ASSINAR TRANSAÇÃO

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

EXIBIR RESULTADOS

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

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

ENVIAR TRANSAÇÃO ASSINADA

Seu dApp receberá a transação assinada da carteira Algorand do usuário via protocolo WalletConnect e permitirá que você a envie para a rede Algorand normalmente.

Próximos passos

Assista ao replay do vídeo para ouvir a equipe da Algorand Wallet sobre esse próximo recurso. Eles mostram a demonstração e respondem às suas perguntas de integração. Prepare-se para permitir que os usuários experimentem seu dApp inteiramente de seu dispositivo móvel usando Algorand Wallet para armazenar suas chaves com segurança e assinar suas transações.

Conecte-se com nossa comunidade e equipe de desenvolvimento no Discord para obter respostas para todas as suas perguntas de integração.

Esse artigo é uma tradução de Ryan R. Fox feita por @bananlabs. Você pode encontrar o artigo original aqui