Hyperliquid Transactions Quickstart

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
});

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
);

1
const signer = useSigner();

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

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
});

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

1
const signedTx = await signer.signTransaction(txRequest);

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
});

1
import React from "react";
2
import {
3
  useSendUserOperation,
4
  useSmartAccountClient,
5
} from "@account-kit/react";
6
import { CORE_WRITER_ADDRESS, HYPERLIQUID_CALLDATA } from "./hyperliquidOrder";
7
8
function ComponentWithSendUserOperation() {
9
  const { client } = useSmartAccountClient({});
10
11
  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
12
    client,
13
    waitForTxn: true,
14
    onSuccess: ({ hash, request }) => {
15
      // [optional] handle success
16
    },
17
    onError: (error) => {
18
      // [optional] handle error
19
    },
20
  });
21
22
  return (
23
    <div>
24
      <button
25
        onClick={() =>
26
          sendUserOperation({
27
            uo: {
28
              target: CORE_WRITER_ADDRESS,
29
              data: HYPERLIQUID_CALLDATA,
30
              value: 0n,
31
            },
32
          })
33
        }
34
        disabled={isSendingUserOperation}
35
      >
36
        {isSendingUserOperation ? "Sending..." : "Send UO"}
37
      </button>
38
    </div>
39
  );
40
}
41
42
export default ComponentWithSendUserOperation;