BlockX Documentation
  • Introduction
    • BlockX
    • Tokens
    • Transactions
    • Inflation
    • Keys
      • Keyring
      • Multisig
    • Gas Fees
    • Wallet and Accounts
      • Adding BlockX to Metamask
      • Adding BlockX to Keplr
      • Transfers Between Wallets
      • Backup
    • Deploying Smart Contracts
      • Remix
      • Hardhat
  • BlockX White Paper
  • The BCX Token
  • Governance
    • Proposals
      • Proposal Tips
      • Submit a Proposal
    • Community Pool
    • Chain Parameters
  • Technical Concepts
    • Architecture
    • Accounts
    • Chain ID
    • Encoding
    • Pending State
  • dApp Developers
    • Establishing Connections
    • BlockX Clients
    • Guides
      • Wallet Integration
      • Smart Contract Incentive Registration
      • Tracing Transactions
      • Query Balances
    • Localnet
      • Single-node
      • Multi-node
    • Testnet
      • Testnet Commands
    • Ethereum JSON-RPC
      • JSON-RPC Server
      • Running the Server
      • Namespaces
      • JSON-RPC Methods
      • Events
    • Tendermint RPC
  • Protocol Developers
    • Modules
      • auth
        • Concepts
        • State
        • AnteHandlers
        • Keepers
        • Vesting
        • Parameters
        • Client Auth
      • bank
        • State
        • Keepers
        • Messages
        • Events
        • Parameters
        • Client
      • crisis
        • State
        • Messages
        • Events
        • Parameters
        • Client
      • distribution
        • Concepts
        • State
        • Begin Block
        • Messages
        • Hooks
        • Events
        • Parameters
        • Client
      • epochs
        • Concepts
        • State
        • Events
        • Keepers
        • Hooks
        • Queries
        • Future Improvements
      • erc20
        • Concepts
        • State
        • State Transitions
        • Transactions
        • Hooks
        • Events
        • Parameters
        • Clients
      • evidence
        • Concepts
        • State
        • Messages
        • Events
        • Parameters
        • BeginBlock
        • Client
      • evm
        • Concepts
        • State
        • State Transitions
        • Transactions
        • ABCI
        • Hooks
        • Events
        • Parameters
        • Client
      • feemarket
        • Concepts
        • State
        • Begin block
        • End block
        • AnteHandlers
        • Keeper
        • Events
        • Client
        • Future Improvements
        • Parameters
      • feesplit
        • Concepts
        • State
        • State Transitions
        • Transactions
        • Hooks
        • Events
        • Parameters
        • Clients
        • Future Improvements
      • gov
        • Concepts
        • State
        • Messages
        • Events
        • Future Improvements
        • Parameters
        • Client
      • incentives
        • Concepts
        • State
        • State Transitions
        • Transactions
        • Hooks
        • Events
        • Parameters
        • Clients
      • ibc-core
      • inflation
        • Concepts
        • State
        • Hooks
        • Events
        • Parameters
        • Clients
      • slashing
        • Concepts
        • State
        • Messages
        • BeginBlock
        • Hooks
        • Events
        • Staking Tombstone
        • Parameters
        • CLI
      • staking
        • State
        • State Transitions
        • Messages
        • Begin-Block
        • End-Block
        • Hooks
        • Events
        • Parameters
        • Client
      • upgrade
        • Concepts
        • State
        • Events
        • Client
        • Resources
      • vesting
        • Concepts
        • State
        • State Transitions
        • Transactions
        • AnteHandlers
        • Events
        • Clients
    • Module Accounts
    • IBC Channels
    • Ethermint API
  • Validators
    • Quick Start
    • Telemetry
    • Security
      • Tendermint KMS
      • Tendermint KMS + Ledger
      • Validator Security Checklist
      • Validator Backup
    • Snapshots, Archive Nodes
    • FAQ
  • Delegators
    • Staking Process
  • Tokenomics
  • Block Explorers
Powered by GitBook
On this page
  1. dApp Developers
  2. Guides

Wallet Integration

PreviousGuidesNextSmart Contract Incentive Registration

Last updated 1 year ago

Implementation Checklist

The integration implementation checklist for dApp developers consists of three categories:

  1. Frontend features

  2. Transactions and wallet interactions

  3. Client-side provider

Frontend

Make sure to create a wallet-connection button for Metamask and/or Keplr on the frontend of the application. For instance, consider the "Connect to a wallet" button on the interface of .

Transactions

Developers enabling transactions on their dApp have to determine wallet type of the user, create the transaction, request signatures from the corresponding wallet, and finally broadcast the transaction to the network.

Determining Wallet Type

Developers should determine whether users are using Keplr or MetaMask. Whether MetaMask or Keplr is installed on the user device can be determined by checking the corresponding window.ethereum or window.keplr value.

  • For MetaMask: await window.ethereum.enable(chainId);

  • For Keplr: await window.keplr.enable(chainId);

If either window.ethereum or window.keplr returns undefined after document.load, then MetaMask (or, correspondingly, Keplr) is not installed. There are several ways to wait for the load event to check the status: for instance, developers can register functions to window.onload, or they can track the document's ready state through the document event listener.

After the user's wallet type has been determined, developers can proceed with creating, signing, and sending transactions.

Create the Transaction

The example below uses the BlockX Testnet chainID. For more info, check the BlockX Chain IDs reference document here.

Developers can create MsgSend transactions.

import { createMessageSend } from @tharsis/transactions

const chain = {
    chainId: 50,
    cosmosChainId: 'blockx_50-1',
}

const sender = {
    accountAddress: 'blockx1mx9nqk5agvlsvt2yc8259nwztmxq7zjq50mxkp',
    sequence: 1,
    accountNumber: 9,
    pubkey: 'AgTw+4v0daIrxsNSW4FcQ+IoingPseFwHO1DnssyoOqZ',
}

const fee = {
    amount: '20',
    denom: 'abcx',
    gas: '200000',
}

const memo = ''

const params = {
    destinationAddress: 'blockx1pmk2r32ssqwps42y3c9d4clqlca403yd9wymgr',
    amount: '1',
    denom: 'abcx',
}

const msg = createMessageSend(chain, sender, fee, memo, params)

// msg.signDirect is the transaction in Keplr format
// msg.legacyAmino is the transaction with legacy amino
// msg.eipToSign is the EIP712 data to sign with metamaskjs

Sign and Broadcast the Transaction

The example below uses an BlockX Testnet RPC node.

Connections

For Ethereum RPC, BlockX gRPC, and/or REST queries, dApp developers should implement providers client-side, and store RPC details in the environment variable as secrets.

After creating the transaction, developers need to send the payload to the appropriate wallet to be signed (is the transaction in Keplr format, and msg.eipToSign is the data to sign with MetaMask).

Diffusion Finance
msg.signDirect
EIP712