How to sign anchor transactions with phantom or other wallets in the browser

If you've tried using the (solana) anchor rpc convenience instructions, to avoid assembling your accounts and everything into a buffer explicitly, and used a browser wallet as a signer:

// Wrong!
await program.rpc.stake(
    myArgs,
    {
        accounts: {
            account1,
            account2,
        },
        signers: [wallet],
    }
)

Then you've probably gotten this error, because the browser wallet doesn't hand out its secret key:

Uncaught (in promise) TypeError: unexpected type, use Uint8Array

Instead, you can use program.transaction to make the transaction, then ask the wallet to sign it:

const tx = program.transaction.myInstruction(
    myArgs,
    {
        accounts: {
            account1,
            account2,
        },
        signers: [],
    }
)
tx.feePayer = wallet.publicKey
tx.recentBlockhash = (await connection.getLatestBlockhash()).blockhash
const signedTx = await wallet.signTransaction(tx)
const txId = await connection.sendRawTransaction(signedTx.serialize())
await connection.confirmTransaction(txId)

Thanks to kfartusov on this issue