Integrate Stellar blockchain functionality into your decentralized application with Hana Wallet using one of two flexible approaches.
📖 This guide covers implementation options to suit your platform requirements and developer preferences.
Integration Options
Option 1: Stellar Wallets Kit (Recommended) 🚀
Stellar Wallets Kit provides a modern, wallet-agnostic connection flow similar to WalletConnect, with seamless support for Hana Wallet across both mobile and desktop platforms. This is our recommended approach for most applications.
Key Benefits:
Consistent user experience across devices
Support for multiple wallet providers
WalletConnect-style connection flow
Ideal for mobile-first applications
Implementation Steps
1. Install the SDK
npm install @creit.tech/stellar-wallets-kit
2. Initialize and Connect
import {
StellarWalletsKit,
HANA_ID,
WalletNetwork,
HanaModule,
ISupportedWallet,
verifyStellarSignature,
} from "@creit.tech/stellar-wallets-kit";
import { Networks } from "stellar-sdk";
const kit = new StellarWalletsKit({
network: WalletNetwork.PUBLIC,
selectedWalletId: HANA_ID,
modules: [new HanaModule()],
});
kit.openModal({
onWalletSelected: async (wallet: ISupportedWallet) => {
kit.setWallet(wallet.id);
const address = await kit.getAddress();
console.log("Connected account:", address.address);
const signature = await kit.signMessage("Hello world", {
networkPassphrase: Networks.PUBLIC,
address: address.address,
});
const isValid = verifyStellarSignature(
"Hello world",
signature.signedMessage,
address.address
);
console.log("Signature verification:", isValid ? "✅ Valid" : "❌ Invalid");
},
});📚 Resources: stellarwalletskit.dev
Option 2: Freighter API Integration 🔌
For desktop browser applications or those already using the Freighter ecosystem, Hana Wallet provides compatibility with the Freighter API.
Key Benefits:
Familiar integration pattern for MetaMask users
Lightweight for desktop
Compatible with existing Freighter-based dApps
Implementation Steps
1. Install the SDK
npm install @stellar/freighter-api
2. Check Wallet Availability
import { isConnected } from "@stellar/freighter-api";
const checkWalletConnection = async () => {
const status = await isConnected();
if (status.isConnected) {
console.log("✅ Hana Wallet is available and connected");
return true;
} else {
console.warn("❌ Hana Wallet not detected or not connected");
return false;
}
};
3. Connect and Get Public Key
import { requestAccess, getAddress } from "@stellar/freighter-api";
const connectWallet = async () => {
const result = await requestAccess();
if (result.error) {
console.error("Connection error:", result.error);
return null;
}
console.log("Connected to account:", result.address);
return result.address;
};
const getPublicKey = async () => {
const result = await getAddress();
if (result.error) {
console.error("Error retrieving public key:", result.error);
return null;
}
return result.address;
};
4. Get Network Information
import { getNetworkDetails } from "@stellar/freighter-api";
const getNetworkInfo = async () => {
const result = await getNetworkDetails();
if (result.error) {
console.error("Network error:", result.error);
return null;
}
return {
network: result.network,
horizonUrl: result.networkUrl,
networkPassphrase: result.networkPassphrase,
sorobanRpcUrl: result.sorobanRpcUrl
};
};
5. Sign Transactions
import { signTransaction } from "@stellar/freighter-api";
const signStellarTransaction = async (xdr, network, address) => {
const result = await signTransaction(xdr, {
network,
address,
});
if (result.error) {
console.error("Signing error:", result.error);
return null;
}
return {
signedXdr: result.signedTxXdr,
signer: result.signerAddress
};
};
6. Sign Messages
import { signMessage } from "@stellar/freighter-api";
const signUserMessage = async (message, address) => {
const result = await signMessage(message, { address });
if (result.error) {
console.error("Message signing error:", result.error);
return null;
}
return {
signedMessage: result.signedMessage,
signer: result.signerAddress
};
};