# Usage

`AppKit` is a singleton that interacts with the AppKit SDK.

## Implementation

#### Initialize

```kotlin
val connectionType = ConnectionType.AUTOMATIC or ConnectionType.MANUAL
val projectId = "" // Get Project ID at https://dashboard.reown.com/
val appMetaData = Core.Model.AppMetaData(
    name = "Kotlin.AppKit",
    description = "Kotlin AppKit Implementation",
    url = "kotlin.reown.com",
    icons = listOf("https://gblobscdn.gitbook.com/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media"),
    redirect = "kotlin-modal-wc://request"
)

CoreClient.initialize(projectId = projectId, connectionType = connectionType, application = this, metaData = appMetaData)

AppKit.initialize(
    init = Modal.Params.Init(CoreClient),
    onSuccess = {
        // Callback will be called if initialization is successful
     },
    onError = { error ->
        // Error will be thrown if there's an issue during initialization
    }
)
```

#### Session properties

You can define session properties by calling the `setSessionProperties` method on the `AppKit` object.

#### Chains

This example of define ethereum chain. You can define the chains you want to use. The chain must be EVM compatible.

```kotlin
Example of definition chains: https://github.com/reown-com/reown-kotlin/blob/main/product/appkit/src/main/kotlin/com/reown/appkit/presets/AppKitChainsPresets.kt

AppKit.setChains(AppKitChainsPresets.ethChains.values.toList())
```

**IMPORTANT**: `Chains` must be set before opening the modal.

## Usage

<Tabs>
<Tab title="Compose Accompanist">
```kotlin
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ModalBottomSheetState
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.google.accompanist.navigation.material.BottomSheetNavigator
import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi
import com.google.accompanist.navigation.material.ModalBottomSheetLayout
import com.google.accompanist.navigation.material.bottomSheet
import com.reown.appkit.ui.appKitGraph

setContent {
    val modalSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true)
    val bottomSheetNavigator = BottomSheetNavigator(modalSheetState)
    val navController = rememberNavController(bottomSheetNavigator)

    ModalBottomSheetLayout(bottomSheetNavigator = bottomSheetNavigator) {
        NavHost(
            navController = navController,
            startDestination = "home"
        ) {
            composable("home") {
                HomeScreen()
            }
            appKitGraph(navController)
        }
    }
}
```

**IMPORTANT**: AppKit uses accompanist navigation material inside. `ModalBottomSheetLayout` should be imported from [Accompanist Navigation Material](https://google.github.io/accompanist/navigation-material/)

```kotlin
import com.reown.appkit.ui.openAppKit

navController().openAppKit(
    shouldOpenChooseNetwork = true | false
    onError = {  }
)
```
</Tab>
<Tab title="Compose Component">
```kotlin
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ModalBottomSheetState
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.compose.material.ModalBottomSheetLayout

setContent {
    val modalSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true)
    val coroutineScope = rememberCoroutineScope()
    val navController = rememberNavController()

    ModalBottomSheetLayout(
        sheetContent = {
            AppKitComponent(
                shouldOpenChooseNetwork = true | false,
                closeModal = { coroutineScope.launch { modalSheetState.hide() }
            )
        }
    ) {
        // content
    }
}
```
</Tab>
<Tab title="Kotlin DSL">
```kotlin
import androidx.navigation.createGraph
import androidx.navigation.fragment.fragment
import com.reown.appkit.ui.appKitGraph

navController.graph = navController.createGraph("Home") {
    fragment<HomeFragment>("Home")
    appKit()
}
```

```kotlin
import androidx.navigation.fragment.findNavController
import com.reown.appkit.ui.openAppKit

findNavController().openAppKit(
    shouldOpenChooseNetwork = true | false
    onError = {  }
)
```
</Tab>
<Tab title="Nav graph">
```xml
<navigation >
    <fragment
        android:id="@+id/HomeFragment"
        android:name="com.reown.sample.HomeFragment">
    </fragment>

    <include app:graph ="@navigation/appkit_graph"/>
</navigation>
```

```kotlin
import androidx.navigation.fragment.findNavController
import com.reown.appkit.ui.openAppKit

findNavController().openAppKit(
    shouldOpenChooseNetwork = true | false
    onError = {  }
)
```
</Tab>
</Tabs>