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.
- JavaScript
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
- Yarn
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 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
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
- Server
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
);
In case you want to send the transaction from a server-side application, you can use the following code:
import path from "path";
import * as 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
{
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
);