Skip to main content
You can use predefined AppKitComponent and add it in your application. As a view, dialog or modal. 
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
    }
}

​
Buttons

You can add ready made button components to your application

​
Web3Button

  • Compose
  • View
import com.reown.appkit.ui.components.button.Web3Button
import com.reown.appkit.ui.components.button.ConnectButtonSize
import com.reown.appkit.ui.components.button.AccountButtonType
import com.reown.appkit.ui.components.button.rememberAppKitState

YourAppScreen(navController: NavController) {
    val appKitState = rememberAppKitState(navController = navController)
    Web3Button(
        state = appKitState,
        accountButtonType = AccountButtonType.NORMAL || AccountButtonType.MIXED,
        connectButtonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL
    )
}

​
Network Button

  • Compose
  • View
import com.reown.appkit.ui.components.button.NetworkButton
import com.reown.appkit.ui.components.button.rememberAppKitState

YourAppScreen(navController: NavController) {
    val appKitState = rememberAppKitState(navController = navController)
    NetworkButton(state = appKitState)
}

​
Connect Button

  • Compose
  • View
import com.reown.appkit.ui.components.button.ConnectButton
import com.reown.appkit.ui.components.button.ConnectButtonSize
import com.reown.appkit.ui.components.button.rememberAppKitState

YourAppScreen(navController: NavController) {
    val appKitState = rememberAppKitState(navController = navController)
    ConnectButton(
        state = appKitState,
        buttonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL
    )
}

​
Account Button

  • Compose
  • View
import com.reown.appkit.ui.components.button.AccountButton
import com.reown.appkit.ui.components.button.AccountButtonType
import com.reown.appkit.ui.components.button.rememberAppKitState

YourAppScreen(navController: NavController) {
    val appKitState = rememberAppKitState(navController = navController)
    AccountButton(
        state = appKitState,
        buttonSize = AccountButtonType.NORMAL || AccountButtonType.MIXED
    )
}

​
AppKit State

AppKitState is an object that ensures communication between your application and the state of the AppKit.

​
Create appKitState:

NavController is required to create appKitState 
    val appKitState = rememberAppKitState(navController)

​
AppKitState methods

    appKitState.isOpen
returns StateFlow<Boolean> whose value is updated depending on whether the appkit component is open 
    appKitState.isConnected
returns StateFlow<Boolean> whose value depends on the active session in AppKit