How to handle other events with WalletKit on the Web platform

In total, there are five distinct kinds of incoming requests from the TON Connect bridge. They form the corresponding events and their handlers:

Incoming request	WalletKit method to listen and process the request
connect	onConnectRequest()
disconnect	onDisconnect()
transaction	onTransactionRequest()
signData	onSignDataRequest()
restoreConnection	None — this is a connection health check of the JS bridge
Any event error	onRequestError()

Handle onTransactionRequest

If a dApp is connected to the wallet service, the former can request to initiate a blockchain transaction, which fires the transaction request over the bridge. The wallet service then handles it with the onTransactionRequest method of the WalletKit.

On TON, transactions are initiated by sending an external message to the TON wallet contract, which then processes it and sends internal messages as requested. To estimate money flows for planned transactions, WalletKit uses emulation via the configured API client, if supported.

TypeScript

kit.onTransactionRequest(async (event) => {
  try {
    if (!event.preview.data) {
      console.log('Transaction emulation skipped');
    } else if (event.preview.data.result === 'success') {
      // If the emulation was successful,
      // show net asset changes to the user for a confirmation.
      // There, positive amounts mean incoming transfers,
      // and negative mean outgoing ones.
      console.log(event.preview.data.moneyFlow?.ourTransfers ?? []);
    } else {
      // Transaction emulation was not successful,
      // but you can still allow a user to proceed — with a warning.
      console.warn('Transaction emulation failed');
    }
    if (confirm('Do you confirm this transaction?')) {
      await kit.approveTransactionRequest(event);
    } else {
      await kit.rejectTransactionRequest(event, 'User rejected');
    }
  } catch (error) {
    console.error('Transaction handler error:', error);
    await kit.rejectTransactionRequest(event, 'Fatal error in the connection handler');
  }
});

Handle onSignDataRequest

If a dApp is connected to the wallet service, the former can request to sign data with the private key used by the selected TON wallet, which fires the signData request over the bridge. The wallet service then handles it with the onSignDataRequest method of the WalletKit.

The data to sign can be of several kinds: text, binary, or a raw cell.

TypeScript

kit.onSignDataRequest(async (event) => {
  try {
    // Data to be signed can be of three distinct types.
    // Depending on a type, show it to the user for a confirmation.
    const dataToSign = event.payload.data;
    switch (dataToSign.type) {
      case 'text':
        console.log(dataToSign.value.content);
        break;
      case 'binary':
        console.log(dataToSign.value.content);
        break;
      case 'cell':
        // The `request.cell` contains a hex-encoded string with a serialized cell
        // and the `request.schema` describes a TL-B schema to parse the `request.cell`
        console.log(dataToSign.value.content);
        console.log(dataToSign.value.schema);
        break;
    }
    if (confirm('Do you confirm this data sign request?')) {
      try {
        // Sign the data with the user's approval
        const result = await kit.approveSignDataRequest(event);
        console.log('Signed successfully:', result);
      } catch (error) {
        console.error('Signing failed:', error);
      }
    } else {
      await kit.rejectSignDataRequest(event, 'User rejected');
    }
  } catch (error) {
    console.error('Data sign handler error:', error);
    await kit.rejectSignDataRequest(event, 'Fatal error in the data sign handler');
  }
});

Handle request errors

Upon any error in any of the requests, the onRequestError() method is invoked. Provide it with a callback function that would handle arbitrary errors and display useful information to the user.

TypeScript

kit.onRequestError(async (event) => {
  console.error('Error in request ID:', event.id);
  console.error('Details:', event.error);
  console.error('Data:', event.data);
});

Next steps

Work with Toncoin

See also

• WalletKit overview
• TON Connect overview