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.

Support on Hyperliquid for programmatic features like gasless and batched transactions powered by Account Abstraction is coming soon!

Getting Started Instructions

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.

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.

1 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:

1 ...
2  if (signerStatus.isConnected && signer) {
3         const address = signer.getAddress();
4         console.log("Connected signer address:", address);
5       }
6  ...

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

1 import { AlchemyWebSigner } from "@account-kit/signer";
2 
3 export const signer = new AlchemyWebSigner({
4   client: {
5     connection: {
6       apiKey: "API_KEY",
7     },
8     iframeConfig: {
9       iframeContainerId: "alchemy-signer-iframe-container",
10     },
11   },
12 });

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.

1 import { signer } from "./signer";
2 
3 const result = await signer.authenticate({
4   type: "email",
5   email: "[email protected]",
6 });
7 ...

Once you finish authenticating, you can access your signer!

2. Create a Custom Chain Config

Extend viem’s custom chains to create a chain definition for Hyperliquid, 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.

1 import { defineChain } from "viem";
2 
3 export const hype = defineChain({
4   id: 999,
5   name: "Hype",
6   nativeCurrency: {
7     decimals: 18,
8     name: "Hype",
9     symbol: "HYPE",
10   },
11   rpcUrls: {
12     default: {
13       http: ["https://hyperliquid-mainnet.g.alchemy.com/v2/{API_KEY}"],
14       webSocket: ["wss://hyperliquid-mainnet.g.alchemy.com/v2/{API_KEY}"],
15     },
16   },
17   blockExplorers: {
18     default: { name: "Explorer", url: "https://hyperevmscan.io/" },
19   },
20 });

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

1 import { defineAlchemyChain } from "@account-kit/infra";
2 
3 const chain = defineAlchemyChain({
4     chain: hype,
5     rpcBaseUrl: `https://hyperliquid-mainnet.g.alchemy.com/v2/API_KEY`,
6 });
7 
8 ...
9 //config.tsx
10 export const config = createConfig(
11   {
12     transport: alchemy({ apiKey: "API_KEY" }),
13     chain: chain,
14     ssr: true, // more about ssr: https://www.alchemy.com/docs/wallets/react/ssr
15     storage: cookieStorage, // more about persisting state with cookies: https://www.alchemy.com/docs/wallets/react/ssr#persisting-the-account-state
16     enablePopupOauth: true, // must be set to "true" if you plan on using popup rather than redirect in the social login flow
17     policyId: "policy_id",
18   },
19   uiConfig
20 );

3. Send Transactions

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.

1 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.

1 import { createWalletClient, http, custom, parseEther } from "viem";
2 
3 export const walletClient = createWalletClient({
4   transport: http("https://hyperliquid-mainnet.g.alchemy.com/v2/{API_KEY}"),
5   chain: Hype,
6   account: signer.toViemAccount(),
7 });
8 
9 const txRequest = await walletClient.prepareTransactionRequest({
10   account: acct,
11   to: "0x0000000000000000000000000000000000000000",
12   value: parseEther("0.0001"),
13 });
14 
15 // Sign transaction
16 
17 const txHash = await walletClient.sendRawTransaction({
18   serializedTransaction: signedTx,
19 });