Skip to main content

Development Environment Setup

Setting up your development environment for Honeycomb Protocol depends on the platform you're developing for.

Please select the platform you're developing for below and follow the instructions.

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

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​

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 how you'd get the transaction signed on the frontend.

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.

utils/transactions.ts
import { sendClientTransactions } from "@honeycomb-protocol/edge-client/client/helpers";
import { client } from "@/constants";

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

// Send the transaction
const response = await sendClientTransactions(client, wallet, tx);