Sign a Message

import { FC, useState } from 'react';
import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { isTempoWallet } from '@dynamic-labs/tempo';

const SignMessageButton: FC = () => {
  const { primaryWallet } = useDynamicContext();
  const [signature, setSignature] = useState<string | null>(null);

  const onSignMessage = async () => {
    if (!primaryWallet || !isTempoWallet(primaryWallet)) {
      throw new Error('Tempo wallet not found');
    }

    const message = 'Hello, Tempo!';
    const sig = await primaryWallet.signMessage(message);

    if (sig) {
      setSignature(sig);
      console.log('Signature:', sig);
    }
  };

  return (
    <div>
      <button onClick={onSignMessage}>Sign Message</button>
      {signature && (
        <p style={{ wordBreak: 'break-all' }}>Signature: {signature}</p>
      )}
    </div>
  );
};

import { FC, useState } from 'react';
import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { isTempoWallet } from '@dynamic-labs/tempo';

const SignWithWalletClient: FC = () => {
  const { primaryWallet } = useDynamicContext();
  const [signature, setSignature] = useState<string | null>(null);

  const onSignMessage = async () => {
    if (!primaryWallet || !isTempoWallet(primaryWallet)) {
      throw new Error('Tempo wallet not found');
    }

    const walletClient = await primaryWallet.getWalletClient();

    const sig = await walletClient.signMessage({
      message: 'Hello, Tempo!',
    });

    setSignature(sig);
    console.log('Signature:', sig);
  };

  return (
    <div>
      <button onClick={onSignMessage}>Sign Message</button>
      {signature && (
        <p style={{ wordBreak: 'break-all' }}>Signature: {signature}</p>
      )}
    </div>
  );
};