Skip to main content

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