Components
Components
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
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
)
}
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
)
}
<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.NetworkButton
import com.reown.appkit.ui.components.button.rememberAppKitState
YourAppScreen(navController: NavController) {
val appKitState = rememberAppKitState(navController = navController)
NetworkButton(state = appKitState)
}
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)
}
<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.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
)
}
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
)
}
<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.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
)
}
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
)
}
<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.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
Was this page helpful?