Provider API for WAX: Connect Browser Wallets & Integrate Web3 Wallets

·

Integrating blockchain functionality into decentralized applications (DApps) requires seamless communication between the front end and users' digital wallets. The Injected Provider API serves as a powerful bridge, enabling DApps to interact securely with users’ Web3 wallets—specifically on the WAX blockchain. This guide explores how developers can leverage this API to connect wallets, retrieve account data, sign transactions, and manage real-time events—all while maintaining compatibility with established protocols.

Whether you're building a decentralized exchange (DEX), NFT marketplace, or blockchain game on WAX, understanding how to use provider APIs effectively is essential for delivering a smooth user experience.

👉 Discover how easy it is to integrate Web3 wallet connectivity into your DApp.


What Is the Injected Provider API?

The Injected Provider API is a JavaScript interface automatically embedded by wallet providers—such as OKX Wallet—into websites visited by users. When a user with an enabled Web3 wallet visits your DApp, the API becomes available in the browser's global scope, allowing your application to communicate directly with the wallet.

This integration enables core functionalities such as:

Unlike traditional APIs that require backend servers or third-party services, the injected provider operates client-side, ensuring private keys never leave the user’s device. This enhances security and aligns with decentralized principles.

For developers, this means building interactive blockchain experiences without managing sensitive credentials—users retain full control at all times.


Compatibility with Scatter Protocol

One of the key advantages of OKX Wallet’s implementation on the WAX network is its full compatibility with the Scatter protocol, a widely adopted standard for EOSIO-based blockchains like WAX.

Developers familiar with Scatter will find the transition seamless. All methods, event structures, and data formats follow the same conventions defined in the original Scatter JS library. This ensures broad tooling support and reduces learning curves.

While Scatter development has slowed, its legacy lives on through modern implementations like OKX Wallet’s provider API—offering updated security and improved performance while preserving backward compatibility.

If you’ve previously built on EOS or other EOSIO chains using Scatter, your existing codebase can often be adapted with minimal changes.


Connect Wallet and Retrieve Account Information

To begin interacting with a user’s wallet, your DApp must first establish a connection and request permission to access their account.

Here’s how to initiate login using ScatterJS:

import ScatterJS from '@scatterjs/core';
import ScatterEOS from '@scatterjs/eosjs2';

ScatterJS.plugins(new ScatterEOS());

ScatterJS.login().then(identity => {
  const account = identity.accounts[0];
  console.log(account); // { blockchain: 'wax', name: 'user123', authority: 'active' }
});

This snippet does the following:

  1. Imports required libraries
  2. Registers the EOS/WAX plugin
  3. Triggers a login prompt in the user’s wallet
  4. Returns identity data upon approval

Once granted, your app receives read-only access to the selected account. From here, you can display balances, track activity, or prepare transaction payloads.

🔑 Core Keywords: WAX blockchain, Web3 wallet integration, Injected Provider API, DEX API documentation, connect browser wallet, sign transactions, Scatter protocol


Check Wallet Connection Status

Before attempting any interaction, verify whether a wallet is connected. This prevents errors and improves UX by showing appropriate prompts.

import ScatterJS from '@scatterjs/core';
import ScatterEOS from '@scatterjs/eosjs2';

ScatterJS.plugins(new ScatterEOS());

const isConnected = ScatterJS.isConnected();
console.log(isConnected); // true or false

Use this check during page load or before rendering wallet-dependent UI components. If false, guide users to install or unlock their wallet extension.

👉 See how fast you can enable wallet detection in your Web3 project.


Fetch Connected Wallet Information

After confirming connectivity, retrieve detailed account information for display or further processing.

import ScatterJS from '@scatterjs/core';
import ScatterEOS from '@scatterjs/eosjs2';

ScatterJS.plugins(new ScatterEOS());

if (ScatterJS.isConnected()) {
  const identity = ScatterJS.identity;
  const account = identity.accounts[0];
  console.log(account);
}

This returns structured data including:

Displaying this information helps users confirm they’re logged in with the correct account—especially important when managing multiple identities.


Sign and Broadcast Transactions

To perform actions on-chain—such as transferring tokens or minting NFTs—your DApp must request transaction signing.

This process uses eosjs, the official JavaScript library for EOSIO blockchains:

import ScatterJS from '@scatterjs/core';
import ScatterEOS from '@scatterjs/eosjs2';
import { JsonRpc, Api } from 'eosjs';

ScatterJS.plugins(new ScatterEOS());

const network = ScatterJS.Network.fromJson({
  blockchain: 'wax',
  chainId: '1064487b3cd1a897ce03ae5b6a865651747e2e152090f99c1d19d44e01aea5a4',
  host: 'nodes.get-scatter.com',
  port: 443,
  protocol: 'https'
});

const rpc = new JsonRpc(network.fullhost());
ScatterJS.connect('YourAppName', { network }).then(connected => {
  if (!connected) return console.error('No wallet detected');

  const eos = ScatterJS.eos(network, Api, { rpc });

  ScatterJS.login().then(identity => {
    if (!identity) return console.error('User denied access');

    const account = identity.accounts[0];

    eos.transact({
      actions: [
        {
          account: 'eosio.token',
          name: 'transfer',
          authorization: [{
            actor: account.name,
            permission: account.authority
          }],
          data: {
            from: account.name,
            to: 'receiver',
            quantity: '1.0000 WAX',
            memo: ''
          }
        }
      ]
    }).then(res => {
      console.log('Transaction sent:', res);
    }).catch(err => {
      console.error('Error:', err);
    });
  });
});

This example demonstrates a token transfer. Upon calling eos.transact(), the user’s wallet opens a confirmation dialog. Only after explicit approval is the transaction broadcast.


Manage Real-Time Events

Enhance interactivity by listening to wallet state changes in real time.

Supported events include:

import ScatterJS from '@scatterjs/core';

const handleConnect = () => {
  console.log('Wallet connected!');
};

// Add listener
ScatterJS.on('connect', handleConnect);

// Remove listener when no longer needed
ScatterJS.off('connect', handleConnect);

These events allow dynamic updates—like refreshing balances or re-rendering components—without requiring manual refreshes.


Frequently Asked Questions (FAQ)

Q: Is the Injected Provider API secure?
A: Yes. The API never accesses private keys. All signing operations occur within the user’s wallet, ensuring complete control and protection against unauthorized access.

Q: Can I use this API for mobile wallets?
A: While primarily designed for browser extensions, similar patterns apply to mobile dapp browsers. For native apps, consider using deep linking or WalletConnect alternatives.

Q: Does OKX Wallet support multiple accounts?
A: Yes. Users can switch between accounts, and your app can detect changes via the accountChanged event.

Q: Do I need to run my own node?
A: No. You can use public endpoints like nodes.get-scatter.com. However, for production apps, consider reliable RPC providers for better uptime.

Q: What happens if the user rejects a transaction?
A: The promise returned by transact() will reject with an error. Always wrap these calls in try-catch blocks or .catch() handlers.

Q: Is this compatible with other EOSIO chains?
A: Yes. With minor configuration tweaks (e.g., chain ID and endpoint), the same code works across EOS, Telos, and other EOSIO-based networks.


Ready to bring Web3 functionality to life in your DApp? With robust tools and clear documentation, integrating wallet connectivity on WAX has never been easier.

👉 Start integrating secure wallet interactions today.