Hyperbloom Vault SDK

1. Installation

1.1 Installation

Install the package:

pnpm install @hyperbloom/vault-sdk

pnpm install viem wagmi

Add provider component:

"use client";
import { VaultsProvider } from "@hyperbloom/vault-sdk";

import { defineChain } from "viem";
import { http, createConfig } from "wagmi";

export const Home = () => {
  const config = createConfig({
    chains: [
      defineChain({
        id: 999,
        name: "HyperEVM",
        network: "hyperevm",
        nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
        rpcUrls: {
          default: { http: ["https://rpc.hyperliquid.xyz/evm"] },
        },
      }),
    ],
    transports: {
      [999]: http("https://rpc.hyperliquid.xyz/evm"),
    },
    ssr: true,
  });

  return (
    <VaultsProvider config={config}>
      <Vault/>
    </VaultsProvider>
  );
};

2. Usage

Example usage of SDK to create a simple deposit and withdraw mechanism

"use client";
import { useVaults } from "@hyperbloom/vault-sdk";
import { useVaultStats, useUserStats, useVaultsStats } from "@hyperbloom/vault-sdk";
import { useVaultsDeposit, useVaultsWithdraw } from "@hyperbloom/vault-sdk";

const Vault = () => {
  const {data: vaults } = useVaults();

  const { data: allVaults} = useVaultsStats();
  const { data: curentVault } = useVaultStats("hyperbloom-hybra-hype-lhype");
  const { data: user } = useUserStats("hyperbloom-hybra-hype-lhype", walletAddress);

  const { depositQuote, getDepositQuote, deposit } = useVaultsDeposit({
    vaultId: "hyperbloom-hybra-hype-lhype",
    tokenAmount0: 2, // 2 Hype
    tokenAmount1: 0.5, // 0.5 LHYPE
  });
  const handleDeposit = async () => {
    const quote = await getDepositQuote();
    console.log(depositQuote);
    // set user approve (depositQuote.data.allowances)
    // (depositQuote.data.allowances.token.address, depositQuote.data.allowances.spenderAddress)

    const tx = await deposit();
  }

  const { withdrawQuote, getWithdrawQuote, withdraw } = useVaultsWithdraw({
    vaultId: "hyperbloom-hybra-hype-lhype",
    tokenAmount: 0.00001, // user.balance (useUserStats)
    userAddress: walletAddress,
  });
  const handleDeposit = async () => {
    const quote = await getWithdrawQuote();
    console.log(withdrawQuote);
    // set user approve 
    // (withdrawQuote.data.allowances.token.address, withdrawQuote.data.allowances.spenderAddress)

    const tx = await withdraw();
  }
};

An advanced example enabling the deposit of a token that is not the default vault token. The SDK's task is to calculate the best exchange rate for the provided token to vault tokens

"use client";
import { useVaultsDeposit } from "@hyperbloom/vault-sdk";

const AdvancedVault = () => {
  const { depositQuote, getDepositQuote, deposit } = useVaultsDeposit({
    vaultId: "hyperbloom-hybra-hype-lhype",
    tokenAmount0: 1, // 1 USDT
    tokenAddress0: '0xB8CE59FC3717ada4C02eaDF9682A9e934F625ebb', // USDT
  });

  const handleDeposit = async () => {
    const quote = await getDepositQuote();
    console.log(depositQuote);
    // set user approve 
    // (depositQuote.data.allowances.token.address, depositQuote.data.allowances.spenderAddress)

    const tx = await deposit();
  }
};

3. Structure

Structure image