# How to detect Keplr
You can know if Keplr is installed on the user device by checking
undefined, Keplr is not installed (note: sometimes
window.keplr may return
undefined even when Keplr is installed if browser is parsing the DOM or the way it runs scripts).
window.keplr will definitely return
Keplr if the document's
readyState is complete or upon document's
load event if Keplr is installed.
There are many ways to use Keplr upon the load event. Refer to the examples below:
You can register the function to
or track the document's ready state through the document event listener:
There may be multiple ways to achieve the same result, and not one method is preferred over the other.
# Keplr-specific features
If you were able to connect Keplr with CosmJS, you may skip to the Use Keplr with CosmJS section.
While Keplr supports an easy way to connect to CosmJS, there are additional functions specific to Keplr which provides additional features.
# Using with Typescript
@keplr-wallet/types package has the type definition related to Keplr.
If you're using TypeScript, run
npm install --save-dev @keplr-wallet/types or
yarn add -D @keplr-wallet/types to install
Then, you can add the
@keplr-wallet/types window to a global window object and register the Keplr related types.
# Enable Connection
window.keplr.enable(chainIds) method requests the extension to be unlocked if it's currently locked. If the user hasn't given permission to the webpage, it will ask the user to give permission for the webpage to access Keplr.
enable method can receive one or more chain-id as an array. When the array of chain-id is passed, you can request permissions for all chains that have not yet been authorized at once.
If the user cancels the unlock or rejects the permission, an error will be thrown.
# Get Address / Public Key
If the webpage has permission and Keplr is unlocked, this function will return the address and public key in the following format:
It also returns the nickname for the key store currently selected, which should allow the webpage to display the current key store selected to the user in a more convenient mane.
# Sign Amino
Similar to CosmJS
signAmino, but Keplr's
signAmino takes the chain-id as a required parameter. Signs Amino-encoded
# Sign Direct / Protobuf
Similar to CosmJS
signDirect, but Keplr's
signDirect takes the chain-id as a required parameter. Signs Proto-encoded
# Request Transaction Broadcasting
This function requests Keplr to delegates the broadcasting of the transaction to Keplr's LCD endpoints (rather than the webpage broadcasting the transaction). This method returns the transaction hash if it succeeds to broadcast, if else the method will throw an error. When Keplr broadcasts the transaction, Keplr will send the notification on the transaction's progress.
# Interaction Options
Keplr v0.8.11+ offers additional options to customize interactions between the frontend website and Keplr extension.
preferNoSetFee is set to true, Keplr will prioritize the frontend-suggested fee rather than overriding the tx fee setting of the signing page.
preferNoSetMemo is set to true, Keplr will not override the memo and set fix memo as the front-end set memo.
You can set the values as follows:
# Custom event
# Change Key Store Event
When the user switches their key store/account after the webpage has received the information on the key store/account the key that the webpage is aware of may not match the selected key in Keplr which may cause issues in the interactions.
To prevent this from happening, when the key store/account is changed, Keplr emits a
keplr_keystorechange event to the webpage's window. You can request the new key/account based on this event listener.