@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

TODO

​
WalletConnect

WalletConnect provides developer toolkits empowering you to build engaging web3 experiences. more

TODO

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

@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

TODO

​
WalletConnect

WalletConnect provides developer toolkits empowering you to build engaging web3 experiences. more

TODO

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