Articles
No Results

Create Publication

We are looking for publications that demonstrate building dApps or smart contracts!
See the full list of Gitcoin bounties that are eligible for rewards.

Article

Adding mobile signing support to your dApp

The official Algorand Wallet will add the WalletConnect protocol in its upcoming release (targeting mid-August). As a dApp developer, you likely want to prepare now to enable your users the ability to sign transaction generated by your dApp natively within the Algorand Wallet.

The Algorand ecosystem has a robust set of wallet offerings from multiple partners. The AlgoSigner wallet extension for Chrome primarily serves desktop users, storing keys client-side within the extension. The myAlgo Connect integration supports nearly all platforms and browsers, storing keys client-side. The official (and open source) Algorand Wallet provides a mobile-first experience, storing keys within the secure enclave of the mobile device.

Before this upcoming integration, dApp devevelopers could only implement desktop signing methods via AlgoSigner and MyAlgo Connect, even if they were trying to reach a user that primarily interacts with the Algorand blockchain via the Algorand Wallet mobile app. That’s where the Algorand Wallet plus the WalletConnect protocol comes in. With this new integration with WalletConnect, sApp developers now have the additional option of sending a transaction signing request to mobile device, using the secure connection between the dApp and the Algorand Wallet.

What is WalletConnect?

WalletConnect is an open protocol to communicate securely between Wallets and Dapps (Web3 Apps); It’s not a blockchain and has no token. From an end user standpoint, they really don’t need to understand how it works, but they will see these connections within their mobile wallet. As a dApp dev you’ll want to understand some basics about the protocol to finalize the integration into your user interface.

EditorImages/2021/07/22 13:08/WC-establishing-connection.png

From the WalletConnect site:

The protocol establishes a remote connection between two apps and/or devices using a Bridge server to relay payloads. These payloads are symmetrically encrypted through a shared key between the two peers. The connection is initiated by one peer displaying a QR Code or deep link with a standard WalletConnect URI and is established when the counter-party approves this connection request. It also includes an optional Push server to allow Native applications to notify the user of incoming payloads for established connections.

Getting started

Continue using the SDK of your choice to generate the unsigned transactions within your dApp. You just need to modify the button action within your user interface to use WalletConnect. Here are some code snippets from the demo dApp.

Connection setup

React component

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

Sign transaction

React component

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

Display results

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

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

Submit signed transaction

Your dApp will receive the signed transaction from the user’s Algorand Wallet via WalletConnect protocol and allow you to submit it to the Algorand network as you normally do.

Next steps

Watch the video replay to hear from the Algorand Wallet team about this upcoming feature. They show the demo and answer your integration questions. Get ready to enable users to experience your dApp entirely from their mobile device using Algorand Wallet to safely store their keys and sign your transactions.

Connect with our community & dev team on Discord to get answers to all of your integration questions.

dapp

signatures

wallet

July 22, 2021