Docs
Hooks
Account

Account

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

  • useAccount: Retrieves the current account info and status. You can also use this hook to get the 'Account' singleton.
  • useCollateral: Retrieves the current balance of the account.
  • useLeverage: Retrieves the current account leverage.

Account status

The Account object has the following statuses:

export enum AccountStatusEnum {
  NotConnected = 0,
  Connected = 1,
  NotSignedIn = 2,
  SignedIn = 3,
  DisabledTrading = 4,
  EnableTrading = 5,
}

The above statuses are represented as follows:

  • NotConnected/ Connected - Wallet connection status, not related to Orderly. NotConnected means no wallet connected, Connected means the wallet app is connected and we know the user's wallet address.
  • NotSignedIn / SignedIn - The result from calling Get Account (opens in a new tab) or Register Account (opens in a new tab). NotSignedIn means there's no registered account associated with the wallet address and brokerId pair. SignedIn means that an account has been previously registered with the wallet address and brokerId pair.
  • DisabledTrading / EnableTrading - The result from calling Get Orderly Key (opens in a new tab) or Add Orderly Key (opens in a new tab). DisabledTrading means no active Orderly Key is found in the KeyStore. EnableTrading means an active Orderly Key is found in the KeyStore and can be used to authenticate for any private API requests.

Get account status

There are two ways to get the account status. You can get it either directly from useAccount's value, or through subscribing to the account status change event:

  • Retrieve from the state value in useAccount:
const { account, state, createOrderlyKey, createAccount } = useAccount();

state also contains the following account info, as shown below:

interface AccountState {
  status: AccountStatusEnum;
  checking: boolean;
  accountId?: string;
  userId?: string;
  address?: string;
}
  • Subscribe to the change:status event in the 'Account' instance. (account is a singleton of the Account instance: more information can be found here)。
import { useAccount } from "@orderly.network/hooks";
const { account, state, createOrderlyKey, createAccount } = useAccount();
 
const statusChangeHandler = (nextState: AccountState) => {
  // do something
};
 
useEffect(() => {
  account.on("change:status", statusChangeHandler);
 
  return () => {
    account.off("change:status", statusChangeHandler);
  };
}, []);

Update account status

@orderly.network/hooks currently does not provide the functionality for connecting wallets, builders have to handle wallet connection logic themselves.

Once the user has successfully connected a wallet, use the setAddress method to pass the address to the Account instance. 3 additional parameters need to be passed when calling setAddress:

  • provider - provider according to the EIP1193Provider standard
  • chain - information regarding the connected chain, including the id
  • wallet - wallet information, including the name of the wallet app

The setAddress method in Account will check the accound_id and the existence of any valid OrderlyKey from the provided address and update the state. If the state is AccountStatusEnum.EnableTrading, then the full login process in complete and the user can then access all functionalities provided by Orderly.

import { useAccount } from "@orderly.network/hooks";
const { account, state } = useAccount();
 
//... logic for connecting wallets ...
 
/**
 * setAddress will return Promise<AccountStatusEnum>, and state will be updated
 */
const nextState = await account.setAddress("<address>", {
  provider: provider, // EIP1193Provider
  chain: {
    id: 1,
  },
  wallet: {
    name: "", // Wallet app name
  },
});

Demo

() => {
  const { state, account } = useAccount();

  return (
    <>
      <div>{`status: ${state.status}`}</div>
      <div>{`address: ${state.address}`}</div>
      <div className="flex mt-3 gap-3">
        <button disabled={state.status > AccountStatusEnum.NotSignedIn}>
          Crate Account
        </button>
        <button
          disabled={state.status > AccountStatusEnum.DisabledTrading}
          onClick={() => {
            account.createOrderlyKey(30);
          }}
        >
          Create Orderly Key
        </button>
      </div>
    </>
  );
};

Create account

import { useAccount } from "@orderly.network/hooks";
const { account, state, createOrderlyKey, createAccount } = useAccount();
 
const res = await createAccount();

Orderly Key

Creates an OrderlyKey. The validity of the OrderlyKey (in days) can be set.

import { useAccount } from "@orderly.network/hooks";
const { account, state, createOrderlyKey, createAccount } = useAccount();
 
const res = await createOrderlyKey(30);

After the OrderlyKey is successfully created, it will be stored in the KeyStore, and will be used for API signatures later on.

Asset

Please refer to asset