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