Skip to main content

Components

Web3Modal Component

You can use predefined Web3ModalComponent 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 = {
Web3ModalComponent(
shouldOpenChooseNetwork = true | false,
closeModal = { coroutineScope.launch { modalSheetState.hide() }
)
}
) {
// content
}
}

Buttons

You can add ready made button components to your application

Web3Button

import com.walletconnect.web3.modal.ui.components.button.Web3Button
import com.walletconnect.web3.modal.ui.components.button.ConnectButtonSize
import com.walletconnect.web3.modal.ui.components.button.AccountButtonType
import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState

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

Network Button

import com.walletconnect.web3.modal.ui.components.button.NetworkButton
import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState

YourAppScreen(navController: NavController) {
val web3ModalState = rememberWeb3ModalState(navController = navController)
NetworkButton(state = web3ModalState)
}

Connect Button

import com.walletconnect.web3.modal.ui.components.button.ConnectButton
import com.walletconnect.web3.modal.ui.components.button.ConnectButtonSize
import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState

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

Account Button

import com.walletconnect.web3.modal.ui.components.button.AccountButton
import com.walletconnect.web3.modal.ui.components.button.AccountButtonType
import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState

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

Web3Modal State

Web3modalState is an object that ensures communication between your application and the state of the Web3Modal.

Create web3ModalState:

NavController is required to create Web3ModalState

    val web3modalState = rememberWeb3ModalState(navController)

Web3ModalState methods

    web3ModalState.isOpen

returns StateFlow<Boolean> whose value is updated depending on whether the web3modal component is open

    web3modalState.isConnected

returns StateFlow<Boolean> whose value depends on the active session in Web3Modal