Verify Signatures with Cosmos Libraries

import { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { fromBase64, toUtf8 } from '@cosmjs/encoding';
import { Secp256k1, Secp256k1Signature, sha256 } from '@cosmjs/crypto';
import { serializeSignDoc, makeSignDoc } from '@cosmjs/amino';

function SignatureVerification() {
  const [isValid, setIsValid] = useState<boolean | null>(null);

  const verifyADR036Signature = async () => {
    const pubkeyBase64 = 'A08EGB7ro1ORuFhjOnZcSgwYlpe0DSFjVNUIkNNQxwKQ';
    const signatureBase64 = '...'; // Signature from signAmino
    const originalMessage = 'Hello Para!';
    const signerAddress = 'cosmos1...';
    const chainId = 'cosmoshub-4';

    try {
      const pubkey = fromBase64(pubkeyBase64);
      const signature = fromBase64(signatureBase64);

      const signDoc = makeSignDoc(
        [{ type: 'sign/MsgSignData', value: { signer: signerAddress, data: btoa(originalMessage) } }],
        { amount: [], gas: '0' },
        chainId,
        '',
        0,
        0
      );

      const serialized = serializeSignDoc(signDoc);
      const messageHash = sha256(serialized);

      const sig = Secp256k1Signature.fromDer(signature);
      const valid = await Secp256k1.verifySignature(sig, messageHash, pubkey);

      setIsValid(valid);
      console.log('Signature valid:', valid);
    } catch (error) {
      console.error('Verification failed:', error);
      setIsValid(false);
    }
  };

  return (
    <View>
      <Button title="Verify Signature" onPress={verifyADR036Signature} />
      {isValid !== null && <Text>Valid: {isValid ? 'Yes' : 'No'}</Text>}
    </View>
  );
}