Skip to main content

Hooks

useWeb3Modal​

Control the modal with the useWeb3Modal hook

  import { useWeb3Modal } from '@web3modal/wagmi-react-native'

export default function Component() {

const { open, close } = useWeb3Modal()

open()
}

You can also select the modal's view when calling the open function

open({ view: 'Account' })

List of views you can select

VariableDescription
ConnectPrincipal view of the modal - default view when disconnected
AccountUser profile - default view when connected
NetworksList of available networks - you can select and target a specific network before connecting
WhatIsANetwork"What is a network" onboarding view
WhatIsAWallet"What is a wallet" onboarding view

useWeb3ModalState​

Get the current value of the modal's state

  import { useWeb3ModalState } from '@web3modal/wagmi-react-native'

const { open, selectedNetworkId } = useWeb3ModalState()

The modal state consists of two reactive values:

StateDescriptionType
openOpen state will be true when the modal is open and false when closed.boolean
selectedNetworkIdThe current chain id selected by the usernumber

Ethereum Library​

You can use Wagmi hooks to sign messages, interact with smart contracts, and much more.

useAccount​

Hook for accessing account data and connection status.

import { Text } from 'react-native'
import { useAccount } from 'wagmi'

function App() {
const { address, isConnecting, isDisconnected } = useAccount()

if (isConnecting) return <Text>Connecting…</Text>
if (isDisconnected) return <Text>Disconnected</Text>
return <Text>{address}</Text>
}

useSignMessage​

Hook for signing messages with connected account.

import { View, Text, Pressable } from 'react-native'
import { useSignMessage } from 'wagmi'

function App() {
const { data, isError, isLoading, isSuccess, signMessage } = useSignMessage({
message: 'gm wagmi frens'
})

return (
<View>
<Pressable disabled={isLoading} onPress={() => signMessage()}>
<Text>Sign message</Text>
</Pressable>
{isSuccess && <Text>Signature: {data}</Text>}
{isError && <Text>Error signing message</Text>}
</View>
)
}

useContractRead​

Hook for calling a read method on a Contract.

import { View, Text } from 'react-native'
import { useContractRead } from 'wagmi'

function App() {
const { data, isError, isLoading, isSuccess } = useContractRead({
address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
abi: wagmigotchiABI,
functionName: 'getHunger'
})

return (
<View>
{isLoading && <Text>Loading</Text>}
{isSuccess && <Text>Response: {data?.toString()}</Text>}
{isError && <Text>Error reading contract</Text>}
</View>
)
}