Skip to main content
@orderly.network/hooks provides the following hooks for handling account-related logic:

​
How to integrate wallet?

Since @orderly.network/hooks only focus on processing the Orderly business logic, the hooks don’t include the function of connecting to the wallet, but they can be easily integrated with third-party wallet connection libraries. Here are two examples:

​
web3-onboard

Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. more
Use your Web3-Onboard state as the source of truth for connection status, selected chain, and active wallet, then expose those values through WalletConnectorContextState. The custom provider pattern in Wallet connect shows where to implement connect, disconnect, setChain, switchChain, and the wallet object consumed by Orderly hooks.

​
WalletConnect

WalletConnect provides developer toolkits empowering you to build engaging web3 experiences. more
When integrating WalletConnect directly, map the active session, connected accounts, and current chain into WalletConnectorContextState, then pass that provider above OrderlyAppProvider. If you want a ready-made example of the provider shape Orderly expects, refer to Wallet connect and the base app setup in Getting started.

​
Get and edit account leverage

Here is a small example of how to get current account leverage and how to edit max allowed leverage. 
import { useLeverage, useMarginRatio } from "@orderly.network/hooks";
import { Button, Dialog } from "@radix-ui/themes";
import { FC, PropsWithChildren, useRef, useState } from "react";

import { LeverageEditor } from "./LeverageEditor";

export const LeverageDialog: FC<PropsWithChildren> = (props) => {
  const [open, setOpen] = useState(false);
  const { currentLeverage } = useMarginRatio();

  const [maxLeverage, { update, config: leverageLevers, isMutating }] = useLeverage();
  const nextLeverage = useRef(maxLeverage ?? 0);

  const onSave = (value: { leverage: number }) => {
    return Promise.resolve().then(() => {
      nextLeverage.current = value.leverage;
    });
  };

  const onSubmit = () => {
    if (nextLeverage.current === maxLeverage) return;
    update({ leverage: nextLeverage.current }).then(
      () => {
        setOpen(false);
        // display success
      },
      (err) => {
        console.dir(err);
        // display error
      }
    );
  };

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger>{props.children}</Dialog.Trigger>
      <Dialog.Title>Account Leverage</Dialog.Title>
      <Dialog.Content>
        <div className="flex flex-col">
          <div className="flex gap-1">
            <span className="flex-1">Current:</span>
            <span>{currentLeverage}</span>
          </div>
          <div className="flex flex-col gap-1">
            <span className="flex-1">Max account leverage</span>
            <div className="my-5 h-[80px]">
              <LeverageEditor
                maxLeverage={maxLeverage}
                leverageLevers={leverageLevers}
                onSave={onSave}
              />
            </div>
          </div>
        </div>
        <Button
          onClick={() => {
            setOpen(false);
          }}
        >
          Cancel
        </Button>
        <Button onClick={() => onSubmit()} loading={isMutating}>
          Save
        </Button>
      </Dialog.Content>
    </Dialog.Root>
  );
};