Starknet Wallet Integration Guide: Connect DApps with Web3 Wallets

Installation & Initialization

To integrate OKX Connect into your DApp, ensure you have OKX App version 6.98.0 or later installed. Use npm for seamless integration:

npm install @okxweb3/connect

Before connecting wallets, create a UI interface object to handle wallet connections and transactions:

Configuration Parameters

• dappMetaData (object):

  • name (string): Your application name (non-unique identifier)
  • icon (string): URL to your app's 180x180px PNG/ICO icon (SVG not supported)

• actionsConfiguration (object):

  • modals: Transaction alert display modes ('before'|'success'|'error'[] or 'all')
  • returnStrategy: Deep link return behavior for app wallets ('none' or ${string}://${string})
  • tmaReturnUrl: Telegram Mini Wallet return strategy ('back', 'none', or deeplink)

• uiPreferences (object):

  • theme: Color scheme (THEME.DARK, THEME.LIGHT, or "SYSTEM")
  • language: Supported locale codes (default: "en_US")

👉 Get started with Web3 wallet integration

Connecting Wallets

Establish wallet connections to retrieve addresses for transaction signing:

Request Parameters

• connectParams:

  • namespaces: Required chain info (currently only "starknet:mainnet")
  • optionalNamespaces: Optional chain connections
  • sessionConfig.redirect: Post-connection redirect URL (e.g., Telegram deeplink "tg://resolve")

Response

• topic: Session identifier
• accounts: Connected wallet addresses
• chains: Active chain IDs
• methods: Supported wallet methods

const connectResult = await provider.connect({
  namespaces: {
    starknet: {
      chains: ["starknet:mainnet"]
    }
  }
});

Transaction Workflow

1. Provider Initialization

Create an OKXStarknetProvider instance with OKXUniversalProvider:

const provider = new OKXStarknetProvider(universalProvider);

2. Account Information

Retrieve wallet details with chainId parameter:

const accountInfo = await provider.getAccount("starknet:mainnet");
// Returns { address: "0x...", pubKey: "..." }

3. Message Signing

Sign typed data messages:

const signature = await provider.signMessage(
  "0xWalletAddress", 
  { typedData: {...} },
  "starknet:mainnet"
);
// Returns [r, v] signature components

👉 Optimize your DEX API integration

Transaction Broadcasting

sendTransaction Parameters

• signerAddress: Wallet address
• transaction: Structured transaction data
• chainId: Target chain (optional)

const txHash = await provider.sendTransaction(
  "0xWalletAddress",
  { /* transaction object */ },
  "starknet:mainnet"
);

Disconnecting Wallets

Terminate active sessions before switching wallets:

await provider.disconnect();

Event Handling

Subscribe to wallet events:

• connect: Successful connection
• disconnect: Session termination
• transaction: Broadcast updates

Error Reference

FAQ

What chains does Starknet wallet support?

Currently only starknet:mainnet is supported for connections and transactions.

How do I handle user rejections?

Catch OKX_CONNECT_ERROR_CODES.USER_REJECTS_ERROR (code 1004) and provide fallback UI.

Can I customize the connection UI?

Yes, configure uiPreferences.theme and dappMetaData.icon during initialization.

Is Telegram Mini App supported?

Yes, configure tmaReturnUrl for Telegram-specific return behaviors.

How to test in development?

Use OKX App's Testnet mode with sandbox credentials.

👉 Explore advanced wallet features

This Markdown document maintains all technical details while optimizing for SEO with:
- Hierarchical headings
- Natural keyword integration ("Starknet wallet", "DEX API", "Web3 integration")
- Structured tables for error codes
- FAQ section addressing common queries