Invalid type passed!
Received:
{type}
Expected one of:
{asideVariants.join(", ")}
: <>
{title &&
{title}
}
{children}
}
;
};
## Connection
Before receiving and handling wallet events, set up an events handler and establish a connection with a dApp.
### Setting up events handler
Create your own implementation of an events handler and add it to the WalletKit instance:
```kotlin 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"]}}
import io.ton.walletkit.ITONWalletKit
import io.ton.walletkit.listener.TONBridgeEventsHandler
import io.ton.walletkit.event.TONWalletKitEvent
class YourCustomWalletEventsHandler : TONBridgeEventsHandler {
override fun handle(event: TONWalletKitEvent) {
// Process the event or throw an error
}
}
val eventsHandler = YourCustomWalletEventsHandler()
walletKit.addEventsHandler(eventsHandler)
```
If a handler is not needed anymore or needs to be replaced by some other handler, remove it:
```kotlin 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"]}}
walletKit.removeEventsHandler(eventsHandler)
```
### Establishing connection with dApp
To establish a connection with a dApp, one needs a connection request URL from any source: copy/paste, QR code, deep link, etc. Send it to the WalletKit to initiate a connection request.
```kotlin 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"]}}
wallet.connect(/* connection url */)
```
Once the connection request is fired, the corresponding event will be sent to your event handler. The connection event contains an object you can use to display request information to your app's users and to approve (or reject) the request to complete connection establishment.
```kotlin 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"]}}
class YourCustomWalletEventsHandler : TONBridgeEventsHandler {
override fun handle(event: TONWalletKitEvent) {
when (event) {
is TONWalletKitEvent.ConnectRequest -> {
// Send request object to appropriate screen
// to display request information to app user
}
else -> {}
}
}
}
// Call an appropriate method corresponding to the user's response
// To approve
request.approve(walletAddress = /* TON wallet address */)
// To reject
request.reject(reason = /* rejection reason */)
```
After approval, the connection will be established, and the wallet service will be able to receive and handle other events associated with the corresponding TON wallet.
## Handling events
All event handling is made through a custom event handler.
Received events carry a lot of useful information that can be displayed to the user to allow them to approve or reject the request based on their action.
The only exception is a disconnection request. Even though it contains information you can show to a user, there is no need to approve or reject it on their end.
### Transaction event handling
```kotlin 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"]}}
class YourCustomWalletEventsHandler : TONBridgeEventsHandler {
override fun handle(event: TONWalletKitEvent) {
when (event) {
is TONWalletKitEvent.TransactionRequest -> {
// Send request object to appropriate screen
// to display request information to app user
}
else -> {}
}
}
}
// Call an appropriate method corresponding to the user's response
// To approve
request.approve()
// To reject
request.reject(reason = /* rejection reason */)
```
### Sign data event handling
```kotlin 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"]}}
class YourCustomWalletEventsHandler : TONBridgeEventsHandler {
override fun handle(event: TONWalletKitEvent) {
when (event) {
is TONWalletKitEvent.SignDataRequest -> {
// Send request object to appropriate screen
// to display request information to app user
}
else -> {}
}
}
}
// Call an appropriate method corresponding to the user's response
// To approve
request.approve()
// To reject
request.reject(reason = /* rejection reason */)
```
### Disconnection event handling
```kotlin 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"]}}
class YourCustomWalletEventsHandler : TONBridgeEventsHandler {
override fun handle(event: TONWalletKitEvent) {
when (event) {
is TONWalletKitEvent.Disconnect -> {
// Send info object to appropriate screen
// to display request information to app user
}
else -> {}
}
}
}
```
Alternatively, explore the complete demo wallet with WalletKit integration: