Alchemy Logo

Hyperliquid Transactions Quickstart

By the end of this tutorial, you’ll have an application integrated with Alchemy Wallets, enabling email and social login for user authentication, and the ability to sign and send transactions seamlessly.

Extend viem’s custom chains to create a chain definition for HyperEVM, as it's not a defined chain on viem yet. This is the chain config you’ll be passing into your viem client in step #3.

import { defineChain } from "viem";
 
export const hype = defineChain({
  id: 999,
  name: "Hype",
  nativeCurrency: {
    decimals: 18,
    name: "Hype",
    symbol: "HYPE",
  },
  rpcUrls: {
    default: {
      http: ["https://hyperliquid-mainnet.g.alchemy.com/v2/{API_KEY}"],
      webSocket: ["wss://hyperliquid-mainnet.g.alchemy.com/v2/{API_KEY}"],
    },
  },
  blockExplorers: {
    default: { name: "Explorer", url: "https://hyperevmscan.io/" },
  },
});

Wrap it in defineAlchemyChain to create an alchemy chain to pass into your config.tsx

import { defineAlchemyChain } from "@account-kit/infra";
 
const chain = defineAlchemyChain({
    chain: hype,
    rpcBaseUrl: `https://hyperliquid-mainnet.g.alchemy.com/v2/API_KEY`,
});
 
...
//config.tsx
export const config = createConfig(
  {
    transport: alchemy({ apiKey: "API_KEY" }),
    chain: chain,
    ssr: true, // more about ssr: https://www.alchemy.com/docs/wallets/troubleshooting/ssr
    storage: cookieStorage, // more about persisting state with cookies: https://www.alchemy.com/docs/wallets/troubleshooting/ssr#persisting-the-account-state
    enablePopupOauth: true, // must be set to "true" if you plan on using popup rather than redirect in the social login flow
    policyId: "policy_id",
  },
  uiConfig
);

Working with React?

Follow this Quickstart guide to set up a new project.

The most important step is getting your API Key (NEXT_PUBLIC_ALCHEMY_API_KEY) and ensuring your project is configured correctly on your dashboard. Make sure you have Hyperliquid enabled as a network on your app.

Hyperliquid account config Hyperliquid dashboard support

Next, navigate to your page.tsx, and get the embedded EOA address using useSigner(). This new embedded EOA, also known as a signer, will be where users assets live and will sign transactions.

const signer = useSigner();

Note: in order access your embedded EOA created by Alchemy Signer, you need to have finished authentication. To check your authentication status, you can check useSignerStatus(). For example:

...
 if (signerStatus.isConnected && signer) {
        const address = signer.getAddress();
        console.log("Connected signer address:", address);
      }
 ...

Not Working With React?

That’s okay! We have lower level methods we can leverage here to access your signer!

You can follow this Quickstart, to use our '@account-kit/signer' package directly to create and use our wallets.

Create a Signer Instance

import { AlchemyWebSigner } from "@account-kit/signer";
 
export const signer = new AlchemyWebSigner({
  client: {
    connection: {
      apiKey: "API_KEY",
    },
    iframeConfig: {
      iframeContainerId: "alchemy-signer-iframe-container",
    },
  },
});

Authenticate a User

Next, you’ll need to authenticate your user before you can use the signer. In this example, we use email auth, but we support a number of other auth methods. Check out our guides to complete authentication.

import { signer } from "./signer";
 
const result = await signer.authenticate({
  type: "email",
  email: "[email protected]",
});
...

Once you finish authenticating, you can access your signer!

Got your signer/embedded EOA address? Now you are ready to send transactions! Alchemy signer supports signing messages as raw hashes. You can use methods including signMessage, signTypedData, and signTransaction.

const signedTx = await signer.signTransaction(txRequest);

Then you can use a generic wallet client to send transactions! For example, if you are using viem, then you can use the toViemAccount method which will allow you to use the signer with a WalletClient.

import { createWalletClient, http, custom, parseEther } from "viem";
 
export const walletClient = createWalletClient({
  transport: http("https://hyperliquid-mainnet.g.alchemy.com/v2/{API_KEY}"),
  chain: Hype,
  account: signer.toViemAccount(),
});
 
const txRequest = await walletClient.prepareTransactionRequest({
  account: acct,
  to: "0x0000000000000000000000000000000000000000",
  value: parseEther("0.0001"),
});
 
// Sign transaction
 
const txHash = await walletClient.sendRawTransaction({
  serializedTransaction: signedTx,
});

Alchemy gas sponsorship lets your users send transactions on HyperEVM without holding the native token for gas. To start, make sure you have a gas policy ID configured in your app dashboard and pass it to your client initialization. Learn more in Sponsor Gas.

As an example, we will be sponsoring a HyperEVM user operation opening a limit order, using the HyperCore Writer contract. Start by creating some helpers to encode the call.

// hyperliquidOrder.ts
import {
  encodeAbiParameters,
  encodeFunctionData,
  hexToBytes,
  toHex,
} from "viem";
 
export const CORE_WRITER_ADDRESS =
  "0x3333333333333333333333333333333333333333" as const;
 
export const HYPERLIQUID_CALLDATA = (() => {
  const asset = 0; // BTC
  const isBuy = true;
  const limitPx = 100000000000n; // $100,000
  const sz = 100000n; // 0.001 BTC
  const reduceOnly = false;
  const encodedTif = 2; // GTC
  const cloid = 0n;
 
  const payloadHex = encodeAbiParameters(
    [
      { type: "uint32" },
      { type: "bool" },
      { type: "uint64" },
      { type: "uint64" },
      { type: "bool" },
      { type: "uint8" },
      { type: "uint128" },
    ],
    [asset, isBuy, limitPx, sz, reduceOnly, encodedTif, cloid],
  );
 
  // encoding version (1 byte) + action ID (3 bytes)
  const prefix = new Uint8Array([0x01, 0x00, 0x00, 0x01]);
 
  const payload = hexToBytes(payloadHex);
  const actionBytes = new Uint8Array(prefix.length + payload.length);
  actionBytes.set(prefix, 0);
  actionBytes.set(payload, prefix.length);
 
  const coreWriterAbi = [
    {
      type: "function",
      name: "sendRawAction",
      stateMutability: "nonpayable",
      inputs: [{ name: "data", type: "bytes", internalType: "bytes" }],
      outputs: [],
    },
  ] as const;
 
  return encodeFunctionData({
    abi: coreWriterAbi,
    functionName: "sendRawAction",
    args: [toHex(actionBytes)],
  });
})();

If you are working in React, you can use the useSendUserOperation hook. Make sure you have set up your config from step 1.

import React from "react";
import {
  useSendUserOperation,
  useSmartAccountClient,
} from "@account-kit/react";
import { CORE_WRITER_ADDRESS, HYPERLIQUID_CALLDATA } from "./hyperliquidOrder";
 
function ComponentWithSendUserOperation() {
  const { client } = useSmartAccountClient({});
 
  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
    client,
    waitForTxn: true,
    onSuccess: ({ hash, request }) => {
      // [optional] handle success
    },
    onError: (error) => {
      // [optional] handle error
    },
  });
 
  return (
    <div>
      <button
        onClick={() =>
          sendUserOperation({
            uo: {
              target: CORE_WRITER_ADDRESS,
              data: HYPERLIQUID_CALLDATA,
              value: 0n,
            },
          })
        }
        disabled={isSendingUserOperation}
      >
        {isSendingUserOperation ? "Sending..." : "Send UO"}
      </button>
    </div>
  );
}
 
export default ComponentWithSendUserOperation;

If you are not using React, you can send the same user operation directly with the Modular Account V2 client in account-kit, passing in the chain config from step 1 and signer from step 2.

import { createModularAccountV2Client } from "@account-kit/smart-contracts";
import { CORE_WRITER_ADDRESS, HYPERLIQUID_CALLDATA } from "./hyperliquidOrder";
 
const modularAccountV2Client = await createModularAccountV2Client({
  chain, // chain config from step 1
  signer, // signer from step 2
  transport,
  policyId: "policy_id",
});
 
await modularAccountV2Client.sendUserOperation({
  uo: {
    target: CORE_WRITER_ADDRESS,
    data: HYPERLIQUID_CALLDATA,
    value: 0n,
  },
});

Was this page helpful?