> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Usage

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

## Implementation

#### Initialize

```kotlin theme={null}
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 theme={null}
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 theme={null}
    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 theme={null}
    import com.reown.appkit.ui.openAppKit

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

  <Tab title="Compose Component">
    ```kotlin theme={null}
    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 theme={null}
    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 theme={null}
    import androidx.navigation.fragment.findNavController
    import com.reown.appkit.ui.openAppKit

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

  <Tab title="Nav graph">
    ```xml theme={null}
    <navigation >
        <fragment
            android:id="@+id/HomeFragment"
            android:name="com.reown.sample.HomeFragment">
        </fragment>

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

    ```kotlin theme={null}
    import androidx.navigation.fragment.findNavController
    import com.reown.appkit.ui.openAppKit

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