Back to Home

ABPay DApp Integration Documentation

This document provides a guide for developers to integrate decentralized applications (DApps) with ABPay, a cryptocurrency wallet supporting EVM, Tron, and Solana blockchains. The wallet's namespace is window.abpay. This guide covers environment detection, connecting to supported blockchains, signing, and chain selection operations.

Key Points:

  • Environment Detection: Use the provided isInABPayApp() function to check if the user is in the ABPay environment.
  • EVM Connection: Access via window.abpay.ethereum, following MetaMask protocols.
  • Tron Connection: Access via window.abpay.tron, similar to TronLink.
  • Notes: Handle user rejection cases and verify the correct network is selected.

1. Detecting ABPay Environment

Before connecting, verify if the user is in the ABPay environment using the following function:

export function isInABPayApp() {
  if (
    typeof window !== "undefined" &&
    typeof window.navigator !== "undefined"
  ) {
    return /ABPay/i.test(window.navigator.userAgent);
  }
  return false;
}
  • Purpose: Checks if the browser's user agent contains "ABPay" to confirm the ABPay environment.
  • Usage: 
    if (isInABPayApp()) {
  console.log("User is in ABPay environment");
} else {
  console.log("Please install ABPay");
}
  • Note: This method relies on the user agent string, which may vary. Consider additional checks (e.g., window.abpay existence) for reliability.

2. Connecting to EVM Chains

ABPay supports EVM-compatible chains (e.g., Ethereum, Binance Smart Chain) via window.abpay.ethereum, which follows MetaMask’s standard protocol (EIP-1193).

2.1 Connection Steps

  1. Get EVM Provider: 
    var provider = window.abpay.ethereum;
  2. Request User Accounts: 
    provider
  .request({ method: "eth_requestAccounts" })
  .then((accounts) => {
    console.log("Connected accounts:", accounts);
  })
  .catch((error) => {
    if (error.code === 4001) {
      console.log("User rejected connection");
    } else {
      console.error("Connection error:", error);
    }
  });
  3. Get Current Chain ID: 
    provider.request({ method: "eth_chainId" }).then((chainId) => {
  console.log("Current chain ID:", chainId);
});
  4. Switch Network (if needed): 
    provider.request({
  method: "wallet_switchEthereumChain",
  params: [{ chainId: "0x1" }], // Example: Switch to Ethereum Mainnet
});

2.2 Signing Operations

  • Sign Message: 
    provider
  .request({
    method: "personal_sign",
    params: ["Message content", accounts[0]],
  })
  .then((signature) => {
    console.log("Signature:", signature);
  });

2.3 Notes

  • Error Handling: Handle user rejection (error code 4001) and other errors.
  • Reference: MetaMask developer documentation (https://docs.metamask.io/) applies to window.abpay.ethereum.
  • Network Compatibility: Ensure the user selects the correct EVM network (e.g., Mainnet or Testnet).

3. Connecting to Tron

ABPay supports the Tron blockchain via window.abpay.tron, with an interface similar to TronLink’s TronWeb.

3.1 Connection Steps

  1. Get Tron Provider: 
    var tronProvider = window.abpay.tron;
  2. Request User Accounts: 
    tronProvider
  .request({
    method: "tron_requestAccounts",
    params: {
      websiteIcon: "https://your-dapp.com/icon.png",
      websiteName: "Your DApp",
    },
  })
  .then((accounts) => {
    console.log("Connected Tron accounts:", accounts);
  })
  .catch((error) => {
    if (error.code === 4001) {
      console.log("User rejected connection");
    } else {
      console.error("Connection error:", error);
    }
  });
  3. Get Default Address: 
    if (tronProvider && tronProvider.defaultAddress.base58) {
  console.log("Default address:", tronProvider.defaultAddress.base58);
}

3.2 Signing Operations

  • Sign Transaction: 
    const transaction = await tronProvider.trx.getTransaction("transactionID");
const signedTx = await tronProvider.trx.sign(transaction);
console.log("Signed transaction:", signedTx);

3.3 Notes

  • Interface Assumption: Without specific ABPay Tron API details, it’s assumed to resemble TronLink’s TronWeb.
  • Reference: TronLink integration documentation (https://docs.tronlink.org/).
  • Network Selection: Ensure the user selects the correct Tron network (e.g., Mainnet or Nile Testnet).

4. Connecting to Solana

Comming soon...

5. Additional Operations

5.1 Signing

  • EVM: Use personal_sign or eth_signTypedData_v4 for signing.
  • Tron: Use tronProvider.trx.sign for transactions or messages.

5.2 Chain Selection

  • EVM: 
    provider.request({
  method: "wallet_switchEthereumChain",
  params: [{ chainId: "0x1" }],
});
  • Tron: Check or switch networks via tronProvider (refer to TronLink documentation).

5.3 Error Handling

Handle these cases:

  • User rejection (error code 4001).
  • Wallet not installed or window.abpay not detected.
  • Network mismatch or connection failures.

5.4 Security

  • No Private Keys: DApps must not request or store private keys or mnemonics.
  • Secure Communication: Use HTTPS for wallet interactions.
  • User Prompts: Provide clear messages for user rejections or errors.

6. Summary

BlockchainNamespaceConnection MethodReference Documentation
EVMwindow.abpay.ethereumprovider.request({ method: 'eth_requestAccounts' })MetaMask Documentation
Tronwindow.abpay.trontronProvider.request({ method: 'tron_requestAccounts' })TronLink Documentation
  • Detect ABPay: Use isInABPayApp() to confirm the environment.
  • EVM: Leverage window.abpay.ethereum with MetaMask protocols.
  • Tron: Use window.abpay.tron, similar to TronLink.

7. Reference Resources