### Install Project Dependencies (Bash)

Source: https://github.com/honeycomb-protocol/honeycomb-vue-example/blob/master/README.mdx

Installs the necessary project dependencies using either the Yarn or npm package manager. This command is essential before running the project.

```bash
yarn

```

```bash
npm install

```

--------------------------------

### Run Development Server (Bash)

Source: https://github.com/honeycomb-protocol/honeycomb-vue-example/blob/master/README.mdx

Starts the local development server for the Vue.js project. This command allows you to preview your application locally, typically at http://localhost:8080.

```bash
yarn serve

```

```bash
npm run serve

```

--------------------------------

### Configure Solana Wallets in Vue.js

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Sets up Solana wallet adapters (Phantom and Solflare) for a Vue.js 3 application using the 'solana-wallets-vue' library. It configures wallet options, including auto-connection, and provides access to wallet functionalities like public key and transaction signing within components.

```typescript
import { PhantomWalletAdapter, SolflareWalletAdapter } from "@solana/wallet-adapter-wallets";
import SolanaWallets from "solana-wallets-vue";
import { createApp } from "vue";
import App from "./App.vue";

const walletOptions = {
  wallets: [
    new PhantomWalletAdapter(),
    new SolflareWalletAdapter()
  ],
  autoConnect: true,
};

createApp(App)
  .use(SolanaWallets, walletOptions)
  .mount("#app");

// In components, access wallet via useWallet()
import { useWallet } from "solana-wallets-vue";

const wallet = useWallet();
const publicKey = wallet.publicKey?.toString(); // User's wallet address
const signTransaction = wallet.signTransaction; // Transaction signing function
```

--------------------------------

### Environment Configuration for Honeycomb Protocol

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Configuration for Honeycomb Protocol services using environment variables. This setup ensures correct connection to RPC and Edge API endpoints. It uses standard Node.js environment variable access.

```bash
# .env file configuration
RPC_ENDPOINT=https://rpc.test.honeycombprotocol.com
API_URL=https://edge.test.honeycombprotocol.com
HPL_PROJECT_PUBLIC_KEY=Gj6UaodRwTkQGD8pPjxMPm3nNSbQbobjcq1nxZv2aekQ
```

```typescript
// Access in application
export const DAS_RPC = process.env.RPC_ENDPOINT || "https://rpc.test.honeycombprotocol.com";
export const API_URL = process.env.API_URL || "https://edge.test.honeycombprotocol.com";
export const HPL_PROJECT_PUBLIC_KEY = process.env.HPL_PROJECT_PUBLIC_KEY || "default_key";

// Initialize client with environment configuration
export const edgeClient = createEdgeClient(API_URL, true);
```

--------------------------------

### Create New User with Profile (TypeScript)

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Onboards a new user to the Honeycomb Protocol by creating both their user account and an initial profile in a single transaction. This is intended for first-time users. The function requires the user's public key and profile details (name, bio). It returns the transaction result upon successful creation. Dependencies include edgeClient, wallet, and web3.

```typescript
async function createUserWithProfile(publicKey: string, name: string, bio: string) {
  const pfp = "https://www.arweave.net/1MDsAxGaezXbo80mZqEOZrub-nvVDxXccRNo-gNib4U?ext=png";

  const transactionData = await edgeClient.createNewUserWithProfileTransaction({
    wallet: publicKey,
    userInfo: { pfp, bio, name },
    project: HPL_PROJECT_PUBLIC_KEY,
    payer: publicKey,
  });

  // Sign the transaction
  const signedTx = await wallet.signTransaction(
    web3.VersionedTransaction.deserialize(
      base58.decode(transactionData.createNewUserWithProfileTransaction.transaction)
    )
  );

  // Submit to blockchain
  const txnResult = await edgeClient.sendBulkTransactions({
    txs: [base58.encode(signedTx.serialize())],
    blockhash: transactionData.createNewUserWithProfileTransaction.blockhash,
    lastValidBlockHeight: transactionData.createNewUserWithProfileTransaction.lastValidBlockHeight,
    options: { commitment: "confirmed", skipPreflight: true },
  });

  console.log("User and profile created:", txnResult);
  return txnResult;
}

// Usage example
const result = await createUserWithProfile(
  "9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin",
  "Bob Johnson",
  "DeFi trader and yield farmer"
);
```

--------------------------------

### Initialize Honeycomb Protocol Edge Client

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Initializes the Honeycomb Protocol Edge Client for interacting with the Honeycomb API. It requires the API URL and a boolean indicating if RPC is enabled. The client is then used to find users, optionally including project profiles.

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

// Configuration
export const DAS_RPC = process.env.RPC_ENDPOINT || "https://rpc.test.honeycombprotocol.com";
export const API_URL = process.env.API_URL || "https://edge.test.honeycombprotocol.com";
export const HPL_PROJECT_PUBLIC_KEY = "Gj6UaodRwTkQGD8pPjxMPm3nNSbQbobjcq1nxZv2aekQ";

// Initialize the edge client
export const edgeClient = createEdgeClient(API_URL, true);

// Usage in application
const userResponse = await edgeClient.findUsers({
  wallets: ["9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin"],
  includeProjectProfiles: [HPL_PROJECT_PUBLIC_KEY],
});
```

--------------------------------

### Vue Component for Honeycomb Protocol Integration

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

A Vue.js component demonstrating integration with the Honeycomb Protocol. It includes wallet connection using Solana Wallets Vue, reactive profile display, and sign-up functionality. Dependencies include 'solana-wallets-vue'. It takes wallet connection as input and outputs profile data or sign-up form.

```vue
<template>
  <div id="app">
    <WalletMultiButton />

    <div v-if="loading" class="loading">
      <div class="spinner"></div>
    </div>

    <div v-else-if="profile" class="profile-view">
      <h2>Your Profile</h2>
      <img :src="profile.info.pfp" alt="Profile" />
      <p><strong>Name:</strong> {{ profile.info.name }}</p>
      <p><strong>Bio:</strong> {{ profile.info.bio }}</p>
    </div>

    <div v-else-if="publicKey" class="sign-up-form">
      <input v-model="name" placeholder="Enter your name" />
      <textarea v-model="bio" placeholder="Tell us about yourself"></textarea>
      <button @click="handleSignUp">Sign Up</button>
    </div>

    <div v-else>
      <h2>Connect Your Wallet to start</h2>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { WalletMultiButton, useWallet } from "solana-wallets-vue";
import { edgeClient, HPL_PROJECT_PUBLIC_KEY } from "./hpl";
import { generateAuthToken } from "@/utils/helpers";

export default defineComponent({
  name: "App",
  components: { WalletMultiButton },

  data() {
    const wallet = useWallet();
    return {
      name: "",
      bio: "",
      wallet,
      user: null,
      loading: false,
    };
  },

  computed: {
    publicKey() {
      return this.wallet.publicKey?.toString() || null;
    },
    profile() {
      return this.user?.profiles?.[0] || null;
    },
  },

  methods: {
    async handleSignUp() {
      if (!this.name || !this.bio) {
        this.$toast.error("Name and bio are required");
        return;
      }

      try {
        this.loading = true;
        const user = await this.fetchUserByWallet();

        if (user?.address && !user?.profiles?.[0]) {
          const authToken = await generateAuthToken(
            edgeClient,
            this.wallet.publicKey,
            this.wallet.wallet
          );
          await this.createProfile(authToken);
        } else if (!user?.address) {
          await this.createUserWithProfile();
        }

        this.user = await this.fetchUserByWallet();
        this.$toast.success("Profile created successfully!");
      } catch (error) {
        this.$toast.error((error as Error).message);
      } finally {
        this.loading = false;
      }
    },

    async fetchUserByWallet() {
      if (!this.publicKey) return null;
      const response = await edgeClient.findUsers({
        wallets: [this.publicKey],
        includeProjectProfiles: [HPL_PROJECT_PUBLIC_KEY],
      });
      return response?.user[0] || null;
    },
  },

  watch: {
    publicKey: {
      immediate: true,
      async handler(newPublicKey) {
        if (newPublicKey) {
          this.loading = true;
          this.user = await this.fetchUserByWallet();
          this.loading = false;
        } else {
          this.user = null;
        }
      },
    },
  },
});
</script>
```

--------------------------------

### Fetch User by Wallet Address (TypeScript)

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Retrieves user information and their profiles associated with a given wallet address from the Honeycomb Protocol. This function requires a valid public key as input and returns the first matching user object or null if no user is found. Dependencies include the edgeClient.

```typescript
async function fetchUserByWallet(publicKey: string) {
  if (!publicKey) return null;

  const userResponse = await edgeClient.findUsers({
    wallets: [publicKey],
    includeProjectProfiles: [HPL_PROJECT_PUBLIC_KEY],
  });

  return userResponse?.user[0] || null;
}

// Usage example
const user = await fetchUserByWallet("9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin");

// Response structure:
// {
//   address: "9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin",
//   profiles: [{
//     info: {
//       name: "John Doe",
//       bio: "Blockchain enthusiast",
//       pfp: "https://www.arweave.net/1MDsAxGaezXbo80mZqEOZrub-nvVDxXccRNo-gNib4U?ext=png"
//     }
//   }]
// }
```

--------------------------------

### Complete User Sign-Up Flow in TypeScript

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Handles user sign-up by checking for existing users and profiles. It either creates a new user and profile, generates an auth token and creates a profile for an existing user without one, or logs a message if the user and profile already exist. Dependencies include an `edgeClient`, `HPL_PROJECT_PUBLIC_KEY`, and functions like `generateAuthToken`, `createProfile`, and `createUserWithProfile`. It returns updated user data or throws an error on failure.

```typescript
async function handleSignUp(name: string, bio: string, publicKey: string, wallet: any) {
  if (!name) throw new Error("Name is required");
  if (!bio) throw new Error("Bio is required");
  if (!publicKey) throw new Error("Wallet not connected");

  try {
    // Check if user exists
    const user = await edgeClient.findUsers({
      wallets: [publicKey],
      includeProjectProfiles: [HPL_PROJECT_PUBLIC_KEY],
    });

    const existingUser = user?.user[0] || null;
    const isUserCreated = !!existingUser?.address;
    const profile = existingUser?.profiles?.[0] || null;

    if (isUserCreated && !profile) {
      // User exists but no profile - generate auth token and create profile
      const authToken = await generateAuthToken(edgeClient, wallet.publicKey, wallet.wallet);
      await createProfile(authToken, publicKey, name, bio);
    } else if (!isUserCreated) {
      // New user - create user and profile together
      await createUserWithProfile(publicKey, name, bio);
    } else {
      // User and profile already exist
      console.log("User already has a profile");
      return existingUser;
    }

    // Fetch updated user data
    const updatedUser = await edgeClient.findUsers({
      wallets: [publicKey],
      includeProjectProfiles: [HPL_PROJECT_PUBLIC_KEY],
    });

    return updatedUser?.user[0];
  } catch (error) {
    console.error("Sign-up failed:", error);
    throw error;
  }
}

// Usage in Vue component
const handleSignUp = async () => {
  try {
    const user = await handleSignUp(
      this.name,
      this.bio,
      this.publicKey,
      this.wallet
    );
    this.$toast.success("Profile created successfully!");
  } catch (error) {
    this.$toast.error((error as Error).message);
  }
};
```

--------------------------------

### Generate Honeycomb Authentication Token

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Generates an authentication token for a user by requesting a signature from their Solana wallet. It supports both message signing for software wallets and transaction signing for hardware wallets like Ledger. The function requires the EdgeClient instance, user's public key, wallet object, and an optional flag for Ledger usage.

```typescript
import { EdgeClient } from "@honeycomb-protocol/edge-client/client/types";
import * as web3 from "@solana/web3.js";
import base58 from "bs58";

export async function generateAuthToken(
  edgeClient: EdgeClient<true>,
  publicKey: web3.PublicKey,
  wallet: any,
  usingLedger?: boolean
) {
  try {
    // Request authentication challenge
    const res = await edgeClient.authRequest({
      wallet: publicKey.toString(),
      useTx: usingLedger,
      useRpc: usingLedger ? process.env.NEXT_PUBLIC_HELIUS_RPC_URL : undefined,
    });

    let signature: string;

    // Sign with transaction (for Ledger)
    if (res.authRequest.tx) {
      const sig = await wallet.adapter.signTransaction(
        web3.Transaction.from(base58.decode(res.authRequest.tx))
      );
      signature = base58.encode(
        sig.signatures.find((s: web3.SignaturePubkeyPair) =>
          s.publicKey.equals(publicKey)
        )?.signature
      );
    } else {
      // Sign with message (for software wallets)
      const message = new TextEncoder().encode(res.authRequest.message);
      const sig = await wallet.adapter.signMessage(message);
      signature = base58.encode(sig);
    }

    // Confirm authentication and receive token
    const { authConfirm: { accessToken: token } } = await edgeClient.authConfirm({
      signature: signature,
      wallet: publicKey.toString(),
    });

    return token;
  } catch (e) {
    console.error("Failed to generate auth token: ", e);
    throw new Error(e instanceof Error ? e.message : String(e));
  }
}

// Usage example
const authToken = await generateAuthToken(
  edgeClient,
  wallet.publicKey,
  wallet.wallet
);
// Returns: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
```

--------------------------------

### Create Profile for Existing User (TypeScript)

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Creates a new profile for a user who already exists in the Honeycomb Protocol but lacks a profile within the specified project. This function requires an authentication token, the user's public key, and profile details (name, bio). It returns the transaction result upon successful creation. Dependencies include edgeClient, wallet, and web3.

```typescript
async function createProfile(authToken: string, publicKey: string, name: string, bio: string) {
  const pfp = "https://www.arweave.net/1MDsAxGaezXbo80mZqEOZrub-nvVDxXccRNo-gNib4U?ext=png";

  const transactionData = await edgeClient.createNewProfileTransaction(
    {
      project: HPL_PROJECT_PUBLIC_KEY,
      payer: publicKey,
      identity: publicKey,
      info: { bio, name, pfp },
    },
    {
      fetchOptions: {
        headers: { authorization: `Bearer ${authToken}` },
      },
    }
  );

  // Sign and submit the transaction
  const signedTx = await wallet.signTransaction(
    web3.VersionedTransaction.deserialize(
      base58.decode(transactionData.createNewProfileTransaction.transaction)
    )
  );

  const txnResult = await edgeClient.sendBulkTransactions({
    txs: [base58.encode(signedTx.serialize())],
    blockhash: transactionData.createNewProfileTransaction.blockhash,
    lastValidBlockHeight: transactionData.createNewProfileTransaction.lastValidBlockHeight,
    options: { commitment: "confirmed", skipPreflight: true },
  });

  console.log("Profile created:", txnResult);
  return txnResult;
}

// Usage example
const result = await createProfile(
  authToken,
  "9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin",
  "Alice Smith",
  "Web3 developer and NFT collector"
);
```

--------------------------------

### Submit Signed Transactions to Solana in TypeScript

Source: https://context7.com/honeycomb-protocol/honeycomb-vue-example/llms.txt

Submits signed transactions to the Solana blockchain using the Honeycomb Edge Client. It deserializes and signs the transaction using the provided wallet, then sends the serialized transaction along with blockhash and last valid block height to the `edgeClient.sendBulkTransactions` method. Dependencies include `Transaction`, `web3`, `base58`, and `edgeClient`. It returns the transaction result or throws an error on failure.

```typescript
async function submitTransaction(transaction: Transaction, wallet: any) {
  // Deserialize and sign transaction
  const signedTx = await wallet.signTransaction(
    web3.VersionedTransaction.deserialize(
      base58.decode(transaction.transaction)
    )
  );

  if (!signedTx) throw new Error("Transaction signing failed");

  try {
    // Submit to blockchain
    const txnResult = await edgeClient.sendBulkTransactions({
      txs: [base58.encode(signedTx.serialize())],
      blockhash: transaction.blockhash,
      lastValidBlockHeight: transaction.lastValidBlockHeight,
      options: { commitment: "confirmed", skipPreflight: true },
    });

    console.log("Transaction result:", txnResult);
    return txnResult;
  } catch (error) {
    console.error("Transaction error:", error);
    throw new Error("Failed to send transaction");
  }
}

// Usage example
const txData = await edgeClient.createNewProfileTransaction({
  project: HPL_PROJECT_PUBLIC_KEY,
  payer: publicKey,
  identity: publicKey,
  info: { bio: "Hello world", name: "Test User", pfp: "https://example.com/pfp.png" },
});

const result = await submitTransaction(
  txData.createNewProfileTransaction,
  wallet
);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.