Javascript Development Environment Setup

Setting up your JavaScript development environment for Honeycomb Protocol is fairly straightforward and requires only a few steps to get started.

1. Setup your application

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

First, install all the necessary dependencies.

NPM

npm install @solana/wallet-adapter-react @solana/wallet-adapter-base @solana/wallet-adapter-wallets @solana/wallet-adapter-react-ui @solana/web3.js @honeycomb-protocol/edge-client bs58

Yarn

yarn add @solana/wallet-adapter-react @solana/wallet-adapter-base @solana/wallet-adapter-wallets @solana/wallet-adapter-react-ui @solana/web3.js @honeycomb-protocol/edge-client bs58

Then setup your frontend application like this.

import { useMemo } from "react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import {
  PhantomWalletAdapter,
  SolflareWalletAdapter,
} from "@solana/wallet-adapter-wallets";
import {
  WalletModalProvider,
  WalletMultiButton,
} from "@solana/wallet-adapter-react-ui";
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 = "https://rpc.test.honeycombprotocol.com";
  // You can also provide a custom RPC endpoint.
  const endpoint = useMemo(() => network, [network]);

  const wallets = useMemo(
    () => [
      // Manually define specific/custom wallets here
      new PhantomWalletAdapter(),
      new SolflareWalletAdapter(),
    ],
    [network]
  );

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <WalletMultiButton />
          <h1>Hello Solana</h1>
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default App;

Then setup your client like this in your React application (maybe in the utils/constants folder). This code is also relevant if you're setting up a Node.js backend.

import createEdgeClient from "@honeycomb-protocol/edge-client";

const API_URL = "https://edge.test.honeycombprotocol.com/";

export const client = createEdgeClient(API_URL, true);

2. Sign and send the transaction

note

Making any transactions on the Honeynet (our test RPC) would require having Honeynet SOL in your wallet. So make sure to fund your wallet on Honeynet before proceeding with this guide.

You can do so using the following command if you haven't already.

solana airdrop <amount> <wallet address> -u https://rpc.test.honeycombprotocol.com

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.

Frontend

Making a transaction from a client-side application requires signing and then sending the transaction. Here's how you can do 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();

Afterwards, you can use the following utility function to sign and execute the transaction on the blockchain.

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

// Create a transaction
const { 
  createCreateProjectTransaction: { tx: txResponse } 
  } = await client.createCreateProjectTransaction({
      name: "My Project",
      authority: wallet.publicKey.toBase58()!,
});

// Get the transaction signed by the user and send it to the blockchain
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

In case you want to send the transaction from a server-side application, you can use the following code:

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
    )
  )
);

// Create a transaction
const { createCreateProjectTransaction: { tx: txResponse } } = await client.createCreateProjectTransaction({
      name: "My Project",
      authority: authorityPublicKey,
      payer: payerPublicKey,
});

// Send the transaction
const response = await sendTransactions(
  client, // The client instance you created earlier in the setup
  {
    transactions: [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
);