This guide will help you integrate Hana Wallet into your dApp for Substrate/Polkadot.JS chains. You'll learn how to connect to the wallet, retrieve addresses, sign messages, and send transactions.

Prerequisites

Install the required dependencies:

npm install @polkadot/api @polkadot/extension-dapp @polkadot/util

Connecting to Hana Wallet

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

async function connectToHanaWallet() {
  try {
    const extensions = await web3Enable('Your dApp Name');
    const hanaExtension = extensions.find(ext => ext.name === 'hana');

    if (hanaExtension) {
      console.log('Successfully connected to Hana Wallet!');
      console.log('Hana Wallet version:', hanaExtension.version);
      return hanaExtension;
    } else {
      console.error('Hana Wallet not found. Please install it first.');
      return null;
    }
  } catch (error) {
    console.error('Error connecting to wallet:', error);
    return null;
  }
}

Getting User Accounts

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

async function getAccounts() {
  try {
    const allAccounts = await web3Accounts();
    console.log('Available accounts:', allAccounts);

    if (allAccounts.length > 0) {
      const firstAccount = allAccounts[0];
      console.log('Selected account address:', firstAccount.address);
      return firstAccount;
    } else {
      console.log('No accounts found');
      return null;
    }
  } catch (error) {
    console.error('Error getting accounts:', error);
    return null;
  }
}

Or, to get accounts specifically from Hana Wallet:

async function getHanaAccounts(hanaExtension) {
  return new Promise((resolve) => {
    hanaExtension.accounts.subscribe((accounts) => {
      console.log('Hana Wallet accounts:', accounts);
      resolve(accounts);
    });
  });
}

Connecting to a Substrate Chain

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

async function connectToNetwork(networkEndpoint) {
  try {
    const wsProvider = new WsProvider(networkEndpoint);
    const api = await ApiPromise.create({ provider: wsProvider });

    const chainName = await api.rpc.system.chain();
    const genesisHash = api.genesisHash.toHex();

    console.log(`Connected to chain: ${chainName}`);
    console.log(`Genesis hash: ${genesisHash}`);

    return api;
  } catch (error) {
    console.error('Error connecting to network:', error);
    return null;
  }
}

Common endpoints:

Polkadot: wss://rpc.polkadot.io
Kusama: wss://kusama-rpc.polkadot.io
Westend: wss://westend-rpc.polkadot.io

Signing a Message

import { web3FromAddress } from '@polkadot/extension-dapp';
import { stringToHex } from '@polkadot/util';

async function signMessage(address, message) {
  try {
    const injector = await web3FromAddress(address);
    const signRaw = injector?.signer?.signRaw;

    if (!signRaw) throw new Error('Signing not supported by the extension');

    const { signature } = await signRaw({
      address: address,
      data: stringToHex(message),
      type: 'bytes'
    });

    console.log('Message signed successfully!');
    console.log('Signature:', signature);
    return signature;
  } catch (error) {
    console.error('Error signing message:', error);
    return null;
  }
}

Sending a Transaction

import { web3FromAddress } from '@polkadot/extension-dapp';

async function sendNativeTokens(api, senderAddress, recipientAddress, amount) {
  try {
    const transferExtrinsic = api.tx.balances.transfer(recipientAddress, amount);
    const injector = await web3FromAddress(senderAddress);

    const txResult = await transferExtrinsic.signAndSend(
      senderAddress,
      { signer: injector.signer },
      ({ status, events }) => {
        if (status.isInBlock) {
          console.log(`Included in block: ${status.asInBlock.toString()}`);
        } else if (status.isFinalized) {
          console.log(`Finalized in block: ${status.asFinalized.toString()}`);
          events.forEach(({ event }) => {
            if (api.events.system.ExtrinsicSuccess.is(event)) {
              console.log('Transaction succeeded!');
            } else if (api.events.system.ExtrinsicFailed.is(event)) {
              console.error('Transaction failed!');
            }
          });
        }
      }
    );

    console.log('Transaction submitted');
    return txResult;
  } catch (error) {
    console.error('Error sending transaction:', error);
    return null;
  }
}

Troubleshooting

Common Issues

Wallet not detected
- Ensure Hana Wallet is installed and enabled
- Use the correct name: "hana"
Permission denied
- User may have denied connection request
- Prompt the user to approve access
Transaction failed
- Insufficient balance
- Incorrect parameters
- Network congestion

Best Practices

Error Handling
- Always wrap wallet and blockchain calls in try/catch
- Display helpful messages to users
UI Feedback
- Show loaders during transactions or wallet requests
- Confirm submission and success/failure
Network Flexibility
- Let users pick a network
- Store their choice for convenience
Security
- Never store private keys in your frontend
- Validate and sanitize all inputs

With Hana Wallet, your dApp can now easily interact with Polkadot and other Substrate-based chains. You’ve learned how to:

Connect to Hana Wallet
Retrieve user accounts
Connect to a blockchain network
Sign messages
Send native token transactions

You're now ready to launch dApps on the Polkadot ecosystem with Hana Wallet support!

Hana Wallet EVM Integration Guide

Hana Wallet Cosmos Integration Guide

Hana Wallet Injective Integration Guide

Hana Wallet Solana Integration Guide

Hana Wallet Stellar Integration Guide

Hana Wallet Polkadot Integration Guide