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.

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/helpers";
import { client } from "@/constants";

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

// Send the transaction
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
);