Signing - Ethereum

Pre-Requisite: You have generated the transaction and have it in the txn variable (see prior pages).

You have two options (EIP-712 and JSON), but EIP-712 is limited in terms of message size.

JSON

You can simply sign the JSON, similar to the signatures for other chains.

Wallet Connect / WAGMI

import {
  TransactionPayload,
  TxContext,
  createTxBroadcastBody
} from "bitbadgesjs-sdk"
import { signMessage } from "@wagmi/core"

const signTxn = async (context: TxContext, payload: TransactionPayload, simulate: boolean) => {
  if (!account) throw new Error("Account not found.")

  let sig = ""
  if (!simulate) {
    const message = payload.jsonToSign;
    sig = await signMessage({
        message: message
    });
  }

  const txBody = createTxBroadcastBody(context, payload, sig)
  return txBody
}

Standard

https://docs.metamask.io/wallet/reference/personal_sign/

const sig = await window.ethereum.request({
    method: 'personal_sign', //May be eth_sign on some wallets
    params: [address, payload.jsonToSign]
})

EIP-712

Important: EIP-712 is limited in message size. Due to its poor performance, it greatly slows down the blockchain, so we only allow it to be used for small messages.

payload.jsonToSign.length > 1000

Signing with Wallet Connect / WAGMI

import {
  TransactionPayload,
  TxContext,
  createTxBroadcastBodyEthereum
} from "bitbadgesjs-sdk"
import { signTypedData } from "@wagmi/core"

const signTxn = async (context: TxContext, payload: TransactionPayload, simulate: boolean) => {
  if (!account) throw new Error("Account not found.")

  let sig = ""
  if (!simulate) {
    sig = await signTypedData({
      message: payload.eipToSign.message as any,
      types: payload.eipToSign.types as any,
      domain: payload.eipToSign.domain,
      primaryType: payload.eipToSign.primaryType,
    })
  }

  const txBody = createTxBroadcastBodyEthereum(context, payload, sig)
  return txBody
}

Signing with Metamask

To sign with Metamask, replace the signature logic in the snipper above with the code below.

//Add necessary imports
import { _TypedDataEncoder } from 'ethers/lib/utils.js';

// Init Metamask
await window.ethereum.enable()

const ethAddress = '...'

//Option 1: window.ethereum
const eip = _TypedDataEncoder.getPayload(payload.eipToSign.domain, types_, payload.eipToSign.message);
const sig = await window.ethereum.request({
    method: 'eth_signTypedData_v4',
    params: [ethAddress, JSON.stringify(eip)],
})

//Option 2: Use the signer._signTypedData from ethers directly (https://docs.ethers.org/v5/api/signer/#Signer-signTypedData)
//It will give an error with an unused EIP712Domain type, so you have to remove that before calling it as seen below.
//It adds this type automatically.

//From https://github.com/wagmi-dev/wagmi/blob/main/packages/core/src/actions/accounts/signTypedData.ts#L41
const types_ = Object.entries(payload.eipToSign.types)
    .filter(([key]) => key !== 'EIP712Domain')
    .reduce((types, [key, attributes]: [string, TypedDataField[]]) => {
      types[key] = attributes.filter((attr) => attr.type !== 'EIP712Domain')
      return types
    }, {} as Record<string, TypedDataField[]>)

// Method name may be changed in the future, see https://docs.ethers.io/v5/api/signer/#Signer-signTypedData
return await signer._signTypedData(payload.eipToSign.domain, types_, payload.eipToSign.message)

Output

This will leave you with a variable which is to be submitted to a running blockchain node. See Broadcast to a Node.

Full Snippet

https://github.com/BitBadges/bitbadges-frontend/blob/main/src/bitbadges-api/contexts/chains/EthereumContext.tsx

import { Secp256k1 } from '@cosmjs/crypto';
import { disconnect as disconnectWeb3, signMessage, signTypedData } from '@wagmi/core';
import { useWeb3Modal } from '@web3modal/wagmi/react';

import { notification } from 'antd';
import { TransactionPayload, TxContext, convertToCosmosAddress, createTxBroadcastBody } from 'bitbadgesjs-sdk';
import { ethers } from 'ethers';
import { createContext, useContext } from 'react';
import { useCookies } from 'react-cookie';
import { useAccount as useWeb3Account } from 'wagmi';

import { ChainSpecificContextType } from '../ChainContext';
import { setPublicKey, useAccount } from '../accounts/AccountsContext';
import { ChainDefaultState } from './helpers';

export type EthereumContextType = ChainSpecificContextType;
export const EthereumContext = createContext<EthereumContextType>({ ...ChainDefaultState });

interface Props {
  children?: React.ReactNode;
}

export const EthereumContextProvider: React.FC<Props> = ({ children }) => {
  const [cookies, setCookies] = useCookies(['blockincookie', 'pub_key']);
  const { open } = useWeb3Modal();
  const web3AccountContext = useWeb3Account();
  const address = web3AccountContext.address || '';
  const cosmosAddress = convertToCosmosAddress(address);
  const account = useAccount(cosmosAddress);

  const autoConnect = async () => {};

  const connect = async () => {
    if (!address) {
      try {
        await open();
      } catch (e) {
        notification.error({
          message: 'Error connecting to wallet',
          description: 'Make sure you have a compatible Ethereum wallet installed (such as MetaMask) and that you are signed in to it.'
        });
      }
    }
  };

  const disconnect = async () => {
    await disconnectWeb3();
  };

  const signChallenge = async (message: string) => {
    const sign = await signMessage({
      message: message
    });

    const msgHash = ethers.utils.hashMessage(message);
    const msgHashBytes = ethers.utils.arrayify(msgHash);
    const pubKey = ethers.utils.recoverPublicKey(msgHashBytes, sign);

    const pubKeyHex = pubKey.substring(2);
    const compressedPublicKey = Secp256k1.compressPubkey(new Uint8Array(Buffer.from(pubKeyHex, 'hex')));
    const base64PubKey = Buffer.from(compressedPublicKey).toString('base64');
    setPublicKey(cosmosAddress, base64PubKey);
    setCookies('pub_key', `${cosmosAddress}-${base64PubKey}`, { path: '/' });

    return {
      message,
      signature: sign
    };
  };

  const signTxn = async (context: TxContext, payload: TransactionPayload, simulate: boolean) => {
    if (!account) throw new Error('Account not found.');
    //If we are within  ~1000 chars limit, we can have user sign the typed EIP712
    //Else, we hash the JSON and have user sign the hash

    const normalMessage = payload.jsonToSign.length < 1000;
    let sig = '';
    if (normalMessage) {
      if (!simulate) {
        sig = await signTypedData({
          message: payload.eipToSign.message as any,
          types: payload.eipToSign.types as any,
          domain: payload.eipToSign.domain,
          primaryType: payload.eipToSign.primaryType
        });
      }
    } else {
      if (!simulate) {
        notification.warn({
          message: 'Alternative Method',
          description: `This transaction message is very large, so we must resort to an alternative method of signing (JSON). 
          The transaction may be displayed in a different format than you are used to.`
        });

        const message = payload.jsonToSign;
        sig = await signMessage({
          message: message
        });
      }
    }

    const txBody = createTxBroadcastBody(context, payload, sig);
    return txBody;
  };

  const getPublicKey = async (_cosmosAddress: string) => {
    try {
      const currAccount = account;

      //If we have stored the public key in cookies, use that instead (for Ethereum)
      if (currAccount && cookies.pub_key && cookies.pub_key.split('-')[0] === currAccount.cosmosAddress) {
        return cookies.pub_key.split('-')[1];
      }

      if (currAccount?.publicKey) {
        return currAccount.publicKey;
      }

      const message =
        "Hello! We noticed that you haven't interacted the BitBadges blockchain yet. To interact with the BitBadges blockchain, we need your PUBLIC key for your address to allow us to generate transactions.\n\nPlease kindly sign this message to allow us to compute your public key.\n\nThis message is not a blockchain transaction and signing this message has no purpose other than to compute your public key.\n\nThanks for your understanding!";

      const sig = await signMessage({
        message: message
      });

      const msgHash = ethers.utils.hashMessage(message);
      const msgHashBytes = ethers.utils.arrayify(msgHash);
      const pubKey = ethers.utils.recoverPublicKey(msgHashBytes, sig);

      const pubKeyHex = pubKey.substring(2);
      const compressedPublicKey = Secp256k1.compressPubkey(new Uint8Array(Buffer.from(pubKeyHex, 'hex')));
      const base64PubKey = Buffer.from(compressedPublicKey).toString('base64');
      setPublicKey(_cosmosAddress, base64PubKey);
      setCookies('pub_key', `${_cosmosAddress}-${base64PubKey}`, { path: '/' });

      return base64PubKey;
    } catch (e) {
      console.log(e);
      return '';
    }
  };

  const ethereumContext: EthereumContextType = {
    autoConnect,
    connect,
    disconnect,
    signChallenge,
    signTxn,
    address,
    getPublicKey
  };

  return <EthereumContext.Provider value={ethereumContext}>{children}</EthereumContext.Provider>;
};

export const useEthereumContext = () => useContext(EthereumContext);