Skip to main content

Signature request

Use the useSignatureRequest hook to send JSON-RPC signing requests through the Wallet Services overlay. Unlike signing directly through the provider, this presents a human-readable confirmation screen to the user before the operation is executed.

Import​

import { useSignatureRequest } from '@web3auth/react-native-sdk'

Usage​

import { useWeb3Auth, useSignatureRequest } from '@web3auth/react-native-sdk'
import { ethers } from 'ethers'

function SigningView() {
  const { provider } = useWeb3Auth()
  const { request, loading, error } = useSignatureRequest()

  const getAddress = async () => {
    const ep = new ethers.BrowserProvider(provider!)
    return (await ep.getSigner()).getAddress()
  }

  const signPersonalMessage = async () => {
    const address = await getAddress()
    const message = 'Hello from Web3Auth!'
    const signature = await request('personal_sign', [
      ethers.hexlify(ethers.toUtf8Bytes(message)),
      address,
    ])
    console.log('Signature:', signature)
  }

  const signTypedData = async () => {
    const address = await getAddress()
    const typedData = {
      types: {
        Message: [{ name: 'content', type: 'string' }],
      },
      primaryType: 'Message',
      domain: { name: 'MyApp', version: '1' },
      message: { content: 'Hello!' },
    }
    const signature = await request('eth_signTypedData_v4', [address, JSON.stringify(typedData)])
    console.log('Typed data signature:', signature)
  }

  const sendTransaction = async () => {
    const address = await getAddress()
    const txHash = await request('eth_sendTransaction', [
      {
        from: address,
        to: '0x0000000000000000000000000000000000000001',
        value: ethers.toBeHex(ethers.parseEther('0.001')),
        gasLimit: ethers.toBeHex(21000),
      },
    ])
    console.log('Transaction hash:', txHash)
  }

  return (
    <View>
      <Button title="Sign message" disabled={loading} onPress={signPersonalMessage} />
      <Button title="Sign typed data" disabled={loading} onPress={signTypedData} />
      <Button title="Send ETH" disabled={loading} onPress={sendTransaction} />
      {error && <Text style={{ color: 'red' }}>{error.message}</Text>}
    </View>
  )
}

Supported methods​

MethodDescription
personal_signSign a personal message (EIP-191).
eth_signTypedData_v4Sign structured typed data (EIP-712).
eth_sendTransactionSend an Ethereum transaction.
eth_signTransactionSign a transaction without broadcasting it.
On this page