You can use predefined AppKitComponent and add it in your application. As a view, dialog or modal.
import androidx.compose.material.ExperimentalMaterialApiimport androidx.compose.material.ModalBottomSheetStateimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavControllerimport androidx.compose.material.ModalBottomSheetLayoutsetContent { 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#
import com.reown.appkit.ui.components.button.Web3Buttonimport com.reown.appkit.ui.components.button.ConnectButtonSizeimport com.reown.appkit.ui.components.button.AccountButtonTypeimport com.reown.appkit.ui.components.button.rememberAppKitStateYourAppScreen(navController: NavController) { val appKitState = rememberAppKitState(navController = navController) Web3Button( state = appKitState, accountButtonType = AccountButtonType.NORMAL || AccountButtonType.MIXED, connectButtonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL )}<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <com.reown.appkit.ui.components.button.views.Web3Button android:layout_width="wrap_content" android:layout_height="wrap_content" app:connect_button_size="NORMAL" || "SMALL" app:account_button_type="NORMAL" || "MIXED" /></LinearLayout>Network Button#
import com.reown.appkit.ui.components.button.NetworkButtonimport com.reown.appkit.ui.components.button.rememberAppKitStateYourAppScreen(navController: NavController) { val appKitState = rememberAppKitState(navController = navController) NetworkButton(state = appKitState)}<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <com.reown.appkit.ui.components.button.views.NetworkButton android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>Connect Button#
import com.reown.appkit.ui.components.button.ConnectButtonimport com.reown.appkit.ui.components.button.ConnectButtonSizeimport com.reown.appkit.ui.components.button.rememberAppKitStateYourAppScreen(navController: NavController) { val appKitState = rememberAppKitState(navController = navController) ConnectButton( state = appKitState, buttonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL )}<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <com.reown.appkit.ui.components.button.views.ConnectButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:connect_button_size="NORMAL" || "SMALL" /></LinearLayout>Account Button#
import com.reown.appkit.ui.components.button.AccountButtonimport com.reown.appkit.ui.components.button.AccountButtonTypeimport com.reown.appkit.ui.components.button.rememberAppKitStateYourAppScreen(navController: NavController) { val appKitState = rememberAppKitState(navController = navController) AccountButton( state = appKitState, buttonSize = AccountButtonType.NORMAL || AccountButtonType.MIXED )}<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <com.reown.appkit.ui.components.button.views.AccountButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:account_button_type="NORMAL" || "MIXED" /></LinearLayout>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.isOpenreturns StateFlow<Boolean> whose value is updated depending on whether the appkit component is open
appKitState.isConnectedreturns StateFlow<Boolean> whose value depends on the active session in AppKit