Invalid type passed!
Received:
{type}
Expected one of:
{asideVariants.join(", ")}
: <>
{title &&
{title}
}
{children}
}
;
};
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()`](/ecosystem/walletkit/web/connections#handle-onconnectrequest) |
| `disconnect` | [`onDisconnect()`](/ecosystem/walletkit/web/connections#handle-ondisconnect) |
| `transaction` | [`onTransactionRequest()`](/ecosystem/walletkit/web/events#handle-ontransactionrequest) |
| `signData` | [`onSignDataRequest()`](/ecosystem/walletkit/web/events#handle-onsigndatarequest) |
| `restoreConnection` | None — this is a connection health check of the JS bridge |
| Any event error | [`onRequestError()`](#handle-request-errors) |
## 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.
```ts title="TypeScript" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
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`](/foundations/serialization/cells).
```ts title="TypeScript" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
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.
```ts title="TypeScript" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
kit.onRequestError(async (event) => {
console.error('Error in request ID:', event.id);
console.error('Details:', event.error);
console.error('Data:', event.data);
});
```
## Next steps
## See also
* [WalletKit overview](/ecosystem/walletkit/overview)
* [TON Connect overview](/ecosystem/ton-connect/overview)