# HyperGate

import { ConnectWallet } from "../../components/connect-wallet";
import { GetBalance } from "../../components/balance";
import { WatchLedger } from "../../components/block";

## Demo

#### Connect Wallet

:::code-group
<div data-title="Preview">
  <ConnectWallet />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler

const Button = React.forwardRef<HTMLButtonElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <button ref={ref} className={className} {...props} />;
  },
);
Button.displayName = "Button";
const Separator = React.forwardRef<HTMLDivElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <div ref={ref} className={className} {...props} />;
  },
);
Separator.displayName = "Separator";

// ---cut---
import { useAccount, useConnect, useConnectors } from "@hyper-gate/react";
import { ConnectKitButton } from "@hyper-gate/connectkit";

// [!include ~/components/connect-wallet.tsx:connect-wallet]
```
:::

#### Balance

:::code-group
<div data-title="Preview">
  <GetBalance />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler

const Input = React.forwardRef<HTMLInputElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <input ref={ref} className={className} {...props} />;
  },
);
Input.displayName = "Input";
// ---cut---
import { useAccount, useAccountEffect, useBalance } from "@hyper-gate/react";
import { Address, formatHumanUnits } from "@hyper-gate/core";
import { useState } from "react";

// [!include ~/components/balance.tsx:balance]
```
:::

#### Block

:::code-group
<div data-title="Preview">
  <WatchLedger />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
// [!include ~/components/block.tsx]
```
:::


import { ConnectWallet } from "../../components/connect-wallet";
import { Providers } from "../../components/providers";

## Getting Started

### Overview

HyperGate is a [wagmi](https://wagmi.sh)-like library to interact with [XRP Ledger](https://xrpl.org). 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](https://wagmi.sh) themselves, so a big shoutout to them for their work.

### Installation

:::code-group
```bash [npm]
npm i hypergate
```

```bash [pnpm]
pnpm i hypergate
```

```bash [bun]
bun 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.

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
"use client";

import { XummConnector, createConfig } from "@hyper-gate/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider, getDefaultConfig } from "@hyper-gate/connectkit";
import { HyperGateProvider } from "@hyper-gate/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>
  );
}
```


## formatUnits

Divides a number by a given exponent of base 10 (10<sup>exponent</sup>), and formats it into a string representation of the number.

### Import

```ts
import { formatUnits } from "@hyper-gate/core";
```

### Usage

```ts
import { formatUnits } from "@hyper-gate/core";

formatUnits(420000000000n, 9); // [!code focus:2]
// '420'
```

### Returns

`string`

### Parameters

#### value

* **Type:** `bigint`

The number to divide.

#### exponent

* **Type:** `number`

The exponent.

## formatHumanUnits

Formats a number into a human-readable string representation.

### Import

```ts
import { formatHumanUnits } from "@hyper-gate/core";
```

### Usage

```ts
import { formatHumanUnits } from "@hyper-gate/core";

formatHumanUnits(420100000000n, 9, 2); // [!code focus:2]
// '420.1'
```

### Returns

`string`

### Parameters

#### n

* **Type:** `bigint`

The number to format.

#### baseDecimals

* **Type:** `number` - optional

The exponent

#### decimals

* **Type:** `number` - optional

The number of decimal places to round to.


## useAccount

Hook to get the current account / address.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useAccount } from "@hyper-gate/react";

export function App() {
  const account = useAccount();
  //        ^?
}
```


import { AccountEffectDemo } from "../../../components/account-effect";

## useAccountEffect

Hook to perform side effects when the account changes.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useAccountEffect } from "@hyper-gate/react";

export function App() {
  useAccountEffect({
    onConnect: (data) => {
      console.log("connected", data);
    },
    onDisconnect: () => {
      console.log("disconnected");
    },
  });
}
```

### Example

:::code-group
<div data-title="Preview">
  <AccountEffectDemo />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler

// ---cut---
import { useAccountEffect } from "@hyper-gate/react";
import { ConnectKitButton } from "@hyper-gate/connectkit";
import { useState } from "react";

// [!include ~/components/account-effect.tsx:account-effect]
```
:::


## useAccount

Hook to get the current balance of the account. It supports XRP balance and token balances.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useBalance } from "@hyper-gate/react";

export function App() {
  const balance = useBalance();
  //        ^?
}
```


<script setup>
  const packageName = '@hyper-gate/core'; const actionName = 'getBlock'; const
  typeName = 'GetBlock'; const TData = 'GetBlockData'; const TError =
  'GetBlockErrorType';
</script>

import { WatchLedger } from "../../../components/block";

## useBlock

Hook for fetching information about a block at a block number, hash or tag.

### Import

```ts
import { useBlock } from "@hyper-gate/react";
```

### Usage

:::code-group
<div data-title="Preview">
  <WatchLedger />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
// [!include ~/components/block.tsx]
```
:::

### Parameters

```ts twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { type UseBlockParameters } from "@hyper-gate/react";
```

#### blockHash

`` `string` ``

Information at a given block hash.

```tsx twoslash [index.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useBlock } from "@hyper-gate/react";

function App() {
  const result = useBlock({
    blockHash:
      "49453CB36AB0F993A3AD6C6A765E7D5F44B5017577850EB66EA644482D0AB8B6", // [!code focus]
  });
}
```

#### blockNumber

`number | "current" | "closed" | "validated"`

Information at a given block number.

```tsx twoslash [index.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useBlock } from "@hyper-gate/react";

function App() {
  const result = useBlock({
    blockNumber: 42069, // [!code focus]
  });
}
```

#### includeTransactions

`boolean`

Whether or not to include transactions as objects.

```tsx twoslash [index.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useBlock } from "@hyper-gate/react";

function App() {
  const result = useBlock({
    includeTransactions: true, // [!code focus]
  });
}
```

### Return Type

```ts twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { type UseBlockReturnType } from "@hyper-gate/react";
```


import { WatchBlockNumber } from "../../../components/block-number";

## useBlockNumber

Hook to get the current block number.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useBlockNumber } from "@hyper-gate/react";

export function App() {
  const blockNumber = useBlockNumber();
  //        ^?
}
```

### Example

:::code-group
<div data-title="Preview">
  <WatchBlockNumber />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
// [!include ~/components/block-number.tsx]
```
:::


import { WatchChain } from "../../../components/chainId";

## useChainId

Hook to get the current chain ID.

### Usage

:::code-group
<div data-title="Preview">
  <WatchChain />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useChainId } from "@hyper-gate/react";

export function App() {
  const chain = useChainId();
  //        ^?
}
```
:::


import { AvailableChains } from "../../../components/chains";

## useChains

Hook to get the list of available chains.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useChains } from "@hyper-gate/react";

export function App() {
  const chains = useChains();
  //        ^?
}
```

### Example

:::code-group
<div data-title="Preview">
  <AvailableChains />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
// [!include ~/components/chains.tsx]
```
:::


## useConfig

Hook to get the current configuration, as defined in your provider.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useConfig } from "@hyper-gate/react";

export function App() {
  const config = useConfig();
  //       ^?
}
```


import { ConnectWallet } from "../../../components/connect-wallet";

## useConnect

Hook to connect HyperGate to a connector (wallet).

### Usage

:::code-group
<div data-title="Preview">
  <ConnectWallet />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler

const Button = React.forwardRef<HTMLButtonElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <button ref={ref} className={className} {...props} />;
  },
);
Button.displayName = "Button";
const Separator = React.forwardRef<HTMLDivElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <div ref={ref} className={className} {...props} />;
  },
);
Separator.displayName = "Separator";

// ---cut---
import { useAccount, useConnect, useConnectors } from "@hyper-gate/react";
import { ConnectKitButton } from "@hyper-gate/connectkit";

// [!include ~/components/connect-wallet.tsx:connect-wallet]
```
:::


import { AccountConnections } from "../../../components/connections";

## useConnections

Hook to get the list of active connections.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useConnections } from "@hyper-gate/react";

export function App() {
  const connections = useConnections();
  //        ^?
}
```

### Example

:::code-group
<div data-title="Preview">
  <AccountConnections />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler

const Button = React.forwardRef<HTMLButtonElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <button ref={ref} className={className} {...props} />;
  },
);

// ---cut---
import { useConnections, useConnect, useDisconnect } from "@hyper-gate/react";
import { ConnectKitButton } from "@hyper-gate/connectkit";

// [!include ~/components/connections.tsx:account-connection]
```
:::


## useConnectorClient

Hook to get the current connector client.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useConnectorClient } from "@hyper-gate/react";

export function App() {
  const connectorClient = useConnectorClient();
  //        ^?
}
```


import { ConnectWallet } from "../../../components/connect-wallet";

## useConnectors

Hook to get the available connectors.

### Usage

:::code-group
<div data-title="Preview">
  <ConnectWallet />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler

const Button = React.forwardRef<HTMLButtonElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <button ref={ref} className={className} {...props} />;
  },
);
Button.displayName = "Button";
const Separator = React.forwardRef<HTMLDivElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <div ref={ref} className={className} {...props} />;
  },
);
Separator.displayName = "Separator";

// ---cut---
import { useAccount, useConnect, useConnectors } from "@hyper-gate/react";
import { ConnectKitButton } from "@hyper-gate/connectkit";

// [!include ~/components/connect-wallet.tsx:connect-wallet]
```
:::


## useDisconnect

Hook to disconnect the current user.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useDisconnect } from "@hyper-gate/react";

export function App() {
  const { disconnect } = useDisconnect();
  //        ^?
}
```


## useEstimateGas

Hook to estimate gas for a transaction.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useEstimateGas } from "@hyper-gate/react";

export function App() {
  const estimateGas = useEstimateGas();
  //        ^?
}
```


import { SignMessageDemo } from "../../../components/sign-message";

## useSendTransaction

Hook to sign transaction messages. This hook provides a way to sign XRP Ledger transactions using connected wallets.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useSendTransaction } from "@hyper-gate/react";

export function App() {
  const { signMessage, signMessageAsync, isPending } = useSendTransaction();

  const handleSign = () => {
    signMessage({
      TransactionType: "Payment",
      Destination: "rfHn6cB5mmqZ6fdemCDSxqLTijgMwo",
      Amount: String(1000000), // 1 XRP in drops
      Account: "rYourAccountAddress...",
    });
  };
}
```

### Example

:::code-group
<div data-title="Preview">
  <SignMessageDemo />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler

const Button = React.forwardRef<HTMLButtonElement, any>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <button ref={ref} className={className} {...props} />;
  },
);

// ---cut---
import { useSendTransaction, useAccount } from "@hyper-gate/react";
import { ConnectKitButton } from "@hyper-gate/connectkit";
import { useState } from "react";

// [!include ~/components/sign-message.tsx:sign-message]
```
:::


## useSwitchChain

Hook to switch the current blockchain network.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useSwitchChain } from "@hyper-gate/react";

export function App() {
  const { switchChain } = useSwitchChain();
  //        ^?
}
```


import { FetchTransaction } from "../../../components/transaction";

## useTransaction

Hook to send a transaction.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useTransaction } from "@hyper-gate/react";

export function App() {
  const transaction = useTransaction({});
  //        ^?
}
```

### Example

:::code-group
<div data-title="Preview">
  <FetchTransaction />
</div>

```tsx twoslash [example.tsx]
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
// [!include ~/components/transaction.tsx]
```
:::


## useWatchBlockNumber

Hook to watch for changes in the block number.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useWatchBlockNumber } from "@hyper-gate/react";

export function App() {
  useWatchBlockNumber({
    onBlockNumber: (blockNumber) => {
      console.log("new block number", blockNumber);
    },
  });
}
```


## useWatchBlocks

Hook to watch for new blocks.

### Usage

```tsx twoslash
// @allowUmdGlobalAccess
// @module: esnext
// @moduleResolution: bundler
import { useWatchBlocks } from "@hyper-gate/react";

export function App() {
  useWatchBlocks({
    onBlock: (block) => {
      console.log("new block", block);
    },
  });
}
```


## Blog