LogoLogo
  • WELCOME TO ALEPH ZERO
  • EXPLORE
    • About Aleph Zero
    • AlephBFT Consensus
    • The Economy of Aleph Zero
    • Where to Buy AZERO
    • Decentralized Governance on Aleph Zero
    • Ecosystem
    • Aleph Zero Foundation Treasury Management
    • Community
    • Glossary
    • Audit & Research Papers
  • USE
    • Wallets
    • Explorer
    • Ledger
    • Telegram Notifications
    • Aleph Zero Signer
      • General introduction
      • What does Signer do?
      • What are Sub-accounts and Sub-account paths?
      • Why is it critical to store your Secret Phrase in a safe place?
      • How to forget and restore accounts?
      • What are Networks?
      • What are Trusted apps?
    • Dashboard
      • Dashboard basics
      • Overview
    • Stake
      • Staking Basics
      • Staking Menu Overview
      • How to Start Staking with the Aleph Zero Dashboard
      • How to Start Staking With the Developer Wallet
      • How to start staking using Ledger hardware wallet
      • How to Change Nominations
      • How to Stop Staking
      • Staking Rewards
      • Validators
      • Commission and Foundation Nodes
      • Proxy Accounts
    • Validate
      • Validating Overview
      • Hardware requirements
      • Running an Aleph Node on Testnet
        • Downloading and running the node
        • Verifying your setup
        • Customizing your setup
        • Building and running from source [advanced]
          • Building from source
          • Set environment variables
          • Download DB snapshot
          • Running the binary
        • Appendix: Ports, addresses, validators, and archivists
      • Running an Aleph Node on Mainnet
        • Running the node
        • Building and running from source [advanced]
      • Setting your identity
      • Making the node validate
      • Securing your validator
      • Troubleshooting
      • Elections and Rewards Math
      • Testnet Validator Airdrop
      • Foundation Nomination Program
    • Using the EVM-layer
    • Governance
      • Token
      • Multisig Accounts
  • BUILD
    • Aleph Zero smart contracts basics
      • Setting up a Testnet account
      • Installing required tools
      • Creating your first contract
      • Deploying your contract to Aleph Zero Testnet
      • Extending your contract
    • Cross contract calls
      • Using references
      • Using dynamic calls
    • Migrating from Solidity
    • Writing e2e tests with ink-wrapper
    • Aleph Zero Signer integration
    • Front-end app: smart contract interaction
    • Security Course by Kudelski Security
      • ink! Developers Security Guideline
      • Lesson 1 - Getting started with ink!
      • Lesson 2 - Threat Assessment
      • Lesson 3 - Integer Overflow
      • Lesson 4 - Signed-integer
      • Lesson 5 - Role-Based Access Control
      • Lesson 6 - Address Validation
      • Lesson 7 - Smart Contract Control
    • Development on EVM-layer
  • PROTOCOL DETAILS
    • Shielder
      • Overview
      • Design against Bad Actors
      • Preliminaries - ZK-relations
      • Notes and Accounts
      • ZK-ID and Registrars
      • Anonymity Revokers
      • PoW Anonymity Revoking
      • Relayers
      • Deterministic Secret Management
      • SNARK-friendly Symmetric Encryption
      • SNARK-friendly Asymmetric Encryption
      • Cryptography
      • Token shortlist
      • User Wallet
      • Versioning
      • PoC
      • Version 0.1.0
      • Version 0.2.0
    • Common DEX
      • Common Whitepaper - Differences
      • Dutch Auctions
  • FAQ
  • Tutorials
    • Withdrawing coins from exchanges
      • How to withdraw your AZERO coins from KuCoin
      • How to withdraw your AZERO coins from MEXC Global
      • How to withdraw your AZERO coins from HTX
  • Setting up or restoring a wallet
    • How to set up or recover your AZERO account using Aleph Zero Signer
    • How to set up or recover your AZERO account using the official mainnet web wallet
    • How to set up or recover your AZERO account using Nova Wallet
    • How to set up or recover your AZERO account using SubWallet
    • How to set up or recover your AZERO account using Talisman
  • Staking
    • How to stake via a direct nomination using the Aleph Zero Dashboard
    • How to stake via a nomination pool using the Aleph Zero Dashboard
    • How to destroy a nomination pool via the Aleph Zero Dashboard
Powered by GitBook
On this page
  • Intro
  • Requirements
  • Create project
  • Install dependency
  • Check if Signer is injected
  • Connect to Signer
  • Loading accounts
  • Transaction: prepare accounts
  • Transaction: set up the API
  • Transaction: sign a transaction
  • Closing remarks
  • Signer icons

Was this helpful?

  1. BUILD

Aleph Zero Signer integration

Learn how to integrate Aleph Zero Signer into web apps.

PreviousWriting e2e tests with ink-wrapperNextFront-end app: smart contract interaction

Last updated 1 year ago

Was this helpful?

Intro

In this tutorial, we create a simple web app integrated with the Aleph Zero Signer. This app will:

  • import and display accounts from the Signer;

  • sign a simple transfer transaction using one of those accounts.

Requirements

    • Install on

  • node 14.18+ or 16+ (required to use vite with react: your dependencies may vary if you choose to use a different framework).

Create project

We're using to set up the React project.

Run:

npm create vite@latest signer-integration -- --template react-ts

You will then be able to start the dev server like this:

cd signer-integration
npm install
npm run dev

Install dependency

npm install @polkadot/extension-dapp

Check if Signer is injected

First, let's make sure Signer was successfully injected into our website.

If Signer (or any other extension supporting this API) is available, it is added to the window.injectedWeb3 object.

You can test that by running this example:

npm run dev

and, using your browser's developer console, inspect the window.injectedWeb3 object to see if Signer is registered.

Common pitfalls/troubleshooting

  • Signer extension wasn't successfully installed;

  • Signer is disabled;

  • Make sure your site is served from localhost, 127.0.0.1, or over https:// - Signer isn't injected on other sites served over http://.

Connect to Signer

Now, we will enable injected extensions as the API can handle more than one extension at a time–in our case, it's just the Signer.

We will be using web3Enable - a util function from @polkadot/extension-dapp. It enables the connection and returns a list of all injected extensions.

We're going to call this method in the onClick handler of the 'Connect account' button:

import { web3Enable } from "@polkadot/extension-dapp";

type InjectedExtension = Awaited<ReturnType<typeof web3Enable>>[number];

const [extensions, setExtensions] = useState<InjectedExtension[]>([]);

const loadAccountsFromExtensions = async () => {
  // extension-dapp API: connect to extensions; returns list of injected extensions
  const injectedExtensions = await web3Enable(APP_NAME);

  setExtensions(injectedExtensions);
};

<button onClick={loadAccountsFromExtensions}>
  Connect to extensions
</button>

APP_NAME is a string - the name of the app that is trying to connect. This is how your app is going to be represented inside the Signer.

You have to call web3Enable before any other utility functions.

Now, after clicking the button and going through the Your privacy is protected screen, you should see one of these pop-ups:

Add an account to Signer if you haven't already, and make sure you select the checkbox next to it when connecting. Connecting an account means it will be available on a website–we'll be able to get the account information and initiate signing transactions.

You can change connected accounts by going to: settings (top left corner) > Trusted apps > <Your app>

Loading accounts

Now we can use web3Accounts helper function to get all the accounts provided by the Signer:

import { web3Accounts } from "@polkadot/extension-dapp";

type InjectedAccountWithMeta = Awaited<ReturnType<typeof web3Accounts>>[number];

const [accounts, setAccounts] = useState<InjectedAccountWithMeta[]>([]);

// extension-dapp API: get accounts from extensions filtered by name
const accounts = await web3Accounts(
  { extensions: ["aleph-zero-signer"] }
);

setAccounts(accounts);

<article>
  <h2>Signer accounts</h2>
  <ul>
    {accounts.map(({ address, meta: { name } }) => (
      <li key={address}>
        <strong>{name || "<unknown>"}</strong> {address}
      </li>
    ))}
  </ul>
</article>

Above, we're filtering to get only the accounts from the Signer, but you might choose to include all accounts.

Transaction: prepare accounts

Since, in this example, we will make transactions on the Aleph Zero Testnet, we will need two accounts and some funds (TZERO). Create a second account in the Signer. Accounts have associated networks, and we want both accounts to have the Aleph Zero Testnet selected. You can either select it in the account creator or change it later in the settings.

We should be able to filter the accounts over the selected network. To that end, web3Accounts has a genesisHash parameter available, and for the Aleph Zero Testnet, we want:

// extension-dapp API: get accounts from extensions filtered by name and chain
const accounts = await web3Accounts({
  extensions: ["aleph-zero-signer"],
  genesisHash:
    "0x05d5279c52c484cc80396535a316add7d47b1c5b9e0398dd1f584149341460c5",
});

Getting the funds

Transaction: set up the API

npm install @polkadot/api

We'll need to set it up and initialize it using the Aleph Zero Testnet websocket:

import { ApiPromise, WsProvider } from "@polkadot/api";

const ALEPH_ZERO_TESTNET_WS_PROVIDER = new WsProvider(
  "wss://ws.test.azero.dev"
);

const API_PROMISE = ApiPromise.create({
  provider: ALEPH_ZERO_TESTNET_WS_PROVIDER,
});

const [api, setApi] = useState<ApiPromise>();

useEffect(() => {
  API_PROMISE.then(setApi);
}, []);

Transaction: sign a transaction

Next, we are going to sign a simple transfer transaction. For the sake of simplicity, we are going to transfer 50 TZERO from the first account to the second one.

Note that we're using the big number implementation from @polkadot/util to make sure we don't exceed JavaScript's safe integer range.

npm install @polkadot/util

The balance on–chain is kept in pico (1e-12) TZERO, so we need to adjust the transferred value. Instead of hard-coding the units here, we can get this information from the api.

import { web3FromAddress } from "@polkadot/extension-dapp";
import { BN } from "@polkadot/util";

const makeTransfer = async () => {
  const [first, second] = accounts;

  // extension-dapp API: get address's injector
  const firstAddressInjector = await web3FromAddress(first.address);

  const transferAmount = new BN(50);
  const unitAdjustment = new BN(10).pow(new BN(api.registry.chainDecimals[0]));
  const finalAmount = transferAmount.mul(unitAdjustment);

  await api.tx.balances
    .transferAllowDeath(second.address, finalAmount)
    .signAndSend(first.address, { signer: firstAddressInjector.signer });
};

<button onClick={makeTransfer}>Make transfer</button>;

After clicking the button, you should see the Signer pop-up:

Lastly, you can confirm and check your accounts' balances in https://test.azero.dev/#/accounts.

Just because the transaction Promise doesn't throw an exception, it doesn't mean it succeeded - see https://polkadot.js.org/docs/api/cookbook/tx/#how-do-i-get-the-decoded-enum-for-an-extrinsicfailed-event.

Closing remarks

Signer icons

Feel free to use those icons when integrating Signer with your app:

Aleph Zero Signer exposes the polkadot.{js} dapp extension library API. You can check out their docs .

With the accounts ready, we need to set them up with some TZERO (the Aleph Zero Testnet currency). To do so, copy the first account address and paste it into the address field in the Testnet . You'll need to solve a captcha, and the system will transfer some TZERO to your account. You can check your accounts' balances e.g. in https://test.azero.dev/#/accounts (which, incidentally, is also an example of a Signer integration).

To create a transaction, we will be using the @polkadot/api library - .

We hope you've enjoyed this tutorial, and now you know how to smoothly integrate your app with the Signer. For other tutorials, head over to If you need any other help, make sure to join our !

Aleph Zero Signer
Google Chrome, Brave, MS Edge, and Opera
Install on Firefox
vite
here
Faucet
docs
alephzero.org/developers
Discord
Firefox developer console screenshot
No accounts screen
Connect app screen with one account
Transaction authorization screen