This document provides a comprehensive guide on integrating decentralized applications (dApps) with our crypto wallet. It covers all the supported RPC methods and their usage.
You can connect your dApp to users' HaHa wallets by detecting HaHa in their browsers and connecting to their accounts. This guide provides step-by-step instructions for connecting to HaHa using the wallet detection mechanism introduced by EIP-6963. This approach enables you to detect multiple installed wallets and connect to them without conflicts.
<aside> 🔔 Learn more about EIP-6963.
</aside>
To connect to HaHa, you can utilize the following third-party libraries that are compatible with EIP-6963:
In the createAppKit function, pass an argument called featuredWalletIds and include HaHa’s wallet id of 719bd888109f5e8dd23419b20e749900ce4d2fc6858cf588395f19c82fd036b3 in the array
How to pass argument: https://docs.reown.com/appkit/react/core/options#featuredwalletids
Sample code:
import { createAppKit } from '@reown/appkit/react'
//... other configs
createAppKit({
adapters: [wagmiAdapter],
networks: [customChain],
projectId,
metadata,
features: {
analytics: true,
connectMethodsOrder: ['wallet', 'social', 'email'],
},
enableWalletConnect: true,
featuredWalletIds: [
//add HaHa as featured wallet
'719bd888109f5e8dd23419b20e749900ce4d2fc6858cf588395f19c82fd036b3',
//other wallet ids
'1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa',
]
})
//... other configs
For installation guide see here: https://docs.reown.com/appkit/react/core/installation
This is easily done by creating your Custom Wallet List and populating HaHa inside it. To display HaHa, simply create a Custom Wallet:
import { Wallet, getWalletConnectConnector } from '@rainbow-me/rainbowkit';
export interface MyWalletOptions {
projectId: string;
}
export const haha = ({ projectId }: MyWalletOptions): Wallet => ({
id: 'haha-wallet',
name: 'HaHa',
iconUrl: '<https://www.haha.me/images/logo-seo.png>',
iconBackground: '#FFFFFF',
downloadUrls: {
android: '<https://play.google.com/store/apps/details?id=com.permutize.haha>',
ios: '<https://apps.apple.com/us/app/haha-crypto-portfolio-tracker/id1591158244>',
chrome: '<https://chromewebstore.google.com/detail/haha-wallet/andhndehpcjpmneneealacgnmealilal>',
},
mobile: {
getUri: (uri: string) => 'haha://wc?uri=' + encodeURIComponent(uri),
},
qrCode: {
getUri: (uri: string) => uri,
instructions: {
learnMoreUrl: '<https://www.haha.me>',
steps: [
{
description:
'We recommend putting Haha Wallet on your home screen for faster access to your wallet.',
step: 'install',
title: 'Open the HaHa Wallet app',
},
{
description:
'After you scan, a connection prompt will appear for you to connect your wallet.',
step: 'scan',
title: 'Tap the scan button',
},
],
},
},
extension: {
instructions: {
learnMoreUrl: '<https://www.haha.me>',
steps: [
{
description:
'We recommend pinning HaHa Wallet to your taskbar for quicker access to your wallet.',
step: 'install',
title: 'Install the HaHa Wallet extension',
},
{
description:
'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
step: 'create',
title: 'Create or Import a Wallet',
},
{
description:
'Once you set up your wallet, click below to refresh the browser and load up the extension.',
step: 'refresh',
title: 'Refresh your browser',
},
],
},
},
createConnector: getWalletConnectConnector({ projectId }),
});
You can easily add HaHa to your wallet options by creating your Custom Wallet List and including HaHa in it. To display HaHa, simply add haha_wallet to your walletList configuration.
<PrivyProvider
appId="your-privy-app-id"
config={{
appearance: {
// Defaults ['detected_wallets', 'metamask', 'coinbase_wallet', 'rainbow', 'wallet_connect']
walletList: ['haha_wallet', 'detected_wallets', 'wallet_connect'],
...insertTheRestOfYourAppearanceConfig
},
...insertTheRestOfYourPrivyProviderConfig
}}
>
{children}
</PrivyProvider>
Follow these steps to create a React TypeScript project that connects to HaHa:
<aside> 🔔 Coming Soon
</aside>
If you want users to support your app inside mobile browsers, eg. Safari/Chrome, we highly recommend using WalletConnect. Their AppKit is compatible with Wagmi and EIP-6963.
HaHa provides a detailed reference for its Ethereum provider API. When users visit a website, HaHa Wallet injects the API through the window.haha provider object. This allows developers to access and utilize various provider properties, methods, and events within their dapps, enabling smooth integration of Ethereum-based features.
This property returns true if HaHa Wallet is installed on the user's device, and false if it is not.
Example:
provider.isHaHa // Or window.haha.isHaHa if you don't support EIP-6963.
This property indicates whether the provider is currently connected to the active blockchain network. If the provider is not connected, a page reload is required to re-establish the connection. For further details, refer to the connect and disconnect events.
<aside> 🔔 This method is not related to accessing a user's accounts. In the context of the provider interface, 'connected' and 'disconnected' specifically refer to the provider's ability to make RPC requests to the current blockchain network.
</aside>
Example:
provider.isConnected() // Or window.haha.isConnected() if you don't support EIP-6963.
This method is used to submit JSON-RPC API requests to Ethereum via HaHa.
Parameters
method: string The JSON-RPC API method nameparams: array | object (Optional) Parameters for the RPC method. Typically, if a method includes parameters, they are almost always provided as an array.Return
A promise that resolves with the result of the RPC method call. If the request fails, the promise is rejected with an error.
Example
provider // Or window.haha if you don't support EIP-6963.
.request({
method: "eth_sendTransaction",
params: [
{
from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155",
to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
gas: "0x76c0",
gasPrice: "0x9184e72a000",
value: "0x9184e72a",
data: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675",
},
],
})
.then((result) => {
// The result depends on the specific RPC method used.
// For example, this method returns a transaction hash as a hexadecimal string if successful.
})
.catch((error) => {
// If the request fails, the promise is rejected with an error.
})
The HaHa provider emits events using the Node.js EventEmitter API.
The provider emits the accountsChanged event when the return value of the eth_accounts RPC method changes. The eth_accounts method returns either an empty array or an array containing the addresses of accounts that the caller is permitted to access, with the most recently used account listed first. Callers are identified by their URL origin, meaning all sites with the same origin share the same permissions.
This event is triggered when the user's exposed account address changes. To manage accounts effectively, you should listen to this event.
provider // Or window.haha if you don't support EIP-6963.
.on("accountsChanged", handler: (accounts: Array<string>) => void);
The provider emits the chainChanged event when the currently connected blockchain network changes. To detect when a user switches networks, you should listen to this event.
provider // Or window.haha if you don't support EIP-6963.
.on("chainChanged", handler: (chainId: string) => void);
The provider emits the connect event when it first becomes able to submit RPC requests to a blockchain network. It's recommended to listen for this event and use the isConnected() method to check the provider's connection status.
interface ConnectInfo {
chainId: string;
}
provider // Or window.haha if you don't support EIP-6963.
.on("connect", handler: (connectInfo: ConnectInfo) => void);
The provider emits the disconnect event if it becomes unable to submit RPC requests to a blockchain network. This typically occurs due to network connectivity issues or unexpected errors.
When this event is emitted, the provider will not accept new requests until the connection to the network is re-established, which usually requires reloading the page. You can also use the isConnected() method to check if the provider is disconnected.
provider // Or window.haha if you don't support EIP-6963.
.on("disconnect", handler: (error: ProviderRpcError) => void);
The provider emits the message event when it receives a message that requires user notification. The type property indicates the nature of the message.
A common use case for this event is receiving RPC subscription updates. For instance, if you create a subscription using eth_subscribe, each update to that subscription is emitted as a message event with a type of eth_subscription.
interface ProviderMessage {
type: string;
data: unknown;
}
provider // Or window.haha if you don't support EIP-6963.
.on("message", handler: (message: ProviderMessage) => void);
Use the removeListener method to remove specific event listeners from an EventEmitter object. In the example below, removeListener is used to remove listeners for the connect and accountsChanged events.
// Use window.haha instead of provider if EIP-6963 is not supported.
// Add listeners
provider.on("connect", updateWalletAndAccounts)
provider.on("accountsChanged", updateWallet)
provider.on("chainChanged", updateWalletAndAccounts)
provider.on("disconnect", disconnectWallet)
// Remove individual listeners
provider.removeListener("connect", updateWalletAndAccounts)
provider.removeListener("accountsChanged", updateWallet)
You can use the removeAllListeners method to remove all listeners from the event emitter at once. This method is useful when you need to clean up all listeners simultaneously.
// Use window.haha instead of provider if EIP-6963 is not supported.
// Remove all listeners
provider.removeAllListeners()
Table of Contents
eth_blockNumberReturns the number of the most recent block.
{
"method": "eth_blockNumber",
"params": []
}
eth_callExecutes a new message call immediately without creating a transaction on the blockchain.
{
"method": "eth_call",
"params": [{"to": "0xAddress", "data": "0xData"}, "latest"]
}
eth_chainIdReturns the chain ID of the current network.
{
"method": "eth_chainId",
"params": []
}
eth_estimateGasEstimates the gas required to execute a transaction.
{
"method": "eth_estimateGas",
"params": [{"to": "0xAddress", "data": "0xData"}]
}
eth_feeHistoryReturns historical gas fee data.
{
"method": "eth_feeHistory",
"params": [1, "latest", []]
}
eth_gasPriceReturns the current gas price in wei.