Wagmi is not available on React Native. Use Ethers.js or Viem for EVM operations.
- Ethers.js
- Viem
Sign Personal Messages
import { useParaEthersSigner, useParaEthersSignMessage } from "@getpara/react-native-wallet/evm/ethers";
import { ethers } from "ethers";
import { JsonRpcProvider } from "ethers";
import { View, Text, TouchableOpacity } from "react-native";
const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
function SignMessage() {
const { ethersSigner } = useParaEthersSigner({ provider });
const { signMessageAsync, isPending, data: signature } = useParaEthersSignMessage(ethersSigner);
return (
<View>
<TouchableOpacity
disabled={isPending}
onPress={() => signMessageAsync("Hello from Para!")}
>
<Text>{isPending ? "Signing..." : "Sign Message"}</Text>
</TouchableOpacity>
{signature && <Text>Signature: {signature.slice(0, 20)}...</Text>}
</View>
);
}
Sign Structured Messages
import { useParaEthersSigner, useParaEthersSignMessage } from "@getpara/react-native-wallet/evm/ethers";
import { JsonRpcProvider } from "ethers";
import { View, Text, TouchableOpacity } from "react-native";
const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
function SignStructuredMessage() {
const { ethersSigner } = useParaEthersSigner({ provider });
const { signMessageAsync, isPending, data: signature } = useParaEthersSignMessage(ethersSigner);
const handleSign = () => {
const data = {
action: "authenticate",
timestamp: Date.now(),
nonce: Math.random().toString(36).substring(7),
};
signMessageAsync(JSON.stringify(data, null, 2));
};
return (
<View>
<TouchableOpacity onPress={handleSign} disabled={isPending}>
<Text>{isPending ? "Signing..." : "Sign Structured Data"}</Text>
</TouchableOpacity>
{signature && <Text>Signature: {signature.slice(0, 30)}...</Text>}
</View>
);
}
Sign Personal Messages
import { useParaViemClient, useParaViemSignMessage } from "@getpara/react-native-wallet/evm/viem";
import { http } from "viem";
import { sepolia } from "viem/chains";
import { View, Text, TouchableOpacity } from "react-native";
function SignMessage() {
const { viemClient } = useParaViemClient({
walletClientConfig: { chain: sepolia, transport: http() },
});
const { signMessageAsync, isPending, data: signature } = useParaViemSignMessage(viemClient);
return (
<View>
<TouchableOpacity
disabled={isPending}
onPress={() => signMessageAsync({ message: "Hello from Para!" })}
>
<Text>{isPending ? "Signing..." : "Sign Message"}</Text>
</TouchableOpacity>
{signature && <Text>Signature: {signature.slice(0, 20)}...</Text>}
</View>
);
}
Sign Structured Messages
import { useParaViemClient, useParaViemSignMessage } from "@getpara/react-native-wallet/evm/viem";
import { http } from "viem";
import { sepolia } from "viem/chains";
import { View, Text, TouchableOpacity } from "react-native";
function SignStructuredMessage() {
const { viemClient } = useParaViemClient({
walletClientConfig: { chain: sepolia, transport: http() },
});
const { signMessageAsync, isPending, data: signature } = useParaViemSignMessage(viemClient);
const handleSign = () => {
const data = {
action: "authenticate",
timestamp: Date.now(),
nonce: Math.random().toString(36).substring(7),
};
signMessageAsync({ message: JSON.stringify(data, null, 2) });
};
return (
<View>
<TouchableOpacity onPress={handleSign} disabled={isPending}>
<Text>{isPending ? "Signing..." : "Sign Structured Data"}</Text>
</TouchableOpacity>
{signature && <Text>Signature: {signature.slice(0, 30)}...</Text>}
</View>
);
}