Skip to content

Getting Started

Overview

HyperGate is a wagmi-like library to interact with XRP Ledger. It's mainly aimed to be used within React applications, but it can be used in any JavaScript environment.

A significant amount of code is borrowed from Wagmi themselves, so a big shoutout to them for their work.

Installation

npm
npm i hypergate

Usage

To use HyperGate, you need to wrap your application with the HyperGateConfig and QueryClientProvider components. The HyperGateConfig component is used to configure the HyperGate library, and the QueryClientProvider component is used to provide the React Query client.

 
"use client";
 
import { XummConnector, createConfig } from "@hypergate/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider, getDefaultConfig } from "@hypergate/connectkit";
import { HyperGateProvider } from "@hypergate/react";
 
const queryClient = new QueryClient();
const config = createConfig(
  getDefaultConfig({
    appName: "HyperGate Demo",
    connectors: [new XummConnector(process.env.NEXT_PUBLIC_XUMM_API_KEY ?? "")],
  }),
);
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HyperGateProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </HyperGateProvider>
  );
}