Sign Messages with Cosmos Libraries

import { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { useClient, useAccount } from '@getpara/react-native-wallet';
import { ParaAminoSigner } from '@getpara/cosmjs-v0-integration';
import { makeSignDoc } from '@cosmjs/amino';

const CHAIN_ID = 'cosmoshub-4';

function MessageSigning() {
  const para = useClient();
  const { isConnected } = useAccount();
  const [signature, setSignature] = useState<string>();

  const aminoSigner = para && isConnected ? new ParaAminoSigner(para, 'cosmos') : null;
  const address = aminoSigner?.address;

  const signArbitraryMessage = async () => {
    if (!aminoSigner || !address) return;

    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
    );

    try {
      const { signature: sig } = await aminoSigner.signAmino(address, signDoc);
      setSignature(sig.signature);
      console.log('Signature:', sig.signature);
    } catch (error) {
      console.error('Signing failed:', error);
    }
  };

  if (!para) return <Text>Loading...</Text>;

  return (
    <View>
      <Text>Address: {address}</Text>
      <Button title="Sign Message" onPress={signArbitraryMessage} />
      {signature && <Text>Signature: {signature}</Text>}
    </View>
  );
}