Sending Serialized Transactions

note

This guide is for sending serialized transactions that are signed by the user's wallet (usually on the client side). Shadow signer functionality is coming soon.

Intro

In most cases when you interact with the Edge Client to perform actions like creating a user, mining resources, or sending characters on missions, you will receive a JSON object containing the last valid block height, the block hash, and the serialized transaction.

The serialized transaction is sent in response so developers can get it signed by the proper authority before sending it to the blockchain. Here's a step by step guide.

1. Setup your application

In order to use Solana wallets, you'll setup your frontend like this.

Install the necessary dependencies.

npm install @solana/wallet-adapter-react @solana/wallet-adapter-base @solana/wallet-adapter-react-ui @solana/web3.js

You'll setup your application like this. (This is a basic example, you can customize it as needed.)

import { useMemo } from "react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import {
  WalletModalProvider,
  WalletMultiButton,
} from "@solana/wallet-adapter-react-ui";
import { clusterApiUrl } from "@solana/web3.js";
import "./App.css";
 
// Default styles that can be overridden by your app
import "@solana/wallet-adapter-react-ui/styles.css";
 
function App() {
  // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
  const network = WalletAdapterNetwork.Devnet;
  // You can also provide a custom RPC endpoint.
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
 
  const wallets = useMemo(
    () => [
      // if desired, manually define specific/custom wallets here (normally not required)
      // otherwise, the wallet-adapter will auto detect the wallets a user's browser has available
    ],
    [network],
  );
 
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <WalletMultiButton />
          <h1>Hello Solana</h1>
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}
 
export default App;

2. Sign and send the transaction

Once you have the serialized transaction, you can sign it using the Solana wallet before sending it.

The useWallet hook from @solana/wallet-adapter-react can be used to get the user's wallet (if the wallet is connected).

import { useWallet } from "@solana/wallet-adapter-react";

const wallet = useWallet();

Once you have the user's wallet, you can sign and send the transaction using our helper function.

Here's an example snippet of how to do that.

Front-end

import { sendClientTransactions } from "@honeycomb-protocol/edge-client/client/walletHelpers";
import { client } from "@/constants";

const response = await sendClientTransactions(
    client, // The client instance you created earlier in the setup
    wallet, // The wallet you got from the useWallet hook
    txResponse // You can pass the transaction response containing either a single transaction or an array of transactions
);

Server-side

import path from "path";
import fs from "fs";
import * as web3 from "@solana/web3.js";
import { sendTransactions } from "@honeycomb-protocol/edge-client/client/helpers";
import { client } from "@/constants";

const signer = web3.Keypair.fromSecretKey( // Create a keypair from the secret key to sign the transaction (only a keypair can sign a transaction, not just the private or public key)
  Uint8Array.from(
    JSON.parse(
      fs.readFileSync(path.resolve(__dirname, "./keys", "myKey.json"), "utf8") // Replace this with the path to your key file
    )
  )
);

const response = await sendTransactions(
  client, // The client instance you created earlier in the setup
  {
    txs: [txResponse.transaction], // If the transaction response contains only one transaction; in case of multiple transactions pass txResponse.transactions without the array brackets
    blockhash: txResponse.blockhash,
    lastValidBlockHeight: txResponse.lastValidBlockHeight,
  },
  [signer] // An array of signers
);

GraphQL

query SendBulkTransactions($txs: [Bytes!]!, $blockhash: String!, $lastValidBlockHeight: Int!, $options: SendBulkTransactionsOptions) {
  sendBulkTransactions(txs: $txs, blockhash: $blockhash, lastValidBlockHeight: $lastValidBlockHeight, options: $options) {
    error
    signature
    status
  }
}

Set the variables like this:

{
  "txs": [
    "<serialized transaction 1>", 
    "<serialized transaction 2>"
  ],
  "blockhash": "<blockhash>",
  "lastValidBlockHeight": <last valid block height>,
  "options": {
    "commitment": "processed",
    "skipPreflight": false
  }
}