Sign Messages with Cosmos Libraries

import { useMutation } from '@tanstack/react-query';
import { View, Text, Button } from 'react-native';
import { useParaCosmjsAminoSigner } from '@getpara/react-native-wallet/cosmos';
import { makeSignDoc } from '@cosmjs/amino';

const CHAIN_ID = 'cosmoshub-4';

function MessageSigning() {
  const { aminoSigner, isLoading } = useParaCosmjsAminoSigner();
  const address = aminoSigner?.address;

  const { mutate: signMessage, data: signature, isPending } = useMutation({
    mutationFn: async () => {
      if (!aminoSigner || !address) throw new Error('Signer not ready');
      const message = 'Sign this message to authenticate with Para';
      const signDoc = makeSignDoc(
        [{ type: 'sign/MsgSignData', value: { signer: address, data: btoa(message) } }],
        { amount: [], gas: '0' },
        CHAIN_ID,
        '',
        0,
        0
      );
      const { signature: sig } = await aminoSigner.signAmino(address, signDoc);
      return sig.signature;
    },
  });

  if (isLoading) return <Text>Loading...</Text>;

  return (
    <View>
      <Text>Address: {address}</Text>
      <Button
        title={isPending ? 'Signing...' : 'Sign Message'}
        onPress={() => signMessage()}
        disabled={!aminoSigner || isPending}
      />
      {signature && <Text>Signature: {signature}</Text>}
    </View>
  );
}